@konstructio/ui 0.1.2-alpha.104 → 0.1.2-alpha.106

package/package.json

@@ -2,7 +2,7 @@
   "name": "@konstructio/ui",
   "description": "A set of reusable and customizable React components built for konstruct.io",
   "private": false,
-  "version": "0.1.2-alpha.104",
+  "version": "0.1.2-alpha.106",
   "type": "module",
   "license": "MIT",
   "main": "dist/index.js",
@@ -92,19 +92,19 @@
     "@radix-ui/react-visually-hidden": "^1.2.11",
     "@react-input/mask": "^2.0.4",
     "@tanstack/react-table": "^8.21.3",
-    "@tanstack/react-virtual": "^3.14.8",
+    "@tanstack/react-virtual": "^3.14.9",
     "chart.js": "^4.5.1",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
-    "countries-and-timezones": "^3.9.0",
+    "countries-and-timezones": "^3.10.0",
     "country-flag-icons": "^1.6.20",
     "country-locale-map": "^1.9.13",
-    "google-libphonenumber": "^3.2.44",
+    "google-libphonenumber": "^3.2.46",
     "i18n-iso-countries": "^7.14.0",
     "js-cookie": "^3.0.8",
-    "lucide-react": "^1.27.0",
-    "motion": "^12.42.2",
+    "lucide-react": "^1.28.0",
+    "motion": "^13.0.0",
     "react-chartjs-2": "^5.3.1",
     "react-day-picker": "^10.0.1",
     "react-feather": "^2.0.10",
@@ -147,22 +147,22 @@
   "devDependencies": {
     "@faker-js/faker": "^10.5.0",
     "@rollup/plugin-alias": "^6.0.0",
-    "@storybook/addon-docs": "^10.5.5",
-    "@storybook/addon-links": "^10.5.5",
-    "@storybook/react-vite": "^10.5.5",
+    "@storybook/addon-docs": "^10.5.6",
+    "@storybook/addon-links": "^10.5.6",
+    "@storybook/react-vite": "^10.5.6",
     "@tailwindcss/vite": "^4.3.3",
     "@tanstack/react-query": "^5.101.4",
     "@testing-library/jest-dom": "^7.0.0",
     "@testing-library/react": "^16.3.2",
-    "@testing-library/user-event": "^14.6.1",
-    "@types/google-libphonenumber": "^7.4.30",
+    "@testing-library/user-event": "^14.6.3",
+    "@types/google-libphonenumber": "^7.4.31",
     "@types/jest-axe": "^3.5.9",
     "@types/js-cookie": "^3.0.6",
-    "@types/lodash": "^4.17.24",
-    "@types/react": "^19.2.17",
-    "@types/react-dom": "^19.2.3",
-    "@typescript-eslint/eslint-plugin": "^8.65.0",
-    "@typescript-eslint/parser": "^8.65.0",
+    "@types/lodash": "^4.17.25",
+    "@types/react": "^19.2.18",
+    "@types/react-dom": "^19.2.4",
+    "@typescript-eslint/eslint-plugin": "^8.66.0",
+    "@typescript-eslint/parser": "^8.66.0",
     "@vitejs/plugin-react": "^6.0.3",
     "@vitest/coverage-v8": "^4.1.10",
     "autoprefixer": "^10.5.4",
@@ -170,21 +170,21 @@
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^7.1.1",
     "eslint-plugin-react-refresh": "^0.5.3",
-    "eslint-plugin-storybook": "^10.5.5",
+    "eslint-plugin-storybook": "^10.5.6",
     "eslint-plugin-vitest": "^0.5.4",
     "glob": "^13.0.6",
     "husky": "^9.1.7",
     "jest-axe": "^11.0.0",
-    "jsdom": "^30.0.0",
+    "jsdom": "^30.0.1",
     "lodash": "^4.18.1",
-    "postcss": "^8.5.23",
+    "postcss": "^8.5.25",
     "prettier": "^3.9.6",
     "rimraf": "^6.1.3",
-    "storybook": "^10.5.5",
+    "storybook": "^10.5.6",
     "tailwindcss": "^4.3.3",
     "ts-node": "^10.9.2",
     "typescript": "^6.0.3",
-    "vite": "^8.1.5",
+    "vite": "^8.2.0",
     "vite-plugin-dts": "^5.0.3",
     "vite-plugin-lib-inject-css": "^2.2.2",
     "vite-plugin-svgr": "^5.2.0",

package/dist/Checkbox-B_ngk9Dj.js

@@ -1,249 +0,0 @@
-import { o as X } from "./rolldown-runtime-Ck3dxwZt.js";
-import { t as J } from "./prop-types-CfEYxTbR.js";
-import { a as U } from "./dist-xCbHbMLA.js";
-import { t as N } from "./dist-CCdbu9GU.js";
-import { t as O } from "./utils-Cx-WzRZF.js";
-import { i as Q, r as S, t as Y } from "./dist-D-yS0HN8.js";
-import { t as Z } from "./dist-BUocnzkM.js";
-import { useToggle as ee } from "./hooks/useToggle.js";
-import { t as te } from "./dist-pWlMx4Fi2.js";
-import { checkboxVariants as re, labelVariants as oe } from "./components/Checkbox/Checkbox.variants.js";
-import * as u from "react";
-import q, { forwardRef as A, useId as ne } from "react";
-import { Fragment as ce, jsx as f, jsxs as $ } from "react/jsx-runtime";
-var w = /* @__PURE__ */ X(J());
-function j() {
-  return j = Object.assign || function(e) {
-    for (var o = 1; o < arguments.length; o++) {
-      var n = arguments[o];
-      for (var t in n) Object.prototype.hasOwnProperty.call(n, t) && (e[t] = n[t]);
-    }
-    return e;
-  }, j.apply(this, arguments);
-}
-function ae(e, o) {
-  if (e == null) return {};
-  var n = se(e, o), t, r;
-  if (Object.getOwnPropertySymbols) {
-    var c = Object.getOwnPropertySymbols(e);
-    for (r = 0; r < c.length; r++)
-      t = c[r], !(o.indexOf(t) >= 0) && Object.prototype.propertyIsEnumerable.call(e, t) && (n[t] = e[t]);
-  }
-  return n;
-}
-function se(e, o) {
-  if (e == null) return {};
-  var n = {}, t = Object.keys(e), r, c;
-  for (c = 0; c < t.length; c++)
-    r = t[c], !(o.indexOf(r) >= 0) && (n[r] = e[r]);
-  return n;
-}
-var B = A(function(e, o) {
-  var n = e.color, t = n === void 0 ? "currentColor" : n, r = e.size, c = r === void 0 ? 24 : r, a = ae(e, ["color", "size"]);
-  return /* @__PURE__ */ q.createElement("svg", j({
-    ref: o,
-    xmlns: "http://www.w3.org/2000/svg",
-    width: c,
-    height: c,
-    viewBox: "0 0 24 24",
-    fill: "none",
-    stroke: t,
-    strokeWidth: "2",
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  }, a), /* @__PURE__ */ q.createElement("polyline", { points: "20 6 9 17 4 12" }));
-});
-B.propTypes = {
-  color: w.default.string,
-  size: w.default.oneOfType([w.default.string, w.default.number])
-};
-B.displayName = "Check";
-var ie = Object.defineProperty, x = (e, o) => ie(e, "name", {
-  value: o,
-  configurable: !0
-}), T = "Checkbox", [ue, je] = Q(T), [le, z] = ue(T);
-function D(e) {
-  const { __scopeCheckbox: o, checked: n, children: t, defaultChecked: r, disabled: c, form: a, name: l, onCheckedChange: s, required: d, value: C = "on", internal_do_not_use_render: h } = e, [p, b] = Y({
-    prop: n,
-    defaultProp: r ?? !1,
-    onChange: s,
-    caller: T
-  }), [v, m] = u.useState(null), [y, R] = u.useState(null), _ = u.useRef(!1), [i, k] = u.useReducer((I) => I + 1, 0), P = v ? !!a || !!v.closest("form") : !0, E = {
-    checked: p,
-    disabled: c,
-    setChecked: b,
-    control: v,
-    setControl: m,
-    name: l,
-    form: a,
-    value: C,
-    hasConsumerStoppedPropagationRef: _,
-    userInteractionCount: i,
-    onUserInteraction: k,
-    required: d,
-    defaultChecked: g(r) ? !1 : r,
-    isFormControl: P,
-    bubbleInput: y,
-    setBubbleInput: R
-  };
-  return /* @__PURE__ */ f(le, {
-    scope: o,
-    ...E,
-    children: H(h) ? h(E) : t
-  });
-}
-x(D, "CheckboxProvider");
-var de = "CheckboxTrigger", fe = /* @__PURE__ */ u.forwardRef(/* @__PURE__ */ x(function({ __scopeCheckbox: o, onKeyDown: n, onClick: t, ...r }, c) {
-  const { control: a, value: l, disabled: s, checked: d, required: C, setControl: h, setChecked: p, hasConsumerStoppedPropagationRef: b, onUserInteraction: v, isFormControl: m, bubbleInput: y } = z(de, o), R = U(c, h), _ = u.useRef(d);
-  return u.useEffect(() => {
-    const i = a?.form;
-    if (i) {
-      const k = /* @__PURE__ */ x(() => p(_.current), "reset");
-      return i.addEventListener("reset", k), () => i.removeEventListener("reset", k);
-    }
-  }, [a, p]), /* @__PURE__ */ f(N.button, {
-    type: "button",
-    role: "checkbox",
-    "aria-checked": g(d) ? "mixed" : d,
-    "aria-required": C,
-    "data-state": F(d),
-    "data-disabled": s ? "" : void 0,
-    disabled: s,
-    value: l,
-    ...r,
-    ref: R,
-    onKeyDown: S(n, (i) => {
-      i.key === "Enter" && i.preventDefault();
-    }),
-    onClick: S(t, (i) => {
-      v(), p((k) => g(k) ? !0 : !k), y && m && (b.current = i.isPropagationStopped(), b.current || i.stopPropagation());
-    })
-  });
-}, "CheckboxTrigger")), pe = /* @__PURE__ */ u.forwardRef(/* @__PURE__ */ x(function(o, n) {
-  const { __scopeCheckbox: t, name: r, checked: c, defaultChecked: a, required: l, disabled: s, value: d, onCheckedChange: C, form: h, ...p } = o;
-  return /* @__PURE__ */ f(D, {
-    __scopeCheckbox: t,
-    checked: c,
-    defaultChecked: a,
-    disabled: s,
-    required: l,
-    onCheckedChange: C,
-    name: r,
-    form: h,
-    value: d,
-    internal_do_not_use_render: ({ isFormControl: b }) => /* @__PURE__ */ $(ce, { children: [/* @__PURE__ */ f(fe, {
-      ...p,
-      ref: n,
-      __scopeCheckbox: t
-    }), b && /* @__PURE__ */ f(ke, { __scopeCheckbox: t })] })
-  });
-}, "Checkbox")), he = "CheckboxIndicator", be = /* @__PURE__ */ u.forwardRef(/* @__PURE__ */ x(function(o, n) {
-  const { __scopeCheckbox: t, forceMount: r, ...c } = o, a = z(he, t);
-  return /* @__PURE__ */ f(Z, {
-    present: r || g(a.checked) || a.checked === !0,
-    children: /* @__PURE__ */ f(N.span, {
-      "data-state": F(a.checked),
-      "data-disabled": a.disabled ? "" : void 0,
-      ...c,
-      ref: n,
-      style: {
-        pointerEvents: "none",
-        ...o.style
-      }
-    })
-  });
-}, "CheckboxIndicator")), me = "CheckboxBubbleInput", ke = /* @__PURE__ */ u.forwardRef(/* @__PURE__ */ x(function({ __scopeCheckbox: o, onClick: n, ...t }, r) {
-  const { control: c, hasConsumerStoppedPropagationRef: a, userInteractionCount: l, checked: s, defaultChecked: d, required: C, disabled: h, name: p, value: b, form: v, bubbleInput: m, setBubbleInput: y } = z(me, o), R = U(r, y), _ = te(c), i = u.useRef(!1), k = u.useRef(s), P = u.useRef(l);
-  u.useEffect(() => {
-    const I = m;
-    if (!I) return;
-    const K = window.HTMLInputElement.prototype, L = Object.getOwnPropertyDescriptor(K, "checked").set, M = l !== P.current;
-    P.current = l;
-    const W = k.current !== s;
-    k.current = s;
-    const G = !(M && a.current);
-    if (W && L) {
-      i.current = !M;
-      const V = new Event("click", { bubbles: G });
-      I.indeterminate = g(s), L.call(I, g(s) ? !1 : s), I.dispatchEvent(V), i.current = !1;
-    }
-  }, [
-    m,
-    s,
-    a,
-    l
-  ]);
-  const E = u.useRef(g(s) ? !1 : s);
-  return /* @__PURE__ */ f(N.input, {
-    type: "checkbox",
-    "aria-hidden": !0,
-    defaultChecked: d ?? E.current,
-    required: C,
-    disabled: h,
-    name: p,
-    value: b,
-    form: v,
-    ...t,
-    tabIndex: -1,
-    ref: R,
-    onClick: S(n, (I) => {
-      i.current && I.stopPropagation();
-    }),
-    style: {
-      ...t.style,
-      ..._,
-      position: "absolute",
-      pointerEvents: "none",
-      opacity: 0,
-      margin: 0,
-      transform: "translateX(-100%)"
-    }
-  });
-}, "CheckboxBubbleInput"));
-function H(e) {
-  return typeof e == "function";
-}
-x(H, "isFunction");
-function g(e) {
-  return e === "indeterminate";
-}
-x(g, "isIndeterminate");
-function F(e) {
-  return g(e) ? "indeterminate" : e ? "checked" : "unchecked";
-}
-x(F, "getState");
-var Ce = A(({ ariaLabelledBy: e, className: o, defaultChecked: n, disabled: t, id: r, label: c, labelClassName: a, labelWrapperClassName: l, name: s, theme: d, title: C, variant: h, onChange: p, ...b }, v) => {
-  const [m, y] = ee(n ?? !1), R = ne(), _ = (i) => {
-    y(i), p?.(i);
-  };
-  return /* @__PURE__ */ $("div", {
-    className: O("flex items-center gap-4", l),
-    "data-theme": d,
-    children: [/* @__PURE__ */ f(pe, {
-      id: r ?? R,
-      checked: m,
-      ref: v,
-      name: s,
-      disabled: t,
-      "aria-labelledby": e,
-      title: C,
-      className: O(re({
-        className: o,
-        variant: h,
-        checked: m
-      })),
-      onCheckedChange: _,
-      ...b,
-      children: /* @__PURE__ */ f(be, { children: /* @__PURE__ */ f(B, { className: "w-4 h-4 stroke-2" }) })
-    }), c ? /* @__PURE__ */ f("label", {
-      htmlFor: s ?? r,
-      className: O(oe({ className: a }), { "cursor-not-allowed": t }),
-      onClick: () => !t && _(!m),
-      children: c
-    }) : null]
-  });
-});
-Ce.displayName = "KonstructCheckbox";
-export {
-  Ce as t
-};

package/dist/Wrapper-BhqUVI1G.js

@@ -1,171 +0,0 @@
-import { t as r } from "./utils-Cx-WzRZF.js";
-import { LoaderIcon as le } from "./assets/icons/components/Loader.js";
-import { t as se } from "./createLucideIcon-MbzNWCaI.js";
-import { t as oe } from "./chevron-up-Bjpvg6ui.js";
-import { Typography as ie } from "./components/Typography/Typography.js";
-import { useSelectContext as ce } from "./components/Select/contexts/select.hook.js";
-import { List as me } from "./components/Select/components/List/List.js";
-import { inputVariants as pe, labelVariants as ue, selectVariants as fe } from "./components/Select/Select.variants.js";
-import { useSelect as de } from "./components/Select/hooks/useSelect.js";
-import { forwardRef as xe, useEffect as he, useId as ve, useImperativeHandle as Ne, useMemo as ge, useRef as x } from "react";
-import { jsx as n, jsxs as o } from "react/jsx-runtime";
-var Ce = [["path", {
-  d: "m21 21-4.34-4.34",
-  key: "14j7rj"
-}], ["circle", {
-  cx: "11",
-  cy: "11",
-  r: "8",
-  key: "4ej97u"
-}]], we = se("search", Ce), Fe = xe(({ additionalOptions: z, className: R, defaultValue: h, disabled: t = !1, error: f, groupedOptions: T, iconClassName: F, inputClassName: S, isInfiniteScrollEnabled: E = !1, isLoading: k, isRequired: v, label: N, labelAction: M, labelClassName: W, labelWrapperClassName: _, listClassName: $, listItemClassName: H, listItemSecondRowClassName: P, name: d, noOptionsText: U, placeholder: g, searchable: y = !1, showSearchIcon: C, theme: q, visibleItems: A, wrapperClassName: B, onFetchMoreOptions: D, onBlur: G, onSearchChange: J, ...I }, K) => {
-  const j = ve(), i = x(null), L = x(null), O = x(null), Q = x(0), { isOpen: c, options: l, searchTerm: X, value: s, setCanFilter: Y, setSearchTerm: Z, setValue: m, toggleOpen: ee } = ce(), e = ge(() => l.find(({ value: a }) => a === s), [l, s]), { wrapperRef: te, wrapperInputRef: V, handleOpen: w } = de({
-    ulRef: O,
-    inputRef: i,
-    searchInputRef: L,
-    disabled: t,
-    internalValue: e,
-    onBlur: G
-  }), ae = () => {
-    if (!t) {
-      if (c) {
-        ee(!1);
-        return;
-      }
-      w();
-    }
-  }, p = d ? `${j}-${d}` : j;
-  Ne(K, () => i.current, [i]), he(() => {
-    if (h && !s) {
-      const a = l && l.find((u) => u.value === h);
-      a && m(a.value);
-    }
-  }, [
-    h,
-    l,
-    m,
-    s
-  ]);
-  const re = (a) => {
-    const u = a.target.value;
-    Y(!0), m(""), Z(u ?? ""), J?.(u);
-    const b = l.find((ne) => ne.value.toLocaleLowerCase() === u.toLocaleLowerCase());
-    m(b ? b.value : e?.value ?? "");
-  };
-  return /* @__PURE__ */ o("div", {
-    ref: te,
-    className: r("flex flex-col gap-2 w-full relative", B),
-    "data-theme": q,
-    children: [
-      N ? /* @__PURE__ */ o("div", {
-        className: r("flex items-center justify-between", _),
-        children: [/* @__PURE__ */ o("label", {
-          id: p,
-          className: r(ue({ className: W })),
-          htmlFor: p,
-          onClick: () => !t && w(),
-          children: [N, v && /* @__PURE__ */ n("span", {
-            className: "text-red-600 dark:text-red-500 ml-1",
-            children: "*"
-          })]
-        }), M]
-      }) : null,
-      /* @__PURE__ */ o("div", {
-        ref: V,
-        id: p,
-        className: r(fe({
-          className: R,
-          hasError: !!f,
-          disabled: t
-        })),
-        role: "combobox",
-        onClick: ae,
-        "aria-expanded": c,
-        tabIndex: Q.current,
-        "aria-labelledby": p,
-        children: [/* @__PURE__ */ o("div", {
-          className: "flex gap-2.5 items-center flex-1",
-          children: [
-            e?.leftIcon && !C && /* @__PURE__ */ n("span", {
-              className: "w-4 h-4 flex justify-center items-center dark:text-metal-50",
-              children: e.leftIcon
-            }),
-            C && /* @__PURE__ */ n(we, { 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") }),
-            y ? /* @__PURE__ */ n("input", {
-              ref: L,
-              type: "text",
-              value: c ? X : e?.label ?? s ?? "",
-              onChange: re,
-              placeholder: g,
-              className: r(pe({ className: S }), { "text-red-700 placeholder:text-red-700": !!f }),
-              onClick: (a) => {
-                a.stopPropagation(), t || w();
-              },
-              "aria-label": N || g,
-              "aria-labelledby": p,
-              required: v,
-              autoComplete: "off",
-              autoCapitalize: "words",
-              disabled: t,
-              tabIndex: -1,
-              ...I
-            }) : /* @__PURE__ */ o(ie, {
-              variant: "body2",
-              className: r("flex-1 text-zinc-400 text-sm dark:text-metal-400 flex gap-2 items-center", {
-                "text-red-700": !!f,
-                "select-none": !e,
-                "text-metal-800 dark:text-metal-50": e,
-                "text-metal-400/50 dark:text-metal-50/50": t
-              }, e?.wrapperClassNameOnSelectedValue),
-              children: [
-                e?.label || g,
-                " ",
-                e?.showRightComponentOnselectedValue ? e?.rightComponent : null
-              ]
-            })
-          ]
-        }), k ? /* @__PURE__ */ n(le, {
-          size: 16,
-          className: "text-metal-400 animate-spin select-none"
-        }) : !C && /* @__PURE__ */ n(oe, {
-          "data-state": c ? "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", F, {
-            "text-red-700": !!f,
-            "text-metal-400/50 dark:group-focus-within:text-zinc-500": t
-          })
-        })]
-      }),
-      /* @__PURE__ */ n("input", {
-        ref: i,
-        type: "text",
-        name: d,
-        className: "hidden",
-        "aria-hidden": "true",
-        required: v,
-        inert: !0,
-        defaultValue: e?.value ?? s ?? void 0,
-        ...I
-      }),
-      c && /* @__PURE__ */ n(me, {
-        ref: O,
-        additionalOptions: z,
-        className: $,
-        groupedOptions: T,
-        itemClassName: H,
-        name: d,
-        wrapperInputRef: V,
-        inputRef: i,
-        options: l,
-        isLoading: !!k,
-        searchable: y,
-        listItemSecondRowClassName: P,
-        isInfiniteScrollEnabled: E,
-        onFetchMoreOptions: D,
-        noOptionsText: U,
-        visibleItems: A
-      })
-    ]
-  });
-});
-export {
-  Fe as t
-};