mirror of
https://github.com/temetro/temetro.git
synced 2026-08-03 23:47:58 +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>
85 lines
2.4 KiB
TypeScript
85 lines
2.4 KiB
TypeScript
import { cva, type VariantProps } from "class-variance-authority";
|
|
import type * as React from "react";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
const alertVariants = cva(
|
|
"relative grid w-full items-start gap-x-2 gap-y-0.5 rounded-xl border px-3.5 py-3 text-card-foreground text-sm has-[>svg]:has-data-[slot=alert-action]:grid-cols-[calc(var(--spacing)*4)_1fr_auto] has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] has-data-[slot=alert-action]:grid-cols-[1fr_auto] has-[>svg]:gap-x-2 [&>svg]:h-lh [&>svg]:w-4",
|
|
{
|
|
defaultVariants: {
|
|
variant: "default",
|
|
},
|
|
variants: {
|
|
variant: {
|
|
default:
|
|
"bg-transparent dark:bg-input/32 [&>svg]:text-muted-foreground",
|
|
error:
|
|
"border-destructive/32 bg-destructive/4 [&>svg]:text-destructive",
|
|
info: "border-info/32 bg-info/4 [&>svg]:text-info",
|
|
success: "border-success/32 bg-success/4 [&>svg]:text-success",
|
|
warning: "border-warning/32 bg-warning/4 [&>svg]:text-warning",
|
|
},
|
|
},
|
|
},
|
|
);
|
|
|
|
export function Alert({
|
|
className,
|
|
variant,
|
|
...props
|
|
}: React.ComponentProps<"div"> &
|
|
VariantProps<typeof alertVariants>): React.ReactElement {
|
|
return (
|
|
<div
|
|
className={cn(alertVariants({ variant }), className)}
|
|
data-slot="alert"
|
|
role="alert"
|
|
{...props}
|
|
/>
|
|
);
|
|
}
|
|
|
|
export function AlertTitle({
|
|
className,
|
|
...props
|
|
}: React.ComponentProps<"div">): React.ReactElement {
|
|
return (
|
|
<div
|
|
className={cn("font-medium [svg~&]:col-start-2", className)}
|
|
data-slot="alert-title"
|
|
{...props}
|
|
/>
|
|
);
|
|
}
|
|
|
|
export function AlertDescription({
|
|
className,
|
|
...props
|
|
}: React.ComponentProps<"div">): React.ReactElement {
|
|
return (
|
|
<div
|
|
className={cn(
|
|
"flex flex-col gap-2.5 text-muted-foreground [svg~&]:col-start-2",
|
|
className,
|
|
)}
|
|
data-slot="alert-description"
|
|
{...props}
|
|
/>
|
|
);
|
|
}
|
|
|
|
export function AlertAction({
|
|
className,
|
|
...props
|
|
}: React.ComponentProps<"div">): React.ReactElement {
|
|
return (
|
|
<div
|
|
className={cn(
|
|
"flex gap-1 max-sm:col-start-2 max-sm:mt-2 sm:row-start-1 sm:row-end-3 sm:self-center sm:[[data-slot=alert-description]~&]:col-start-2 sm:[[data-slot=alert-title]~&]:col-start-2 sm:[svg~&]:col-start-2 sm:[svg~[data-slot=alert-description]~&]:col-start-3 sm:[svg~[data-slot=alert-title]~&]:col-start-3",
|
|
className,
|
|
)}
|
|
data-slot="alert-action"
|
|
{...props}
|
|
/>
|
|
);
|
|
}
|