quirk-ui 0.0.122 → 0.0.124

package/dist/assets/index33.css

@@ -1 +1 @@
-._tabs_16zj6_1{display:flex;flex-direction:column;width:100%}._tabsList_16zj6_7{display:flex;width:100%;background-color:var(--color-tab-background);border-radius:var(--radius-md);position:relative}._left_16zj6_16{justify-content:flex-start}._center_16zj6_20{justify-content:center}._right_16zj6_24{justify-content:flex-end}._indicator_16zj6_28{position:absolute;left:0;top:0;height:100%;border-radius:var(--radius-md);transition:transform .3s ease-in-out,width .3s ease-in-out;z-index:0;border:5px solid var(--color-tab-background)}._indicator_16zj6_28:after{content:"";border-radius:var(--radius-md);background-color:var(--color-primary);display:block;position:absolute;width:100%;height:100%}._tabsTrigger_16zj6_50{flex:1;padding:var(--spacing-md);border:none;background:none;cursor:pointer;color:var(--color-muted);font-weight:var(--font-weight-semibold);font-size:var(--font-size-md);transition:color .3s ease;position:relative;z-index:1;white-space:nowrap}._tabsTrigger_16zj6_50._active_16zj6_67{color:#fff}._tabsPanelWrapper_16zj6_71{position:relative;overflow:hidden;height:auto;transition:height .3s ease-in-out}._tabsPanel_16zj6_71{animation:_fadeSlide_16zj6_1 .3s ease both;position:relative;width:100%;padding:var(--spacing-xl);color:var(--color-text-primary)}@keyframes _fadeSlide_16zj6_1{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
+._tabs_on2k6_1{display:flex;flex-direction:column;width:100%}._tabsList_on2k6_7{display:flex;width:100%;background-color:var(--color-tab-background);border-radius:var(--radius-md);position:relative;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}._tabsList_on2k6_7::-webkit-scrollbar{display:none}._left_on2k6_23{justify-content:flex-start}._center_on2k6_27{justify-content:center}._right_on2k6_31{justify-content:flex-end}._indicator_on2k6_35{position:absolute;left:0;top:0;border-radius:var(--radius-md);transition:transform .3s ease-in-out,width .3s ease-in-out;z-index:0;border:5px solid var(--color-tab-background)}._indicator_on2k6_35:after{content:"";border-radius:var(--radius-md);background-color:var(--color-primary);display:block;position:absolute;width:100%;height:100%}._tabsTrigger_on2k6_57{padding:var(--spacing-md);border:none;background:none;cursor:pointer;color:var(--color-muted);font-weight:var(--font-weight-semibold);font-size:var(--font-size-md);transition:color .3s ease;position:relative;z-index:1;white-space:nowrap;text-align:center;width:100%}._tabsTrigger_on2k6_57._active_on2k6_82{color:#fff}@media (max-width: 767px){._tabsList_on2k6_7{flex-direction:column;overflow-x:visible}._tabsTrigger_on2k6_57{white-space:normal;text-align:left}}._tabsPanelWrapper_on2k6_98{position:relative;overflow:hidden;height:auto;transition:height .3s ease-in-out}._tabsPanel_on2k6_98{animation:_fadeSlide_on2k6_1 .3s ease both;position:relative;width:100%;padding:var(--spacing-xl);color:var(--color-text-primary)}@keyframes _fadeSlide_on2k6_1{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

package/dist/components/Tabs/index.js

@@ -1,87 +1,106 @@
-import { jsx as _, jsxs as $ } from "react/jsx-runtime";
-import I, { useState as j, useId as C, useRef as v, useMemo as A, useLayoutEffect as R } from "react";
-import { TabsContext as N, useTabsContext as m } from "./Context.js";
-import '../../assets/index33.css';const H = "_tabs_16zj6_1", S = "_tabsList_16zj6_7", W = "_left_16zj6_16", k = "_center_16zj6_20", E = "_right_16zj6_24", M = "_indicator_16zj6_28", B = "_tabsTrigger_16zj6_50", D = "_active_16zj6_67", K = "_tabsPanelWrapper_16zj6_71", O = "_tabsPanel_16zj6_71", r = {
-  tabs: H,
-  tabsList: S,
-  left: W,
-  center: k,
-  right: E,
-  indicator: M,
-  tabsTrigger: B,
-  active: D,
-  tabsPanelWrapper: K,
-  tabsPanel: O
-}, X = {
-  left: r.left,
-  center: r.center,
-  right: r.right
+import { jsx as d, jsxs as I } from "react/jsx-runtime";
+import N, { useState as T, useId as M, useRef as w, useMemo as W, useLayoutEffect as x, useEffect as H } from "react";
+import { TabsContext as S, useTabsContext as m } from "./Context.js";
+import '../../assets/index33.css';const z = "_tabs_on2k6_1", j = "_tabsList_on2k6_7", B = "_left_on2k6_23", D = "_center_on2k6_27", K = "_right_on2k6_31", O = "_indicator_on2k6_35", X = "_tabsTrigger_on2k6_57", Y = "_active_on2k6_82", q = "_tabsPanelWrapper_on2k6_98", F = "_tabsPanel_on2k6_98", a = {
+  tabs: z,
+  tabsList: j,
+  left: B,
+  center: D,
+  right: K,
+  indicator: O,
+  tabsTrigger: X,
+  active: Y,
+  tabsPanelWrapper: q,
+  tabsPanel: F
+}, G = {
+  left: a.left,
+  center: a.center,
+  right: a.right
 };
-function P({
+function y({
   children: i,
   defaultIndex: e = 0,
   align: n = "left"
 }) {
-  const [s, f] = j(e), [o, b] = j({ width: 0, left: 0 }), p = C(), c = [], l = [], y = v(null), h = v([]), w = v([]), x = A(
+  const [s, p] = T(e), [o, f] = T({
+    width: 0,
+    left: 0,
+    top: 0,
+    height: 0
+  }), _ = typeof window < "u", b = _ ? x : H, g = M(), P = [], k = [], $ = w(null), L = w([]), R = w([]), A = W(
     () => ({
       activeIndex: s,
-      setActiveIndex: f,
-      idPrefix: p,
+      setActiveIndex: p,
+      idPrefix: g,
       align: n,
-      panelRefs: h,
-      triggerRefs: w,
+      panelRefs: L,
+      triggerRefs: R,
       indicatorStyle: o
     }),
-    [s, p, n, o]
+    [s, g, n, o]
   );
-  return I.Children.forEach(i, (t) => {
-    var a;
-    (t == null ? void 0 : t.type) === z ? c.push(t) : ((t == null ? void 0 : t.type) === T || ((a = t == null ? void 0 : t.type) == null ? void 0 : a.name) === "Panel") && l.push(t);
-  }), R(() => {
-    var a;
-    const t = w.current[s];
-    if (t) {
-      const g = t.getBoundingClientRect(), u = (a = t.parentElement) == null ? void 0 : a.getBoundingClientRect();
-      if (!u) return;
-      const d = g.left - u.left, L = g.width;
-      b({
-        width: L,
-        left: d
-      });
-    }
-  }, [s]), R(() => {
-    const t = y.current, a = h.current[s];
-    if (!t || !a) return;
-    const g = () => {
-      const d = a.offsetHeight;
-      t.offsetHeight, t.style.height = `${d}px`;
+  return N.Children.forEach(i, (t) => {
+    var r;
+    (t == null ? void 0 : t.type) === C ? P.push(t) : ((t == null ? void 0 : t.type) === E || ((r = t == null ? void 0 : t.type) == null ? void 0 : r.name) === "Panel") && k.push(t);
+  }), b(() => {
+    const t = () => {
+      var u;
+      const r = R.current[s];
+      if (r) {
+        const c = r.getBoundingClientRect(), l = (u = r.parentElement) == null ? void 0 : u.getBoundingClientRect();
+        if (!l) return;
+        if (window.innerWidth < 768) {
+          const h = c.top - l.top, v = c.height;
+          f({ top: h, height: v, left: 0, width: l.width });
+        } else {
+          const h = c.left - l.left, v = c.width;
+          f({
+            left: h,
+            width: v,
+            top: 0,
+            height: l.height
+          });
+        }
+      }
+    };
+    if (_)
+      return t(), window.addEventListener("resize", t), () => {
+        window.removeEventListener("resize", t);
+      };
+  }, [s]), x(() => {
+    const t = $.current, r = L.current[s];
+    if (!t || !r) return;
+    const u = () => {
+      const l = r.offsetHeight;
+      t.offsetHeight, t.style.height = `${l}px`;
     };
-    g();
-    const u = new ResizeObserver(g);
-    return u.observe(a), () => {
-      u.disconnect();
+    u();
+    const c = new ResizeObserver(u);
+    return c.observe(r), () => {
+      c.disconnect();
     };
-  }, [s]), /* @__PURE__ */ _(N.Provider, { value: x, children: /* @__PURE__ */ $("div", { className: r.tabs, children: [
-    c,
-    /* @__PURE__ */ _("div", { ref: y, className: r.tabsPanelWrapper, children: l })
+  }, [s]), /* @__PURE__ */ d(S.Provider, { value: A, children: /* @__PURE__ */ I("div", { className: a.tabs, children: [
+    P,
+    /* @__PURE__ */ d("div", { ref: $, className: a.tabsPanelWrapper, children: k })
   ] }) });
 }
-function z({ children: i }) {
+function C({ children: i }) {
   const { align: e, indicatorStyle: n } = m();
-  return /* @__PURE__ */ $(
+  return /* @__PURE__ */ I(
     "div",
     {
-      className: `${r.tabsList} ${X[e]}`,
+      className: `${a.tabsList} ${G[e]}`,
       role: "tablist",
       "aria-label": "Tabs",
       children: [
-        /* @__PURE__ */ _(
+        /* @__PURE__ */ d(
           "div",
           {
-            className: r.indicator,
+            className: a.indicator,
             style: {
               width: n.width,
-              transform: `translateX(${n.left}px)`
+              height: n.height,
+              transform: `translateX(${n.left}px) translateY(${n.top}px)`
             }
           }
         ),
@@ -90,36 +109,36 @@ function z({ children: i }) {
     }
   );
 }
-function q({ children: i, index: e }) {
-  const { activeIndex: n, setActiveIndex: s, idPrefix: f, triggerRefs: o } = m(), b = (c) => {
-    c.key === "ArrowRight" ? s((l) => l + 1) : c.key === "ArrowLeft" && s((l) => Math.max(0, l - 1));
-  }, p = n === e;
-  return /* @__PURE__ */ _(
+function J({ children: i, index: e }) {
+  const { activeIndex: n, setActiveIndex: s, idPrefix: p, triggerRefs: o } = m(), f = (b) => {
+    b.key === "ArrowRight" ? s((g) => g + 1) : b.key === "ArrowLeft" && s((g) => Math.max(0, g - 1));
+  }, _ = n === e;
+  return /* @__PURE__ */ d(
     "button",
     {
-      className: `${r.tabsTrigger} ${p ? r.active : ""}`,
+      className: `${a.tabsTrigger} ${_ ? a.active : ""}`,
       role: "tab",
-      ref: (c) => {
-        o.current[e] = c;
+      ref: (b) => {
+        o.current[e] = b;
       },
-      id: `${f}-tab-${e}`,
+      id: `${p}-tab-${e}`,
       "aria-selected": n === e,
       tabIndex: n === e ? 0 : -1,
       onClick: () => s(e),
-      onKeyDown: b,
+      onKeyDown: f,
       children: i
     }
   );
 }
-function T({ children: i, index: e }) {
-  const { activeIndex: n, idPrefix: s, panelRefs: f } = m(), o = e === n;
-  return /* @__PURE__ */ _(
+function E({ children: i, index: e }) {
+  const { activeIndex: n, idPrefix: s, panelRefs: p } = m(), o = e === n;
+  return /* @__PURE__ */ d(
     "div",
     {
-      ref: (b) => {
-        f.current[e] = b;
+      ref: (f) => {
+        p.current[e] = f;
       },
-      className: r.tabsPanel,
+      className: a.tabsPanel,
       role: "tabpanel",
       id: `${s}-panel-${e}`,
       "aria-labelledby": `${s}-tab-${e}`,
@@ -129,11 +148,11 @@ function T({ children: i, index: e }) {
     }
   );
 }
-P.List = z;
-P.Trigger = q;
-P.Panel = T;
+y.List = C;
+y.Trigger = J;
+y.Panel = E;
 export {
-  P as Tabs,
-  X as alignClassMap,
-  P as default
+  y as Tabs,
+  G as alignClassMap,
+  y as default
 };

package/dist/lib/components/NavBar/index.d.ts

@@ -1,5 +1,5 @@
 import { default as React } from 'react';
-type NavItem = {
+export type NavItem = {
     label: string;
     href?: string;
     sublinks?: NavItem[];

package/dist/lib/components/Tabs/Context.d.ts

@@ -3,6 +3,8 @@ import { Align } from '.';
 export type IndicatorStyle = {
     width: number;
     left: number;
+    top: number;
+    height: number;
 };
 export type TabsContextType = {
     activeIndex: number;

package/dist/styles.css

@@ -30,7 +30,7 @@ ul._list_4w9h5_1{list-style-type:none;padding:0;margin:0}ol._list_4w9h5_1{list-s
 ._progressBarContainer_a1m8u_1{display:flex;align-items:center;justify-content:center;gap:.25rem;width:100%}._progressBar_a1m8u_1{flex:1;height:12px;background-color:#f0f0f0;border-radius:4px;overflow:hidden;position:relative}._fill_a1m8u_18{height:100%;transition:width .3s ease;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;border-radius:4px}._primary_a1m8u_29 ._fill_a1m8u_18{background-color:var(--color-primary)}._success_a1m8u_33 ._fill_a1m8u_18{background-color:var(--color-success)}._warning_a1m8u_37 ._fill_a1m8u_18{background-color:var(--color-warning)}._danger_a1m8u_41 ._fill_a1m8u_18{background-color:var(--color-error)}._label_a1m8u_45{flex:.1;position:relative;width:auto;text-align:center;color:var(--color-text-primary);font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold)}
 ._carousel_1e9ij_1{width:100%}@media (max-width: 767px){._carousel_1e9ij_1{padding:0 var(--spacing-lg)}}._noPointerEvents_1e9ij_9 *{pointer-events:none!important}._trackContainer_1e9ij_13{overflow:hidden;width:100%}@media (max-width: 767px){._trackContainer_1e9ij_13{overflow:visible}}._track_1e9ij_13{display:flex;transition:transform .3s ease;will-change:transform}._page_1e9ij_28{display:flex;gap:var(--spacing-md);padding:0 var(--spacing-sm)}._controls_1e9ij_34{display:flex;justify-content:space-between;align-items:center;margin-top:var(--spacing-md);margin-left:auto;margin-right:auto;padding:0 var(--spacing-md);width:100%}._indicators_1e9ij_45{display:flex;flex-wrap:wrap;max-width:125px;gap:var(--spacing-xs)}._indicator_1e9ij_45{width:10px;height:10px;border-radius:50%;background-color:#e0e0e0;border:1px solid #fff;cursor:pointer;transition:background-color .3s}._indicator_1e9ij_45._active_1e9ij_62{background-color:var(--color-primary)}._buttons_1e9ij_66{display:flex;gap:var(--spacing-md)}._prev_1e9ij_71._disabled_1e9ij_71,._next_1e9ij_72._disabled_1e9ij_71{opacity:.5;pointer-events:none}._buttons_1e9ij_66 button:not(._disabled_1e9ij_71):hover{background-color:var(--color-primary);color:#fff}._prev_1e9ij_71,._next_1e9ij_72{background-color:#e0e0e0;color:var(--color-text-primary);border:1px solid #fff;padding:var(--spacing-sm);cursor:pointer;transition:background-color .3s,color .3s;border-radius:50%;width:40px;height:40px;display:flex;justify-content:center;align-items:center}
 ._drawer_55xty_1{position:fixed;background-color:var(--color-background);transition:transform .3s ease-in-out;z-index:1000;width:300px;height:100%;box-shadow:0 0 10px #00000026;padding:var(--spacing-md)}._right_55xty_12{top:0;right:0;transform:translate(100%)}._left_55xty_18{top:0;left:0;transform:translate(-100%)}._top_55xty_24{top:0;left:0;width:100%;height:auto;transform:translateY(-100%)}._bottom_55xty_32{bottom:0;left:0;width:100%;height:auto;transform:translateY(100%)}._open_55xty_40._right_55xty_12,._open_55xty_40._left_55xty_18{transform:translate(0)}._open_55xty_40._top_55xty_24,._open_55xty_40._bottom_55xty_32{transform:translateY(0)}._overlay_55xty_50{position:fixed;top:0;right:0;bottom:0;left:0;background-color:#0000004d;opacity:0;pointer-events:none;transition:opacity .3s ease-in-out;z-index:999}._overlay_55xty_50._show_55xty_60{opacity:1;pointer-events:all}
-._tabs_16zj6_1{display:flex;flex-direction:column;width:100%}._tabsList_16zj6_7{display:flex;width:100%;background-color:var(--color-tab-background);border-radius:var(--radius-md);position:relative}._left_16zj6_16{justify-content:flex-start}._center_16zj6_20{justify-content:center}._right_16zj6_24{justify-content:flex-end}._indicator_16zj6_28{position:absolute;left:0;top:0;height:100%;border-radius:var(--radius-md);transition:transform .3s ease-in-out,width .3s ease-in-out;z-index:0;border:5px solid var(--color-tab-background)}._indicator_16zj6_28:after{content:"";border-radius:var(--radius-md);background-color:var(--color-primary);display:block;position:absolute;width:100%;height:100%}._tabsTrigger_16zj6_50{flex:1;padding:var(--spacing-md);border:none;background:none;cursor:pointer;color:var(--color-muted);font-weight:var(--font-weight-semibold);font-size:var(--font-size-md);transition:color .3s ease;position:relative;z-index:1;white-space:nowrap}._tabsTrigger_16zj6_50._active_16zj6_67{color:#fff}._tabsPanelWrapper_16zj6_71{position:relative;overflow:hidden;height:auto;transition:height .3s ease-in-out}._tabsPanel_16zj6_71{animation:_fadeSlide_16zj6_1 .3s ease both;position:relative;width:100%;padding:var(--spacing-xl);color:var(--color-text-primary)}@keyframes _fadeSlide_16zj6_1{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
+._tabs_on2k6_1{display:flex;flex-direction:column;width:100%}._tabsList_on2k6_7{display:flex;width:100%;background-color:var(--color-tab-background);border-radius:var(--radius-md);position:relative;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}._tabsList_on2k6_7::-webkit-scrollbar{display:none}._left_on2k6_23{justify-content:flex-start}._center_on2k6_27{justify-content:center}._right_on2k6_31{justify-content:flex-end}._indicator_on2k6_35{position:absolute;left:0;top:0;border-radius:var(--radius-md);transition:transform .3s ease-in-out,width .3s ease-in-out;z-index:0;border:5px solid var(--color-tab-background)}._indicator_on2k6_35:after{content:"";border-radius:var(--radius-md);background-color:var(--color-primary);display:block;position:absolute;width:100%;height:100%}._tabsTrigger_on2k6_57{padding:var(--spacing-md);border:none;background:none;cursor:pointer;color:var(--color-muted);font-weight:var(--font-weight-semibold);font-size:var(--font-size-md);transition:color .3s ease;position:relative;z-index:1;white-space:nowrap;text-align:center;width:100%}._tabsTrigger_on2k6_57._active_on2k6_82{color:#fff}@media (max-width: 767px){._tabsList_on2k6_7{flex-direction:column;overflow-x:visible}._tabsTrigger_on2k6_57{white-space:normal;text-align:left}}._tabsPanelWrapper_on2k6_98{position:relative;overflow:hidden;height:auto;transition:height .3s ease-in-out}._tabsPanel_on2k6_98{animation:_fadeSlide_on2k6_1 .3s ease both;position:relative;width:100%;padding:var(--spacing-xl);color:var(--color-text-primary)}@keyframes _fadeSlide_on2k6_1{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
 ._breadcrumbs_1nbgu_1{display:block;font-size:var(--font-size-sm);line-height:1.5}._list_1nbgu_7{display:flex;flex-wrap:wrap;list-style:none;padding:0;margin:0}._item_1nbgu_15{display:flex;align-items:center}._separator_1nbgu_20{margin:0 var(--spacing-xs);color:var(--color-muted)}._link_1nbgu_25{color:var(--color-muted);text-decoration:none;transition:color .3s ease}._link_1nbgu_25:hover{color:var(--color-primary)}._label_1nbgu_35{color:var(--color-muted)}._active_1nbgu_39{font-weight:var(--font-weight-bold);color:var(--color-primary)}
 ._footer_gfid4_1{background-color:var(--color-background);padding:var(--spacing-xl) var(--spacing-md);font-size:var(--font-size-sm);color:var(--color-text-primary)}._container_gfid4_8{display:flex;flex-direction:column;gap:var(--spacing-xl)}._logo_gfid4_16{font-size:var(--font-size-lg);font-weight:var(--font-weight-bold);color:var(--color-primary)}._groups_gfid4_22{display:flex;flex-wrap:wrap;gap:var(--spacing-xl)}._group_gfid4_22{min-width:140px}._groupTitle_gfid4_32{font-weight:var(--font-weight-semibold);margin-bottom:var(--spacing-xs)}._sublinks_gfid4_37{position:relative}._linkList_gfid4_41{display:flex;flex-direction:column;gap:var(--spacing-xs);list-style:none;padding:0;margin:0}._link_gfid4_41{color:var(--color-text-primary);text-decoration:none;display:block}._link_gfid4_41:hover{color:var(--color-primary)}._bottom_gfid4_60{margin-top:var(--spacing-xl);text-align:right;font-size:var(--font-size-sm);color:var(--color-muted)}
 ._form_s0yvj_1{display:flex;flex-direction:column;gap:var(--spacing-md)}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "quirk-ui",
   "private": false,
-  "version": "0.0.122",
+  "version": "0.0.124",
   "type": "module",
   "exports": {
     ".": {