{
  "name": "native-select",
  "title": "Native Select",
  "description": "Kura Native Select component source.",
  "type": "ui",
  "add": "when-added",
  "files": [
    {
      "type": "ui",
      "role": "file",
      "content": "import Root from './native-select.svelte';\nimport Option from './native-select-option.svelte';\nimport OptGroup from './native-select-opt-group.svelte';\n\nexport {\n  Root,\n  Option,\n  OptGroup,\n  Root as NativeSelect,\n  Option as NativeSelectOption,\n  OptGroup as NativeSelectOptGroup\n};\n",
      "path": "native-select/index.ts",
      "_imports_": [
        {
          "import": "./native-select.svelte",
          "item": "native-select",
          "file": {
            "type": "ui",
            "path": "native-select/native-select.svelte"
          },
          "meta": {}
        },
        {
          "import": "./native-select-option.svelte",
          "item": "native-select",
          "file": {
            "type": "ui",
            "path": "native-select/native-select-option.svelte"
          },
          "meta": {}
        },
        {
          "import": "./native-select-opt-group.svelte",
          "item": "native-select",
          "file": {
            "type": "ui",
            "path": "native-select/native-select-opt-group.svelte"
          },
          "meta": {}
        }
      ],
      "registryDependencies": [],
      "dependencies": [],
      "devDependencies": []
    },
    {
      "type": "ui",
      "role": "file",
      "content": "<script lang=\"ts\">\n  import type { HTMLOptgroupAttributes } from 'svelte/elements';\n  import { cn, type WithElementRef } from '$lib/utils.js';\n\n  let {\n    ref = $bindable(null),\n    class: className,\n    children,\n    ...restProps\n  }: WithElementRef<HTMLOptgroupAttributes> = $props();\n</script>\n\n<optgroup\n  bind:this={ref}\n  data-slot=\"native-select-opt-group\"\n  class={cn('bg-muted text-muted-foreground', className)}\n  {...restProps}\n>\n  {@render children?.()}\n</optgroup>\n",
      "path": "native-select/native-select-opt-group.svelte",
      "_imports_": [
        {
          "import": "$lib/utils.js",
          "item": "utils",
          "file": {
            "type": "lib",
            "path": "utils.ts"
          },
          "meta": {}
        }
      ],
      "registryDependencies": [],
      "dependencies": [],
      "devDependencies": []
    },
    {
      "type": "ui",
      "role": "file",
      "content": "<script lang=\"ts\">\n  import type { HTMLOptionAttributes } from 'svelte/elements';\n  import { cn, type WithElementRef } from '$lib/utils.js';\n\n  let {\n    ref = $bindable(null),\n    class: className,\n    children,\n    ...restProps\n  }: WithElementRef<HTMLOptionAttributes> = $props();\n</script>\n\n<option\n  bind:this={ref}\n  data-slot=\"native-select-option\"\n  class={cn('bg-muted text-foreground', className)}\n  {...restProps}\n>\n  {@render children?.()}\n</option>\n",
      "path": "native-select/native-select-option.svelte",
      "_imports_": [
        {
          "import": "$lib/utils.js",
          "item": "utils",
          "file": {
            "type": "lib",
            "path": "utils.ts"
          },
          "meta": {}
        }
      ],
      "registryDependencies": [],
      "dependencies": [],
      "devDependencies": []
    },
    {
      "type": "ui",
      "role": "file",
      "content": "<script lang=\"ts\">\n  import { cn, type WithElementRef } from '$lib/utils.js';\n  import type { HTMLSelectAttributes } from 'svelte/elements';\n  import CaretDownIcon from 'phosphor-svelte/lib/CaretDownIcon';\n\n  type NativeSelectProps = Omit<WithElementRef<HTMLSelectAttributes>, 'size'> & {\n    size?: 'sm' | 'default';\n  };\n\n  let {\n    ref = $bindable(null),\n    value = $bindable(),\n    class: className,\n    size = 'default',\n    children,\n    ...restProps\n  }: NativeSelectProps = $props();\n</script>\n\n<div\n  class={cn(\n    'cn-native-select-wrapper group/native-select relative w-fit has-[select:disabled]:opacity-50',\n    className\n  )}\n  data-slot=\"native-select-wrapper\"\n  data-size={size}\n>\n  <select\n    bind:value\n    bind:this={ref}\n    data-slot=\"native-select\"\n    data-size={size}\n    class=\"border-border bg-muted text-foreground placeholder:text-muted-foreground/50 selection:bg-primary selection:text-primary-foreground focus-visible:border-ring focus-visible:ring-1 focus-visible:ring-ring/25 aria-invalid:border-destructive aria-invalid:ring-1 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 h-8 w-full min-w-0 appearance-none rounded-control border py-1 pr-8 pl-3 text-sm transition-[color,border-color,box-shadow] select-none data-[size=sm]:h-7 outline-none disabled:pointer-events-none disabled:cursor-not-allowed\"\n    {...restProps}\n  >\n    {@render children?.()}\n  </select>\n  <CaretDownIcon\n    class=\"text-muted-foreground/50 top-1/2 right-3 size-3.5 -translate-y-1/2 pointer-events-none absolute select-none\"\n    aria-hidden\n    data-slot=\"native-select-icon\"\n  />\n</div>\n",
      "path": "native-select/native-select.svelte",
      "_imports_": [
        {
          "import": "$lib/utils.js",
          "item": "utils",
          "file": {
            "type": "lib",
            "path": "utils.ts"
          },
          "meta": {}
        }
      ],
      "registryDependencies": [],
      "dependencies": [],
      "devDependencies": []
    }
  ],
  "registryDependencies": [
    "styles",
    "utils"
  ],
  "dependencies": [
    {
      "ecosystem": "js",
      "name": "phosphor-svelte",
      "version": "^3.1.0"
    }
  ],
  "devDependencies": []
}