{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "skeleton",
  "title": "skeleton",
  "description": "Loading placeholders in the shape of the content on its way. SkeletonRows holds a list or table that has no layout yet: a named role=\"status\" around sized rows, with the row count and row height as props.",
  "dependencies": [
    "class-variance-authority@^0.7"
  ],
  "registryDependencies": [
    "@dwellir/dwellir-theme",
    "@dwellir/utils"
  ],
  "files": [
    {
      "path": "components/ui/skeleton.tsx",
      "content": "import { cva, type VariantProps } from 'class-variance-authority';\nimport type { ComponentProps } from 'react';\nimport { cn } from '@/lib/utils';\n\n/* A placeholder in the shape of content that is still loading. */\nfunction Skeleton({ className, ...props }: ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"skeleton\"\n      aria-hidden=\"true\"\n      className={cn(\n        'animate-pulse rounded-xl bg-foreground-10 motion-reduce:animate-none',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nconst skeletonRowVariants = cva('', {\n  variants: {\n    rowHeight: {\n      sm: 'h-8',\n      default: 'h-10',\n      lg: 'h-14',\n    },\n  },\n  defaultVariants: { rowHeight: 'default' },\n});\n\ntype SkeletonRowsProps = Omit<ComponentProps<'div'>, 'children'> &\n  VariantProps<typeof skeletonRowVariants> & {\n    /* Names the pending content for screen readers, such as \"Loading API keys\". */\n    label: string;\n    /* How many rows to hold space for. */\n    rows?: number;\n    /* Layout classes per row, such as a width; `rowHeight` picks the height. */\n    rowClassName?: string;\n  };\n\n/**\n * Skeleton rows for a list or table that has no layout yet while it loads,\n * before its first response. The rows hold the shape, so nothing shifts\n * when the content lands; the named status tells screen readers what is on\n * its way. Give the rows the height and count of the content they stand in\n * for.\n */\nfunction SkeletonRows({\n  label,\n  rows = 3,\n  rowHeight,\n  rowClassName,\n  className,\n  ...props\n}: SkeletonRowsProps) {\n  const count = Math.max(0, Math.floor(rows));\n  return (\n    <div\n      data-slot=\"skeleton-rows\"\n      role=\"status\"\n      aria-label={label}\n      className={cn('flex flex-col gap-2', className)}\n      {...props}\n    >\n      {Array.from({ length: count }, (_, row) => (\n        <Skeleton\n          key={row}\n          data-slot=\"skeleton-row\"\n          className={cn(skeletonRowVariants({ rowHeight }), rowClassName)}\n        />\n      ))}\n    </div>\n  );\n}\n\nexport { Skeleton, SkeletonRows, skeletonRowVariants };\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}