{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "empty-state",
  "type": "registry:ui",
  "title": "Empty State",
  "description": "What to show when there is nothing to show: say why, and offer the next step.",
  "dependencies": [
    "tailwind-variants@^1.0.0"
  ],
  "registryDependencies": [
    "https://junco.madebytobi.com/r/junco-theme.json",
    "https://junco.madebytobi.com/r/utils.json"
  ],
  "files": [
    {
      "path": "registry/junco/ui/empty-state.tsx",
      "type": "registry:ui",
      "content": "import * as React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\nimport { cn } from \"@/lib/utils\";\n\nexport const emptyStateVariants = tv({\n  slots: {\n    root: \"flex flex-col items-center justify-center text-center\",\n    icon: \"mb-4 grid place-items-center rounded-card border border-border bg-surface text-muted-foreground\",\n    title: \"font-semibold tracking-tight text-foreground\",\n    description: \"mt-1 max-w-sm text-sm text-muted-foreground text-balance\",\n    actions: \"mt-5 flex flex-wrap items-center justify-center gap-2\",\n  },\n  variants: {\n    size: {\n      sm: { root: \"px-4 py-8\", icon: \"size-9 [&_svg]:size-4\", title: \"text-sm\" },\n      md: { root: \"px-6 py-12\", icon: \"size-11 [&_svg]:size-5\", title: \"text-base\" },\n      lg: { root: \"px-8 py-16\", icon: \"size-14 [&_svg]:size-6\", title: \"text-lg\" },\n    },\n    /** A dashed outline, for an empty area the user can fill (drop zone, first item). */\n    isBordered: {\n      true: { root: \"rounded-card border border-dashed border-border\" },\n    },\n  },\n  defaultVariants: { size: \"md\", isBordered: false },\n});\n\nexport interface EmptyStateProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, \"title\">,\n    VariantProps<typeof emptyStateVariants> {\n  icon?: React.ReactNode;\n  title: React.ReactNode;\n  description?: React.ReactNode;\n  /** Buttons for the next step. Lead with one primary action. */\n  actions?: React.ReactNode;\n  /** Heading level for the title. Default h3. */\n  titleAs?: \"h2\" | \"h3\" | \"h4\" | \"p\";\n  classNames?: Partial<Record<\"root\" | \"icon\" | \"title\" | \"description\" | \"actions\", string>>;\n}\n\n/** What to show when there is nothing to show: say why, and offer the next step. */\nexport const EmptyState = React.forwardRef<HTMLDivElement, EmptyStateProps>(\n  (\n    { className, classNames, size, isBordered, icon, title, description, actions, titleAs: Title = \"h3\", children, ...props },\n    ref,\n  ) => {\n    const styles = emptyStateVariants({ size, isBordered });\n    return (\n      <div ref={ref} data-slot=\"empty-state\" className={styles.root({ className: cn(classNames?.root, className) })} {...props}>\n        {icon && (\n          <div aria-hidden className={styles.icon({ className: classNames?.icon })}>\n            {icon}\n          </div>\n        )}\n        <Title className={styles.title({ className: classNames?.title })}>{title}</Title>\n        {description && <p className={styles.description({ className: classNames?.description })}>{description}</p>}\n        {actions && <div className={styles.actions({ className: classNames?.actions })}>{actions}</div>}\n        {children}\n      </div>\n    );\n  },\n);\nEmptyState.displayName = \"EmptyState\";\n"
    }
  ],
  "docs": "Docs and examples: https://junco.madebytobi.com/docs/components/empty-state",
  "meta": {
    "hash": "184db976e3caf586",
    "source": "packages/react/src/components/empty-state.tsx",
    "exports": [
      "emptyStateVariants",
      "EmptyStateProps",
      "EmptyState"
    ],
    "props": {
      "EmptyState": {
        "extends": "Omit<React.HTMLAttributes<HTMLDivElement>, \"title\">, VariantProps<typeof emptyStateVariants>",
        "props": [
          {
            "name": "icon",
            "optional": true,
            "type": "React.ReactNode"
          },
          {
            "name": "title",
            "optional": false,
            "type": "React.ReactNode"
          },
          {
            "name": "description",
            "optional": true,
            "type": "React.ReactNode"
          },
          {
            "name": "actions",
            "optional": true,
            "type": "React.ReactNode",
            "description": "Buttons for the next step. Lead with one primary action."
          },
          {
            "name": "titleAs",
            "optional": true,
            "type": "\"h2\" | \"h3\" | \"h4\" | \"p\"",
            "description": "Heading level for the title. Default h3."
          },
          {
            "name": "classNames",
            "optional": true,
            "type": "Partial<Record<\"root\" | \"icon\" | \"title\" | \"description\" | \"actions\""
          }
        ]
      }
    },
    "variants": {
      "variants": {
        "size": [
          "sm",
          "md",
          "lg"
        ],
        "isBordered": [
          "true"
        ]
      },
      "defaultVariants": {
        "size": "md",
        "isBordered": "false"
      }
    },
    "docsUrl": "https://junco.madebytobi.com/docs/components/empty-state"
  }
}