@konstructio/ui 0.1.2-alpha.98 → 0.1.3

package/dist/Spinner-DeThqPk_.js

@@ -0,0 +1,47 @@
+"use client";
+import { t as f } from "./dist-C_jtUTU9.js";
+import { Typography as u } from "./components/Typography/Typography.js";
+import { t } from "./utils-DnIJruo0.js";
+import { spinnerIconVariants as k, spinnerVariants as g } from "./components/Spinner/Spinner.variants.js";
+import { jsx as a, jsxs as h } from "react/jsx-runtime";
+var s = "data:image/svg+xml,%3csvg%20width='160'%20height='160'%20viewBox='0%200%20160%20160'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M85.2%2083.9L85.6%2085.1L85.9%2086.5L85.9%2088L85.6%2089.6L85%2091.1L84.1%2092.6L82.9%2094L81.4%2095.2L79.6%2096.2L77.6%2096.9L75.4%2097.2L73.2%2097.2L70.8%2096.7L68.5%2095.9L66.3%2094.6L64.3%2092.9L62.5%2090.9L61%2088.4L60%2085.7L59.3%2082.8L59.2%2079.7L59.5%2076.5L60.4%2073.4L61.9%2070.3L63.9%2067.5L66.4%2065L69.3%2062.8L72.6%2061.1L76.3%2060L80.1%2059.4L84.1%2059.5L88.1%2060.3L92%2061.7L95.8%2063.8L99.2%2066.6L102.1%2069.9L104.6%2073.7L106.4%2078L107.6%2082.6L108%2087.4L107.6%2092.3L106.4%2097.2L104.4%20101.9L101.6%20106.3L98.1%20110.2L93.9%20113.6L89.2%20116.3L84%20118.3L78.5%20119.4L72.7%20119.6L67%20118.8L61.3%20117.1L55.9%20114.5L50.9%20111L46.5%20106.7L42.8%20101.6L39.8%2095.9L37.9%2089.8L36.9%2083.3L36.9%2076.6L38.1%2069.9L40.3%2063.4L43.5%2057.3L47.8%2051.7L53%2046.8L58.9%2042.8L65.5%2039.7L72.6%2037.7L80.1%2036.9L87.6%2037.2L95.1%2038.8L102.3%2041.7L109.1%2045.6L115.2%2050.7L120.4%2056.8L124.7%2063.7L127.9%2071.3L129.8%2079.4L130.5%2087.8L129.7%2096.2L127.6%20104.6L124.2%20112.6L119.5%20120L113.6%20126.6L106.7%20132.2L98.8%20136.8L90.3%20140L81.3%20141.8L72%20142.2L62.7%20141L53.6%20138.4L44.9%20134.3L36.9%20128.7L29.9%20122L24%20114.1L19.3%20105.2L16.1%2095.7L14.4%2085.7L14.4%2075.4L16%2065.2L19.3%2055.3L24.1%2045.9L30.4%2037.4L38%2029.9L46.8%2023.7L56.6%2018.9L67.1%2015.8L78.1%2014.3L89.2%2014.6L100.2%2016.8L110.9%2020.7L120.8%2026.3L129.8%2033.5L137.6%2042.1L144%2051.9L148.8%2062.7L151.8%2074.2L85.2%2083.9Z'%20stroke='url(%23spinner-fade)'%20stroke-width='2'/%3e%3cdefs%3e%3clinearGradient%20id='spinner-fade'%20x1='83.6'%20y1='14.2'%20x2='83.6'%20y2='142.2'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-color='%2300FF6F'/%3e%3cstop%20offset='1'%20stop-opacity='0'/%3e%3c/linearGradient%3e%3c/defs%3e%3c/svg%3e", i = null, o = (L) => typeof L == "number" ? L : null, v = (L) => {
+  if (!(!L || typeof L.getAnimations != "function"))
+    for (const e of L.getAnimations({ subtree: !0 }))
+      i === null && (i = o(e.startTime) ?? o(document.timeline?.currentTime) ?? 0), e.startTime = i;
+}, y = ({ className: L, spinnerClassName: e, textClassName: l, textVariant: m = "subtitle2", text: n, srLabel: c = "Loading", theme: p, size: r, ...d }) => /* @__PURE__ */ h("div", {
+  ref: v,
+  role: "status",
+  "aria-label": "Loading",
+  "data-theme": p,
+  className: t(g({
+    size: r,
+    className: L
+  })),
+  ...d,
+  children: [
+    /* @__PURE__ */ a("span", {
+      "aria-hidden": "true",
+      className: t(k({ size: r }), e),
+      style: {
+        maskImage: `url("${s}")`,
+        maskSize: "contain",
+        maskRepeat: "no-repeat",
+        maskPosition: "center",
+        WebkitMaskImage: `url("${s}")`,
+        WebkitMaskSize: "contain",
+        WebkitMaskRepeat: "no-repeat",
+        WebkitMaskPosition: "center"
+      }
+    }),
+    n && /* @__PURE__ */ a(u, {
+      variant: m,
+      className: t("text-slate-700 dark:text-slate-200", l),
+      children: n
+    }),
+    /* @__PURE__ */ a(f, { children: c })
+  ]
+});
+y.displayName = "KonstructSpinner";
+export {
+  y as t
+};

package/dist/StepIndicatorContent-C6MILk4c.js

@@ -0,0 +1,36 @@
+import { t as d } from "./createLucideIcon-C7E_xycG.js";
+import { ExclamationIcon as m } from "./assets/icons/components/Exclamation.js";
+import { t as p } from "./utils-DnIJruo0.js";
+import { CHECK_ICON_SIZE_MAP as c, ICON_SIZE_MAP as f } from "./components/Stepper/constants/index.js";
+import { memo as h } from "react";
+import { jsx as e } from "react/jsx-runtime";
+var i = {
+  name: "check",
+  size: 24,
+  node: [["path", {
+    d: "M20 6 9 17l-5-5",
+    key: "1gmf2c"
+  }]]
+};
+i.node;
+var I = d(i), u = ({ className: r, icons: t, index: a, size: o, status: n }) => n === "completed" ? t?.completed ? /* @__PURE__ */ e("span", {
+  className: r,
+  children: t.completed
+}) : /* @__PURE__ */ e(I, {
+  className: p(c[o], r),
+  strokeWidth: 2.5,
+  "aria-hidden": "true"
+}) : n === "error" ? t?.error ? /* @__PURE__ */ e("span", {
+  className: r,
+  children: t.error
+}) : /* @__PURE__ */ e(m, {
+  size: f[o],
+  className: r
+}) : /* @__PURE__ */ e("span", {
+  className: r,
+  "aria-hidden": "true",
+  children: a + 1
+}), S = h(u);
+export {
+  S as t
+};

package/dist/Switch-DUiaVSnE.js

@@ -0,0 +1,215 @@
+import { i as D, r as $, t as G } from "./dist-DbeY0Pzx.js";
+import { a as L } from "./dist-CK8FUUUn.js";
+import { t as V } from "./dist-vDSmnSS_.js";
+import { t as B } from "./dist-CYuWoi9I.js";
+import { LoaderIcon as W } from "./assets/icons/components/Loader.js";
+import { Typography as H } from "./components/Typography/Typography.js";
+import { t as E } from "./utils-DnIJruo0.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] = D(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] = G({
+    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(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: $(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(l, v), _ = V(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: $(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(W, {
+        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-BwNyImxO.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 { Tag as S } from "./components/Tag/Tag.js";
+import { t as l } from "./utils-DnIJruo0.js";
+import { useTagSelect as C } from "./components/TagSelect/contexts/TagSelect.hook.js";
+import { useTagSelect as z } from "./components/TagSelect/hooks/useTagSelect.js";
+import { labelVariants as I, tagSelectVariants as P, wrapperVariants as R } from "./components/TagSelect/TagSelect.variants.js";
+import { List as $ } from "./components/TagSelect/components/List/List.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 } = z();
+  return L(x, () => f.current, [f]), /* @__PURE__ */ b("div", {
+    ref: N,
+    className: l(R({ 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(I({ className: n })),
+          onClick: () => w(!0),
+          children: e
+        })
+      }) : null,
+      /* @__PURE__ */ b("div", {
+        id: t ?? s,
+        className: l(P()),
+        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($, {}) : null
+    ]
+  });
+});
+export {
+  h as n,
+  K as t
+};