{"$schema":"https:\/\/ui.particle.academy\/schema\/registry-item.json","name":"skeleton","type":"registry:ui","title":"Skeleton","description":"Skeleton from react-fancy","package":"react-fancy","dependencies":[],"registryDependencies":[],"files":[{"path":"components\/fancy\/skeleton\/Skeleton.tsx","content":"import { forwardRef } from \"react\";\r\nimport { cn } from \"..\/..\/utils\/cn\";\r\nimport type { SkeletonProps } from \".\/Skeleton.types\";\r\n\r\nfunction toStyleValue(value: string | number | undefined): string | undefined {\r\n  if (value === undefined) return undefined;\r\n  return typeof value === \"number\" ? `${value}px` : value;\r\n}\r\n\r\nexport const Skeleton = forwardRef<HTMLDivElement, SkeletonProps>(\r\n  ({ shape = \"rect\", width, height, className }, ref) => {\r\n    const style: React.CSSProperties = {\r\n      width: toStyleValue(width),\r\n      height: toStyleValue(height),\r\n    };\r\n\r\n    return (\r\n      <div\r\n        ref={ref}\r\n        aria-hidden=\"true\"\r\n        data-react-fancy-skeleton=\"\"\r\n        className={cn(\r\n          \"animate-pulse bg-zinc-200 dark:bg-zinc-700\",\r\n          shape === \"rect\" && \"rounded-lg\",\r\n          shape === \"circle\" && \"rounded-full aspect-square\",\r\n          shape === \"text\" && \"rounded h-4 w-full\",\r\n          className,\r\n        )}\r\n        style={style}\r\n      \/>\r\n    );\r\n  },\r\n);\r\n\r\nSkeleton.displayName = \"Skeleton\";\r\n","type":"registry:ui","target":"components\/fancy\/skeleton\/Skeleton.tsx"},{"path":"components\/fancy\/skeleton\/Skeleton.types.ts","content":"export interface SkeletonProps {\r\n  \/** Shape of the skeleton placeholder *\/\r\n  shape?: \"rect\" | \"circle\" | \"text\";\r\n  \/** Custom width (CSS value or number in px) *\/\r\n  width?: string | number;\r\n  \/** Custom height (CSS value or number in px) *\/\r\n  height?: string | number;\r\n  \/** Additional CSS classes *\/\r\n  className?: string;\r\n}\r\n","type":"registry:ui","target":"components\/fancy\/skeleton\/Skeleton.types.ts"},{"path":"components\/fancy\/skeleton\/index.ts","content":"export { Skeleton } from \".\/Skeleton\";\r\nexport type { SkeletonProps } from \".\/Skeleton.types\";\r\n","type":"registry:ui","target":"components\/fancy\/skeleton\/index.ts"}]}