{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "settings",
  "type": "registry:ui",
  "title": "Settings",
  "description": "An app's settings as sections of rows: an engraved heading over a raised card; each row a name, an optional detail and one control on the right; engraved rules between rows; shortcut rows with keycaps.",
  "dependencies": [],
  "registryDependencies": [
    "https://metalui.dev/r/tokens.json"
  ],
  "files": [
    {
      "path": "packages/metalui/src/blocks/settings/settings.tsx",
      "type": "registry:ui",
      "target": "components/metalui/blocks/settings/settings.tsx",
      "content": "'use client';\n\nimport * as React from 'react';\nimport { Surface } from '../../components/surface/surface';\nimport { Label } from '../../components/label/label';\nimport { Rule } from '../../components/rule/rule';\nimport { Kbd } from '../../components/kbd/kbd';\n\n/* ─────────────────────────────────────────────────────────\n * SETTINGS (a block): the settings of an app, as sections of rows\n *   Settings.Section  an engraved heading over a raised card (Surface raise-lite, card radius)\n *   Settings.Row      a name and an optional detail on the left, one control on the right\n *                     (a Switch, a Button, a Segmented, a value); rows are split by engraved\n *                     rules inset to the text\n *   Settings.Keys     a shortcut row: what it does, and its keys as keycaps\n * Layout only (the settings group); every paint is its parts'. A row never raises on hover:\n * only its control acts.\n * ───────────────────────────────────────────────────────── */\n\nconst SECTION = 'mu-settings-section flex flex-col gap-settings-heading-gap';\nconst HEADING = 'px-settings-heading-pad-x';\nconst CARD = 'flex flex-col';\nconst ROW = 'mu-settings-row flex items-center gap-settings-row-gap min-h-settings-row-min py-settings-row-pad-y px-settings-row-pad-x';\nconst TEXT = 'flex min-w-0 flex-1 flex-col gap-settings-detail-gap';\nconst CONTROL = 'flex flex-none items-center gap-settings-keys-gap';\nconst RULE = 'mx-settings-row-pad-x';\n\nfunction Root({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {\n  return <div className={className ? `mu-settings flex flex-col gap-settings-section-gap ${className}` : 'mu-settings flex flex-col gap-settings-section-gap'} {...props} />;\n}\n\n/** A titled group of rows. */\nfunction Section({ title, children, className }: { title: string; children: React.ReactNode; className?: string }) {\n  const rows = React.Children.toArray(children).filter(Boolean);\n  return (\n    <section className={className ? `${SECTION} ${className}` : SECTION} aria-label={title}>\n      <Label variant=\"engraved\" as=\"h3\" className={HEADING}>{title}</Label>\n      <Surface material=\"raise-lite\" radius=\"card\" className={CARD}>\n        {rows.flatMap((row, i) => (i ? [<Rule key={`r${i}`} className={RULE} />, row] : [row]))}\n      </Surface>\n    </section>\n  );\n}\n\nexport interface SettingsRowProps {\n  /** What the setting is, as a person would say it: \"Sync this canvas\". */\n  name: React.ReactNode;\n  /** One short line of what it does or what it is now. */\n  detail?: React.ReactNode;\n  /** The one control: a Switch, a Button, a Segmented, or a value. */\n  children?: React.ReactNode;\n  /** An id for the name, so a control can be labelled by it (aria-labelledby). */\n  id?: string;\n}\n\n/** One setting: its name and detail, and its control. */\nfunction Row({ name, detail, children, id }: SettingsRowProps) {\n  return (\n    <div className={ROW}>\n      <div className={TEXT}>\n        <Label variant=\"name\" id={id}>{name}</Label>\n        {detail && <Label variant=\"detail\">{detail}</Label>}\n      </div>\n      {children && <div className={CONTROL}>{children}</div>}\n    </div>\n  );\n}\n\n/** A shortcut: what it does, and its keys (each string one keycap). */\nfunction Keys({ name, keys }: { name: React.ReactNode; keys: string[] }) {\n  return (\n    <Row name={name}>\n      {keys.map((k) => <Kbd key={k}>{k}</Kbd>)}\n    </Row>\n  );\n}\n\nexport const Settings = Object.assign(Root, { Root, Section, Row, Keys });\n"
    }
  ],
  "docs": "Agent guide: https://metalui.dev/r/settings.md. SwiftUI: MetalSettings in the MetalUI Swift package."
}