quirk-ui 0.0.110 → 0.0.112

package/dist/components/Tabs/Tabs.test.js

@@ -1,32 +1,28 @@
-import { jsxs as l, jsx as n } from "react/jsx-runtime";
-import { d as h, i as o, g as t, s as e, f as r, r as c } from "../../vi.ClIskdbk-CZ8iFAMK.js";
-import { Tabs as a } from "./index.js";
+import { jsxs as l, jsx as a } from "react/jsx-runtime";
+import { d as c, i as o, g as t, s as e, f as r, r as b } from "../../vi.ClIskdbk-CZ8iFAMK.js";
+import { Tabs as n } from "./index.js";
 import "../../index-BBIdMcpm.js";
-h("Tabs", () => {
+c("Tabs", () => {
   const i = () => {
-    c(
-      /* @__PURE__ */ l(a, { defaultIndex: 0, align: "center", children: [
-        /* @__PURE__ */ l(a.List, { children: [
-          /* @__PURE__ */ n(a.Trigger, { index: 0, children: "Tab 1" }),
-          /* @__PURE__ */ n(a.Trigger, { index: 1, children: "Tab 2" })
+    b(
+      /* @__PURE__ */ l(n, { defaultIndex: 0, align: "center", children: [
+        /* @__PURE__ */ l(n.List, { children: [
+          /* @__PURE__ */ a(n.Trigger, { index: 0, children: "Tab 1" }),
+          /* @__PURE__ */ a(n.Trigger, { index: 1, children: "Tab 2" })
         ] }),
-        /* @__PURE__ */ n(a.Panel, { index: 0, children: /* @__PURE__ */ n("p", { children: "This is the first panel" }) }),
-        /* @__PURE__ */ n(a.Panel, { index: 1, children: /* @__PURE__ */ n("p", { children: "This is the second panel" }) })
+        /* @__PURE__ */ a(n.Panel, { index: 0, children: /* @__PURE__ */ a("p", { children: "This is the first panel" }) }),
+        /* @__PURE__ */ a(n.Panel, { index: 1, children: /* @__PURE__ */ a("p", { children: "This is the second panel" }) })
       ] })
     );
   };
   o("renders tab triggers and default panel", () => {
     i(), t(e.getByRole("tab", { name: /tab 1/i })).toBeInTheDocument(), t(e.getByRole("tab", { name: /tab 2/i })).toBeInTheDocument(), t(e.getByRole("tabpanel")).toHaveTextContent(
       "This is the first panel"
-    ), t(
-      e.queryByText("This is the second panel")
-    ).not.toBeInTheDocument();
+    );
   }), o("changes panel when tab is clicked", () => {
     i(), r.click(e.getByRole("tab", { name: /tab 2/i })), t(e.getByRole("tabpanel")).toHaveTextContent(
       "This is the second panel"
-    ), t(
-      e.queryByText("This is the first panel")
-    ).not.toBeInTheDocument();
+    );
   }), o("responds to ArrowRight key to switch tabs", () => {
     i();
     const s = e.getByRole("tab", { name: /tab 1/i });

package/dist/components/Tabs/index.js

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

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/package.json

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