@konstructio/ui 0.1.2-alpha.12 → 0.1.2-alpha.120

package/dist/Switch-5cdUxbhX.js

@@ -0,0 +1,215 @@
+import { a as $ } from "./dist-CK8FUUUn.js";
+import { t as B } from "./dist-CYuWoi9I.js";
+import { t as E } from "./utils-DnIJruo0.js";
+import { LoaderIcon as D } from "./assets/icons/components/Loader.js";
+import { i as G, r as L, t as V } from "./dist-DbeY0Pzx.js";
+import { t as W } from "./dist-vDSmnSS_.js";
+import { Typography as H } from "./components/Typography/Typography.js";
+import { switchVariants as X, thumbVariants as J } from "./components/Switch/Switch.variants.js";
+import * as o from "react";
+import { forwardRef as K, useEffect as Q, useId as Y, useImperativeHandle as Z, useRef as ee, useState as te } from "react";
+import { Fragment as re, jsx as m, jsxs as T } from "react/jsx-runtime";
+var ne = Object.defineProperty, g = (i, a) => ne(i, "name", {
+  value: a,
+  configurable: !0
+}), U = "Switch", [oe, Re] = G(U), [ce, F] = oe(U);
+function j(i) {
+  const { __scopeSwitch: a, checked: d, children: c, defaultChecked: l, disabled: s, form: e, name: r, onCheckedChange: f, required: h, value: w = "on", internal_do_not_use_render: p } = i, [b, S] = V({
+    prop: d,
+    defaultProp: l ?? !1,
+    onChange: f,
+    caller: U
+  }), [n, v] = o.useState(null), [R, _] = o.useState(null), [t, u] = o.useState(null), k = {
+    checked: b,
+    setChecked: S,
+    disabled: s,
+    control: n,
+    setControl: v,
+    name: r,
+    form: e,
+    value: w,
+    userClick: t,
+    onUserClick: u,
+    required: h,
+    defaultChecked: l,
+    isFormControl: n ? !!e || !!n.closest("form") : !0,
+    bubbleInput: R,
+    setBubbleInput: _
+  };
+  return /* @__PURE__ */ m(ce, {
+    scope: a,
+    ...k,
+    children: z(p) ? p(k) : c
+  });
+}
+g(j, "SwitchProvider");
+var se = "SwitchTrigger", ie = /* @__PURE__ */ o.forwardRef(/* @__PURE__ */ g(function({ __scopeSwitch: a, onClick: d, ...c }, l) {
+  const { control: s, form: e, value: r, disabled: f, checked: h, required: w, setControl: p, setChecked: b, onUserClick: S, isFormControl: n, bubbleInput: v } = F(se, a), R = $(l, p), _ = o.useRef(h);
+  return o.useEffect(() => {
+    const t = e ? s?.ownerDocument.getElementById(e) : s?.form;
+    if (t instanceof HTMLFormElement) {
+      const u = /* @__PURE__ */ g(() => b(_.current), "reset");
+      return t.addEventListener("reset", u), () => t.removeEventListener("reset", u);
+    }
+  }, [
+    s,
+    e,
+    b
+  ]), /* @__PURE__ */ m(B.button, {
+    type: "button",
+    role: "switch",
+    "aria-checked": h,
+    "aria-required": w,
+    "data-state": q(h),
+    "data-disabled": f ? "" : void 0,
+    disabled: f,
+    value: r,
+    ...c,
+    ref: R,
+    onClick: L(d, (t) => {
+      const u = t.isPropagationStopped();
+      S({
+        requestedChecked: !h,
+        hasConsumerStoppedPropagation: u
+      }), b((k) => !k), v && n && (u || t.stopPropagation());
+    })
+  });
+}, "SwitchTrigger")), ae = /* @__PURE__ */ o.forwardRef(/* @__PURE__ */ g(function(a, d) {
+  const { __scopeSwitch: c, name: l, checked: s, defaultChecked: e, required: r, disabled: f, value: h, onCheckedChange: w, form: p, ...b } = a;
+  return /* @__PURE__ */ m(j, {
+    __scopeSwitch: c,
+    checked: s,
+    defaultChecked: e,
+    disabled: f,
+    required: r,
+    onCheckedChange: w,
+    name: l,
+    form: p,
+    value: h,
+    internal_do_not_use_render: ({ isFormControl: S }) => /* @__PURE__ */ T(re, { children: [/* @__PURE__ */ m(ie, {
+      ...b,
+      ref: d,
+      __scopeSwitch: c
+    }), S && /* @__PURE__ */ m(fe, { __scopeSwitch: c })] })
+  });
+}, "Switch")), le = "SwitchThumb", ue = /* @__PURE__ */ o.forwardRef(/* @__PURE__ */ g(function(a, d) {
+  const { __scopeSwitch: c, ...l } = a, s = F(le, c);
+  return /* @__PURE__ */ m(B.span, {
+    "data-state": q(s.checked),
+    "data-disabled": s.disabled ? "" : void 0,
+    ...l,
+    ref: d
+  });
+}, "SwitchThumb")), de = "SwitchBubbleInput", fe = /* @__PURE__ */ o.forwardRef(/* @__PURE__ */ g(function({ __scopeSwitch: a, onClick: d, ...c }, l) {
+  const { control: s, userClick: e, checked: r, defaultChecked: f, required: h, disabled: w, name: p, value: b, form: S, bubbleInput: n, setBubbleInput: v } = F(de, a), R = $(l, v), _ = W(s), t = o.useRef(!1), u = o.useRef(r), k = o.useRef(e), I = o.useRef(null);
+  o.useEffect(() => {
+    const C = n;
+    if (!C) return;
+    const y = window.HTMLInputElement.prototype, x = Object.getOwnPropertyDescriptor(y, "checked").set;
+    if (!x) return;
+    const N = u.current !== r;
+    u.current = r;
+    const A = e !== null && e !== k.current;
+    if (k.current = e, A)
+      I.current = N ? null : e, N && x.call(C, r), C.dispatchEvent(new Event("click", { bubbles: !e.hasConsumerStoppedPropagation }));
+    else if (N) {
+      const M = I.current;
+      I.current = null;
+      const O = M?.requestedChecked === r;
+      t.current = !0, x.call(C, r), C.dispatchEvent(new Event("click", { bubbles: !(O && M.hasConsumerStoppedPropagation) })), t.current = !1;
+    }
+  }, [
+    n,
+    r,
+    e
+  ]);
+  const P = o.useRef(r);
+  return /* @__PURE__ */ m(B.input, {
+    type: "checkbox",
+    "aria-hidden": !0,
+    defaultChecked: f ?? P.current,
+    required: h,
+    disabled: w,
+    name: p,
+    value: b,
+    form: S,
+    ...c,
+    tabIndex: -1,
+    ref: R,
+    onClick: L(d, (C) => {
+      t.current && C.stopPropagation();
+    }),
+    style: {
+      ...c.style,
+      ..._,
+      position: "absolute",
+      pointerEvents: "none",
+      opacity: 0,
+      margin: 0,
+      transform: "translateX(-100%)"
+    }
+  });
+}, "SwitchBubbleInput"));
+function z(i) {
+  return typeof i == "function";
+}
+g(z, "isFunction");
+function q(i) {
+  return i ? "checked" : "unchecked";
+}
+g(q, "getState");
+var _e = K(({ alignment: i = "horizontal", className: a, defaultChecked: d, disabled: c = !1, helperText: l, helperTextClassName: s, isLoading: e = !1, label: r, labels: f, labelClassName: h, labelWrapperClassName: w, name: p, theme: b, thumbClassName: S, value: n, variant: v, onChange: R }, _) => {
+  const t = ee(null), u = Y(), k = p ? `${u}-${p}` : u, [I, P] = te(n ?? d ?? !1), C = f ? I ? f.on : f.off : r;
+  Z(_, () => t.current, [t]), Q(() => {
+    t.current && (t.current.value = `${n}`), n !== void 0 && P(n);
+  }, [n]);
+  const y = (x) => {
+    P(x), R?.(x);
+  };
+  return /* @__PURE__ */ T("div", {
+    className: E("w-full", "flex", "gap-3", i === "vertical" ? "flex-col" : "flex-row", w),
+    "data-theme": b,
+    children: [
+      /* @__PURE__ */ m(ae, {
+        id: k,
+        defaultChecked: d,
+        checked: n,
+        onCheckedChange: y,
+        className: E(X({
+          variant: v,
+          className: a
+        })),
+        "aria-label": C,
+        "aria-busy": e || void 0,
+        disabled: c || e,
+        children: /* @__PURE__ */ m(ue, { className: J({ className: S }) })
+      }),
+      e ? /* @__PURE__ */ m(D, {
+        size: 16,
+        "aria-hidden": "true",
+        className: "animate-spin shrink-0 self-center text-metal-400"
+      }) : null,
+      C ? /* @__PURE__ */ T(H, {
+        component: "label",
+        className: E("flex", "flex-col", "text-sm", "dark:text-white", "select-none", h),
+        htmlFor: k,
+        style: { paddingRight: 15 },
+        children: [C, l ? /* @__PURE__ */ m(H, {
+          component: "span",
+          className: E("text-xs", "select-none", "text-slate-600", "dark:text-metal-400", s),
+          children: l
+        }) : null]
+      }) : null,
+      /* @__PURE__ */ m("input", {
+        ref: t,
+        name: p,
+        type: "text",
+        className: "hidden",
+        "aria-hidden": "true"
+      })
+    ]
+  });
+});
+export {
+  _e as t
+};

package/dist/Wrapper-B5PmrW4J.js

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

package/dist/Wrapper-BCi_pLOr.js

@@ -0,0 +1,224 @@
+import { t as r } from "./utils-DnIJruo0.js";
+import { LoaderIcon as he } from "./assets/icons/components/Loader.js";
+import { t as ve } from "./createLucideIcon-C7E_xycG.js";
+import { t as ge } from "./chevron-up-B8hiVgxZ.js";
+import { Typography as we } from "./components/Typography/Typography.js";
+import { i as ye, n as Ce, r as Ne, t as ke } from "./dist-CQSCPpFc.js";
+import { useSelectContext as be } from "./components/Select/contexts/select.hook.js";
+import { List as Ie } from "./components/Select/components/List/List.js";
+import { inputVariants as Oe, labelVariants as ze, selectVariants as De } from "./components/Select/Select.variants.js";
+import { useSelect as je } from "./components/Select/hooks/useSelect.js";
+import { forwardRef as Le, useEffect as Ve, useImperativeHandle as Re, useMemo as Te, useRef as w } from "react";
+import { jsx as a, jsxs as s } from "react/jsx-runtime";
+var S = {
+  name: "search",
+  size: 24,
+  node: [["path", {
+    d: "m21 21-4.34-4.34",
+    key: "14j7rj"
+  }], ["circle", {
+    cx: "11",
+    cy: "11",
+    r: "8",
+    key: "4ej97u"
+  }]]
+};
+S.node;
+var Fe = ve(S), Ue = Le(({ additionalOptions: E, className: $, defaultValue: y, describedBy: b, fieldId: C, disabled: n = !1, error: c, groupedOptions: B, iconClassName: K, inputClassName: M, isInfiniteScrollEnabled: W = !1, isLoading: I, isPortal: f = !1, isRequired: x, loadingText: _, label: l, labelAction: q, labelClassName: H, labelWrapperClassName: U, listClassName: G, listItemClassName: J, listItemSecondRowClassName: Q, name: O, noOptionsText: X, placeholder: h, portalClassName: Y, searchable: z = !1, showSearchIcon: N, theme: Z, visibleItems: ee, wrapperClassName: te, onFetchMoreOptions: ae, onBlur: re, onSearchChange: ne, ...D }, oe) => {
+  const v = `${C}-label`, j = `${C}-control`, L = `${C}-listbox`, d = w(null), V = w(null), k = w(null), le = w(0), { isOpen: o, options: i, searchTerm: ie, value: u, setCanFilter: se, setSearchTerm: ce, setValue: p, toggleOpen: R } = be(), t = Te(() => i.find(({ value: e }) => e === u), [i, u]), { isInside: ue, wrapperRef: de, wrapperInputRef: T, handleOpen: g } = je({
+    inputRef: d,
+    searchInputRef: V,
+    internalValue: t,
+    listRef: k,
+    onBlur: re
+  }), pe = (e) => {
+    ue(e.relatedTarget) || R(!1);
+  }, F = () => {
+    if (!n) {
+      if (o) {
+        R(!1);
+        return;
+      }
+      g();
+    }
+  }, me = (e) => {
+    if (!n) {
+      if (e.key === "ArrowDown") {
+        if (e.preventDefault(), !o) {
+          g();
+          return;
+        }
+        k.current?.querySelector('li:not([data-action="true"])')?.focus();
+        return;
+      }
+      e.target === e.currentTarget && (e.key === "Enter" || e.key === " ") && (e.preventDefault(), F());
+    }
+  };
+  Re(oe, () => d.current, [d]), Ve(() => {
+    if (y && !u) {
+      const e = i && i.find((m) => m.value === y);
+      e && p(e.value);
+    }
+  }, [
+    y,
+    i,
+    p,
+    u
+  ]);
+  const fe = (e) => {
+    const m = e.target.value;
+    se(!0), p(""), ce(m ?? ""), ne?.(m);
+    const P = i.find((xe) => xe.value.toLocaleLowerCase() === m.toLocaleLowerCase());
+    p(P ? P.value : t?.value ?? "");
+  }, A = /* @__PURE__ */ a(Ie, {
+    ref: k,
+    id: L,
+    labelledBy: l ? v : void 0,
+    additionalOptions: E,
+    className: r(f && "static top-auto mt-0", G),
+    groupedOptions: B,
+    itemClassName: J,
+    name: O,
+    wrapperInputRef: T,
+    inputRef: d,
+    options: i,
+    isLoading: !!I,
+    searchable: z,
+    listItemSecondRowClassName: Q,
+    isInfiniteScrollEnabled: W,
+    onFetchMoreOptions: ae,
+    noOptionsText: X,
+    loadingText: _,
+    visibleItems: ee
+  });
+  return /* @__PURE__ */ s("div", {
+    ref: de,
+    className: r("flex flex-col gap-2 w-full relative", te),
+    "data-theme": Z,
+    children: [l ? /* @__PURE__ */ s("div", {
+      className: r("flex items-center justify-between", U),
+      children: [/* @__PURE__ */ s("label", {
+        id: v,
+        className: r(ze({ className: H })),
+        htmlFor: j,
+        onClick: () => !n && g(),
+        children: [l, x && /* @__PURE__ */ a("span", {
+          "aria-hidden": "true",
+          className: "text-red-600 dark:text-red-500 ml-1",
+          children: "*"
+        })]
+      }), q]
+    }) : null, /* @__PURE__ */ s(ke, {
+      open: f && o,
+      children: [
+        /* @__PURE__ */ a(Ce, {
+          asChild: !0,
+          children: /* @__PURE__ */ s("div", {
+            ref: T,
+            id: j,
+            className: r(De({
+              className: $,
+              hasError: !!c,
+              disabled: n
+            })),
+            role: "combobox",
+            onClick: F,
+            onKeyDown: me,
+            "aria-expanded": o,
+            tabIndex: le.current,
+            "aria-labelledby": l ? v : void 0,
+            "aria-label": l ? void 0 : h,
+            "aria-haspopup": "listbox",
+            "aria-controls": o ? L : void 0,
+            "aria-invalid": !!c || void 0,
+            "aria-describedby": b,
+            "aria-required": x || void 0,
+            "aria-disabled": n || void 0,
+            children: [/* @__PURE__ */ s("div", {
+              className: "flex gap-2.5 items-center flex-1",
+              children: [
+                t?.leftIcon && !N && /* @__PURE__ */ a("span", {
+                  className: "w-4 h-4 flex justify-center items-center dark:text-metal-50",
+                  children: t.leftIcon
+                }),
+                N && /* @__PURE__ */ a(Fe, { className: r("w-4", "h-4", "text-zinc-500", "select-none", "transition-colors", "duration-300", "dark:text-metal-300", "dark:group-focus-within:text-metal-50") }),
+                z ? /* @__PURE__ */ a("input", {
+                  ref: V,
+                  type: "text",
+                  value: o ? ie : t?.label ?? u ?? "",
+                  onChange: fe,
+                  placeholder: h,
+                  className: r(Oe({ className: M }), { "text-red-700 placeholder:text-red-700": !!c }),
+                  onClick: (e) => {
+                    e.stopPropagation(), n || g();
+                  },
+                  "aria-labelledby": l ? v : void 0,
+                  "aria-label": l ? void 0 : h,
+                  "aria-invalid": !!c || void 0,
+                  "aria-describedby": b,
+                  required: x,
+                  autoComplete: "off",
+                  autoCapitalize: "words",
+                  disabled: n,
+                  tabIndex: -1,
+                  ...D
+                }) : /* @__PURE__ */ s(we, {
+                  variant: "body2",
+                  className: r("flex-1 text-zinc-400 text-sm dark:text-metal-400 flex gap-2 items-center", {
+                    "text-red-700": !!c,
+                    "select-none": !t,
+                    "text-metal-800 dark:text-metal-50": t,
+                    "text-metal-400/50 dark:text-metal-50/50": n
+                  }, t?.wrapperClassNameOnSelectedValue),
+                  children: [
+                    t?.label || h,
+                    " ",
+                    t?.showRightComponentOnselectedValue ? t?.rightComponent : null
+                  ]
+                })
+              ]
+            }), I ? /* @__PURE__ */ a(he, {
+              size: 16,
+              className: "text-metal-400 animate-spin select-none"
+            }) : !N && /* @__PURE__ */ a(ge, {
+              "data-state": o ? "open" : "closed",
+              className: r("w-4 h-4 text-zinc-500 transition-all duration-100 data-[state=open]:rotate-0 data-[state=closed]:rotate-180 select-none dark:group-focus-within:text-metal-50", K, {
+                "text-red-700": !!c,
+                "text-metal-400/50 dark:group-focus-within:text-zinc-500": n
+              })
+            })]
+          })
+        }),
+        /* @__PURE__ */ a("input", {
+          ref: d,
+          type: "text",
+          name: O,
+          className: "hidden",
+          "aria-hidden": "true",
+          required: x,
+          inert: !0,
+          defaultValue: t?.value ?? u ?? void 0,
+          ...D
+        }),
+        o && !f && A,
+        f && /* @__PURE__ */ a(ye, { children: /* @__PURE__ */ a(Ne, {
+          role: "presentation",
+          align: "start",
+          sideOffset: 4,
+          className: r("z-50 w-(--radix-popover-trigger-width)", Y),
+          onOpenAutoFocus: (e) => {
+            e.preventDefault();
+          },
+          onCloseAutoFocus: (e) => {
+            e.preventDefault();
+          },
+          onBlur: pe,
+          children: A
+        }) })
+      ]
+    })]
+  });
+});
+export {
+  Ue as t
+};