{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "hooks-combobox",
  "type": "registry:ui",
  "title": "ComboBox",
  "dependencies": [
    "react-aria",
    "react-stately",
    "@react-types/shared",
    "react-aria-components",
    "lucide-react",
    "react"
  ],
  "registryDependencies": [
    "https://react-aria.adobe.com/registry/hooks-dropdownlistbox.json"
  ],
  "files": [
    {
      "path": "components/ui/ComboBox.tsx",
      "type": "registry:ui",
      "content": "'use client';\nimport {useComboBox} from 'react-aria/useComboBox';\nimport {useFilter} from 'react-aria/useFilter';\nimport {\n  useComboBoxState,\n  type ComboBoxProps as StatelyComboBoxProps\n} from 'react-stately/useComboBoxState';\nimport {CollectionBuilder} from 'react-aria/CollectionBuilder';\nimport type {Collection as ICollection, Node} from '@react-types/shared';\nimport {Provider} from 'react-aria-components/slots';\nimport {ComboBoxStateContext} from 'react-aria-components/ComboBox';\nimport {Collection} from 'react-aria-components/Collection';\nimport {Label, LabelContext} from 'react-aria-components/Label';\nimport {Button, ButtonContext} from 'react-aria-components/Button';\nimport {Input, InputContext} from 'react-aria-components/Input';\nimport {OverlayTriggerStateContext} from 'react-aria-components/Dialog';\nimport {Popover, PopoverContext} from 'react-aria-components/Popover';\nimport {ListBoxContext, ListStateContext} from 'react-aria-components/ListBox';\nimport {ChevronDown} from 'lucide-react';\nimport {useRef} from 'react';\nimport type {ReactNode} from 'react';\nimport {DropdownItem, DropdownListBox} from '@/registry/react-aria/ui/DropdownListBox';\nimport './ComboBox.css';\nimport './Form.css';\nimport './ListBox.css';\nimport './Popover.css';\n\nexport {DropdownItem as ComboBoxItem};\n\nexport type ComboBoxProps = StatelyComboBoxProps<object> & {label?: ReactNode};\n\nexport function ComboBox(props: ComboBoxProps) {\n  return (\n    <CollectionBuilder content={<Collection {...props} />}>\n      {collection => <ComboBoxInner {...props} collection={collection} />}\n    </CollectionBuilder>\n  );\n}\n\nfunction ComboBoxInner({\n  collection,\n  ...props\n}: StatelyComboBoxProps<object> & {\n  collection: ICollection<Node<object>>;\n  label?: ReactNode;\n}) {\n  let {contains} = useFilter({sensitivity: 'base'});\n  let state = useComboBoxState({\n    ...props,\n    defaultFilter: contains,\n    collection,\n    children: undefined\n  });\n  let fieldRef = useRef<HTMLDivElement>(null);\n  let inputRef = useRef<HTMLInputElement>(null);\n  let buttonRef = useRef<HTMLButtonElement>(null);\n  let listBoxRef = useRef<HTMLDivElement>(null);\n  let popoverRef = useRef<HTMLDivElement>(null);\n  let {labelProps, inputProps, buttonProps, listBoxProps} = useComboBox(\n    {...props, inputRef, buttonRef, listBoxRef, popoverRef},\n    state\n  );\n\n  return (\n    <Provider\n      values={[\n        [ComboBoxStateContext, state],\n        [LabelContext, labelProps],\n        [ButtonContext, {...buttonProps, ref: buttonRef, isPressed: state.isOpen}],\n        [InputContext, {...inputProps, ref: inputRef}],\n        [OverlayTriggerStateContext, state],\n        [\n          PopoverContext,\n          {\n            ref: popoverRef,\n            triggerRef: fieldRef,\n            scrollRef: listBoxRef,\n            trigger: 'ComboBox',\n            placement: 'bottom start',\n            isNonModal: true\n          }\n        ],\n        [ListBoxContext, {...listBoxProps, ref: listBoxRef}],\n        [ListStateContext, state]\n      ]}>\n      <div className=\"react-aria-ComboBox\">\n        <Label>{props.label}</Label>\n        <div className=\"combobox-field\" ref={fieldRef}>\n          <Input className=\"react-aria-Input inset\" />\n          <Button className=\"field-Button\">\n            <ChevronDown />\n          </Button>\n        </div>\n        <Popover className=\"react-aria-Popover combobox-popover\">\n          <DropdownListBox />\n        </Popover>\n      </div>\n    </Provider>\n  );\n}\n"
    },
    {
      "path": "components/ui/ComboBox.css",
      "type": "registry:component",
      "content": "@import './theme.css';\n@import './TextField.css';\n\n.react-aria-ComboBox {\n  display: flex;\n  flex-direction: column;\n  color: var(--text-color);\n  width: calc(var(--spacing) * 50);\n\n  .combobox-field {\n    display: flex;\n    align-items: center;\n    height: var(--spacing-8);\n    width: 100%;\n  }\n\n  .react-aria-Input {\n    width: 100%;\n    padding: 0 calc(var(--spacing-3) + var(--spacing-6)) 0 var(--spacing-3);\n  }\n\n  .react-aria-ComboBoxValue {\n    margin-top: var(--spacing-1);\n    font: var(--font-size-sm) system-ui;\n    color: var(--text-color);\n  }\n}\n\n.combobox-popover[data-trigger='ComboBox'] {\n  width: var(--trigger-width);\n  padding: 0;\n}\n"
    },
    {
      "path": "components/ui/theme.css",
      "type": "registry:component",
      "content": "/* colors */\n:root {\n  /* Change this variable to set the theme color for all components. */\n  /* You can use the below presets, or choose a custom color. */\n  --tint: var(--indigo);\n\n  /* theme colors */\n  /* lightness channel is only used as a multiplier for chroma (see below) */\n  --gray: oklch(0.5 0 0);\n  --red: oklch(0.6 0.181447 27.0726);\n  --orange: oklch(0.7 0.150492 54);\n  --yellow: oklch(0.8 0.128516 73.8032);\n  --turquoise: oklch(0.5 0.081146 205.114);\n  --cyan: oklch(0.4 0.142107 243.926);\n  --green: oklch(0.5 0.121276 155.372);\n  --blue: oklch(0.5 0.22049 266.315);\n  --indigo: oklch(1 0.25049 284.23);\n  --purple: oklch(0.7 0.223324 302);\n  --pink: oklch(0.6 0.177717 347.813);\n\n  /** tint color scale */\n  --tint-100: oklch(from var(--tint) var(--lightness-100) var(--chroma-100) h);\n  --tint-200: oklch(from var(--tint) var(--lightness-200) var(--chroma-200) h);\n  --tint-300: oklch(from var(--tint) var(--lightness-300) var(--chroma-300) h);\n  --tint-400: oklch(from var(--tint) var(--lightness-400) var(--chroma-400) h);\n  --tint-500: oklch(from var(--tint) var(--lightness-500) var(--chroma-500) h);\n  --tint-600: oklch(from var(--tint) var(--lightness-600) var(--chroma-600) h);\n  --tint-700: oklch(from var(--tint) var(--lightness-700) var(--chroma-700) h);\n  --tint-800: oklch(from var(--tint) var(--lightness-800) var(--chroma-800) h);\n  --tint-900: oklch(from var(--tint) var(--lightness-900) var(--chroma-900) h);\n  --tint-1000: oklch(from var(--tint) var(--lightness-1000) var(--chroma-1000) h);\n  --tint-1100: oklch(from var(--tint) var(--lightness-1100) var(--chroma-1100) h);\n  --tint-1200: oklch(from var(--tint) var(--lightness-1200) var(--chroma-1200) h);\n  --tint-1300: oklch(from var(--tint) var(--lightness-1300) var(--chroma-1300) h);\n  --tint-1400: oklch(from var(--tint) var(--lightness-1400) var(--chroma-1400) h);\n  --tint-1500: oklch(from var(--tint) var(--lightness-1500) var(--chroma-1500) h);\n  --tint-1600: oklch(from var(--tint) var(--lightness-1600) var(--chroma-1600) h);\n\n  /* gray scale */\n  --gray-100: oklch(from var(--gray) var(--lightness-100) c h);\n  --gray-200: oklch(from var(--gray) var(--lightness-200) c h);\n  --gray-300: oklch(from var(--gray) var(--lightness-300) c h);\n  --gray-400: oklch(from var(--gray) var(--lightness-400) c h);\n  --gray-500: oklch(from var(--gray) var(--lightness-500) c h);\n  --gray-600: oklch(from var(--gray) var(--lightness-600) c h);\n  --gray-700: oklch(from var(--gray) var(--lightness-700) c h);\n  --gray-800: oklch(from var(--gray) var(--lightness-800) c h);\n  --gray-900: oklch(from var(--gray) var(--lightness-900) c h);\n  --gray-1000: oklch(from var(--gray) var(--lightness-1000) c h);\n  --gray-1100: oklch(from var(--gray) var(--lightness-1100) c h);\n  --gray-1200: oklch(from var(--gray) var(--lightness-1200) c h);\n  --gray-1300: oklch(from var(--gray) var(--lightness-1300) c h);\n  --gray-1400: oklch(from var(--gray) var(--lightness-1400) c h);\n  --gray-1500: oklch(from var(--gray) var(--lightness-1500) c h);\n  --gray-1600: oklch(from var(--gray) var(--lightness-1600) c h);\n}\n\n/* light mode colors */\n:root {\n  --background-color: #f8f8f8;\n  --gray-50: #ffffff;\n\n  --lightness-100: 98.1187%;\n  --lightness-200: 95.2045%;\n  --lightness-300: 91.1434%;\n  --lightness-400: 85.1751%;\n  --lightness-500: 79.1773%;\n  --lightness-600: 72.3297%;\n  --lightness-700: 67.0121%;\n  --lightness-800: 62.3039%;\n  --lightness-900: 57.9699%;\n  --lightness-1000: 51.9076%;\n  --lightness-1100: 46.9058%;\n  --lightness-1200: 41.0821%;\n  --lightness-1300: 35.3616%;\n  --lightness-1400: 29.6725%;\n  --lightness-1500: 24.5366%;\n  --lightness-1600: 16.6959%;\n\n  /* lower chroma at low lightness levels */\n  --chroma-100: calc(l * c * 0.5);\n  --chroma-200: calc(l * c * 0.6);\n  --chroma-300: calc(l * c * 0.7);\n  --chroma-400: calc(l * c * 0.8);\n  --chroma-500: calc(l * c * 0.9);\n  --chroma-600: c;\n  --chroma-700: c;\n  --chroma-800: c;\n  --chroma-900: c;\n  --chroma-1000: c;\n  --chroma-1100: c;\n  --chroma-1200: c;\n  --chroma-1300: c;\n  --chroma-1400: c;\n  --chroma-1500: c;\n  --chroma-1600: c;\n\n  --highlight-hover: rgb(0 0 0 / 0.07);\n  --highlight-pressed: rgb(0 0 0 / 0.15);\n  --overlay-background: var(--gray-50);\n  --overlay-border: rgb(0 0 0 / 0.06);\n  --popover-shadow: 0 8px 20px rgba(0 0 0 / 0.12);\n}\n\n/* dark mode colors */\n@media (prefers-color-scheme: dark) {\n  :root {\n    --background-color: #1b1b1b;\n    --gray-50: oklch(22% 0 0);\n\n    --lightness-100: 29.6725%;\n    --lightness-200: 35.3616%;\n    --lightness-300: 41.0821%;\n    --lightness-400: 46.9058%;\n    --lightness-500: 51.9076%;\n    --lightness-600: 57.9699%;\n    --lightness-700: 56.1347%;\n    --lightness-800: 59.2866%;\n    --lightness-900: 62.3039%;\n    --lightness-1000: 67.0121%;\n    --lightness-1100: 72.3297%;\n    --lightness-1200: 79.1773%;\n    --lightness-1300: 85.1751%;\n    --lightness-1400: 91.1434%;\n    --lightness-1500: 95.2045%;\n    --lightness-1600: 100%;\n\n    --highlight-hover: rgb(255 255 255 / 0.1);\n    --highlight-pressed: rgb(255 255 255 / 0.2);\n    --overlay-background: var(--gray-100);\n    --overlay-border: rgb(255 255 255 / 0.2);\n    --popover-shadow: 0 8px 20px rgba(0 0 0 / 0.5);\n  }\n}\n\n/* Semantic colors */\n:root {\n  --focus-ring-color: var(--tint-1000);\n  --text-color: var(--gray-1200);\n  --text-color-hover: var(--gray-1300);\n  --text-color-disabled: var(--gray-600);\n  --text-color-placeholder: var(--gray-1000);\n  --link-color: var(--tint-1200);\n  --link-color-secondary: var(--gray-1200);\n  --link-color-pressed: var(--tint-1300);\n  --border-color: var(--gray-400);\n  --border-color-hover: var(--gray-500);\n  --border-color-disabled: var(--gray-300);\n  --field-text-color: var(--gray-1400);\n  --button-background: var(--tint-100);\n  --button-background-pressed: var(--tint-200);\n  /* these colors are the same between light and dark themes\n   * to ensure contrast with the foreground color */\n  --highlight-background: oklch(from var(--tint) 55% c h);\n  --highlight-background-pressed: oklch(from var(--tint) 50% c h);\n  --highlight-background-invalid: oklch(from var(--red) var(--lightness-900) c h);\n  --highlight-foreground: white;\n  --highlight-overlay: oklch(from var(--tint-1000) l c h / 15%);\n  --invalid-color: oklch(from var(--red) var(--lightness-1000) c h);\n  --field-background: var(--gray-50);\n}\n\n/* Windows high contrast mode overrides */\n@media (forced-colors: active) {\n  :root {\n    --background-color: Canvas;\n    --focus-ring-color: Highlight;\n    --text-color: ButtonText;\n    --text-color-hover: ButtonText;\n    --text-color-disabled: GrayText;\n    --text-color-placeholder: ButtonText;\n    --link-color: LinkText;\n    --link-color-secondary: LinkText;\n    --link-color-pressed: LinkText;\n    --border-color: ButtonBorder;\n    --border-color-hover: ButtonBorder;\n    --border-color-pressed: ButtonBorder;\n    --border-color-disabled: GrayText;\n    --field-background: Field;\n    --field-text-color: FieldText;\n    --overlay-background: Canvas;\n    --overlay-border: ButtonBorder;\n    --button-background: ButtonFace;\n    --button-background-pressed: ButtonFace;\n    --highlight-background: Highlight;\n    --highlight-background-pressed: Highlight;\n    --highlight-background-invalid: LinkText;\n    --highlight-foreground: HighlightText;\n    --invalid-color: LinkText;\n  }\n}\n\n/* typography and spacing scale */\n:root {\n  --font-size: 0.875rem; /* 14px */\n  --font-size-sm: 0.75rem; /* 12px */\n  --font-size-lg: 1rem; /* 16px */\n  --radius: 8px;\n  --radius-sm: 6px;\n  --radius-lg: 10px;\n  --radius-xl: 16px;\n  --spacing: 0.25rem; /* 4px */\n  --spacing-1: var(--spacing);\n  --spacing-2: calc(2 * var(--spacing));\n  --spacing-3: calc(3 * var(--spacing));\n  --spacing-4: calc(4 * var(--spacing));\n  --spacing-5: calc(5 * var(--spacing));\n  --spacing-6: calc(6 * var(--spacing));\n  --spacing-7: calc(7 * var(--spacing));\n  --spacing-8: calc(8 * var(--spacing));\n  --spacing-9: calc(9 * var(--spacing));\n  --spacing-10: calc(10 * var(--spacing));\n}\n\n/* Scale up hit targets on high resolution mobile devices. */\n@media (min-resolution: 200dpi) {\n  :root {\n    --spacing: calc(0.25rem * 1.25);\n    --font-size: 1.0625rem; /* 17px */\n    --font-size-sm: 0.9375rem; /* 15px */\n    --font-size-lg: 1.25rem; /* 20px */\n  }\n}\n"
    },
    {
      "path": "components/ui/TextField.css",
      "type": "registry:component",
      "content": "@import './theme.css';\n@import './utilities.css';\n\n.react-aria-TextField {\n  display: flex;\n  flex-direction: column;\n}\n\n.react-aria-Input,\n.react-aria-TextArea {\n  width: 100%;\n  min-height: var(--spacing-8);\n  padding: 0 var(--spacing-3);\n  box-sizing: border-box;\n  margin: 0;\n  border: none;\n  border-radius: var(--radius);\n  font: var(--font-size) system-ui;\n  color: var(--field-text-color);\n  outline: none;\n  -webkit-tap-highlight-color: transparent;\n\n  &::placeholder {\n    color: var(--text-color-placeholder);\n  }\n\n  &[data-focused] {\n    outline: 2px solid var(--focus-ring-color);\n    outline-offset: -1px;\n  }\n\n  &[data-disabled] {\n    color: var(--text-color-disabled);\n    &::placeholder {\n      color: var(--text-color-disabled);\n    }\n  }\n}\n\n.react-aria-TextArea {\n  min-height: 64px;\n  padding: var(--spacing-2) var(--spacing-3);\n}\n"
    },
    {
      "path": "components/ui/utilities.css",
      "type": "registry:component",
      "content": "@layer utilities {\n  /* utility that creates a button-like element, which can be optionally selected */\n  .button-base {\n    --button-color: var(--tint);\n    --button-background: oklch(from var(--button-color) var(--lightness-100) var(--chroma-100) h);\n    --button-gradient: oklch(from var(--button-color) var(--lightness-200) var(--chroma-200) h);\n    --button-border: oklch(from var(--button-color) var(--lightness-300) var(--chroma-300) h);\n    --button-highlight: rgb(255 255 255 / 0.8);\n    --button-shadow: oklch(from var(--button-color) var(--lightness-400) var(--chroma-400) h);\n    --button-border-size: 1px;\n    --button-text: oklch(from var(--button-color) var(--lightness-1400) var(--chroma-1400) h);\n    --button-gradient-size: 8px;\n\n    background: var(--button-background);\n    color: var(--button-text);\n    box-shadow:\n      inset 0 -1px 0 var(--button-shadow),\n      /* bottom shadow */ inset 0 0 0 var(--button-border-size) var(--button-border),\n      /* border */ inset 0px calc(var(--button-border-size) + 1px) 0px var(--button-highlight),\n      /* top specular highlight */ inset 0px calc(-1 * var(--button-gradient-size))\n        var(--button-gradient-size) -2px var(--button-gradient); /* inner gradient */\n    outline: none;\n    transition-property: background, color, scale, box-shadow;\n    transition-duration: 200ms;\n    will-change: scale;\n    forced-color-adjust: none;\n    -webkit-tap-highlight-color: transparent;\n\n    @media (prefers-color-scheme: dark) {\n      --button-shadow: oklch(from var(--button-color) var(--lightness-200) var(--chroma-200) h);\n      --button-highlight: rgb(255 255 255 / 0.15);\n      box-shadow:\n        inset 0 var(--button-border-size) 0 var(--button-highlight),\n        /* top specular highlight */ inset 0 calc(-1 * var(--button-border-size)) 0\n          var(--button-shadow),\n        /* bottom shadow */ inset 0 0 0 var(--button-border-size) var(--button-border),\n        /* border */ inset 0 var(--button-gradient-size) var(--button-gradient-size) -2px\n          var(--button-gradient); /* inner gradient */\n    }\n\n    &:where([data-pressed]) {\n      --button-background: oklch(from var(--button-color) var(--lightness-200) var(--chroma-200) h);\n    }\n\n    &:where([data-focus-visible]) {\n      outline: 2px solid var(--focus-ring-color);\n      outline-offset: 2px;\n    }\n\n    &:where([data-variant='secondary']) {\n      --button-color: var(--gray);\n    }\n\n    &:where([data-variant='quiet']) {\n      --button-background: none;\n      --button-text: var(--text-color);\n      box-shadow: 0 0 0 1px transparent;\n\n      &:where([data-hovered], [data-pressed]) {\n        --button-background: var(--tint-200);\n        --button-text: var(--tint-1400);\n        box-shadow: 0 0 0 1px var(--tint-200);\n      }\n    }\n\n    &:where([data-selected]) {\n      --button-background: oklch(from var(--button-color) 55% c h);\n      --button-border: oklch(from var(--button-color) 50% c h);\n      --button-gradient: var(--button-border);\n      --button-highlight: rgb(255 255 255 / 0.2);\n      --button-shadow: oklch(from var(--button-color) 30% c h);\n      --button-text: var(--highlight-foreground);\n\n      box-shadow:\n        inset 0 -1px 0 var(--button-shadow),\n        /* bottom shadow */ inset 0 0 0 1px var(--button-border),\n        /* border */ inset 0 2px 0 var(--button-highlight),\n        /* top specular highlight */ inset 0 calc(-1 * var(--button-gradient-size))\n          var(--button-gradient-size) var(--button-gradient); /* inner gradient */\n\n      @media (prefers-color-scheme: dark) {\n        --button-highlight: rgb(255 255 255 / 0.4);\n        --button-gradient: rgb(255 255 255 / 0.2);\n        --button-shadow: var(--button-border);\n        box-shadow:\n          inset 0 1px 0 var(--button-highlight),\n          /* top specular highlight */ inset 0 var(--button-gradient-size)\n            var(--button-gradient-size) var(--button-gradient),\n          /* inner gradient */ inset 0 0 0 1px var(--button-border); /* border */\n      }\n\n      &:where([data-pressed]) {\n        --button-background: oklch(from var(--button-color) 50% c h);\n      }\n    }\n\n    &:where([data-disabled]) {\n      box-shadow: none;\n      --button-background: var(--border-color-disabled);\n      --button-text: var(--text-color-disabled);\n\n      &:where([data-variant='quiet']) {\n        --button-background: none;\n      }\n    }\n\n    @media (forced-colors: active) {\n      --button-background: ButtonFace;\n      --button-text: ButtonText;\n      --button-border: ButtonBorder;\n      box-shadow: inset 0 0 0 var(--button-border-size) var(--button-border);\n\n      &:where([data-variant='quiet']) {\n        --button-border: transparent;\n        &:where([data-hovered], [data-pressed]) {\n          --button-border: ButtonBorder;\n        }\n      }\n\n      &:where([data-selected]) {\n        --button-background: Highlight;\n        --button-text: HighlightText;\n        --button-border: Highlight;\n      }\n\n      &:where([data-disabled]) {\n        --button-background: ButtonFace;\n        --button-text: GrayText;\n        --button-border: GrayText;\n\n        &:where([data-variant='quiet']) {\n          --button-border: transparent;\n        }\n      }\n    }\n  }\n\n  /* utility that creates a small indicator, such as a checkbox, radio, switch, or slider thumb */\n  .indicator {\n    --indicator-color: var(--gray);\n    --indicator-background: oklch(\n      from var(--indicator-color) var(--lightness-100) var(--chroma-100) h\n    );\n    --indicator-border: oklch(from var(--indicator-color) var(--lightness-800) var(--chroma-800) h);\n    --indicator-drop-shadow: 0 0;\n\n    background: var(--indicator-background);\n    box-shadow:\n      inset 0 0 0 1px var(--indicator-border),\n      /* border */ inset 0 2px 0 white,\n      /* top specular highlight */ inset 0 -4px 2px\n        oklch(from var(--indicator-color) 30% c h / 0.08),\n      /* inner gradient */ var(--indicator-drop-shadow); /* optional drop shadow */\n    will-change: scale;\n\n    @media (prefers-color-scheme: dark) {\n      box-shadow:\n        inset 0 1px 0 rgb(255 255 255 / 0.4),\n        /* top specular highlight */ inset 0 4px 2px rgb(255 255 255 / 0.1),\n        /* inner shadow */ inset 0 0 0 1px var(--indicator-border),\n        /* border */ var(--indicator-drop-shadow); /* optional drop shadow */\n    }\n\n    @media (forced-colors: active) {\n      --indicator-background: ButtonFace;\n      --indicator-border: ButtonBorder;\n      box-shadow: inset 0 0 0 1px var(--indicator-border);\n    }\n\n    &[data-pressed],\n    [data-pressed] & {\n      scale: 0.9;\n    }\n\n    [data-selected] > &,\n    [data-indeterminate] > & {\n      --indicator-color: var(--highlight-background);\n      --indicator-background: var(--indicator-color);\n      --indicator-highlight: rgb(255 255 255 / 0.3);\n      --indicator-shadow: oklch(from var(--indicator-color) 45% c h);\n      --indicator-border: var(--indicator-background);\n      box-shadow:\n        inset 0 -1px 0 var(--indicator-shadow),\n        /* bottom shadow */ inset 0 0 0 1px var(--indicator-border),\n        /* border */ inset 0 2px 0 var(--indicator-highlight),\n        /* top specular highlight */ var(--indicator-drop-shadow); /* optional drop shadow */\n\n      @media (prefers-color-scheme: dark) {\n        --indicator-highlight: rgb(255 255 255 / 0.5);\n        --indicator-gradient: rgb(255 255 255 / 0.12);\n        box-shadow:\n          inset 0 1px 0 var(--indicator-highlight),\n          /* top specular highlight */ inset 0 4px 2px var(--indicator-gradient),\n          /* inner gradient */ inset 0 0 0 1px var(--indicator-border),\n          /* border */ var(--indicator-drop-shadow); /* optional drop shadow */\n      }\n\n      @media (forced-colors: active) {\n        box-shadow: none;\n      }\n    }\n\n    &[data-invalid],\n    [data-invalid] > & {\n      --indicator-color: var(--invalid-color);\n\n      @media (forced-colors: active) {\n        --indicator-border: var(--invalid-color);\n      }\n    }\n\n    &[data-focus-visible],\n    [data-focus-visible] > & {\n      outline: 2px solid var(--focus-ring-color);\n      outline-offset: 2px;\n    }\n\n    &[data-disabled],\n    [data-disabled] > & {\n      background: var(--field-background);\n      box-shadow: inset 0 0 0 1px var(--border-color-disabled);\n    }\n  }\n\n  /* utility that creates an inset effect, used for form fields, slider/progress tracks, etc. */\n  .inset {\n    --inset-background: var(--field-background);\n    --inset-border: var(--border-color);\n    --inset-border-size: 1px;\n    --inset-shadow-offset: 2px;\n    --inset-shadow-size: 4px;\n\n    background: var(--inset-background);\n    box-shadow:\n      inset 0 0 0 var(--inset-border-size) var(--inset-border),\n      /* border */ inset 0 var(--inset-shadow-offset) var(--inset-shadow-size) rgb(0 0 0 / 0.15),\n      /* inner shadow */ 0 1px 0 var(--gray-50); /* bottom specular highlight */\n    transition: box-shadow 200ms;\n    forced-color-adjust: none;\n\n    @media (prefers-color-scheme: dark) {\n      --inset-border: var(--gray-200);\n      --border-color-hover: var(--gray-300);\n      --inset-highlight: var(--gray-400);\n      --inset-shadow-size: 6px;\n      box-shadow:\n        inset 0 calc(-1 * var(--inset-border-size)) 0 var(--inset-highlight),\n        /* bottom specular highlight */ inset 0 0 0 var(--inset-border-size) var(--inset-border),\n        /* border */ inset 0 1px var(--inset-shadow-size) rgb(0 0 0); /* inner shadow */\n    }\n\n    &:where([data-hovered], [data-pressed]) {\n      --inset-border: var(--border-color-hover);\n    }\n\n    @media (forced-colors: active) {\n      --inset-border: ButtonBorder;\n      box-shadow: inset 0 0 0 var(--inset-border-size) var(--inset-border);\n    }\n\n    &:where([data-invalid]) {\n      --inset-border: var(--invalid-color);\n      --inset-highlight: var(--inset-border);\n    }\n\n    &:where([data-disabled]) {\n      box-shadow: inset 0 0 0 1px var(--border-color-disabled);\n    }\n\n    &.track {\n      --inset-shadow-offset: 1px;\n      --inset-shadow-size: 3px;\n\n      @media (prefers-color-scheme: light) {\n        --inset-background: var(--gray-300);\n        --inset-border: var(--gray-500);\n        --inset-border-size: 0.5px;\n      }\n\n      @media (forced-colors: active) {\n        --inset-background: Field;\n        --inset-border: ButtonBorder;\n        --inset-border-size: 1px;\n      }\n    }\n  }\n}\n"
    },
    {
      "path": "components/ui/Form.css",
      "type": "registry:component",
      "content": "@import './theme.css';\n\n.react-aria-Form {\n  display: flex;\n  flex-direction: column;\n  gap: var(--spacing-6);\n\n  > .react-aria-Button {\n    align-self: start;\n  }\n}\n\n.react-aria-Form [role='alert'] {\n  border: 2px solid var(--invalid-color);\n  background: var(--overlay-background);\n  border-radius: 6px;\n  padding: 12px;\n  max-width: 250px;\n  outline: none;\n\n  &:focus {\n    outline: 2px solid var(--focus-ring-color);\n    outline-offset: 2px;\n  }\n\n  h3 {\n    margin-top: 0;\n  }\n\n  p {\n    margin-bottom: 0;\n  }\n}\n\n.react-aria-Label {\n  display: block;\n  font: var(--font-size) system-ui;\n  color: var(--text-color);\n  margin-bottom: var(--spacing-2);\n  font-weight: 500;\n  cursor: default;\n}\n\n.react-aria-FieldError {\n  display: block;\n  font: var(--font-size-sm) system-ui;\n  color: var(--invalid-color);\n  margin-top: var(--spacing-1);\n  contain: inline-size;\n}\n\n.field-description {\n  display: block;\n  font: var(--font-size-sm) system-ui;\n  margin-top: var(--spacing-1);\n  contain: inline-size;\n\n  [data-invalid] > & {\n    display: none;\n  }\n}\n\n.field-Button {\n  background: var(--tint-200);\n  color: var(--tint-1400);\n  forced-color-adjust: none;\n  border-radius: var(--radius-sm);\n  border: none;\n  margin-left: calc(-1 * var(--spacing-8) + 4px);\n  height: calc(100% - 8px);\n  aspect-ratio: 1/1;\n  padding: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition-property: scale, background;\n  transition-duration: 200ms;\n  -webkit-tap-highlight-color: transparent;\n\n  svg {\n    width: var(--spacing-4);\n    height: var(--spacing-4);\n  }\n\n  &:where([data-hovered], [data-pressed]) {\n    background: var(--tint-300);\n    color: var(--tint-1200);\n  }\n\n  @media (forced-colors: active) {\n    background: Highlight;\n    color: HighlightText;\n  }\n\n  &[data-pressed] {\n    scale: 0.9;\n  }\n\n  &[data-focus-visible] {\n    outline: 2px solid var(--focus-ring-color);\n    outline-offset: 2px;\n  }\n\n  &[data-disabled] {\n    background: none;\n    color: var(--text-color-disabled);\n  }\n}\n"
    },
    {
      "path": "components/ui/ListBox.css",
      "type": "registry:component",
      "content": "@import './theme.css';\n\n.react-aria-ListBox {\n  max-height: inherit;\n  overflow: auto;\n  border: 0.5px solid var(--border-color);\n  border-radius: calc(var(--radius) + var(--spacing-1));\n  background: var(--overlay-background);\n  forced-color-adjust: none;\n  outline: none;\n  box-sizing: border-box;\n  font: var(--font-size) system-ui;\n  color: var(--text-color);\n\n  &:has(.react-aria-ListBoxSection) {\n    scroll-padding: 24px;\n  }\n\n  &[data-focus-visible] {\n    outline: 2px solid var(--focus-ring-color);\n    outline-offset: -1px;\n  }\n\n  &[data-empty] {\n    align-items: center;\n    justify-content: center;\n    font-style: italic;\n  }\n\n  &[data-drop-target] {\n    outline: 2px solid var(--highlight-background);\n    outline-offset: -1px;\n    background: var(--highlight-overlay);\n  }\n\n  .react-aria-DropIndicator[data-drop-target] {\n    z-index: 3;\n    outline: 1px solid var(--highlight-background);\n  }\n}\n\n.react-aria-ListBoxSection {\n  .react-aria-Header {\n    position: sticky;\n    top: -0.5px;\n    z-index: 2;\n    font-size: var(--font-size-sm);\n    font-weight: 600;\n    font-variation-settings: initial;\n    padding: var(--spacing-1) var(--spacing-4);\n    background: var(--gray-100);\n    border-block: 0.5px solid var(--gray-400);\n    cursor: default;\n    user-select: none;\n    box-shadow:\n      inset 0px 1px 0px white,\n      inset 0px -4px 8px var(--gray-200);\n\n    @media (prefers-color-scheme: dark) {\n      box-shadow: inset 0px 4px 8px var(--gray-200);\n    }\n  }\n\n  &:first-child .react-aria-Header {\n    margin-top: -0.5px;\n  }\n}\n\n.react-aria-ListBoxItem {\n  padding: var(--spacing-1) var(--spacing-3);\n  border-radius: var(--radius);\n  outline: none;\n  cursor: default;\n  color: var(--text-color);\n  font: var(--font-size) system-ui;\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  min-height: var(--spacing-8);\n  box-sizing: border-box;\n  position: relative;\n  transition-property: background, color, border-radius;\n  transition-duration: 200ms;\n  -webkit-tap-highlight-color: transparent;\n\n  --border-color: var(--gray-300);\n  &:not(:last-child)::after {\n    content: '';\n    display: block;\n    position: absolute;\n  }\n\n  &[data-pressed] {\n    background: var(--highlight-hover);\n    border-radius: var(--radius);\n  }\n\n  &[data-focus-visible] {\n    outline: 2px solid var(--focus-ring-color);\n    outline-offset: -2px;\n    z-index: 2;\n  }\n\n  &[data-selected] {\n    background: var(--highlight-background);\n    color: var(--highlight-foreground);\n    --border-color: transparent;\n\n    &[data-focus-visible] {\n      outline-color: var(--highlight-foreground);\n      outline-offset: -4px;\n    }\n\n    &[data-pressed] {\n      background: var(--highlight-background-pressed);\n    }\n\n    &:has(+ [data-selected]),\n    &:has(+ .react-aria-DropIndicator + [data-selected]) {\n      --border-color: rgb(255 255 255 / 0.3);\n    }\n  }\n\n  [slot='label'] {\n    font-weight: 500;\n  }\n\n  [slot='description'] {\n    font-size: var(--font-size-sm);\n  }\n\n  &[href] {\n    text-decoration: none;\n    cursor: pointer;\n    -webkit-touch-callout: none;\n  }\n\n  &[data-disabled] {\n    color: var(--text-color-disabled);\n  }\n\n  &[data-dragging] {\n    opacity: 0.6;\n  }\n\n  &[data-drop-target] {\n    outline: 2px solid var(--highlight-background);\n    background: var(--highlight-overlay);\n  }\n}\n\n.react-aria-ListBox {\n  &[data-layout='stack'] {\n    display: flex;\n\n    &[data-orientation='vertical'] {\n      flex-direction: column;\n      width: 250px;\n      max-height: 300px;\n      min-height: 100px;\n\n      .react-aria-ListBoxItem {\n        margin-inline: var(--spacing-1);\n\n        &:where(:nth-child(1 of .react-aria-ListBoxItem)) {\n          margin-top: var(--spacing);\n        }\n\n        &:where(:nth-last-child(1 of .react-aria-ListBoxItem)) {\n          margin-bottom: var(--spacing);\n        }\n\n        [role='presentation'] > & {\n          margin: 0; /* virtualizer */\n        }\n\n        &:not(:last-child)::after {\n          bottom: 0;\n          width: calc(100% - var(--spacing-6));\n          border-bottom: 0.5px solid var(--border-color);\n        }\n\n        &[data-selected] {\n          &:has(+ [data-selected]),\n          &:has(+ .react-aria-DropIndicator + [data-selected]) {\n            border-end-start-radius: 0;\n            border-end-end-radius: 0;\n          }\n\n          + [data-selected],\n          + .react-aria-DropIndicator + [data-selected] {\n            border-start-start-radius: 0;\n            border-start-end-radius: 0;\n          }\n        }\n      }\n    }\n\n    &[data-orientation='horizontal'] {\n      flex-direction: row;\n      width: 100%;\n\n      .react-aria-ListBoxItem {\n        min-width: max-content;\n        margin-block: var(--spacing-1);\n\n        &:nth-child(1 of .react-aria-ListBoxItem) {\n          margin-inline-start: var(--spacing);\n        }\n\n        &:nth-last-child(1 of .react-aria-ListBoxItem) {\n          margin-inline-end: var(--spacing);\n        }\n\n        &:not(:last-child)::after {\n          inset-inline-end: 0;\n          height: calc(100% - var(--spacing-2));\n          border-inline-end: 0.5px solid var(--border-color);\n        }\n\n        &[data-selected] {\n          &:has(+ [data-selected]),\n          &:has(+ .react-aria-DropIndicator + [data-selected]) {\n            border-start-end-radius: 0;\n            border-end-end-radius: 0;\n          }\n\n          + [data-selected],\n          + .react-aria-DropIndicator + [data-selected] {\n            border-start-start-radius: 0;\n            border-end-start-radius: 0;\n          }\n        }\n      }\n    }\n  }\n\n  &[data-layout='grid'] {\n    display: grid;\n    gap: var(--spacing-1);\n    width: fit-content;\n    max-width: 100%;\n    padding: var(--spacing-1);\n\n    &[data-orientation='vertical'] {\n      grid-template-columns: 1fr 1fr;\n    }\n\n    &[data-orientation='horizontal'] {\n      grid-auto-flow: column;\n      grid-template-rows: auto auto;\n      grid-template-columns: none;\n      grid-auto-columns: 160px;\n    }\n  }\n}\n\n.react-aria-ListBoxLoadingIndicator {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 24px;\n  width: 100%;\n}\n\n.dropdown-listbox {\n  display: block;\n  max-height: inherit;\n  overflow: auto;\n  border-radius: inherit;\n  forced-color-adjust: none;\n  outline: none;\n  box-sizing: border-box;\n  font: var(--font-size) system-ui;\n  color: var(--text-color);\n\n  &[data-empty] {\n    min-height: var(--spacing-8);\n    padding: var(--spacing-2);\n  }\n\n  .react-aria-Header {\n    padding-left: var(--spacing-7);\n  }\n}\n\n.dropdown-item {\n  padding: calc((var(--spacing-8) - 1lh) / 2) var(--spacing-3) calc((var(--spacing-8) - 1lh) / 2)\n    var(--spacing-6);\n  box-sizing: border-box;\n  border-radius: var(--radius);\n  outline: none;\n  cursor: default;\n  color: var(--text-color);\n  font: var(--font-size) system-ui;\n  font-weight: 500;\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  min-height: var(--spacing-8);\n  margin-inline: var(--spacing-1);\n  -webkit-tap-highlight-color: transparent;\n\n  &:first-of-type {\n    margin-top: var(--spacing);\n  }\n\n  &:last-of-type {\n    margin-bottom: var(--spacing);\n  }\n\n  &[data-selected] {\n    font-weight: 500;\n    color: var(--text-color);\n\n    .lucide-check {\n      position: absolute;\n      top: 50%;\n      left: var(--spacing-1);\n      translate: 0 -50%;\n      stroke-width: 3px;\n      width: var(--spacing-4);\n      height: var(--spacing-4);\n    }\n  }\n\n  &[data-pressed] {\n    background: var(--highlight-hover);\n  }\n\n  &[data-focused] {\n    background: var(--highlight-background);\n    color: var(--highlight-foreground);\n  }\n\n  [slot='label'] {\n    font-weight: 500;\n  }\n\n  [slot='description'] {\n    font-size: var(--font-size-sm);\n  }\n\n  &[data-disabled] {\n    color: var(--text-color-disabled);\n  }\n\n  &[href] {\n    text-decoration: none;\n    cursor: pointer;\n  }\n}\n"
    },
    {
      "path": "components/ui/Popover.css",
      "type": "registry:component",
      "content": "@import './theme.css';\n\n.react-aria-Popover {\n  --background-color: var(--overlay-background);\n\n  outline: 1px solid var(--overlay-border);\n  box-sizing: border-box;\n  filter: drop-shadow(var(--popover-shadow));\n  border-radius: var(--radius-lg);\n  background: var(--background-color);\n  color: var(--text-color);\n  transition:\n    transform 200ms,\n    opacity 200ms;\n  font: var(--font-size) system-ui;\n  padding: 8px;\n  overflow: auto;\n\n  &[data-trigger='MenuTrigger'],\n  &[data-trigger='SubmenuTrigger'] {\n    padding: 0;\n  }\n\n  .react-aria-OverlayArrow svg {\n    display: block;\n    fill: var(--background-color);\n    stroke: var(--overlay-border);\n    paint-order: stroke;\n    stroke-width: 2px;\n  }\n\n  &[data-entering],\n  &[data-exiting] {\n    transform: var(--origin);\n    opacity: 0;\n  }\n\n  &[data-placement='top'] {\n    --origin: translateY(8px);\n\n    &:has(.react-aria-OverlayArrow) {\n      margin-bottom: 6px;\n    }\n  }\n\n  &[data-placement='bottom'] {\n    --origin: translateY(-8px);\n\n    &:has(.react-aria-OverlayArrow) {\n      margin-top: 6px;\n    }\n\n    .react-aria-OverlayArrow svg {\n      transform: rotate(180deg);\n    }\n  }\n\n  &[data-placement='right'] {\n    --origin: translateX(-8px);\n\n    &:has(.react-aria-OverlayArrow) {\n      margin-left: 6px;\n    }\n\n    .react-aria-OverlayArrow svg {\n      transform: rotate(90deg);\n    }\n  }\n\n  &[data-placement='left'] {\n    --origin: translateX(8px);\n\n    &:has(.react-aria-OverlayArrow) {\n      margin-right: 6px;\n    }\n\n    .react-aria-OverlayArrow svg {\n      transform: rotate(-90deg);\n    }\n  }\n}\n"
    }
  ]
}