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

Vela UI React components

import {
  Popover
} from "./chunk-MPQ6RJKJ.mjs";
import {
  DropdownDescription,
  DropdownItem,
  DropdownLabel,
  DropdownSection,
  DropdownSeparator
} from "./chunk-2KYD4PYX.mjs";
import {
  Description,
  FieldError,
  Label
} from "./chunk-FFLNGARZ.mjs";
import {
  cn,
  composeTailwindRenderProps
} from "./chunk-OCN72JL6.mjs";
import {
  ChevronDownIcon
} from "./chunk-H772AAAW.mjs";
import {
  focusRing
} from "./chunk-2FWUIDJB.mjs";

// src/components/select.tsx
import {
  Button as AriaButton,
  ListBox as AriaListBox,
  Select as AriaSelect,
  SelectValue as AriaSelectValue,
  composeRenderProps
} from "react-aria-components";
import { tv } from "tailwind-variants";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
var selectTriggerVariants = tv({
  extend: focusRing,
  base: "border-input [&_svg:not([class*='text-'])]:text-muted-foreground dark:bg-input/30 dark:hover:bg-input/50 group-data-[invalid]:ring-destructive/20 group-data-[invalid]:dark:ring-destructive/40 group-data-[invalid]:border-destructive flex w-full items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] [&_svg]:pointer-events-none [&_svg]:shrink-0",
  variants: {
    size: {
      xs: "h-8 [&_svg:not([class*='size-'])]:size-3.5",
      sm: "h-9 [&_svg:not([class*='size-'])]:size-4",
      md: "h-10 [&_svg:not([class*='size-'])]:size-4",
      lg: "h-11 [&_svg:not([class*='size-'])]:size-5"
    },
    isDisabled: {
      true: "cursor-not-allowed opacity-50"
    }
  },
  defaultVariants: {
    size: "md"
  }
});
function Select({
  label,
  description,
  errorMessage,
  className,
  children,
  ...props
}) {
  return /* @__PURE__ */ jsx(
    AriaSelect,
    {
      "data-slot": "select",
      ...props,
      className: composeTailwindRenderProps(className, "group flex w-full flex-col gap-2"),
      children: composeRenderProps(children, (children2) => /* @__PURE__ */ jsxs(Fragment, { children: [
        label && /* @__PURE__ */ jsx(Label, { children: label }),
        children2,
        description && /* @__PURE__ */ jsx(Description, { children: description }),
        /* @__PURE__ */ jsx(FieldError, { children: errorMessage })
      ] }))
    }
  );
}
function SelectTrigger({ className, size, children, ...props }) {
  return /* @__PURE__ */ jsx(
    AriaButton,
    {
      "data-slot": "select-trigger",
      className: composeRenderProps(
        className,
        (className2, renderProps) => selectTriggerVariants({
          ...renderProps,
          size,
          className: className2
        })
      ),
      ...props,
      children: composeRenderProps(children, (children2) => /* @__PURE__ */ jsxs(Fragment, { children: [
        children2,
        /* @__PURE__ */ jsx(ChevronDownIcon, { "aria-hidden": "true", className: "opacity-50" })
      ] }))
    }
  );
}
function SelectValue({ className, ...props }) {
  return /* @__PURE__ */ jsx(
    AriaSelectValue,
    {
      "data-slot": "select-value",
      className: composeRenderProps(
        className,
        (className2) => cn(
          "data-[placeholder]:text-muted-foreground line-clamp-1 flex items-center gap-2",
          /* Description */
          "[&>[slot=description]]:hidden",
          className2
        )
      ),
      ...props
    }
  );
}
function SelectPopover({ className, ...props }) {
  return /* @__PURE__ */ jsx(
    Popover,
    {
      showArrow: false,
      className,
      style: { minWidth: "var(--trigger-width)" },
      ...props
    }
  );
}
function SelectList({ className, ...props }) {
  return /* @__PURE__ */ jsx(
    AriaListBox,
    {
      className: composeTailwindRenderProps(
        className,
        "max-h-[inherit] min-w-[inherit] overflow-auto p-1 outline-hidden"
      ),
      ...props
    }
  );
}
var SelectSection = DropdownSection;
var SelectSeparator = DropdownSeparator;
var SelectLabel = DropdownLabel;
var SelectDescription = DropdownDescription;
var SelectItem = DropdownItem;

export {
  Select,
  SelectTrigger,
  SelectValue,
  SelectPopover,
  SelectList,
  SelectSection,
  SelectSeparator,
  SelectLabel,
  SelectDescription,
  SelectItem
};