quirk-ui 0.0.105 → 0.0.106

package/dist/components/Tabs/index.js

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

package/package.json

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