{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "skeleton",
  "title": "Skeleton",
  "description": "Skeleton from the Get IT Done design system.",
  "dependencies": [],
  "registryDependencies": [
    "https://zero-design.itdone.de/r/labels-context.json",
    "https://zero-design.itdone.de/r/utils.json",
    "https://zero-design.itdone.de/r/theme.json"
  ],
  "files": [
    {
      "path": "registry/ui/skeleton.tsx",
      "content": "'use client';\n\nimport { forwardRef } from 'react';\nimport { cn } from '@/lib/utils';\nimport { useLabels, usePreset } from '@/components/ui/labels-context';\n\ntype SkeletonVariant = 'block' | 'row' | 'row-single' | 'text' | 'avatar';\n\ninterface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {\n  className?: string;\n  // `block` (default) is the single placeholder tile. The composed variants follow the Figma Skeleton set:\n  // `row-single` is one table row (height `row`), `row` is `rows` of them (default 2), `text` is a title bar plus\n  // three lines, `avatar` is a 32px circle plus two lines. Composed variants announce themselves as a status.\n  variant?: SkeletonVariant;\n  // Row count for `variant=\"row\"`.\n  rows?: number;\n  // Accessible loading text for the composed variants.\n  label?: string;\n}\n\n// Block tile: same fill as the composed Figma Skeleton bars, no border (a frame made it look heavy).\n// `motion-reduce:animate-none` stops the endless pulse for reduced-motion users.\nconst skeletonVariants =\n  'animate-pulse rounded-default bg-overlay-skeleton-default motion-reduce:animate-none';\n\nconst barBase = 'block animate-pulse motion-reduce:animate-none';\nconst barDefault = cn(barBase, 'bg-overlay-skeleton-default');\nconst barSubtle = cn(barBase, 'bg-overlay-skeleton-subtle');\n\n// One table row: dot, then bars of descending width, last bar in the subtle tone. The bars may shrink (min-w-0), so the row never makes its table wider than the card.\nconst SkeletonRowBars = () => (\n  <div className=\"flex h-row w-full min-w-0 shrink-0 items-center overflow-hidden gap-4 border-b border-solid border-border-subtle px-3\">\n    <span className={cn(barDefault, 'h-5 w-5 shrink-0 rounded-full')} />\n    <span className={cn(barDefault, 'h-3 w-44 min-w-0 shrink rounded-item')} />\n    <span className={cn(barDefault, 'h-3 w-28 min-w-0 shrink rounded-item')} />\n    <span className={cn(barDefault, 'h-3 w-24 min-w-0 shrink rounded-item')} />\n    <span className={cn(barDefault, 'h-3 w-20 min-w-0 shrink rounded-item')} />\n    <span className={cn(barSubtle, 'h-3 w-12 min-w-0 shrink rounded-item')} />\n  </div>\n);\n\nconst Skeleton = forwardRef<HTMLDivElement, SkeletonProps>((props, ref) => {\n  const { className, variant = 'block', rows = 2, label: labelProp, ...rest } = props;\n  const l = useLabels();\n  const zero = usePreset() === 'zero';\n  const label = labelProp ?? l.loading;\n\n  if (variant === 'block') {\n    return <div ref={ref} className={cn(skeletonVariants, zero && 'rounded-tight bg-muted', className)} {...rest} />;\n  }\n\n  const sr = <span className=\"sr-only\">{label}</span>;\n\n  if (variant === 'row' || variant === 'row-single') {\n    const count = variant === 'row-single' ? 1 : Math.max(1, rows);\n    return (\n      <div\n        ref={ref}\n        role=\"status\"\n        aria-live=\"polite\"\n        data-variant={variant}\n        className={cn('flex w-full flex-col items-start bg-background', className)}\n        {...rest}\n      >\n        {Array.from({ length: count }).map((_, i) => (\n          <SkeletonRowBars key={i} />\n        ))}\n        {sr}\n      </div>\n    );\n  }\n\n  if (variant === 'text') {\n    return (\n      <div\n        ref={ref}\n        role=\"status\"\n        aria-live=\"polite\"\n        data-variant={variant}\n        className={cn('flex w-80 max-w-full flex-col items-start gap-2', className)}\n        {...rest}\n      >\n        <span className={cn(barDefault, 'h-4 w-44 rounded-item')} />\n        <span className={cn(barSubtle, 'h-2 w-full rounded-item')} />\n        <span className={cn(barSubtle, 'h-2 w-11/12 rounded-item')} />\n        <span className={cn(barSubtle, 'h-2 w-2/3 rounded-item')} />\n        {sr}\n      </div>\n    );\n  }\n\n  return (\n    <div\n      ref={ref}\n      role=\"status\"\n      aria-live=\"polite\"\n      data-variant={variant}\n      className={cn('flex items-center gap-3', className)}\n      {...rest}\n    >\n      <span className={cn(barDefault, 'h-8 w-8 shrink-0 rounded-full')} />\n      <span className=\"flex flex-col items-start gap-2\">\n        <span className={cn(barDefault, 'h-3 w-36 rounded-item')} />\n        <span className={cn(barSubtle, 'h-2 w-24 rounded-item')} />\n      </span>\n      {sr}\n    </div>\n  );\n});\n\nSkeleton.displayName = 'Skeleton';\n\nexport { Skeleton, type SkeletonProps, type SkeletonVariant };\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}