quirk-ui 0.0.106 → 0.0.108

package/dist/components/Tabs/index.js

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

package/package.json

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