@szum-tech/design-system/dist/chunk-WIOOP3VE.js

Szum-Tech design system with tailwindcss support

import { cn } from './chunk-ZD2QRAOX.js';
import { Select as Select$1 } from 'radix-ui';
import { CaretSortIcon, CheckIcon } from '@radix-ui/react-icons';
import { cva } from 'class-variance-authority';
import { jsxs, jsx } from 'react/jsx-runtime';

var selectCva = cva(
  [
    "bg-app-foreground font-poppins text-body-2 inline-flex h-10 w-full items-center justify-between gap-2 border pl-3 pr-1.5 py-2 outline-0 transition-colors duration-300 ease-in-out [&>span]:line-clamp-1",
    "data-[placeholder]:select-none data-[placeholder]:text-gray-400",
    "invalid:border-error-500 focus:border-primary-500 active:border-primary-500",
    "disabled:border-gray-800 disabled:text-gray-300 disabled:[&>svg]:text-gray-300 disabled:placeholder:text-gray-600 disabled:cursor-not-allowed"
  ],
  {
    variants: {
      invalid: {
        true: ["text-error-500 border-error-500 hover:border-error-400 focus:text-gray-100"],
        false: ["border-gray-600 hover:border-primary-600 text-gray-100"]
      }
    },
    defaultVariants: {
      invalid: false
    }
  }
);
function Select({ children, placeholder, invalid = false, ref, ...props }) {
  const selectStyles = selectCva({ invalid });
  return /* @__PURE__ */ jsxs(Select$1.Root, { ...props, children: [
    /* @__PURE__ */ jsxs(Select$1.Trigger, { className: selectStyles, ref, "aria-invalid": invalid || void 0, children: [
      /* @__PURE__ */ jsx(Select$1.Value, { placeholder }),
      /* @__PURE__ */ jsx(Select$1.Icon, { asChild: true, children: /* @__PURE__ */ jsx(CaretSortIcon, { className: "size-5 text-gray-100" }) })
    ] }),
    /* @__PURE__ */ jsx(Select$1.Portal, { children: /* @__PURE__ */ jsx(
      Select$1.Content,
      {
        sideOffset: 4,
        className: "bg-app-foreground z-50 w-full overflow-hidden border border-gray-800 py-1",
        children: /* @__PURE__ */ jsx(Select$1.Viewport, { children })
      }
    ) })
  ] });
}
function SelectItem({ children, className, ...props }) {
  return /* @__PURE__ */ jsxs(
    Select$1.Item,
    {
      className: cn(
        "text-body-2 data-[state=checked]:bg-primary-500 data-[state=checked]:text-app-foreground flex w-full flex-row items-center justify-between px-3 py-2 text-gray-100 select-none data-[disabled]:pointer-events-none data-[highlighted]:bg-gray-900 data-[highlighted]:outline-none data-[state=checked]:outline-none",
        className
      ),
      ...props,
      children: [
        /* @__PURE__ */ jsx(Select$1.ItemText, { className: "flex-1", children }),
        /* @__PURE__ */ jsx(Select$1.ItemIndicator, { children: /* @__PURE__ */ jsx(CheckIcon, { className: "size-4" }) })
      ]
    }
  );
}

export { Select, SelectItem };