{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "skeleton",
  "type": "registry:ui",
  "title": "Skeleton",
  "description": "جای خالی هنگام بارگذاری؛ تزئینی است — روی ظرف والد aria-busy=\"true\" بگذارید",
  "registryDependencies": [
    "https://kashi.sepantapouya.com/r/cx.json"
  ],
  "files": [
    {
      "path": "registry/kashi/Skeleton.tsx",
      "type": "registry:ui",
      "target": "components/kashi/Skeleton.tsx",
      "content": "\"use client\";\n\nimport type { CSSProperties } from \"react\";\nimport { cx } from \"./cx\";\n\nexport interface SkeletonProps {\n  width?: string | number;\n  height?: string | number;\n  /** شکل دایره، مثل جای آواتار */\n  circle?: boolean;\n  /** چند خط متن */\n  lines?: number;\n  className?: string;\n}\n\nconst size = (v?: string | number) => (typeof v === \"number\" ? `${v}px` : v);\n\n/** جای خالی هنگام بارگذاری؛ تزئینی است — روی ظرف والد aria-busy=\"true\" بگذارید */\nexport function Skeleton({ width, height, circle, lines, className }: SkeletonProps) {\n  const style = { \"--k-skeleton-width\": size(width), \"--k-skeleton-height\": size(height ?? (circle ? width : undefined)) } as CSSProperties;\n  if (lines) {\n    return (\n      <span className={cx(\"k-skeleton-group\", className)} aria-hidden=\"true\" style={style}>\n        {Array.from({ length: lines }, (_, i) => <span key={i} className=\"k-skeleton k-skeleton--text\" />)}\n      </span>\n    );\n  }\n  return <span className={cx(\"k-skeleton\", circle && \"k-skeleton--circle\", className)} aria-hidden=\"true\" style={style} />;\n}\n"
    }
  ]
}