{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "description": "An inline status message in four severities, with an optional dismiss button.",
  "docs": "Two steps after installing: import the copied stylesheet once at your app entry — it lands at `styles/liquefy-ui.css` — or `@import` it from your global CSS *before* `tailwindcss`, so Tailwind utilities keep winning over component styles. Then wrap the tree in `<LiquefyProvider>`, which is where every component reads its tokens from. Every copied file already carries its own 'use client' directive. Full documentation: https://liquefy-ui.com/#/docs/installation",
  "files": [
    {
      "content": "'use client'\n\nimport { forwardRef, type HTMLAttributes, type ReactNode } from 'react'\nimport { DangerGlyph, InfoGlyph, SuccessGlyph, WarningGlyph, XGlyph } from '@/lib/internal-glyphs'\nimport { useLiquidStyles, type LiquidStyleProps } from '@/lib/styles-prop'\n\nexport type LiquidAlertSeverity = 'info' | 'success' | 'warning' | 'danger'\n\n// `title` is omitted because HTMLAttributes declares it as the tooltip attribute,\n// i.e. a `string`, and intersecting that with `ReactNode` leaves `string` — the\n// `<strong>` below could never be given an element.\nexport type LiquidAlertProps = Omit<HTMLAttributes<HTMLDivElement>, 'title'> & LiquidStyleProps & {\n  action?: ReactNode\n  children: ReactNode\n  closeLabel?: string\n  icon?: ReactNode\n  onClose?: () => void\n  severity?: LiquidAlertSeverity\n  title?: ReactNode\n}\n\nconst severityGlyphs = {\n  danger: <DangerGlyph size={19} />,\n  info: <InfoGlyph size={19} />,\n  success: <SuccessGlyph size={19} />,\n  warning: <WarningGlyph size={19} />,\n} as const\n\nexport const LiquidAlert = forwardRef<HTMLDivElement, LiquidAlertProps>(({\n  action,\n  children,\n  className,\n  closeLabel = 'Dismiss',\n  icon,\n  onClose,\n  severity = 'info',\n  style,\n  styles,\n  title,\n  ...props\n}, ref) => {\n  const root = useLiquidStyles('lq-alert', { className, style, styles })\n\n  return (\n    <div\n      className={root.className}\n      data-severity={severity}\n      ref={ref}\n      role={severity === 'danger' || severity === 'warning' ? 'alert' : 'status'}\n      style={root.style}\n      {...props}\n    >\n      <span className=\"lq-alert__icon\">{icon ?? severityGlyphs[severity]}</span>\n      <span className=\"lq-alert__copy\">\n        {title && <strong className=\"lq-alert__title\">{title}</strong>}\n        <span className=\"lq-alert__message\">{children}</span>\n      </span>\n      {action && <span className=\"lq-alert__action\">{action}</span>}\n      {onClose && (\n        <button aria-label={closeLabel} className=\"lq-alert__close\" onClick={onClose} type=\"button\">\n          <XGlyph size={13} />\n        </button>\n      )}\n    </div>\n  )\n})\n\nLiquidAlert.displayName = 'LiquidAlert'\n",
      "path": "registry/liquid-alert.tsx",
      "type": "registry:ui"
    }
  ],
  "name": "liquid-alert",
  "registryDependencies": [
    "https://liquefy-ui.com/r/liquefy-ui.json",
    "https://liquefy-ui.com/r/internal-glyphs.json",
    "https://liquefy-ui.com/r/styles-prop.json"
  ],
  "title": "LiquidAlert",
  "type": "registry:ui"
}