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

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.106",
+  "version": "0.1.2-alpha.107",
   "type": "module",
   "license": "MIT",
   "main": "dist/index.js",
@@ -92,7 +92,7 @@
     "@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.9",
+    "@tanstack/react-virtual": "^3.14.10",
     "chart.js": "^4.5.1",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
@@ -103,8 +103,8 @@
     "google-libphonenumber": "^3.2.46",
     "i18n-iso-countries": "^7.14.0",
     "js-cookie": "^3.0.8",
-    "lucide-react": "^1.28.0",
-    "motion": "^13.0.0",
+    "lucide-react": "^1.34.0",
+    "motion": "^13.1.1",
     "react-chartjs-2": "^5.3.1",
     "react-day-picker": "^10.0.1",
     "react-feather": "^2.0.10",
@@ -145,50 +145,50 @@
     }
   },
   "devDependencies": {
-    "@faker-js/faker": "^10.5.0",
+    "@faker-js/faker": "^10.6.0",
     "@rollup/plugin-alias": "^6.0.0",
-    "@storybook/addon-docs": "^10.5.6",
-    "@storybook/addon-links": "^10.5.6",
-    "@storybook/react-vite": "^10.5.6",
+    "@storybook/addon-docs": "^10.5.10",
+    "@storybook/addon-links": "^10.5.10",
+    "@storybook/react-vite": "^10.5.10",
     "@tailwindcss/vite": "^4.3.3",
-    "@tanstack/react-query": "^5.101.4",
-    "@testing-library/jest-dom": "^7.0.0",
+    "@tanstack/react-query": "^5.102.2",
+    "@testing-library/jest-dom": "^7.0.1",
     "@testing-library/react": "^16.3.2",
-    "@testing-library/user-event": "^14.6.3",
+    "@testing-library/user-event": "^14.6.6",
     "@types/google-libphonenumber": "^7.4.31",
     "@types/jest-axe": "^3.5.9",
     "@types/js-cookie": "^3.0.6",
     "@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",
+    "@types/react-dom": "^19.2.5",
+    "@typescript-eslint/eslint-plugin": "^8.67.0",
+    "@typescript-eslint/parser": "^8.67.0",
     "@vitejs/plugin-react": "^6.0.3",
-    "@vitest/coverage-v8": "^4.1.10",
+    "@vitest/coverage-v8": "^4.1.11",
     "autoprefixer": "^10.5.4",
     "eslint": "^9.39.5",
     "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.6",
+    "eslint-plugin-react-refresh": "^0.5.4",
+    "eslint-plugin-storybook": "^10.5.10",
     "eslint-plugin-vitest": "^0.5.4",
     "glob": "^13.0.6",
     "husky": "^9.1.7",
     "jest-axe": "^11.0.0",
     "jsdom": "^30.0.1",
     "lodash": "^4.18.1",
-    "postcss": "^8.5.25",
+    "postcss": "^8.5.26",
     "prettier": "^3.9.6",
     "rimraf": "^6.1.3",
-    "storybook": "^10.5.6",
+    "storybook": "^10.5.10",
     "tailwindcss": "^4.3.3",
     "ts-node": "^10.9.2",
     "typescript": "^6.0.3",
-    "vite": "^8.2.0",
+    "vite": "^8.2.2",
     "vite-plugin-dts": "^5.0.3",
     "vite-plugin-lib-inject-css": "^2.2.2",
     "vite-plugin-svgr": "^5.2.0",
-    "vitest": "^4.1.10"
+    "vitest": "^4.1.11"
   },
   "overrides": {
     "storybook": "$storybook",

package/dist/Input-wp-rsCmX.js

@@ -1,188 +0,0 @@
-import { o as W } from "./rolldown-runtime-Dw9YIBcH.js";
-import { t as $ } from "./prop-types-BCUW56rg.js";
-import { t as i } from "./utils-Cx-WzRZF.js";
-import { SearchIcon as S } from "./assets/icons/components/Search.js";
-import { WarningIcon as T } from "./assets/icons/components/Warning.js";
-import { Typography as m } from "./components/Typography/Typography.js";
-import { inputVariants as M } from "./components/Input/Input.variants.js";
-import p, { forwardRef as y, useId as C, useRef as R, useState as A } from "react";
-import { jsx as s, jsxs as h } from "react/jsx-runtime";
-var l = /* @__PURE__ */ W($());
-function g() {
-  return g = Object.assign || function(t) {
-    for (var r = 1; r < arguments.length; r++) {
-      var n = arguments[r];
-      for (var e in n) Object.prototype.hasOwnProperty.call(n, e) && (t[e] = n[e]);
-    }
-    return t;
-  }, g.apply(this, arguments);
-}
-function B(t, r) {
-  if (t == null) return {};
-  var n = q(t, r), e, a;
-  if (Object.getOwnPropertySymbols) {
-    var o = Object.getOwnPropertySymbols(t);
-    for (a = 0; a < o.length; a++)
-      e = o[a], !(r.indexOf(e) >= 0) && Object.prototype.propertyIsEnumerable.call(t, e) && (n[e] = t[e]);
-  }
-  return n;
-}
-function q(t, r) {
-  if (t == null) return {};
-  var n = {}, e = Object.keys(t), a, o;
-  for (o = 0; o < e.length; o++)
-    a = e[o], !(r.indexOf(a) >= 0) && (n[a] = t[a]);
-  return n;
-}
-var x = y(function(t, r) {
-  var n = t.color, e = n === void 0 ? "currentColor" : n, a = t.size, o = a === void 0 ? 24 : a, c = B(t, ["color", "size"]);
-  return /* @__PURE__ */ p.createElement("svg", g({
-    ref: r,
-    xmlns: "http://www.w3.org/2000/svg",
-    width: o,
-    height: o,
-    viewBox: "0 0 24 24",
-    fill: "none",
-    stroke: e,
-    strokeWidth: "2",
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  }, c), /* @__PURE__ */ p.createElement("path", { d: "M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24" }), /* @__PURE__ */ p.createElement("line", {
-    x1: "1",
-    y1: "1",
-    x2: "23",
-    y2: "23"
-  }));
-});
-x.propTypes = {
-  color: l.default.string,
-  size: l.default.oneOfType([l.default.string, l.default.number])
-};
-x.displayName = "EyeOff";
-function v() {
-  return v = Object.assign || function(t) {
-    for (var r = 1; r < arguments.length; r++) {
-      var n = arguments[r];
-      for (var e in n) Object.prototype.hasOwnProperty.call(n, e) && (t[e] = n[e]);
-    }
-    return t;
-  }, v.apply(this, arguments);
-}
-function D(t, r) {
-  if (t == null) return {};
-  var n = F(t, r), e, a;
-  if (Object.getOwnPropertySymbols) {
-    var o = Object.getOwnPropertySymbols(t);
-    for (a = 0; a < o.length; a++)
-      e = o[a], !(r.indexOf(e) >= 0) && Object.prototype.propertyIsEnumerable.call(t, e) && (n[e] = t[e]);
-  }
-  return n;
-}
-function F(t, r) {
-  if (t == null) return {};
-  var n = {}, e = Object.keys(t), a, o;
-  for (o = 0; o < e.length; o++)
-    a = e[o], !(r.indexOf(a) >= 0) && (n[a] = t[a]);
-  return n;
-}
-var w = y(function(t, r) {
-  var n = t.color, e = n === void 0 ? "currentColor" : n, a = t.size, o = a === void 0 ? 24 : a, c = D(t, ["color", "size"]);
-  return /* @__PURE__ */ p.createElement("svg", v({
-    ref: r,
-    xmlns: "http://www.w3.org/2000/svg",
-    width: o,
-    height: o,
-    viewBox: "0 0 24 24",
-    fill: "none",
-    stroke: e,
-    strokeWidth: "2",
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  }, c), /* @__PURE__ */ p.createElement("path", { d: "M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" }), /* @__PURE__ */ p.createElement("circle", {
-    cx: "12",
-    cy: "12",
-    r: "3"
-  }));
-});
-w.propTypes = {
-  color: l.default.string,
-  size: l.default.oneOfType([l.default.string, l.default.number])
-};
-w.displayName = "Eye";
-var H = y(({ className: t, error: r, helperText: n, helperTextClassName: e, isRequired: a = !1, isSearch: o = !1, label: c, labelAction: O, labelClassName: j, labelWrapperClassName: k, name: N, theme: E, type: f = "text", ...P }, _) => {
-  const b = C(), z = R(f === "password"), [d, I] = A(() => f !== "password"), u = typeof r == "string" && r.length >= 0, L = d ? w : x;
-  return /* @__PURE__ */ h("div", {
-    className: "flex flex-col gap-2 w-full relative",
-    "data-theme": E,
-    children: [
-      c ? /* @__PURE__ */ h("div", {
-        className: i("flex items-center justify-between", k),
-        children: [/* @__PURE__ */ h(m, {
-          component: "label",
-          variant: "labelLarge",
-          htmlFor: b,
-          className: i("cursor-pointer", "flex", "gap-1", "text-sm", "font-medium", j),
-          children: [
-            c,
-            " ",
-            a && /* @__PURE__ */ s(m, {
-              component: "span",
-              className: i("text-red-600", "dark:text-red-500", "text-xs", "mt-0.5"),
-              children: "*"
-            })
-          ]
-        }), O]
-      }) : null,
-      /* @__PURE__ */ h("div", {
-        className: "relative",
-        children: [
-          o ? /* @__PURE__ */ s("i", {
-            className: i("absolute", "left-2.5", "top-1/2", "-translate-y-1/2", "text-slate-400", "dark:text-metal-400", { "text-red-700": u }),
-            children: /* @__PURE__ */ s(S, { className: "w-5 h-5" })
-          }) : null,
-          /* @__PURE__ */ s("input", {
-            id: c ? b : void 0,
-            ref: _,
-            name: N,
-            type: d ? z.current ? "text" : f : "password",
-            "data-error": u,
-            className: i(M({
-              className: t,
-              variant: u ? "error" : "default"
-            }), {
-              "pr-10": f === "password" || u,
-              "pl-8": o
-            }),
-            ...P
-          }),
-          u ? /* @__PURE__ */ s("i", {
-            className: i("-translate-y-1/2", "absolute", "right-3", "text-red-700", "top-1/2", "dark:text-red-500"),
-            children: /* @__PURE__ */ s(T, { className: "w-5 h-5" })
-          }) : null,
-          f === "password" && !r ? /* @__PURE__ */ s("button", {
-            type: "button",
-            "aria-label": d ? "Hide password" : "Show password",
-            className: i("-translate-y-1/2", "absolute", "cursor-pointer", "right-3", "text-slate-400", "top-1/2"),
-            onClick: () => I(!d),
-            children: /* @__PURE__ */ s(L, { className: "w-5 h-5" })
-          }) : null
-        ]
-      }),
-      r ? /* @__PURE__ */ s(m, {
-        component: "span",
-        className: i("text-xs", "tracking-normal", "text-red-700", "dark:text-red-400"),
-        children: r
-      }) : null,
-      !r && n ? /* @__PURE__ */ s(m, {
-        component: "span",
-        variant: "body1",
-        className: i("text-xs", "text-slate-600", "dark:text-slate-200", "select-none", "tracking-normal", e),
-        children: n
-      }) : null
-    ]
-  });
-});
-H.displayName = "KonstructInput";
-export {
-  H as t
-};

package/dist/Wrapper-R8fik3ah.js

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