{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "alert-styled", "title": "Alert essentials", "description": "Styled alert: the essentials set. 5 decorative alert variations (SoftAlert, LeftBarAlert, GlassAlert, GlowAlert, IconPulseAlert) on the ai2 token system, powered by framer-motion, reduced-motion aware and sized sm to xl. Part of the free styled layer.", "dependencies": [ "motion@^12.42.2" ], "registryDependencies": [ "@ai2/tokens" ], "files": [ { "path": "registry/ai2/styled/alert-styled.tsx", "content": "\"use client\"\n\nimport type * as React from \"react\"\nimport { motion, useReducedMotion } from \"motion/react\"\n\nimport { cn } from \"@/lib/utils\"\n\n/* Styled alert family: 5 decorative alert surfaces. Colour comes ONLY from semantic tokens (alpha via color-mix); the tone prop maps to the info/success/warning/danger tokens through a small record. framer-motion is used only in IconPulse; the pulse stops under reduced-motion. Layout: a leading icon plus (title row plus description {children}). */\n\nexport type StyledSize = \"sm\" | \"md\" | \"lg\" | \"xl\"\n\nexport type StyledTone = \"info\" | \"success\" | \"warning\" | \"danger\"\n\nconst pad: Record = {\n sm: \"p-3 text-sm\",\n md: \"p-4 text-sm\",\n lg: \"p-4 text-base\",\n xl: \"p-5 text-base\",\n}\n\nconst base =\n \"relative flex w-full items-start gap-3 rounded-lg [&_svg]:size-4 [&_svg]:shrink-0 [&_i]:text-base [&_i]:leading-none\"\n\n/* Bastaki ikon tone rengi - tum varyasyonlarda paylasilir. */\nconst iconTone: Record = {\n info: \"text-info\",\n success: \"text-success\",\n warning: \"text-warning-soft-foreground\",\n danger: \"text-danger\",\n}\n\ntype BaseProps = React.ComponentProps<\"div\"> & {\n size?: StyledSize\n tone?: StyledTone\n title?: React.ReactNode\n icon?: React.ReactNode\n}\n\n/* Ortak govde: ikon sutunu + baslik/aciklama. */\nfunction Body({\n icon,\n iconClassName,\n title,\n children,\n}: {\n icon?: React.ReactNode\n iconClassName?: string\n title?: React.ReactNode\n children?: React.ReactNode\n}) {\n return (\n <>\n {icon ? (\n \n {icon}\n \n ) : null}\n

\n {title ? (\n

\n {title}\n

\n ) : null}\n {children ? (\n \n {children}\n

\n ) : null}\n \n \n )\n}\n\n/* Soft: soft-token dolgu + eslesen kenar + tone ikon. Temiz varsayilan. */\nconst softTone: Record = {\n info: \"bg-info-soft text-info-soft-foreground border border-info/30\",\n success: \"bg-success-soft text-success-soft-foreground border border-success/30\",\n warning: \"bg-warning-soft text-warning-soft-foreground border border-warning/40\",\n danger: \"bg-danger-soft text-danger-soft-foreground border border-danger/30\",\n}\n\nexport function SoftAlert({\n className,\n size = \"md\",\n tone = \"info\",\n title,\n children,\n icon,\n ...props\n}: BaseProps) {\n return (\n \n \n {children}\n \n \n )\n}\n\n/* LeftBar: notr yuzey + kalin tone-renkli sol kenar aksani. */\nconst leftBarTone: Record = {\n info: \"border-l-info\",\n success: \"border-l-success\",\n warning: \"border-l-warning\",\n danger: \"border-l-danger\",\n}\n\nexport function LeftBarAlert({\n className,\n size = \"md\",\n tone = \"info\",\n title,\n children,\n icon,\n ...props\n}: BaseProps) {\n return (\n \n \n {children}\n \n \n )\n}\n\n/* Glass: frosted surface yuzey + tone-tinted kenar + backdrop-blur. */\nconst glassTone: Record = {\n info: \"border-info/30\",\n success: \"border-success/30\",\n warning: \"border-warning/40\",\n danger: \"border-danger/30\",\n}\n\nexport function GlassAlert({\n className,\n size = \"md\",\n tone = \"info\",\n title,\n children,\n icon,\n ...props\n}: BaseProps) {\n return (\n \n \n {children}\n \n \n )\n}\n\n/* Glow: alert etrafinda tone-token isima (box-shadow). */\nconst glowTone: Record = {\n info: \"shadow-[0_0_20px_-4px_var(--info)]\",\n success: \"shadow-[0_0_20px_-4px_var(--success)]\",\n warning: \"shadow-[0_0_20px_-4px_var(--warning)]\",\n danger: \"shadow-[0_0_20px_-4px_var(--danger)]\",\n}\n\nexport function GlowAlert({\n className,\n size = \"md\",\n tone = \"info\",\n title,\n children,\n icon,\n ...props\n}: BaseProps) {\n return (\n \n \n {children}\n \n \n )\n}\n\n/* IconPulse: a soft alert whose leading tone icon pulses gently for attention. The pulse stops under reduced-motion. */\nexport function IconPulseAlert({\n className,\n size = \"md\",\n tone = \"info\",\n title,\n children,\n icon,\n ...props\n}: BaseProps) {\n const reduce = useReducedMotion()\n return (\n \n {icon ? (\n \n {icon}\n \n ) : null}\n

\n {title ? (\n

\n {title}\n

\n ) : null}\n {children ? (\n \n {children}\n

\n ) : null}\n \n \n )\n}\n", "type": "registry:component", "target": "components/ui/alert-styled.tsx" } ], "categories": [ "styled", "alert" ], "type": "registry:component" }