{"name":"alert","type":"registry:ui","files":[{"path":"alert.tsx","type":"registry:ui","content":"\"use client\"\n\nimport * as React from \"react\"\nimport { AlertDialog as AlertDialogPrimitive } from \"@base-ui-components/react/alert-dialog\"\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\nfunction AlertDialog(props: AlertDialogPrimitive.Root.Props) {\n  return <AlertDialogPrimitive.Root data-slot=\"alert-dialog\" {...props} />\n}\n\nfunction AlertDialogTrigger(props: AlertDialogPrimitive.Trigger.Props) {\n  return (\n    <AlertDialogPrimitive.Trigger data-slot=\"alert-dialog-trigger\" {...props} />\n  )\n}\n\nfunction AlertDialogPortal(props: AlertDialogPrimitive.Portal.Props) {\n  return <AlertDialogPrimitive.Portal {...props} />\n}\n\nfunction AlertDialogBackdrop({\n  className,\n  ...props\n}: AlertDialogPrimitive.Backdrop.Props) {\n  return (\n    <AlertDialogPrimitive.Backdrop\n      data-slot=\"alert-dialog-backdrop\"\n      className={cn(\n        \"fixed inset-0 z-[var(--hui-z-index-portal)] bg-black/32 backdrop-blur-sm transition-all duration-200 ease-out data-ending-style:opacity-0 data-starting-style:opacity-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogPopup({\n  className,\n  ...props\n}: AlertDialogPrimitive.Popup.Props) {\n  return (\n    <AlertDialogPortal>\n      <AlertDialogBackdrop />\n      <div className=\"fixed inset-0 z-[var(--hui-z-index-portal)]\">\n        <div className=\"flex h-[100dvh] flex-col items-center overflow-hidden pt-6 max-sm:before:flex-1 sm:overflow-y-auto sm:p-4 sm:before:basis-[20vh] sm:after:flex-1\">\n          <AlertDialogPrimitive.Popup\n            data-slot=\"alert-dialog-popup\"\n            className={cn(\n              \"row-start-2 grid w-full min-w-0 origin-top gap-0 border bg-popover bg-clip-padding p-0 text-popover-foreground shadow-lg transition-[scale,opacity,translate] duration-200 ease-in-out will-change-transform data-ending-style:opacity-0 data-starting-style:opacity-0 max-sm:overflow-y-auto max-sm:border-none max-sm:opacity-[calc(1-min(var(--nested-dialogs),1))] max-sm:data-ending-style:translate-y-4 max-sm:data-starting-style:translate-y-4 sm:max-w-lg sm:-translate-y-[calc(1.25rem*var(--nested-dialogs))] sm:scale-[calc(1-0.1*var(--nested-dialogs))] sm:rounded-2xl sm:data-ending-style:scale-98 sm:data-starting-style:scale-98 dark:bg-clip-border\",\n              \"relative before:pointer-events-none before:absolute before:inset-0 before:shadow-[0_1px_--theme(--color-black/4%)] max-sm:before:hidden sm:before:rounded-[calc(var(--radius-2xl)-1px)] sm:data-nested:data-ending-style:translate-y-8 sm:data-nested:data-starting-style:translate-y-8 dark:before:shadow-[0_-1px_--theme(--color-white/8%)]\",\n              className\n            )}\n            {...props}\n          />\n        </div>\n      </div>\n    </AlertDialogPortal>\n  )\n}\n\nfunction AlertDialogHeader({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-dialog-header\"\n      className={cn(\n        \"flex flex-col gap-2 border-b-0 p-[var(--hui-space-7)] text-center [&:has(+_[data-slot=alert-dialog-body])]:pb-[var(--hui-space-5)] sm:text-left\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogBody({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-dialog-body\"\n      className={cn(\n        \"px-[var(--hui-space-7)] pb-[var(--hui-space-5)] first:p-[var(--hui-space-7)]\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogFooter({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-dialog-footer\"\n      className={cn(\n        \"flex flex-col-reverse gap-2 border-t-0 px-[var(--hui-space-7)] pb-[var(--hui-space-7)] sm:flex-row sm:justify-end\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogTitle({\n  className,\n  ...props\n}: AlertDialogPrimitive.Title.Props) {\n  return (\n    <AlertDialogPrimitive.Title\n      data-slot=\"alert-dialog-title\"\n      className={cn(\"text-lg font-semibold\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogDescription({\n  className,\n  ...props\n}: AlertDialogPrimitive.Description.Props) {\n  return (\n    <AlertDialogPrimitive.Description\n      data-slot=\"alert-dialog-description\"\n      className={cn(\"text-sm text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogClose(props: AlertDialogPrimitive.Close.Props) {\n  return (\n    <AlertDialogPrimitive.Close data-slot=\"alert-dialog-close\" {...props} />\n  )\n}\n\nexport {\n  Alert,\n  AlertTitle,\n  AlertDescription,\n  AlertAction,\n  AlertDialog,\n  AlertDialogPortal,\n  AlertDialogBackdrop,\n  AlertDialogBackdrop as AlertDialogOverlay,\n  AlertDialogTrigger,\n  AlertDialogPopup,\n  AlertDialogPopup as AlertDialogContent,\n  AlertDialogHeader,\n  AlertDialogBody,\n  AlertDialogFooter,\n  AlertDialogTitle,\n  AlertDialogDescription,\n  AlertDialogClose,\n}\n","target":"components/ui/alert.tsx"}],"dependencies":["@base-ui-components/react","class-variance-authority"]}