{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "skeleton",
  "title": "Skeleton",
  "description": "A pulsing placeholder for content still loading.",
  "dependencies": [
    "@stylexjs/stylex"
  ],
  "registryDependencies": [
    "https://constella.aayush.cv/r/base.json"
  ],
  "files": [
    {
      "path": "src/components/primitives/skeleton.tsx",
      "content": "import * as stylex from \"@stylexjs/stylex\";\nimport type { ComponentProps } from \"react\";\n\nimport type { Sx } from \"@/lib/constella/styles\";\nimport {\n  colors,\n  durations,\n  easings,\n  opacities,\n  radii,\n} from \"@/lib/constella/tokens.stylex\";\n\ntype Styled<T> = Omit<T, \"className\" | \"style\"> & {\n  sx?: Sx;\n};\n\nconst pulse = stylex.keyframes({\n  \"50%\": { opacity: opacities.pulse },\n});\n\nconst styles = stylex.create({\n  skeleton: {\n    animationDuration: durations.pulse,\n    animationIterationCount: \"infinite\",\n    animationName: pulse,\n    animationTimingFunction: easings.inOut,\n    backgroundColor: colors.fill,\n    borderStartStartRadius: radii.sm,\n    borderStartEndRadius: radii.sm,\n    borderEndStartRadius: radii.sm,\n    borderEndEndRadius: radii.sm,\n  },\n});\n\nfunction Skeleton({ sx, ...props }: Styled<ComponentProps<\"div\">>) {\n  return (\n    <div\n      aria-hidden\n      data-slot=\"skeleton\"\n      {...props}\n      {...stylex.props(styles.skeleton, sx)}\n    />\n  );\n}\n\nexport { Skeleton };\n",
      "type": "registry:component"
    }
  ],
  "docs": "Usage: https://constella.aayush.cv/docs/components/skeleton/index.md",
  "type": "registry:ui"
}