@brumaombra/ui-vintage 0.6.8 → 0.7.3

package/src/components/ui/dialog/DialogContent.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import type { DialogContentEmits, DialogContentProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import {
+  DialogClose,
+  DialogContent,
+  DialogPortal,
+  useForwardPropsEmits,
+} from "reka-ui"
+import { cn } from "../../../lib/utils"
+import { Button } from "../button"
+import DialogOverlay from "./DialogOverlay.vue"
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<DialogContentProps & {
+  class?: HTMLAttributes["class"]
+  showCloseButton?: boolean
+}>(), {
+  showCloseButton: false,
+})
+const emits = defineEmits<DialogContentEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <DialogPortal>
+    <DialogOverlay />
+    <DialogContent
+      data-slot="dialog-content"
+      v-bind="{ ...$attrs, ...forwarded }"
+      :class="
+        cn(
+          'bg-card text-card-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded border border-border p-6 outline-none duration-200 sm:max-w-[425px]',
+          props.class,
+        )"
+    >
+      <slot />
+
+      <DialogClose v-if="props.showCloseButton" data-slot="dialog-close" as-child>
+        <Button variant="ghost" size="icon-sm" class="absolute top-4 right-4 p-0.5">
+          <span aria-hidden="true">X</span>
+          <span class="sr-only">Close</span>
+        </Button>
+      </DialogClose>
+    </DialogContent>
+  </DialogPortal>
+</template>

package/src/components/ui/dialog/DialogDescription.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { DialogDescriptionProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { DialogDescription, useForwardProps } from "reka-ui"
+import { cn } from "../../../lib/utils"
+
+const props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <DialogDescription data-slot="dialog-description" v-bind="forwardedProps" :class="cn('text-xs sm:text-sm leading-6 text-muted-foreground', props.class)">
+    <slot />
+  </DialogDescription>
+</template>

package/src/components/ui/dialog/DialogFooter.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "../../../lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <div
+    data-slot="dialog-footer"
+    :class="cn('flex flex-col-reverse gap-2 sm:flex-row sm:justify-end', props.class)"
+  >
+    <slot />
+  </div>
+</template>
+

package/src/components/ui/dialog/DialogHeader.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "../../../lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <div data-slot="dialog-header" :class="cn('flex flex-col gap-1.5', props.class)">
+    <slot />
+  </div>
+</template>

package/src/components/ui/dialog/DialogOverlay.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { DialogOverlayProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { DialogOverlay } from "reka-ui"
+import { cn } from "../../../lib/utils"
+
+const props = defineProps<DialogOverlayProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <DialogOverlay data-slot="dialog-overlay" v-bind="delegatedProps" :class="cn('fixed inset-0 isolate z-50 bg-black/45 backdrop-blur-[2px] transition-[opacity,backdrop-filter] ease-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0', props.class)">
+    <slot />
+  </DialogOverlay>
+</template>

package/src/components/ui/dialog/DialogScrollContent.vue

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import type { DialogContentEmits, DialogContentProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import {
+  DialogClose,
+  DialogContent,
+  DialogOverlay,
+  DialogPortal,
+  useForwardPropsEmits,
+} from "reka-ui"
+import { cn } from "../../../lib/utils"
+import { Button } from "../button"
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<DialogContentProps & {
+  class?: HTMLAttributes["class"]
+  showCloseButton?: boolean
+}>(), {
+  showCloseButton: false,
+})
+const emits = defineEmits<DialogContentEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <DialogPortal>
+    <DialogOverlay class="fixed inset-0 isolate z-50 grid place-items-center overflow-y-auto bg-black/45 backdrop-blur-[2px] transition-[opacity,backdrop-filter] ease-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0">
+      <DialogContent :class="cn(
+        'relative z-50 my-6 grid w-full max-w-[calc(100%-2rem)] gap-4 rounded border border-border bg-card p-6 text-card-foreground outline-none duration-200 sm:max-w-[425px]',
+        props.class,
+      )
+        " v-bind="{ ...$attrs, ...forwarded }" @pointer-down-outside="(event) => {
+          const originalEvent = event.detail.originalEvent;
+          const target = originalEvent.target as HTMLElement;
+          if (originalEvent.offsetX > target.clientWidth || originalEvent.offsetY > target.clientHeight) {
+            event.preventDefault();
+          }
+        }">
+        <slot />
+
+        <DialogClose v-if="props.showCloseButton" data-slot="dialog-close" as-child>
+          <Button variant="ghost" size="icon-sm" class="absolute top-4 right-4 p-0.5">
+            <span aria-hidden="true">X</span>
+            <span class="sr-only">Close</span>
+          </Button>
+        </DialogClose>
+      </DialogContent>
+    </DialogOverlay>
+  </DialogPortal>
+</template>

package/src/components/ui/dialog/DialogTitle.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { DialogTitleProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { DialogTitle, useForwardProps } from "reka-ui"
+import { cn } from "../../../lib/utils"
+
+const props = defineProps<DialogTitleProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <DialogTitle data-slot="dialog-title" v-bind="forwardedProps" :class="cn('text-base font-semibold', props.class)">
+    <slot />
+  </DialogTitle>
+</template>

package/src/components/ui/dialog/DialogTrigger.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { DialogTriggerProps } from "reka-ui"
+import { DialogTrigger } from "reka-ui"
+
+const props = defineProps<DialogTriggerProps>()
+</script>
+
+<template>
+  <DialogTrigger data-slot="dialog-trigger" v-bind="props">
+    <slot />
+  </DialogTrigger>
+</template>

package/src/components/ui/dialog/index.ts

@@ -0,0 +1,10 @@
+export { default as Dialog } from "./Dialog.vue"
+export { default as DialogClose } from "./DialogClose.vue"
+export { default as DialogContent } from "./DialogContent.vue"
+export { default as DialogDescription } from "./DialogDescription.vue"
+export { default as DialogFooter } from "./DialogFooter.vue"
+export { default as DialogHeader } from "./DialogHeader.vue"
+export { default as DialogOverlay } from "./DialogOverlay.vue"
+export { default as DialogScrollContent } from "./DialogScrollContent.vue"
+export { default as DialogTitle } from "./DialogTitle.vue"
+export { default as DialogTrigger } from "./DialogTrigger.vue"

package/src/components/ui/field/Field.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import type { FieldVariants } from "."
+import { cn } from "../../../lib/utils"
+import { fieldVariants } from "."
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+  orientation?: FieldVariants["orientation"]
+}>()
+</script>
+
+<template>
+  <div role="group" data-slot="field" :data-orientation="orientation" :class="cn(
+    fieldVariants({ orientation }),
+    props.class,
+  )">
+    <slot />
+  </div>
+</template>

package/src/components/ui/field/FieldContent.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "../../../lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <div data-slot="field-content" :class="cn(
+    'group/field-content flex flex-1 flex-col gap-1.5 leading-snug',
+    props.class,
+  )">
+    <slot />
+  </div>
+</template>

package/src/components/ui/field/FieldDescription.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "../../../lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <p data-slot="field-description" :class="cn(
+    '!text-xs sm:!text-xs leading-5 font-normal text-(--text-secondary-light) dark:text-(--text-secondary-dark) group-has-[[data-orientation=horizontal]]/field:text-balance',
+    'last:mt-0 nth-last-2:-mt-1 [[data-variant=legend]+&]:-mt-1.5',
+    '[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4',
+    props.class,
+  )">
+    <slot />
+  </p>
+</template>

package/src/components/ui/field/FieldError.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { computed } from "vue"
+import { cn } from "../../../lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+  errors?: Array<string | { message: string | undefined } | undefined>
+}>()
+
+const content = computed(() => {
+  if (!props.errors || props.errors.length === 0)
+    return null
+
+  const uniqueErrors = [
+    ...new Map(
+      props.errors
+        .filter(Boolean)
+        .map((error) => {
+          const message = typeof error === "string" ? error : error?.message
+          return [message, error]
+        }),
+    ).values(),
+  ]
+
+  if (uniqueErrors.length === 1 && uniqueErrors[0]) {
+    return typeof uniqueErrors[0] === "string" ? uniqueErrors[0] : uniqueErrors[0].message
+  }
+
+  return uniqueErrors.map(error => typeof error === "string" ? error : error?.message)
+})
+</script>
+
+<template>
+  <div v-if="$slots.default || content" role="alert" data-slot="field-error" :class="cn('text-destructive text-xs font-normal', props.class)">
+    <slot v-if="$slots.default" />
+
+    <template v-else-if="typeof content === 'string'">
+      {{ content }}
+    </template>
+
+    <ul v-else-if="Array.isArray(content)" class="ml-4 flex list-disc flex-col gap-1">
+      <li v-for="(error, index) in content" :key="index">
+        {{ error }}
+      </li>
+    </ul>
+  </div>
+</template>

package/src/components/ui/field/FieldGroup.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "../../../lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <div data-slot="field-group" :class="cn(
+    'group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4',
+    props.class,
+  )">
+    <slot />
+  </div>
+</template>

package/src/components/ui/field/FieldLabel.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "../../../lib/utils"
+import { Label } from '../label'
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <Label data-slot="field-label" :class="cn(
+    'group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50',
+    'has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-4',
+    'has-data-[state=checked]:bg-primary/5 has-data-[state=checked]:border-primary dark:has-data-[state=checked]:bg-primary/10',
+    props.class,
+  )">
+    <slot />
+  </Label>
+</template>

package/src/components/ui/field/FieldLegend.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "../../../lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+  variant?: "legend" | "label"
+}>()
+</script>
+
+<template>
+  <legend data-slot="field-legend" :data-variant="variant" :class="cn(
+    'mb-3 font-semibold',
+    'data-[variant=legend]:text-base',
+    'data-[variant=label]:text-sm',
+    props.class,
+  )">
+    <slot />
+  </legend>
+</template>

package/src/components/ui/field/FieldSeparator.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "../../../lib/utils"
+import { Separator } from '../separator'
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <div data-slot="field-separator" :data-content="!!$slots.default" :class="cn(
+    'relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2',
+    props.class,
+  )">
+    <Separator class="absolute inset-0 top-1/2" />
+    <span v-if="$slots.default" class="bg-background text-muted-foreground relative mx-auto block w-fit px-2" data-slot="field-separator-content">
+      <slot />
+    </span>
+  </div>
+</template>

package/src/components/ui/field/FieldSet.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "../../../lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <fieldset data-slot="field-set" :class="cn(
+    'flex flex-col gap-6',
+    'has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3',
+    props.class,
+  )">
+    <slot />
+  </fieldset>
+</template>

package/src/components/ui/field/FieldTitle.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "../../../lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <div data-slot="field-label" :class="cn(
+    'flex w-fit items-center gap-2 text-sm leading-snug font-semibold group-data-[disabled=true]/field:opacity-50',
+    props.class,
+  )">
+    <slot />
+  </div>
+</template>

package/src/components/ui/field/index.ts

@@ -0,0 +1,41 @@
+import type { ClassProp } from "class-variance-authority/types"
+import { cva } from "class-variance-authority"
+
+export type FieldVariants = {
+  orientation?: "vertical" | "horizontal" | "responsive" | null | undefined
+}
+
+export const fieldVariants: (props?: FieldVariants & ClassProp) => string = cva(
+  "group/field flex w-full gap-3 data-[invalid=true]:text-destructive",
+  {
+    variants: {
+      orientation: {
+        vertical: ["flex-col [&>*]:w-full [&>.sr-only]:w-auto"],
+        horizontal: [
+          "flex-row items-center",
+          "[&>[data-slot=field-label]]:flex-auto",
+          "has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
+        ],
+        responsive: [
+          "flex-col [&>*]:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:[&>*]:w-auto",
+          "@md/field-group:[&>[data-slot=field-label]]:flex-auto",
+          "@md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
+        ],
+      },
+    },
+    defaultVariants: {
+      orientation: "vertical",
+    },
+  },
+)
+
+export { default as Field } from "./Field.vue"
+export { default as FieldContent } from "./FieldContent.vue"
+export { default as FieldDescription } from "./FieldDescription.vue"
+export { default as FieldError } from "./FieldError.vue"
+export { default as FieldGroup } from "./FieldGroup.vue"
+export { default as FieldLabel } from "./FieldLabel.vue"
+export { default as FieldLegend } from "./FieldLegend.vue"
+export { default as FieldSeparator } from "./FieldSeparator.vue"
+export { default as FieldSet } from "./FieldSet.vue"
+export { default as FieldTitle } from "./FieldTitle.vue"

package/src/components/ui/input/Input.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { useVModel } from "@vueuse/core"
+import { cn } from "../../../lib/utils"
+
+const props = defineProps<{
+  defaultValue?: string | number
+  modelValue?: string | number
+  class?: HTMLAttributes["class"]
+}>()
+
+const emits = defineEmits<{
+  (e: "update:modelValue", payload: string | number): void
+}>()
+
+const modelValue = useVModel(props, "modelValue", emits, {
+  passive: true,
+  defaultValue: props.defaultValue,
+})
+</script>
+
+<template>
+  <input v-model="modelValue" data-slot="input" :class="cn(
+    'file:text-foreground selection:bg-primary selection:text-primary-foreground h-[52px] w-full min-w-0 rounded border border-(--border-light) bg-(--button-secondary-light) px-4 py-3 text-xs font-semibold text-(--text-primary-light) outline-none transition-all duration-300 ease-in-out placeholder:text-(--text-secondary-light) placeholder:opacity-60 file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-semibold disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-60 dark:border-(--border-dark) dark:bg-(--button-secondary-dark) dark:text-(--text-primary-dark) dark:placeholder:text-(--text-secondary-dark) sm:text-sm',
+    'focus-visible:border-(--border-hover-light) focus-visible:ring-0 dark:focus-visible:border-(--border-hover-dark)',
+    'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
+    props.class,
+  )">
+</template>

package/src/components/ui/input/index.ts

@@ -0,0 +1 @@
+export { default as Input } from "./Input.vue"

package/src/components/ui/label/Label.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { LabelProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { Label } from "reka-ui"
+import { cn } from "../../../lib/utils"
+
+const props = defineProps<LabelProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <Label data-slot="label" v-bind="delegatedProps" :class="cn(
+    'flex items-center gap-2 text-sm leading-none font-semibold select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50',
+    props.class,
+  )
+    ">
+    <slot />
+  </Label>
+</template>

package/src/components/ui/label/index.ts

@@ -0,0 +1 @@
+export { default as Label } from "./Label.vue"

package/src/components/ui/native-select/NativeSelect.vue

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import type { AcceptableValue } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit, useVModel } from "@vueuse/core"
+import { ArrowDown01Icon } from "@hugeicons/core-free-icons"
+import { HugeiconsIcon } from "@hugeicons/vue"
+import { cn } from "../../../lib/utils"
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = defineProps<{ modelValue?: AcceptableValue | AcceptableValue[], class?: HTMLAttributes["class"] }>()
+
+const emit = defineEmits<{
+  "update:modelValue": AcceptableValue
+}>()
+
+const modelValue = useVModel(props, "modelValue", emit, {
+  passive: true,
+  defaultValue: "",
+})
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <div
+    class="group/native-select relative w-fit has-[select:disabled]:opacity-50"
+    data-slot="native-select-wrapper"
+  >
+    <select
+      v-bind="{ ...$attrs, ...delegatedProps }"
+      v-model="modelValue"
+      data-slot="native-select"
+      :class="cn(
+        'border-input placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 dark:hover:bg-input/50 h-9 w-full min-w-0 appearance-none rounded-md border bg-transparent px-3 py-2 pr-9 text-sm shadow-xs transition-[color,box-shadow] outline-none disabled:pointer-events-none disabled:cursor-not-allowed',
+        'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
+        'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
+        props.class,
+      )"
+    >
+      <slot />
+    </select>
+    <HugeiconsIcon
+      :icon="ArrowDown01Icon"
+      class="text-muted-foreground pointer-events-none absolute top-1/2 right-3.5 size-4 -translate-y-1/2 opacity-50 select-none"
+      aria-hidden="true"
+      data-slot="native-select-icon"
+    />
+  </div>
+</template>

package/src/components/ui/native-select/NativeSelectOptGroup.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "../../../lib/utils"
+
+const props = defineProps<{ class?: HTMLAttributes["class"] }>()
+</script>
+
+<template>
+  <optgroup data-slot="native-select-optgroup" :class="cn('bg-popover text-popover-foreground', props.class)">
+    <slot />
+  </optgroup>
+</template>

package/src/components/ui/native-select/NativeSelectOption.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "../../../lib/utils"
+
+const props = defineProps<{ class?: HTMLAttributes["class"] }>()
+</script>
+
+<template>
+  <option data-slot="native-select-option" :class="cn('bg-popover text-popover-foreground', props.class)">
+    <slot />
+  </option>
+</template>

package/src/components/ui/native-select/index.ts

@@ -0,0 +1,3 @@
+export { default as NativeSelect } from "./NativeSelect.vue"
+export { default as NativeSelectOptGroup } from "./NativeSelectOptGroup.vue"
+export { default as NativeSelectOption } from "./NativeSelectOption.vue"