{
  "name": "alert",
  "title": "Uiscore Alert",
  "description": "Alert component with tone, appearance and compact or extended layout.",
  "type": "ui",
  "dependencies": [
    "class-variance-authority",
    "clsx",
    "lucide-react",
    "tailwind-merge"
  ],
  "cssPrefixes": [
    "uis-alert-"
  ],
  "files": [
    {
      "path": "src/components/ui/alert.tsx",
      "content": "import * as React from \"react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport {\n  Check,\n  CircleAlert,\n  CircleCheck,\n  Clock3,\n  Info,\n  TriangleAlert,\n  X,\n} from \"lucide-react\";\n\nimport { cn } from \"../lib/utils\";\nimport {\n  type AlertAppearance,\n  type AlertDesign,\n  type AlertState,\n} from \"./alert-tokens\";\n\nconst alertVariants = cva(\n  \"relative flex w-full max-w-[556px] items-start gap-3 overflow-hidden rounded-[8px] border border-solid p-3 font-['Plus_Jakarta_Sans'] text-[14px] leading-5 [background-color:var(--uis-alert-bg)] [border-color:var(--uis-alert-border)] [box-shadow:var(--uis-alert-shadow)]\",\n  {\n    variants: {\n      design: {\n        compact: \"\",\n        extended: \"\",\n      },\n      appearance: {\n        default:\n          \"[--uis-alert-bg:var(--uis-alert-bg-default)] [--uis-alert-border:var(--uis-alert-border-default)] [--uis-alert-shadow:var(--uis-alert-shadow-default)] [--uis-alert-action:var(--uis-alert-action-default)]\",\n        colored:\n          \"[--uis-alert-bg:var(--uis-alert-tone-bg-soft)] [--uis-alert-border:var(--uis-alert-tone-border-soft)] [--uis-alert-shadow:var(--uis-alert-shadow-colored)] [--uis-alert-action:var(--uis-alert-action-colored)]\",\n      },\n      state: {\n        default:\n          \"[--uis-alert-icon:var(--uis-alert-icon-default)] [--uis-alert-tone-bg-soft:var(--uis-alert-default-bg-soft)] [--uis-alert-tone-border-soft:var(--uis-alert-default-border-soft)]\",\n        info: \"[--uis-alert-icon:var(--uis-alert-icon-info)] [--uis-alert-tone-bg-soft:var(--uis-alert-info-bg-soft)] [--uis-alert-tone-border-soft:var(--uis-alert-info-border-soft)]\",\n        success:\n          \"[--uis-alert-icon:var(--uis-alert-icon-success)] [--uis-alert-tone-bg-soft:var(--uis-alert-success-bg-soft)] [--uis-alert-tone-border-soft:var(--uis-alert-success-border-soft)]\",\n        warning:\n          \"[--uis-alert-icon:var(--uis-alert-icon-warning)] [--uis-alert-tone-bg-soft:var(--uis-alert-warning-bg-soft)] [--uis-alert-tone-border-soft:var(--uis-alert-warning-border-soft)]\",\n        error:\n          \"[--uis-alert-icon:var(--uis-alert-icon-error)] [--uis-alert-tone-bg-soft:var(--uis-alert-error-bg-soft)] [--uis-alert-tone-border-soft:var(--uis-alert-error-border-soft)]\",\n      },\n    },\n    compoundVariants: [\n      {\n        design: \"extended\",\n        appearance: \"default\",\n        class: \"[--uis-alert-action:var(--uis-alert-action-extended-default)]\",\n      },\n    ],\n    defaultVariants: {\n      design: \"compact\",\n      appearance: \"default\",\n      state: \"default\",\n    },\n  },\n);\n\nconst toneIconMap = {\n  default: Clock3,\n  info: Info,\n  success: CircleCheck,\n  warning: TriangleAlert,\n  error: CircleAlert,\n} as const;\n\nexport interface AlertProps\n  extends\n    Omit<React.HTMLAttributes<HTMLDivElement>, \"title\">,\n    Omit<\n      VariantProps<typeof alertVariants>,\n      \"state\" | \"appearance\" | \"design\"\n    > {\n  design?: AlertDesign;\n  state?: AlertState;\n  appearance?: AlertAppearance;\n  title?: React.ReactNode;\n  subtitle?: React.ReactNode;\n  description?: React.ReactNode;\n  showIcon?: boolean;\n  showCloseIcon?: boolean;\n  showActions?: boolean;\n  actionLabel?: React.ReactNode;\n  secondaryActionLabel?: React.ReactNode;\n  onAction?: () => void;\n  onSecondaryAction?: () => void;\n  onDismiss?: () => void;\n\n  // Backward-compatible aliases.\n  alertDesign?: AlertDesign;\n  alertState?: AlertState;\n  alertStyle?: AlertAppearance;\n}\n\nfunction Alert({\n  className,\n  design,\n  state,\n  appearance,\n  title = \"Insert your alert title here\",\n  subtitle = \"Subtitle\",\n  description = \"Add the alert description here. It would be more visually appealing as two lines of text.\",\n  showIcon = true,\n  showCloseIcon = true,\n  showActions = true,\n  actionLabel,\n  secondaryActionLabel,\n  onAction,\n  onSecondaryAction,\n  onDismiss,\n  alertDesign,\n  alertState,\n  alertStyle,\n  ...props\n}: AlertProps) {\n  const resolvedDesign = design ?? alertDesign ?? \"compact\";\n  const resolvedState = state ?? alertState ?? \"default\";\n  const resolvedAppearance = appearance ?? alertStyle ?? \"default\";\n\n  const ToneIcon = toneIconMap[resolvedState];\n  const resolvedActionLabel =\n    actionLabel ?? (resolvedDesign === \"compact\" ? \"Button\" : \"Accept\");\n  const resolvedSecondaryActionLabel = secondaryActionLabel ?? \"Close\";\n\n  return (\n    <div\n      className={cn(\n        alertVariants({\n          design: resolvedDesign,\n          state: resolvedState,\n          appearance: resolvedAppearance,\n        }),\n        className,\n      )}\n      data-uis-alert-state={resolvedState}\n      data-uis-alert-design={resolvedDesign}\n      data-uis-alert-appearance={resolvedAppearance}\n      {...props}\n    >\n      {showIcon ? (\n        <div className=\"flex shrink-0 items-center p-0.5\">\n          <ToneIcon\n            className=\"size-4 text-[var(--uis-alert-icon)]\"\n            strokeWidth={2.1}\n          />\n        </div>\n      ) : null}\n\n      {resolvedDesign === \"compact\" ? (\n        <>\n          <div className=\"flex min-w-0 flex-1 items-center gap-3\">\n            <p className=\"shrink-0 font-medium text-[var(--uis-alert-title)]\">\n              {title}\n            </p>\n            <p className=\"min-w-0 flex-1 truncate font-medium text-[var(--uis-alert-subtitle)]\">\n              {subtitle}\n            </p>\n          </div>\n\n          {showActions ? (\n            <button\n              type=\"button\"\n              onClick={onAction}\n              className=\"shrink-0 rounded-[4px] font-medium text-[var(--uis-alert-action)] outline-none\"\n            >\n              {resolvedActionLabel}\n            </button>\n          ) : null}\n        </>\n      ) : (\n        <div className=\"flex min-w-0 flex-1 flex-col gap-3\">\n          <div className=\"flex flex-col gap-1\">\n            <p className=\"font-medium text-[var(--uis-alert-title)]\">{title}</p>\n            <p className=\"font-normal leading-[1.6] text-[var(--uis-alert-description)]\">\n              {description}\n            </p>\n          </div>\n\n          {showActions ? (\n            <div className=\"flex flex-wrap items-start gap-3\">\n              <button\n                type=\"button\"\n                onClick={onAction}\n                className=\"inline-flex items-center gap-1 rounded-[4px] font-medium text-[var(--uis-alert-action)] outline-none\"\n              >\n                <Check className=\"size-4\" strokeWidth={2.1} />\n                {resolvedActionLabel}\n              </button>\n              <button\n                type=\"button\"\n                onClick={onSecondaryAction}\n                className=\"inline-flex items-center gap-1 rounded-[4px] font-medium text-[var(--uis-alert-action)] outline-none\"\n              >\n                <X className=\"size-4\" strokeWidth={2.1} />\n                {resolvedSecondaryActionLabel}\n              </button>\n            </div>\n          ) : null}\n        </div>\n      )}\n\n      {showCloseIcon ? (\n        <button\n          type=\"button\"\n          onClick={onDismiss}\n          className=\"flex shrink-0 items-center justify-center rounded-[4px] p-0.5 text-[var(--uis-alert-close-icon)] outline-none\"\n          aria-label=\"Close alert\"\n        >\n          <X className=\"size-4\" strokeWidth={2.2} />\n        </button>\n      ) : null}\n    </div>\n  );\n}\n\nexport { Alert };\n",
      "type": "component",
      "target": "components/alert.tsx"
    },
    {
      "path": "src/components/ui/alert-tokens.ts",
      "content": "export const alertDesigns = [\"compact\", \"extended\"] as const;\nexport const alertStates = [\n  \"default\",\n  \"info\",\n  \"success\",\n  \"warning\",\n  \"error\",\n] as const;\nexport const alertAppearances = [\"default\", \"colored\"] as const;\n\nexport type AlertDesign = (typeof alertDesigns)[number];\nexport type AlertState = (typeof alertStates)[number];\nexport type AlertAppearance = (typeof alertAppearances)[number];\n",
      "type": "tokens",
      "target": "components/alert-tokens.ts"
    },
    {
      "path": "src/lib/utils.ts",
      "content": "import { type ClassValue, clsx } from 'clsx'\nimport { twMerge } from 'tailwind-merge'\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n",
      "type": "lib",
      "target": "lib/utils.ts"
    }
  ],
  "cssVars": {
    "light": {
      "50": "var(--blue-50)",
      "200": "var(--blue-200)",
      "500": "var(--blue-500)",
      "uis-alert-bg-default": "var(--backround-component-component)",
      "uis-alert-border-default": "var(--border-default-border-default)",
      "uis-alert-shadow-default": "0 0 0 1px rgba(0, 0, 0, 0.08), 0 1px 2px -1px rgba(0, 0, 0, 0.08),\n        0 2px 4px rgba(0, 0, 0, 0.04)",
      "uis-alert-action-default": "var(--text-info-text-default)",
      "uis-alert-shadow-colored": "none",
      "uis-alert-action-colored": "var(--text-default-txt-default)",
      "uis-alert-icon-default": "var(--icon-default-icon-muted)",
      "uis-alert-default-bg-soft": "var(--backround-default-bg-weak)",
      "uis-alert-default-border-soft": "var(--border-default-border-default)",
      "uis-alert-icon-info": "var(--icon-info-icon-default)",
      "uis-alert-info-bg-soft": "var(--backround-info-bg-soft)",
      "uis-alert-info-border-soft": "var(--border-info-border-soft)",
      "uis-alert-icon-success": "var(--icon-success-icon-default)",
      "uis-alert-success-bg-soft": "var(--backround-success-bg-soft)",
      "uis-alert-success-border-soft": "var(--border-success-border-soft)",
      "uis-alert-icon-warning": "var(--icon-warning-icon-default)",
      "uis-alert-warning-bg-soft": "var(--backround-warning-bg-soft)",
      "uis-alert-warning-border-soft": "var(--border-warning-border-soft)",
      "uis-alert-icon-error": "var(--icon-error-icon-default)",
      "uis-alert-error-bg-soft": "var(--backround-error-bg-soft)",
      "uis-alert-error-border-soft": "var(--border-error-border-soft)",
      "uis-alert-action-extended-default": "var(--text-default-txt-default)",
      "uis-alert-title": "var(--text-default-txt-default)",
      "uis-alert-subtitle": "var(--text-default-txt-muted)",
      "uis-alert-description": "var(--text-default-txt-subtle)",
      "uis-alert-close-icon": "var(--icon-default-icon-muted)",
      "icon-default-icon-muted": "var(--neutral-500)",
      "neutral-500": "#71717b",
      "text-default-txt-subtle": "var(--neutral-600)",
      "neutral-600": "#52525c",
      "text-default-txt-muted": "var(--neutral-500)",
      "text-default-txt-default": "var(--neutral-950)",
      "neutral-950": "#09090b",
      "border-error-border-soft": "var(--red-200)",
      "red-200": "#ffc5cb",
      "backround-error-bg-soft": "var(--red-50)",
      "red-50": "#fff1f2",
      "icon-error-icon-default": "var(--red-500)",
      "red-500": "#ff3347",
      "border-warning-border-soft": "var(--orange-200)",
      "orange-200": "#ffda88",
      "backround-warning-bg-soft": "var(--orange-50)",
      "orange-50": "#fff9eb",
      "icon-warning-icon-default": "var(--orange-500)",
      "orange-500": "#f98507",
      "border-success-border-soft": "var(--green-200)",
      "green-200": "#c2f1c1",
      "backround-success-bg-soft": "var(--green-50)",
      "green-50": "#f1fcf1",
      "icon-success-icon-default": "var(--green-500)",
      "green-500": "#32b332",
      "border-info-border-soft": "var(--200)",
      "blue-200": "#bce0ff",
      "backround-info-bg-soft": "var(--50)",
      "blue-50": "#eef7ff",
      "icon-info-icon-default": "var(--500)",
      "blue-500": "#2489ff",
      "border-default-border-default": "var(--neutral-200)",
      "neutral-200": "#e4e4e7",
      "backround-default-bg-weak": "var(--neutral-50)",
      "neutral-50": "#fafafa",
      "text-info-text-default": "var(--500)",
      "backround-component-component": "var(--neutral-0)",
      "neutral-0": "#ffffff"
    },
    "dark": {
      "500": "var(--blue-500)",
      "800": "var(--blue-800)",
      "950": "var(--blue-950)",
      "uis-alert-bg-default": "var(--backround-component-component)",
      "uis-alert-border-default": "var(--border-default-border-default)",
      "uis-alert-shadow-default": "0 0 0 1px rgba(0, 0, 0, 0.08), 0 1px 2px -1px rgba(0, 0, 0, 0.08),\n        0 2px 4px rgba(0, 0, 0, 0.04)",
      "uis-alert-action-default": "var(--text-info-text-default)",
      "uis-alert-shadow-colored": "none",
      "uis-alert-action-colored": "var(--text-default-txt-default)",
      "uis-alert-icon-default": "var(--icon-default-icon-muted)",
      "uis-alert-default-bg-soft": "var(--backround-default-bg-weak)",
      "uis-alert-default-border-soft": "var(--border-default-border-default)",
      "uis-alert-icon-info": "var(--icon-info-icon-default)",
      "uis-alert-info-bg-soft": "var(--backround-info-bg-soft)",
      "uis-alert-info-border-soft": "var(--border-info-border-soft)",
      "uis-alert-icon-success": "var(--icon-success-icon-default)",
      "uis-alert-success-bg-soft": "var(--backround-success-bg-soft)",
      "uis-alert-success-border-soft": "var(--border-success-border-soft)",
      "uis-alert-icon-warning": "var(--icon-warning-icon-default)",
      "uis-alert-warning-bg-soft": "var(--backround-warning-bg-soft)",
      "uis-alert-warning-border-soft": "var(--border-warning-border-soft)",
      "uis-alert-icon-error": "var(--icon-error-icon-default)",
      "uis-alert-error-bg-soft": "var(--backround-error-bg-soft)",
      "uis-alert-error-border-soft": "var(--border-error-border-soft)",
      "uis-alert-action-extended-default": "var(--text-default-txt-default)",
      "uis-alert-title": "var(--text-default-txt-default)",
      "uis-alert-subtitle": "var(--text-default-txt-muted)",
      "uis-alert-description": "var(--text-default-txt-subtle)",
      "uis-alert-close-icon": "var(--icon-default-icon-muted)",
      "icon-default-icon-muted": "var(--neutral-500)",
      "neutral-500": "#71717b",
      "text-default-txt-subtle": "var(--neutral-400)",
      "neutral-400": "#9f9fa9",
      "text-default-txt-muted": "var(--neutral-500)",
      "text-default-txt-default": "var(--neutral-100)",
      "neutral-100": "#f4f4f5",
      "border-error-border-soft": "var(--red-800)",
      "red-800": "#a50f1e",
      "backround-error-bg-soft": "var(--red-950)",
      "red-950": "#4b040b",
      "icon-error-icon-default": "var(--red-500)",
      "red-500": "#ff3347",
      "border-warning-border-soft": "var(--orange-800)",
      "orange-800": "#94310c",
      "backround-warning-bg-soft": "var(--orange-950)",
      "orange-950": "#461302",
      "icon-warning-icon-default": "var(--orange-500)",
      "orange-500": "#f98507",
      "border-success-border-soft": "var(--green-800)",
      "green-800": "#1e5d1f",
      "backround-success-bg-soft": "var(--green-950)",
      "green-950": "#092a0b",
      "icon-success-icon-default": "var(--green-500)",
      "green-500": "#32b332",
      "border-info-border-soft": "var(--800)",
      "blue-800": "#1749b6",
      "backround-info-bg-soft": "var(--950)",
      "blue-950": "#142857",
      "icon-info-icon-default": "var(--500)",
      "blue-500": "#2489ff",
      "border-default-border-default": "var(--alpha-white-alpha-10)",
      "alpha-white-alpha-10": "#ffffff1a",
      "backround-default-bg-weak": "var(--neutral-800)",
      "neutral-800": "#27272a",
      "text-info-text-default": "var(--500)",
      "backround-component-component": "var(--neutral-800)"
    }
  }
}