{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "empty",
  "type": "registry:component",
  "title": "Empty",
  "description": "Explains an empty state with a title, one sentence, and an optional action.",
  "registryDependencies": [
    "https://vlak.dev/r/vlak-base.json",
    "https://vlak.dev/r/inter.json",
    "https://vlak.dev/r/button.json",
    "https://vlak.dev/r/vlak-lib.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/empty.tsx",
      "content": "import * as React from \"react\";\nimport * as stylex from \"@stylexjs/stylex\";\nimport { vlak, mq } from \"./tokens.stylex\";\nimport { rs } from \"./rs\";\n\n\nexport interface EmptyProps extends Omit<React.HTMLAttributes<HTMLDivElement>, \"title\"> {\n  title?: React.ReactNode;\n  action?: React.ReactNode;\n}\n\nconst styles = stylex.create({\n  empty: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    justifyContent: \"center\",\n    gap: \"0.5rem\",\n    minHeight: 204,\n    padding: \"1.25rem\",\n    borderWidth: vlak.hairline,\n    borderStyle: \"solid\",\n    borderColor: vlak.divider,\n    borderRadius: 0,\n  },\n  title: {\n    margin: 0,\n    fontSize: \"0.9375rem\",\n    fontWeight: 600,\n    letterSpacing: \"-0.01em\",\n    color: vlak.ink,\n  },\n  body: {\n    margin: 0,\n    fontSize: \"0.84375rem\",\n    lineHeight: 1.45,\n    letterSpacing: \"-0.01em\",\n    color: vlak.gray,\n  },\n  action: {\n    marginTop: \"0.5rem\",\n    width: {\n      default: \"fit-content\",\n      [mq.phone]: \"100%\",\n    },\n  },\n});\n\n/** A vacant cell. Title, one sentence, optional action. */\nexport const Empty = React.forwardRef<HTMLDivElement, EmptyProps>(function Empty(\n  { title, action, className, style, children, ...props },\n  ref,\n) {\n  const sx = rs([\"rs-empty\", className], styles.empty);\n  const heading = rs([\"rs-empty-title\"], styles.title);\n  const body = rs([\"rs-empty-body\"], styles.body);\n  const act = rs([\"rs-empty-action\"], styles.action);\n  return (\n    <div ref={ref} {...props} className={sx.className} style={{ ...sx.style, ...style }}>\n      {title != null && (\n        <p className={heading.className} style={heading.style}>\n          {title}\n        </p>\n      )}\n      {children != null && (\n        <p className={body.className} style={body.style}>\n          {children}\n        </p>\n      )}\n      {action != null && (\n        <div className={act.className} style={act.style}>\n          {action}\n        </div>\n      )}\n    </div>\n  );\n});\n",
      "type": "registry:component",
      "target": "components/vlak/empty.tsx"
    },
    {
      "path": "vlak/styles/empty.css",
      "content": "/* ── empty: generated from packages/react/src/components/empty.tsx ── */\n.rs-empty{display:flex;flex-direction:column;justify-content:center;gap:0.5rem;min-height:204px;padding:1.25rem;border-width:1px;border-style:solid;border-color:var(--divider);border-radius:0}\n.rs-empty-title{margin:0;font-size:0.9375rem;font-weight:600;letter-spacing:-0.01em;color:var(--text)}\n.rs-empty-body{margin:0;font-size:0.84375rem;line-height:1.45;letter-spacing:-0.01em;color:var(--text-secondary)}\n.rs-empty-action{margin-top:0.5rem;width:fit-content}\n@media (max-width: 640px){.rs-empty-action{width:100%}}\n",
      "type": "registry:file",
      "target": "styles/vlak/empty.css"
    }
  ],
  "meta": {
    "vlak": {
      "category": "feedback",
      "classes": [
        "rs-empty",
        "rs-empty-title",
        "rs-empty-body",
        "rs-empty-action"
      ],
      "snippet": "<div class=\"rs-empty\"><p class=\"rs-empty-title\">No projects yet</p><p class=\"rs-empty-body\">Start one. The grid is empty on purpose.</p><div class=\"rs-empty-action\"><button class=\"rs-btn-ghost rs-btn-sm\">New project</button></div></div>",
      "cssOnly": false,
      "registryDependencies": [
        "button",
        "vlak-lib"
      ],
      "aliases": [
        "Empty",
        "Empty state",
        "Zero state",
        "No results"
      ],
      "example": "import { Button, Empty } from \"@noorddev/vlak-react\";\n\n<Empty title=\"No projects yet\" action={<Button variant=\"ghost\" size=\"sm\">New project</Button>}>\n  Start one. The grid is empty on purpose.\n</Empty>",
      "usage": {
        "use": [
          "A list, table, or search with nothing to show.",
          "One sentence and one action at most."
        ],
        "avoid": [
          "Errors; use Alert.",
          "Loading; use Skeleton."
        ]
      },
      "a11y": [
        "Plain text in a cell; the action is whatever you pass, so give it a real control."
      ]
    }
  }
}