mirror of
https://github.com/temetro/temetro.git
synced 2026-08-06 17:07:40 +00:00
Khalid Abdi
4d6a5dc008
Components: - Replace components/ui primitives with COSS equivalents from the @coss/* shadcn registry. Add menu/preview-card/group; remove the superseded dropdown-menu, hover-card, button-group; keep carousel (no COSS equivalent). - Migrate live call sites to canonical COSS APIs preserving layout/behavior: sidebar menus (nav-user, team-switcher, nav-notifications), chat-input radio menu, patient dialogs/cards, auth forms (FieldGroup -> flex column), settings. - ai-elements: migrate the live conversation/message with behavior parity (Tooltip via render, Group/GroupText); repoint dormant files (hover-card -> preview-card, dropdown-menu -> menu, button-group -> group, InputGroupButton -> Button). Residual pre-existing Base UI type drift stays behind ignoreBuildErrors. Theme: - Adopt COSS default neutral tokens in globals.css with light + dark palettes. - Add next-themes (defaultTheme=dark, enableSystem) and drop the forced dark class. Align font variables to the COSS contract (--font-sans/-heading/-mono). Make scrollbars theme-aware. i18n: - Add i18next + react-i18next (lib/i18n/config.ts, locales/en/translation.json, components/i18n-provider.tsx mounted in layout). Convert auth forms, sidebar nav, and settings tabs to useTranslation() as the reference pattern. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
65 lines
2.7 KiB
TypeScript
65 lines
2.7 KiB
TypeScript
"use client";
|
|
|
|
import { mergeProps } from "@base-ui/react/merge-props";
|
|
import { useRender } from "@base-ui/react/use-render";
|
|
import { cva, type VariantProps } from "class-variance-authority";
|
|
import type React from "react";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
export const badgeVariants = cva(
|
|
"relative inline-flex shrink-0 items-center justify-center gap-1 whitespace-nowrap rounded-sm border border-transparent font-medium outline-none transition-shadow focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-64 [&_svg:not([class*='opacity-'])]:opacity-80 [&_svg:not([class*='size-'])]:size-3.5 sm:[&_svg:not([class*='size-'])]:size-3 [&_svg]:pointer-events-none [&_svg]:shrink-0 [button&,a&]:cursor-pointer [button&,a&]:pointer-coarse:after:absolute [button&,a&]:pointer-coarse:after:size-full [button&,a&]:pointer-coarse:after:min-h-11 [button&,a&]:pointer-coarse:after:min-w-11",
|
|
{
|
|
defaultVariants: {
|
|
size: "default",
|
|
variant: "default",
|
|
},
|
|
variants: {
|
|
size: {
|
|
default:
|
|
"h-5.5 min-w-5.5 px-[calc(--spacing(1)-1px)] text-sm sm:h-4.5 sm:min-w-4.5 sm:text-xs",
|
|
lg: "h-6.5 min-w-6.5 px-[calc(--spacing(1.5)-1px)] text-base sm:h-5.5 sm:min-w-5.5 sm:text-sm",
|
|
sm: "h-5 min-w-5 rounded-[.25rem] px-[calc(--spacing(1)-1px)] text-xs sm:h-4 sm:min-w-4 sm:text-[.625rem]",
|
|
},
|
|
variant: {
|
|
default:
|
|
"bg-primary text-primary-foreground [button&,a&]:hover:bg-primary/90",
|
|
destructive:
|
|
"bg-destructive text-white [button&,a&]:hover:bg-destructive/90",
|
|
error:
|
|
"bg-destructive/8 text-destructive-foreground dark:bg-destructive/16",
|
|
info: "bg-info/8 text-info-foreground dark:bg-info/16",
|
|
outline:
|
|
"border-input bg-background text-foreground dark:bg-input/32 [button&,a&]:hover:bg-accent/50 dark:[button&,a&]:hover:bg-input/48",
|
|
secondary:
|
|
"bg-secondary text-secondary-foreground [button&,a&]:hover:bg-secondary/90",
|
|
success: "bg-success/8 text-success-foreground dark:bg-success/16",
|
|
warning: "bg-warning/8 text-warning-foreground dark:bg-warning/16",
|
|
},
|
|
},
|
|
},
|
|
);
|
|
|
|
export interface BadgeProps extends useRender.ComponentProps<"span"> {
|
|
variant?: VariantProps<typeof badgeVariants>["variant"];
|
|
size?: VariantProps<typeof badgeVariants>["size"];
|
|
}
|
|
|
|
export function Badge({
|
|
className,
|
|
variant,
|
|
size,
|
|
render,
|
|
...props
|
|
}: BadgeProps): React.ReactElement {
|
|
const defaultProps = {
|
|
className: cn(badgeVariants({ className, size, variant })),
|
|
"data-slot": "badge",
|
|
};
|
|
|
|
return useRender({
|
|
defaultTagName: "span",
|
|
props: mergeProps<"span">(defaultProps, props),
|
|
render,
|
|
});
|
|
}
|