{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "skeleton-group",
  "title": "Skeleton Group",
  "description": "Composable loading placeholders that match page structure without layout shift.",
  "dependencies": [
    "class-variance-authority"
  ],
  "registryDependencies": [
    "skeleton",
    "https://uaiblocks.dev/r/uai-theme.json",
    "https://uaiblocks.dev/r/uai-utils.json"
  ],
  "files": [
    {
      "path": "src/registry/uai/components/skeleton-group.tsx",
      "content": "\"use client\";\n\nimport { cva } from \"class-variance-authority\";\nimport { type ComponentProps, type CSSProperties, createContext, useContext } from \"react\";\nimport { Skeleton } from \"@/components/ui/skeleton\";\nimport { cn } from \"@/lib/uai-utils\";\n\nexport const SKELETON_GROUP_VARIANTS = [\"shimmer\", \"pulse\", \"static\"] as const;\nexport type SkeletonGroupVariant = (typeof SKELETON_GROUP_VARIANTS)[number];\nexport type SkeletonGroupProps = ComponentProps<\"div\"> & {\n  variant?: SkeletonGroupVariant;\n  /** Announced to assistive technology while the placeholder is shown. */\n  label?: string;\n};\ntype Size = CSSProperties[\"width\"];\nconst Context = createContext<SkeletonGroupVariant | null>(null);\nfunction useVariant(part: string) {\n  const variant = useContext(Context);\n  if (!variant) throw new Error(`${part} must be used within SkeletonGroup`);\n  return variant;\n}\n\nexport function SkeletonGroup({\n  variant = \"shimmer\",\n  label = \"Loading…\",\n  className,\n  children,\n  ...props\n}: SkeletonGroupProps) {\n  return (\n    <Context.Provider value={variant}>\n      <div\n        role=\"status\"\n        aria-busy=\"true\"\n        aria-live=\"polite\"\n        data-slot=\"skeleton-group\"\n        className={cn(\"relative grid min-w-0 gap-3\", className)}\n        {...props}\n        data-variant={variant}\n      >\n        <span className=\"sr-only\">{label}</span>\n        <div aria-hidden=\"true\" className=\"contents\">\n          {children}\n        </div>\n      </div>\n    </Context.Provider>\n  );\n}\n\nconst shapeVariants = cva(\"block max-w-full flex-none bg-muted\", {\n  variants: {\n    motion: {\n      shimmer:\n        \"animate-[skeleton-shimmer_1.8s_cubic-bezier(0.4,0,0.6,1)_infinite] bg-[linear-gradient(90deg,transparent_0%,color-mix(in_oklab,var(--foreground)_7%,transparent)_50%,transparent_100%)] bg-size-[200%_100%] bg-no-repeat motion-reduce:animate-none motion-reduce:bg-none\",\n      pulse: \"animate-[pulse_1.6s_ease-in-out_infinite] motion-reduce:animate-none\",\n      static: \"animate-none\",\n    },\n  },\n});\n\nfunction Shape({\n  part,\n  slot,\n  width,\n  height,\n  className,\n  style,\n  ...props\n}: ComponentProps<typeof Skeleton> & { part: string; slot: string; width: Size; height: Size }) {\n  const variant = useVariant(part);\n  return (\n    <Skeleton\n      data-slot={slot}\n      className={cn(shapeVariants({ motion: variant }), className)}\n      {...props}\n      data-motion={variant}\n      style={{ width, height, ...style }}\n    />\n  );\n}\n\nexport function SkeletonGroupLine({\n  width = \"100%\",\n  height = 10,\n  className,\n  ...props\n}: ComponentProps<typeof Skeleton> & { width?: Size; height?: Size }) {\n  return (\n    <Shape\n      {...props}\n      part=\"SkeletonGroupLine\"\n      slot=\"skeleton-group-line\"\n      width={width}\n      height={height}\n      className={cn(\"rounded-full\", className)}\n    />\n  );\n}\n\nexport function SkeletonGroupCircle({\n  size = 28,\n  className,\n  ...props\n}: ComponentProps<typeof Skeleton> & { size?: number }) {\n  return (\n    <Shape\n      {...props}\n      part=\"SkeletonGroupCircle\"\n      slot=\"skeleton-group-circle\"\n      width={size}\n      height={size}\n      className={cn(\"rounded-full\", className)}\n    />\n  );\n}\n\nexport function SkeletonGroupBlock({\n  width = \"100%\",\n  height = 96,\n  className,\n  ...props\n}: ComponentProps<typeof Skeleton> & { width?: Size; height?: Size }) {\n  return (\n    <Shape\n      {...props}\n      part=\"SkeletonGroupBlock\"\n      slot=\"skeleton-group-block\"\n      width={width}\n      height={height}\n      className={cn(\"rounded-[10px]\", className)}\n    />\n  );\n}\n\nexport function SkeletonGroupRow({ className, ...props }: ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"skeleton-group-row\"\n      className={cn(\"flex min-w-0 items-center gap-3\", className)}\n      {...props}\n    />\n  );\n}\n\nexport function SkeletonGroupStack({ className, ...props }: ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"skeleton-group-stack\"\n      className={cn(\"grid min-w-0 flex-[1_1_0] gap-2\", className)}\n      {...props}\n    />\n  );\n}\n\nexport function SkeletonGroupCard({ className, ...props }: ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"skeleton-group-card\"\n      className={cn(\"grid min-w-0 gap-3.5 rounded-[14px] border bg-card p-4\", className)}\n      {...props}\n    />\n  );\n}\n",
      "type": "registry:ui",
      "target": "@ui/uai/skeleton-group.tsx"
    }
  ],
  "categories": [
    "feedback",
    "loading"
  ],
  "type": "registry:ui"
}