@konstructio/ui 0.1.2-alpha.103 → 0.1.2-alpha.105

package/dist/{HamburgerTrigger-1vOTrm8-.js → HamburgerTrigger-DRylBL2d.js}

@@ -1,6 +1,6 @@
 import { o as m } from "./rolldown-runtime-Ck3dxwZt.js";
 import { t as g } from "./prop-types-CfEYxTbR.js";
-import { t as c } from "./dist-CTvBzxW8.js";
+import { t as c } from "./dist-DX0sBG3Q.js";
 import { t as y } from "./utils-Cx-WzRZF.js";
 import { hamburgerTriggerVariants as d } from "./components/Sidebar/components/HamburgerTrigger/HamburgerTrigger.variants.js";
 import a, { forwardRef as v } from "react";

package/dist/{ImageUpload-DZTm4SBB.js → ImageUpload-DiwymQcU.js}

@@ -3,7 +3,7 @@ import { LoaderIcon as _ } from "./assets/icons/components/Loader.js";
 import { PhotoLibraryIcon as ee } from "./assets/icons/components/PhotoLibrary.js";
 import { WarningIcon as te } from "./assets/icons/components/Warning.js";
 import { Button as F } from "./components/Button/Button.js";
-import { t as D } from "./x-a_LpoXzG.js";
+import { t as D } from "./x-a_LpoXzG2.js";
 import { helperTextVariants as ae, imageUploadVariants as re, inputContainerVariants as le, inputFieldVariants as ie, labelVariants as se } from "./components/ImageUpload/ImageUpload.variants.js";
 import { useEffect as ne, useId as ce, useRef as V, useState as N } from "react";
 import { Fragment as P, jsx as e, jsxs as l } from "react/jsx-runtime";

package/dist/{Input-CW0VwW2T.js → Input-Cf44DzfE.js}

@@ -6,7 +6,7 @@ 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 d } from "react/jsx-runtime";
+import { jsx as s, jsxs as h } from "react/jsx-runtime";
 var l = /* @__PURE__ */ W($());
 function g() {
   return g = Object.assign || function(t) {
@@ -109,15 +109,15 @@ w.propTypes = {
   size: l.default.oneOfType([l.default.string, l.default.number])
 };
 w.displayName = "Eye";
-var K = 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"), [h, I] = A(() => f !== "password"), u = typeof r == "string" && r.length >= 0, L = h ? w : x;
-  return /* @__PURE__ */ d("div", {
+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__ */ d("div", {
+      c ? /* @__PURE__ */ h("div", {
         className: i("flex items-center justify-between", k),
-        children: [/* @__PURE__ */ d(m, {
+        children: [/* @__PURE__ */ h(m, {
           component: "label",
           variant: "labelLarge",
           htmlFor: b,
@@ -133,18 +133,18 @@ var K = y(({ className: t, error: r, helperText: n, helperTextClassName: e, isRe
           ]
         }), O]
       }) : null,
-      /* @__PURE__ */ d("div", {
+      /* @__PURE__ */ h("div", {
         className: "relative",
         children: [
           o ? /* @__PURE__ */ s("i", {
-            className: i("absolute", "left-2.5", "top-1/2", "translate-y-[-50%]", "text-slate-400", "dark:text-metal-400", { "text-red-700": u }),
+            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: h ? z.current ? "text" : f : "password",
+            type: d ? z.current ? "text" : f : "password",
             "data-error": u,
             className: i(M({
               className: t,
@@ -156,15 +156,15 @@ var K = y(({ className: t, error: r, helperText: n, helperTextClassName: e, isRe
             ...P
           }),
           u ? /* @__PURE__ */ s("i", {
-            className: i("translate-y-[-50%]", "absolute", "right-3", "text-red-700", "top-1/2", "dark:text-red-500"),
+            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("i", {
-            className: i("translate-y-[-50%]", "absolute", "right-3", "text-slate-400", "top-1/2"),
-            children: /* @__PURE__ */ s(L, {
-              className: "w-5 h-5 cursor-pointer",
-              onClick: () => I(!h)
-            })
+          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
         ]
       }),
@@ -182,7 +182,7 @@ var K = y(({ className: t, error: r, helperText: n, helperTextClassName: e, isRe
     ]
   });
 });
-K.displayName = "KonstructInput";
+H.displayName = "KonstructInput";
 export {
-  K as t
+  H as t
 };

package/dist/{Loading-fD0Xiyeq.js → Loading-DUh9PMJN.js}

@@ -5,8 +5,10 @@ import { jsx as d } from "react/jsx-runtime";
 var m = [["path", {
   d: "M21 12a9 9 0 1 1-6.219-8.56",
   key: "13zald"
-}]], c = i("loader-circle", m), s = ({ className: a, theme: r, ...o }) => /* @__PURE__ */ d(c, {
+}]], l = i("loader-circle", m), s = ({ className: a, theme: r, ...o }) => /* @__PURE__ */ d(l, {
   "data-theme": r,
+  role: "status",
+  "aria-label": "Loading",
   className: e(t({ className: a })),
   ...o
 });

package/dist/Modal-Dyn088X7.js

@@ -0,0 +1,81 @@
+import { t as F } from "./x-BI9jmc7e.js";
+import { t as N } from "./dist-DX0sBG3Q.js";
+import { t as h } from "./utils-Cx-WzRZF.js";
+import { t as k } from "./Combination-CnMM05mt.js";
+import { t as w } from "./react-CvUtBTMg.js";
+import { t as A } from "./es2015-DigR3dar.js";
+import { Body as R } from "./components/Modal/components/Body/Body.js";
+import { Footer as x } from "./components/Modal/components/Footer/Footer.js";
+import { Header as B } from "./components/Modal/components/Header/Header.js";
+import { buttonCloseVariants as C, modalVariants as E } from "./components/Modal/components/Wrapper/Wrapper.variants.js";
+import { Children as d, isValidElement as l, useEffect as g, useRef as H, useState as V } from "react";
+import { createPortal as j } from "react-dom";
+import { Fragment as D, jsx as a, jsxs as c } from "react/jsx-runtime";
+var S = ({ buttonCloseClassName: f, children: r, className: n, containerClassName: s, showCloseButton: p = !0, theme: i, transition: u, onClose: m }) => {
+  const o = d.toArray(r).find((t) => l(t) && t.type === e.Header), y = d.toArray(r).find((t) => l(t) && t.type === e.Body), b = d.toArray(r).find((t) => l(t) && t.type === e.Footer), v = d.toArray(r).filter((t) => !l(t) || ![
+    e.Header,
+    e.Body,
+    e.Footer
+  ].includes(t.type));
+  return /* @__PURE__ */ a(k, { children: /* @__PURE__ */ c("div", {
+    className: h("fixed inset-0 grid place-content-center", s),
+    "data-theme": i,
+    children: [/* @__PURE__ */ a("div", {
+      className: "absolute inset-0 bg-black opacity-70 dark:opacity-85 animate-in fade-in-0",
+      onClick: m,
+      role: "presentation"
+    }), /* @__PURE__ */ a(A, {
+      returnFocus: !0,
+      className: "contents",
+      children: /* @__PURE__ */ c(w.div, {
+        className: h(E({ className: n })),
+        role: "dialog",
+        "aria-modal": "true",
+        layout: "size",
+        transition: u ?? {
+          duration: 0.25,
+          ease: "easeInOut"
+        },
+        children: [
+          o,
+          p && /* @__PURE__ */ c("button", {
+            className: h(C({ className: f })),
+            onClick: m,
+            children: [/* @__PURE__ */ a(F, {}), /* @__PURE__ */ a(N, { children: "Dismiss modal" })]
+          }),
+          y ?? v,
+          b
+        ]
+      })
+    })]
+  }) });
+}, e = ({ isOpen: f, onClose: r, container: n, theme: s, ...p }) => {
+  const i = H(null), [u, m] = V(null);
+  return g(() => {
+    if (!i.current || s || n) return;
+    const o = i.current.closest("[data-theme]");
+    o && m(o);
+  }, [s, n]), g(() => {
+    const o = new AbortController(), y = (b) => {
+      b.code === "Escape" && r?.();
+    };
+    return window.addEventListener("keydown", y, { signal: o.signal }), () => {
+      o.abort();
+    };
+  }, [r]), /* @__PURE__ */ c(D, { children: [/* @__PURE__ */ a("span", {
+    ref: i,
+    "data-testid": "modal-anchor",
+    hidden: !0
+  }), f && j(/* @__PURE__ */ a(S, {
+    ...p,
+    theme: s,
+    onClose: r
+  }), n || u || document.body)] });
+};
+e.Header = B;
+e.Body = R;
+e.Footer = x;
+export {
+  S as n,
+  e as t
+};

package/dist/Sidebar.css

@@ -1 +1 @@
-.konstruct-sidebar{height:100%}aside.konstruct-sidebar{width:16rem}aside.konstruct-sidebar[data-mode=collapsed]{width:4.5rem}.konstruct-sidebar nav{scrollbar-color:#78787866 transparent;scrollbar-width:thin;flex-direction:column;flex:1;width:100%;min-height:0;display:flex;overflow-y:auto}.konstruct-sidebar nav::-webkit-scrollbar{width:8px;height:8px}.konstruct-sidebar nav::-webkit-scrollbar-track{background:0 0}.konstruct-sidebar nav::-webkit-scrollbar-thumb{background-color:#78787866;border-radius:9999px;transition:background-color .2s}.konstruct-sidebar nav::-webkit-scrollbar-thumb:hover{background-color:#78787899}.konstruct-sidebar nav::-webkit-scrollbar-corner{background:0 0}.konstruct-sidebar ul{flex-direction:column;flex-shrink:0;gap:.25rem;margin:0;padding:0 .5rem;list-style:none;display:flex}.konstruct-sidebar li[role=option]{flex-shrink:0}.konstruct-sidebar li[role=option]>a{padding:.625rem}.konstruct-sidebar[data-mode=expanded] li[role=option]>a{padding:.625rem 1rem}.konstruct-sidebar li[role=option]:hover{background-color:var(--konstruct-sidebar-hover-bg,#252a41);color:var(--konstruct-sidebar-hover-color,#fff)}.konstruct-sidebar li[role=option][data-active=true]{background-color:var(--konstruct-sidebar-active-bg,#252a41);color:var(--konstruct-sidebar-active-color,#fff)}.konstruct-sidebar li[role=option]>a{color:inherit;align-items:center;gap:1rem;width:100%;text-decoration:none;display:flex}.konstruct-sidebar[data-mode=collapsed] li[role=option],.konstruct-sidebar[data-mode=collapsed] li[role=option]>a,.konstruct-sidebar[data-mode=collapsed] [data-konstruct-sidebar-logo]>a{justify-content:center}.konstruct-sidebar[data-mode=collapsed] [data-konstruct-sidebar-logo]{align-items:center}.konstruct-sidebar[data-mode=expanded] [data-konstruct-sidebar-logo]{padding:var(--konstruct-sidebar-logo-padding-expanded,var(--konstruct-sidebar-logo-padding,1.25rem 1rem))}.konstruct-sidebar[data-mode=collapsed] [data-konstruct-sidebar-logo]{padding:var(--konstruct-sidebar-logo-padding-collapsed,var(--konstruct-sidebar-logo-padding,0))}.konstruct-sidebar [data-konstruct-sidebar-separator]{background-color:#fff3;flex-shrink:0;height:1px;margin:.75rem .5rem}
+.konstruct-sidebar{height:100%}aside.konstruct-sidebar{width:16rem}aside.konstruct-sidebar[data-mode=collapsed]{width:4.5rem}.konstruct-sidebar nav{scrollbar-color:#78787866 transparent;scrollbar-width:thin;flex-direction:column;flex:1;width:100%;min-height:0;display:flex;overflow-y:auto}.konstruct-sidebar nav::-webkit-scrollbar{width:8px;height:8px}.konstruct-sidebar nav::-webkit-scrollbar-track{background:0 0}.konstruct-sidebar nav::-webkit-scrollbar-thumb{background-color:#78787866;border-radius:9999px;transition:background-color .2s}.konstruct-sidebar nav::-webkit-scrollbar-thumb:hover{background-color:#78787899}.konstruct-sidebar nav::-webkit-scrollbar-corner{background:0 0}.konstruct-sidebar ul{flex-direction:column;flex-shrink:0;gap:.25rem;margin:0;padding:0 .5rem;list-style:none;display:flex}.konstruct-sidebar[data-mode=collapsed] [data-konstruct-sidebar-logo]>a{justify-content:center}.konstruct-sidebar[data-mode=collapsed] [data-konstruct-sidebar-logo]{align-items:center}.konstruct-sidebar[data-mode=expanded] [data-konstruct-sidebar-logo]{padding:var(--konstruct-sidebar-logo-padding-expanded,var(--konstruct-sidebar-logo-padding,1.25rem 1rem))}.konstruct-sidebar[data-mode=collapsed] [data-konstruct-sidebar-logo]{padding:var(--konstruct-sidebar-logo-padding-collapsed,var(--konstruct-sidebar-logo-padding,0))}.konstruct-sidebar[data-mode=collapsed] [data-konstruct-sidebar-logo][data-hide-on-collapse]>:not([data-konstruct-sidebar-collapse-trigger]){display:none}.konstruct-sidebar[data-mode=collapsed] [data-konstruct-sidebar-logo][data-hide-on-collapse]{padding:var(--konstruct-sidebar-logo-padding-collapsed,var(--konstruct-sidebar-logo-padding,1.25rem 0));margin-bottom:0}.konstruct-sidebar [data-konstruct-sidebar-separator]{background-color:#fff3;flex-shrink:0;height:1px;margin:.75rem .5rem}

package/dist/{Spinner-Lw9mZYhg.js → Spinner-CUwE2bLm.js}

@@ -1,4 +1,4 @@
-import { n as m } from "./dist-CTvBzxW8.js";
+import { n as m } from "./dist-DX0sBG3Q.js";
 import { t as L } from "./utils-Cx-WzRZF.js";
 import { Typography as d } from "./components/Typography/Typography.js";
 import { spinnerIconVariants as k, spinnerVariants as g } from "./components/Spinner/Spinner.variants.js";

package/dist/{Switch-WBRr8uOJ.js → Switch-aPhL5rNG.js}

@@ -1,9 +1,9 @@
-import { a as H } from "./dist-DqKFpce5.js";
-import { t as y } from "./dist-CVy-ulDZ.js";
+import { a as H } from "./dist-xCbHbMLA.js";
+import { t as y } from "./dist-CCdbu9GU.js";
 import { t as x } from "./utils-Cx-WzRZF.js";
-import { i as D, r as $, t as G } from "./dist-D4FePjTS.js";
+import { i as D, r as $, t as G } from "./dist-D-yS0HN8.js";
 import { Typography as U } from "./components/Typography/Typography.js";
-import { t as V } from "./dist-C2s4VX-42.js";
+import { t as V } from "./dist-pWlMx4Fi2.js";
 import { switchVariants as W, thumbVariants as X } from "./components/Switch/Switch.variants.js";
 import * as r from "react";
 import { forwardRef as J, useEffect as K, useId as Q, useImperativeHandle as Y, useRef as Z } from "react";