{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "caption",
  "title": "Caption",
  "description": "Small text for metadata and labels, in four sizes.",
  "dependencies": [
    "@base-ui/react",
    "@stylexjs/stylex"
  ],
  "registryDependencies": [
    "https://constella.aayush.cv/r/base.json"
  ],
  "files": [
    {
      "path": "src/components/typography/caption.tsx",
      "content": "import { mergeProps } from \"@base-ui/react/merge-props\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport * as stylex from \"@stylexjs/stylex\";\n\nimport type { Sx, TextColor, TextWeight } from \"@/lib/constella/styles\";\nimport {\n  textColorStyles,\n  textWeightStyles,\n  typeStyles,\n} from \"@/lib/constella/styles\";\nimport { letterSpacings } from \"@/lib/constella/tokens.stylex\";\n\nconst captionSizes = [\"xs\", \"sm\", \"base\", \"lg\"] as const;\n\ntype CaptionSize = (typeof captionSizes)[number];\n\ntype CaptionProps = Omit<\n  useRender.ComponentProps<\"p\">,\n  \"className\" | \"style\"\n> & {\n  color?: TextColor;\n  size?: CaptionSize;\n  sx?: Sx;\n  uppercase?: boolean;\n  weight?: TextWeight;\n};\n\nconst styles = stylex.create({\n  base: {\n    marginBlock: 0,\n  },\n  uppercase: {\n    letterSpacing: letterSpacings.caps,\n    textTransform: \"uppercase\",\n  },\n});\n\nconst sizeStyles = {\n  xs: typeStyles.captionXs,\n  sm: typeStyles.captionSm,\n  base: typeStyles.captionBase,\n  lg: typeStyles.captionLg,\n} satisfies Record<CaptionSize, stylex.StyleXStyles>;\n\nfunction Caption({\n  color = \"muted\",\n  render,\n  size = \"base\",\n  sx,\n  uppercase = false,\n  weight = \"regular\",\n  ...props\n}: CaptionProps) {\n  return useRender({\n    defaultTagName: \"p\",\n    props: mergeProps<\"p\">(\n      props,\n      stylex.props(\n        styles.base,\n        sizeStyles[size],\n        uppercase && styles.uppercase,\n        textWeightStyles[weight],\n        textColorStyles[color],\n        sx\n      )\n    ),\n    render,\n    state: { color, size, slot: \"caption\", weight },\n  });\n}\n\nexport { Caption, captionSizes };\nexport type { CaptionProps, CaptionSize };\n",
      "type": "registry:component"
    }
  ],
  "docs": "Usage: https://constella.aayush.cv/docs/components/caption/index.md",
  "type": "registry:ui"
}