@konstructio/ui 0.0.12-alpha.7 → 0.0.12-alpha.9

package/dist/components/Breadcrumb/Breadcrumb.variants.js

@@ -1,22 +1,25 @@
 import { c as e } from "../../index-BNmRGtA6.js";
-const a = e(["text-slate-500"], {
-  variants: {
-    theme: {
-      kubefirst: "",
-      colony: "",
-      civo: ""
+const a = e(
+  ["text-slate-500", "cursor-pointer"],
+  {
+    variants: {
+      theme: {
+        kubefirst: "",
+        colony: "",
+        civo: ""
+      },
+      size: {
+        sm: "",
+        base: "",
+        lg: "",
+        xl: ""
+      }
     },
-    size: {
-      sm: "",
-      base: "",
-      lg: "",
-      xl: ""
+    defaultVariants: {
+      theme: "kubefirst"
     }
-  },
-  defaultVariants: {
-    theme: "kubefirst"
   }
-}), s = e(["flex", "gap-1", "items-center"], {
+), s = e(["flex", "gap-1", "items-center"], {
   variants: {
     theme: {
       kubefirst: "",

package/dist/components/Dropdown/components/List/List.variants.js

@@ -1,5 +1,5 @@
-import { c as r } from "../../../../index-BNmRGtA6.js";
-const t = r(
+import { c as t } from "../../../../index-BNmRGtA6.js";
+const o = t(
   [
     "absolute",
     "bg-white",
@@ -20,7 +20,7 @@ const t = r(
     variants: {
       theme: {
         colony: ["border-red-400"],
-        kubefirst: ["border-kubefirst-primary"],
+        kubefirst: [""],
         civo: ""
       }
     },
@@ -30,5 +30,5 @@ const t = r(
   }
 );
 export {
-  t as listVariants
+  o as listVariants
 };

package/dist/components/Dropdown/components/ListItem/ListItem.variants.js

@@ -1,5 +1,5 @@
 import { c as e } from "../../../../index-BNmRGtA6.js";
-const t = e(
+const o = e(
   [
     "cursor-pointer",
     "py-2",
@@ -10,12 +10,14 @@ const t = e(
     "w-full",
     "flex",
     "items-center",
-    "gap-3"
+    "gap-3",
+    "hover:bg-slate-50",
+    "focus:bg-slate-50"
   ],
   {
     variants: {
       theme: {
-        kubefirst: ["focus:bg-purple-100", "hover:bg-purple-100"],
+        kubefirst: [""],
         colony: ["focus:bg-red-100", "hover:bg-red-100"],
         civo: ""
       }
@@ -26,5 +28,5 @@ const t = e(
   }
 );
 export {
-  t as listItemVariants
+  o as listItemVariants
 };

package/dist/components/Dropdown/components/Wrapper.js

@@ -36,7 +36,7 @@ const X = F(
         "label",
         {
           id: s,
-          className: "m-2 cursor-pointer",
+          className: "mb-2 cursor-pointer",
           htmlFor: s,
           onClick: E,
           children: p

package/dist/components/Input/Input.js

@@ -1,22 +1,22 @@
-import { jsxs as y, jsx as a } from "react/jsx-runtime";
-import s, { forwardRef as u, useId as b } from "react";
-import { cn as w } from "../../utils/index.js";
-import { inputVariants as j } from "./Input.variants.js";
-import { P as l } from "../../index-C5psggHV.js";
-import { useTheme as N } from "../../contexts/theme.hook.js";
-function p() {
-  return p = Object.assign || function(e) {
+import { jsxs as O, jsx as c } from "react/jsx-runtime";
+import l, { forwardRef as p, useState as E, useId as k } from "react";
+import { cn as z } from "../../utils/index.js";
+import { inputVariants as N } from "./Input.variants.js";
+import { P as a } from "../../index-C5psggHV.js";
+import { useTheme as $ } from "../../contexts/theme.hook.js";
+function u() {
+  return u = Object.assign || function(e) {
     for (var o = 1; o < arguments.length; o++) {
       var r = arguments[o];
       for (var t in r)
         Object.prototype.hasOwnProperty.call(r, t) && (e[t] = r[t]);
     }
     return e;
-  }, p.apply(this, arguments);
+  }, u.apply(this, arguments);
 }
-function P(e, o) {
+function _(e, o) {
   if (e == null) return {};
-  var r = k(e, o), t, n;
+  var r = L(e, o), t, n;
   if (Object.getOwnPropertySymbols) {
     var i = Object.getOwnPropertySymbols(e);
     for (n = 0; n < i.length; n++)
@@ -24,16 +24,16 @@ function P(e, o) {
   }
   return r;
 }
-function k(e, o) {
+function L(e, o) {
   if (e == null) return {};
   var r = {}, t = Object.keys(e), n, i;
   for (i = 0; i < t.length; i++)
     n = t[i], !(o.indexOf(n) >= 0) && (r[n] = e[n]);
   return r;
 }
-var m = u(function(e, o) {
-  var r = e.color, t = r === void 0 ? "currentColor" : r, n = e.size, i = n === void 0 ? 24 : n, c = P(e, ["color", "size"]);
-  return /* @__PURE__ */ s.createElement("svg", p({
+var y = p(function(e, o) {
+  var r = e.color, t = r === void 0 ? "currentColor" : r, n = e.size, i = n === void 0 ? 24 : n, s = _(e, ["color", "size"]);
+  return /* @__PURE__ */ l.createElement("svg", u({
     ref: o,
     xmlns: "http://www.w3.org/2000/svg",
     width: i,
@@ -44,40 +44,40 @@ var m = u(function(e, o) {
     strokeWidth: "2",
     strokeLinecap: "round",
     strokeLinejoin: "round"
-  }, c), /* @__PURE__ */ s.createElement("circle", {
+  }, s), /* @__PURE__ */ l.createElement("circle", {
     cx: "12",
     cy: "12",
     r: "10"
-  }), /* @__PURE__ */ s.createElement("line", {
+  }), /* @__PURE__ */ l.createElement("line", {
     x1: "12",
     y1: "8",
     x2: "12",
     y2: "12"
-  }), /* @__PURE__ */ s.createElement("line", {
+  }), /* @__PURE__ */ l.createElement("line", {
     x1: "12",
     y1: "16",
     x2: "12.01",
     y2: "16"
   }));
 });
-m.propTypes = {
-  color: l.string,
-  size: l.oneOfType([l.string, l.number])
+y.propTypes = {
+  color: a.string,
+  size: a.oneOfType([a.string, a.number])
 };
-m.displayName = "AlertCircle";
-function f() {
-  return f = Object.assign || function(e) {
+y.displayName = "AlertCircle";
+function m() {
+  return m = Object.assign || function(e) {
     for (var o = 1; o < arguments.length; o++) {
       var r = arguments[o];
       for (var t in r)
         Object.prototype.hasOwnProperty.call(r, t) && (e[t] = r[t]);
     }
     return e;
-  }, f.apply(this, arguments);
+  }, m.apply(this, arguments);
 }
-function E(e, o) {
+function W(e, o) {
   if (e == null) return {};
-  var r = z(e, o), t, n;
+  var r = T(e, o), t, n;
   if (Object.getOwnPropertySymbols) {
     var i = Object.getOwnPropertySymbols(e);
     for (n = 0; n < i.length; n++)
@@ -85,16 +85,16 @@ function E(e, o) {
   }
   return r;
 }
-function z(e, o) {
+function T(e, o) {
   if (e == null) return {};
   var r = {}, t = Object.keys(e), n, i;
   for (i = 0; i < t.length; i++)
     n = t[i], !(o.indexOf(n) >= 0) && (r[n] = e[n]);
   return r;
 }
-var h = u(function(e, o) {
-  var r = e.color, t = r === void 0 ? "currentColor" : r, n = e.size, i = n === void 0 ? 24 : n, c = E(e, ["color", "size"]);
-  return /* @__PURE__ */ s.createElement("svg", f({
+var v = p(function(e, o) {
+  var r = e.color, t = r === void 0 ? "currentColor" : r, n = e.size, i = n === void 0 ? 24 : n, s = W(e, ["color", "size"]);
+  return /* @__PURE__ */ l.createElement("svg", m({
     ref: o,
     xmlns: "http://www.w3.org/2000/svg",
     width: i,
@@ -105,21 +105,74 @@ var h = u(function(e, o) {
     strokeWidth: "2",
     strokeLinecap: "round",
     strokeLinejoin: "round"
-  }, c), /* @__PURE__ */ s.createElement("path", {
+  }, s), /* @__PURE__ */ l.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__ */ s.createElement("line", {
+  }), /* @__PURE__ */ l.createElement("line", {
     x1: "1",
     y1: "1",
     x2: "23",
     y2: "23"
   }));
 });
-h.propTypes = {
-  color: l.string,
-  size: l.oneOfType([l.string, l.number])
+v.propTypes = {
+  color: a.string,
+  size: a.oneOfType([a.string, a.number])
 };
-h.displayName = "EyeOff";
-const _ = u(
+v.displayName = "EyeOff";
+function h() {
+  return h = Object.assign || function(e) {
+    for (var o = 1; o < arguments.length; o++) {
+      var r = arguments[o];
+      for (var t in r)
+        Object.prototype.hasOwnProperty.call(r, t) && (e[t] = r[t]);
+    }
+    return e;
+  }, h.apply(this, arguments);
+}
+function C(e, o) {
+  if (e == null) return {};
+  var r = I(e, o), t, n;
+  if (Object.getOwnPropertySymbols) {
+    var i = Object.getOwnPropertySymbols(e);
+    for (n = 0; n < i.length; n++)
+      t = i[n], !(o.indexOf(t) >= 0) && Object.prototype.propertyIsEnumerable.call(e, t) && (r[t] = e[t]);
+  }
+  return r;
+}
+function I(e, o) {
+  if (e == null) return {};
+  var r = {}, t = Object.keys(e), n, i;
+  for (i = 0; i < t.length; i++)
+    n = t[i], !(o.indexOf(n) >= 0) && (r[n] = e[n]);
+  return r;
+}
+var g = p(function(e, o) {
+  var r = e.color, t = r === void 0 ? "currentColor" : r, n = e.size, i = n === void 0 ? 24 : n, s = C(e, ["color", "size"]);
+  return /* @__PURE__ */ l.createElement("svg", h({
+    ref: o,
+    xmlns: "http://www.w3.org/2000/svg",
+    width: i,
+    height: i,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: t,
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }, s), /* @__PURE__ */ l.createElement("path", {
+    d: "M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"
+  }), /* @__PURE__ */ l.createElement("circle", {
+    cx: "12",
+    cy: "12",
+    r: "3"
+  }));
+});
+g.propTypes = {
+  color: a.string,
+  size: a.oneOfType([a.string, a.number])
+};
+g.displayName = "Eye";
+const S = p(
   ({
     className: e,
     error: o,
@@ -127,43 +180,42 @@ const _ = u(
     labelClassName: t,
     name: n,
     type: i,
-    theme: c,
-    onClickIcon: g,
-    ...d
-  }, x) => {
-    const v = b(), { theme: O } = N();
-    return /* @__PURE__ */ y("div", { className: "flex flex-col gap-1.5 w-full", children: [
-      r ? /* @__PURE__ */ a("label", { htmlFor: v, className: w("cursor-pointer", t), children: r }) : null,
-      /* @__PURE__ */ y("div", { className: "relative", children: [
-        /* @__PURE__ */ a(
+    theme: s,
+    ...w
+  }, b) => {
+    const [f, x] = E(!1), d = k(), { theme: j } = $(), P = f ? g : v;
+    return /* @__PURE__ */ O("div", { className: "flex flex-col gap-1.5 w-full", children: [
+      r ? /* @__PURE__ */ c("label", { htmlFor: d, className: z("cursor-pointer", t), children: r }) : null,
+      /* @__PURE__ */ O("div", { className: "relative", children: [
+        /* @__PURE__ */ c(
           "input",
           {
-            id: v,
-            ref: x,
+            id: d,
+            ref: b,
             name: n,
-            type: i,
-            className: j({
+            type: f ? "text" : i,
+            className: N({
               className: e,
-              theme: c ?? O,
+              theme: s ?? j,
               variant: o ? "error" : "default"
             }),
-            ...d
+            ...w
           }
         ),
-        o ? /* @__PURE__ */ a("i", { className: "absolute right-2 text-red-600 top-0 translate-y-[40%]", children: /* @__PURE__ */ a(m, { className: "w-5 h-5" }) }) : null,
-        i === "password" ? /* @__PURE__ */ a("i", { className: "absolute right-2 text-slate-400 top-0 translate-y-[40%]", children: /* @__PURE__ */ a(
-          h,
+        o ? /* @__PURE__ */ c("i", { className: "absolute right-3 text-red-600 top-0 translate-y-[40%]", children: /* @__PURE__ */ c(y, { className: "w-5 h-5" }) }) : null,
+        i === "password" && !o ? /* @__PURE__ */ c("i", { className: "absolute right-3 text-slate-400 top-0 translate-y-[40%]", children: /* @__PURE__ */ c(
+          P,
           {
             className: "w-5 h-5 cursor-pointer",
-            onClick: g
+            onClick: () => x(!f)
           }
         ) }) : null
       ] }),
-      o ? /* @__PURE__ */ a("span", { className: "text-xs text-red-600 -mt-0.5", children: o }) : null
+      o ? /* @__PURE__ */ c("span", { className: "text-xs text-red-600 -mt-0.5", children: o }) : null
     ] });
   }
 );
-_.displayName = "Input";
+S.displayName = "Input";
 export {
-  _ as Input
+  S as Input
 };

package/dist/components/Input/Input.variants.js

@@ -11,7 +11,8 @@ const o = r(
     "focus-visible:ring-1",
     "h-9",
     "placeholder:text-muted-foreground",
-    "px-3",
+    "pl-3",
+    "pr-10",
     "py-1",
     "rounded-md",
     "shadow-sm",

package/dist/components/Loading/Loading.js

@@ -4,14 +4,14 @@ import { loadingVariants as g } from "./Loading.variants.js";
 import { forwardRef as s, createElement as i } from "react";
 import { useTheme as w } from "../../contexts/theme.hook.js";
 /**
-* @license lucide-react v0.475.0 - ISC
+* @license lucide-react v0.477.0 - ISC
 *
 * This source code is licensed under the ISC license.
 * See the LICENSE file in the root directory of this source tree.
 */
 const C = (r) => r.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase(), m = (...r) => r.filter((e, o, t) => !!e && e.trim() !== "" && t.indexOf(e) === o).join(" ").trim();
 /**
-* @license lucide-react v0.475.0 - ISC
+* @license lucide-react v0.477.0 - ISC
 *
 * This source code is licensed under the ISC license.
 * See the LICENSE file in the root directory of this source tree.
@@ -28,7 +28,7 @@ var L = {
   strokeLinejoin: "round"
 };
 /**
-* @license lucide-react v0.475.0 - ISC
+* @license lucide-react v0.477.0 - ISC
 *
 * This source code is licensed under the ISC license.
 * See the LICENSE file in the root directory of this source tree.
@@ -62,7 +62,7 @@ const k = s(
   )
 );
 /**
-* @license lucide-react v0.475.0 - ISC
+* @license lucide-react v0.477.0 - ISC
 *
 * This source code is licensed under the ISC license.
 * See the LICENSE file in the root directory of this source tree.
@@ -79,7 +79,7 @@ const x = (r, e) => {
   return o.displayName = `${r}`, o;
 };
 /**
-* @license lucide-react v0.475.0 - ISC
+* @license lucide-react v0.477.0 - ISC
 *
 * This source code is licensed under the ISC license.
 * See the LICENSE file in the root directory of this source tree.

package/dist/components/Sidebar/Sidebar.variants.js

@@ -11,7 +11,8 @@ const r = a(
     "px-4",
     "relative",
     "transition-all",
-    "w-[256px]"
+    "w-[72px]",
+    "md:w-[256px]"
   ],
   {
     variants: {

package/dist/components/Sidebar/components/Logo/Logo.variants.js

@@ -1,8 +1,8 @@
 import { c as t } from "../../../../index-BNmRGtA6.js";
-const s = t(
+const o = t(
   [
-    "px-4",
-    "py-5",
+    "md:px-4",
+    "md:py-5",
     "flex",
     "flex-col",
     "items-center",
@@ -12,18 +12,12 @@ const s = t(
     "group",
     "relative",
     "mb-8",
-    "[&>span]:text-gray-100",
-    "[&>span]:text-xs",
-    "[&>span]:font-semibold",
-    "[&>span]:pl-14",
-    "[&>span]:-mt-2",
+    "[&>p]:pl-14",
+    "[&>p]:-mt-2",
     "[&>img]:pt-3",
-    "[&>*>span]:text-gray-100",
-    "[&>*>span]:text-xs",
-    "[&>*>span]:font-semibold",
-    "[&>*>span]:absolute",
-    "[&>*>span]:bottom-0",
-    "[&>*>span]:-mt-2",
+    "[&>*>p]:absolute",
+    "[&>*>p]:bottom-0",
+    "[&>*>p]:-mt-2",
     "[&>*>img]:pt-3",
     "cursor-pointer"
   ],
@@ -41,5 +35,5 @@ const s = t(
   }
 );
 export {
-  s as logoVariants
+  o as logoVariants
 };

package/dist/components/Sidebar/components/NavigationGroup/NavigationGroup.variants.js

@@ -1,5 +1,5 @@
-import { c as t } from "../../../../index-BNmRGtA6.js";
-const e = t(["flex", "flex-col"], {
+import { c as a } from "../../../../index-BNmRGtA6.js";
+const e = a(["flex", "flex-col", "gap-1"], {
   variants: {
     theme: {
       colony: "",

package/dist/components/Sidebar/components/NavigationOption/NavigationOption.variants.js

@@ -1,5 +1,5 @@
-import { c as e } from "../../../../index-BNmRGtA6.js";
-const a = e(
+import { c as t } from "../../../../index-BNmRGtA6.js";
+const a = t(
   [
     "[&>a]:flex",
     "[&>a]:gap-2",
@@ -11,9 +11,10 @@ const a = e(
     "font-normal",
     "font-normal",
     "gap-2",
-    "hover:rounded-xl",
-    "px-4",
-    "py-2.5",
+    "rounded-xl",
+    "md:px-4",
+    "md:py-2.5",
+    "p-2",
     "text-black",
     "w-full"
   ],

package/dist/components/Toast/Toast.variants.js

@@ -1,7 +1,6 @@
 import { c as e } from "../../index-BNmRGtA6.js";
 const a = e(
   [
-    "bg-white",
     "rounded-md",
     "shadow-md",
     "p-4",
@@ -55,7 +54,7 @@ const a = e(
       theme: "kubefirst"
     }
   }
-), i = e(["top-2", "right-2", "w-4", "h-4"], {
+), o = e(["top-2", "right-2", "w-4", "h-4"], {
   variants: {
     theme: {
       kubefirst: ["text-kubefirst-primary"],
@@ -68,7 +67,7 @@ const a = e(
   }
 });
 export {
-  i as closeToastVariants,
+  o as closeToastVariants,
   a as toastVariants,
   r as viewportToastVariants
 };

package/dist/index.d.ts

@@ -165,7 +165,6 @@ declare interface InputProps extends InputHTMLAttributes<HTMLInputElement>, Vari
     label?: string | ReactNode;
     labelClassName?: string;
     error?: string;
-    onClickIcon?: () => void;
 }
 
 declare const inputVariants: (props?: ({

package/dist/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.0.12-alpha.6",
+  "version": "0.0.12-alpha.8",
   "type": "module",
   "license": "MIT",
   "main": "dist/index.js",
@@ -67,11 +67,11 @@
     "clsx": "^2.1.1",
     "cmdk": "^1.0.4",
     "js-cookie": "^3.0.5",
-    "lucide-react": "^0.475.0",
+    "lucide-react": "^0.477.0",
     "react-feather": "^2.0.10",
     "react-focus-lock": "^2.13.6",
     "react-remove-scroll": "^2.6.3",
-    "tailwind-merge": "^3.0.1"
+    "tailwind-merge": "^3.0.2"
   },
   "peerDependencies": {
     "@types/react": "*",
@@ -103,27 +103,27 @@
   },
   "devDependencies": {
     "@rollup/plugin-alias": "^5.1.1",
-    "@storybook/addon-docs": "^8.5.8",
-    "@storybook/addon-essentials": "^8.5.8",
-    "@storybook/addon-interactions": "^8.5.8",
-    "@storybook/addon-links": "^8.5.8",
+    "@storybook/addon-docs": "^8.6.3",
+    "@storybook/addon-essentials": "^8.6.3",
+    "@storybook/addon-interactions": "^8.6.3",
+    "@storybook/addon-links": "^8.6.3",
     "@storybook/addon-styling-webpack": "^1.0.1",
-    "@storybook/blocks": "^8.5.8",
-    "@storybook/react": "^8.5.8",
-    "@storybook/react-vite": "^8.5.8",
-    "@storybook/test": "^8.5.8",
+    "@storybook/blocks": "^8.6.3",
+    "@storybook/react": "^8.6.3",
+    "@storybook/react-vite": "^8.6.3",
+    "@storybook/test": "^8.6.3",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.2.0",
     "@testing-library/user-event": "^14.6.1",
     "@types/jest-axe": "^3.5.9",
     "@types/js-cookie": "^3.0.6",
-    "@types/lodash": "^4.17.15",
+    "@types/lodash": "^4.17.16",
     "@types/react": "^19.0.10",
     "@types/react-dom": "^19.0.4",
-    "@typescript-eslint/eslint-plugin": "^8.24.1",
-    "@typescript-eslint/parser": "^8.24.1",
+    "@typescript-eslint/eslint-plugin": "^8.26.0",
+    "@typescript-eslint/parser": "^8.26.0",
     "@vitejs/plugin-react": "^4.3.4",
-    "@vitest/coverage-v8": "^3.0.6",
+    "@vitest/coverage-v8": "^3.0.7",
     "autoprefixer": "^10.4.20",
     "eslint": "^8.57.0",
     "eslint-plugin-react-hooks": "^4.6.2",
@@ -131,21 +131,21 @@
     "eslint-plugin-storybook": "^0.9.0",
     "glob": "^11.0.1",
     "husky": "^9.1.7",
-    "jest-axe": "^9.0.0",
+    "jest-axe": "^10.0.0",
     "jsdom": "^26.0.0",
     "lodash": "^4.17.21",
     "postcss": "^8.5.3",
-    "prettier": "^3.5.1",
+    "prettier": "^3.5.3",
     "rimraf": "^6.0.1",
-    "storybook": "^8.5.8",
+    "storybook": "^8.6.3",
     "tailwindcss": "^3.4.17",
     "ts-node": "^10.9.2",
-    "typescript": "^5.7.3",
-    "vite": "^6.1.1",
-    "vite-plugin-dts": "^4.5.0",
+    "typescript": "^5.8.2",
+    "vite": "^6.2.0",
+    "vite-plugin-dts": "^4.5.3",
     "vite-plugin-lib-inject-css": "^2.2.1",
     "vite-plugin-svgr": "^4.3.0",
     "vite-tsconfig-paths": "^5.1.4",
-    "vitest": "^3.0.6"
+    "vitest": "^3.0.7"
   }
 }