@pismo/marola 1.0.7 → 1.0.9

package/dist/components/Tabs/Tab.d.ts

@@ -17,5 +17,7 @@ export interface TabProps {
     icon?: IconName | ReactNode;
     /** Is the tab a chip */
     chip?: boolean;
+    /** Show a loading skeleton */
+    isLoading?: boolean;
 }
 export declare const Tab: import('react').ForwardRefExoticComponent<TabProps & import('react').RefAttributes<HTMLButtonElement>>;

package/dist/components/Tabs/Tab.js

@@ -1,125 +1,126 @@
-import { jsx as y, jsxs as w } from "react/jsx-runtime";
-import * as P from "react";
-import { forwardRef as H, useContext as U, useMemo as k } from "react";
-import { c as B } from "../../clsx-DB4S2d7J.js";
-import { Icon as D } from "../Icon/Icon.js";
-import { u as L, T as W, s as i } from "../../Tabs.module-DSjBjg0Z.js";
-import { g as $, a as q, u as I, f as z, b as m, _ as A, c as G, P as e, d as J, e as K } from "../../useSlotProps-C_I1kEHr.js";
-import { u as Q, c as X } from "../../combineHooksSlotProps-C-zYvfnF.js";
-import { u as Y } from "../../useId-BW-oWmul.js";
-import { u as Z } from "../../useButton-DcihopJG.js";
-import { u as ee } from "../../useCompoundItem-B7Eo_qZk.js";
-const O = "Tab";
-function te(o) {
-  return $(O, o);
+import { jsx as m, jsxs as j, Fragment as k } from "react/jsx-runtime";
+import * as R from "react";
+import { forwardRef as H, useContext as U, useMemo as B } from "react";
+import { c as D } from "../../clsx-DB4S2d7J.js";
+import { Icon as L } from "../Icon/Icon.js";
+import { Skeleton as W } from "../Skeleton/Skeleton.js";
+import { u as $, T as q, s as i } from "../../Tabs.module-DSjBjg0Z.js";
+import { g as z, a as A, u as F, f as G, b as h, _ as J, c as K, P as e, d as Q, e as X } from "../../useSlotProps-C_I1kEHr.js";
+import { u as Y, c as Z } from "../../combineHooksSlotProps-C-zYvfnF.js";
+import { u as ee } from "../../useId-BW-oWmul.js";
+import { u as te } from "../../useButton-DcihopJG.js";
+import { u as oe } from "../../useCompoundItem-B7Eo_qZk.js";
+const I = "Tab";
+function se(s) {
+  return z(I, s);
 }
-q(O, ["root", "selected", "disabled"]);
-function se(o) {
-  return o.size;
+A(I, ["root", "selected", "disabled"]);
+function ae(s) {
+  return s.size;
 }
-function oe(o) {
+function ne(s) {
   const {
     value: t,
-    rootRef: s,
+    rootRef: o,
     disabled: r = !1,
-    id: u
-  } = o, a = P.useRef(null), n = Y(u), {
-    value: d,
-    selectionFollowsFocus: l,
-    getTabPanelId: b
-  } = L(), R = P.useMemo(() => ({
+    id: d
+  } = s, a = R.useRef(null), n = ee(d), {
+    value: u,
+    selectionFollowsFocus: b,
+    getTabPanelId: l
+  } = $(), f = R.useMemo(() => ({
     disabled: r,
     ref: a,
     id: n
   }), [r, a, n]), {
     id: c,
     index: g,
-    totalItemCount: h
-  } = ee(t ?? se, R), {
-    getRootProps: T,
-    highlighted: _,
-    selected: f
-  } = Q({
+    totalItemCount: T
+  } = oe(t ?? ae, f), {
+    getRootProps: _,
+    highlighted: C,
+    selected: p
+  } = Y({
     item: c
   }), {
-    getRootProps: C,
-    rootRef: p,
+    getRootProps: y,
+    rootRef: P,
     active: v,
-    focusVisible: F,
-    setFocusVisible: V
-  } = Z({
+    focusVisible: E,
+    setFocusVisible: S
+  } = te({
     disabled: r,
-    focusableWhenDisabled: !l,
+    focusableWhenDisabled: !b,
     type: "button"
-  }), x = I(a, s, p), M = c !== void 0 ? b(c) : void 0;
+  }), x = F(a, o, P), V = c !== void 0 ? l(c) : void 0;
   return {
     getRootProps: (N = {}) => {
-      const S = z(N), j = X(T, C);
-      return m({}, N, j(S), {
+      const w = G(N), M = Z(_, y);
+      return h({}, N, M(w), {
         role: "tab",
-        "aria-controls": M,
-        "aria-selected": f,
+        "aria-controls": V,
+        "aria-selected": p,
         id: n,
         ref: x
       });
     },
     active: v,
-    focusVisible: F,
-    highlighted: _,
+    focusVisible: E,
+    highlighted: C,
     index: g,
     rootRef: x,
     // the `selected` state isn't set on the server (it relies on effects to be calculated),
     // so we fall back to checking the `value` prop with the selectedValue from the TabsContext
-    selected: f || c === d,
-    setFocusVisible: V,
-    totalTabsCount: h
+    selected: p || c === u,
+    setFocusVisible: S,
+    totalTabsCount: T
   };
 }
-const ae = ["action", "children", "disabled", "onChange", "onClick", "onFocus", "slotProps", "slots", "value"], ne = (o) => {
+const re = ["action", "children", "disabled", "onChange", "onClick", "onFocus", "slotProps", "slots", "value"], le = (s) => {
   const {
     selected: t,
-    disabled: s
-  } = o;
-  return J({
-    root: ["root", t && "selected", s && "disabled"]
-  }, K(te));
-}, E = /* @__PURE__ */ P.forwardRef(function(t, s) {
+    disabled: o
+  } = s;
+  return Q({
+    root: ["root", t && "selected", o && "disabled"]
+  }, X(se));
+}, O = /* @__PURE__ */ R.forwardRef(function(t, o) {
   var r;
   const {
-    children: u,
+    children: d,
     disabled: a = !1,
     slotProps: n = {},
-    slots: d = {},
-    value: l
-  } = t, b = A(t, ae), R = P.useRef(), c = I(R, s), {
+    slots: u = {},
+    value: b
+  } = t, l = J(t, re), f = R.useRef(), c = F(f, o), {
     active: g,
-    highlighted: h,
-    selected: T,
-    getRootProps: _
-  } = oe(m({}, t, {
+    highlighted: T,
+    selected: _,
+    getRootProps: C
+  } = ne(h({}, t, {
     rootRef: c,
-    value: l
-  })), f = m({}, t, {
+    value: b
+  })), p = h({}, t, {
     active: g,
     disabled: a,
-    highlighted: h,
-    selected: T
-  }), C = ne(f), p = (r = d.root) != null ? r : "button", v = G({
-    elementType: p,
-    getSlotProps: _,
+    highlighted: T,
+    selected: _
+  }), y = le(p), P = (r = u.root) != null ? r : "button", v = K({
+    elementType: P,
+    getSlotProps: C,
     externalSlotProps: n.root,
-    externalForwardedProps: b,
+    externalForwardedProps: l,
     additionalProps: {
-      ref: s
+      ref: o
     },
-    ownerState: f,
-    className: C.root
+    ownerState: p,
+    className: y.root
   });
-  return /* @__PURE__ */ y(p, m({}, v, {
-    children: u
+  return /* @__PURE__ */ m(P, h({}, v, {
+    children: d
   }));
 });
-process.env.NODE_ENV !== "production" && (E.propTypes = {
+process.env.NODE_ENV !== "production" && (O.propTypes = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐
   // │ These PropTypes are generated from the TypeScript type definitions. │
   // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
@@ -165,25 +166,25 @@ process.env.NODE_ENV !== "production" && (E.propTypes = {
    */
   value: e.oneOfType([e.number, e.string])
 });
-const Re = H(
-  ({ children: o, value: t, disabled: s, className: r, "data-testid": u, icon: a, chip: n }, d) => {
-    const l = U(W), b = k(
-      () => B(
+const Te = H(
+  ({ children: s, value: t, disabled: o, className: r, "data-testid": d, icon: a, chip: n, isLoading: u }, b) => {
+    const l = U(q), f = B(
+      () => D(
         i.tabs__tab,
         t === (l == null ? void 0 : l.value) && i["tabs__tab--selected"],
-        s && !n && i["tabs__tab--disabled"],
+        o && !n && i["tabs__tab--disabled"],
         n && i["tabs__tab--chip"],
-        n && s && i["tabs__tab--chip--disabled"],
+        n && o && i["tabs__tab--chip--disabled"],
         r
       ),
-      [t, l, s, n]
+      [t, l, o, n]
     );
-    return /* @__PURE__ */ w(E, { className: b, disabled: s, value: t, "data-testid": u, ref: d, children: [
-      a && /* @__PURE__ */ y("span", { className: i["tabs__tab-icon"], children: typeof a == "string" ? /* @__PURE__ */ y(D, { icon: a }) : a }),
-      o
-    ] });
+    return /* @__PURE__ */ m(O, { className: f, disabled: o, value: t, "data-testid": d, ref: b, children: u ? /* @__PURE__ */ m(W, { style: { width: "50px" } }) : /* @__PURE__ */ j(k, { children: [
+      a && /* @__PURE__ */ m("span", { className: i["tabs__tab-icon"], children: typeof a == "string" ? /* @__PURE__ */ m(L, { icon: a }) : a }),
+      s
+    ] }) });
   }
 );
 export {
-  Re as Tab
+  Te as Tab
 };

package/dist/components/Tabs/Tab.stories.d.ts

@@ -15,5 +15,6 @@ export declare const Simple: Story;
 export declare const Icon: Story;
 export declare const Chip: Story;
 export declare const IconChip: Story;
+export declare const Loading: Story;
 export declare const Disabled: Story;
 export declare const DisabledChip: Story;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pismo/marola",
   "description": "CDX tribe component library",
-  "version": "1.0.7",
+  "version": "1.0.9",
   "type": "module",
   "main": "dist/main.js",
   "types": "dist/main.d.ts",
@@ -91,7 +91,7 @@
     "typescript": "^5.2.2",
     "vite": "^5.2.0",
     "vite-plugin-dts": "^3.8.1",
-    "vite-plugin-lib-inject-css": "^2.0.1",
+    "vite-plugin-lib-inject-css": "^2.1.1",
     "vite-plugin-svgr": "^4.2.0",
     "vitest": "^1.4.0",
     "vitest-preview": "^0.0.1"