@konstructio/ui 0.1.2-alpha.2 → 0.1.2-alpha.20

package/dist/components/Range/Range.js

@@ -1,5 +1,5 @@
 import { jsxs as r, jsx as e } from "react/jsx-runtime";
-import { R as g, T as R, a as V, b as c } from "../../index-DB2XhXHn.js";
+import { R as g, T as R, a as V, b as c } from "../../index-l3NwplN0.js";
 import { forwardRef as v, useRef as b, useState as j, useImperativeHandle as k, useEffect as w, useCallback as y } from "react";
 import { cn as a } from "../../utils/index.js";
 import { rangeOutsideVariants as C, trackVariants as T, thumbVariants as i, rangeVariants as S } from "./Range.variants.js";

package/dist/components/Sidebar/components/Wrapper/Wrapper.js

@@ -1,37 +1,38 @@
-import { Footer as A } from "../Footer/Footer.js";
-import { Logo as b } from "../Logo/Logo.js";
-import { Navigation as C } from "../Navigation/Navigation.js";
+import { Footer as b } from "../Footer/Footer.js";
+import { Logo as C } from "../Logo/Logo.js";
+import { Navigation as D } from "../Navigation/Navigation.js";
 import "../NavigationGroup/NavigationGroup.js";
 import "../NavigationOption/NavigationOption.js";
 import "../NavigationSeparator/NavigationSeparator.js";
 import "../NavigationTitle/NavigationTitle.js";
-import { jsxs as D, jsx as V } from "react/jsx-runtime";
+import { jsxs as V, jsx as j } from "react/jsx-runtime";
 import { useRef as d, useCallback as f, useMemo as s, Children as a, isValidElement as l } from "react";
 import { cn as y } from "../../../../utils/index.js";
-import { dragVariants as j, wrapperSiderbarVariants as x } from "../../Sidebar.variants.js";
-const z = ({
+import { dragVariants as x, wrapperSiderbarVariants as z } from "../../Sidebar.variants.js";
+const S = ({
   canResize: g = !0,
   children: v,
+  dividerClassName: L,
   maxWith: i = 300,
   minWith: m = 240,
-  theme: L,
-  wrapperClassName: M
+  theme: M,
+  wrapperClassName: N
 }) => {
-  const r = d(null), u = d(null), c = d(!1), n = f(
+  const r = d(null), c = d(null), u = d(!1), n = f(
     (e) => {
-      if (!c.current) {
+      if (!u.current) {
         r.current && (r.current.style.opacity = "0");
         return;
       }
       let o = e.clientX;
-      o < m && (o = m), o > i && (o = i), u.current && r.current && (u.current.style.width = `${o}px`, r.current.classList.add("opacity-100"));
+      o < m && (o = m), o > i && (o = i), c.current && r.current && (c.current.style.width = `${o}px`, r.current.classList.add("opacity-100"));
     },
     [i, m]
   ), p = f(() => {
-    c.current = !1, r.current && r.current.classList.remove("opacity-100"), document.removeEventListener("mousemove", n), document.removeEventListener("mouseup", p);
+    u.current = !1, r.current && r.current.classList.remove("opacity-100"), document.removeEventListener("mousemove", n), document.removeEventListener("mouseup", p);
   }, [n]), w = f(
     (e) => {
-      e.preventDefault(), e.stopPropagation(), c.current = !0, document.addEventListener("mousemove", n), document.addEventListener("mouseup", p);
+      e.preventDefault(), e.stopPropagation(), u.current = !0, document.addEventListener("mousemove", n), document.addEventListener("mouseup", p);
     },
     [n, p]
   ), t = s(
@@ -39,39 +40,39 @@ const z = ({
     [v]
   ), E = s(
     () => a.toArray(t).find(
-      (e) => l(e) && e.type === b
+      (e) => l(e) && e.type === C
     ),
     [t]
-  ), N = s(
+  ), R = s(
     () => a.toArray(t).find(
-      (e) => l(e) && e.type === C
+      (e) => l(e) && e.type === D
     ),
     [t]
-  ), R = s(
+  ), A = s(
     () => a.toArray(t).find(
-      (e) => l(e) && e.type === A
+      (e) => l(e) && e.type === b
     ),
     [t]
   );
-  return /* @__PURE__ */ D(
+  return /* @__PURE__ */ V(
     "aside",
     {
-      ref: u,
+      ref: c,
       className: y(
-        x({
-          className: M
+        z({
+          className: N
         })
       ),
-      "data-theme": L,
+      "data-theme": M,
       children: [
         E,
-        N,
         R,
-        g && /* @__PURE__ */ V(
+        A,
+        g && /* @__PURE__ */ j(
           "div",
           {
             ref: r,
-            className: y(j()),
+            className: y(x({ className: L })),
             onMouseDown: w
           }
         )
@@ -79,7 +80,7 @@ const z = ({
     }
   );
 };
-z.displayName = "Sidebar.Wrapper";
+S.displayName = "Sidebar.Wrapper";
 export {
-  z as Wrapper
+  S as Wrapper
 };

package/dist/components/Skeleton/Skeleton.js

@@ -0,0 +1,42 @@
+import { jsx as e } from "react/jsx-runtime";
+import { Button as i } from "../Button/Button.js";
+import { E as l } from "../../ellipsis-vertical-DpnVYRxI.js";
+const m = ({ numberOfRows: r, table: a }) => Array.from({ length: r }).map((d, s) => /* @__PURE__ */ e(
+  "tr",
+  {
+    className: "border border-x-transparent border-t-gray-200 border-b-transparent table w-full table-fixed",
+    children: a.getAllColumns().map(
+      (t) => t.id !== "actions" ? /* @__PURE__ */ e(
+        "td",
+        {
+          className: "px-4 py-3 text-xs",
+          style: { width: t.getSize() },
+          children: /* @__PURE__ */ e("div", { className: "h-5 bg-gray-200 animate-pulse rounded" })
+        },
+        `skeleton-${t.id}`
+      ) : /* @__PURE__ */ e(
+        "td",
+        {
+          className: "px-4 py-3 text-xs",
+          style: { width: t.getSize() },
+          children: /* @__PURE__ */ e(
+            i,
+            {
+              variant: "text",
+              shape: "circle",
+              size: "large",
+              disabled: !0,
+              "aria-hidden": "true",
+              children: /* @__PURE__ */ e(l, { className: "w-5 h-5 text-slate-400" })
+            }
+          )
+        },
+        `skeleton-${t.id}`
+      )
+    )
+  },
+  `skeleton-row-${s}`
+));
+export {
+  m as Skeleton
+};

package/dist/components/Slider/Slider.js

@@ -1,5 +1,5 @@
 import { jsxs as l, jsx as a } from "react/jsx-runtime";
-import { R as x, T as N, b as v } from "../../index-DB2XhXHn.js";
+import { R as x, T as N, b as v } from "../../index-l3NwplN0.js";
 import { forwardRef as V, useRef as b, useState as R, useImperativeHandle as g, useEffect as j, useCallback as k } from "react";
 import { cn as r } from "../../utils/index.js";
 import { trackVariants as w, thumbVariants as y, sliderVariants as C } from "./Slider.variants.js";

package/dist/components/Switch/Switch.js

@@ -3,11 +3,12 @@ import * as h from "react";
 import { forwardRef as H, useRef as M, useId as $, useImperativeHandle as j, useEffect as z } from "react";
 import { a as A, c as U, b as q } from "../../index-BfXxHr_2.js";
 import { u as N } from "../../index-DQH6odE9.js";
-import { u as F, a as L } from "../../index-CZnD2QxM.js";
-import { P } from "../../index-C9T9HQaa.js";
+import { u as F } from "../../index-BZPx6jYI.js";
+import { u as L } from "../../index-BAEWsOG1.js";
+import { P } from "../../index-BVRIAMfe.js";
 import { cn as R } from "../../utils/index.js";
 import { thumbVariants as O, switchVariants as V } from "./Switch.variants.js";
-var b = "Switch", [D, se] = U(b), [W, X] = D(b), y = h.forwardRef(
+var b = "Switch", [D, ce] = U(b), [W, X] = D(b), y = h.forwardRef(
   (e, l) => {
     const {
       __scopeSwitch: t,
@@ -124,7 +125,7 @@ function I(e) {
   return e ? "checked" : "unchecked";
 }
 var J = y, K = E;
-const ce = H(
+const ne = H(
   ({
     name: e,
     alignment: l = "horizontal",
@@ -196,5 +197,5 @@ const ce = H(
   }
 );
 export {
-  ce as Switch
+  ne as Switch
 };

package/dist/components/Tabs/Tabs.js

@@ -1,5 +1,5 @@
 import { jsx as s } from "react/jsx-runtime";
-import { R as e } from "../../index-BAraV3ai.js";
+import { R as e } from "../../index-DQJhMz8c.js";
 import { cn as n } from "../../utils/index.js";
 import { rootVariants as p } from "./Tabs.variants.js";
 import { Content as f } from "./components/Content.js";

package/dist/components/Tabs/Tabs.variants.js

@@ -1,5 +1,5 @@
-import { c as a } from "../../index-D29mdTf5.js";
-const r = a([""], {
+import { c as t } from "../../index-D29mdTf5.js";
+const r = t([""], {
   variants: {
     variant: {
       horizontal: "",
@@ -9,7 +9,7 @@ const r = a([""], {
   defaultVariants: {
     variant: "horizontal"
   }
-}), i = a([""], {
+}), e = t([""], {
   variants: {
     variant: {
       default: ""
@@ -18,7 +18,7 @@ const r = a([""], {
   defaultVariants: {
     variant: "default"
   }
-}), n = a(["flex"], {
+}), i = t(["flex"], {
   variants: {
     variant: {
       default: "flex gap-6",
@@ -29,28 +29,49 @@ const r = a([""], {
   defaultVariants: {
     variant: "default"
   }
-}), e = a(["cursor-pointer", "h-[27px]", "w-fit"], {
-  variants: {
-    variant: {
-      default: "",
-      active: [
-        "text-zinc-700",
-        "font-[600]",
-        "border-b-2",
-        "border-aurora-500",
-        "kubefirst:border-b-2",
-        "kubefirst:border-kubefirst-primary"
-      ],
-      inactive: "text-slate-500 font-[600]"
+}), n = t(
+  [
+    "cursor-pointer",
+    "h-[27px]",
+    "w-fit",
+    "block",
+    "relative",
+    "after:absolute",
+    "after:bottom-0",
+    "after:left-0",
+    "after:right-0",
+    "after:h-[2px]",
+    "after:bg-aurora-500",
+    "after:origin-bottom",
+    'after:content-[""]',
+    "after:scale-y-0",
+    "after:transition-transform",
+    "after:duration-500",
+    "after:transform-gpu",
+    "after:will-change-transform",
+    "kubefirst:after:bg-kubefirst-primary"
+  ],
+  {
+    variants: {
+      variant: {
+        default: "",
+        active: [
+          "text-zinc-700",
+          "font-semibold",
+          "after:scale-y-100",
+          "hover:after:scale-y-140"
+        ],
+        inactive: "text-slate-500 font-[600]"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
     }
-  },
-  defaultVariants: {
-    variant: "default"
   }
-});
+);
 export {
-  i as contentVariants,
-  n as listVariants,
+  e as contentVariants,
+  i as listVariants,
   r as rootVariants,
-  e as triggerVariants
+  n as triggerVariants
 };

package/dist/components/Tabs/components/Content.js

@@ -1,5 +1,5 @@
 import { jsx as r } from "react/jsx-runtime";
-import { C as a } from "../../../index-BAraV3ai.js";
+import { C as a } from "../../../index-DQJhMz8c.js";
 import { cn as m } from "../../../utils/index.js";
 import { contentVariants as s } from "../Tabs.variants.js";
 const e = ({ children: t, className: o, ...n }) => /* @__PURE__ */ r(

package/dist/components/Tabs/components/List.js

@@ -1,5 +1,5 @@
 import { jsx as t } from "react/jsx-runtime";
-import { L as n } from "../../../index-BAraV3ai.js";
+import { L as n } from "../../../index-DQJhMz8c.js";
 import { cn as a } from "../../../utils/index.js";
 import { listVariants as s } from "../Tabs.variants.js";
 const c = ({

package/dist/components/Tabs/components/Trigger.js

@@ -1,14 +1,15 @@
 import { jsx as r } from "react/jsx-runtime";
-import { T as e } from "../../../index-BAraV3ai.js";
+import { T as e } from "../../../index-DQJhMz8c.js";
 import { Typography as m } from "../../Typography/Typography.js";
-import { cn as g } from "../../../utils/index.js";
-import { triggerVariants as n } from "../Tabs.variants.js";
-const p = ({ tab: i, label: a, isActive: o, className: t }) => /* @__PURE__ */ r(e, { value: i, children: /* @__PURE__ */ r(
+import { cn as n } from "../../../utils/index.js";
+import { triggerVariants as p } from "../Tabs.variants.js";
+const s = ({ tab: i, label: a, isActive: o, className: t }) => /* @__PURE__ */ r(e, { value: i, children: /* @__PURE__ */ r(
   m,
   {
     variant: "body2",
-    className: g(
-      n({
+    component: "span",
+    className: n(
+      p({
         variant: o ? "active" : "inactive",
         className: t
       })
@@ -16,7 +17,7 @@ const p = ({ tab: i, label: a, isActive: o, className: t }) => /* @__PURE__ */ r
     children: a
   }
 ) });
-p.displayName = "KonstructTabsTrigger";
+s.displayName = "KonstructTabsTrigger";
 export {
-  p as Trigger
+  s as Trigger
 };

package/dist/components/TagSelect/components/Wrapper/Wrapper.js

@@ -1,86 +1,135 @@
 import "../Item/Item.js";
-import { List as g } from "../List/List.js";
-import { jsxs as m, jsx as e } from "react/jsx-runtime";
-import { forwardRef as w, useId as T, useImperativeHandle as b } from "react";
-import { Tag as C } from "../../../Tag/Tag.js";
-import { cn as r } from "../../../../utils/index.js";
-import { useTagSelect as S } from "../../hooks/useTagSelect.js";
-import { labelVariants as k, tagSelectVariants as R, wrapperVariants as I } from "../../TagSelect.variants.js";
-import { X as O } from "../../../../x-BPcqkRZd.js";
-import { C as V } from "../../../../chevron-up-RLP4nX7V.js";
-import { useTagSelect as j } from "../../contexts/TagSelect.hook.js";
-const B = w(
+import { List as j } from "../List/List.js";
+import { jsxs as g, jsx as i } from "react/jsx-runtime";
+import b, { forwardRef as w, useId as k, useImperativeHandle as T } from "react";
+import { Tag as P } from "../../../Tag/Tag.js";
+import { cn as l } from "../../../../utils/index.js";
+import { useTagSelect as C } from "../../hooks/useTagSelect.js";
+import { labelVariants as S, tagSelectVariants as z, wrapperVariants as R } from "../../TagSelect.variants.js";
+import { X as _ } from "../../../../x-4F_5p77m.js";
+import { P as p } from "../../../../index-N2OStZoU.js";
+import { useTagSelect as I } from "../../contexts/TagSelect.hook.js";
+function u() {
+  return u = Object.assign || function(e) {
+    for (var o = 1; o < arguments.length; o++) {
+      var t = arguments[o];
+      for (var r in t)
+        Object.prototype.hasOwnProperty.call(t, r) && (e[r] = t[r]);
+    }
+    return e;
+  }, u.apply(this, arguments);
+}
+function L(e, o) {
+  if (e == null) return {};
+  var t = W(e, o), r, n;
+  if (Object.getOwnPropertySymbols) {
+    var a = Object.getOwnPropertySymbols(e);
+    for (n = 0; n < a.length; n++)
+      r = a[n], !(o.indexOf(r) >= 0) && Object.prototype.propertyIsEnumerable.call(e, r) && (t[r] = e[r]);
+  }
+  return t;
+}
+function W(e, o) {
+  if (e == null) return {};
+  var t = {}, r = Object.keys(e), n, a;
+  for (a = 0; a < r.length; a++)
+    n = r[a], !(o.indexOf(n) >= 0) && (t[n] = e[n]);
+  return t;
+}
+var d = w(function(e, o) {
+  var t = e.color, r = t === void 0 ? "currentColor" : t, n = e.size, a = n === void 0 ? 24 : n, c = L(e, ["color", "size"]);
+  return /* @__PURE__ */ b.createElement("svg", u({
+    ref: o,
+    xmlns: "http://www.w3.org/2000/svg",
+    width: a,
+    height: a,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: r,
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }, c), /* @__PURE__ */ b.createElement("polyline", {
+    points: "18 15 12 9 6 15"
+  }));
+});
+d.propTypes = {
+  color: p.string,
+  size: p.oneOfType([p.string, p.number])
+};
+d.displayName = "ChevronUp";
+const G = w(
   ({
-    label: o,
-    labelClassName: c,
+    label: e,
+    labelClassName: o,
     name: t,
-    placeholder: p = "Select a value...",
-    theme: d,
-    wrapperClassName: f
-  }, h) => {
-    const i = T(), { selectedTags: n, isOpen: s, onOpen: u, onRemoveTag: x, inputRef: l } = j(), { wrapperRef: N, handleOpen: v } = S();
-    return b(h, () => l.current, [l]), /* @__PURE__ */ m(
+    placeholder: r = "Select a value...",
+    theme: n,
+    wrapperClassName: a
+  }, c) => {
+    const h = k(), { selectedTags: v, isOpen: m, onOpen: x, onRemoveTag: y, inputRef: f } = I(), { wrapperRef: O, handleOpen: N } = C();
+    return T(c, () => f.current, [f]), /* @__PURE__ */ g(
       "div",
       {
-        ref: N,
-        className: r(
-          I({
-            className: f
+        ref: O,
+        className: l(
+          R({
+            className: a
           })
         ),
-        "data-theme": d,
+        "data-theme": n,
         children: [
-          o ? /* @__PURE__ */ e(
+          e ? /* @__PURE__ */ i(
             "label",
             {
-              htmlFor: t ?? i,
-              className: r(
-                k({
-                  className: c
+              htmlFor: t ?? h,
+              className: l(
+                S({
+                  className: o
                 })
               ),
-              onClick: () => u(!0),
-              children: o
+              onClick: () => x(!0),
+              children: e
             }
           ) : null,
-          /* @__PURE__ */ m(
+          /* @__PURE__ */ g(
             "div",
             {
-              id: t ?? i,
-              className: r(R()),
+              id: t ?? h,
+              className: l(z()),
               role: "combobox",
-              onClick: v,
-              "aria-expanded": s,
+              onClick: N,
+              "aria-expanded": m,
               children: [
-                n.length === 0 ? /* @__PURE__ */ e("span", { className: "text-base text-inherit select-none", children: p }) : /* @__PURE__ */ e("div", { className: "flex flex-wrap gap-1.5", children: n.map((a) => /* @__PURE__ */ e(
-                  C,
+                v.length === 0 ? /* @__PURE__ */ i("span", { className: "text-base text-inherit select-none", children: r }) : /* @__PURE__ */ i("div", { className: "flex flex-wrap gap-1.5", children: v.map((s) => /* @__PURE__ */ i(
+                  P,
                   {
-                    ...a,
+                    ...s,
                     className: "select-none",
-                    rightIcon: /* @__PURE__ */ e(O, { className: "w-3 h-3", onClick: () => x(a) }),
-                    "data-value": a.label
+                    rightIcon: /* @__PURE__ */ i(_, { className: "w-3 h-3", onClick: () => y(s) }),
+                    "data-value": s.label
                   },
-                  a.id
+                  s.id
                 )) }),
-                /* @__PURE__ */ e(
-                  V,
+                /* @__PURE__ */ i(
+                  d,
                   {
-                    className: r(
+                    className: l(
                       "w-4 h-4 text-inherit transition-all duration-50 shrink-0",
-                      s ? "rotate-0" : "rotate-180"
+                      m ? "rotate-0" : "rotate-180"
                     )
                   }
                 )
               ]
             }
           ),
-          /* @__PURE__ */ e("input", { ref: l, type: "text", name: t, className: "hidden" }),
-          s ? /* @__PURE__ */ e(g, {}) : null
+          /* @__PURE__ */ i("input", { ref: f, type: "text", name: t, className: "hidden" }),
+          m ? /* @__PURE__ */ i(j, {}) : null
         ]
       }
     );
   }
 );
 export {
-  B as Wrapper
+  G as Wrapper
 };

package/dist/components/TimePicker/components/Wrapper/Wrapper.js

@@ -3,7 +3,7 @@ import { useId as N, useState as y, useRef as E, useCallback as O, useEffect as
 import { cn as m } from "../../../../utils/index.js";
 import { timePickerVariants as L } from "../../TimePicker.variants.js";
 import { WrapperList as j } from "../WrapperList/WrapperList.js";
-import { C as P } from "../../../../chevron-down-BLZPftpV.js";
+import { C as P } from "../../../../chevron-down-J5nS1Tu0.js";
 import { useTimePickerContext as R } from "../../contexts/time-picker.hook.js";
 const V = ({
   name: d,