{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "select",
  "dependencies": [
    "@data-slot/select"
  ],
  "files": [
    {
      "path": "ui/select/Select.astro",
      "content": "---\n// Generated from bejamas-juno style registry. Do not edit packages/ui/src/components/select/Select.astro directly.\n/**\n * @component Select\n * @title Select\n * @description A dropdown control that lets users pick one option from a list with full keyboard navigation and accessibility support.\n * @figmaUrl https://www.figma.com/design/koxai7zw5vIuBzuVxe5T2l/bejamas-ui?node-id=2549-18530&t=YFStJ3V8fXEO8QD8-4\n *\n * @preview\n * <Select defaultValue=\"apple\" class=\"w-[200px]\">\n *   <SelectTrigger>\n *     <SelectValue placeholder=\"Select a fruit\" />\n *   </SelectTrigger>\n *   <SelectContent>\n *     <SelectItem value=\"apple\">Apple</SelectItem>\n *     <SelectItem value=\"banana\">Banana</SelectItem>\n *     <SelectItem value=\"cherry\">Cherry</SelectItem>\n *   </SelectContent>\n * </Select>\n *\n * @usage\n *\n * ```astro nocollapse\n * ---\n * import {\n *   Select,\n *   SelectTrigger,\n *   SelectValue,\n *   SelectContent,\n *   SelectItem,\n *   SelectGroup,\n *   SelectLabel,\n *   SelectSeparator\n * } from '@bejamas/ui/components/select';\n * ---\n *\n * <Select name=\"fruit\" defaultValue=\"apple\">\n *   <SelectTrigger>\n *     <SelectValue placeholder=\"Select a fruit\" />\n *   </SelectTrigger>\n *   <SelectContent>\n *     <SelectItem value=\"apple\">Apple</SelectItem>\n *     <SelectItem value=\"banana\">Banana</SelectItem>\n *   </SelectContent>\n * </Select>\n * ```\n *\n * @api\n *\n * ### Events\n *\n * The select emits custom events that you can listen to:\n *\n * | Event | Detail | Description |\n * |-------|--------|-------------|\n * | `select:change` | `{ value: string }` | Fired when a new value is selected |\n * | `select:open-change` | `{ open: boolean }` | Fired when the dropdown opens or closes |\n *\n * ```astro nocollapse console\n * <Select id=\"my-select\">\n *   <SelectTrigger>\n *     <SelectValue placeholder=\"Choose...\" />\n *   </SelectTrigger>\n *   <SelectContent>\n *     <SelectItem value=\"option1\">Option 1</SelectItem>\n *     <SelectItem value=\"option2\">Option 2</SelectItem>\n *   </SelectContent>\n * </Select>\n * ```\n *\n * ```js nocollapse\n *   const select = document.getElementById('my-select');\n *\n *   select.addEventListener('select:change', (e) => {\n *     console.log('Selected value:', e.detail.value);\n *   });\n *\n *   select.addEventListener('select:open-change', (e) => {\n *     console.log('Is open:', e.detail.open);\n *   });\n * ```\n *\n * ### Programmatic Control\n *\n * You can control the select programmatically by dispatching a `select:set` event:\n *\n * ```js nocollapse\n * const select = document.getElementById('my-select');\n *\n * // Set a specific value\n * select.dispatchEvent(new CustomEvent('select:set', {\n *   detail: { value: 'option2' }\n * }));\n *\n * // Open the select dropdown\n * select.dispatchEvent(new CustomEvent('select:set', {\n *   detail: { open: true }\n * }));\n *\n * // Close the select dropdown\n * select.dispatchEvent(new CustomEvent('select:set', {\n *   detail: { open: false }\n * }));\n * ```\n *\n * ### Data Attributes\n *\n * The select sets these data attributes that you can use for styling or querying state:\n *\n * | Attribute | Element | Description |\n * |-----------|---------|-------------|\n * | `data-state` | select, select-trigger, select-content | Current state (`open` or `closed`) |\n * | `data-open` / `data-closed` | select, select-trigger, select-content | Presence attributes for style-driven open/close animations |\n * | `data-value` | select | Currently selected value |\n * | `data-selected` | select-item | Present when item is selected |\n * | `data-highlighted` | select-item | Present when item is focused/highlighted |\n * | `data-disabled` | select, select-trigger, select-item | Present when disabled |\n * | `data-placeholder` | select-trigger | Present when showing placeholder (no value selected) |\n * | `data-align-trigger` | select-content | Present when item-aligned positioning is active |\n * | `data-position` | select-content, select-viewport | Positioning mode (`item-aligned` or `popper`) |\n *\n * ### Position Modes\n *\n * The `position` prop on `SelectContent` controls how the dropdown is positioned:\n *\n * - **`item-aligned`** (default): The dropdown aligns with the selected item, similar to native select behavior\n * - **`popper`**: Uses floating UI positioning with configurable placement options on `SelectContent`\n *\n * ```astro nocollapse nopreview\n * <!-- Item-aligned (default) -->\n * <Select>\n *   <SelectContent>...</SelectContent>\n * </Select>\n *\n * <!-- Popper mode -->\n * <Select>\n *   <SelectContent position=\"popper\">...</SelectContent>\n * </Select>\n *\n * <!-- Custom positioning on content -->\n * <Select>\n *   <SelectContent position=\"popper\" side=\"bottom\" align=\"start\" sideOffset={8}>\n *     ...\n *   </SelectContent>\n * </Select>\n * ```\n *\n * @examples\n *\n * ### With Groups\n *\n * <Select class=\"w-[200px]\">\n *   <SelectTrigger>\n *     <SelectValue placeholder=\"Select food\" />\n *   </SelectTrigger>\n *   <SelectContent>\n *     <SelectGroup>\n *       <SelectLabel>Fruits</SelectLabel>\n *       <SelectItem value=\"apple\">Apple</SelectItem>\n *       <SelectItem value=\"banana\">Banana</SelectItem>\n *     </SelectGroup>\n *     <SelectSeparator />\n *     <SelectGroup>\n *       <SelectLabel>Vegetables</SelectLabel>\n *       <SelectItem value=\"carrot\">Carrot</SelectItem>\n *       <SelectItem value=\"broccoli\">Broccoli</SelectItem>\n *     </SelectGroup>\n *   </SelectContent>\n * </Select>\n *\n * ### Sizes\n *\n * <div class=\"flex flex-col items-start gap-4 sm:flex-row\" >\n *   <Select class=\"w-[180px]\" size=\"sm\">\n *     <SelectTrigger>\n *       <SelectValue placeholder=\"Small (h-8)\" />\n *     </SelectTrigger>\n *     <SelectContent>\n *       <SelectItem value=\"apple\">Apple</SelectItem>\n *       <SelectItem value=\"banana\">Banana</SelectItem>\n *       <SelectItem value=\"cherry\">Cherry</SelectItem>\n *     </SelectContent>\n *   </Select>\n *   <Select class=\"w-[180px]\" size=\"default\">\n *     <SelectTrigger>\n *       <SelectValue placeholder=\"Default (h-9)\" />\n *     </SelectTrigger>\n *     <SelectContent>\n *       <SelectItem value=\"apple\">Apple</SelectItem>\n *       <SelectItem value=\"banana\">Banana</SelectItem>\n *       <SelectItem value=\"cherry\">Cherry</SelectItem>\n *     </SelectContent>\n *   </Select>\n *   <Select class=\"w-[180px]\" size=\"lg\">\n *     <SelectTrigger size=\"lg\">\n *       <SelectValue placeholder=\"Large (h-10)\" />\n *     </SelectTrigger>\n *     <SelectContent>\n *       <SelectItem value=\"apple\">Apple</SelectItem>\n *       <SelectItem value=\"banana\">Banana</SelectItem>\n *       <SelectItem value=\"cherry\">Cherry</SelectItem>\n *     </SelectContent>\n *   </Select>\n * </div>\n *\n * ### Disabled\n *\n * <Select disabled class=\"w-[200px]\">\n *   <SelectTrigger>\n *     <SelectValue placeholder=\"Disabled\" />\n *   </SelectTrigger>\n *   <SelectContent>\n *     <SelectItem value=\"apple\">Apple</SelectItem>\n *     <SelectItem value=\"banana\">Banana</SelectItem>\n *     <SelectItem value=\"cherry\">Cherry</SelectItem>\n *   </SelectContent>\n * </Select>\n *\n * ### With Disabled Items\n *\n * <Select class=\"w-[200px]\" placeholder=\"Choose...\">\n *   <SelectTrigger>\n *     <SelectValue placeholder=\"Choose...\" />\n *   </SelectTrigger>\n *   <SelectContent>\n *     <SelectItem value=\"available\">Available</SelectItem>\n *     <SelectItem value=\"unavailable\" disabled>Unavailable</SelectItem>\n *     <SelectItem value=\"another\">Another option</SelectItem>\n *   </SelectContent>\n * </Select>\n *\n * ### Popper Mode\n *\n * <div class=\"flex flex-wrap items-start gap-4\">\n *   <Select class=\"w-[160px]\">\n *     <SelectTrigger>\n *       <SelectValue placeholder=\"Bottom\" />\n *     </SelectTrigger>\n *     <SelectContent position=\"popper\" side=\"bottom\">\n *       <SelectItem value=\"option1\">Option 1</SelectItem>\n *       <SelectItem value=\"option2\">Option 2</SelectItem>\n *       <SelectItem value=\"option3\">Option 3</SelectItem>\n *     </SelectContent>\n *   </Select>\n *   <Select class=\"w-[160px]\">\n *     <SelectTrigger>\n *       <SelectValue placeholder=\"Top\" />\n *     </SelectTrigger>\n *     <SelectContent position=\"popper\" side=\"top\">\n *       <SelectItem value=\"option1\">Option 1</SelectItem>\n *       <SelectItem value=\"option2\">Option 2</SelectItem>\n *       <SelectItem value=\"option3\">Option 3</SelectItem>\n *     </SelectContent>\n *   </Select>\n * </div>\n */\n\nimport type { HTMLAttributes } from \"astro/types\";\nimport { cn } from \"@/lib/utils\";\n\ninterface Props extends HTMLAttributes<\"div\"> {\n  class?: string;\n  name?: string;\n  defaultValue?: string;\n  placeholder?: string;\n  disabled?: boolean;\n  required?: boolean;\n  size?: \"sm\" | \"default\" | \"lg\";\n}\n\nconst {\n  class: className = \"\",\n  name,\n  defaultValue,\n  placeholder,\n  disabled = false,\n  required = false,\n  size = \"default\",\n  ...rest\n} = Astro.props as Props;\n---\n\n<div\n  {...rest}\n  data-slot=\"select\"\n  data-name={name}\n  data-default-value={defaultValue}\n  data-placeholder={placeholder}\n  data-disabled={disabled ? \"\" : undefined}\n  data-required={required ? \"\" : undefined}\n  data-size={size}\n  class={cn(\"\", \"group/select relative inline-block\", className)}\n>\n  <slot />\n</div>\n\n<script>\n  import { createSelect } from \"@bejamas/ui/lib/select\";\n\n  document.querySelectorAll('[data-slot=\"select\"]').forEach((el) => {\n    createSelect(el);\n  });\n</script>\n",
      "type": "registry:ui"
    },
    {
      "path": "ui/select/SelectTrigger.astro",
      "content": "---\n// Generated from bejamas-juno style registry. Do not edit packages/ui/src/components/select/SelectTrigger.astro directly.\nimport type { HTMLAttributes } from \"astro/types\";\nimport { cn } from \"@/lib/utils\";\nimport SemanticIcon from \"../icon/SemanticIcon.astro\";\n\ninterface Props extends HTMLAttributes<\"button\"> {\n  class?: string;\n  size?: \"sm\" | \"default\" | \"lg\";\n}\n\nconst {\n  class: className = \"\",\n  size = \"default\",\n  ...rest\n} = Astro.props as Props;\n---\n\n<button\n  {...rest}\n  type=\"button\"\n  data-slot=\"select-trigger\"\n  data-size={size}\n  class={cn(\n    \"border-input data-placeholder:text-muted-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 gap-1.5 rounded-md border bg-transparent py-2 pr-2 pl-2.5 text-sm shadow-xs transition-[color,box-shadow] focus-visible:ring-3 aria-invalid:ring-3 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:flex *:data-[slot=select-value]:gap-1.5 [&_svg:not([class*='size-'])]:size-4 rounded-lg px-3\",\n    \"flex w-fit items-center justify-between whitespace-nowrap outline-none\",\n    \"disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50\",\n    \"*:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center\",\n    \"[&_svg]:pointer-events-none [&_svg]:shrink-0\",\n    className,\n  )}\n>\n  <slot />\n  <SemanticIcon\n    name=\"chevron-down\"\n    class=\"text-muted-foreground size-4 -mr-0.75 pointer-events-none\"\n    data-slot=\"select-icon\"\n  />\n</button>\n",
      "type": "registry:ui"
    },
    {
      "path": "ui/select/SelectValue.astro",
      "content": "---\n// Generated from bejamas-juno style registry. Do not edit packages/ui/src/components/select/SelectValue.astro directly.\nimport type { HTMLAttributes } from \"astro/types\";\nimport { cn } from \"@/lib/utils\";\n\ninterface Props extends HTMLAttributes<\"span\"> {\n  class?: string;\n  placeholder?: string;\n}\n\nconst {\n  class: className = \"\",\n  placeholder = \"\",\n  ...rest\n} = Astro.props as Props;\n---\n\n<span\n  {...rest}\n  data-slot=\"select-value\"\n  data-placeholder={placeholder}\n  class={cn(\"flex flex-1 text-left\", className)}\n>{placeholder}</span>\n",
      "type": "registry:ui"
    },
    {
      "path": "ui/select/SelectContent.astro",
      "content": "---\n// Generated from bejamas-juno style registry. Do not edit packages/ui/src/components/select/SelectContent.astro directly.\nimport type { HTMLAttributes } from \"astro/types\";\nimport { cn } from \"@/lib/utils\";\nimport { cva } from \"class-variance-authority\";\nimport SemanticIcon from \"../icon/SemanticIcon.astro\";\n\ninterface Props extends HTMLAttributes<\"div\"> {\n  class?: string;\n  size?: \"sm\" | \"default\" | \"lg\";\n  position?: \"item-aligned\" | \"popper\";\n  align?: \"start\" | \"center\" | \"end\";\n  alignOffset?: number;\n  side?: \"top\" | \"bottom\";\n  sideOffset?: number;\n}\n\nconst {\n  class: className = \"\",\n  size = \"default\",\n  position = \"item-aligned\",\n  align = \"center\",\n  alignOffset = 0,\n  side = \"bottom\",\n  sideOffset = 4,\n  ...rest\n} = Astro.props as Props;\n\nconst contentVariants = cva(\n  [\n    \"group/select-content cn-menu-target cn-menu-translucent relative isolate z-50\",\n    \"origin-(--transform-origin) overflow-x-hidden overflow-y-auto data-[align-trigger=true]:animate-none\",\n  ],\n  {\n    variants: {\n      position: {\n        \"item-aligned\": \"\",\n        popper: \"\",\n      },\n      side: {\n        top: \"\",\n        bottom: \"\",\n      },\n    },\n    defaultVariants: {\n      position: \"item-aligned\",\n      side: \"bottom\",\n    },\n  },\n);\n---\n\n<div\n  {...rest}\n  hidden\n  data-slot=\"select-content\"\n  data-size={size}\n  data-position={position}\n  data-align-trigger={position === \"item-aligned\"}\n  data-align={align}\n  data-align-offset={alignOffset}\n  data-side={side}\n  data-side-offset={sideOffset}\n  class={cn(\n    \"bg-popover text-popover-foreground ring-foreground/10 min-w-36 rounded-md shadow-md ring-1 rounded-lg\",\n    contentVariants({ position, side }),\n    \"max-h-(--available-height) w-(--anchor-width)\",\n    className,\n  )}\n>\n  <div\n    data-slot=\"select-scroll-up-button\"\n    class=\"bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4 top-0 w-full\"\n    hidden\n  >\n    <slot name=\"scroll-up\"\n      ><SemanticIcon name=\"chevron-up\" class=\"size-4\" /></slot\n    >\n  </div>\n  <div\n    data-slot=\"select-viewport\"\n    data-position={position}\n    class=\"max-h-[var(--select-content-available-height,300px)] overflow-x-hidden overflow-y-auto\"\n  >\n    <slot />\n  </div>\n  <div\n    data-slot=\"select-scroll-down-button\"\n    class=\"bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4 bottom-0 w-full\"\n    hidden\n  >\n    <slot name=\"scroll-down\"\n      ><SemanticIcon name=\"chevron-down\" class=\"size-4\" /></slot\n    >\n  </div>\n</div>\n",
      "type": "registry:ui"
    },
    {
      "path": "ui/select/SelectItem.astro",
      "content": "---\n// Generated from bejamas-juno style registry. Do not edit packages/ui/src/components/select/SelectItem.astro directly.\nimport type { HTMLAttributes } from \"astro/types\";\nimport { cn } from \"@/lib/utils\";\nimport SemanticIcon from \"../icon/SemanticIcon.astro\";\n\ninterface Props extends HTMLAttributes<\"div\"> {\n  value: string;\n  disabled?: boolean;\n  class?: string;\n}\n\nconst {\n  value,\n  disabled = false,\n  class: className = \"\",\n  ...rest\n} = Astro.props as Props;\n---\n\n<div\n  {...rest}\n  role=\"option\"\n  tabindex={disabled ? -1 : 0}\n  data-slot=\"select-item\"\n  data-value={value}\n  data-disabled={disabled ? \"\" : undefined}\n  class={cn(\n    \"focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2\",\n    \"group/item relative flex w-full cursor-default items-center outline-hidden select-none\",\n    \"data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n    \"[&_svg]:pointer-events-none [&_svg]:shrink-0\",\n    className,\n  )}\n>\n  <span\n    data-slot=\"select-item-text\"\n    class=\"flex flex-1 gap-2 shrink-0 whitespace-nowrap\"\n    ><slot /></span\n  >\n\n  <span\n    data-slot=\"select-item-indicator\"\n    class=\"pointer-events-none absolute right-2 flex size-4 items-center justify-center\"\n  >\n    <span class=\"hidden items-center justify-center group-data-[selected]/item:inline-flex\">\n      <SemanticIcon name=\"check\" class=\"size-4\" />\n    </span>\n  </span>\n</div>\n",
      "type": "registry:ui"
    },
    {
      "path": "ui/select/SelectGroup.astro",
      "content": "---\n// Generated from bejamas-juno style registry. Do not edit packages/ui/src/components/select/SelectGroup.astro directly.\nimport type { HTMLAttributes } from \"astro/types\";\nimport { cn } from \"@/lib/utils\";\n\ninterface Props extends HTMLAttributes<\"div\"> {\n  class?: string;\n}\n\nconst { class: className = \"\", ...rest } = Astro.props as Props;\n---\n\n<div\n  {...rest}\n  role=\"group\"\n  data-slot=\"select-group\"\n  class={cn(\"scroll-my-1 p-1\", className)}\n>\n  <slot />\n</div>\n",
      "type": "registry:ui"
    },
    {
      "path": "ui/select/SelectLabel.astro",
      "content": "---\n// Generated from bejamas-juno style registry. Do not edit packages/ui/src/components/select/SelectLabel.astro directly.\nimport type { HTMLAttributes } from \"astro/types\";\nimport { cn } from \"@/lib/utils\";\n\ninterface Props extends HTMLAttributes<\"div\"> {\n  class?: string;\n}\n\nconst { class: className = \"\", ...rest } = Astro.props as Props;\n---\n\n<div\n  {...rest}\n  data-slot=\"select-label\"\n  class={cn(\"text-muted-foreground px-2 py-1.5 text-xs\", className)}\n>\n  <slot />\n</div>\n",
      "type": "registry:ui"
    },
    {
      "path": "ui/select/SelectSeparator.astro",
      "content": "---\n// Generated from bejamas-juno style registry. Do not edit packages/ui/src/components/select/SelectSeparator.astro directly.\nimport type { HTMLAttributes } from \"astro/types\";\nimport { cn } from \"@/lib/utils\";\n\ninterface Props extends HTMLAttributes<\"div\"> {\n  class?: string;\n}\n\nconst { class: className = \"\", ...rest } = Astro.props as Props;\n---\n\n<div\n  {...rest}\n  role=\"separator\"\n  data-slot=\"select-separator\"\n  class={cn(\"bg-border -mx-1 my-1 h-px pointer-events-none\", className)}\n/>\n",
      "type": "registry:ui"
    },
    {
      "path": "ui/select/index.ts",
      "content": "// Generated from bejamas-juno style registry. Do not edit packages/ui/src/components/select/index.ts directly.\nexport { default as Select } from \"./Select.astro\";\nexport { default as SelectTrigger } from \"./SelectTrigger.astro\";\nexport { default as SelectValue } from \"./SelectValue.astro\";\nexport { default as SelectContent } from \"./SelectContent.astro\";\nexport { default as SelectItem } from \"./SelectItem.astro\";\nexport { default as SelectGroup } from \"./SelectGroup.astro\";\nexport { default as SelectLabel } from \"./SelectLabel.astro\";\nexport { default as SelectSeparator } from \"./SelectSeparator.astro\";\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}