{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "label",
  "title": "Label",
  "description": "Names a control, in the same voice for every field.",
  "dependencies": [
    "@stylexjs/stylex"
  ],
  "registryDependencies": [
    "https://constella.aayush.cv/r/base.json"
  ],
  "files": [
    {
      "path": "src/components/primitives/label.tsx",
      "content": "import * as stylex from \"@stylexjs/stylex\";\nimport type { ComponentProps } from \"react\";\n\nimport type { Sx } from \"@/lib/constella/styles\";\nimport { typeStyles } from \"@/lib/constella/styles\";\nimport { colors, fontWeights, space } from \"@/lib/constella/tokens.stylex\";\n\ntype LabelProps = Omit<ComponentProps<\"label\">, \"className\" | \"style\"> & {\n  sx?: Sx;\n};\n\nconst styles = stylex.create({\n  label: {\n    alignItems: \"center\",\n    // The control fades itself, so the label steps down instead of stacking a second fade.\n    color: {\n      default: colors.textPrimary,\n      \":is([data-disabled], :has([data-disabled], :disabled))\":\n        colors.textMuted,\n    },\n    display: \"flex\",\n    fontWeight: fontWeights.medium,\n    gap: space.xs,\n    overflowWrap: \"anywhere\",\n    userSelect: \"none\",\n  },\n});\n\n/** For a field's own label part (`SliderLabel`), so every field labels alike. */\nfunction labelStyles() {\n  return [typeStyles.textSm, styles.label];\n}\n\nfunction Label({ sx, ...props }: LabelProps) {\n  return (\n    // oxlint-disable-next-line jsx-a11y/label-has-associated-control -- the caller passes `htmlFor` or wraps the control\n    <label\n      data-slot=\"label\"\n      {...props}\n      {...stylex.props([typeStyles.textSm, styles.label], sx)}\n    />\n  );\n}\n\nexport { Label, labelStyles };\nexport type { LabelProps };\n",
      "type": "registry:component"
    }
  ],
  "docs": "Usage: https://constella.aayush.cv/docs/components/label/index.md",
  "type": "registry:ui"
}