{
  "name": "native-select",
  "type": "registry:ui",
  "dependencies": [
    "@vueuse/core",
    "reka-ui"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "ui/native-select/NativeSelect.vue",
      "type": "registry:ui",
      "content": "<script setup lang=\"ts\">\nimport type { AcceptableValue } from \"reka-ui\"\nimport type { HTMLAttributes } from \"vue\"\nimport { reactiveOmit, useVModel } from \"@vueuse/core\"\nimport { cn } from \"@/lib/utils\"\nimport { IconPlaceholder } from \"@/components/docs/icon-placeholder\"\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = defineProps<{\n  modelValue?: AcceptableValue | AcceptableValue[]\n  class?: HTMLAttributes[\"class\"]\n  size?: \"sm\" | \"default\"\n}>()\n\nconst emit = defineEmits<{\n  \"update:modelValue\": AcceptableValue\n}>()\n\nconst modelValue = useVModel(props, \"modelValue\", emit, {\n  passive: true,\n  defaultValue: \"\",\n})\n\nconst delegatedProps = reactiveOmit(props, \"class\", \"size\")\n</script>\n\n<template>\n  <div\n    :class=\"cn('cn-native-select-wrapper group/native-select relative w-fit has-[select:disabled]:opacity-50', props.class)\"\n    data-slot=\"native-select-wrapper\"\n    :data-size=\"props.size ?? 'default'\"\n  >\n    <select\n      v-bind=\"{ ...$attrs, ...delegatedProps }\"\n      v-model=\"modelValue\"\n      data-slot=\"native-select\"\n      class=\"cn-native-select outline-none disabled:pointer-events-none disabled:cursor-not-allowed\"\n      :data-size=\"props.size ?? 'default'\"\n    >\n      <slot />\n    </select>\n    <IconPlaceholder\n      lucide=\"ChevronDownIcon\"\n      tabler=\"IconSelector\"\n      hugeicons=\"UnfoldMoreIcon\"\n      phosphor=\"CaretDownIcon\"\n      remixicon=\"RiArrowDownSLine\"\n      class=\"cn-native-select-icon pointer-events-none absolute select-none\"\n      aria-hidden=\"true\"\n      data-slot=\"native-select-icon\"\n    />\n  </div>\n</template>\n"
    },
    {
      "path": "ui/native-select/NativeSelectOptGroup.vue",
      "type": "registry:ui",
      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from \"vue\"\nimport { cn } from \"@/lib/utils\"\n\nconst props = defineProps<{ class?: HTMLAttributes[\"class\"] }>()\n</script>\n\n<template>\n  <optgroup data-slot=\"native-select-optgroup\" :class=\"cn('bg-[Canvas] text-[CanvasText]', props.class)\">\n    <slot />\n  </optgroup>\n</template>\n"
    },
    {
      "path": "ui/native-select/NativeSelectOption.vue",
      "type": "registry:ui",
      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from \"vue\"\nimport { cn } from \"@/lib/utils\"\n\nconst props = defineProps<{ class?: HTMLAttributes[\"class\"] }>()\n</script>\n\n<template>\n  <option data-slot=\"native-select-option\" :class=\"cn('bg-[Canvas] text-[CanvasText]', props.class)\">\n    <slot />\n  </option>\n</template>\n"
    },
    {
      "path": "ui/native-select/index.ts",
      "type": "registry:ui",
      "content": "export { default as NativeSelect } from \"./NativeSelect.vue\"\nexport { default as NativeSelectOptGroup } from \"./NativeSelectOptGroup.vue\"\nexport { default as NativeSelectOption } from \"./NativeSelectOption.vue\"\n"
    }
  ]
}