{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "alert",
  "title": "Alert",
  "description": "Displays a callout for user attention.",
  "registryDependencies": [],
  "files": [
    {
      "path": "ui/alert.tsx",
      "content": "import { cva, type VariantProps } from \"class-variance-authority\";\nimport {\n  Children,\n  cloneElement,\n  createContext,\n  isValidElement,\n  useContext,\n  useMemo,\n} from \"react\";\nimport { Text, View } from \"react-native\";\nimport { cn } from \"@/lib/utils\";\n\n// Types\ntype AlertVariant = VariantProps<typeof alertVariants>[\"variant\"];\n\ntype AlertContextValue = {\n  variant: AlertVariant;\n};\n\ntype AlertProps = React.ComponentProps<typeof View> &\n  VariantProps<typeof alertVariants> & {\n    children?: React.ReactNode;\n  };\n\ntype AlertIconProps = {\n  children: React.ReactNode;\n  className?: string;\n};\n\ntype ClassNameElement = React.ReactElement<{ className?: string }>;\n\ntype AlertSlot = \"icon\" | \"action\";\n\ntype AlertSlotComponent = {\n  displayName?: string;\n  slot?: AlertSlot;\n};\n\n// Context\nconst AlertContext = createContext<AlertContextValue | null>(null);\n\nconst useAlertContext = () => {\n  const context = useContext(AlertContext);\n  if (!context) {\n    throw new Error(\"Alert components must be used within an Alert\");\n  }\n  return context;\n};\n\nconst getAlertSlot = (type: string | React.JSXElementConstructor<unknown>) => {\n  if (typeof type === \"string\") {\n    return;\n  }\n\n  return (type as AlertSlotComponent).slot;\n};\n\n// Components\nexport const Alert = ({\n  children,\n  className,\n  variant = \"default\",\n  style,\n  ...props\n}: AlertProps) => {\n  const ctx = useMemo(\n    () => ({\n      variant,\n    }),\n    [variant]\n  );\n\n  const childArray = Children.toArray(children);\n  const icons: React.ReactNode[] = [];\n  const actions: React.ReactNode[] = [];\n  const content: React.ReactNode[] = [];\n\n  for (const child of childArray) {\n    if (!isValidElement(child)) {\n      content.push(child);\n      continue;\n    }\n\n    const slot = getAlertSlot(child.type);\n\n    if (slot === \"icon\") {\n      icons.push(child);\n      continue;\n    }\n\n    if (slot === \"action\") {\n      actions.push(child);\n      continue;\n    }\n\n    content.push(child);\n  }\n\n  const hasAction = actions.length > 0;\n\n  return (\n    <AlertContext.Provider value={ctx}>\n      <View\n        accessibilityRole=\"alert\"\n        className={cn(\n          alertVariants({ className, variant }),\n          hasAction && \"pr-24\"\n        )}\n        data-slot=\"alert\"\n        style={[\n          {\n            alignItems: \"flex-start\",\n            flexDirection: \"row\",\n            gap: 8,\n          },\n          style,\n        ]}\n        {...props}\n      >\n        {icons}\n        <View\n          className=\"min-w-0 flex-1 gap-0.5\"\n          style={{\n            flexDirection: \"column\",\n            flexGrow: 1,\n            flexShrink: 1,\n            gap: 2,\n            minWidth: 0,\n          }}\n        >\n          {content}\n        </View>\n        {actions}\n      </View>\n    </AlertContext.Provider>\n  );\n};\n\nexport const AlertIcon = ({\n  children,\n  className,\n  ...props\n}: AlertIconProps) => {\n  const { variant } = useAlertContext();\n  const child = Children.only(children);\n\n  if (!child) {\n    if (__DEV__) {\n      throw new Error(\"AlertIcon expects a single React element as children\");\n    }\n    return null;\n  }\n\n  const element = child as ClassNameElement;\n\n  return (\n    <View className=\"pt-0.5\" data-slot=\"alert-icon\" style={{ flexShrink: 0 }}>\n      {cloneElement(element, {\n        ...props,\n        className: cn(\n          alertIconVariants({ variant }),\n          className,\n          element.props.className\n        ),\n      })}\n    </View>\n  );\n};\nAlertIcon.displayName = \"AlertIcon\";\nAlertIcon.slot = \"icon\" as const;\n\nexport const AlertTitle = ({\n  className,\n  ...props\n}: React.ComponentProps<typeof Text>) => {\n  const { variant } = useAlertContext();\n\n  return (\n    <Text\n      className={cn(alertTitleVariants({ variant }), className)}\n      data-slot=\"alert-title\"\n      {...props}\n    />\n  );\n};\nAlertTitle.displayName = \"AlertTitle\";\n\nexport const AlertDescription = ({\n  className,\n  ...props\n}: React.ComponentProps<typeof Text>) => {\n  const { variant } = useAlertContext();\n\n  return (\n    <Text\n      className={cn(alertDescriptionVariants({ variant }), className)}\n      data-slot=\"alert-description\"\n      {...props}\n    />\n  );\n};\nAlertDescription.displayName = \"AlertDescription\";\n\nexport const AlertAction = ({\n  className,\n  style,\n  ...props\n}: React.ComponentProps<typeof View>) => {\n  return (\n    <View\n      className={className}\n      data-slot=\"alert-action\"\n      style={[{ position: \"absolute\", right: 8, top: 8 }, style]}\n      {...props}\n    />\n  );\n};\nAlertAction.displayName = \"AlertAction\";\nAlertAction.slot = \"action\" as const;\n\n// Styles\nconst alertVariants = cva(\n  \"relative w-full rounded-2xl bg-card px-4 py-3 dark:bg-muted\",\n  {\n    defaultVariants: {\n      variant: \"default\",\n    },\n    variants: {\n      variant: {\n        default: \"\",\n        destructive: \"\",\n        info: \"\",\n        success: \"\",\n        warning: \"\",\n      },\n    },\n  }\n);\n\nconst alertIconVariants = cva(\"size-4\", {\n  variants: {\n    variant: {\n      default: \"text-foreground\",\n      destructive: \"text-destructive\",\n      info: \"text-info\",\n      success: \"text-success\",\n      warning: \"text-warning\",\n    },\n  },\n});\n\nconst alertTitleVariants = cva(\"font-medium text-sm leading-snug\", {\n  variants: {\n    variant: {\n      default: \"text-foreground\",\n      destructive: \"text-destructive\",\n      info: \"text-info\",\n      success: \"text-success\",\n      warning: \"text-warning\",\n    },\n  },\n});\n\nconst alertDescriptionVariants = cva(\"text-sm\", {\n  variants: {\n    variant: {\n      default: \"text-muted-foreground\",\n      destructive: \"text-destructive/90\",\n      info: \"text-info/90\",\n      success: \"text-success/90\",\n      warning: \"text-warning/90\",\n    },\n  },\n});\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}