quirk-ui 0.0.115 → 0.0.117

package/dist/components/Tabs/index.js

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

package/package.json

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