quirk-ui 0.0.121 → 0.0.122

package/dist/assets/index.css

@@ -1 +1 @@
-:root{--breakpoint-xs: 320px;--breakpoint-sm: 480px;--breakpoint-md: 768px;--breakpoint-lg: 1024px;--breakpoint-xl: 1280px;--breakpoint-2xl: 1536px}:root{--color-text-primary: var(--user-color-text-primary, #111);--color-primary: var(--user-color-primary, #2563eb);--color-primary-foreground: var(--user-color-primary-foreground, #fff);--color-secondary: var(--user-color-secondary, #94a3b8);--color-secondary-foreground: var(--user-color-secondary-foreground, #fff);--color-background: var(--user-color-background, #fff);--color-foreground: var(--user-color-foreground, #fff);--color-error: var(--user-color-error, #bd1919);--color-border: var(--user-color-border, #e2e8f0);--color-muted: var(--user-color-muted, #999);--color-heading: var(--user-color-text-primary, var(--color-text-primary));--color-link: var(--user-color-primary, var(--color-primary));--color-success: var(--user-color-success, #28a745);--color-warning: var(--user-color-warning, #f59e0b);--color-online: var(--user-color-success, var(--color-success));--color-offline: var(--user-color-muted, var(--color-muted));--color-busy: var(--user-color-error, var(--color-error));--color-info-bg: var(--color-primary);--color-info-text: #fff;--color-success-bg: var(--color-success);--color-success-text: #fff;--color-warning-bg: var(--color-warning);--color-warning-text: #fff;--color-error-bg: var(--color-error);--color-error-text: #fff}[data-theme=dark]{--color-text-primary: var(--user-color-text-primary, #fff);--color-primary: var(--user-color-primary, #3b82f6);--color-primary-foreground: var(--user-color-primary-foreground, #fff);--color-secondary: var(--user-color-secondary, #64748b);--color-secondary-foreground: var(--user-color-secondary-foreground, #1e293b);--color-background: var(--user-color-background, #0f172a);--color-foreground: var(--user-color-foreground, #f8fafc);--color-error: var(--user-color-error, #bd1919);--color-border: var(--user-color-border, #334155);--color-muted: var(--user-color-muted, #f1f5f9);--color-heading: var(--user-color-text-primary, var(--color-text-primary));--color-link: var(--user-color-primary, var(--color-primary))}:root{--spacing-xs: .25rem;--spacing-sm: .5rem;--spacing-md: 1rem;--spacing-lg: 1.5rem;--spacing-xl: 2rem}:root{--font-family-sans: -apple-system;--font-size-xs: .75rem;--font-size-sm: .875rem;--font-size-md: 1rem;--font-size-lg: 1.25rem;--font-size-xl: 1.5rem;--font-size-h1: 2.5rem;--font-size-h2: 2rem;--font-size-h3: 1.75rem;--font-size-h4: 1.5rem;--font-size-h5: 1.25rem;--font-size-h6: 1rem;--font-weight-normal: 400;--font-weight-medium: 500;--font-weight-semibold: 600;--font-weight-bold: 700;--line-height-heading: 1.25;--line-height-tight: 1.2;--line-height-normal: 1.5;--line-height-loose: 1.75}:root{--radius-sm: .125rem;--radius-md: .375rem;--radius-lg: .5rem;--radius-full: 9999px}:root{--shadow-sm: 0 1px 2px rgba(0, 0, 0, .05);--shadow-md: 0 4px 6px rgba(0, 0, 0, .1);--shadow-lg: 0 10px 15px rgba(0, 0, 0, .15)}
+:root{--breakpoint-xs: 320px;--breakpoint-sm: 480px;--breakpoint-md: 768px;--breakpoint-lg: 1024px;--breakpoint-xl: 1280px;--breakpoint-2xl: 1536px}:root{--color-text-primary: var(--user-color-text-primary, #111);--color-primary: var(--user-color-primary, #2563eb);--color-primary-foreground: var(--user-color-primary-foreground, #fff);--color-secondary: var(--user-color-secondary, #94a3b8);--color-secondary-foreground: var(--user-color-secondary-foreground, #fff);--color-background: var(--user-color-background, #fff);--color-foreground: var(--user-color-foreground, #fff);--color-error: var(--user-color-error, #bd1919);--color-border: var(--user-color-border, #e2e8f0);--color-muted: var(--user-color-muted, #999);--color-heading: var(--user-color-text-primary, var(--color-text-primary));--color-link: var(--user-color-primary, var(--color-primary));--color-success: var(--user-color-success, #28a745);--color-warning: var(--user-color-warning, #f59e0b);--color-online: var(--user-color-success, var(--color-success));--color-offline: var(--user-color-muted, var(--color-muted));--color-busy: var(--user-color-error, var(--color-error));--color-info-bg: var(--color-primary);--color-info-text: #fff;--color-success-bg: var(--color-success);--color-success-text: #fff;--color-warning-bg: var(--color-warning);--color-warning-text: #fff;--color-error-bg: var(--color-error);--color-error-text: #fff;--color-tab-background: var(--user-color-border, #e2e8f0)}[data-theme=dark]{--color-text-primary: var(--user-color-text-primary, #fff);--color-primary: var(--user-color-primary, #3b82f6);--color-primary-foreground: var(--user-color-primary-foreground, #fff);--color-secondary: var(--user-color-secondary, #64748b);--color-secondary-foreground: var(--user-color-secondary-foreground, #1e293b);--color-background: var(--user-color-background, #0f172a);--color-foreground: var(--user-color-foreground, #f8fafc);--color-error: var(--user-color-error, #bd1919);--color-border: var(--user-color-border, #334155);--color-muted: var(--user-color-muted, #f1f5f9);--color-heading: var(--user-color-text-primary, var(--color-text-primary));--color-link: var(--user-color-primary, var(--color-primary))}:root{--spacing-xs: .25rem;--spacing-sm: .5rem;--spacing-md: 1rem;--spacing-lg: 1.5rem;--spacing-xl: 2rem}:root{--font-family-sans: -apple-system;--font-size-xs: .75rem;--font-size-sm: .875rem;--font-size-md: 1rem;--font-size-lg: 1.25rem;--font-size-xl: 1.5rem;--font-size-h1: 2.5rem;--font-size-h2: 2rem;--font-size-h3: 1.75rem;--font-size-h4: 1.5rem;--font-size-h5: 1.25rem;--font-size-h6: 1rem;--font-weight-normal: 400;--font-weight-medium: 500;--font-weight-semibold: 600;--font-weight-bold: 700;--line-height-heading: 1.25;--line-height-tight: 1.2;--line-height-normal: 1.5;--line-height-loose: 1.75}:root{--radius-sm: .125rem;--radius-md: .375rem;--radius-lg: .5rem;--radius-full: 9999px}:root{--shadow-sm: 0 1px 2px rgba(0, 0, 0, .05);--shadow-md: 0 4px 6px rgba(0, 0, 0, .1);--shadow-lg: 0 10px 15px rgba(0, 0, 0, .15)}

package/dist/assets/index2.css

@@ -1 +1 @@
-:root{--color-text-primary: var(--user-color-text-primary, #111);--color-primary: var(--user-color-primary, #2563eb);--color-primary-foreground: var(--user-color-primary-foreground, #fff);--color-secondary: var(--user-color-secondary, #94a3b8);--color-secondary-foreground: var(--user-color-secondary-foreground, #fff);--color-background: var(--user-color-background, #fff);--color-foreground: var(--user-color-foreground, #fff);--color-error: var(--user-color-error, #bd1919);--color-border: var(--user-color-border, #e2e8f0);--color-muted: var(--user-color-muted, #999);--color-heading: var(--user-color-text-primary, var(--color-text-primary));--color-link: var(--user-color-primary, var(--color-primary));--color-success: var(--user-color-success, #28a745);--color-warning: var(--user-color-warning, #f59e0b);--color-online: var(--user-color-success, var(--color-success));--color-offline: var(--user-color-muted, var(--color-muted));--color-busy: var(--user-color-error, var(--color-error));--color-info-bg: var(--color-primary);--color-info-text: #fff;--color-success-bg: var(--color-success);--color-success-text: #fff;--color-warning-bg: var(--color-warning);--color-warning-text: #fff;--color-error-bg: var(--color-error);--color-error-text: #fff}[data-theme=dark]{--color-text-primary: var(--user-color-text-primary, #fff);--color-primary: var(--user-color-primary, #3b82f6);--color-primary-foreground: var(--user-color-primary-foreground, #fff);--color-secondary: var(--user-color-secondary, #64748b);--color-secondary-foreground: var(--user-color-secondary-foreground, #1e293b);--color-background: var(--user-color-background, #0f172a);--color-foreground: var(--user-color-foreground, #f8fafc);--color-error: var(--user-color-error, #bd1919);--color-border: var(--user-color-border, #334155);--color-muted: var(--user-color-muted, #f1f5f9);--color-heading: var(--user-color-text-primary, var(--color-text-primary));--color-link: var(--user-color-primary, var(--color-primary))}
+:root{--color-text-primary: var(--user-color-text-primary, #111);--color-primary: var(--user-color-primary, #2563eb);--color-primary-foreground: var(--user-color-primary-foreground, #fff);--color-secondary: var(--user-color-secondary, #94a3b8);--color-secondary-foreground: var(--user-color-secondary-foreground, #fff);--color-background: var(--user-color-background, #fff);--color-foreground: var(--user-color-foreground, #fff);--color-error: var(--user-color-error, #bd1919);--color-border: var(--user-color-border, #e2e8f0);--color-muted: var(--user-color-muted, #999);--color-heading: var(--user-color-text-primary, var(--color-text-primary));--color-link: var(--user-color-primary, var(--color-primary));--color-success: var(--user-color-success, #28a745);--color-warning: var(--user-color-warning, #f59e0b);--color-online: var(--user-color-success, var(--color-success));--color-offline: var(--user-color-muted, var(--color-muted));--color-busy: var(--user-color-error, var(--color-error));--color-info-bg: var(--color-primary);--color-info-text: #fff;--color-success-bg: var(--color-success);--color-success-text: #fff;--color-warning-bg: var(--color-warning);--color-warning-text: #fff;--color-error-bg: var(--color-error);--color-error-text: #fff;--color-tab-background: var(--user-color-border, #e2e8f0)}[data-theme=dark]{--color-text-primary: var(--user-color-text-primary, #fff);--color-primary: var(--user-color-primary, #3b82f6);--color-primary-foreground: var(--user-color-primary-foreground, #fff);--color-secondary: var(--user-color-secondary, #64748b);--color-secondary-foreground: var(--user-color-secondary-foreground, #1e293b);--color-background: var(--user-color-background, #0f172a);--color-foreground: var(--user-color-foreground, #f8fafc);--color-error: var(--user-color-error, #bd1919);--color-border: var(--user-color-border, #334155);--color-muted: var(--user-color-muted, #f1f5f9);--color-heading: var(--user-color-text-primary, var(--color-text-primary));--color-link: var(--user-color-primary, var(--color-primary))}

package/dist/assets/index33.css

@@ -1 +1 @@
-._tabs_1wmov_1{display:flex;flex-direction:column;width:100%}._tabsList_1wmov_7{display:flex;width:100%;border-bottom:2px solid var(--color-border)}._left_1wmov_13{justify-content:flex-start}._center_1wmov_17{justify-content:center}._right_1wmov_21{justify-content:flex-end}._tabsTrigger_1wmov_25{flex:1;padding:var(--spacing-md);border:none;border-bottom:2px solid transparent;background:none;cursor:pointer;color:var(--color-muted);font-weight:var(--font-weight-semibold);font-size:var(--font-size-md);transition:color .3s ease,border-color .3s ease;position:relative;top:2px}._tabsTrigger_1wmov_25._active_1wmov_40{border-color:var(--color-primary);color:var(--color-primary)}._tabsPanelWrapper_1wmov_45{position:relative;overflow:hidden;height:auto;transition:height .3s ease-in-out}._tabsPanel_1wmov_45{animation:_fadeSlide_1wmov_1 .3s ease both;position:relative;width:100%;padding:var(--spacing-xl);color:var(--color-text-primary)}@keyframes _fadeSlide_1wmov_1{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
+._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)}}

package/dist/components/Tabs/index.js

@@ -1,104 +1,139 @@
-import { jsx as f, jsxs as L } from "react/jsx-runtime";
-import d, { useState as h, useId as x, useRef as _, useMemo as I, useLayoutEffect as R } from "react";
-import { TabsContext as A, useTabsContext as p } from "./Context.js";
-import '../../assets/index33.css';const C = "_tabs_1wmov_1", N = "_tabsList_1wmov_7", H = "_left_1wmov_13", W = "_center_1wmov_17", k = "_right_1wmov_21", M = "_tabsTrigger_1wmov_25", j = "_active_1wmov_40", D = "_tabsPanelWrapper_1wmov_45", E = "_tabsPanel_1wmov_45", r = {
-  tabs: C,
-  tabsList: N,
-  left: H,
-  center: W,
-  right: k,
-  tabsTrigger: M,
-  active: j,
-  tabsPanelWrapper: D,
-  tabsPanel: E
-}, K = {
+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
 };
-function g({
-  children: n,
+function P({
+  children: i,
   defaultIndex: e = 0,
-  align: a = "left"
+  align: n = "left"
 }) {
-  const [s, l] = h(e), o = x(), u = [], v = [], b = _(null), i = _([]), $ = I(
-    () => ({ activeIndex: s, setActiveIndex: l, idPrefix: o, align: a, panelRefs: i }),
-    [s, o, a]
+  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(
+    () => ({
+      activeIndex: s,
+      setActiveIndex: f,
+      idPrefix: p,
+      align: n,
+      panelRefs: h,
+      triggerRefs: w,
+      indicatorStyle: o
+    }),
+    [s, p, n, o]
   );
-  return d.Children.forEach(n, (t) => {
-    var c;
-    (t == null ? void 0 : t.type) === P ? u.push(t) : ((t == null ? void 0 : t.type) === y || ((c = t == null ? void 0 : t.type) == null ? void 0 : c.name) === "Panel") && v.push(t);
+  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(() => {
-    const t = b.current, c = i.current[s];
-    if (!t || !c) return;
-    const m = () => {
-      const T = c.offsetHeight;
-      t.offsetHeight, t.style.height = `${T}px`;
+    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`;
     };
-    m();
-    const w = new ResizeObserver(m);
-    return w.observe(c), () => {
-      w.disconnect();
+    g();
+    const u = new ResizeObserver(g);
+    return u.observe(a), () => {
+      u.disconnect();
     };
-  }, [s]), /* @__PURE__ */ f(A.Provider, { value: $, children: /* @__PURE__ */ L("div", { className: r.tabs, children: [
-    u,
-    /* @__PURE__ */ f("div", { ref: b, className: r.tabsPanelWrapper, children: v })
+  }, [s]), /* @__PURE__ */ _(N.Provider, { value: x, children: /* @__PURE__ */ $("div", { className: r.tabs, children: [
+    c,
+    /* @__PURE__ */ _("div", { ref: y, className: r.tabsPanelWrapper, children: l })
   ] }) });
 }
-function P({ children: n }) {
-  const { align: e } = p();
-  return /* @__PURE__ */ f(
+function z({ children: i }) {
+  const { align: e, indicatorStyle: n } = m();
+  return /* @__PURE__ */ $(
     "div",
     {
-      className: `${r.tabsList} ${K[e]}`,
+      className: `${r.tabsList} ${X[e]}`,
       role: "tablist",
       "aria-label": "Tabs",
-      children: n
+      children: [
+        /* @__PURE__ */ _(
+          "div",
+          {
+            className: r.indicator,
+            style: {
+              width: n.width,
+              transform: `translateX(${n.left}px)`
+            }
+          }
+        ),
+        i
+      ]
     }
   );
 }
-function z({ children: n, index: e }) {
-  const { activeIndex: a, setActiveIndex: s, idPrefix: l } = p(), o = _(null), u = (b) => {
-    b.key === "ArrowRight" ? s((i) => i + 1) : b.key === "ArrowLeft" && s((i) => Math.max(0, i - 1));
-  }, v = a === e;
-  return /* @__PURE__ */ f(
+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__ */ _(
     "button",
     {
-      className: `${r.tabsTrigger} ${v ? r.active : ""}`,
+      className: `${r.tabsTrigger} ${p ? r.active : ""}`,
       role: "tab",
-      ref: o,
-      id: `${l}-tab-${e}`,
-      "aria-selected": a === e,
-      tabIndex: a === e ? 0 : -1,
+      ref: (c) => {
+        o.current[e] = c;
+      },
+      id: `${f}-tab-${e}`,
+      "aria-selected": n === e,
+      tabIndex: n === e ? 0 : -1,
       onClick: () => s(e),
-      onKeyDown: u,
-      children: n
+      onKeyDown: b,
+      children: i
     }
   );
 }
-function y({ children: n, index: e }) {
-  const { activeIndex: a, idPrefix: s, panelRefs: l } = p();
-  return e !== a ? null : /* @__PURE__ */ f(
+function T({ children: i, index: e }) {
+  const { activeIndex: n, idPrefix: s, panelRefs: f } = m(), o = e === n;
+  return /* @__PURE__ */ _(
     "div",
     {
-      ref: (o) => {
-        l.current[e] = o;
+      ref: (b) => {
+        f.current[e] = b;
       },
       className: r.tabsPanel,
       role: "tabpanel",
       id: `${s}-panel-${e}`,
       "aria-labelledby": `${s}-tab-${e}`,
-      "aria-hidden": a !== e,
-      hidden: a !== e,
-      children: n
+      "aria-hidden": !o,
+      hidden: !o,
+      children: i
     }
   );
 }
-g.List = P;
-g.Trigger = z;
-g.Panel = y;
+P.List = z;
+P.Trigger = q;
+P.Panel = T;
 export {
-  g as Tabs,
-  K as alignClassMap,
-  g as default
+  P as Tabs,
+  X as alignClassMap,
+  P as default
 };

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

@@ -1,5 +1,9 @@
 import { default as React } from 'react';
 import { Align } from '.';
+export type IndicatorStyle = {
+    width: number;
+    left: number;
+};
 export type TabsContextType = {
     activeIndex: number;
     setActiveIndex: React.Dispatch<React.SetStateAction<number>>;
@@ -7,6 +11,8 @@ export type TabsContextType = {
     align: Align;
     panelRefs: React.RefObject<(HTMLDivElement | null)[]>;
     setWrapperHeight?: () => void;
+    triggerRefs: React.RefObject<(HTMLButtonElement | null)[]>;
+    indicatorStyle: IndicatorStyle;
 };
 export declare const TabsContext: React.Context<TabsContextType | null>;
 export declare function useTabsContext(): TabsContextType;

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

@@ -22,6 +22,6 @@ export declare namespace Tabs {
     var Panel: ({ children, index }: {
         children: ReactNode;
         index: number;
-    }) => import("react/jsx-runtime").JSX.Element | null;
+    }) => import("react/jsx-runtime").JSX.Element;
 }
 export default Tabs;

package/dist/styles.css

@@ -1,5 +1,5 @@
-:root{--breakpoint-xs: 320px;--breakpoint-sm: 480px;--breakpoint-md: 768px;--breakpoint-lg: 1024px;--breakpoint-xl: 1280px;--breakpoint-2xl: 1536px}:root{--color-text-primary: var(--user-color-text-primary, #111);--color-primary: var(--user-color-primary, #2563eb);--color-primary-foreground: var(--user-color-primary-foreground, #fff);--color-secondary: var(--user-color-secondary, #94a3b8);--color-secondary-foreground: var(--user-color-secondary-foreground, #fff);--color-background: var(--user-color-background, #fff);--color-foreground: var(--user-color-foreground, #fff);--color-error: var(--user-color-error, #bd1919);--color-border: var(--user-color-border, #e2e8f0);--color-muted: var(--user-color-muted, #999);--color-heading: var(--user-color-text-primary, var(--color-text-primary));--color-link: var(--user-color-primary, var(--color-primary));--color-success: var(--user-color-success, #28a745);--color-warning: var(--user-color-warning, #f59e0b);--color-online: var(--user-color-success, var(--color-success));--color-offline: var(--user-color-muted, var(--color-muted));--color-busy: var(--user-color-error, var(--color-error));--color-info-bg: var(--color-primary);--color-info-text: #fff;--color-success-bg: var(--color-success);--color-success-text: #fff;--color-warning-bg: var(--color-warning);--color-warning-text: #fff;--color-error-bg: var(--color-error);--color-error-text: #fff}[data-theme=dark]{--color-text-primary: var(--user-color-text-primary, #fff);--color-primary: var(--user-color-primary, #3b82f6);--color-primary-foreground: var(--user-color-primary-foreground, #fff);--color-secondary: var(--user-color-secondary, #64748b);--color-secondary-foreground: var(--user-color-secondary-foreground, #1e293b);--color-background: var(--user-color-background, #0f172a);--color-foreground: var(--user-color-foreground, #f8fafc);--color-error: var(--user-color-error, #bd1919);--color-border: var(--user-color-border, #334155);--color-muted: var(--user-color-muted, #f1f5f9);--color-heading: var(--user-color-text-primary, var(--color-text-primary));--color-link: var(--user-color-primary, var(--color-primary))}:root{--spacing-xs: .25rem;--spacing-sm: .5rem;--spacing-md: 1rem;--spacing-lg: 1.5rem;--spacing-xl: 2rem}:root{--font-family-sans: -apple-system;--font-size-xs: .75rem;--font-size-sm: .875rem;--font-size-md: 1rem;--font-size-lg: 1.25rem;--font-size-xl: 1.5rem;--font-size-h1: 2.5rem;--font-size-h2: 2rem;--font-size-h3: 1.75rem;--font-size-h4: 1.5rem;--font-size-h5: 1.25rem;--font-size-h6: 1rem;--font-weight-normal: 400;--font-weight-medium: 500;--font-weight-semibold: 600;--font-weight-bold: 700;--line-height-heading: 1.25;--line-height-tight: 1.2;--line-height-normal: 1.5;--line-height-loose: 1.75}:root{--radius-sm: .125rem;--radius-md: .375rem;--radius-lg: .5rem;--radius-full: 9999px}:root{--shadow-sm: 0 1px 2px rgba(0, 0, 0, .05);--shadow-md: 0 4px 6px rgba(0, 0, 0, .1);--shadow-lg: 0 10px 15px rgba(0, 0, 0, .15)}
-:root{--color-text-primary: var(--user-color-text-primary, #111);--color-primary: var(--user-color-primary, #2563eb);--color-primary-foreground: var(--user-color-primary-foreground, #fff);--color-secondary: var(--user-color-secondary, #94a3b8);--color-secondary-foreground: var(--user-color-secondary-foreground, #fff);--color-background: var(--user-color-background, #fff);--color-foreground: var(--user-color-foreground, #fff);--color-error: var(--user-color-error, #bd1919);--color-border: var(--user-color-border, #e2e8f0);--color-muted: var(--user-color-muted, #999);--color-heading: var(--user-color-text-primary, var(--color-text-primary));--color-link: var(--user-color-primary, var(--color-primary));--color-success: var(--user-color-success, #28a745);--color-warning: var(--user-color-warning, #f59e0b);--color-online: var(--user-color-success, var(--color-success));--color-offline: var(--user-color-muted, var(--color-muted));--color-busy: var(--user-color-error, var(--color-error));--color-info-bg: var(--color-primary);--color-info-text: #fff;--color-success-bg: var(--color-success);--color-success-text: #fff;--color-warning-bg: var(--color-warning);--color-warning-text: #fff;--color-error-bg: var(--color-error);--color-error-text: #fff}[data-theme=dark]{--color-text-primary: var(--user-color-text-primary, #fff);--color-primary: var(--user-color-primary, #3b82f6);--color-primary-foreground: var(--user-color-primary-foreground, #fff);--color-secondary: var(--user-color-secondary, #64748b);--color-secondary-foreground: var(--user-color-secondary-foreground, #1e293b);--color-background: var(--user-color-background, #0f172a);--color-foreground: var(--user-color-foreground, #f8fafc);--color-error: var(--user-color-error, #bd1919);--color-border: var(--user-color-border, #334155);--color-muted: var(--user-color-muted, #f1f5f9);--color-heading: var(--user-color-text-primary, var(--color-text-primary));--color-link: var(--user-color-primary, var(--color-primary))}
+:root{--breakpoint-xs: 320px;--breakpoint-sm: 480px;--breakpoint-md: 768px;--breakpoint-lg: 1024px;--breakpoint-xl: 1280px;--breakpoint-2xl: 1536px}:root{--color-text-primary: var(--user-color-text-primary, #111);--color-primary: var(--user-color-primary, #2563eb);--color-primary-foreground: var(--user-color-primary-foreground, #fff);--color-secondary: var(--user-color-secondary, #94a3b8);--color-secondary-foreground: var(--user-color-secondary-foreground, #fff);--color-background: var(--user-color-background, #fff);--color-foreground: var(--user-color-foreground, #fff);--color-error: var(--user-color-error, #bd1919);--color-border: var(--user-color-border, #e2e8f0);--color-muted: var(--user-color-muted, #999);--color-heading: var(--user-color-text-primary, var(--color-text-primary));--color-link: var(--user-color-primary, var(--color-primary));--color-success: var(--user-color-success, #28a745);--color-warning: var(--user-color-warning, #f59e0b);--color-online: var(--user-color-success, var(--color-success));--color-offline: var(--user-color-muted, var(--color-muted));--color-busy: var(--user-color-error, var(--color-error));--color-info-bg: var(--color-primary);--color-info-text: #fff;--color-success-bg: var(--color-success);--color-success-text: #fff;--color-warning-bg: var(--color-warning);--color-warning-text: #fff;--color-error-bg: var(--color-error);--color-error-text: #fff;--color-tab-background: var(--user-color-border, #e2e8f0)}[data-theme=dark]{--color-text-primary: var(--user-color-text-primary, #fff);--color-primary: var(--user-color-primary, #3b82f6);--color-primary-foreground: var(--user-color-primary-foreground, #fff);--color-secondary: var(--user-color-secondary, #64748b);--color-secondary-foreground: var(--user-color-secondary-foreground, #1e293b);--color-background: var(--user-color-background, #0f172a);--color-foreground: var(--user-color-foreground, #f8fafc);--color-error: var(--user-color-error, #bd1919);--color-border: var(--user-color-border, #334155);--color-muted: var(--user-color-muted, #f1f5f9);--color-heading: var(--user-color-text-primary, var(--color-text-primary));--color-link: var(--user-color-primary, var(--color-primary))}:root{--spacing-xs: .25rem;--spacing-sm: .5rem;--spacing-md: 1rem;--spacing-lg: 1.5rem;--spacing-xl: 2rem}:root{--font-family-sans: -apple-system;--font-size-xs: .75rem;--font-size-sm: .875rem;--font-size-md: 1rem;--font-size-lg: 1.25rem;--font-size-xl: 1.5rem;--font-size-h1: 2.5rem;--font-size-h2: 2rem;--font-size-h3: 1.75rem;--font-size-h4: 1.5rem;--font-size-h5: 1.25rem;--font-size-h6: 1rem;--font-weight-normal: 400;--font-weight-medium: 500;--font-weight-semibold: 600;--font-weight-bold: 700;--line-height-heading: 1.25;--line-height-tight: 1.2;--line-height-normal: 1.5;--line-height-loose: 1.75}:root{--radius-sm: .125rem;--radius-md: .375rem;--radius-lg: .5rem;--radius-full: 9999px}:root{--shadow-sm: 0 1px 2px rgba(0, 0, 0, .05);--shadow-md: 0 4px 6px rgba(0, 0, 0, .1);--shadow-lg: 0 10px 15px rgba(0, 0, 0, .15)}
+:root{--color-text-primary: var(--user-color-text-primary, #111);--color-primary: var(--user-color-primary, #2563eb);--color-primary-foreground: var(--user-color-primary-foreground, #fff);--color-secondary: var(--user-color-secondary, #94a3b8);--color-secondary-foreground: var(--user-color-secondary-foreground, #fff);--color-background: var(--user-color-background, #fff);--color-foreground: var(--user-color-foreground, #fff);--color-error: var(--user-color-error, #bd1919);--color-border: var(--user-color-border, #e2e8f0);--color-muted: var(--user-color-muted, #999);--color-heading: var(--user-color-text-primary, var(--color-text-primary));--color-link: var(--user-color-primary, var(--color-primary));--color-success: var(--user-color-success, #28a745);--color-warning: var(--user-color-warning, #f59e0b);--color-online: var(--user-color-success, var(--color-success));--color-offline: var(--user-color-muted, var(--color-muted));--color-busy: var(--user-color-error, var(--color-error));--color-info-bg: var(--color-primary);--color-info-text: #fff;--color-success-bg: var(--color-success);--color-success-text: #fff;--color-warning-bg: var(--color-warning);--color-warning-text: #fff;--color-error-bg: var(--color-error);--color-error-text: #fff;--color-tab-background: var(--user-color-border, #e2e8f0)}[data-theme=dark]{--color-text-primary: var(--user-color-text-primary, #fff);--color-primary: var(--user-color-primary, #3b82f6);--color-primary-foreground: var(--user-color-primary-foreground, #fff);--color-secondary: var(--user-color-secondary, #64748b);--color-secondary-foreground: var(--user-color-secondary-foreground, #1e293b);--color-background: var(--user-color-background, #0f172a);--color-foreground: var(--user-color-foreground, #f8fafc);--color-error: var(--user-color-error, #bd1919);--color-border: var(--user-color-border, #334155);--color-muted: var(--user-color-muted, #f1f5f9);--color-heading: var(--user-color-text-primary, var(--color-text-primary));--color-link: var(--user-color-primary, var(--color-primary))}
 ._tooltipContainer_94xs9_1{position:relative;display:inline-block}._tooltip_94xs9_1{position:absolute;background-color:var(--color-secondary, #333);color:var(--color-text-primary, #fff);padding:var(--spacing-sm, .5rem);border-radius:var(--radius-sm, 4px);white-space:nowrap;z-index:1000;opacity:0;transform:translateY(0);transition:opacity .3s,transform .3s}._top_94xs9_19{bottom:100%;left:50%;transform:translateY(.5rem);margin-bottom:.25rem}._bottom_94xs9_26{top:100%;left:50%;transform:translateY(-.5rem);margin-top:.25rem}._left_94xs9_33{right:100%;top:50%;transform:translate(.5rem);margin-right:.25rem}._right_94xs9_40{left:100%;top:50%;transform:translate(-.5rem);margin-left:.25rem}._tooltip_94xs9_1._visible_94xs9_47{opacity:1;transform:translateY(0);pointer-events:auto}
 ._wrapper_162xi_1{display:flex;flex-direction:column;gap:var(--spacing-sm)}._label_162xi_7{cursor:pointer}._textarea_162xi_11{min-height:6rem;padding:var(--spacing-sm);border:2px solid var(--color-border, #ccc);border-radius:var(--radius-md);resize:vertical;font-size:var(--font-size-md);outline:none;background-color:var(--color-background);color:var(--color-text-primary);transition:border-color .3s}._textarea_162xi_11:focus{border-color:var(--color-primary);outline:none}._textarea_162xi_11:disabled{background-color:var(--color-muted);cursor:not-allowed}
 ._text_4sv7j_1{font-family:inherit;font-size:var(--font-size-md);line-height:var(--line-height-normal);color:var(--color-text-primary)}._text_4sv7j_1 p{margin-bottom:var(--spacing-md)}._text_4sv7j_1 h1,._text_4sv7j_1 h2,._text_4sv7j_1 h3,._text_4sv7j_1 h4,._text_4sv7j_1 h5,._text_4sv7j_1 h6{font-weight:var(--font-weight-bold);line-height:var(--line-height-tight);margin-top:var(--spacing-lg);margin-bottom:var(--spacing-sm)}._text_4sv7j_1 ul,._text_4sv7j_1 ol{padding-left:var(--spacing-lg);margin-bottom:var(--spacing-md)}._text_4sv7j_1 ul{list-style-type:disc}._text_4sv7j_1 ol{list-style-type:decimal}._text_4sv7j_1 li{margin-bottom:var(--spacing-xs)}._text_4sv7j_1 a{color:var(--color-primary);text-decoration:underline}._text_4sv7j_1 a:hover{text-decoration:none}._default_4sv7j_55{font-size:1rem}._muted_4sv7j_59{color:var(--color-muted)}._lead_4sv7j_63{font-size:1.25rem;font-weight:500}._small_4sv7j_68{font-size:.875rem}
@@ -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_1wmov_1{display:flex;flex-direction:column;width:100%}._tabsList_1wmov_7{display:flex;width:100%;border-bottom:2px solid var(--color-border)}._left_1wmov_13{justify-content:flex-start}._center_1wmov_17{justify-content:center}._right_1wmov_21{justify-content:flex-end}._tabsTrigger_1wmov_25{flex:1;padding:var(--spacing-md);border:none;border-bottom:2px solid transparent;background:none;cursor:pointer;color:var(--color-muted);font-weight:var(--font-weight-semibold);font-size:var(--font-size-md);transition:color .3s ease,border-color .3s ease;position:relative;top:2px}._tabsTrigger_1wmov_25._active_1wmov_40{border-color:var(--color-primary);color:var(--color-primary)}._tabsPanelWrapper_1wmov_45{position:relative;overflow:hidden;height:auto;transition:height .3s ease-in-out}._tabsPanel_1wmov_45{animation:_fadeSlide_1wmov_1 .3s ease both;position:relative;width:100%;padding:var(--spacing-xl);color:var(--color-text-primary)}@keyframes _fadeSlide_1wmov_1{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
+._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)}}
 ._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.121",
+  "version": "0.0.122",
   "type": "module",
   "exports": {
     ".": {