{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "field",
  "type": "registry:ui",
  "title": "Field",
  "description": "Text input in a well with a leading glyph and trailing keycaps; SearchField, a button in a well that opens search.",
  "dependencies": [],
  "registryDependencies": [
    "https://metalui.dev/r/tokens.json"
  ],
  "files": [
    {
      "path": "packages/metalui/src/components/field/field.tsx",
      "type": "registry:ui",
      "target": "components/metalui/field/field.tsx",
      "content": "'use client';\n\nimport * as React from 'react';\nimport { Well } from '../well/well';\nimport { Kbd } from '../kbd/kbd';\n\n/* FIELD: text input in a well, a leading glyph and trailing keycaps (the palette's field).\n * SEARCH FIELD: a button in a well that opens search (the dock's search well), light or graphite.\n * Field slots: Field.Root, Field.Icon, Field.Input, Field.Trail. */\n\n/* Styled with the theme's utilities (the field recipe on the well recipe). */\nconst FIELD = 'mu-field flex items-center gap-field-field-gap h-field-field-height pl-field-field-pad-left pr-field-field-pad-right rounded-field-field-radius text-field-field-hint cursor-text [&>.mu-field-icon>svg]:size-field-field-glyph';\nconst ICON = 'mu-field-icon inline-grid flex-none';\nconst INPUT = 'mu-field-input flex-1 min-w-0 p-0 border-0 outline-none bg-transparent type-field-field text-field-field-ink caret-field-field-caret placeholder:text-field-field-hint focus-visible:outline-none';\nconst TRAIL = 'mu-field-trail inline-flex items-center ml-auto';\nconst SEARCH = {\n  graphite: 'mu-search-field box-border flex items-center gap-field-search-gap h-field-search-height min-w-field-search-min-width pl-field-search-pad-left pr-field-search-pad-right border-0 rounded-field-search-radius type-field-search cursor-text [&>.mu-field-icon>svg]:size-field-search-glyph [&>.mu-kbd]:ml-auto focus-visible:focus-ring-flush text-field-search-ink recipe-well-graphite',\n  light: 'mu-search-field box-border flex items-center gap-field-search-gap h-field-search-height min-w-field-search-min-width pl-field-search-pad-left pr-field-search-pad-right border-0 rounded-field-search-radius type-field-search cursor-text [&>.mu-field-icon>svg]:size-field-search-glyph [&>.mu-kbd]:ml-auto focus-visible:focus-ring-flush text-field-field-hint recipe-well-field',\n};\n\nconst Root = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement> & { tone?: 'light' | 'graphite' }>(function FieldRoot({ tone = 'light', className, ...props }, ref) {\n  return <Well ref={ref} as=\"label\" variant={tone === 'graphite' ? 'graphite' : 'field'} className={className ? `${FIELD} ${className}` : FIELD} {...props} />;\n});\nfunction Icon({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) {\n  return <span aria-hidden className={className ? `${ICON} ${className}` : ICON} {...props} />;\n}\nconst Input = React.forwardRef<HTMLInputElement, React.InputHTMLAttributes<HTMLInputElement>>(function FieldInput({ className, ...props }, ref) {\n  return <input ref={ref} autoComplete=\"off\" spellCheck={false} className={className ? `${INPUT} ${className}` : INPUT} {...props} />;\n});\nfunction Trail({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) {\n  return <span className={className ? `${TRAIL} ${className}` : TRAIL} {...props} />;\n}\n\nexport const Field = Object.assign(Root, { Root, Icon, Input, Trail });\n\nexport interface SearchFieldProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {\n  /** What the well says: \"Lens or action\". */\n  placeholder: string;\n  icon?: React.ReactNode;\n  /** The key that opens it (a keycap at the end): \"⌘K\". */\n  shortcut?: string;\n  tone?: 'light' | 'graphite';\n}\n\n/** A button in a well that opens search. */\nexport const SearchField = React.forwardRef<HTMLButtonElement, SearchFieldProps>(function SearchField({ placeholder, icon, shortcut = '⌘K', tone = 'graphite', className, type = 'button', ...props }, ref) {\n  return (\n    <button ref={ref} type={type} data-tone={tone} aria-keyshortcuts={shortcut === '⌘K' ? 'Meta+K' : undefined} className={className ? `${SEARCH[tone]} ${className}` : SEARCH[tone]} {...props}>\n      {icon && <span aria-hidden className={ICON}>{icon}</span>}\n      <span className=\"mu-search-field-text\">{placeholder}</span>\n      {shortcut && <Kbd surface={tone === 'graphite' ? 'strip' : 'default'} size=\"default\">{shortcut}</Kbd>}\n    </button>\n  );\n});\n"
    }
  ],
  "docs": "Agent guide: https://metalui.dev/r/field.md. SwiftUI: MetalField, MetalSearchField in the MetalUI Swift package."
}