@konstructio/ui/dist/components-C_LekSz_.js

A set of reusable and customizable React components built for konstruct.io

import { n as L } from "./Wrapper-F9NmImqw.js";
import { t as o } from "./utils-COaoD3PI.js";
import { LoaderIcon as I } from "./assets/icons/components/Loader.js";
import { t as C } from "./x-DBIZFfaM.js";
import { Badge as R } from "./components/Badge/Badge.js";
import { Typography as N } from "./components/Typography/Typography.js";
import { useMultiSelectDropdown as w } from "./components/MultiSelectDropdown/contexts/MultiSelectDropdown.hook.js";
import { MultiSelectDropdownProvider as V } from "./components/MultiSelectDropdown/contexts/MultiSelectDropdown.provider.js";
import { Item as g } from "./components/MultiSelectDropdown/components/Item/Item.js";
import { listVariants as j } from "./components/MultiSelectDropdown/components/List/List.variants.js";
import { useMultiSelectDropdown as T } from "./components/MultiSelectDropdown/hooks/useMultiSelectDropdown.js";
import { labelVariants as W, multiSelectDropdownVariants as $, wrapperVariants as z } from "./components/MultiSelectDropdown/MultiSelectDropdown.variants.js";
import { forwardRef as b, useId as B, useImperativeHandle as F } from "react";
import { jsx as e, jsxs as h } from "react/jsx-runtime";
var H = ({ theme: n }) => {
  const { options: a, selectedOptions: r, isLoading: s, noOptionsText: l } = w();
  return /* @__PURE__ */ e("ul", {
    role: "listbox",
    "data-theme": n,
    className: o(j()),
    children: s ? /* @__PURE__ */ e(g, {
      option: {
        id: "loading",
        label: "Loading..."
      },
      className: "select-none pointer-events-none",
      isSelected: !1
    }, "loading") : a.length > 0 ? a.map((t) => /* @__PURE__ */ e(g, {
      option: t,
      isSelected: r.some((i) => i.id === t.id)
    }, t.id)) : /* @__PURE__ */ e("li", {
      className: "select-none",
      children: /* @__PURE__ */ e(N, {
        variant: "body2",
        className: "italic px-2 py-2",
        children: l ?? "No options"
      })
    })
  });
}, y = b(({ isRequired: n, label: a, labelClassName: r, labelWrapperClassName: s, name: l, placeholder: t = "", theme: i, wrapperClassName: m }, c) => {
  const p = B(), x = l ? `${p}-name` : "id", { inputRef: u, isLoading: S, isOpen: f, selectedOptions: v, onOpen: O, onRemoveOption: D } = w(), { wrapperRef: M, handleOpen: k } = T();
  return F(c, () => u.current, [u]), /* @__PURE__ */ h("div", {
    ref: M,
    className: o(z({ className: m })),
    "data-theme": i,
    children: [
      a ? /* @__PURE__ */ e("div", {
        className: o(s),
        children: /* @__PURE__ */ h(N, {
          component: "label",
          variant: "labelLarge",
          htmlFor: x,
          className: o(W({ className: r })),
          onClick: () => O(!0),
          children: [
            a,
            " ",
            n && /* @__PURE__ */ e(N, {
              component: "span",
              className: "text-red-500 dark:text-red-500 text-sm font-normal",
              children: "*"
            })
          ]
        })
      }) : null,
      /* @__PURE__ */ h("div", {
        id: x,
        className: o($()),
        role: "combobox",
        onClick: k,
        "aria-expanded": f,
        children: [v.length === 0 ? /* @__PURE__ */ e("span", {
          className: "text-base text-inherit select-none",
          children: t
        }) : /* @__PURE__ */ e("div", {
          className: "flex flex-wrap gap-2",
          children: v.map((d) => /* @__PURE__ */ e(R, {
            "data-value": d.label,
            label: d.value ?? d.label ?? "",
            className: "select-none",
            rightIcon: /* @__PURE__ */ e(C, { onClick: () => D(d) })
          }, d.id))
        }), S ? /* @__PURE__ */ e(I, {
          size: 16,
          className: "animate-spin shrink-0 text-gray-400"
        }) : /* @__PURE__ */ e(L, { className: o("w-4 h-4 transition-all duration-50 shrink-0 text-gray-400", f ? "rotate-0" : "rotate-180") })]
      }),
      /* @__PURE__ */ e("input", {
        ref: u,
        type: "text",
        name: l,
        className: "hidden",
        readOnly: !0
      }),
      f ? /* @__PURE__ */ e(H, {}) : null
    ]
  });
});
y.displayName = "MultiSelectDropdownWrapper";
var K = b(({ isLoading: n, multiselect: a, name: r, noOptionsText: s, options: l, value: t, onChange: i, onBlur: m, ...c }, p) => /* @__PURE__ */ e(V, {
  defaultOptions: l,
  multiselect: a,
  value: t,
  onChange: i,
  onBlur: m,
  name: r,
  isLoading: n,
  noOptionsText: s,
  children: /* @__PURE__ */ e(y, {
    ref: p,
    name: r,
    ...c
  })
}));
K.displayName = "KonstructMultiSelectDropdown";
export {
  y as n,
  H as r,
  K as t
};