@vela-ui/react/dist/chunk-B7CFYMMX.mjs

Vela UI React components

import {
  cn
} from "./chunk-OCN72JL6.mjs";
import {
  ChevronDownIcon
} from "./chunk-R5BNQKXD.mjs";

// src/components/native-select.tsx
import { tv } from "tailwind-variants";
import { jsx, jsxs } from "react/jsx-runtime";
var selectVariants = tv({
  base: [
    "border-input dark:bg-input/30 dark:hover:bg-input/50 w-full appearance-none rounded-md border bg-transparent px-3 pr-9 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow]",
    "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] focus-visible:outline-none",
    "disabled:cursor-not-allowed disabled:opacity-50",
    "aria-invalid:ring-destructive/20 aria-invalid:dark:ring-destructive/40 aria-invalid:border-destructive"
  ],
  variants: {
    size: {
      xs: "h-8",
      sm: "h-9",
      md: "h-10",
      lg: "h-11"
    }
  },
  defaultVariants: {
    size: "md"
  }
});
function NativeSelect({
  className,
  wrapperClassName,
  placeholder,
  size = "md",
  ...props
}) {
  return /* @__PURE__ */ jsxs("div", { className: cn("relative flex h-fit w-full", wrapperClassName), children: [
    /* @__PURE__ */ jsxs("select", { className: selectVariants({ className, size }), ...props, children: [
      placeholder && /* @__PURE__ */ jsx("option", { value: "", children: placeholder }),
      props.children
    ] }),
    /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute top-1/2 right-3 -translate-y-1/2", children: /* @__PURE__ */ jsx(
      ChevronDownIcon,
      {
        className: cn("text-muted-foreground size-4 opacity-50", {
          "size-3.5": size === "xs",
          "size-5": size === "lg"
        })
      }
    ) })
  ] });
}

export {
  NativeSelect
};