@konstructio/ui/dist/Wrapper-F9NmImqw.js

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

import { o as k } from "./chunk-cI0lbGMq.js";
import { t as _ } from "./prop-types-CE0Kfmwk.js";
import { t as T } from "./x-KjMYhcCb.js";
import { t as s } from "./utils-COaoD3PI.js";
import { Tag as S } from "./components/Tag/Tag.js";
import { useTagSelect as C } from "./components/TagSelect/contexts/TagSelect.hook.js";
import { List as z } from "./components/TagSelect/components/List/List.js";
import { useTagSelect as P } from "./components/TagSelect/hooks/useTagSelect.js";
import { labelVariants as R, tagSelectVariants as E, wrapperVariants as I } from "./components/TagSelect/TagSelect.variants.js";
import g, { forwardRef as y, useId as L, useImperativeHandle as W } from "react";
import { jsx as i, jsxs as b } from "react/jsx-runtime";
var p = /* @__PURE__ */ k(_());
function u() {
  return u = Object.assign || function(e) {
    for (var a = 1; a < arguments.length; a++) {
      var r = arguments[a];
      for (var t in r) Object.prototype.hasOwnProperty.call(r, t) && (e[t] = r[t]);
    }
    return e;
  }, u.apply(this, arguments);
}
function V(e, a) {
  if (e == null) return {};
  var r = $(e, a), t, n;
  if (Object.getOwnPropertySymbols) {
    var o = Object.getOwnPropertySymbols(e);
    for (n = 0; n < o.length; n++)
      t = o[n], !(a.indexOf(t) >= 0) && Object.prototype.propertyIsEnumerable.call(e, t) && (r[t] = e[t]);
  }
  return r;
}
function $(e, a) {
  if (e == null) return {};
  var r = {}, t = Object.keys(e), n, o;
  for (o = 0; o < t.length; o++)
    n = t[o], !(a.indexOf(n) >= 0) && (r[n] = e[n]);
  return r;
}
var d = y(function(e, a) {
  var r = e.color, t = r === void 0 ? "currentColor" : r, n = e.size, o = n === void 0 ? 24 : n, c = V(e, ["color", "size"]);
  return /* @__PURE__ */ g.createElement("svg", u({
    ref: a,
    xmlns: "http://www.w3.org/2000/svg",
    width: o,
    height: o,
    viewBox: "0 0 24 24",
    fill: "none",
    stroke: t,
    strokeWidth: "2",
    strokeLinecap: "round",
    strokeLinejoin: "round"
  }, c), /* @__PURE__ */ g.createElement("polyline", { points: "18 15 12 9 6 15" }));
});
d.propTypes = {
  color: p.default.string,
  size: p.default.oneOfType([p.default.string, p.default.number])
};
d.displayName = "ChevronUp";
var K = y(({ label: e, labelClassName: a, labelWrapperClassName: r, name: t, placeholder: n = "Select a value...", theme: o, wrapperClassName: c }, w) => {
  const h = L(), { selectedTags: v, isOpen: m, onOpen: x, onRemoveTag: O, inputRef: f } = C(), { wrapperRef: N, handleOpen: j } = P();
  return W(w, () => f.current, [f]), /* @__PURE__ */ b("div", {
    ref: N,
    className: s(I({ className: c })),
    "data-theme": o,
    children: [
      e ? /* @__PURE__ */ i("div", {
        className: s(r),
        children: /* @__PURE__ */ i("label", {
          htmlFor: t ?? h,
          className: s(R({ className: a })),
          onClick: () => x(!0),
          children: e
        })
      }) : null,
      /* @__PURE__ */ b("div", {
        id: t ?? h,
        className: s(E()),
        role: "combobox",
        onClick: j,
        "aria-expanded": m,
        children: [v.length === 0 ? /* @__PURE__ */ i("span", {
          className: "text-base text-inherit select-none",
          children: n
        }) : /* @__PURE__ */ i("div", {
          className: "flex flex-wrap gap-1.5",
          children: v.map((l) => /* @__PURE__ */ i(S, {
            ...l,
            className: "select-none",
            rightIcon: /* @__PURE__ */ i(T, {
              className: "w-3 h-3",
              onClick: () => O(l)
            }),
            "data-value": l.label
          }, l.id))
        }), /* @__PURE__ */ i(d, { className: s("w-4 h-4 text-inherit transition-all duration-50 shrink-0", m ? "rotate-0" : "rotate-180") })]
      }),
      /* @__PURE__ */ i("input", {
        ref: f,
        type: "text",
        name: t,
        className: "hidden"
      }),
      m ? /* @__PURE__ */ i(z, {}) : null
    ]
  });
});
export {
  d as n,
  K as t
};