{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "skeleton",
  "type": "registry:ui",
  "title": "Skeleton",
  "description": "Animated placeholder block for loading states — mirror your content's shape to avoid layout shift.",
  "dependencies": [
    "@saasflare/ui"
  ],
  "files": [
    {
      "path": "components/ui/skeleton.tsx",
      "type": "registry:ui",
      "content": "// @toreview\n\"use client\"\n\n/**\n * @fileoverview Saasflare Skeleton — loading placeholder with shimmer effect.\n * @module packages/ui/components/ui/skeleton\n * @package ui\n *\n * Self-contained implementation. Shimmer keyframes defined in theme.css.\n * When reduced motion is preferred, shows a static gradient instead of shimmer.\n *\n * Radius via the optional `as` prop maps to the design-system scale so the\n * placeholder matches the component it stands in for. Without `as`, the\n * legacy `rounded-md` class is preserved (non-breaking).\n *\n * @example\n * import { Skeleton } from \"@saasflare/ui\";\n * <Skeleton as=\"text\" className=\"h-4 w-48\" />\n * <Skeleton as=\"avatar\" className=\"h-12 w-12\" />\n * <Skeleton as=\"card\" className=\"h-40 w-full\" />\n */\n\nimport * as React from \"react\"\nimport type { CSSProperties } from \"react\"\nimport { cn } from \"@saasflare/ui\"\nimport { useSaasflareProps, type SaasflareComponentProps } from \"@saasflare/ui\"\n\n/** Component the skeleton imitates — drives radius from the design tokens. */\ntype SkeletonAs = \"avatar\" | \"text\" | \"card\"\n\n/**\n * Props for {@link Skeleton}.\n *\n * Extends the native div props with {@link SaasflareComponentProps}; the\n * optional `as` prop snaps the placeholder's radius to the design-token scale\n * of the component it stands in for.\n */\ninterface SkeletonProps extends Omit<React.ComponentProps<\"div\">, keyof SaasflareComponentProps>, SaasflareComponentProps {\n  /**\n   * Component shape to imitate. When set, radius follows the design-system\n   * scale (and at `data-radius=\"pill\"`, all variants collapse to fully rounded\n   * automatically — see theme.css).\n   *\n   * - `avatar` → fully rounded\n   * - `text`   → `--radius-sm`\n   * - `card`   → `--radius-lg`\n   *\n   * Omit for legacy behavior (`rounded-md` Tailwind class).\n   */\n  as?: SkeletonAs\n}\n\nconst RADIUS_BY_AS: Record<SkeletonAs, string> = {\n  avatar: \"9999px\",\n  text: \"var(--radius-sm)\",\n  card: \"var(--radius-lg)\",\n}\n\n/**\n * Skeleton loading placeholder with animated shimmer gradient.\n *\n * @component\n * @package ui\n */\nfunction Skeleton({ as, className, style, surface, radius, animated, iconWeight, ...props }: SkeletonProps) {\n  const sf = useSaasflareProps({ surface, radius, animated, iconWeight })\n\n  const radiusStyle: CSSProperties | undefined = as\n    ? { borderRadius: RADIUS_BY_AS[as], ...style }\n    : style\n\n  return (\n    <div\n      {...props}\n      data-slot=\"skeleton\"\n      data-surface={sf.surface}\n      data-radius={sf.radius}\n      data-animated={String(sf.animated)}\n      className={cn(\n        !as && \"rounded-md\",\n        \"bg-gradient-to-r from-accent/80 via-accent/40 to-accent/80 bg-[length:200%_100%] animate-[shimmer_2s_ease-in-out_infinite] motion-reduce:animate-none motion-reduce:bg-accent/60\",\n        className,\n      )}\n      style={radiusStyle}\n    />\n  )\n}\n\nexport { Skeleton, type SkeletonProps }\n",
      "target": "components/ui/skeleton.tsx"
    }
  ],
  "$meta": {
    "source": "https://ui.saasflare.io/r/skeleton.json"
  }
}