{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "empty",
  "type": "registry:ui",
  "title": "Empty",
  "description": "Empty-state layout for blank lists, zero results, and new workspaces.",
  "dependencies": [],
  "registryDependencies": [
    "https://control-ui.dev/r/core.json"
  ],
  "files": [
    {
      "path": "src/registry/knob-contracts/empty-knobs.ts",
      "target": "@components/control-ui/knob-contracts/empty-knobs.ts",
      "type": "registry:component",
      "content": "// Generated from src/registry/sources/control-ui/recipes/empty.css by scripts/gen-knob-contracts.ts — run `bun run sync:knobs`.\nexport const emptyKnobs = [\n  \"--cui-empty-radius\",\n  \"--cui-empty-background\",\n  \"--cui-empty-border-color\",\n  \"--cui-empty-border-width\",\n  \"--cui-empty-border-style\",\n  \"--cui-empty-media-radius\",\n  \"--cui-empty-media-background\",\n] as const;\nexport type EmptyKnobStyle = Partial<Record<(typeof emptyKnobs)[number], string>>;\n"
    },
    {
      "path": "src/registry/sources/control-ui/recipes/empty.css",
      "target": "@components/control-ui/styles/recipes/empty.css",
      "type": "registry:file",
      "content": "@layer components {\n  :where([data-control-family=\"empty\"][data-slot=\"root\"]) {\n    --cui-empty-radius: var(--radius-lg);\n    --cui-empty-background: transparent;\n    --cui-empty-border-color: transparent;\n    --cui-empty-border-width: 0px;\n    --cui-empty-border-style: solid;\n    --cui-empty-media-radius: var(--radius-lg);\n    --cui-empty-media-background: var(--muted);\n    border: var(--cui-empty-border-width) var(--cui-empty-border-style) var(--cui-empty-border-color);\n    border-radius: var(--cui-empty-radius);\n    background: var(--cui-empty-background);\n    box-shadow: none;\n    color: var(--foreground);\n    text-align: center;\n    text-wrap: balance;\n  }\n\n  :where([data-control-family=\"empty\"][data-slot=\"media\"]) {\n    border-radius: var(--cui-empty-media-radius);\n    background: var(--cui-empty-media-background);\n    color: var(--muted-foreground);\n  }\n\n  :where([data-control-family=\"empty\"][data-slot=\"content\"]) {\n    font-size: var(--text-sm);\n    line-height: var(--text-sm--line-height);\n    text-wrap: balance;\n  }\n\n  :where([data-control-family=\"empty\"][data-slot=\"description\"]) {\n    font-size: var(--text-sm);\n    line-height: var(--leading-relaxed);\n    color: var(--muted-foreground);\n  }\n\n  :where([data-control-family=\"empty\"][data-slot=\"title\"]) {\n    font-size: var(--text-sm);\n    line-height: var(--text-sm--line-height);\n    font-weight: var(--font-weight-medium);\n    color: var(--foreground);\n  }\n\n  :where([data-control-family=\"empty\"][data-slot=\"header\"]) {\n    text-align: center;\n  }\n}\n\n@property --cui-empty-radius {\n  syntax: \"<length-percentage>\";\n  inherits: true;\n  initial-value: 0px;\n}\n\n@property --cui-empty-background {\n  syntax: \"*\";\n  inherits: true;\n  initial-value: transparent;\n}\n\n@property --cui-empty-border-color {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: transparent;\n}\n\n@property --cui-empty-border-width {\n  syntax: \"<length>\";\n  inherits: true;\n  initial-value: 0px;\n}\n\n@property --cui-empty-border-style {\n  syntax: \"*\";\n  inherits: true;\n  initial-value: solid;\n}\n\n@property --cui-empty-media-radius {\n  syntax: \"<length-percentage>\";\n  inherits: true;\n  initial-value: 0px;\n}\n\n@property --cui-empty-media-background {\n  syntax: \"*\";\n  inherits: true;\n  initial-value: transparent;\n}\n"
    },
    {
      "path": "src/registry/sources/control-ui/ui/empty.tsx",
      "target": "@components/control-ui/ui/empty.tsx",
      "type": "registry:ui",
      "content": "import type { ComponentProps, CSSProperties } from \"react\";\n\nimport type { EmptyKnobStyle } from \"@/components/control-ui/knob-contracts/empty-knobs\";\nimport { cn } from \"@/components/control-ui/lib/cn\";\n\nexport type EmptyProps = Omit<ComponentProps<\"div\">, \"style\"> & { style?: CSSProperties & EmptyKnobStyle };\n\nexport type EmptyMediaProps = Omit<ComponentProps<\"div\">, \"style\"> & { style?: CSSProperties & EmptyKnobStyle };\n\nexport type EmptyContentProps = Omit<ComponentProps<\"div\">, \"style\"> & { style?: CSSProperties & EmptyKnobStyle };\n\nexport type EmptyDescriptionProps = Omit<ComponentProps<\"p\">, \"style\"> & { style?: CSSProperties & EmptyKnobStyle };\n\nexport type EmptyTitleProps = Omit<ComponentProps<\"div\">, \"style\"> & { style?: CSSProperties & EmptyKnobStyle };\n\nexport function Empty({ className, ...props }: EmptyProps) {\n  return (\n    <div\n      data-control-ui=\"empty\"\n      data-control-family=\"empty\"\n      data-slot=\"root\"\n      className={cn(\"flex min-w-0 flex-1 flex-col items-center justify-center gap-6 p-6\", className)}\n      {...props}\n    />\n  );\n}\n\nexport function EmptyHeader({ className, ...props }: ComponentProps<\"div\"> & { style?: CSSProperties & EmptyKnobStyle }) {\n  return (\n    <div\n      data-control-ui=\"empty\"\n      data-control-family=\"empty\"\n      data-slot=\"header\"\n      className={cn(\"flex max-w-sm flex-col items-center gap-2\", className)}\n      {...props}\n    />\n  );\n}\n\nexport function EmptyMedia({ className, ...props }: EmptyMediaProps) {\n  return (\n    <div\n      data-control-ui=\"empty\"\n      data-control-family=\"empty\"\n      data-slot=\"media\"\n      className={cn(\"mb-2 flex size-10 shrink-0 items-center justify-center [&>svg]:size-5 [&>svg]:shrink-0\", className)}\n      {...props}\n    />\n  );\n}\n\nexport function EmptyTitle({ className, ...props }: EmptyTitleProps) {\n  return <div data-control-ui=\"empty\" data-control-family=\"empty\" data-slot=\"title\" className={className} {...props} />;\n}\n\nexport function EmptyDescription({ className, ...props }: EmptyDescriptionProps) {\n  return <p data-control-ui=\"empty\" data-control-family=\"empty\" data-slot=\"description\" className={className} {...props} />;\n}\n\nexport function EmptyContent({ className, ...props }: EmptyContentProps) {\n  return (\n    <div\n      data-control-ui=\"empty\"\n      data-control-family=\"empty\"\n      data-slot=\"content\"\n      className={cn(\"flex w-full max-w-sm flex-col items-center justify-center gap-2\", className)}\n      {...props}\n    />\n  );\n}\n"
    }
  ],
  "css": {
    "@import \"../components/control-ui/styles/recipes/empty.css\"": {}
  },
  "meta": {}
}