{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "empty-state",
  "type": "registry:ui",
  "title": "Empty State",
  "description": "Centered empty/zero-data placeholder with an optional icon and call to action.",
  "dependencies": [
    "@mantine/core@^9",
    "@tabler/icons-react@^3"
  ],
  "files": [
    {
      "path": "registry/ui/empty-state.tsx",
      "type": "registry:ui",
      "content": "import {\n  type BoxProps,\n  Button,\n  Center,\n  type ElementProps,\n  type Factory,\n  factory,\n  Stack,\n  type StylesApiProps,\n  Text,\n  ThemeIcon,\n  Title,\n  useProps,\n  useStyles,\n} from \"@mantine/core\";\nimport { IconInbox } from \"@tabler/icons-react\";\nimport type { ReactNode } from \"react\";\n\nimport classes from \"./empty-state.module.css\";\n\nexport type EmptyStateStylesNames = \"root\" | \"icon\" | \"title\" | \"description\" | \"action\";\n\nexport interface EmptyStateProps\n  extends BoxProps,\n    StylesApiProps<EmptyStateFactory>,\n    ElementProps<\"div\", \"title\"> {\n  title?: string;\n  description?: ReactNode;\n  icon?: ReactNode;\n  action?: { label: string; onClick: () => void };\n}\n\nexport type EmptyStateFactory = Factory<{\n  props: EmptyStateProps;\n  ref: HTMLDivElement;\n  stylesNames: EmptyStateStylesNames;\n}>;\n\nexport const EmptyState = factory<EmptyStateFactory>((_props) => {\n  const props = useProps(\"EmptyState\", null, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    attributes,\n    ref,\n    title = \"Nothing here yet\",\n    description,\n    icon,\n    action,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<EmptyStateFactory>({\n    name: \"EmptyState\",\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n  });\n\n  return (\n    <Center ref={ref} py=\"xl\" unstyled={unstyled} {...getStyles(\"root\")} {...others}>\n      <Stack align=\"center\" gap=\"xs\" maw={360} ta=\"center\">\n        <ThemeIcon variant=\"light\" size={48} radius=\"xl\" {...getStyles(\"icon\")}>\n          {icon ?? <IconInbox size={24} />}\n        </ThemeIcon>\n        <Title order={4} {...getStyles(\"title\")}>\n          {title}\n        </Title>\n        {description && (\n          <Text c=\"dimmed\" size=\"sm\" {...getStyles(\"description\")}>\n            {description}\n          </Text>\n        )}\n        {action && (\n          <Button mt=\"sm\" onClick={action.onClick} {...getStyles(\"action\")}>\n            {action.label}\n          </Button>\n        )}\n      </Stack>\n    </Center>\n  );\n});\n\nEmptyState.classes = classes;\nEmptyState.displayName = \"EmptyState\";\n\nexport namespace EmptyState {\n  export type Props = EmptyStateProps;\n  export type StylesNames = EmptyStateStylesNames;\n  export type Factory = EmptyStateFactory;\n}\n"
    },
    {
      "path": "registry/ui/empty-state.module.css",
      "type": "registry:file",
      "target": "@ui/empty-state.module.css",
      "content": ".root {\n  --empty-state-root: 1;\n}\n\n.icon {\n  --empty-state-icon: 1;\n}\n\n.title {\n  --empty-state-title: 1;\n}\n\n.description {\n  --empty-state-description: 1;\n}\n\n.action {\n  --empty-state-action: 1;\n}\n"
    }
  ],
  "meta": {
    "mantine": {
      "requires": ">=9",
      "stylesApi": {
        "EmptyState": [
          "root",
          "icon",
          "title",
          "description",
          "action"
        ]
      },
      "props": {
        "EmptyState": [
          {
            "name": "title",
            "type": "string",
            "default": "\"Nothing here yet\"",
            "description": "Heading text shown below the icon.",
            "required": false
          },
          {
            "name": "description",
            "type": "ReactNode",
            "description": "Supporting text rendered under the title; nothing renders when omitted.",
            "required": false
          },
          {
            "name": "icon",
            "type": "ReactNode",
            "description": "Custom icon rendered inside the theme icon circle; defaults to an inbox icon.",
            "required": false
          },
          {
            "name": "action",
            "type": "{ label: string; onClick: () => void }",
            "description": "Renders a button below the description that calls onClick when clicked; no button renders when omitted.",
            "required": false
          },
          {
            "name": "...others",
            "type": "BoxProps & ElementProps<\"div\", \"title\">",
            "description": "All other props are forwarded to the root <Center>, after its own py=\"xl\", so both can be overridden. Mantine Styles API props (classNames, styles, unstyled) are also accepted."
          }
        ]
      },
      "usage": {
        "path": "registry/ui/empty-state.usage.tsx",
        "content": "import { EmptyState } from \"@/components/ui/empty-state\";\n\nexport function EmptyInbox() {\n  return (\n    <EmptyState\n      title=\"No messages yet\"\n      description=\"When someone sends you a message, it will show up here.\"\n      action={{\n        label: \"Compose message\",\n        onClick: () => console.log(\"compose\"),\n      }}\n    />\n  );\n}\n"
      }
    }
  }
}