Native Select

1import { NativeSelect, NativeSelectOption, NativeSelectOptGroup } from "@/components/ui/native-select";
2
3<NativeSelect />

1"use client";
2
3import { ark } from "@ark-ui/react/factory";
4import { Field as ArkField } from "@ark-ui/react/field";
5import { ChevronsUpDownIcon } from "lucide-react";
6import type React from "react";
7import { tv, type VariantProps } from "tailwind-variants";
8import { cn } from "@/lib/utils";
9
10export const nativeSelectVariants = tv({
11  base: [
12    "appearance-none",
13    "w-full min-w-0",
14    "ps-2.5 pe-8",
15    "select-none text-sm",
16    "bg-transparent dark:bg-input/30",
17    "rounded-lg border border-input shadow-xs/5",
18    "transition-colors",
19    "outline-none",
20    "[&:has(option[value='']:checked)]:text-muted-foreground/64",
21    "disabled:pointer-events-none disabled:cursor-not-allowed",
22    "focus-visible:border-primary focus-visible:ring-[3px] focus-visible:ring-ring/32",
23    "aria-invalid:border-destructive aria-invalid:ring-[3px] aria-invalid:ring-destructive/24",
24    "dark:aria-invalid:border-destructive-foreground dark:aria-invalid:text-destructive-foreground dark:aria-invalid:ring-destructive-foreground/20",
25    "motion-reduce:transition-none!",
26  ],
27  variants: {
28    size: {