{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "empty",
  "title": "empty",
  "description": "What a reader sees where data will be: a title, a line of text and the action that fills it. card stands in for content, dashed outlines where it will appear; xs with align start is a note in a list of results.",
  "dependencies": [
    "@radix-ui/react-slot",
    "class-variance-authority@^0.7"
  ],
  "registryDependencies": [
    "@dwellir/dwellir-theme",
    "@dwellir/utils"
  ],
  "files": [
    {
      "path": "components/ui/empty.tsx",
      "content": "import { Slot } from '@radix-ui/react-slot';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport type { ComponentProps } from 'react';\nimport { cn } from '@/lib/utils';\n\nconst emptyVariants = cva('group/empty flex min-w-0 flex-1 flex-col justify-center text-balance', {\n  variants: {\n    variant: {\n      /* No edge, as upstream: the view around it frames it. */\n      plain: 'rounded-lg',\n      /* The outline of a place where content will appear, such as a chart with no data yet. */\n      dashed: 'rounded-lg border border-dashed border-border',\n      /* A card that stands in for content the reader cannot see yet. */\n      card: 'rounded-card border border-border bg-card',\n    },\n    size: {\n      md: 'gap-6 p-6 md:p-12',\n      /* A compact card: the title, the text and the actions evenly spaced. */\n      sm: 'gap-3 p-8',\n      /* A note in a list of results, such as \"no match\". */\n      xs: 'gap-2.5 p-4',\n    },\n    align: {\n      center: 'items-center text-center',\n      /* Text starts at the edge, as in a list of results. */\n      start: 'items-start text-left',\n    },\n  },\n  /* A small card takes a control's corner, not a card's. */\n  compoundVariants: [{ variant: 'card', size: 'xs', className: 'rounded-lg' }],\n  defaultVariants: { variant: 'plain', size: 'md', align: 'center' },\n});\n\nfunction Empty({\n  className,\n  variant,\n  size,\n  align,\n  ...props\n}: ComponentProps<'div'> & VariantProps<typeof emptyVariants>) {\n  return (\n    <div\n      data-slot=\"empty\"\n      data-variant={variant ?? 'plain'}\n      data-size={size ?? 'md'}\n      data-align={align ?? 'center'}\n      className={cn(emptyVariants({ variant, size, align }), className)}\n      {...props}\n    />\n  );\n}\n\nfunction EmptyHeader({ className, ...props }: ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"empty-header\"\n      className={cn(\n        'flex max-w-sm flex-col items-center gap-2 text-center group-data-[size=sm]/empty:gap-3 group-data-[size=xs]/empty:gap-2.5',\n        'group-data-[align=start]/empty:items-start group-data-[align=start]/empty:text-left',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nconst emptyMediaVariants = cva(\n  'mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0',\n  {\n    variants: {\n      variant: {\n        default: 'bg-transparent',\n        icon: \"size-10 rounded-lg bg-muted text-foreground [&_svg:not([class*='size-'])]:size-6\",\n      },\n    },\n    defaultVariants: { variant: 'default' },\n  },\n);\n\nfunction EmptyMedia({\n  className,\n  variant,\n  ...props\n}: ComponentProps<'div'> & VariantProps<typeof emptyMediaVariants>) {\n  return (\n    <div\n      data-slot=\"empty-icon\"\n      data-variant={variant ?? 'default'}\n      className={cn(emptyMediaVariants({ variant }), className)}\n      {...props}\n    />\n  );\n}\n\n/*\n * With asChild the title can be a heading. An icon before the text sits on its\n * line, in the muted colour.\n */\nfunction EmptyTitle({\n  className,\n  asChild = false,\n  ...props\n}: ComponentProps<'div'> & { asChild?: boolean }) {\n  const Comp = asChild ? Slot : 'div';\n  return (\n    <Comp\n      data-slot=\"empty-title\"\n      className={cn(\n        'flex items-center gap-2 text-lg font-bold tracking-tight text-title',\n        'group-data-[size=sm]/empty:tracking-normal group-data-[size=xs]/empty:text-sm group-data-[size=xs]/empty:tracking-normal',\n        \"[&>svg]:shrink-0 [&>svg]:text-muted-foreground [&>svg:not([class*='size-'])]:size-4.5\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction EmptyDescription({ className, ...props }: ComponentProps<'p'>) {\n  return (\n    <div\n      data-slot=\"empty-description\"\n      className={cn(\n        'text-sm/relaxed text-muted-foreground [&>a]:underline [&>a]:underline-offset-4 [&>a]:hover:text-primary',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction EmptyContent({ className, ...props }: ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"empty-content\"\n      className={cn(\n        'flex w-full max-w-sm min-w-0 flex-col items-center gap-4 text-sm text-balance group-data-[size=sm]/empty:gap-3 group-data-[size=xs]/empty:gap-3',\n        'group-data-[align=start]/empty:items-start',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n  emptyMediaVariants,\n  emptyVariants,\n};\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}