{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"empty-state","type":"registry:ui","title":"Empty State","description":"What a page, list or table shows when there's nothing in it yet — and the next step to take.","dependencies":[],"registryDependencies":["https://dashral.com/r/utils.json"],"files":[{"path":"registry/dashral/empty-state.tsx","type":"registry:file","target":"components/dashral/empty-state.tsx","content":"import * as React from \"react\"\n\nimport { cn } from \"./lib/utils\"\n\ntype EmptyStateProps = Omit<React.ComponentProps<\"div\">, \"title\"> & {\n  /** A dashed outline for an empty area of a page; plain inside a card or table. */\n  variant?: \"default\" | \"plain\"\n  /** Shown in a soft circle above the title. */\n  icon?: React.ReactNode\n  title?: React.ReactNode\n  /** The title's heading level, to fit the page's outline. */\n  titleAs?: \"h2\" | \"h3\" | \"h4\" | \"p\"\n  description?: React.ReactNode\n  /** The next step, e.g. a \"New project\" button. */\n  actions?: React.ReactNode\n  classNames?: { icon?: string; title?: string; description?: string; actions?: string }\n}\n\n/**\n * What a list, table or page shows when there's nothing in it yet, in one tag: say what would be here and offer the\n * next step. The title is an h3 unless titleAs says otherwise; anything in children goes under the actions.\n */\nfunction EmptyState({ variant = \"default\", icon, title, titleAs: Title = \"h3\", description, actions, className, classNames, children, ...props }: EmptyStateProps) {\n  return (\n    <div\n      data-slot=\"empty-state\"\n      className={cn(\n        \"flex flex-col items-center justify-center gap-4 rounded-xl px-6 py-12 text-center\",\n        variant === \"default\" && \"border border-dashed\",\n        className\n      )}\n      {...props}\n    >\n      {icon && (\n        <div\n          aria-hidden\n          className={cn(\n            \"flex size-12 items-center justify-center rounded-full bg-muted text-muted-foreground [&_svg:not([class*='size-'])]:size-6\",\n            classNames?.icon\n          )}\n        >\n          {icon}\n        </div>\n      )}\n      {(title || description) && (\n        <div className=\"grid justify-items-center gap-2\">\n          {title && <Title className={cn(\"text-base font-medium tracking-tight\", classNames?.title)}>{title}</Title>}\n          {description && <p className={cn(\"max-w-sm text-sm text-balance text-muted-foreground\", classNames?.description)}>{description}</p>}\n        </div>\n      )}\n      {actions && <div className={cn(\"flex flex-wrap items-center justify-center gap-2\", classNames?.actions)}>{actions}</div>}\n      {children}\n    </div>\n  )\n}\n\nexport { EmptyState, type EmptyStateProps }\n"}]}