{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "label",
  "type": "registry:ui",
  "title": "Label",
  "description": "Text in a set role: engraved, small, title, heading, query, count, cell, value, display, readout, on-graphite and dark; as=\"input\" edits in place.",
  "dependencies": [],
  "registryDependencies": [
    "https://metalui.dev/r/tokens.json"
  ],
  "files": [
    {
      "path": "packages/metalui/src/components/label/label.tsx",
      "type": "registry:ui",
      "target": "components/metalui/components/label/label.tsx",
      "content": "'use client';\n\nimport * as React from 'react';\n\n/* LABEL: text in a set role.\n *   engraved, small   the mono label with a lip, uppercase (small at 8.5)\n *   title, heading    an object's name, a page title\n *   query             a pinned query's words\n *   count, cell       a mono number; a mono table cell\n *   value, value-small  a measured value in mono (22, 12)\n *   display, display-quiet  a large line and its quieter continuation\n *   readout, readout-dim  mono on graphite, and the same in its dim ink\n *   on-graphite       sans text on graphite chrome\n *   dark              an engraving on dark chrome\n * tone=\"accent\" turns it green without a lip (a rule that says what a drop will do).\n * placeholder shows in ink3 at 500 while the label is empty; as=\"input\" makes an editable label that keeps the look.\n * Styled with the theme's utilities (the label recipe). */\n\nexport type LabelVariant =\n  | 'engraved' | 'small' | 'title' | 'heading' | 'query' | 'count' | 'cell' | 'value' | 'value-small'\n  | 'display' | 'display-quiet' | 'readout' | 'readout-dim' | 'on-graphite' | 'dark' | 'name' | 'detail';\n\nexport interface LabelProps extends React.HTMLAttributes<HTMLElement> {\n  variant?: LabelVariant;\n  /** accent: green, no lip. */\n  tone?: 'accent';\n  as?: 'span' | 'b' | 'i' | 'small' | 'div' | 'h2' | 'h3' | 'p' | 'td' | 'th' | 'input';\n  /** Shown in ink3 at 500 while the label is empty (a span), or the input's placeholder. */\n  placeholder?: string;\n  /** as=\"input\" only. */\n  value?: string;\n  onChange?: React.ChangeEventHandler<HTMLInputElement>;\n}\n\nconst ENGRAVED = 'type-label-engraved';\nconst EMPHASIS = '[&_b]:weight-label-emphasis-weight [&_b]:text-label-emphasis-color';\nconst ROLES: Record<LabelVariant, string> = {\n  engraved: `${ENGRAVED} text-label-engraved-color recipe-label-engraved ${EMPHASIS}`,\n  small: `type-label-small text-label-engraved-color recipe-label-engraved ${EMPHASIS}`,\n  dark: `${ENGRAVED} text-label-dark-color recipe-label-dark`,\n  title: 'type-label-title text-label-title-color',\n  heading: 'type-label-heading text-label-heading-color',\n  query: 'type-label-query text-label-query-color',\n  count: 'type-label-count text-label-count-color',\n  cell: 'type-label-cell text-label-cell-color',\n  value: 'type-label-value text-label-value-color',\n  'value-small': 'type-label-value-small text-label-value-small-color',\n  display: 'type-label-display text-label-display-color whitespace-normal',\n  'display-quiet': 'type-label-display-quiet text-label-display-quiet-color whitespace-normal',\n  readout: 'type-label-readout text-label-readout-color',\n  'readout-dim': 'type-label-readout not-italic text-label-readout-dim-color',\n  'on-graphite': 'type-label-on-graphite text-label-on-graphite-color',\n  name: 'type-label-name text-label-name-color',\n  detail: 'type-label-detail text-label-detail-color',\n};\nconst ACCENT: Partial<Record<LabelVariant, string>> = {\n  engraved: `${ENGRAVED} text-label-accent-color text-shadow-none ${EMPHASIS}`,\n  small: `type-label-small text-label-accent-color text-shadow-none ${EMPHASIS}`,\n};\n/* An editable label: an input that keeps the look and draws no field of its own. */\nconst INPUT = 'box-content min-w-0 p-0 m-0 border-0 outline-none bg-transparent caret-green-deep cursor-text field-sizing-content';\n\nexport const Label = React.forwardRef<HTMLElement, LabelProps>(function Label({ variant = 'engraved', tone, as = 'span', placeholder, className, ...props }, ref) {\n  const Tag = as as React.ElementType;\n  const role = tone === 'accent' ? ACCENT[variant] ?? `${ROLES[variant]} text-label-accent-color text-shadow-none` : ROLES[variant];\n  const own = `mu-label whitespace-nowrap transition-label ${role}${placeholder !== undefined ? ' label-placeholder' : ''}${as === 'input' ? ` ${INPUT}` : ''}`;\n  const hint = as === 'input' ? { placeholder } : { 'data-placeholder': placeholder };\n  return <Tag ref={ref} data-variant={variant} data-tone={tone} className={className ? `${own} ${className}` : own} {...hint} {...props} />;\n});\n"
    }
  ],
  "docs": "Agent guide: https://metalui.dev/r/label.md. SwiftUI: MetalLabel in the MetalUI Swift package."
}