{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "select",
  "title": "Select (FRAME/12 Adapter)",
  "description": "FRAME/12 skin for accessible select menus built on @radix-ui/react-select with ink frame and marker-yellow caret.",
  "dependencies": [
    "@radix-ui/react-select"
  ],
  "registryDependencies": [
    "https://frame12.dev/r/frame12-styles.json",
    "https://frame12.dev/r/field.json"
  ],
  "files": [
    {
      "path": "ui/select.tsx",
      "content": "'use client';\n\nimport * as React from 'react';\nimport * as SelectPrimitive from '@radix-ui/react-select';\n\ninterface SelectFieldContextValue {\n  instanceId: string;\n  triggerId: string;\n  containerEl: HTMLDivElement | null;\n  describedBy?: string;\n  invalid?: boolean;\n}\n\nconst SelectFieldContext = React.createContext<SelectFieldContextValue | null>(null);\n\ninterface OuterFieldContextShape {\n  id: string;\n  labelId?: string;\n  describedBy?: string;\n  invalid?: boolean;\n  disabled?: boolean;\n  required?: boolean;\n  density: 'comfortable' | 'compact';\n  isControlGroup?: boolean;\n  registerControlId?: (instanceId: string, explicitId?: string) => (() => void) | void;\n}\n\nconst FIELD_CTX_KEY = Symbol.for('frame12.FieldContext');\nconst globalFieldRegistry = globalThis as unknown as Record<\n  symbol,\n  React.Context<OuterFieldContextShape | null> | undefined\n>;\nconst OuterFieldContext = (globalFieldRegistry[FIELD_CTX_KEY] ??=\n  React.createContext<OuterFieldContextShape | null>(null));\n\nexport type SelectDensity = 'comfortable' | 'compact';\n\nexport interface SelectProps\n  extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Root> {\n  label?: string;\n  id?: string;\n  density?: SelectDensity;\n  className?: string;\n}\n\nexport function Select({\n  value,\n  defaultValue,\n  onValueChange,\n  open,\n  defaultOpen,\n  onOpenChange,\n  dir,\n  name,\n  autoComplete,\n  disabled,\n  required,\n  form,\n  label,\n  id,\n  density,\n  className = '',\n  children,\n}: SelectProps) {\n  const outerField = React.useContext(OuterFieldContext);\n  const [containerEl, setContainerEl] = React.useState<HTMLDivElement | null>(null);\n  const rawId = React.useId().replace(/:/g, '');\n  const triggerId =\n    id || (!outerField?.isControlGroup ? outerField?.id : undefined) || `f12-select-${rawId}`;\n  const effectiveDensity: SelectDensity = density ?? outerField?.density ?? 'comfortable';\n  const isCompact = effectiveDensity === 'compact';\n  const effectiveDisabled = disabled ?? outerField?.disabled;\n  const effectiveRequired = required ?? outerField?.required;\n  const showOwnLabel = Boolean(label && (!outerField?.labelId || outerField?.isControlGroup));\n\n  const registerControlId = outerField?.registerControlId;\n  React.useEffect(() => {\n    const cleanup = registerControlId?.(rawId, id);\n    return typeof cleanup === 'function' ? cleanup : undefined;\n  }, [registerControlId, rawId, id]);\n\n  const ctxValue = React.useMemo(\n    () => ({\n      instanceId: rawId,\n      triggerId,\n      containerEl,\n      describedBy: outerField?.describedBy,\n      invalid: outerField?.invalid,\n    }),\n    [rawId, triggerId, containerEl, outerField?.describedBy, outerField?.invalid],\n  );\n\n  return (\n    <SelectFieldContext.Provider value={ctxValue}>\n      <div\n        ref={setContainerEl}\n        className={`f12-select${isCompact ? ' f12-select-compact' : ''}${className ? ` ${className}` : ''}`}\n        data-density={isCompact ? 'compact' : undefined}\n      >\n        {showOwnLabel && (\n          <label htmlFor={triggerId} className=\"f12-label\">\n            {label}\n          </label>\n        )}\n        <SelectPrimitive.Root\n          value={value}\n          defaultValue={defaultValue}\n          onValueChange={onValueChange}\n          open={open}\n          defaultOpen={defaultOpen}\n          onOpenChange={onOpenChange}\n          dir={dir}\n          name={name}\n          autoComplete={autoComplete}\n          disabled={effectiveDisabled}\n          required={effectiveRequired}\n          form={form}\n        >\n          {children}\n        </SelectPrimitive.Root>\n      </div>\n    </SelectFieldContext.Provider>\n  );\n}\n\n(Select as unknown as { f12IsControl?: boolean }).f12IsControl = true;\n\nexport interface SelectTriggerProps\n  extends Omit<React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>, 'asChild'> {\n  ariaLabel?: string;\n}\n\nexport const SelectTrigger = React.forwardRef<HTMLButtonElement, SelectTriggerProps>(\n  function SelectTrigger(\n    {\n      ariaLabel,\n      id,\n      className = '',\n      'aria-describedby': userDescribedBy,\n      'aria-invalid': userAriaInvalid,\n      children,\n      ...rest\n    },\n    forwardedRef,\n  ) {\n    const field = React.useContext(SelectFieldContext);\n    const outerField = React.useContext(OuterFieldContext);\n    const fallbackInstanceId = React.useId().replace(/:/g, '');\n    const instanceId = field?.instanceId ?? fallbackInstanceId;\n    const resolvedId = id ?? field?.triggerId;\n    const registerControlId = outerField?.registerControlId;\n    React.useEffect(() => {\n      if (id) {\n        registerControlId?.(instanceId, id);\n      }\n    }, [id, instanceId, registerControlId]);\n    const describedBy =\n      [userDescribedBy, field?.describedBy].filter(Boolean).join(' ') || undefined;\n    const ariaInvalid = field?.invalid ? true : userAriaInvalid;\n    const { asChild: _asChild, ...triggerProps } =\n      rest as React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>;\n    return (\n      <SelectPrimitive.Trigger\n        ref={forwardedRef}\n        id={resolvedId}\n        aria-label={ariaLabel}\n        aria-describedby={describedBy}\n        aria-invalid={ariaInvalid}\n        className={`f12-select-trigger${className ? ` ${className}` : ''}`}\n        {...triggerProps}\n      >\n        {children}\n        <SelectPrimitive.Icon className=\"f12-select-caret\" aria-hidden=\"true\">\n          ▼\n        </SelectPrimitive.Icon>\n      </SelectPrimitive.Trigger>\n    );\n  },\n);\n\n(SelectTrigger as unknown as { f12IsSelectTrigger?: boolean }).f12IsSelectTrigger = true;\n\nexport type SelectValueProps = React.ComponentPropsWithoutRef<typeof SelectPrimitive.Value>;\n\nexport const SelectValue = React.forwardRef<HTMLSpanElement, SelectValueProps>(\n  function SelectValue({ placeholder = 'Select…', ...rest }, forwardedRef) {\n    return (\n      <SelectPrimitive.Value\n        ref={forwardedRef}\n        placeholder={placeholder}\n        {...rest}\n      />\n    );\n  },\n);\n\nexport type SelectContentProps = React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>;\n\nexport const SelectContent = React.forwardRef<HTMLDivElement, SelectContentProps>(\n  function SelectContent(\n    { className = '', position = 'popper', sideOffset = 4, children, ...rest },\n    forwardedRef,\n  ) {\n    const field = React.useContext(SelectFieldContext);\n    const portalContainer =\n      (field?.containerEl?.closest(\n        'dialog, .f12-frame, .f12-sheet, .f12-theme-dark, .f12-theme-light, [data-theme]',\n      ) as HTMLElement | null) ?? undefined;\n\n    return (\n      <SelectPrimitive.Portal container={portalContainer}>\n        <SelectPrimitive.Content\n          ref={forwardedRef}\n          position={position}\n          sideOffset={sideOffset}\n          className={`f12-select-content${className ? ` ${className}` : ''}`}\n          {...rest}\n        >\n          <SelectPrimitive.Viewport className=\"f12-select-viewport\">\n            {children}\n          </SelectPrimitive.Viewport>\n        </SelectPrimitive.Content>\n      </SelectPrimitive.Portal>\n    );\n  },\n);\n\nexport type SelectItemProps = Omit<\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>,\n  'asChild'\n>;\n\nexport const SelectItem = React.forwardRef<HTMLDivElement, SelectItemProps>(\n  function SelectItem({ className = '', children, ...rest }, forwardedRef) {\n    const { asChild: _asChild, ...itemProps } =\n      rest as React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>;\n    return (\n      <SelectPrimitive.Item\n        ref={forwardedRef}\n        className={`f12-select-item${className ? ` ${className}` : ''}`}\n        {...itemProps}\n      >\n        <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n        <SelectPrimitive.ItemIndicator className=\"f12-select-check\" aria-hidden=\"true\">\n          ✓\n        </SelectPrimitive.ItemIndicator>\n      </SelectPrimitive.Item>\n    );\n  },\n);\n\nexport type SelectGroupProps = React.ComponentPropsWithoutRef<typeof SelectPrimitive.Group>;\n\nexport const SelectGroup = React.forwardRef<HTMLDivElement, SelectGroupProps>(\n  function SelectGroup({ className = '', children, ...rest }, forwardedRef) {\n    return (\n      <SelectPrimitive.Group\n        ref={forwardedRef}\n        className={`f12-select-group${className ? ` ${className}` : ''}`}\n        {...rest}\n      >\n        {children}\n      </SelectPrimitive.Group>\n    );\n  },\n);\n\nexport type SelectLabelProps = React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>;\n\nexport const SelectLabel = React.forwardRef<HTMLDivElement, SelectLabelProps>(\n  function SelectLabel({ className = '', children, ...rest }, forwardedRef) {\n    return (\n      <SelectPrimitive.Label\n        ref={forwardedRef}\n        className={`f12-select-label${className ? ` ${className}` : ''}`}\n        {...rest}\n      >\n        {children}\n      </SelectPrimitive.Label>\n    );\n  },\n);\n\nexport type SelectSeparatorProps = React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>;\n\nexport const SelectSeparator = React.forwardRef<HTMLDivElement, SelectSeparatorProps>(\n  function SelectSeparator({ className = '', ...rest }, forwardedRef) {\n    return (\n      <SelectPrimitive.Separator\n        ref={forwardedRef}\n        className={`f12-select-sep${className ? ` ${className}` : ''}`}\n        {...rest}\n      />\n    );\n  },\n);\n",
      "type": "registry:ui",
      "target": "components/frame12/select.tsx"
    }
  ],
  "type": "registry:ui"
}