@szum-tech/design-system/dist/chunk-QQ7CBNSR.cjs

Szum-Tech design system with tailwindcss support

'use strict';

var chunkH2BWO3SI_cjs = require('./chunk-H2BWO3SI.cjs');
var radixUi = require('radix-ui');
var reactIcons = require('@radix-ui/react-icons');
var classVarianceAuthority = require('class-variance-authority');
var jsxRuntime = require('react/jsx-runtime');

var selectCva = classVarianceAuthority.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__ */ jsxRuntime.jsxs(radixUi.Select.Root, { ...props, children: [
    /* @__PURE__ */ jsxRuntime.jsxs(radixUi.Select.Trigger, { className: selectStyles, ref, "aria-invalid": invalid || void 0, children: [
      /* @__PURE__ */ jsxRuntime.jsx(radixUi.Select.Value, { placeholder }),
      /* @__PURE__ */ jsxRuntime.jsx(radixUi.Select.Icon, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(reactIcons.CaretSortIcon, { className: "size-5 text-gray-100" }) })
    ] }),
    /* @__PURE__ */ jsxRuntime.jsx(radixUi.Select.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
      radixUi.Select.Content,
      {
        sideOffset: 4,
        className: "bg-app-foreground z-50 w-full overflow-hidden border border-gray-800 py-1",
        children: /* @__PURE__ */ jsxRuntime.jsx(radixUi.Select.Viewport, { children })
      }
    ) })
  ] });
}
function SelectItem({ children, className, ...props }) {
  return /* @__PURE__ */ jsxRuntime.jsxs(
    radixUi.Select.Item,
    {
      className: chunkH2BWO3SI_cjs.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__ */ jsxRuntime.jsx(radixUi.Select.ItemText, { className: "flex-1", children }),
        /* @__PURE__ */ jsxRuntime.jsx(radixUi.Select.ItemIndicator, { children: /* @__PURE__ */ jsxRuntime.jsx(reactIcons.CheckIcon, { className: "size-4" }) })
      ]
    }
  );
}

exports.Select = Select;
exports.SelectItem = SelectItem;