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

Szum-Tech design system with tailwindcss support

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 text-body-2 inline-flex h-10 w-full appearance-none items-center justify-between gap-2 border px-3 py-2 text-gray-100 outline-0 transition-colors duration-300 ease-in-out",
    "placeholder:select-none placeholder:text-gray-200",
    "invalid:border-error-500 focus:border-primary-400 active:border-primary-400",
    "disabled:border-gray-400 disabled:text-gray-200 disabled:placeholder:text-gray-300"
  ],
  {
    variants: {
      invalid: {
        true: ["text-error-500 border-error-500 hover:border-error-400 focus:text-gray-100"],
        false: ["border-gray-350 hover:border-primary-500 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, children: [
      /* @__PURE__ */ jsx(Select$1.Value, { placeholder }),
      /* @__PURE__ */ jsx(Select$1.Icon, { className: "-mr-1.5", children: /* @__PURE__ */ jsx(CaretSortIcon, { className: "size-5 text-gray-200" }) })
    ] }),
    /* @__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-400 py-1",
        children: /* @__PURE__ */ jsx(Select$1.Viewport, { children })
      }
    ) })
  ] });
}
function SelectItem({ children, ...props }) {
  return /* @__PURE__ */ jsxs(
    Select$1.Item,
    {
      className: "text-body-2 data-[state=checked]:bg-primary-300 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-400 data-[highlighted]:outline-none",
      ...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 };