mirror of
https://github.com/cosscom/coss.git
synced 2026-09-14 20:06:50 +08:00
Volnei Munhoz
33 lines
3.4 KiB
JSON
33 lines
3.4 KiB
JSON
{
|
|
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
|
"name": "alert",
|
|
"type": "registry:ui",
|
|
"files": [
|
|
{
|
|
"path": "registry/default/ui/alert.tsx",
|
|
"content": "import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst alertVariants = cva(\n \"relative grid w-full items-start gap-x-2 gap-y-0.5 rounded-xl border px-3.5 py-3 text-sm text-card-foreground has-data-[slot=alert-action]:grid-cols-[1fr_auto] has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] has-[>svg]:gap-x-2 has-[>svg]:has-data-[slot=alert-action]:grid-cols-[calc(var(--spacing)*4)_1fr_auto] [&>svg]:h-[1lh] [&>svg]:w-4\",\n {\n variants: {\n variant: {\n default:\n \"bg-transparent dark:bg-input/32 [&>svg]:text-muted-foreground\",\n info: \"border-info/32 bg-info/4 [&>svg]:text-info\",\n success: \"border-success/32 bg-success/4 [&>svg]:text-success\",\n warning: \"border-warning/32 bg-warning/4 [&>svg]:text-warning\",\n error:\n \"border-destructive/32 bg-destructive/4 [&>svg]:text-destructive\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n },\n }\n)\n\nfunction Alert({\n className,\n variant,\n ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof alertVariants>) {\n return (\n <div\n data-slot=\"alert\"\n role=\"alert\"\n className={cn(alertVariants({ variant }), className)}\n {...props}\n />\n )\n}\n\nfunction AlertTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n <div\n data-slot=\"alert-title\"\n className={cn(\"font-medium [svg~&]:col-start-2\", className)}\n {...props}\n />\n )\n}\n\nfunction AlertDescription({\n className,\n ...props\n}: React.ComponentProps<\"div\">) {\n return (\n <div\n data-slot=\"alert-description\"\n className={cn(\n \"flex flex-col gap-2.5 text-muted-foreground [svg~&]:col-start-2\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction AlertAction({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n <div\n data-slot=\"alert-action\"\n className={cn(\n \"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\",\n className\n )}\n {...props}\n />\n )\n}\n\nexport { Alert, AlertTitle, AlertDescription, AlertAction }\n",
|
|
"type": "registry:ui"
|
|
}
|
|
],
|
|
"cssVars": {
|
|
"light": {
|
|
"destructive-foreground": "var(--color-red-700)",
|
|
"info": "var(--color-blue-500)",
|
|
"info-foreground": "var(--color-blue-700)",
|
|
"success": "var(--color-emerald-500)",
|
|
"success-foreground": "var(--color-emerald-700)",
|
|
"warning": "var(--color-amber-500)",
|
|
"warning-foreground": "var(--color-amber-700)"
|
|
},
|
|
"dark": {
|
|
"destructive-foreground": "var(--color-red-400)",
|
|
"info": "var(--color-blue-500)",
|
|
"info-foreground": "var(--color-blue-400)",
|
|
"success": "var(--color-emerald-500)",
|
|
"success-foreground": "var(--color-emerald-400)",
|
|
"warning": "var(--color-amber-500)",
|
|
"warning-foreground": "var(--color-amber-400)"
|
|
}
|
|
}
|
|
}
|