{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "autocomplete",
  "type": "registry:ui",
  "title": "Autocomplete",
  "description": "Free-text input with search-as-you-type suggestions.",
  "dependencies": [
    "@base-ui/react@^1.7.0"
  ],
  "registryDependencies": [
    "https://control-ui.dev/r/core.json",
    "https://control-ui.dev/r/scroll-area.json",
    "https://control-ui.dev/r/surface-variants.json"
  ],
  "files": [
    {
      "path": "src/registry/knob-contracts/field-knobs.ts",
      "target": "@components/control-ui/knob-contracts/field-knobs.ts",
      "type": "registry:component",
      "content": "// Generated from src/registry/sources/control-ui/recipes/field.css by scripts/gen-knob-contracts.ts — run `bun run sync:knobs`.\nexport const fieldKnobs = [\n  \"--cui-field-radius\",\n  \"--cui-field-background\",\n  \"--cui-field-foreground\",\n  \"--cui-field-border-color\",\n  \"--cui-field-border-width\",\n  \"--cui-field-shadow\",\n  \"--cui-field-backdrop-filter\",\n  \"--cui-field-focus-border-color\",\n] as const;\nexport type FieldKnobStyle = Partial<Record<(typeof fieldKnobs)[number], string>>;\n"
    },
    {
      "path": "src/registry/knob-contracts/popup-knobs.ts",
      "target": "@components/control-ui/knob-contracts/popup-knobs.ts",
      "type": "registry:component",
      "content": "// Generated from src/registry/sources/control-ui/recipes/popup.css by scripts/gen-knob-contracts.ts — run `bun run sync:knobs`.\nexport const popupKnobs = [\n  \"--cui-popup-radius\",\n  \"--cui-popup-background\",\n  \"--cui-popup-foreground\",\n  \"--cui-popup-border-color\",\n  \"--cui-popup-border-width\",\n  \"--cui-popup-shadow\",\n  \"--cui-popup-backdrop-filter\",\n  \"--cui-popup-backdrop-background\",\n  \"--cui-popup-item-radius\",\n  \"--cui-popup-item-foreground\",\n  \"--cui-popup-item-highlight-background\",\n  \"--cui-popup-item-highlight-foreground\",\n  \"--cui-popup-item-highlight-muted-foreground\",\n  \"--cui-popup-item-disabled-opacity\",\n  \"--cui-popup-separator-color\",\n  \"--cui-popup-shortcut-foreground\",\n] as const;\nexport type PopupKnobStyle = Partial<Record<(typeof popupKnobs)[number], string>>;\n"
    },
    {
      "path": "src/registry/sources/control-ui/recipes/field-parts.css",
      "target": "@components/control-ui/styles/recipes/field-parts.css",
      "type": "registry:file",
      "content": "@layer components {\n  :where([data-control-family=\"field\"][data-field-kind=\"input-group\"][data-slot=\"addon\"]),\n  :where([data-control-family=\"field\"][data-field-kind=\"combobox\"][data-slot=\"trigger\"]),\n  :where([data-control-family=\"field\"][data-field-kind=\"autocomplete\"][data-slot=\"clear\"]),\n  :where([data-control-family=\"field\"][data-field-kind=\"number-field\"][data-slot=\"decrement\"]),\n  :where([data-control-family=\"field\"][data-field-kind=\"number-field\"][data-slot=\"increment\"]),\n  :where([data-control-family=\"field\"][data-field-kind=\"native-select\"][data-slot=\"icon\"]) {\n    color: var(--muted-foreground);\n  }\n\n  :where([data-control-family=\"field\"][data-field-kind=\"input-group\"][data-slot=\"input\"]),\n  :where([data-control-family=\"field\"][data-field-kind=\"phone-input\"][data-slot=\"input\"]),\n  :where([data-control-family=\"field\"][data-field-kind=\"number-field\"][data-slot=\"input\"]) {\n    outline: none;\n    background: transparent;\n    color: var(--foreground);\n  }\n\n  :where([data-control-family=\"field\"][data-field-kind=\"input-group\"][data-slot=\"input\"])::placeholder,\n  :where([data-control-family=\"field\"][data-field-kind=\"phone-input\"][data-slot=\"input\"])::placeholder,\n  :where([data-control-family=\"field\"][data-field-kind=\"number-field\"][data-slot=\"input\"])::placeholder {\n    color: var(--muted-foreground);\n  }\n\n  :where([data-control-family=\"field\"][data-field-kind=\"combobox\"][data-slot=\"trigger\"]),\n  :where([data-control-family=\"field\"][data-field-kind=\"autocomplete\"][data-slot=\"clear\"]) {\n    border-radius: var(--radius-control);\n    outline: none;\n    transition-property: color, box-shadow;\n    transition-duration: var(--duration-fast);\n    transition-timing-function: var(--ease-standard);\n  }\n\n  @media (hover: hover) {\n    :where([data-control-family=\"field\"][data-field-kind=\"combobox\"][data-slot=\"trigger\"]:hover),\n    :where([data-control-family=\"field\"][data-field-kind=\"autocomplete\"][data-slot=\"clear\"]:hover),\n    :where([data-control-family=\"field\"][data-field-kind=\"number-field\"][data-slot=\"decrement\"]:hover),\n    :where([data-control-family=\"field\"][data-field-kind=\"number-field\"][data-slot=\"increment\"]:hover) {\n      color: var(--foreground);\n    }\n  }\n\n  :where([data-control-family=\"field\"][data-field-kind=\"combobox\"][data-slot=\"trigger\"]:disabled),\n  :where([data-control-family=\"field\"][data-field-kind=\"autocomplete\"][data-slot=\"clear\"]:disabled) {\n    cursor: not-allowed;\n    opacity: 0.45;\n  }\n\n  :where([data-control-family=\"field\"][data-field-kind=\"combobox\"][data-slot=\"icon\"]) {\n    transition-property: rotate;\n    transition-duration: var(--duration-base);\n    transition-timing-function: var(--ease-emphasized);\n  }\n\n  :where(\n    [data-control-family=\"field\"][data-field-kind=\"combobox\"][data-popup-open]\n      :where([data-control-family=\"field\"][data-field-kind=\"combobox\"][data-slot=\"icon\"])\n  ) {\n    rotate: 180deg;\n  }\n\n  :where([data-control-family=\"field\"][data-field-kind=\"number-field\"][data-slot=\"decrement\"]) {\n    border-inline-end: 1px solid var(--border);\n  }\n\n  :where([data-control-family=\"field\"][data-field-kind=\"number-field\"][data-slot=\"increment\"]) {\n    border-inline-start: 1px solid var(--border);\n  }\n\n  :where([data-control-family=\"field\"][data-field-kind=\"number-field\"][data-slot=\"decrement\"]),\n  :where([data-control-family=\"field\"][data-field-kind=\"number-field\"][data-slot=\"increment\"]) {\n    outline: none;\n    transition-property: color, background-color;\n    transition-duration: var(--duration-fast);\n    transition-timing-function: var(--ease-standard);\n  }\n\n  :where([data-control-family=\"field\"][data-field-kind=\"number-field\"][data-slot=\"decrement\"]:active),\n  :where([data-control-family=\"field\"][data-field-kind=\"number-field\"][data-slot=\"increment\"]:active) {\n    background: oklch(from var(--foreground) l c h / 0.06);\n  }\n\n  :where([data-control-family=\"field\"][data-field-kind=\"number-field\"][data-slot=\"decrement\"][data-disabled]),\n  :where([data-control-family=\"field\"][data-field-kind=\"number-field\"][data-slot=\"increment\"][data-disabled]) {\n    color: oklch(from var(--muted-foreground) l c h / 0.5);\n  }\n\n  :where([data-control-family=\"field\"][data-field-kind=\"number-field\"][data-slot=\"scrub-cursor\"]) {\n    color: var(--foreground);\n    filter: drop-shadow(0 1px 1px oklch(0 0 0 / 0.05));\n  }\n\n  :where([data-control-family=\"field\"][data-field-kind=\"input-otp\"][data-slot=\"separator\"]) {\n    border-radius: 9999px;\n    background: var(--border);\n  }\n\n  :where([data-control-family=\"field\"][data-field-kind=\"field\"][data-slot=\"title\"]) {\n    color: var(--foreground);\n    font-size: var(--text-label);\n    font-weight: 500;\n  }\n\n  :where([data-control-family=\"field\"][data-field-kind=\"field\"][data-slot=\"label\"]) {\n    color: var(--foreground);\n    font-size: var(--text-label);\n    font-weight: 500;\n  }\n\n  :where([data-control-family=\"field\"][data-field-kind=\"field\"][data-slot=\"label\"][data-disabled]) {\n    opacity: 0.5;\n  }\n\n  :where([data-control-family=\"field\"][data-field-kind=\"field\"][data-slot=\"description\"]) {\n    color: var(--muted-foreground);\n    font-size: var(--text-caption);\n  }\n\n  :where([data-control-family=\"field\"][data-field-kind=\"field\"][data-slot=\"error\"]) {\n    color: var(--destructive-text);\n    font-size: var(--text-caption);\n  }\n\n  :where([data-control-family=\"field\"][data-field-kind=\"field\"][data-slot=\"separator\"]) {\n    font-size: var(--text-caption);\n  }\n\n  :where([data-control-family=\"field\"][data-field-kind=\"field\"][data-slot=\"separator-content\"]) {\n    background-color: var(--background);\n    color: var(--muted-foreground);\n  }\n\n  :where([data-control-family=\"field\"][data-field-kind=\"field\"][data-slot=\"set\"]) {\n    border-width: 0px;\n  }\n\n  :where([data-control-family=\"field\"][data-field-kind=\"field\"][data-slot=\"legend\"]) {\n    color: var(--foreground);\n    font-size: var(--text-label);\n    font-weight: 600;\n  }\n}\n"
    },
    {
      "path": "src/registry/sources/control-ui/recipes/field.css",
      "target": "@components/control-ui/styles/recipes/field.css",
      "type": "registry:file",
      "content": "@layer components {\n  :where([data-control-family=\"field\"][data-control=\"true\"]) {\n    --cui-field-radius: var(--radius-control);\n    --cui-field-background: oklch(from var(--card) l c h / 0.72);\n    --cui-field-foreground: var(--foreground);\n    --cui-field-border-color: var(--border);\n    --cui-field-border-width: 1px;\n    --cui-field-shadow: var(--shadow-sm);\n    --cui-field-backdrop-filter: blur(0px);\n    --cui-field-focus-border-color: var(--border);\n    border: var(--cui-field-border-width) solid var(--cui-field-border-color);\n    border-radius: var(--cui-field-radius);\n    outline: none;\n    background: var(--cui-field-background);\n    box-shadow: var(--cui-field-shadow);\n    color: var(--cui-field-foreground);\n    backdrop-filter: var(--cui-field-backdrop-filter);\n  }\n\n  :where(\n    [data-control-family=\"field\"][data-control=\"true\"]:not([data-control-family=\"field\"][data-field-kind=\"autocomplete\"]):not(\n      [data-control-family=\"field\"][data-field-kind=\"combobox\"]\n    )\n  ) {\n    transition-property: color, background-color, border-color, box-shadow, opacity, backdrop-filter;\n    transition-duration: var(--duration-fast);\n    transition-timing-function: var(--ease-standard);\n  }\n\n  :where([data-control-family=\"field\"][data-control=\"true\"])::placeholder {\n    color: var(--muted-foreground);\n  }\n\n  @media (hover: hover) {\n    :where([data-control-family=\"field\"][data-field-kind=\"autocomplete\"]:hover),\n    :where([data-control-family=\"field\"][data-field-kind=\"combobox\"]:hover),\n    :where([data-control-family=\"field\"][data-field-kind=\"native-select\"]:hover),\n    :where([data-control-family=\"field\"][data-field-kind=\"number-field\"]:hover) {\n      background: oklch(from var(--foreground) l c h / 0.05);\n    }\n  }\n\n  :where([data-control-family=\"field\"][data-control=\"true\"]:is(:focus-visible, :focus-within)) {\n    border-color: var(--cui-field-focus-border-color);\n  }\n\n  :where([data-control-family=\"field\"][data-control=\"true\"][data-invalid]),\n  :where([data-control-family=\"field\"][data-control=\"true\"][aria-invalid=\"true\"]) {\n    box-shadow:\n      0 0 0 2px var(--destructive),\n      var(--cui-field-shadow);\n  }\n\n  :where([data-control-family=\"field\"][data-control=\"true\"]:disabled),\n  :where([data-control-family=\"field\"][data-control=\"true\"][data-disabled]) {\n    cursor: not-allowed;\n    opacity: 0.5;\n  }\n\n  :where([data-control-family=\"field\"][data-field-kind=\"input-otp\"][data-slot=\"slot\"]) {\n    text-align: center;\n    font-size: var(--text-body);\n    font-weight: var(--font-weight-medium);\n    font-variant-numeric: tabular-nums;\n  }\n\n  :where([data-control-family=\"field\"][data-field-kind=\"combobox\"][data-slot=\"input\"]) {\n    font-weight: var(--font-weight-medium);\n  }\n\n  :where([data-control-family=\"field\"][data-field-kind=\"native-select\"][data-slot=\"root\"]) {\n    font-weight: var(--font-weight-medium);\n    appearance: none;\n  }\n\n  :where([data-control-family=\"field\"][data-field-kind=\"number-field\"][data-slot=\"drag-icon\"]) {\n    color: var(--foreground);\n  }\n\n  :where([data-control-family=\"field\"][data-field-kind=\"number-field\"][data-slot=\"input\"]) {\n    text-align: center;\n    font-weight: var(--font-weight-medium);\n    font-variant-numeric: tabular-nums;\n  }\n\n  :where([data-control-family=\"field\"][data-field-kind=\"number-field\"][data-slot=\"group\"]) {\n    font-weight: var(--font-weight-medium);\n  }\n\n  :where([data-control-family=\"field\"][data-field-kind=\"textarea\"][data-slot=\"root\"]) {\n    font-size: var(--text-body);\n  }\n\n  :where([data-control-family=\"field\"][data-field-kind=\"autocomplete\"][data-slot=\"input\"]) {\n    font-weight: var(--font-weight-medium);\n  }\n}\n\n@property --cui-field-radius {\n  syntax: \"<length-percentage>\";\n  inherits: true;\n  initial-value: 0px;\n}\n\n@property --cui-field-background {\n  syntax: \"*\";\n  inherits: true;\n}\n\n@property --cui-field-foreground {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: transparent;\n}\n\n@property --cui-field-border-color {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: transparent;\n}\n\n@property --cui-field-border-width {\n  syntax: \"<length>\";\n  inherits: true;\n  initial-value: 0px;\n}\n\n@property --cui-field-shadow {\n  syntax: \"*\";\n  inherits: true;\n}\n\n@property --cui-field-backdrop-filter {\n  syntax: \"*\";\n  inherits: true;\n}\n\n@property --cui-field-focus-border-color {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: transparent;\n}\n"
    },
    {
      "path": "src/registry/sources/control-ui/recipes/popup-controls.css",
      "target": "@components/control-ui/styles/recipes/popup-controls.css",
      "type": "registry:file",
      "content": "@layer components {\n  :where([data-control-family=\"popup\"][data-popup-kind=\"alert-dialog\"][data-slot=\"content\"]) {\n    outline-style: none;\n  }\n\n  :where([data-control-family=\"popup\"][data-popup-kind=\"hover-card\"][data-slot=\"positioner\"]) {\n    outline-style: none;\n  }\n\n  :where([data-control-family=\"popup\"][data-popup-kind=\"navigation-menu\"][data-slot=\"link\"]) {\n    text-decoration-line: none;\n  }\n\n  :where([data-control-family=\"popup\"][data-popup-kind=\"menubar\"][data-slot=\"sub-trigger-indicator\"]) {\n    line-height: 1;\n  }\n\n  :where([data-control-family=\"popup\"][data-popup-kind=\"rich-tooltip\"][data-slot=\"content\"]) {\n    text-align: left;\n  }\n\n  :where([data-control-family=\"popup\"][data-popup-kind=\"rich-tooltip\"][data-slot=\"content\"][data-starting-style]) {\n    --_popup-rich-tooltip-content-opacity: 0%;\n    opacity: var(--_popup-rich-tooltip-content-opacity);\n  }\n\n  :where([data-control-family=\"popup\"][data-popup-kind=\"rich-tooltip\"][data-slot=\"content\"][data-ending-style]) {\n    --_popup-rich-tooltip-content-opacity: 0%;\n    opacity: var(--_popup-rich-tooltip-content-opacity);\n  }\n\n  :where([data-control-family=\"popup\"][data-popup-kind=\"rich-tooltip\"][data-slot=\"positioner\"]) {\n    outline-style: none;\n  }\n\n  :where([data-control-family=\"popup\"][data-popup-kind=\"dialog\"][data-slot=\"content\"]) {\n    outline-style: none;\n  }\n\n  :where([data-control-family=\"popup\"][data-popup-kind=\"color-picker\"][data-slot=\"positioner\"]) {\n    outline-style: none;\n  }\n\n  :where([data-control-family=\"popup\"][data-popup-kind=\"context-menu\"][data-slot=\"sub-trigger-indicator\"]) {\n    line-height: 1;\n  }\n\n  :where([data-control-family=\"button\"][data-slot=\"root\"][data-popup-part=\"close\"][data-icon-only=\"true\"]) {\n    --_popup-button-root-close-opacity: 70%;\n    opacity: var(--_popup-button-root-close-opacity);\n  }\n\n  @media (hover: hover) {\n    :where([data-control-family=\"button\"][data-slot=\"root\"][data-popup-part=\"close\"][data-icon-only=\"true\"]:hover) {\n      --_popup-button-root-close-opacity: 100%;\n      opacity: var(--_popup-button-root-close-opacity);\n    }\n  }\n}\n"
    },
    {
      "path": "src/registry/sources/control-ui/recipes/popup-lists.css",
      "target": "@components/control-ui/styles/recipes/popup-lists.css",
      "type": "registry:file",
      "content": "@layer components {\n  :where([data-control-family=\"popup\"][data-popup-kind=\"model-switcher\"][data-slot=\"hint\"]) {\n    font-size: var(--text-micro);\n    color: var(--muted-foreground);\n  }\n\n  :where([data-control-family=\"popup\"][data-popup-kind=\"trigger-menu\"][data-slot=\"group-label\"]) {\n    font-size: var(--text-micro);\n    font-weight: var(--font-weight-medium);\n    letter-spacing: 0.08em;\n    color: var(--muted-foreground);\n  }\n\n  :where([data-control-family=\"popup\"][data-popup-kind=\"trigger-menu\"][data-slot=\"empty\"]) {\n    font-size: var(--text-body);\n    color: var(--muted-foreground);\n  }\n\n  :where([data-control-family=\"popup\"][data-popup-kind=\"trigger-menu\"][data-slot=\"icon\"]) {\n    color: var(--muted-foreground);\n  }\n\n  :where([data-control-family=\"popup\"][data-popup-kind=\"trigger-menu\"][data-slot=\"positioner\"]) {\n    outline-style: none;\n  }\n\n  :where([data-control-family=\"popup\"][data-popup-kind=\"combobox\"][data-slot=\"group-label\"]) {\n    font-size: var(--text-caption);\n    font-weight: var(--font-weight-medium);\n    color: var(--muted-foreground);\n  }\n\n  :where([data-control-family=\"popup\"][data-popup-kind=\"combobox\"][data-slot=\"item-indicator\"]) {\n    color: var(--foreground);\n  }\n\n  :where([data-control-family=\"popup\"][data-popup-kind=\"combobox\"][data-slot=\"empty\"]) {\n    text-align: center;\n    font-size: var(--text-body);\n    color: var(--muted-foreground);\n  }\n\n  :where([data-control-family=\"popup\"][data-popup-kind=\"combobox\"][data-slot=\"positioner\"]) {\n    outline-style: none;\n  }\n\n  :where([data-control-family=\"popup\"][data-popup-kind=\"command\"][data-slot=\"group\"] [cmdk-group-heading]) {\n    font-size: var(--text-caption);\n    font-weight: var(--font-weight-medium);\n    letter-spacing: 0.08em;\n  }\n\n  :where([data-control-family=\"popup\"][data-popup-kind=\"command\"][data-slot=\"empty\"]) {\n    text-align: center;\n    font-size: var(--text-body);\n    color: var(--muted-foreground);\n  }\n\n  :where([data-control-family=\"popup\"][data-popup-kind=\"command\"][data-slot=\"input-wrapper\"]) {\n    border-block-end: 1px solid var(--cui-popup-separator-color);\n  }\n\n  :where([data-control-family=\"popup\"][data-popup-kind=\"command\"][data-slot=\"input\"]) {\n    background: transparent;\n    color: var(--foreground);\n    outline-style: none;\n  }\n\n  :where([data-control-family=\"popup\"][data-popup-kind=\"command\"][data-slot=\"input\"])::placeholder,\n  :where([data-control-family=\"popup\"][data-popup-kind=\"command\"] [cmdk-group-heading]) {\n    color: var(--muted-foreground);\n  }\n\n  :where([data-control-family=\"popup\"][data-popup-kind=\"command\"][data-slot=\"input\"]:disabled) {\n    opacity: 0.5;\n  }\n\n  :where([data-control-family=\"popup\"][data-popup-kind=\"command\"][data-slot=\"group\"]) {\n    color: var(--foreground);\n  }\n\n  :where([data-control-family=\"popup\"][data-popup-kind=\"command\"][data-slot=\"input-icon\"]) {\n    color: var(--muted-foreground);\n  }\n\n  :where([data-control-family=\"popup\"][data-popup-kind=\"command\"][data-slot=\"dialog-root\"]) {\n    transition-property: grid-template-rows;\n    transition-duration: var(--duration-slow);\n    transition-timing-function: var(--ease-emphasized);\n    transition-delay: var(--duration-fast);\n  }\n\n  :where([data-control-family=\"popup\"][data-popup-kind=\"autocomplete\"][data-slot=\"group-label\"]) {\n    font-size: var(--text-caption);\n    font-weight: var(--font-weight-medium);\n    color: var(--muted-foreground);\n  }\n\n  :where([data-control-family=\"popup\"][data-popup-kind=\"autocomplete\"][data-slot=\"empty\"]) {\n    text-align: center;\n    font-size: var(--text-body);\n    color: var(--muted-foreground);\n  }\n\n  :where([data-control-family=\"popup\"][data-popup-kind=\"autocomplete\"][data-slot=\"positioner\"]) {\n    outline-style: none;\n  }\n}\n"
    },
    {
      "path": "src/registry/sources/control-ui/recipes/popup-motion.css",
      "target": "@components/control-ui/styles/recipes/popup-motion.css",
      "type": "registry:file",
      "content": "@layer components {\n  :where([data-control-family=\"popup\"][data-popup-kind=\"sheet\"][data-popup-part=\"surface\"]) {\n    outline-style: none;\n    transition-property: translate;\n    transition-duration: var(--duration-base);\n    transition-timing-function: var(--ease-emphasized);\n    border-radius: 0;\n    border-style: solid;\n    border-width: 0px;\n  }\n\n  :where(\n    [data-control-family=\"popup\"][data-popup-kind=\"sheet\"][data-popup-part=\"surface\"][data-side=\"left\"]:is(\n      [data-starting-style],\n      [data-ending-style]\n    )\n  ) {\n    translate: -100% 0;\n  }\n\n  :where(\n    [data-control-family=\"popup\"][data-popup-kind=\"sheet\"][data-popup-part=\"surface\"][data-side=\"right\"]:is(\n      [data-starting-style],\n      [data-ending-style]\n    )\n  ) {\n    translate: 100% 0;\n  }\n\n  :where([data-control-family=\"popup\"][data-popup-kind=\"tooltip\"][data-slot=\"arrow-shape\"]) {\n    fill: currentcolor;\n  }\n\n  :where([data-control-family=\"popup\"][data-popup-kind=\"tooltip\"][data-slot=\"content\"]) {\n    font-size: var(--text-xs);\n    line-height: var(--text-xs--line-height);\n    text-wrap: balance;\n    outline-style: none;\n    --_popup-tooltip-content-transition-property: opacity, scale;\n    transition-property: var(--_popup-tooltip-content-transition-property);\n    transition-timing-function: var(--ease-standard);\n    transition-duration: var(--duration-fast);\n  }\n\n  :where([data-control-family=\"popup\"][data-popup-kind=\"tooltip\"][data-slot=\"content\"][data-instant]) {\n    --_popup-tooltip-content-transition-property: none;\n    transition-property: var(--_popup-tooltip-content-transition-property);\n  }\n\n  :where([data-control-family=\"popup\"][data-popup-kind=\"tooltip\"][data-slot=\"content\"][data-ending-style]) {\n    --_popup-tooltip-content-opacity: 0%;\n    opacity: var(--_popup-tooltip-content-opacity);\n    --_popup-tooltip-content-scale: 95% 95%;\n    scale: var(--_popup-tooltip-content-scale);\n  }\n\n  :where([data-control-family=\"popup\"][data-popup-kind=\"tooltip\"][data-slot=\"content\"][data-starting-style]) {\n    --_popup-tooltip-content-opacity: 0%;\n    opacity: var(--_popup-tooltip-content-opacity);\n    --_popup-tooltip-content-scale: 95% 95%;\n    scale: var(--_popup-tooltip-content-scale);\n  }\n\n  :where([data-control-family=\"popup\"][data-popup-kind=\"tooltip\"][data-slot=\"positioner\"]) {\n    outline-style: none;\n  }\n\n  :where(\n    [data-control-family=\"popup\"][data-popup-kind=\"tooltip\"][data-slot=\"content\"][data-popup-part=\"surface\"]:not([data-arrow=\"true\"])\n  ) {\n    --_popup-tooltip-content-radius: var(--cui-popup-radius);\n    border-radius: var(--_popup-tooltip-content-radius);\n  }\n\n  :where([data-control-family=\"popup\"][data-popup-kind=\"tooltip\"][data-slot=\"content\"][data-popup-part=\"surface\"][data-arrow=\"true\"]) {\n    --_popup-tooltip-content-radius: clamp(0px, var(--cui-popup-radius), 3px);\n    border-radius: var(--_popup-tooltip-content-radius);\n  }\n\n  :where([data-control-family=\"popup\"][data-popup-kind=\"tooltip\"][data-slot=\"arrow\"][data-side=\"top\"]) {\n    --_popup-tooltip-arrow-rotate: 180deg;\n    rotate: var(--_popup-tooltip-arrow-rotate);\n  }\n\n  :where([data-control-family=\"popup\"][data-popup-kind=\"tooltip\"][data-slot=\"arrow\"][data-side=\"left\"]) {\n    --_popup-tooltip-arrow-rotate: 90deg;\n    rotate: var(--_popup-tooltip-arrow-rotate);\n  }\n\n  :where([data-control-family=\"popup\"][data-popup-kind=\"tooltip\"][data-slot=\"arrow\"][data-side=\"right\"]) {\n    --_popup-tooltip-arrow-rotate: calc(90deg * -1);\n    rotate: var(--_popup-tooltip-arrow-rotate);\n  }\n}\n"
    },
    {
      "path": "src/registry/sources/control-ui/recipes/popup.css",
      "target": "@components/control-ui/styles/recipes/popup.css",
      "type": "registry:file",
      "content": "@layer components {\n  :where([data-control-family=\"popup\"][data-popup-part=\"surface\"]),\n  :where([data-control-family=\"popup\"][data-popup-part=\"list-surface\"]),\n  :where([data-control-family=\"popup\"][data-popup-part=\"bar\"]) {\n    --cui-popup-radius: var(--radius-popover);\n    --cui-popup-background: var(--popover);\n    --cui-popup-foreground: var(--popover-foreground);\n    --cui-popup-border-color: var(--border);\n    --cui-popup-border-width: 1px;\n    --cui-popup-shadow: var(--shadow-pop);\n    --cui-popup-backdrop-filter: blur(var(--backdrop-blur-popover));\n    --cui-popup-item-radius: var(--radius-popup-item);\n    --cui-popup-item-foreground: var(--foreground);\n    --cui-popup-item-highlight-background: oklch(from var(--foreground) l c h / 0.06);\n    --cui-popup-item-highlight-foreground: var(--cui-popup-item-foreground);\n    --cui-popup-item-highlight-muted-foreground: var(--muted-foreground);\n    --cui-popup-item-disabled-opacity: 0.4;\n    --cui-popup-separator-color: var(--border);\n    --cui-popup-shortcut-foreground: var(--muted-foreground);\n    --_popup-transform-origin: var(--transform-origin);\n    border-radius: var(--cui-popup-radius);\n    background-color: var(--cui-popup-background);\n    box-shadow:\n      inset 0 0 0 var(--cui-popup-border-width) var(--cui-popup-border-color),\n      var(--cui-popup-shadow);\n    color: var(--cui-popup-foreground);\n    outline: none;\n    -webkit-backdrop-filter: var(--cui-popup-backdrop-filter, none);\n    backdrop-filter: var(--cui-popup-backdrop-filter, none);\n    transform-origin: var(--_popup-transform-origin);\n  }\n  :where([data-control-family=\"popup\"][data-popup-part=\"surface\"]:not([data-popup-static]):not([data-slot=\"viewport\"])),\n  :where([data-control-family=\"popup\"][data-popup-part=\"list-surface\"]) {\n    transition-property: opacity, scale;\n    transition-duration: var(--duration-base);\n    transition-timing-function: var(--ease-emphasized);\n    transition-behavior: allow-discrete;\n  }\n  :where(\n    [data-control-family=\"popup\"][data-popup-part=\"surface\"]:not(\n      :is([data-popup-kind=\"sheet\"], [data-popup-kind=\"drawer\"], [data-popup-kind=\"toast\"])\n    ):not([data-slot=\"viewport\"]):where([data-starting-style], [data-ending-style])\n  ),\n  :where([data-control-family=\"popup\"][data-popup-part=\"list-surface\"]:where([data-starting-style], [data-ending-style])) {\n    scale: 0.95;\n    opacity: 0;\n  }\n  @starting-style {\n    :where(\n        [data-control-family=\"popup\"][data-popup-part=\"surface\"]:not(\n          :is([data-popup-kind=\"sheet\"], [data-popup-kind=\"drawer\"], [data-popup-kind=\"toast\"])\n        ):not([data-slot=\"viewport\"])\n      ),\n    :where([data-control-family=\"popup\"][data-popup-part=\"list-surface\"]) {\n      scale: 0.95;\n      opacity: 0;\n    }\n  }\n  :where([data-control-family=\"popup\"][data-popup-part=\"backdrop\"]) {\n    --cui-popup-backdrop-background: oklch(from var(--foreground) l c h / var(--overlay-opacity));\n    background-color: var(--cui-popup-backdrop-background);\n    -webkit-backdrop-filter: blur(var(--backdrop-blur-overlay));\n    backdrop-filter: blur(var(--backdrop-blur-overlay));\n    transition: opacity var(--duration-base) var(--ease-standard);\n  }\n  :where(.dark [data-control-family=\"popup\"][data-popup-part=\"backdrop\"]) {\n    --cui-popup-backdrop-background: oklch(from var(--background) l c h / var(--overlay-opacity));\n  }\n  :where([data-control-family=\"popup\"][data-popup-part=\"backdrop\"]:is([data-starting-style], [data-ending-style])) {\n    opacity: 0;\n  }\n  :where([data-control-family=\"popup\"][data-popup-part=\"list-surface\"]) {\n    padding: var(--popover-padding);\n  }\n  :where([data-control-family=\"popup\"][data-popup-part=\"bar\"]) {\n    --cui-popup-radius: var(--radius-control);\n    --cui-popup-background: var(--card);\n    --cui-popup-shadow: var(--shadow-xs);\n  }\n  :where([data-control-family=\"popup\"][data-popup-part=\"surface\"][data-surface=\"modal\"]) {\n    --cui-popup-radius: var(--radius-panel);\n    --cui-popup-shadow: var(--shadow-modal);\n  }\n\n  :where([data-control-family=\"popup\"][data-popup-kind=\"tooltip\"][data-popup-part=\"surface\"]) {\n    --cui-popup-radius: var(--radius-control);\n    --cui-popup-background: var(--foreground);\n    --cui-popup-foreground: var(--background);\n  }\n\n  :where([data-control-family=\"popup\"][data-popup-kind=\"sheet\"][data-popup-part=\"surface\"]) {\n    --cui-popup-radius: 0px;\n    --cui-popup-shadow: var(--shadow-modal);\n  }\n\n  :where([data-control-family=\"popup\"][data-popup-kind=\"dialog\"][data-slot=\"title\"]),\n  :where([data-control-family=\"popup\"][data-popup-kind=\"alert-dialog\"][data-slot=\"title\"]) {\n    font-size: var(--text-heading-3);\n    font-weight: 600;\n    line-height: 1;\n    letter-spacing: -0.025em;\n  }\n\n  :where([data-control-family=\"popup\"][data-popup-kind=\"dialog\"][data-slot=\"description\"]),\n  :where([data-control-family=\"popup\"][data-popup-kind=\"alert-dialog\"][data-slot=\"description\"]) {\n    color: var(--muted-foreground);\n    font-size: var(--text-body);\n  }\n\n  :where([data-control-family=\"popup\"][data-popup-kind=\"sheet\"][data-slot=\"title\"]) {\n    font-weight: 600;\n  }\n\n  :where([data-control-family=\"popup\"][data-popup-kind=\"sheet\"][data-slot=\"description\"]) {\n    color: var(--muted-foreground);\n    font-size: var(--text-body);\n  }\n\n  :where([data-control-family=\"popup\"][data-popup-kind=\"tooltip\"][data-slot=\"arrow\"]) {\n    color: var(--cui-popup-background);\n  }\n\n  :where([data-control-family=\"popup\"][data-popup-part=\"item\"]),\n  :where([data-control-family=\"popup\"][data-popup-part=\"navigation-link\"]) {\n    cursor: pointer;\n    border-radius: var(--cui-popup-item-radius);\n    color: var(--cui-popup-item-foreground);\n    font-size: var(--text-body);\n    outline: none;\n    padding-block: 0.25rem;\n    padding-inline: calc(var(--padding-x) * 0.5);\n  }\n\n  :where([data-control-family=\"popup\"][data-popup-part=\"navigation-link\"]) {\n    font-size: var(--text-body);\n    transition-property: color, background-color, box-shadow, translate;\n    transition-duration: var(--duration-fast);\n    transition-timing-function: var(--ease-standard);\n  }\n\n  :where([data-control-family=\"popup\"][data-popup-part=\"navigation-link\"][data-variant=\"compact\"]) {\n    color: var(--muted-foreground);\n    font-size: var(--text-label);\n    font-weight: 500;\n  }\n\n  :where([data-control-family=\"popup\"][data-popup-part=\"navigation-link\"]:where(:hover, :focus-visible, [data-active])) {\n    background-color: var(--cui-popup-item-highlight-background);\n    color: var(--foreground);\n  }\n\n  :where(\n    [data-control-family=\"popup\"][data-popup-part=\"item\"]:where(\n      [data-highlighted],\n      [data-selected]:not([data-selected=\"false\"]),\n      [data-popup-open]\n    )\n  ) {\n    --cui-popup-shortcut-foreground: var(--cui-popup-item-highlight-foreground);\n    --muted-foreground: var(--cui-popup-item-highlight-muted-foreground);\n    background-color: var(--cui-popup-item-highlight-background);\n    color: var(--cui-popup-item-highlight-foreground);\n  }\n\n  :where([data-control-family=\"popup\"][data-popup-part=\"item\"]:is([data-disabled]:not([data-disabled=\"false\"]), [data-disabled=\"true\"])) {\n    cursor: not-allowed;\n    opacity: var(--cui-popup-item-disabled-opacity);\n  }\n\n  :where([data-control-family=\"popup\"][data-popup-part=\"label\"]) {\n    color: var(--muted-foreground);\n    font-size: var(--text-micro);\n    font-weight: 500;\n    letter-spacing: 0.08em;\n    text-transform: uppercase;\n  }\n\n  :where([data-control-family=\"popup\"][data-popup-part=\"separator\"]) {\n    background-color: var(--cui-popup-separator-color);\n  }\n\n  :where([data-control-family=\"popup\"][data-popup-part=\"shortcut\"]) {\n    --_popup-shortcut-font-size: var(--text-body);\n    color: var(--cui-popup-shortcut-foreground);\n    font-size: var(--_popup-shortcut-font-size);\n    letter-spacing: 0.02em;\n  }\n\n  :where([data-control-family=\"popup\"][data-popup-kind=\"command\"][data-slot=\"shortcut\"]) {\n    --_popup-shortcut-font-size: var(--text-label);\n  }\n\n  :where([data-control-family=\"popup\"][data-popup-kind=\"select\"][data-slot=\"icon\"]),\n  :where([data-control-family=\"popup\"][data-popup-kind=\"navigation-menu\"][data-slot=\"icon\"]) {\n    color: var(--muted-foreground);\n    transition-property: rotate;\n    transition-duration: var(--duration-base);\n    transition-timing-function: var(--ease-emphasized);\n  }\n\n  :where(\n    [data-control-family=\"button\"][data-popup-kind=\"select\"][data-slot=\"trigger\"][data-popup-open]\n      [data-control-family=\"popup\"][data-popup-kind=\"select\"][data-slot=\"icon\"]\n  ),\n  :where(\n    [data-control-family=\"button\"][data-popup-kind=\"navigation-menu\"][data-slot=\"trigger\"][data-popup-open]\n      :where([data-control-family=\"popup\"][data-popup-kind=\"navigation-menu\"][data-slot=\"icon\"])\n  ) {\n    rotate: 180deg;\n  }\n\n  :where([data-control-family=\"popup\"][data-popup-kind=\"select\"][data-slot=\"item-indicator\"]) {\n    color: inherit;\n  }\n\n  :where([data-control-family=\"popup\"][data-popup-kind=\"context-menu\"][data-slot=\"radio-indicator\"]) {\n    border-radius: 9999px;\n    background-color: currentColor;\n  }\n\n  :where([data-control-family=\"popup\"][data-popup-kind=\"popover\"][data-slot=\"title\"]) {\n    font-size: var(--text-body);\n    font-weight: 600;\n    line-height: 1;\n    letter-spacing: -0.01em;\n  }\n\n  :where([data-control-family=\"popup\"][data-popup-kind=\"popover\"][data-slot=\"description\"]) {\n    color: var(--muted-foreground);\n    font-size: var(--text-body);\n  }\n\n  :where([data-control-family=\"popup\"][data-popup-kind=\"navigation-menu\"][data-slot=\"positioner\"]) {\n    transition-property: inset-block-start, inset-inline-start, inset-block-end, inset-inline-end;\n    transition-duration: var(--duration-base);\n    transition-timing-function: var(--ease-emphasized);\n  }\n\n  :where([data-control-family=\"popup\"][data-popup-kind=\"navigation-menu\"][data-slot=\"popup\"]) {\n    outline: none;\n    --_popup-transform-origin: var(--transform-origin);\n    transform-origin: var(--_popup-transform-origin);\n    transition-property: opacity, inline-size, block-size, scale;\n    transition-duration: var(--duration-base);\n    transition-timing-function: var(--ease-emphasized);\n  }\n\n  :where(\n    [data-control-family=\"popup\"][data-popup-kind=\"navigation-menu\"][data-slot=\"popup\"]:is([data-starting-style], [data-ending-style])\n  ) {\n    scale: 0.95;\n    opacity: 0;\n  }\n\n  :where([data-control-family=\"popup\"][data-popup-kind=\"navigation-menu\"][data-slot=\"content\"]) {\n    transition-property: opacity, translate;\n    transition-duration: var(--duration-base);\n    transition-timing-function: var(--ease-emphasized);\n  }\n\n  :where(\n    [data-control-family=\"popup\"][data-popup-kind=\"navigation-menu\"][data-slot=\"content\"]:is([data-starting-style], [data-ending-style])\n  ) {\n    opacity: 0;\n  }\n\n  :where(\n    [data-control-family=\"popup\"][data-popup-kind=\"navigation-menu\"][data-slot=\"content\"][data-starting-style][data-activation-direction=\"left\"]\n  ),\n  :where(\n    [data-control-family=\"popup\"][data-popup-kind=\"navigation-menu\"][data-slot=\"content\"][data-ending-style][data-activation-direction=\"right\"]\n  ) {\n    translate: -0.75rem 0;\n  }\n\n  :where(\n    [data-control-family=\"popup\"][data-popup-kind=\"navigation-menu\"][data-slot=\"content\"][data-starting-style][data-activation-direction=\"right\"]\n  ),\n  :where(\n    [data-control-family=\"popup\"][data-popup-kind=\"navigation-menu\"][data-slot=\"content\"][data-ending-style][data-activation-direction=\"left\"]\n  ) {\n    translate: 0.75rem 0;\n  }\n}\n\n@property --cui-popup-radius {\n  syntax: \"*\";\n  inherits: true;\n}\n\n@property --cui-popup-background {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: transparent;\n}\n\n@property --cui-popup-foreground {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: transparent;\n}\n\n@property --cui-popup-border-color {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: transparent;\n}\n\n@property --cui-popup-border-width {\n  syntax: \"<length>\";\n  inherits: true;\n  initial-value: 0px;\n}\n\n@property --cui-popup-shadow {\n  syntax: \"*\";\n  inherits: true;\n}\n\n@property --cui-popup-backdrop-filter {\n  syntax: \"*\";\n  inherits: true;\n}\n\n@property --cui-popup-backdrop-background {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: transparent;\n}\n\n@property --cui-popup-item-radius {\n  syntax: \"<length-percentage>\";\n  inherits: true;\n  initial-value: 0px;\n}\n\n@property --cui-popup-item-foreground {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: transparent;\n}\n\n@property --cui-popup-item-highlight-background {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: transparent;\n}\n\n@property --cui-popup-item-highlight-foreground {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: transparent;\n}\n\n@property --cui-popup-item-highlight-muted-foreground {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: transparent;\n}\n\n@property --cui-popup-item-disabled-opacity {\n  syntax: \"<number>\";\n  inherits: true;\n  initial-value: 1;\n}\n\n@property --cui-popup-separator-color {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: transparent;\n}\n\n@property --cui-popup-shortcut-foreground {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: transparent;\n}\n"
    },
    {
      "path": "src/registry/sources/control-ui/ui/autocomplete.tsx",
      "target": "@components/control-ui/ui/autocomplete.tsx",
      "type": "registry:ui",
      "content": "\"use client\";\n\nimport { Autocomplete as AutocompletePrimitive } from \"@base-ui/react/autocomplete\";\nimport type { ComponentProps, CSSProperties, ReactNode } from \"react\";\nimport type { OpenChangeEventDetails } from \"@/components/control-ui/control-props\";\nimport type { ControlSize } from \"@/components/control-ui/control-variants\";\nimport { controlSize } from \"@/components/control-ui/control-variants\";\nimport type { FieldKnobStyle } from \"@/components/control-ui/knob-contracts/field-knobs\";\nimport type { PopupKnobStyle } from \"@/components/control-ui/knob-contracts/popup-knobs\";\nimport { cn } from \"@/components/control-ui/lib/cn\";\nimport { skinEffects, skinId } from \"@/components/control-ui/skin\";\nimport { popupItemStructureClasses } from \"@/components/control-ui/surface-variants\";\nimport { ScrollArea } from \"@/components/control-ui/ui/scroll-area\";\n\nexport type AutocompleteProps<Value = string> = {\n  children?: ReactNode;\n  items?: readonly Value[];\n  value?: string;\n  defaultValue?: string;\n  onValueChange?: (value: string) => void;\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean, eventDetails: OpenChangeEventDetails) => void;\n  disabled?: boolean;\n  readOnly?: boolean;\n  required?: boolean;\n  name?: string;\n  mode?: \"list\" | \"both\" | \"inline\" | \"none\";\n  autoHighlight?: boolean | \"always\";\n  limit?: number;\n  openOnInputClick?: boolean;\n  filter?: ((itemValue: Value, query: string, itemToString?: (itemValue: Value) => string) => boolean) | null;\n  itemToStringValue?: (itemValue: Value) => string;\n};\n\nexport type AutocompleteInputProps = Omit<Omit<ComponentProps<\"input\">, \"size\">, \"style\"> & { style?: CSSProperties & FieldKnobStyle } & {\n  size?: ControlSize;\n};\n\nexport type AutocompleteClearProps = ComponentProps<\"button\"> & { style?: CSSProperties & FieldKnobStyle };\n\nexport type AutocompleteContentProps = Omit<\n  ComponentProps<\"div\"> & {\n    sideOffset?: number;\n  },\n  \"style\"\n> & { style?: CSSProperties & PopupKnobStyle };\n\nexport type AutocompleteListProps<Value = unknown> = Omit<ComponentProps<\"div\">, \"children\"> & {\n  children?: ReactNode | ((item: Value, index: number) => ReactNode);\n} & { style?: CSSProperties & PopupKnobStyle };\n\nexport type AutocompleteItemProps<Value = unknown> = Omit<\n  Omit<ComponentProps<\"div\">, \"value\"> & {\n    value?: Value;\n    disabled?: boolean;\n  },\n  \"style\"\n> & { style?: CSSProperties & PopupKnobStyle };\n\nexport type AutocompleteEmptyProps = Omit<ComponentProps<\"div\">, \"style\"> & { style?: CSSProperties & FieldKnobStyle };\n\nexport type AutocompleteGroupProps = ComponentProps<\"div\"> & { style?: CSSProperties & FieldKnobStyle };\n\nexport type AutocompleteGroupLabelProps = Omit<ComponentProps<\"div\">, \"style\"> & { style?: CSSProperties & PopupKnobStyle };\n\n// Free text, unlike Combobox — value is filter string, and picking item only fills field.\n\nexport function Autocomplete<Value = string>({ children, ...props }: AutocompleteProps<Value>) {\n  return <AutocompletePrimitive.Root {...props}>{children}</AutocompletePrimitive.Root>;\n}\n\nexport function AutocompleteClear({ className, children, ...props }: AutocompleteClearProps) {\n  return (\n    <AutocompletePrimitive.Clear\n      data-control-ui=\"autocomplete\"\n      data-control-family=\"field\"\n      data-field-kind=\"autocomplete\"\n      data-slot=\"clear\"\n      aria-label=\"Clear search\"\n      className={cn(\"inline-flex size-6 shrink-0 cursor-pointer items-center justify-center disabled:cursor-not-allowed\", className)}\n      {...props}\n    >\n      {children ?? (\n        <svg viewBox=\"0 0 12 12\" className=\"size-3\" aria-hidden=\"true\" fill=\"none\">\n          <path d=\"M3 3 9 9M9 3 3 9\" stroke=\"currentColor\" strokeWidth=\"1.3\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n        </svg>\n      )}\n    </AutocompletePrimitive.Clear>\n  );\n}\n\nexport function AutocompleteInput({ size = \"md\", className, ...props }: AutocompleteInputProps) {\n  return (\n    <AutocompletePrimitive.InputGroup\n      data-control-ui=\"autocomplete\"\n      data-field-kind=\"autocomplete\"\n      data-slot=\"root\"\n      className=\"relative flex w-full items-center\"\n    >\n      <AutocompletePrimitive.Input\n        data-control-ui=\"autocomplete\"\n        data-field-kind=\"autocomplete\"\n        data-slot=\"input\"\n        data-control=\"true\"\n        data-control-family=\"field\"\n        data-size={size}\n        className={cn(\"w-full min-w-0 pr-9 disabled:cursor-not-allowed\", controlSize({ size }), className)}\n        {...props}\n      />\n      <AutocompleteClear className=\"absolute right-1.5 top-1/2 -translate-y-1/2\" />\n    </AutocompletePrimitive.InputGroup>\n  );\n}\n\nexport function AutocompleteContent({ className, children, sideOffset = 6, ...props }: AutocompleteContentProps) {\n  return (\n    <AutocompletePrimitive.Portal>\n      {/* portal lands outside container-scoped skin root, so scope is re-asserted here */}\n      <AutocompletePrimitive.Positioner\n        data-control-ui=\"autocomplete\"\n        data-popup-kind=\"autocomplete\"\n        data-control-family=\"popup\"\n        data-slot=\"positioner\"\n        data-skin={skinId()}\n        data-effects={skinEffects()}\n        side=\"bottom\"\n        align=\"start\"\n        sideOffset={sideOffset}\n        className=\"z-[80]\"\n      >\n        <AutocompletePrimitive.Popup\n          data-control-ui=\"autocomplete\"\n          data-popup-kind=\"autocomplete\"\n          data-control-family=\"popup\"\n          data-slot=\"content\"\n          data-surface=\"floating\"\n          data-popup-part=\"list-surface\"\n          className={cn(\"w-[var(--anchor-width)] max-w-[var(--available-width)]\", className)}\n          {...props}\n        >\n          {children}\n        </AutocompletePrimitive.Popup>\n      </AutocompletePrimitive.Positioner>\n    </AutocompletePrimitive.Portal>\n  );\n}\n\nexport function AutocompleteList<Value = unknown>({ className, children, ...props }: AutocompleteListProps<Value>) {\n  return (\n    <ScrollArea className=\"w-full\" maxHeight=\"min(18rem, var(--available-height))\">\n      <AutocompletePrimitive.List\n        data-control-ui=\"autocomplete\"\n        data-popup-kind=\"autocomplete\"\n        data-slot=\"list\"\n        data-control-family=\"popup\"\n        data-popup-part=\"list-content\"\n        className={className}\n        {...props}\n      >\n        {children}\n      </AutocompletePrimitive.List>\n    </ScrollArea>\n  );\n}\n\nexport function AutocompleteEmpty({ className, children, ...props }: AutocompleteEmptyProps) {\n  return (\n    <AutocompletePrimitive.Empty\n      data-control-ui=\"autocomplete\"\n      data-control-family=\"popup\"\n      data-popup-kind=\"autocomplete\"\n      data-slot=\"empty\"\n      className={cn(\"px-[calc(var(--padding-x)*0.5)] py-6 empty:h-0 empty:overflow-hidden empty:p-0\", className)}\n      {...props}\n    >\n      {children}\n    </AutocompletePrimitive.Empty>\n  );\n}\n\nexport function AutocompleteItem<Value = unknown>({ className, children, disabled, ...props }: AutocompleteItemProps<Value>) {\n  return (\n    <AutocompletePrimitive.Item\n      data-control-ui=\"autocomplete\"\n      data-popup-kind=\"autocomplete\"\n      data-control-family=\"popup\"\n      data-slot=\"item\"\n      data-popup-part=\"item\"\n      disabled={disabled}\n      className={cn(popupItemStructureClasses, className)}\n      {...props}\n    >\n      <span className=\"flex min-w-0 flex-1 items-center gap-2 truncate\">{children}</span>\n    </AutocompletePrimitive.Item>\n  );\n}\n\nexport function AutocompleteGroup({ className, children, ...props }: AutocompleteGroupProps) {\n  return (\n    <AutocompletePrimitive.Group\n      data-control-ui=\"autocomplete\"\n      data-control-family=\"field\"\n      data-field-kind=\"autocomplete\"\n      data-slot=\"group\"\n      className={cn(\"py-1\", className)}\n      {...props}\n    >\n      {children}\n    </AutocompletePrimitive.Group>\n  );\n}\n\nexport function AutocompleteGroupLabel({ className, children, ...props }: AutocompleteGroupLabelProps) {\n  return (\n    <AutocompletePrimitive.GroupLabel\n      data-control-ui=\"autocomplete\"\n      data-popup-kind=\"autocomplete\"\n      data-slot=\"group-label\"\n      data-control-family=\"popup\"\n      data-popup-part=\"label\"\n      className={cn(\"px-[calc(var(--padding-x)*0.5)] py-1\", className)}\n      {...props}\n    >\n      {children}\n    </AutocompletePrimitive.GroupLabel>\n  );\n}\n"
    }
  ],
  "css": {
    "@import \"../components/control-ui/styles/recipes/field.css\"": {},
    "@import \"../components/control-ui/styles/recipes/field-parts.css\"": {},
    "@import \"../components/control-ui/styles/recipes/popup.css\"": {},
    "@import \"../components/control-ui/styles/recipes/popup-controls.css\"": {},
    "@import \"../components/control-ui/styles/recipes/popup-lists.css\"": {},
    "@import \"../components/control-ui/styles/recipes/popup-motion.css\"": {}
  },
  "meta": {}
}