{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "row",
  "type": "registry:ui",
  "title": "Row",
  "description": "A list, panel or option row; selection raises its plate, opened detail marks its rail, and completion strikes its text.",
  "dependencies": [],
  "registryDependencies": [
    "https://metalui.dev/r/tokens.json"
  ],
  "files": [
    {
      "path": "packages/metalui/src/components/row/row.tsx",
      "type": "registry:ui",
      "target": "components/metalui/components/row/row.tsx",
      "content": "'use client';\n\nimport * as React from 'react';\n\n/* ROW: a row in a list.\n *   list     a compact row of a pinned query (5 / 8, radius 12, 13 pt); hover raises it\n *   panel    a row of a gathered panel (8 / 12, radius 14, 14 pt); hover raises it\n *   option   a palette row (36 tall, radius 12); the active one raises with a green rail\n * checked strikes the text in ink3; maybe fades a weak match. Slots: Row.Root, Row.Lead, Row.Text, Row.Trail.\n * Styled with the theme's utilities (the row recipe). */\n\nexport interface RowRootProps extends React.HTMLAttributes<HTMLElement> {\n  variant?: 'list' | 'panel' | 'option';\n  checked?: boolean;\n  /** option: the active row. */\n  active?: boolean;\n  /** Persistent selection plate, independent of keyboard highlight or completion. */\n  selected?: boolean;\n  /** The row whose detail is open: a leading rail, independent of selection. */\n  opened?: boolean;\n  /** a weak match, faded. */\n  maybe?: boolean;\n  as?: 'div' | 'li' | 'tr' | 'button';\n}\n\nconst FRAME = 'group/row relative box-border flex text-ink cursor-pointer outline-none data-maybe:opacity-row-maybe data-selected:recipe-row-option-on data-selected:pointer-hover:recipe-row-option-on data-selected:focus-visible:row-option-focus data-highlighted:focus-ring-forced data-opened:before:absolute data-opened:before:start-row-rail-offset data-opened:before:top-row-rail-inset data-opened:before:bottom-row-rail-inset data-opened:before:w-row-rail-w data-opened:before:rounded-row-rail-radius data-opened:before:bg-row-rail-color';\nconst VARIANTS = {\n  list: 'items-start gap-row-list-gap py-row-list-pad-y px-row-list-pad-x rounded-row-list-radius type-row-list transition-row pointer-hover:recipe-row-list-hover focus-visible:row-list-focus',\n  panel: 'items-start gap-row-panel-gap py-row-panel-pad-y px-row-panel-pad-x rounded-row-panel-radius type-row-panel transition-row pointer-hover:recipe-row-panel-hover focus-visible:row-panel-focus',\n  option: `items-center gap-row-option-gap h-row-option-height px-row-option-pad-x rounded-row-option-radius type-row-option [&>svg]:size-row-option-glyph [&>svg]:flex-none [&>svg]:text-ink2 [&>.mu-row-lead>svg]:size-row-option-glyph [&>.mu-row-lead>svg]:text-ink2 data-active:recipe-row-option-on data-highlighted:recipe-row-option-on data-active:before:absolute data-active:before:start-row-rail-offset data-active:before:top-row-rail-inset data-active:before:bottom-row-rail-inset data-active:before:w-row-rail-w data-active:before:rounded-row-rail-radius data-active:before:bg-row-rail-color data-highlighted:before:absolute data-highlighted:before:start-row-rail-offset data-highlighted:before:top-row-rail-inset data-highlighted:before:bottom-row-rail-inset data-highlighted:before:w-row-rail-w data-highlighted:before:rounded-row-rail-radius data-highlighted:before:bg-row-rail-color`,\n};\nconst LEAD = 'mu-row-lead inline-flex flex-none';\nconst TEXT = 'mu-row-text flex-1 min-w-0 group-data-checked/row:text-row-text-checked group-data-checked/row:line-through';\nconst TRAIL = 'mu-row-trail inline-flex items-center gap-row-option-gap ms-auto';\n\nconst Root = React.forwardRef<HTMLElement, RowRootProps>(function RowRoot({ variant = 'list', checked, active, selected, opened, maybe, as = 'div', className, ...props }, ref) {\n  const Tag = as as React.ElementType;\n  const own = `mu-row ${FRAME} ${VARIANTS[variant]}`;\n  return (\n    <Tag\n      ref={ref}\n      data-variant={variant}\n      data-checked={checked ? '' : undefined}\n      data-selected={selected ? '' : undefined}\n      data-opened={opened ? '' : undefined}\n      aria-selected={props.role && ['row', 'option', 'treeitem', 'tab'].includes(props.role) ? selected : undefined}\n      data-active={active ? '' : undefined}\n      data-maybe={maybe ? '' : undefined}\n      className={className ? `${own} ${className}` : own}\n      {...props}\n    />\n  );\n});\nfunction Lead({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) {\n  return <span className={className ? `${LEAD} ${className}` : LEAD} {...props} />;\n}\nfunction Text({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) {\n  return <span className={className ? `${TEXT} ${className}` : TEXT} {...props} />;\n}\nfunction Trail({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) {\n  return <span className={className ? `${TRAIL} ${className}` : TRAIL} {...props} />;\n}\n\nexport const Row = Object.assign(Root, { Root, Lead, Text, Trail });\nexport type RowProps = RowRootProps;\n"
    }
  ],
  "docs": "Agent guide: https://metalui.dev/r/row.md. SwiftUI: MetalRow in the MetalUI Swift package."
}