@pismo/marola 1.0.0-beta.69 → 1.0.0-beta.8

package/dist/components/Tabs/TabPanel.js

@@ -1,80 +1,79 @@
 import { jsx as T } from "react/jsx-runtime";
 import * as P from "react";
 import { forwardRef as v } from "react";
-import { c as y } from "../../clsx-DB4S2d7J.js";
-import { u as x, s as C } from "../../Tabs.module-BGGTkDc5.js";
-import { g as N, a as _, u as w, b, _ as O, c as E, P as o, d as I, e as S } from "../../useSlotProps-C_I1kEHr.js";
-import { u as U } from "../../useId-BW-oWmul.js";
-import { u as j } from "../../useCompoundItem-B7Eo_qZk.js";
+import { u as y, s as x } from "../../Tabs.module-jkH1Qjn7.js";
+import { g as C, a as N, u as _, b, _ as w, c as O, P as o, d as E, e as I } from "../../useSlotProps-kRhf7Gil.js";
+import { u as S } from "../../useId-BW-oWmul.js";
+import { u as U } from "../../useCompoundItem-B7Eo_qZk.js";
 const h = "TabPanel";
-function M(t) {
-  return N(h, t);
+function j(t) {
+  return C(h, t);
 }
-_(h, ["root", "hidden"]);
-function V(t) {
+N(h, ["root", "hidden"]);
+function M(t) {
   return t.size;
 }
-function F(t) {
+function V(t) {
   const {
     value: e,
     id: s,
     rootRef: n
-  } = t, a = x();
-  if (a === null)
+  } = t, i = y();
+  if (i === null)
     throw new Error("No TabContext provided");
   const {
     value: f,
     getTabId: m
-  } = a, r = U(s), l = P.useRef(null), c = w(l, n), u = P.useMemo(() => ({
+  } = i, r = S(s), a = P.useRef(null), u = _(a, n), c = P.useMemo(() => ({
     id: r,
-    ref: l
+    ref: a
   }), [r]), {
-    id: d
-  } = j(e ?? V, u), i = d !== f, p = d !== void 0 ? m(d) : void 0;
+    id: l
+  } = U(e ?? M, c), d = l !== f, p = l !== void 0 ? m(l) : void 0;
   return {
-    hidden: i,
+    hidden: d,
     getRootProps: (g = {}) => b({
       "aria-labelledby": p ?? void 0,
-      hidden: i,
+      hidden: d,
       id: r ?? void 0
     }, g, {
-      ref: c
+      ref: u
     }),
-    rootRef: c
+    rootRef: u
   };
 }
-const $ = ["children", "value", "slotProps", "slots"], k = (t) => {
+const F = ["children", "value", "slotProps", "slots"], $ = (t) => {
   const {
     hidden: e
   } = t;
-  return I({
+  return E({
     root: ["root", e && "hidden"]
-  }, S(M));
+  }, I(j));
 }, R = /* @__PURE__ */ P.forwardRef(function(e, s) {
   var n;
   const {
-    children: a,
+    children: i,
     slotProps: f = {},
     slots: m = {}
-  } = e, r = O(e, $), {
-    hidden: l,
-    getRootProps: c
-  } = F(e), u = b({}, e, {
-    hidden: l
-  }), d = k(u), i = (n = m.root) != null ? n : "div", p = E({
-    elementType: i,
-    getSlotProps: c,
+  } = e, r = w(e, F), {
+    hidden: a,
+    getRootProps: u
+  } = V(e), c = b({}, e, {
+    hidden: a
+  }), l = $(c), d = (n = m.root) != null ? n : "div", p = O({
+    elementType: d,
+    getSlotProps: u,
     externalSlotProps: f.root,
     externalForwardedProps: r,
     additionalProps: {
       role: "tabpanel",
       ref: s
     },
-    ownerState: u,
-    className: d.root
+    ownerState: c,
+    className: l.root
   });
-  return /* @__PURE__ */ T(i, b({}, p, {
-    children: !l && a
+  return /* @__PURE__ */ T(d, b({}, p, {
+    children: !a && i
   }));
 });
 process.env.NODE_ENV !== "production" && (R.propTypes = {
@@ -112,18 +111,9 @@ process.env.NODE_ENV !== "production" && (R.propTypes = {
    */
   value: o.oneOfType([o.number, o.string])
 });
-const H = v(
-  ({ children: t, value: e, className: s, "data-testid": n }, a) => /* @__PURE__ */ T(
-    R,
-    {
-      className: y(C["tabs__tab-panel"], s),
-      value: e,
-      "data-testid": n,
-      ref: a,
-      children: t
-    }
-  )
+const q = v(
+  ({ children: t, value: e, dataTestId: s }, n) => /* @__PURE__ */ T(R, { className: x["tabs__tab-panel"], value: e, "data-testid": s, ref: n, children: t })
 );
 export {
-  H as TabPanel
+  q as TabPanel
 };

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

@@ -4,13 +4,11 @@ export interface TabsProps {
     /** Should contain `Tab` and `TabPanel` components to be rendered  */
     children?: ReactNode;
     /** Selected tab */
-    value?: string | number | null;
-    /** CSS classes to be applied on the container element */
-    className?: string;
-    /** Id to be applied as `data-testid` on the container element */
-    'data-testid'?: string;
+    value?: number | string;
     /** Callback triggered when the user has selected a tab */
-    onChange?: (tabValue: string | number | null, event?: React.SyntheticEvent<Element, Event> | null) => void;
+    onChange?: (tabValue: number | string | null, event?: React.SyntheticEvent<Element, Event> | null) => void;
+    /** Test id */
+    dataTestId?: string;
 }
 export declare const Tabs: import('react').ForwardRefExoticComponent<TabsProps & import('react').RefAttributes<HTMLDivElement>>;
 export * from './Tab';

package/dist/components/Tabs/Tabs.js

@@ -1,15 +1,14 @@
 import { jsx as T } from "react/jsx-runtime";
 import * as r from "react";
-import { forwardRef as q } from "react";
-import { c as B } from "../../clsx-DB4S2d7J.js";
-import { T as G, u as J, s as Q } from "../../Tabs.module-BGGTkDc5.js";
-import { Tab as Ie } from "./Tab.js";
-import { TabPanel as Fe } from "./TabPanel.js";
-import { g as I, a as _, b as C, _ as F, c as $, P as t, d as N, e as w } from "../../useSlotProps-C_I1kEHr.js";
-import { a as M, C as O } from "../../useCompoundItem-B7Eo_qZk.js";
+import { forwardRef as q, useState as B } from "react";
+import { T as G, u as J, s as Q } from "../../Tabs.module-jkH1Qjn7.js";
+import { Tab as Le } from "./Tab.js";
+import { TabPanel as _e } from "./TabPanel.js";
+import { g as I, a as _, b as C, _ as F, c as $, P as t, d as N, e as M } from "../../useSlotProps-kRhf7Gil.js";
+import { a as O, C as S } from "../../useCompoundItem-B7Eo_qZk.js";
 import { u as X } from "../../useControlled-CCMYYdCM.js";
-import { L as Y, a as Z } from "../../combineHooksSlotProps-C-zYvfnF.js";
-import { l as ee, m as te, u as oe } from "../../useList-B9C55YB7.js";
+import { L as Y, a as Z } from "../../combineHooksSlotProps-BtBYUV_B.js";
+import { l as ee, m as te, u as oe } from "../../useList-BpJT77u3.js";
 const k = "Tabs";
 function se(s) {
   return I(k, s);
@@ -19,21 +18,21 @@ function ne(s) {
   const {
     value: e,
     defaultValue: o,
-    onChange: l,
-    orientation: a = "horizontal",
+    onChange: n,
+    orientation: i = "horizontal",
     direction: c = "ltr",
-    selectionFollowsFocus: n = !1
-  } = s, [d, i] = X({
+    selectionFollowsFocus: l = !1
+  } = s, [d, u] = X({
     controlled: e,
     default: o,
     name: "Tabs",
     state: "value"
-  }), u = r.useCallback((x, y) => {
-    i(y), l == null || l(x, y);
-  }, [l, i]), {
+  }), a = r.useCallback((x, y) => {
+    u(y), n == null || n(x, y);
+  }, [n, u]), {
     subitems: m,
-    contextValue: h
-  } = M(), p = r.useRef(() => {
+    contextValue: g
+  } = O(), p = r.useRef(() => {
   }), f = r.useCallback((x) => {
     var y;
     return (y = m.get(x)) == null ? void 0 : y.id;
@@ -45,12 +44,12 @@ function ne(s) {
       direction: c,
       getTabId: b,
       getTabPanelId: f,
-      onSelected: u,
-      orientation: a,
+      onSelected: a,
+      orientation: i,
       registerTabIdLookup: P,
-      selectionFollowsFocus: n,
+      selectionFollowsFocus: l,
       value: d
-    }, h)
+    }, g)
   };
 }
 function le(s) {
@@ -58,32 +57,32 @@ function le(s) {
     value: e,
     children: o
   } = s, {
-    direction: l,
-    getItemIndex: a,
+    direction: n,
+    getItemIndex: i,
     onSelected: c,
-    orientation: n,
+    orientation: l,
     registerItem: d,
-    registerTabIdLookup: i,
-    selectionFollowsFocus: u,
+    registerTabIdLookup: u,
+    selectionFollowsFocus: a,
     totalSubitemCount: m,
-    value: h,
+    value: g,
     getTabId: p,
     getTabPanelId: f
   } = e, b = r.useMemo(() => ({
-    getItemIndex: a,
+    getItemIndex: i,
     registerItem: d,
     totalSubitemCount: m
-  }), [d, a, m]), P = r.useMemo(() => ({
-    direction: l,
+  }), [d, i, m]), P = r.useMemo(() => ({
+    direction: n,
     getTabId: p,
     getTabPanelId: f,
     onSelected: c,
-    orientation: n,
-    registerTabIdLookup: i,
-    selectionFollowsFocus: u,
-    value: h
-  }), [l, p, f, c, n, i, u, h]);
-  return /* @__PURE__ */ T(O.Provider, {
+    orientation: l,
+    registerTabIdLookup: u,
+    selectionFollowsFocus: a,
+    value: g
+  }), [n, p, f, c, l, u, a, g]);
+  return /* @__PURE__ */ T(S.Provider, {
     value: b,
     children: /* @__PURE__ */ T(G.Provider, {
       value: P,
@@ -97,24 +96,24 @@ const re = ["children", "value", "defaultValue", "orientation", "direction", "on
   } = s;
   return N({
     root: ["root", e]
-  }, w(se));
-}, S = /* @__PURE__ */ r.forwardRef(function(e, o) {
-  var l;
+  }, M(se));
+}, w = /* @__PURE__ */ r.forwardRef(function(e, o) {
+  var n;
   const {
-    children: a,
+    children: i,
     orientation: c = "horizontal",
-    direction: n = "ltr",
+    direction: l = "ltr",
     slotProps: d = {},
-    slots: i = {}
-  } = e, u = F(e, re), m = C({}, e, {
+    slots: u = {}
+  } = e, a = F(e, re), m = C({}, e, {
     orientation: c,
-    direction: n
+    direction: l
   }), {
-    contextValue: h
-  } = ne(m), p = ae(m), f = (l = i.root) != null ? l : "div", b = $({
+    contextValue: g
+  } = ne(m), p = ae(m), f = (n = u.root) != null ? n : "div", b = $({
     elementType: f,
     externalSlotProps: d.root,
-    externalForwardedProps: u,
+    externalForwardedProps: a,
     additionalProps: {
       ref: o
     },
@@ -123,12 +122,12 @@ const re = ["children", "value", "defaultValue", "orientation", "direction", "on
   });
   return /* @__PURE__ */ T(f, C({}, b, {
     children: /* @__PURE__ */ T(le, {
-      value: h,
-      children: a
+      value: g,
+      children: i
     })
   }));
 });
-process.env.NODE_ENV !== "production" && (S.propTypes = {
+process.env.NODE_ENV !== "production" && (w.propTypes = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐
   // │ These PropTypes are generated from the TypeScript type definitions. │
   // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
@@ -200,7 +199,7 @@ function ue(s, e) {
     });
   const o = ee(s, e), {
     context: {
-      selectionFollowsFocus: l
+      selectionFollowsFocus: n
     }
   } = e;
   if (e.type === Y.itemsChange) {
@@ -210,7 +209,7 @@ function ue(s, e) {
       });
     te(null, "reset", e.context);
   }
-  return l && o.highlightedValue != null ? C({}, o, {
+  return n && o.highlightedValue != null ? C({}, o, {
     selectedValues: [o.highlightedValue]
   }) : o;
 }
@@ -219,37 +218,37 @@ function ce(s) {
   const {
     rootRef: o
   } = s, {
-    direction: l = "ltr",
-    onSelected: a,
+    direction: n = "ltr",
+    onSelected: i,
     orientation: c = "horizontal",
-    value: n,
+    value: l,
     registerTabIdLookup: d,
-    selectionFollowsFocus: i
+    selectionFollowsFocus: u
   } = J(), {
-    subitems: u,
+    subitems: a,
     contextValue: m
-  } = M(), h = r.useCallback((g) => {
+  } = O(), g = r.useCallback((h) => {
     var v;
-    return (v = u.get(g)) == null ? void 0 : v.id;
-  }, [u]);
-  d(h);
-  const p = r.useMemo(() => Array.from(u.keys()), [u]), f = r.useCallback((g) => {
+    return (v = a.get(h)) == null ? void 0 : v.id;
+  }, [a]);
+  d(g);
+  const p = r.useMemo(() => Array.from(a.keys()), [a]), f = r.useCallback((h) => {
     var v, V;
-    return g == null ? null : (v = (V = u.get(g)) == null ? void 0 : V.ref.current) != null ? v : null;
-  }, [u]), b = l === "rtl";
+    return h == null ? null : (v = (V = a.get(h)) == null ? void 0 : V.ref.current) != null ? v : null;
+  }, [a]), b = n === "rtl";
   let P;
   c === "vertical" ? P = "vertical" : P = b ? "horizontal-rtl" : "horizontal-ltr";
-  const x = r.useCallback((g, v) => {
+  const x = r.useCallback((h, v) => {
     var V;
-    a(g, (V = v[0]) != null ? V : null);
-  }, [a]), y = r.useMemo(() => n === void 0 ? {} : n != null ? {
-    selectedValues: [n]
+    i(h, (V = v[0]) != null ? V : null);
+  }, [i]), y = r.useMemo(() => l === void 0 ? {} : l != null ? {
+    selectedValues: [l]
   } : {
     selectedValues: []
-  }, [n]), U = r.useCallback((g) => {
+  }, [l]), U = r.useCallback((h) => {
     var v, V;
-    return (v = (V = u.get(g)) == null ? void 0 : V.disabled) != null ? v : !1;
-  }, [u]), {
+    return (v = (V = a.get(h)) == null ? void 0 : V.disabled) != null ? v : !1;
+  }, [a]), {
     contextValue: L,
     dispatch: R,
     getRootProps: D,
@@ -260,7 +259,7 @@ function ce(s) {
     rootRef: K
   } = oe({
     controlledProps: y,
-    disabledItemsFocusable: !i,
+    disabledItemsFocusable: !u,
     focusManagement: "DOM",
     getItemDomElement: f,
     isItemDisabled: U,
@@ -269,18 +268,18 @@ function ce(s) {
     onChange: x,
     orientation: P,
     reducerActionContext: r.useMemo(() => ({
-      selectionFollowsFocus: i || !1
-    }), [i]),
+      selectionFollowsFocus: u || !1
+    }), [u]),
     selectionMode: "single",
     stateReducer: ue
   });
   r.useEffect(() => {
-    n !== void 0 && n != null && R({
+    l !== void 0 && l != null && R({
       type: z.valueChange,
-      value: n
+      value: l
     });
-  }, [R, n]);
-  const W = (g = {}) => C({}, g, D(g), {
+  }, [R, l]);
+  const W = (h = {}) => C({}, h, D(h), {
     "aria-orientation": c === "vertical" ? "vertical" : void 0,
     role: "tablist"
   });
@@ -300,24 +299,24 @@ function de(s) {
     value: e,
     children: o
   } = s, {
-    dispatch: l,
-    getItemIndex: a,
+    dispatch: n,
+    getItemIndex: i,
     getItemState: c,
-    registerItem: n,
+    registerItem: l,
     totalSubitemCount: d
-  } = e, i = r.useMemo(() => ({
-    dispatch: l,
+  } = e, u = r.useMemo(() => ({
+    dispatch: n,
     getItemState: c,
-    getItemIndex: a
-  }), [l, a, c]), u = r.useMemo(() => ({
-    getItemIndex: a,
-    registerItem: n,
+    getItemIndex: i
+  }), [n, i, c]), a = r.useMemo(() => ({
+    getItemIndex: i,
+    registerItem: l,
     totalSubitemCount: d
-  }), [n, a, d]);
-  return /* @__PURE__ */ T(O.Provider, {
-    value: u,
+  }), [l, i, d]);
+  return /* @__PURE__ */ T(S.Provider, {
+    value: a,
     children: /* @__PURE__ */ T(Z.Provider, {
-      value: i,
+      value: u,
       children: o
     })
   });
@@ -328,24 +327,24 @@ const me = ["children", "slotProps", "slots"], pe = (s) => {
   } = s;
   return N({
     root: ["root", e]
-  }, w(ie));
+  }, M(ie));
 }, A = /* @__PURE__ */ r.forwardRef(function(e, o) {
-  var l;
+  var n;
   const {
-    children: a,
+    children: i,
     slotProps: c = {},
-    slots: n = {}
+    slots: l = {}
   } = e, d = F(e, me), {
-    isRtl: i,
-    orientation: u,
+    isRtl: u,
+    orientation: a,
     getRootProps: m,
-    contextValue: h
+    contextValue: g
   } = ce({
     rootRef: o
   }), p = C({}, e, {
-    isRtl: i,
-    orientation: u
-  }), f = pe(p), b = (l = n.root) != null ? l : "div", P = $({
+    isRtl: u,
+    orientation: a
+  }), f = pe(p), b = (n = l.root) != null ? n : "div", P = $({
     elementType: b,
     getSlotProps: m,
     externalSlotProps: c.root,
@@ -354,9 +353,9 @@ const me = ["children", "slotProps", "slots"], pe = (s) => {
     className: f.root
   });
   return /* @__PURE__ */ T(de, {
-    value: h,
+    value: g,
     children: /* @__PURE__ */ T(b, C({}, P, {
-      children: a
+      children: i
     }))
   });
 });
@@ -389,16 +388,14 @@ process.env.NODE_ENV !== "production" && (A.propTypes = {
     root: t.elementType
   })
 });
-const ye = q(
-  ({ value: s, className: e, "data-testid": o, children: l, onChange: a }, c) => {
-    const n = (d, i) => {
-      a && a(i, d);
-    };
-    return /* @__PURE__ */ T(S, { "data-testid": o, value: s, onChange: (d, i) => n(d, i), ref: c, children: /* @__PURE__ */ T(A, { className: B(Q.tabs, e), children: l }) });
-  }
-);
+const Ve = q(({ children: s, onChange: e, dataTestId: o }, n) => {
+  const [i, c] = B("1");
+  return /* @__PURE__ */ T(w, { "data-testid": o, value: i, onChange: (d, u) => {
+    c(u), e && e(u, d);
+  }, ref: n, children: /* @__PURE__ */ T(A, { className: Q.tabs, children: s }) });
+});
 export {
-  Ie as Tab,
-  Fe as TabPanel,
-  ye as Tabs
+  Le as Tab,
+  _e as TabPanel,
+  Ve as Tabs
 };

package/dist/components/TextDisplay/TextDisplay.d.ts

@@ -2,12 +2,8 @@ import { VariantType } from '../Typography/Typography.tsx';
 import { default as React } from 'react';
 
 type OptionsProps = {
-    /** Text variant */
     variant?: VariantType;
-    /** Text color */
     color?: string;
-    /** Text weight */
-    bold?: boolean;
 };
 export interface TextDisplayProps {
     /** TextDisplay label */
@@ -16,8 +12,8 @@ export interface TextDisplayProps {
     value: React.ReactNode;
     /** Renders skeleton when true */
     isLoading?: boolean;
-    /** Sets the data-testid prefix for label, value and skeletons */
-    'data-testid'?: string;
+    /** Sets the testId prefix for label, value and skeletons */
+    testId?: string;
     /** Sets the label options */
     labelOptions?: OptionsProps;
     /** Sets the value options */
@@ -25,5 +21,5 @@ export interface TextDisplayProps {
     /** Sets the label and value onto the same line */
     inline?: boolean;
 }
-export declare const TextDisplay: ({ label, value, isLoading, "data-testid": dataTestId, labelOptions, valueOptions, inline, }: TextDisplayProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TextDisplay: ({ label, value, isLoading, testId, labelOptions, valueOptions, inline, }: TextDisplayProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/TextDisplay/TextDisplay.js

@@ -1,51 +1,44 @@
 import '../../assets/TextDisplay.css';
-import { jsxs as f, jsx as d } from "react/jsx-runtime";
-import { c as $ } from "../../clsx-DB4S2d7J.js";
-import { Skeleton as m } from "../Skeleton/Skeleton.js";
-import { Typography as y } from "../Typography/Typography.js";
-const g = "_container_ia8vu_1", e = {
-  container: g,
+import { jsxs as x, jsx as o } from "react/jsx-runtime";
+import { c as _ } from "../../clsx-DB4S2d7J.js";
+import { Skeleton as d } from "../Skeleton/Skeleton.js";
+import { Typography as m } from "../Typography/Typography.js";
+const f = "_container_ia8vu_1", n = {
+  container: f,
   "container--inline": "_container--inline_ia8vu_5"
-}, i = ({
-  label: h,
-  value: x,
-  isLoading: o = !1,
-  "data-testid": t = "TextDisplay",
+}, T = ({
+  label: y,
+  value: i,
+  isLoading: e = !1,
+  testId: t = "TextDisplay",
   labelOptions: r,
-  valueOptions: c,
-  inline: a
+  valueOptions: a,
+  inline: c
 }) => {
-  const _ = (r == null ? void 0 : r.color) || (a ? "var(--black-100)" : "var(--gray-90)");
-  return /* @__PURE__ */ f(
-    "div",
-    {
-      className: $([e.container, { [e["container--inline"]]: a }]),
-      "data-testid": `${t}-container`,
-      children: [
-        /* @__PURE__ */ d(
-          y,
-          {
-            color: _,
-            variant: (r == null ? void 0 : r.variant) || "base",
-            "data-testid": `${t}-label`,
-            bold: (r == null ? void 0 : r.bold) ?? a,
-            children: o ? /* @__PURE__ */ d(m, { style: { width: 70, marginBottom: 2 }, "data-testid": `${t}-skeletonLabel` }) : h
-          }
-        ),
-        /* @__PURE__ */ d(
-          y,
-          {
-            bold: (c == null ? void 0 : c.bold) ?? !a,
-            color: (c == null ? void 0 : c.color) || "var(--gray-90)",
-            variant: (c == null ? void 0 : c.variant) || (a ? "base" : "base-lg"),
-            "data-testid": `${t}-value`,
-            children: o ? /* @__PURE__ */ d(m, { style: { width: 100 }, "data-testid": `${t}-skeletonValue` }) : x || "-"
-          }
-        )
-      ]
-    }
-  );
+  const h = r != null && r.color || c ? "var(--black-100)" : "var(--gray-90)";
+  return /* @__PURE__ */ x("div", { className: _([n.container, { [n["container--inline"]]: c }]), children: [
+    /* @__PURE__ */ o(
+      m,
+      {
+        color: h,
+        variant: (r == null ? void 0 : r.variant) || "base",
+        "data-testid": `${t}-label`,
+        bold: c,
+        children: e ? /* @__PURE__ */ o(d, { style: { width: 70, marginBottom: 2 }, "data-testid": `${t}-skeletonLabel` }) : y
+      }
+    ),
+    /* @__PURE__ */ o(
+      m,
+      {
+        bold: !c,
+        color: (a == null ? void 0 : a.color) || "var(--gray-90)",
+        variant: a != null && a.variant || c ? "base" : "base-lg",
+        "data-testid": `${t}-value`,
+        children: e ? /* @__PURE__ */ o(d, { style: { width: 100 }, "data-testid": `${t}-skeletonValue` }) : i || "-"
+      }
+    )
+  ] });
 };
 export {
-  i as TextDisplay
+  T as TextDisplay
 };