@pismo/marola 1.2.0 → 2.0.0

package/dist/components/Tooltip/Tooltip.js

@@ -1,132 +1,173 @@
-import { jsx as a, jsxs as S, Fragment as v } from "react/jsx-runtime";
-import * as u from "react";
-import { useRef as P, useState as R, useEffect as C, isValidElement as T, cloneElement as q } from "react";
-import { T as M, P as O } from "../../Popup-Ck3XlWMq.js";
-import { _ as V, b as $, P as l } from "../../useSlotProps-C_I1kEHr.js";
-import { c as z } from "../../clsx-DB4S2d7J.js";
-import { C as D } from "../../ClickAwayListener-DbEYZpyh.js";
-import '../../assets/Tooltip.css';function F() {
-  const n = u.useContext(M);
-  if (!n)
+import { jsx as i, jsxs as g, Fragment as R } from "react/jsx-runtime";
+import * as f from "react";
+import { useRef as T, useState as q, useEffect as E, isValidElement as O, cloneElement as V } from "react";
+import { T as z, P as D } from "../../Popup-C7AXLoP0.js";
+import { c as A } from "../../clsx-OuTLNxxd.js";
+import { _ as F, b as I, P as c } from "../../useSlotProps-DSnfx453.js";
+import { C as L } from "../../ClickAwayListener-CUayzVlD.js";
+import '../../assets/Tooltip.css';function W() {
+  const p = f.useContext(z);
+  if (!p)
     throw new Error("Missing transition context");
   const {
-    registerTransition: o,
-    requestedEnter: r,
+    registerTransition: a,
+    requestedEnter: h,
     onExited: e
-  } = n;
-  return u.useEffect(() => o(), [o]), {
+  } = p;
+  return f.useEffect(() => a(), [a]), {
     onExited: e,
-    requestedEnter: r
+    requestedEnter: h
   };
 }
-const I = ["children", "className", "enterAnimationName", "enterClassName", "exitAnimationName", "exitClassName"];
-function E(n) {
+const $ = ["children", "className", "enterAnimationName", "enterClassName", "exitAnimationName", "exitClassName"];
+function C(p) {
   const {
-    children: o,
-    className: r,
+    children: a,
+    className: h,
     enterAnimationName: e,
-    enterClassName: c,
-    exitAnimationName: _,
-    exitClassName: f
-  } = n, p = V(n, I), {
-    requestedEnter: d,
-    onExited: s
-  } = F(), i = u.useRef(!0);
-  u.useEffect(() => {
-    d && i.current && (i.current = !1);
-  }, [d]);
-  const N = u.useCallback((t) => {
-    t.animationName === _ ? (s(), i.current = !0) : t.animationName === e && (i.current = !1);
-  }, [s, _, e]);
-  return /* @__PURE__ */ a("div", $({
-    onAnimationEnd: N,
-    className: z(r, d ? c : f)
-  }, p, {
-    children: o
+    enterClassName: m,
+    exitAnimationName: l,
+    exitClassName: u
+  } = p, y = F(p, $), {
+    requestedEnter: s,
+    onExited: o
+  } = W(), r = f.useRef(!0);
+  f.useEffect(() => {
+    s && r.current && (r.current = !1);
+  }, [s]);
+  const d = f.useCallback((t) => {
+    t.animationName === l ? (o(), r.current = !0) : t.animationName === e && (r.current = !1);
+  }, [o, l, e]);
+  return /* @__PURE__ */ i("div", I({
+    onAnimationEnd: d,
+    className: A(h, s ? m : u)
+  }, y, {
+    children: a
   }));
 }
-process.env.NODE_ENV !== "production" && (E.propTypes = {
-  children: l.node,
-  className: l.string,
-  enterAnimationName: l.string,
-  enterClassName: l.string,
-  exitAnimationName: l.string,
-  exitClassName: l.string
+process.env.NODE_ENV !== "production" && (C.propTypes = {
+  children: c.node,
+  className: c.string,
+  enterAnimationName: c.string,
+  enterClassName: c.string,
+  exitAnimationName: c.string,
+  exitClassName: c.string
 });
-const W = "_tooltip_1dujm_1", m = {
-  tooltip: W,
-  "tooltip--small-padding": "_tooltip--small-padding_1dujm_5",
-  "tooltip--normal-padding": "_tooltip--normal-padding_1dujm_8",
-  "tooltip--white-theme": "_tooltip--white-theme_1dujm_11",
-  "tooltip--black-theme": "_tooltip--black-theme_1dujm_15",
-  "tooltip--animation": "_tooltip--animation_1dujm_20",
-  "tooltip--anim-open": "_tooltip--anim-open_1dujm_20",
-  "tooltip--open-animation": "_tooltip--open-animation_1dujm_1",
-  "tooltip--anim-close": "_tooltip--anim-close_1dujm_23",
-  "tooltip--close-animation": "_tooltip--close-animation_1dujm_1"
-}, U = ({
-  arialRole: n,
-  children: o,
-  className: r,
+const B = "_tooltip_f9rcp_79", G = "_tooltip__container_f9rcp_125", J = "_tooltip__title_f9rcp_131", K = "_tooltip__content_f9rcp_138", Q = "_tooltip__footer_f9rcp_145", n = {
+  "u-typography-h1": "_u-typography-h1_f9rcp_1",
+  "u-typography-h2": "_u-typography-h2_f9rcp_8",
+  "u-typography-h3": "_u-typography-h3_f9rcp_15",
+  "u-typography-h4": "_u-typography-h4_f9rcp_22",
+  "u-typography-h5": "_u-typography-h5_f9rcp_29",
+  "u-typography-h6": "_u-typography-h6_f9rcp_36",
+  "u-typography-base": "_u-typography-base_f9rcp_43",
+  "u-typography-base--xxl": "_u-typography-base--xxl_f9rcp_49",
+  "u-typography-base--xl": "_u-typography-base--xl_f9rcp_53",
+  "u-typography-base--lg": "_u-typography-base--lg_f9rcp_57",
+  "u-typography-base--sm": "_u-typography-base--sm_f9rcp_61",
+  "u-typography-base--bold": "_u-typography-base--bold_f9rcp_65",
+  "u-typography-base--strikethrough": "_u-typography-base--strikethrough_f9rcp_68",
+  "u-typography-base--underlined": "_u-typography-base--underlined_f9rcp_71",
+  "u-typography-base--strikethrough-underlined": "_u-typography-base--strikethrough-underlined_f9rcp_74",
+  tooltip: B,
+  "tooltip--bottom": "_tooltip--bottom_f9rcp_96",
+  "tooltip--top": "_tooltip--top_f9rcp_103",
+  "tooltip--right": "_tooltip--right_f9rcp_110",
+  "tooltip--left": "_tooltip--left_f9rcp_117",
+  tooltip__container: G,
+  tooltip__title: J,
+  tooltip__content: K,
+  tooltip__footer: Q,
+  "tooltip__footer-button": "_tooltip__footer-button_f9rcp_149",
+  "tooltip__footer-link": "_tooltip__footer-link_f9rcp_169",
+  "s--animation": "_s--animation_f9rcp_180",
+  "tooltip--anim-open": "_tooltip--anim-open_f9rcp_180",
+  "tooltip--open-animation": "_tooltip--open-animation_f9rcp_1",
+  "tooltip--anim-close": "_tooltip--anim-close_f9rcp_183",
+  "tooltip--close-animation": "_tooltip--close-animation_f9rcp_1"
+}, ot = ({
+  arialRole: p,
+  children: a,
+  className: h,
   disableHoverListener: e,
-  onClose: c,
-  padding: _ = "small",
-  position: f = "bottom",
-  open: p,
-  theme: d = "black",
-  title: s,
-  onTargetCreated: i,
-  ...N
+  onClose: m,
+  position: l = "bottom",
+  open: u,
+  title: y,
+  content: s,
+  footer: o,
+  onTargetCreated: r,
+  ...d
 }) => {
-  const t = P(null), [b, h] = R(p || !1);
-  let j = b;
-  C(() => {
-    h(p || !1);
-  }, [p]);
-  const A = T(o) ? o : /* @__PURE__ */ a("span", { children: o });
-  !s && s !== 0 && (j = !1);
-  const y = () => {
-    c == null || c(), !e && h(!1);
+  const t = T(null), [P, _] = q(u || !1);
+  let N = P;
+  E(() => {
+    _(u || !1);
+  }, [u]);
+  const b = O(a) ? a : /* @__PURE__ */ i("span", { children: a });
+  !s && s !== 0 && (N = !1);
+  const v = () => {
+    m == null || m(), !e && _(!1);
   };
-  C(() => {
+  E(() => {
     if (t != null && t.current) {
-      const x = t == null ? void 0 : t.current;
-      i == null || i(x), e || (x.onpointerenter = () => h(!0), x.onpointerleave = () => h(!1));
+      const j = t == null ? void 0 : t.current;
+      r == null || r(j);
     }
   }, [t, e]);
-  const g = {
-    padding: f.match(/(bottom|top)/) ? ".25rem 0" : "0 .25rem",
+  const x = () => {
+    e || _(!0);
+  }, k = () => {
+    e || _(!1);
+  }, S = {
+    padding: l.match(/(bottom|top)/) ? ".25rem 0" : "0 .25rem",
     zIndex: 1
-  }, k = [
-    m.tooltip,
-    m[`tooltip--${d}-theme`],
-    m[`tooltip--${_}-padding`],
-    r || ""
-  ].join(" ").trim(), w = {
-    ...A.props,
-    ref: t
+  }, w = A(n.tooltip, n[`tooltip--${l}`], h), M = {
+    ...b.props,
+    ref: t,
+    onPointerEnter: e ? void 0 : () => _(!0),
+    onPointerLeave: e ? void 0 : () => _(!1)
   };
-  return /* @__PURE__ */ S(v, { children: [
-    q(A, w),
-    /* @__PURE__ */ a(
-      O,
+  return /* @__PURE__ */ g(R, { children: [
+    V(b, M),
+    /* @__PURE__ */ i(
+      D,
       {
         disablePortal: !0,
-        ...N,
-        open: j,
+        ...d,
+        open: N,
         anchor: t == null ? void 0 : t.current,
-        style: g,
-        role: n,
-        placement: f,
-        children: /* @__PURE__ */ a(
-          E,
+        style: S,
+        role: p,
+        placement: l,
+        onPointerEnter: x,
+        onPointerLeave: k,
+        "data-testid": "popup",
+        children: /* @__PURE__ */ i(
+          C,
           {
-            className: m["tooltip--animation"],
-            enterClassName: m["tooltip--anim-open"],
-            exitClassName: m["tooltip--anim-close"],
+            className: n["tooltip--animation"],
+            enterClassName: n["tooltip--anim-open"],
+            exitClassName: n["tooltip--anim-close"],
             enterAnimationName: "tooltip--open-animation",
             exitAnimationName: "tooltip--close-animation",
-            children: /* @__PURE__ */ a("div", { className: k, children: /* @__PURE__ */ a(D, { onClickAway: y, children: /* @__PURE__ */ a("div", { children: s }) }) })
+            children: /* @__PURE__ */ i("div", { className: w, onPointerEnter: x, onPointerLeave: k, children: /* @__PURE__ */ i(L, { onClickAway: v, children: /* @__PURE__ */ g("div", { className: n.tooltip__container, children: [
+              y && /* @__PURE__ */ i("div", { className: n.tooltip__title, children: y }),
+              /* @__PURE__ */ i("div", { className: n.tooltip__content, children: s }),
+              o && /* @__PURE__ */ g("div", { className: n.tooltip__footer, children: [
+                o.type === "button" && o.onClick && /* @__PURE__ */ i("button", { onClick: o.onClick, className: n["tooltip__footer-button"], children: o.label }),
+                o.type === "link" && o.href && /* @__PURE__ */ i(
+                  "a",
+                  {
+                    href: o.href,
+                    className: n["tooltip__footer-link"],
+                    target: "_blank",
+                    rel: "noopener noreferrer",
+                    children: o.label
+                  }
+                )
+              ] })
+            ] }) }) })
           }
         )
       }
@@ -134,5 +175,5 @@ const W = "_tooltip_1dujm_1", m = {
   ] });
 };
 export {
-  U as Tooltip
+  ot as Tooltip
 };

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

@@ -1,21 +1,25 @@
-import { TooltipProps } from './Tooltip.tsx';
 import { StoryObj } from '@storybook/react';
-
+import { TooltipProps } from './Tooltip';
 declare const meta: {
     title: string;
-    component: ({ arialRole, children: childrenProp, className, disableHoverListener, onClose, padding, position, open: openProp, theme, title, onTargetCreated, ...rest }: TooltipProps) => import("react/jsx-runtime").JSX.Element;
+    component: ({ arialRole, children: childrenProp, className, disableHoverListener, onClose, position, open: openProp, title, content, footer, onTargetCreated, ...rest }: TooltipProps) => import("react/jsx-runtime").JSX.Element;
     tags: string[];
     parameters: {
         layout: string;
     };
     decorators: ((Story: import('@storybook/csf').PartialStoryFn<import('@storybook/react').ReactRenderer, {
         children: import('react').ReactNode;
-        title: import('react').ReactNode;
+        title?: import('react').ReactNode;
+        content: import('react').ReactNode;
+        footer?: {
+            type: "link" | "button";
+            label: string;
+            onClick?: (() => void) | undefined;
+            href?: string | undefined;
+        } | undefined;
         open?: boolean | undefined;
         disableHoverListener?: boolean | undefined;
         onClose?: (() => void) | undefined;
-        theme?: "black" | "white" | undefined;
-        padding?: "small" | "normal" | undefined;
         position?: import('@floating-ui/utils').Placement | undefined;
         arialRole?: import('react').AriaRole | undefined;
         className?: string | undefined;
@@ -28,9 +32,13 @@ declare const meta: {
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Simple: Story;
+export declare const SimpleWithContent: Story;
 export declare const Onclose: Story;
-export declare const InitialOpen: Story;
-export declare const WhiteTheme: Story;
 export declare const DisabledHover: Story;
-export declare const NormalPadding: Story;
-export declare const Positioning: Story;
+export declare const WithContentAndButtonFooter: Story;
+export declare const WithContentAndLinkFooter: Story;
+export declare const PositionTop: Story;
+export declare const PositionBottom: Story;
+export declare const PositionLeft: Story;
+export declare const PositionRight: Story;
+export declare const IconHover: Story;

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

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

package/dist/components/TransactionRow/TransactionRow.d.ts

@@ -1,5 +1,4 @@
 import { IconName } from '../Icon/types';
-
 type TransactionRowProps = {
     dateTime?: React.ReactNode;
     month?: React.ReactNode;

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

@@ -1,5 +1,4 @@
 import { StoryObj } from '@storybook/react';
-
 declare const meta: {
     title: string;
     component: ({ dateTime, category, name, type, installments, amount, month, icon, onClick, isPendingTransaction, }: {

package/dist/components/Typography/Typography.d.ts

@@ -1,5 +1,4 @@
 import { ComponentType, ElementType, HTMLAttributes, LabelHTMLAttributes, ReactNode } from 'react';
-
 export type VariantType = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'base-lg' | 'base-xl' | 'base-xxl' | 'base' | 'base-sm';
 export type CommonTypographyHTMLAttributes = HTMLAttributes<HTMLParagraphElement> & HTMLAttributes<HTMLHeadingElement> & HTMLAttributes<HTMLSpanElement> & HTMLAttributes<HTMLTableCellElement>;
 export type TypographyProps = {

package/dist/components/Typography/Typography.js

@@ -1,7 +1,7 @@
 import { jsx as m } from "react/jsx-runtime";
 import { forwardRef as c, useMemo as f } from "react";
 import { bemify as x, getBEMBase as k, getBEMBlock as B } from "../../utils/styleStrings.js";
-import { c as $ } from "../../clsx-DB4S2d7J.js";
+import { c as $ } from "../../clsx-OuTLNxxd.js";
 import '../../assets/Typography.css';const t = {
   "u-typography-h1": "_u-typography-h1_gn8st_1",
   "u-typography-h2": "_u-typography-h2_gn8st_8",

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

@@ -1,5 +1,4 @@
 import { StoryObj } from '@storybook/react';
-
 declare const meta: {
     title: string;
     component: import('react').ForwardRefExoticComponent<import('./Typography').TypographyProps & import('react').RefAttributes<import('react').ElementType | import('react').ComponentType>>;

package/dist/contexts/SnackbarProvider/SnackbarProvider.d.ts

@@ -1,5 +1,4 @@
 import { SnackbarProps } from '../../components/Snackbar/Snackbar';
-
 export type SnackbarContextProps = {
     showMessage: (message: string, variant?: SnackbarProps['variant'], duration?: number) => void;
 };

package/dist/contexts/SnackbarProvider/SnackbarProvider.js

@@ -1,12 +1,12 @@
 import { jsx as u, jsxs as l, Fragment as g } from "react/jsx-runtime";
-import { createContext as p, useState as f, useCallback as b, createElement as k, useContext as C } from "react";
-import { r as v } from "../../index-bQFToy-I.js";
+import { createContext as p, useContext as f, useState as b, useCallback as k, createElement as C } from "react";
+import { r as v } from "../../index-CATDT7fJ.js";
 import { Snackbar as x } from "../../components/Snackbar/Snackbar.js";
 const o = p({
   showMessage: () => {
   }
 }), t = { message: "", variant: "success", duration: 5e3, open: !1 }, D = ({ children: n, ...r }) => {
-  const [e, s] = f(t), c = b(
+  const [e, s] = b(t), c = k(
     (a = t.message, d = t.variant, m = t.duration) => {
       s({
         id: `${(/* @__PURE__ */ new Date()).getTime()}-${a}`,
@@ -29,7 +29,7 @@ const o = p({
       children: /* @__PURE__ */ l(g, { children: [
         n,
         v.createPortal(
-          /* @__PURE__ */ k(
+          /* @__PURE__ */ C(
             x,
             {
               ...r,
@@ -47,7 +47,7 @@ const o = p({
       ] })
     }
   );
-}, P = () => C(o);
+}, P = () => f(o);
 export {
   o as SnackbarContext,
   D as SnackbarProvider,

package/dist/contexts/SnackbarProvider/SnackbarProvider.stories.d.ts

@@ -1,6 +1,5 @@
-import { SnackbarProviderProps } from './SnackbarProvider';
 import { StoryObj } from '@storybook/react';
-
+import { SnackbarProviderProps } from './SnackbarProvider';
 declare const meta: {
     title: string;
     component: ({ children, ...snackbarProps }: SnackbarProviderProps) => import("react/jsx-runtime").JSX.Element;