{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "alert",
  "type": "registry:component",
  "title": "Alert",
  "description": "Calls attention to contextual information. 1px frame and icon; critical variant fills with ink.",
  "registryDependencies": [
    "https://vlak.dev/r/vlak-base.json",
    "https://vlak.dev/r/inter.json",
    "https://vlak.dev/r/vlak-lib.json",
    "https://vlak.dev/r/icons.json"
  ],
  "dependencies": [
    "@stylexjs/stylex"
  ],
  "devDependencies": [
    "@stylexjs/babel-plugin"
  ],
  "docs": "Vlak leaves are StyleX. Compile them with @stylexjs/babel-plugin (Vite: @stylexjs/unplugin, Next: @stylexjs/nextjs-plugin). If you would rather not run a compiler, import @noorddev/vlak-react instead: it ships precompiled with one stylesheet.",
  "files": [
    {
      "path": "vlak/alert.tsx",
      "content": "import * as React from \"react\";\nimport * as stylex from \"@stylexjs/stylex\";\nimport { vlak } from \"./tokens.stylex\";\nimport { rs } from \"./rs\";\nimport { Icon } from \"./icons\";\n\nexport interface AlertProps extends Omit<React.HTMLAttributes<HTMLDivElement>, \"title\"> {\n  title?: React.ReactNode;\n  /** Solid ink variant. */\n  variant?: \"outline\" | \"solid\";\n  icon?: React.ReactNode;\n  /**\n   * Static content is a note. Set \"polite\" (role=status) or \"assertive\"\n   * (role=alert) only when the alert appears in response to something.\n   */\n  live?: \"polite\" | \"assertive\";\n}\n\nconst styles = stylex.create({\n  alert: {\n    display: \"flex\",\n    gap: \"0.625rem\",\n    borderWidth: vlak.hairline,\n    borderStyle: \"solid\",\n    borderColor: vlak.divider,\n    borderRadius: vlak.radius,\n    paddingBlock: \"0.75rem\",\n    paddingInline: \"0.875rem\",\n    alignItems: \"flex-start\",\n  },\n  solid: {\n    backgroundColor: vlak.ink,\n    borderColor: vlak.ink,\n  },\n  icon: {\n    flexShrink: 0,\n    marginTop: 1,\n    color: vlak.ink,\n  },\n  iconSolid: {\n    color: vlak.paper,\n  },\n  title: {\n    display: \"block\",\n    fontSize: \"0.84375rem\",\n    fontWeight: 600,\n    letterSpacing: \"-0.01em\",\n    color: vlak.ink,\n  },\n  titleSolid: {\n    color: vlak.paper,\n  },\n  body: {\n    fontSize: \"0.8125rem\",\n    lineHeight: 1.45,\n    letterSpacing: \"-0.01em\",\n    color: vlak.gray,\n    marginTop: 2,\n    marginBottom: 0,\n    marginInline: 0,\n  },\n  bodySolid: {\n    color: vlak.paper,\n  },\n});\n\nexport const Alert = React.forwardRef<HTMLDivElement, AlertProps>(function Alert(\n  { title, variant = \"outline\", icon, live, className, style, children, ...props },\n  ref,\n) {\n  const sx = rs([\"rs-alert\", variant === \"solid\" && \"rs-alert-solid\", className], styles.alert, variant === \"solid\" && styles.solid);\n  const mark = rs([\"rs-alert-icon\", variant === \"solid\" && \"rs-alert-icon-solid\"], styles.icon, variant === \"solid\" && styles.iconSolid);\n  const heading = rs([\"rs-alert-title\", variant === \"solid\" && \"rs-alert-title-solid\"], styles.title, variant === \"solid\" && styles.titleSolid);\n  const body = rs([\"rs-alert-body\", variant === \"solid\" && \"rs-alert-body-solid\"], styles.body, variant === \"solid\" && styles.bodySolid);\n  const role = live === \"assertive\" ? \"alert\" : live === \"polite\" ? \"status\" : \"note\";\n  return (\n    <div ref={ref} role={role} {...props} className={sx.className} style={{ ...sx.style, ...style }}>\n      {icon ?? <Icon name=\"info\" size={16} className={mark.className} style={mark.style} />}\n      <div>\n        {title != null && (\n          <span className={heading.className} style={heading.style}>\n            {title}\n          </span>\n        )}\n        {children != null && (\n          <p className={body.className} style={body.style}>\n            {children}\n          </p>\n        )}\n      </div>\n    </div>\n  );\n});\n",
      "type": "registry:component",
      "target": "components/vlak/alert.tsx"
    },
    {
      "path": "vlak/styles/alert.css",
      "content": "/* ── alert: generated from packages/react/src/components/alert.tsx ── */\n.rs-alert{display:flex;gap:0.625rem;border-width:1px;border-style:solid;border-color:var(--divider);border-radius:var(--radius);padding-block:0.75rem;padding-inline:0.875rem;align-items:flex-start}\n.rs-alert-solid{background-color:var(--text);border-color:var(--text)}\n.rs-alert-icon{flex-shrink:0;margin-top:1px;color:var(--text)}\n.rs-alert-icon-solid{color:var(--bg)}\n.rs-alert-title{display:block;font-size:0.84375rem;font-weight:600;letter-spacing:-0.01em;color:var(--text)}\n.rs-alert-title-solid{color:var(--bg)}\n.rs-alert-body{font-size:0.8125rem;line-height:1.45;letter-spacing:-0.01em;color:var(--text-secondary);margin-top:2px;margin-bottom:0;margin-inline:0}\n.rs-alert-body-solid{color:var(--bg)}\n",
      "type": "registry:file",
      "target": "styles/vlak/alert.css"
    }
  ],
  "meta": {
    "vlak": {
      "category": "feedback",
      "classes": [
        "rs-alert",
        "rs-alert-title",
        "rs-alert-body",
        "rs-alert-solid",
        "rs-alert-body-solid",
        "rs-alert-icon",
        "rs-alert-icon-solid",
        "rs-alert-title-solid"
      ],
      "snippet": "<div class=\"rs-alert\" role=\"status\"><div><span class=\"rs-alert-title\">Heads up</span><p class=\"rs-alert-body\">Your workspace syncs every hour.</p></div></div>",
      "cssOnly": false,
      "registryDependencies": [
        "vlak-lib",
        "icons"
      ],
      "aliases": [
        "Alert",
        "Banner",
        "Notice",
        "Inline message"
      ],
      "example": "import { Alert } from \"@noorddev/vlak-react\";\n\n<Alert title=\"Heads up\">Your workspace syncs every hour.</Alert>\n<Alert variant=\"solid\" title=\"Payment failed\" live=\"assertive\">Update your card to keep publishing.</Alert>",
      "usage": {
        "use": [
          "A persistent message that belongs to the page: a warning, a limit, a state.",
          "variant=\"solid\" for the one critical message in view."
        ],
        "avoid": [
          "Transient confirmations; use toast.",
          "Notes in running copy; use Callout."
        ]
      },
      "a11y": [
        "Static content renders role=\"note\". Pass live=\"polite\" (role=\"status\") or live=\"assertive\" (role=\"alert\") only when the alert appears in response to something.",
        "The default icon is decorative; icon accepts your own node."
      ]
    }
  }
}