quirk-ui 0.0.118 → 0.0.120

package/dist/components/Tabs/index.js

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

package/package.json

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