@konstructio/ui 0.1.2-alpha.12 → 0.1.2-alpha.121

package/dist/components/Sidebar/components/NavigationSeparator/NavigationSeparator.js

@@ -1,7 +1,12 @@
-import { jsx as r } from "react/jsx-runtime";
-import { cn as o } from "../../../../utils/index.js";
-import { navigationSeparatorVariant as t } from "./NavigationSeparator.variants.js";
-const i = ({ className: a }) => /* @__PURE__ */ r("div", { className: o(t({ className: a })) });
+import { t as r } from "../../../../utils-DnIJruo0.js";
+import { navigationSeparatorVariant as o } from "./NavigationSeparator.variants.js";
+import { jsx as t } from "react/jsx-runtime";
+var i = ({ className: a }) => /* @__PURE__ */ t("div", {
+  "data-konstruct-sidebar-separator": "",
+  role: "separator",
+  "aria-orientation": "horizontal",
+  className: r(o({ className: a }))
+});
 i.displayName = "KonstructSidebarNavigationSeparator";
 export {
   i as NavigationSeparator

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

@@ -1,9 +1,11 @@
-import { c as r } from "../../../../index-D29mdTf5.js";
-const o = r([
-  "border-t",
-  "rounded-full",
-  "my-1.5"
+import { t as a } from "../../../../dist-B9GE4SXf.js";
+var t = a([
+  "h-px",
+  "bg-white/20",
+  "my-3",
+  "mx-2",
+  "shrink-0"
 ]);
 export {
-  o as navigationSeparatorVariant
+  t as navigationSeparatorVariant
 };

package/dist/components/Sidebar/components/NavigationTitle/NavigationTitle.js

@@ -1,12 +1,11 @@
-import { jsx as a } from "react/jsx-runtime";
-import { cn as n } from "../../../../utils/index.js";
-import { navigationTitleVariants as o } from "./NavigationTitle.variants.js";
-const e = ({
-  title: i,
-  className: t,
-  isVisible: r = !0
-}) => r ? /* @__PURE__ */ a("h2", { className: n(o({ className: t })), children: i }) : null;
-e.displayName = "KonstructSidebarNavigationTitle";
+import { t as a } from "../../../../utils-DnIJruo0.js";
+import { navigationTitleVariants as e } from "./NavigationTitle.variants.js";
+import { jsx as n } from "react/jsx-runtime";
+var o = ({ title: i, className: r, isVisible: t = !0 }) => t ? /* @__PURE__ */ n("h2", {
+  className: a(e({ className: r })),
+  children: i
+}) : null;
+o.displayName = "KonstructSidebarNavigationTitle";
 export {
-  e as NavigationTitle
+  o as NavigationTitle
 };

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

@@ -1,5 +1,5 @@
-import { c as t } from "../../../../index-D29mdTf5.js";
-const o = t([
+import { t } from "../../../../dist-B9GE4SXf.js";
+var i = t([
   "text-sm",
   "font-bold",
   "px-4",
@@ -10,5 +10,5 @@ const o = t([
   "selection:text-white"
 ]);
 export {
-  o as navigationTitleVariants
+  i as navigationTitleVariants
 };

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

@@ -1,86 +1,144 @@
-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 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 x, wrapperSiderbarVariants as z } from "../../Sidebar.variants.js";
-const S = ({
-  canResize: g = !0,
-  children: v,
-  dividerClassName: L,
-  maxWith: i = 300,
-  minWith: m = 240,
-  theme: M,
-  wrapperClassName: N
-}) => {
-  const r = d(null), c = d(null), u = d(!1), n = f(
-    (e) => {
-      if (!u.current) {
-        r.current && (r.current.style.opacity = "0");
-        return;
-      }
-      let o = e.clientX;
-      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(() => {
-    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(), u.current = !0, document.addEventListener("mousemove", n), document.addEventListener("mouseup", p);
-    },
-    [n, p]
-  ), t = s(
-    () => a.toArray(v),
-    [v]
-  ), E = s(
-    () => a.toArray(t).find(
-      (e) => l(e) && e.type === C
-    ),
-    [t]
-  ), R = s(
-    () => a.toArray(t).find(
-      (e) => l(e) && e.type === D
-    ),
-    [t]
-  ), A = s(
-    () => a.toArray(t).find(
-      (e) => l(e) && e.type === b
-    ),
-    [t]
-  );
-  return /* @__PURE__ */ V(
-    "aside",
-    {
-      ref: c,
-      className: y(
-        z({
-          className: N
-        })
-      ),
-      "data-theme": M,
-      children: [
-        E,
-        R,
-        A,
-        g && /* @__PURE__ */ j(
-          "div",
-          {
-            ref: r,
-            className: y(x({ className: L })),
-            onMouseDown: w
-          }
-        )
-      ]
+import { t as se } from "../../../../HamburgerTrigger-CfrAnhmG.js";
+import { t as a } from "../../../../utils-DnIJruo0.js";
+import { Drawer as ae } from "../../../Drawer/Drawer.js";
+import { SidebarContext as P } from "../../contexts/SidebarContext.js";
+import { useSidebarMode as de } from "../../hooks/useSidebarMode.js";
+import { dragVariants as le, wrapperSiderbarVariants as _ } from "../../Sidebar.variants.js";
+import { useCallback as m, useEffect as s, useRef as d, useState as E } from "react";
+import { Fragment as ce, jsx as l, jsxs as O } from "react/jsx-runtime";
+var ie = 280, ue = ({ animateOnHover: $ = !0, canResize: j = !0, children: R, dividerClassName: U, drawerBreakpoint: X, drawerClassNames: v, drawerMaxWidth: k = ie, expandedBreakpoint: K, expandOnHover: W = !0, expandAsOverlay: q = !1, initialMode: B, initialWidth: S = 256, maxWith: c = 300, minWith: i = 240, mode: G = "auto", separatorClassName: z, style: T, theme: H, triggerClassName: J, openNavigationLabel: Q, overlayClassName: Y, wrapperClassName: V, onModeChange: b }) => {
+  const e = de(G, K, X, B), [A, h] = E(!1), [F, Z] = E(null), [u, x] = E(null), w = e === "drawer" ? "drawer" : u ?? e, n = d(null), t = d(null), M = d(!1), N = d(!1), y = d(b), C = d(e);
+  s(() => {
+    y.current = b;
+  }, [b]), s(() => {
+    C.current !== e && (C.current = e, y.current?.(e, "viewport"));
+  }, [e]), s(() => {
+    if (e !== "drawer") return;
+    const r = () => {
+      Z(window.innerWidth);
+    };
+    return r(), window.addEventListener("resize", r), () => {
+      window.removeEventListener("resize", r);
+    };
+  }, [e]);
+  const D = m((r) => {
+    if (!M.current) {
+      n.current && (n.current.style.opacity = "0");
+      return;
     }
-  );
+    let o = r.clientX;
+    o < i && (o = i), o > c && (o = c), t.current && n.current && (t.current.style.width = `${o}px`, n.current.classList.add("opacity-100"));
+  }, [c, i]), I = m(() => {
+    M.current = !1, n.current && n.current.classList.remove("opacity-100"), t.current && t.current.classList.remove("transition-none"), document.body.style.userSelect = "", document.body.style.cursor = "", document.removeEventListener("mousemove", D), document.removeEventListener("mouseup", I);
+  }, [D]), ee = (r) => {
+    r.preventDefault(), r.stopPropagation(), M.current = !0, t.current && t.current.classList.add("transition-none"), document.body.style.userSelect = "none", document.body.style.cursor = "col-resize", document.addEventListener("mousemove", D), document.addEventListener("mouseup", I);
+  };
+  s(() => {
+    w !== "expanded" && t.current && (t.current.style.width = "");
+  }, [w]), s(() => {
+    e !== "drawer" && h(!1), x(null);
+  }, [e]), s(() => {
+    if (N.current || w !== "expanded" || !t.current) return;
+    const r = Math.min(Math.max(S, i), c);
+    t.current.style.width = `${r}px`, N.current = !0;
+  }, [
+    S,
+    c,
+    i,
+    w
+  ]);
+  const re = () => {
+    h(!0);
+  }, L = m(() => {
+    h(!1);
+  }, []), te = m(() => {
+    const r = (u ?? e) === "collapsed" ? "expanded" : "collapsed";
+    x(r), y.current?.(r, "user");
+  }, [u, e]), p = q && e === "collapsed" && u === "expanded", g = m(() => {
+    x(null), y.current?.("collapsed", "user");
+  }, []);
+  if (s(() => {
+    if (!p) return;
+    const r = (o) => {
+      o.key === "Escape" && g();
+    };
+    return document.addEventListener("keydown", r), () => {
+      document.removeEventListener("keydown", r);
+    };
+  }, [p, g]), e === "drawer") return /* @__PURE__ */ O(ce, { children: [/* @__PURE__ */ l(se, {
+    isOpen: A,
+    onClick: re,
+    className: J,
+    openNavigationLabel: Q
+  }), /* @__PURE__ */ l(ae, {
+    isOpen: A,
+    onClose: L,
+    position: "left",
+    defaultWidth: F !== null ? Math.min(F, k) : k,
+    fullScreenOnMobile: !1,
+    initialFocus: "panel",
+    theme: H,
+    classNames: {
+      ...v,
+      root: a("z-60", v?.root),
+      panel: a(_({ mode: "expanded" }), "h-full border-r-0", V, v?.panel),
+      content: a("gap-0", v?.content)
+    },
+    children: /* @__PURE__ */ l(P.Provider, {
+      value: {
+        mode: "expanded",
+        isCollapsed: !1,
+        expandOnHover: !1,
+        animateOnHover: !1,
+        separatorClassName: z,
+        closeDrawer: L,
+        canToggle: !1,
+        toggleMode: () => {
+        }
+      },
+      children: /* @__PURE__ */ l("div", {
+        className: "konstruct-sidebar group/sidebar flex flex-col flex-1 min-h-0",
+        "data-mode": "expanded",
+        style: T,
+        children: R
+      })
+    })
+  })] });
+  const f = u ?? e, ne = j && f === "expanded", oe = {
+    mode: f,
+    isCollapsed: f === "collapsed",
+    expandOnHover: W,
+    animateOnHover: $,
+    separatorClassName: z,
+    closeDrawer: p ? g : L,
+    canToggle: !0,
+    toggleMode: te
+  };
+  return /* @__PURE__ */ O(P.Provider, {
+    value: oe,
+    children: [p && /* @__PURE__ */ l("div", {
+      className: a("konstruct-sidebar-overlay fixed inset-0 z-50 bg-black/55", Y),
+      role: "presentation",
+      onClick: g
+    }), /* @__PURE__ */ O("aside", {
+      ref: t,
+      className: a("konstruct-sidebar", _({
+        mode: f,
+        className: V
+      })),
+      "data-theme": H,
+      "data-mode": f,
+      "data-overlay": p ? "" : void 0,
+      style: T,
+      children: [R, ne && /* @__PURE__ */ l("div", {
+        ref: n,
+        className: a(le({ className: U })),
+        onMouseDown: ee
+      })]
+    })]
+  });
 };
-S.displayName = "Sidebar.Wrapper";
+ue.displayName = "Sidebar.Wrapper";
 export {
-  S as Wrapper
+  ue as Wrapper
 };

package/dist/components/Sidebar/components/index.js

@@ -1,18 +1,24 @@
-import { Footer as t } from "./Footer/Footer.js";
-import { Logo as p } from "./Logo/Logo.js";
-import { Navigation as i } from "./Navigation/Navigation.js";
-import { NavigationGroup as m } from "./NavigationGroup/NavigationGroup.js";
-import { NavigationOption as g } from "./NavigationOption/NavigationOption.js";
-import { NavigationSeparator as v } from "./NavigationSeparator/NavigationSeparator.js";
-import { NavigationTitle as l } from "./NavigationTitle/NavigationTitle.js";
+import { t as r } from "../../../HamburgerTrigger-CfrAnhmG.js";
+import { CollapseTrigger as m } from "./CollapseTrigger/CollapseTrigger.js";
+import { Footer as p } from "./Footer/Footer.js";
+import { Label as f } from "./Label/Label.js";
+import { Logo as e } from "./Logo/Logo.js";
+import { NavigationTitle as v } from "./NavigationTitle/NavigationTitle.js";
+import { NavigationGroup as l } from "./NavigationGroup/NavigationGroup.js";
+import { NavigationOption as b } from "./NavigationOption/NavigationOption.js";
+import { NavigationSeparator as u } from "./NavigationSeparator/NavigationSeparator.js";
+import { Navigation as x } from "./Navigation/Navigation.js";
 import { Wrapper as F } from "./Wrapper/Wrapper.js";
 export {
-  t as Footer,
-  p as Logo,
-  i as Navigation,
-  m as NavigationGroup,
-  g as NavigationOption,
-  v as NavigationSeparator,
-  l as NavigationTitle,
+  m as CollapseTrigger,
+  p as Footer,
+  r as HamburgerTrigger,
+  f as Label,
+  e as Logo,
+  x as Navigation,
+  l as NavigationGroup,
+  b as NavigationOption,
+  u as NavigationSeparator,
+  v as NavigationTitle,
   F as Wrapper
 };

package/dist/components/Sidebar/contexts/SidebarContext.js

@@ -0,0 +1,16 @@
+import { createContext as e, useContext as a } from "react";
+var o = e({
+  mode: "expanded",
+  isCollapsed: !1,
+  expandOnHover: !1,
+  animateOnHover: !0,
+  closeDrawer: () => {
+  },
+  canToggle: !1,
+  toggleMode: () => {
+  }
+}), t = () => a(o);
+export {
+  o as SidebarContext,
+  t as useSidebarContext
+};

package/dist/components/Sidebar/contexts/index.js

@@ -0,0 +1,5 @@
+import { SidebarContext as t, useSidebarContext as o } from "./SidebarContext.js";
+export {
+  t as SidebarContext,
+  o as useSidebarContext
+};

package/dist/components/Sidebar/hooks/index.js

@@ -0,0 +1,6 @@
+import { DEFAULT_DRAWER_BREAKPOINT as A, DEFAULT_EXPANDED_BREAKPOINT as D, useSidebarMode as e } from "./useSidebarMode.js";
+export {
+  A as DEFAULT_DRAWER_BREAKPOINT,
+  D as DEFAULT_EXPANDED_BREAKPOINT,
+  e as useSidebarMode
+};

package/dist/components/Sidebar/hooks/useSidebarMode.js

@@ -0,0 +1,10 @@
+import { useMediaQuery as r } from "../../../hooks/useMediaQuery.js";
+var p = 1024, u = 640, x = (e = "auto", i = p, t = 640, a) => {
+  const d = r(`(max-width: ${t - 0.02}px)`), o = r(`(min-width: ${t}px) and (max-width: ${i - 0.02}px)`), n = r(`(min-width: ${i}px)`);
+  return e !== "auto" ? e : d ? "drawer" : o ? "collapsed" : n ? "expanded" : a ?? "expanded";
+};
+export {
+  u as DEFAULT_DRAWER_BREAKPOINT,
+  p as DEFAULT_EXPANDED_BREAKPOINT,
+  x as useSidebarMode
+};

package/dist/components/Skeleton/Skeleton.js

@@ -0,0 +1,18 @@
+import { t as a } from "../../utils-DnIJruo0.js";
+import { skeletonVariants as n } from "./Skeleton.variants.js";
+import { jsx as e } from "react/jsx-runtime";
+var d = ({ className: r, count: t = 1, label: l = "Loading", shape: o, theme: s, wrapperClassName: i }) => /* @__PURE__ */ e("div", {
+  role: "status",
+  "aria-label": l,
+  "aria-busy": "true",
+  "data-theme": s,
+  className: a("flex w-full flex-col gap-2", i),
+  children: Array.from({ length: t }, (f, m) => /* @__PURE__ */ e("span", {
+    "aria-hidden": "true",
+    className: a(n({ shape: o }), r)
+  }, m))
+});
+d.displayName = "KonstructSkeleton";
+export {
+  d as Skeleton
+};

package/dist/components/Skeleton/Skeleton.variants.js

@@ -0,0 +1,25 @@
+import { t as a } from "../../dist-B9GE4SXf.js";
+var r = a([
+  "block",
+  "animate-pulse",
+  "bg-gray-200",
+  "dark:bg-metal-700"
+], {
+  variants: { shape: {
+    rect: [
+      "h-5",
+      "w-full",
+      "rounded"
+    ],
+    text: [
+      "h-3.5",
+      "w-full",
+      "rounded"
+    ],
+    circle: ["size-10", "rounded-full"]
+  } },
+  defaultVariants: { shape: "rect" }
+});
+export {
+  r as skeletonVariants
+};

package/dist/components/Slider/Slider.js

@@ -1,49 +1,43 @@
-import { jsxs as l, jsx as a } from "react/jsx-runtime";
-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";
-const q = V(
-  ({ label: s, defaultValue: c = [0], name: i, theme: u, size: n, showValue: m, ...o }, f) => {
-    const e = b(null), [t, d] = R(c);
-    g(f, () => e.current, [e]), j(() => {
-      e.current && (e.current.value = t.toString());
-    }, [t]);
-    const h = k(
-      (p) => d(p),
-      []
-    );
-    return /* @__PURE__ */ l("div", { className: "w-full relative flex flex-col gap-3", "data-theme": u, children: [
-      /* @__PURE__ */ l(
-        "div",
-        {
-          className: r(
-            "flex items-center",
-            s ? "justify-between" : "justify-end"
-          ),
-          children: [
-            s ? /* @__PURE__ */ a("label", { children: s }) : null,
-            m ? /* @__PURE__ */ a("span", { className: "text-xs", children: t }) : null
-          ]
-        }
-      ),
-      /* @__PURE__ */ a("input", { ref: e, name: i, className: "hidden", type: "number" }),
-      /* @__PURE__ */ l(
-        x,
-        {
-          value: t,
-          className: r(C()),
-          onValueChange: h,
-          ...o,
-          children: [
-            /* @__PURE__ */ a(N, { className: r(w({ size: n })) }),
-            /* @__PURE__ */ a(v, { className: r(y({ size: n })) })
-          ]
-        }
-      )
-    ] });
-  }
-);
+import { t } from "../../utils-DnIJruo0.js";
+import { i as v, r as N, t as S } from "../../dist-fPYIsxyx.js";
+import { sliderVariants as V, thumbVariants as g, trackVariants as j } from "./Slider.variants.js";
+import { forwardRef as b, useEffect as w, useImperativeHandle as y, useRef as R, useState as k } from "react";
+import { jsx as r, jsxs as l } from "react/jsx-runtime";
+var $ = b(({ label: s, labelWrapperClassName: i, defaultValue: c = [0], name: u, theme: m, size: n, showValue: d, ...f }, o) => {
+  const e = R(null), [a, h] = k(c);
+  y(o, () => e.current, [e]), w(() => {
+    e.current && (e.current.value = a.toString());
+  }, [a]);
+  const p = (x) => {
+    h(x);
+  };
+  return /* @__PURE__ */ l("div", {
+    className: "w-full relative flex flex-col gap-3",
+    "data-theme": m,
+    children: [
+      /* @__PURE__ */ l("div", {
+        className: t("flex items-center", s ? "justify-between" : "justify-end", i),
+        children: [s ? /* @__PURE__ */ r("label", { children: s }) : null, d ? /* @__PURE__ */ r("span", {
+          className: "text-xs",
+          children: a
+        }) : null]
+      }),
+      /* @__PURE__ */ r("input", {
+        ref: e,
+        name: u,
+        className: "hidden",
+        type: "number"
+      }),
+      /* @__PURE__ */ l(S, {
+        value: a,
+        className: t(V()),
+        onValueChange: p,
+        ...f,
+        children: [/* @__PURE__ */ r(v, { className: t(j({ size: n })) }), /* @__PURE__ */ r(N, { className: t(g({ size: n })) })]
+      })
+    ]
+  });
+});
 export {
-  q as Slider
+  $ as Slider
 };

package/dist/components/Slider/Slider.variants.js

@@ -1,51 +1,42 @@
-import { c as e } from "../../index-D29mdTf5.js";
-const s = e([
+import { t as r } from "../../dist-B9GE4SXf.js";
+var a = r([
   "relative",
   "flex",
   "items-center",
   "w-full"
-]), a = e(
-  ["relative", "flex-grow", "rounded-full", "bg-kubefirst-secondary"],
-  {
-    variants: {
-      size: {
-        sm: ["h-1"],
-        md: ["h-2"],
-        lg: ["h-3"]
-      }
-    },
-    defaultVariants: {
-      size: "md"
-    }
-  }
-), t = e(
-  [
-    "block",
-    "w-5",
-    "h-5",
-    "rounded-full",
-    "cursor-pointer",
-    "focus-visible:outline-none",
-    "shadow-md",
-    "bg-white",
-    "border",
-    "border-gray-300"
-  ],
-  {
-    variants: {
-      size: {
-        sm: ["w-5", "h-5"],
-        md: ["w-6", "h-6"],
-        lg: ["w-7", "h-7"]
-      }
-    },
-    defaultVariants: {
-      size: "md"
-    }
-  }
-);
+]), i = r([
+  "relative",
+  "flex-grow",
+  "rounded-full",
+  "bg-kubefirst-secondary"
+], {
+  variants: { size: {
+    sm: ["h-1"],
+    md: ["h-2"],
+    lg: ["h-3"]
+  } },
+  defaultVariants: { size: "md" }
+}), s = r([
+  "block",
+  "w-5",
+  "h-5",
+  "rounded-full",
+  "cursor-pointer",
+  "focus-visible:outline-none",
+  "shadow-md",
+  "bg-white",
+  "border",
+  "border-gray-300"
+], {
+  variants: { size: {
+    sm: ["w-5", "h-5"],
+    md: ["w-6", "h-6"],
+    lg: ["w-7", "h-7"]
+  } },
+  defaultVariants: { size: "md" }
+});
 export {
-  s as sliderVariants,
-  t as thumbVariants,
-  a as trackVariants
+  a as sliderVariants,
+  s as thumbVariants,
+  i as trackVariants
 };

package/dist/components/Spinner/Spinner.js

@@ -0,0 +1,5 @@
+"use client";
+import { t as r } from "../../Spinner-CTonkSzG.js";
+export {
+  r as Spinner
+};