@pismo/marola 0.0.1-alpha.17 → 0.0.1-alpha.18

package/dist/components/Tabs/TabPanel.js

@@ -1,15 +1,14 @@
 import { jsx as T } from "react/jsx-runtime";
-import * as P from "react";
+import * as m from "react";
 import { forwardRef as v } from "react";
 import { u as y, s as x } from "../../Tabs.module-jkH1Qjn7.js";
-import { a as b, _ as C } from "../../objectWithoutPropertiesLoose-D7Cp0Pg_.js";
-import { g as N, a as _, u as w, b as O, P as o, c as E, d as I } from "../../index-CtPvew6C.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 "../../index-CH45lKw7.js";
 import { u as S, a as U } from "../../useCompoundItem-D1iRfg8D.js";
 const h = "TabPanel";
 function j(t) {
-  return N(h, t);
+  return C(h, t);
 }
-_(h, ["root", "hidden"]);
+N(h, ["root", "hidden"]);
 function M(t) {
   return t.size;
 }
@@ -23,13 +22,13 @@ function V(t) {
     throw new Error("No TabContext provided");
   const {
     value: f,
-    getTabId: m
-  } = i, a = S(s), r = P.useRef(null), c = w(r, n), u = P.useMemo(() => ({
+    getTabId: P
+  } = i, a = S(s), r = m.useRef(null), c = _(r, n), u = m.useMemo(() => ({
     id: a,
     ref: r
   }), [a]), {
     id: l
-  } = U(e ?? M, u), d = l !== f, p = l !== void 0 ? m(l) : void 0;
+  } = U(e ?? M, u), d = l !== f, p = l !== void 0 ? P(l) : void 0;
   return {
     hidden: d,
     getRootProps: (g = {}) => b({
@@ -49,18 +48,18 @@ const F = ["children", "value", "slotProps", "slots"], $ = (t) => {
   return E({
     root: ["root", e && "hidden"]
   }, I(j));
-}, R = /* @__PURE__ */ P.forwardRef(function(e, s) {
+}, R = /* @__PURE__ */ m.forwardRef(function(e, s) {
   var n;
   const {
     children: i,
     slotProps: f = {},
-    slots: m = {}
-  } = e, a = C(e, F), {
+    slots: P = {}
+  } = e, a = w(e, F), {
     hidden: r,
     getRootProps: c
   } = V(e), u = b({}, e, {
     hidden: r
-  }), l = $(u), d = (n = m.root) != null ? n : "div", p = O({
+  }), l = $(u), d = (n = P.root) != null ? n : "div", p = O({
     elementType: d,
     getSlotProps: c,
     externalSlotProps: f.root,
@@ -111,9 +110,9 @@ process.env.NODE_ENV !== "production" && (R.propTypes = {
    */
   value: o.oneOfType([o.number, o.string])
 });
-const q = v(
+const W = 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 {
-  q as TabPanel
+  W as TabPanel
 };

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

@@ -0,0 +1,14 @@
+import { TabPanelProps } from './Tabs.tsx';
+import { StoryObj } from '@storybook/react';
+
+declare const meta: {
+    title: string;
+    component: import('react').ForwardRefExoticComponent<TabPanelProps & import('react').RefAttributes<HTMLDivElement>>;
+    tags: string[];
+    parameters: {
+        layout: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Simple: Story;

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

@@ -1,10 +1,14 @@
 import { ReactNode } from 'react';
 
 export interface TabsProps {
+    /** Should contain `Tab` and `TabPanel` components to be rendered  */
     children?: ReactNode;
+    /** Selected tab */
     value?: number | string;
-    dataTestId?: string;
+    /** Callback triggered when the user has selected a tab */
     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

@@ -2,19 +2,18 @@ import { jsx as T } from "react/jsx-runtime";
 import * as r from "react";
 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 Ie } from "./Tab.js";
-import { TabPanel as Fe } from "./TabPanel.js";
-import { a as C, _ as I } from "../../objectWithoutPropertiesLoose-D7Cp0Pg_.js";
-import { g as _, a as F, b as $, P as t, c as N, d as M } from "../../index-CtPvew6C.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 "../../index-CH45lKw7.js";
 import { b as O, C as S } from "../../useCompoundItem-D1iRfg8D.js";
 import { u as X } from "../../useControlled-CCMYYdCM.js";
-import { L as Y, a as Z } from "../../combineHooksSlotProps-D8j4htsd.js";
-import { l as ee, m as te, u as oe } from "../../useList-C5PBIv2I.js";
+import { L as Y, a as Z } from "../../combineHooksSlotProps-DVjg9PRh.js";
+import { l as ee, m as te, u as oe } from "../../useList-B0hog_3-.js";
 const k = "Tabs";
 function se(s) {
-  return _(k, s);
+  return I(k, s);
 }
-F(k, ["root", "horizontal", "vertical"]);
+_(k, ["root", "horizontal", "vertical"]);
 function ne(s) {
   const {
     value: e,
@@ -34,17 +33,17 @@ function ne(s) {
     subitems: m,
     contextValue: g
   } = O(), p = r.useRef(() => {
-  }), f = r.useCallback((x) => {
+  }), b = r.useCallback((x) => {
     var y;
     return (y = m.get(x)) == null ? void 0 : y.id;
-  }, [m]), b = r.useCallback((x) => p.current(x), []), P = r.useCallback((x) => {
+  }, [m]), f = r.useCallback((x) => p.current(x), []), P = r.useCallback((x) => {
     p.current = x;
   }, []);
   return {
     contextValue: C({
       direction: c,
-      getTabId: b,
-      getTabPanelId: f,
+      getTabId: f,
+      getTabPanelId: b,
       onSelected: a,
       orientation: i,
       registerTabIdLookup: P,
@@ -68,23 +67,23 @@ function le(s) {
     totalSubitemCount: m,
     value: g,
     getTabId: p,
-    getTabPanelId: f
-  } = e, b = r.useMemo(() => ({
+    getTabPanelId: b
+  } = e, f = r.useMemo(() => ({
     getItemIndex: i,
     registerItem: d,
     totalSubitemCount: m
   }), [d, i, m]), P = r.useMemo(() => ({
     direction: n,
     getTabId: p,
-    getTabPanelId: f,
+    getTabPanelId: b,
     onSelected: c,
     orientation: l,
     registerTabIdLookup: u,
     selectionFollowsFocus: a,
     value: g
-  }), [n, p, f, c, l, u, a, g]);
+  }), [n, p, b, c, l, u, a, g]);
   return /* @__PURE__ */ T(S.Provider, {
-    value: b,
+    value: f,
     children: /* @__PURE__ */ T(G.Provider, {
       value: P,
       children: o
@@ -106,13 +105,13 @@ const re = ["children", "value", "defaultValue", "orientation", "direction", "on
     direction: l = "ltr",
     slotProps: d = {},
     slots: u = {}
-  } = e, a = I(e, re), m = C({}, e, {
+  } = e, a = F(e, re), m = C({}, e, {
     orientation: c,
     direction: l
   }), {
     contextValue: g
-  } = ne(m), p = ae(m), f = (n = u.root) != null ? n : "div", b = $({
-    elementType: f,
+  } = ne(m), p = ae(m), b = (n = u.root) != null ? n : "div", f = $({
+    elementType: b,
     externalSlotProps: d.root,
     externalForwardedProps: a,
     additionalProps: {
@@ -121,7 +120,7 @@ const re = ["children", "value", "defaultValue", "orientation", "direction", "on
     ownerState: m,
     className: p.root
   });
-  return /* @__PURE__ */ T(f, C({}, b, {
+  return /* @__PURE__ */ T(b, C({}, f, {
     children: /* @__PURE__ */ T(le, {
       value: g,
       children: i
@@ -187,9 +186,9 @@ process.env.NODE_ENV !== "production" && (w.propTypes = {
 });
 const E = "TabsList";
 function ie(s) {
-  return _(E, s);
+  return I(E, s);
 }
-F(E, ["root", "horizontal", "vertical"]);
+_(E, ["root", "horizontal", "vertical"]);
 const z = {
   valueChange: "valueChange"
 };
@@ -233,12 +232,12 @@ function ce(s) {
     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) => {
+  const p = r.useMemo(() => Array.from(a.keys()), [a]), b = r.useCallback((h) => {
     var v, V;
     return h == null ? null : (v = (V = a.get(h)) == null ? void 0 : V.ref.current) != null ? v : null;
-  }, [a]), b = n === "rtl";
+  }, [a]), f = n === "rtl";
   let P;
-  c === "vertical" ? P = "vertical" : P = b ? "horizontal-rtl" : "horizontal-ltr";
+  c === "vertical" ? P = "vertical" : P = f ? "horizontal-rtl" : "horizontal-ltr";
   const x = r.useCallback((h, v) => {
     var V;
     i(h, (V = v[0]) != null ? V : null);
@@ -262,7 +261,7 @@ function ce(s) {
     controlledProps: y,
     disabledItemsFocusable: !u,
     focusManagement: "DOM",
-    getItemDomElement: f,
+    getItemDomElement: b,
     isItemDisabled: U,
     items: p,
     rootRef: o,
@@ -289,7 +288,7 @@ function ce(s) {
     dispatch: R,
     getRootProps: W,
     highlightedValue: j,
-    isRtl: b,
+    isRtl: f,
     orientation: c,
     rootRef: K,
     selectedValue: (e = H[0]) != null ? e : null
@@ -335,7 +334,7 @@ const me = ["children", "slotProps", "slots"], pe = (s) => {
     children: i,
     slotProps: c = {},
     slots: l = {}
-  } = e, d = I(e, me), {
+  } = e, d = F(e, me), {
     isRtl: u,
     orientation: a,
     getRootProps: m,
@@ -345,17 +344,17 @@ const me = ["children", "slotProps", "slots"], pe = (s) => {
   }), p = C({}, e, {
     isRtl: u,
     orientation: a
-  }), f = pe(p), b = (n = l.root) != null ? n : "div", P = $({
-    elementType: b,
+  }), b = pe(p), f = (n = l.root) != null ? n : "div", P = $({
+    elementType: f,
     getSlotProps: m,
     externalSlotProps: c.root,
     externalForwardedProps: d,
     ownerState: p,
-    className: f.root
+    className: b.root
   });
   return /* @__PURE__ */ T(de, {
     value: g,
-    children: /* @__PURE__ */ T(b, C({}, P, {
+    children: /* @__PURE__ */ T(f, C({}, P, {
       children: i
     }))
   });
@@ -389,14 +388,14 @@ process.env.NODE_ENV !== "production" && (A.propTypes = {
     root: t.elementType
   })
 });
-const ye = q(({ children: s, onChange: e, dataTestId: o }, n) => {
+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/Tabs/Tabs.stories.d.ts

@@ -0,0 +1,14 @@
+import { TabsProps } from './Tabs.tsx';
+import { StoryObj } from '@storybook/react';
+
+declare const meta: {
+    title: string;
+    component: import('react').ForwardRefExoticComponent<TabsProps & import('react').RefAttributes<HTMLDivElement>>;
+    tags: string[];
+    parameters: {
+        layout: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Simple: Story;

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

@@ -0,0 +1,23 @@
+import { VariantType } from '../Typography/Typography.tsx';
+import { default as React } from 'react';
+
+type OptionsProps = {
+    variant?: VariantType;
+    color?: string;
+};
+export interface TextDisplayProps {
+    /** TextDisplay label */
+    label: React.ReactNode;
+    /** TextDisplay value */
+    value: React.ReactNode;
+    /** Renders skeleton when true */
+    isLoading?: boolean;
+    /** Sets the testId prefix for label, value and skeletons */
+    testId?: string;
+    /** Sets the label options */
+    labelOptions?: OptionsProps;
+    /** Sets the value options */
+    valueOptions?: OptionsProps;
+}
+export declare const TextDisplay: ({ label, value, isLoading, testId, labelOptions, valueOptions, }: TextDisplayProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/TextDisplay/TextDisplay.js

@@ -0,0 +1,37 @@
+import '../../assets/TextDisplay.css';
+import { jsxs as h, jsx as c } from "react/jsx-runtime";
+import { Skeleton as o } from "../Skeleton/Skeleton.js";
+import { Typography as y } from "../Typography/Typography.js";
+const x = "_container_13z5o_1", f = {
+  container: x
+}, g = ({
+  label: e,
+  value: m,
+  isLoading: d = !1,
+  testId: t = "TextDisplay",
+  labelOptions: r,
+  valueOptions: a
+}) => /* @__PURE__ */ h("div", { className: f.container, children: [
+  /* @__PURE__ */ c(
+    y,
+    {
+      color: (r == null ? void 0 : r.color) || "var(--gray-90)",
+      variant: (r == null ? void 0 : r.variant) || "body-small",
+      "data-testid": `${t}-label`,
+      children: d ? /* @__PURE__ */ c(o, { style: { width: 70, marginBottom: 2 }, "data-testid": `${t}-skeletonLabel` }) : e
+    }
+  ),
+  /* @__PURE__ */ c(
+    y,
+    {
+      bold: !0,
+      color: (a == null ? void 0 : a.color) || "var(--gray-90)",
+      variant: (a == null ? void 0 : a.variant) || "body",
+      "data-testid": `${t}-value`,
+      children: d ? /* @__PURE__ */ c(o, { style: { width: 100 }, "data-testid": `${t}-skeletonValue` }) : m || "-"
+    }
+  )
+] });
+export {
+  g as TextDisplay
+};

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

@@ -0,0 +1,13 @@
+import { StoryObj } from '@storybook/react';
+
+declare const meta: {
+    title: string;
+    component: ({ label, value, isLoading, testId, labelOptions, valueOptions, }: import('./TextDisplay').TextDisplayProps) => import("react/jsx-runtime").JSX.Element;
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Simple: Story;
+export declare const WithLoading: Story;
+export declare const Size: Story;
+export declare const Color: Story;

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

@@ -0,0 +1 @@
+export {};

package/dist/components/Toggle/Toggle.js

@@ -1,9 +1,8 @@
 import '../../assets/Toggle.css';
 import { jsxs as I, jsx as P } from "react/jsx-runtime";
 import { c as C } from "../../clsx-DB4S2d7J.js";
-import { a as x, _ as v } from "../../objectWithoutPropertiesLoose-D7Cp0Pg_.js";
+import { u as v, b as x, g as U, a as q, _ as H, c as F, P as e, d as M, e as A } from "../../index-CH45lKw7.js";
 import * as N from "react";
-import { u as U, g as q, a as H, b as F, P as e, c as M, d as A } from "../../index-CtPvew6C.js";
 import { u as D } from "../../useControlled-CCMYYdCM.js";
 import { u as L } from "../../useIsFocusVisible-BH4IAdcw.js";
 function W(l) {
@@ -40,7 +39,7 @@ function W(l) {
   }, T = (t) => (o) => {
     var b;
     w(o), _.current === !1 && y(!1), a == null || a(o), (b = t.onBlur) == null || b.call(t, o);
-  }, O = U(m, k);
+  }, O = v(m, k);
   return {
     checked: V,
     disabled: !!c,
@@ -66,9 +65,9 @@ function W(l) {
 }
 const $ = "Switch";
 function z(l) {
-  return q($, l);
+  return U($, l);
 }
-H($, ["root", "input", "track", "thumb", "checked", "disabled", "focusVisible", "readOnly"]);
+q($, ["root", "input", "track", "thumb", "checked", "disabled", "focusVisible", "readOnly"]);
 const G = ["checked", "defaultChecked", "disabled", "onBlur", "onChange", "onFocus", "onFocusVisible", "readOnly", "required", "slotProps", "slots"], J = (l) => {
   const {
     checked: s,
@@ -87,7 +86,7 @@ const G = ["checked", "defaultChecked", "disabled", "onBlur", "onChange", "onFoc
   const {
     slotProps: u = {},
     slots: n = {}
-  } = s, i = v(s, G), {
+  } = s, i = H(s, G), {
     getInputProps: V,
     checked: S,
     disabled: B,
@@ -209,7 +208,7 @@ const K = "_toggle_1icxx_1", Q = "_input_1icxx_12", X = "_thumb_1icxx_23", Y = "
   "toggle--checked": "_toggle--checked_1icxx_51",
   toggle__label: Z,
   "toggle--disabled": "_toggle--disabled_1icxx_66"
-}, ne = ({
+}, ce = ({
   label: l,
   checked: s,
   disabled: p,
@@ -248,5 +247,5 @@ const K = "_toggle_1icxx_1", Q = "_input_1icxx_12", X = "_thumb_1icxx_23", Y = "
   ] });
 };
 export {
-  ne as Toggle
+  ce as Toggle
 };

package/dist/components/Tooltip/Tooltip.d.ts

@@ -1,17 +1,29 @@
 import { PopupPlacement } from '@mui/base';
+import { AriaRole, ReactNode } from 'react';
 
-type TooltipProps = {
-    children: React.ReactNode;
-    show?: boolean;
-    anchorRef?: HTMLElement | null | undefined;
+export type TooltipProps = {
+    /** Tooltip reference element. */
+    children: ReactNode;
+    /**  Tooltip title. Zero-length titles string, undefined, null and false are never displayed. */
+    title: ReactNode;
+    /** Should the tooltip be initially open */
+    open?: boolean;
+    /** Disable the hover listener */
     disableHoverListener?: boolean;
+    /** Function to run when the tooltip is closed */
     onClose?: () => void;
+    /** The color of the tooltip */
     theme?: 'white' | 'black';
+    /** Dhe padding applied to the tooltip */
     padding?: 'small' | 'normal';
+    /** The Position where the tooltip will be display relative to the anchor element */
     position?: PopupPlacement;
-    arialRole?: React.AriaRole;
+    /** Accessibility role label */
+    arialRole?: AriaRole;
+    /** Additional classnames to be applied to the tooltip */
     className?: string;
+    /** Test id */
     'data-testid'?: string;
 };
-declare const Tooltip: ({ children, show, anchorRef, onClose, arialRole, position, theme, padding, className, disableHoverListener, ...rest }: TooltipProps) => import("react/jsx-runtime").JSX.Element;
+declare const Tooltip: ({ arialRole, children: childrenProp, className, disableHoverListener, onClose, padding, position, open: openProp, theme, title, ...rest }: TooltipProps) => import("react/jsx-runtime").JSX.Element;
 export { Tooltip };