@pismo/marola 2.1.3 → 2.1.5

package/dist/{Toggle-Dp20f7qn.js → Toggle-C-6aiSvn.js}

@@ -44,7 +44,7 @@ import './assets/Toggle2.css';const I = "_chip_1wvod_61", P = "_chip__adornment_
   "chip__remove--disabled": "_chip__remove--disabled_1wvod_133",
   "chip-loading": "_chip-loading_1wvod_137"
 }, S = u((t, d) => {
-  const { children: _, onClickContent: o, disabled: r, className: a, variant: s } = t;
+  const { children: p, onClickContent: o, disabled: r, className: a, variant: s } = t;
   let e = l(
     n.chip,
     { [n["chip--outlined"]]: s === "outlined" },
@@ -59,12 +59,12 @@ import './assets/Toggle2.css';const I = "_chip_1wvod_61", P = "_chip__adornment_
       "data-testid": t["data-testid"],
       ref: d,
       className: e,
-      children: _
+      children: p
     }
-  )) : /* @__PURE__ */ i("span", { "data-testid": t["data-testid"], ref: d, className: e, children: _ });
+  )) : /* @__PURE__ */ i("span", { "data-testid": t["data-testid"], ref: d, className: e, children: p });
 }), Y = u((t, d) => {
   const {
-    label: _,
+    label: p,
     className: o,
     onClickContent: r,
     leftAdornment: a,
@@ -93,7 +93,7 @@ import './assets/Toggle2.css';const I = "_chip_1wvod_61", P = "_chip__adornment_
       variant: g,
       children: [
         a && /* @__PURE__ */ i(v, { ...w }),
-        _,
+        p,
         m && /* @__PURE__ */ i(
           "span",
           {
@@ -101,8 +101,8 @@ import './assets/Toggle2.css';const I = "_chip_1wvod_61", P = "_chip__adornment_
             role: "button",
             tabIndex: e ? -1 : 0,
             "aria-label": "remove",
-            onClick: (p) => {
-              p == null || p.stopPropagation(), p == null || p.nativeEvent.stopImmediatePropagation(), m();
+            onClick: (_) => {
+              _ == null || _.stopPropagation(), _ == null || _.nativeEvent.stopImmediatePropagation(), m();
             },
             "aria-disabled": e,
             children: /* @__PURE__ */ i(C, { icon: "circle-xmark", size: "1.125rem", color: "rgba(var(--gray-95-rgb), 0.45)" })
@@ -117,14 +117,14 @@ import './assets/Toggle2.css';const I = "_chip_1wvod_61", P = "_chip__adornment_
   "row-item--disabled": "_row-item--disabled_8z1a0_19",
   "row-item__content": "_row-item__content_8z1a0_22"
 }, Z = u((t, d) => {
-  const { children: _, leftAdornment: o, disabled: r, onClick: a, buttons: s, ariaLabel: e, className: g } = t, m = l(o == null ? void 0 : o.className, h["row-item__adornment"]), w = {
+  const { children: p, leftAdornment: o, disabled: r, onClick: a, buttons: s, ariaLabel: e, className: g } = t, m = l(o == null ? void 0 : o.className, h["row-item__adornment"]), w = {
     onClick: (c) => {
       r || a && a(c);
     },
     tabIndex: 0,
     "aria-label": e,
     role: "button"
-  }, p = o != null && o.customIcon ? o : { size: "1rem", ...o };
+  }, _ = o != null && o.customIcon ? o : { size: "1rem", ...o };
   return /* @__PURE__ */ k(
     "div",
     {
@@ -138,8 +138,8 @@ import './assets/Toggle2.css';const I = "_chip_1wvod_61", P = "_chip__adornment_
       ...!!a && w,
       ref: d,
       children: [
-        o && /* @__PURE__ */ i(v, { ...p, className: m, disabled: r }),
-        /* @__PURE__ */ i("span", { className: l(h["row-item__content"]), children: _ }),
+        o && /* @__PURE__ */ i(v, { ..._, className: m, disabled: r }),
+        /* @__PURE__ */ i("span", { className: l(h["row-item__content"]), children: p }),
         s && /* @__PURE__ */ i(
           "div",
           {
@@ -153,7 +153,7 @@ import './assets/Toggle2.css';const I = "_chip_1wvod_61", P = "_chip__adornment_
     }
   );
 }), A = u((t, d) => {
-  const { text: _, isSelected: o = !1, value: r, onChange: a, disabled: s } = t;
+  const { text: p, isSelected: o = !1, value: r, onChange: a, disabled: s, type: e } = t;
   return /* @__PURE__ */ k(
     "label",
     {
@@ -168,17 +168,17 @@ import './assets/Toggle2.css';const I = "_chip_1wvod_61", P = "_chip__adornment_
           "input",
           {
             className: l([y.toggle__input]),
-            type: "radio",
+            type: e ?? "radio",
             ref: d,
             value: r.toString(),
             onChange: () => a(r),
-            role: "radio",
+            role: e ?? "radio",
             checked: o,
             "aria-checked": o,
             disabled: s
           }
         ),
-        /* @__PURE__ */ i(N, { bold: !0, children: _ })
+        /* @__PURE__ */ i(N, { bold: !0, children: p })
       ]
     }
   );

package/dist/assets/TransactionRow.css

@@ -1 +1 @@
-._container_1zn5j_1{width:100%;height:56px;border-top:1px solid var(--border-secondary)}._container-grid_1zn5j_6{display:grid;grid-template-columns:1fr 2fr .5fr 4fr 2fr 2fr;align-items:center;justify-content:space-between;padding:12px 16px}._container-pending_1zn5j_13{display:flex;align-items:center;justify-content:flex-start;padding:12px 16px}._container-pending--right_1zn5j_19{margin-left:auto}._container_1zn5j_1 :hover{background-color:var(--border-secondary)}._info-section_1zn5j_26{display:flex}._info-section--item_1zn5j_29{padding-left:8px}._info-section--item_1zn5j_29:not(:first-child){margin-left:8px;border-left:1px solid var(--border-secondary)}._info-section--right_1zn5j_36{display:flex;justify-content:flex-end}
+._container_1apn3_1{width:100%;height:56px;border-top:1px solid var(--border-secondary)}._container-grid_1apn3_6{display:grid;grid-template-columns:1fr 2fr .5fr 4fr 2fr 2fr;align-items:center;justify-content:space-between;padding:12px 16px}._container-pending_1apn3_13{display:flex;align-items:center;justify-content:flex-start;padding:12px 16px}._container-pending--right_1apn3_19{margin-left:auto}._container_1apn3_1 :hover{cursor:pointer;background-color:var(--border-secondary)}._info-section_1apn3_27{display:flex}._info-section--item_1apn3_30{padding-left:8px}._info-section--item_1apn3_30:not(:first-child){margin-left:8px;border-left:1px solid var(--border-secondary)}._info-section--right_1apn3_37{display:flex;justify-content:flex-end}

package/dist/components/Chip/Chip.js

@@ -7,7 +7,7 @@ import "../Typography/Typography.js";
 import "../Input/Input.js";
 import "../Avatar/Avatar.js";
 import "../Button/Button.js";
-import { C as v } from "../../Toggle-Dp20f7qn.js";
+import { C as v } from "../../Toggle-C-6aiSvn.js";
 import "../Dialog/Dialog.js";
 import "../DatePicker/DatePicker.js";
 import "../Skeleton/Skeleton.js";

package/dist/components/RadioButton/RadioButton.js

@@ -7,7 +7,7 @@ import { Typography as Me } from "../Typography/Typography.js";
 import "../Input/Input.js";
 import "../Avatar/Avatar.js";
 import "../Button/Button.js";
-import "../../Toggle-Dp20f7qn.js";
+import "../../Toggle-C-6aiSvn.js";
 import "../Dialog/Dialog.js";
 import "../DatePicker/DatePicker.js";
 import "../IconButton/IconButton.js";

package/dist/components/RadioButton/RadioOption.js

@@ -6,7 +6,7 @@ import * as a from "react";
 import "../Input/Input.js";
 import "../Avatar/Avatar.js";
 import "../Button/Button.js";
-import "../../Toggle-Dp20f7qn.js";
+import "../../Toggle-C-6aiSvn.js";
 import "../Dialog/Dialog.js";
 import "../DatePicker/DatePicker.js";
 import "../IconButton/IconButton.js";

package/dist/components/ResultWithChips/ResultWithChips.js

@@ -1,5 +1,5 @@
 import { jsxs as i, jsx as e } from "react/jsx-runtime";
-import { C as t } from "../../Toggle-Dp20f7qn.js";
+import { C as t } from "../../Toggle-C-6aiSvn.js";
 import '../../assets/ResultWithChips.css';const r = "_container_hgp0p_1", o = "_label_hgp0p_17", a = {
   container: r,
   "chip-item-wrapper": "_chip-item-wrapper_hgp0p_8",

package/dist/components/RowItem/RowItem.js

@@ -7,7 +7,7 @@ import "../Typography/Typography.js";
 import "../Input/Input.js";
 import "../Avatar/Avatar.js";
 import "../Button/Button.js";
-import { R as j, R as k } from "../../Toggle-Dp20f7qn.js";
+import { R as j, R as k } from "../../Toggle-C-6aiSvn.js";
 import "../Dialog/Dialog.js";
 import "../DatePicker/DatePicker.js";
 import "../IconButton/IconButton.js";

package/dist/components/ToggleGroup/Toggle.d.ts

@@ -12,6 +12,8 @@ export type ToggleGroupItemProps<T extends string | number> = {
     'data-testid'?: string;
     /** Controls if component should be disabled */
     disabled?: boolean;
+    /** Set type radio or checkbox */
+    type?: 'radio' | 'checkbox';
 };
 declare const Toggle: import('react').ForwardRefExoticComponent<ToggleGroupItemProps<string | number> & import('react').RefAttributes<HTMLInputElement>>;
 export default Toggle;

package/dist/components/ToggleGroup/Toggle.js

@@ -6,7 +6,7 @@ import "../Typography/Typography.js";
 import "../Input/Input.js";
 import "../Avatar/Avatar.js";
 import "../Button/Button.js";
-import { T as k } from "../../Toggle-Dp20f7qn.js";
+import { T as k } from "../../Toggle-C-6aiSvn.js";
 import "../Dialog/Dialog.js";
 import "../DatePicker/DatePicker.js";
 import "../IconButton/IconButton.js";

package/dist/components/ToggleGroup/ToggleGroup.js

@@ -1,4 +1,4 @@
-import { T as e } from "../../Toggle-Dp20f7qn.js";
+import { T as e } from "../../Toggle-C-6aiSvn.js";
 import { G as p } from "../../Group-DJz1rK2n.js";
 export {
   p as ToggleGroup,

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

@@ -3,6 +3,7 @@ type TransactionRowProps = {
     dateTime?: React.ReactNode;
     month?: React.ReactNode;
     category?: React.ReactNode;
+    categoryType?: React.ReactNode;
     name: React.ReactNode;
     type?: React.ReactNode;
     icon?: IconName;
@@ -10,6 +11,8 @@ type TransactionRowProps = {
     installments?: React.ReactNode;
     onClick?: () => void;
     isPendingTransaction?: boolean;
+    isLoading?: boolean;
+    'data-testid'?: string;
 };
-export declare const TransactionRow: ({ dateTime, category, name, type, installments, amount, month, icon, onClick, isPendingTransaction, }: TransactionRowProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TransactionRow: ({ dateTime, category, categoryType, name, type, installments, amount, month, icon, onClick, isPendingTransaction, isLoading, "data-testid": dataTestId, }: TransactionRowProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/TransactionRow/TransactionRow.js

@@ -1,43 +1,48 @@
-import { jsx as i, jsxs as a } from "react/jsx-runtime";
-import { Avatar as l } from "../Avatar/Avatar.js";
-import { Icon as h } from "../Icon/Icon.js";
-import { Typography as r } from "../Typography/Typography.js";
-import '../../assets/TransactionRow.css';const f = "_container_1zn5j_1", n = {
-  container: f,
-  "container-grid": "_container-grid_1zn5j_6",
-  "container-pending": "_container-pending_1zn5j_13",
-  "container-pending--right": "_container-pending--right_1zn5j_19",
-  "info-section": "_info-section_1zn5j_26",
-  "info-section--item": "_info-section--item_1zn5j_29",
-  "info-section--right": "_info-section--right_1zn5j_36"
+import { jsx as e, jsxs as c } from "react/jsx-runtime";
+import { Avatar as p } from "../Avatar/Avatar.js";
+import { Icon as y } from "../Icon/Icon.js";
+import { SkeletonCircle as f, Skeleton as r } from "../Skeleton/Skeleton.js";
+import { Typography as a } from "../Typography/Typography.js";
+import '../../assets/TransactionRow.css';const $ = "_container_1apn3_1", i = {
+  container: $,
+  "container-grid": "_container-grid_1apn3_6",
+  "container-pending": "_container-pending_1apn3_13",
+  "container-pending--right": "_container-pending--right_1apn3_19",
+  "info-section": "_info-section_1apn3_27",
+  "info-section--item": "_info-section--item_1apn3_30",
+  "info-section--right": "_info-section--right_1apn3_37"
 }, j = ({
-  dateTime: v,
-  category: c,
-  name: o,
-  type: m,
-  installments: t,
-  amount: s,
+  dateTime: _,
+  category: s,
+  categoryType: l,
+  name: d,
+  type: N,
+  installments: h,
+  amount: v,
   month: g,
-  icon: d,
-  onClick: e,
-  isPendingTransaction: _
-}) => _ ? /* @__PURE__ */ i("div", { className: n.container, children: /* @__PURE__ */ a("div", { className: n["container-pending"], onClick: () => e == null ? void 0 : e(), children: [
-  /* @__PURE__ */ i(l, { type: "icon", children: /* @__PURE__ */ i(h, { icon: d || "clock" }) }),
-  /* @__PURE__ */ i("div", { className: n["info-section"], children: /* @__PURE__ */ i("div", { className: n["info-section--item"], children: /* @__PURE__ */ i(r, { color: "var(--gray-95)", variant: "base", children: o }) }) }),
-  /* @__PURE__ */ i("div", { className: n["container-pending--right"], children: /* @__PURE__ */ i(r, { bold: !0, color: "var(--gray-95)", variant: "base", children: s }) })
-] }) }) : /* @__PURE__ */ i("div", { className: n.container, children: /* @__PURE__ */ a("div", { onClick: () => e == null ? void 0 : e(), className: n["container-grid"], children: [
-  /* @__PURE__ */ i("div", { children: /* @__PURE__ */ i(r, { color: "var(--gray-95)", variant: "base", children: g }) }),
-  /* @__PURE__ */ i("div", { children: /* @__PURE__ */ i(r, { color: "var(--gray-95)", variant: "base", children: v }) }),
-  /* @__PURE__ */ i(l, { type: "icon", children: /* @__PURE__ */ i(h, { icon: d || "coin" }) }),
-  /* @__PURE__ */ a("div", { className: n["info-section"], children: [
-    /* @__PURE__ */ i("div", { className: n["info-section--item"], children: /* @__PURE__ */ i(r, { color: "var(--gray-95)", variant: "base", children: o }) }),
-    c && /* @__PURE__ */ i("div", { className: n["info-section--item"], children: /* @__PURE__ */ i(r, { color: "var(--gray-95)", variant: "base", children: c }) })
+  icon: m,
+  onClick: o,
+  isPendingTransaction: b,
+  isLoading: n = !1,
+  "data-testid": t = "Description"
+}) => b ? /* @__PURE__ */ e("div", { className: i.container, children: /* @__PURE__ */ c("div", { className: i["container-pending"], onClick: () => o == null ? void 0 : o(), children: [
+  n ? /* @__PURE__ */ e(f, { size: "32px", "data-testid": `${t}-skeletonIcon` }) : /* @__PURE__ */ e(p, { type: "icon", children: /* @__PURE__ */ e(y, { icon: m || "clock" }) }),
+  /* @__PURE__ */ e("div", { className: i["info-section"], children: /* @__PURE__ */ e("div", { className: i["info-section--item"], children: n ? /* @__PURE__ */ e(r, { style: { width: 140 }, "data-testid": `${t}-skeletonName` }) : /* @__PURE__ */ e(a, { color: "var(--gray-95)", variant: "base", children: d }) }) }),
+  /* @__PURE__ */ e("div", { className: i["container-pending--right"], children: n ? /* @__PURE__ */ e(r, { style: { width: 70 }, "data-testid": `${t}-skeletonAmount` }) : /* @__PURE__ */ e(a, { bold: !0, color: "var(--gray-95)", variant: "base", children: v }) })
+] }) }) : /* @__PURE__ */ e("div", { className: i.container, children: /* @__PURE__ */ c("div", { onClick: () => o == null ? void 0 : o(), className: i["container-grid"], children: [
+  /* @__PURE__ */ e("div", { children: n ? /* @__PURE__ */ e(r, { style: { width: 50 }, "data-testid": `${t}-skeletonMonth` }) : /* @__PURE__ */ e(a, { color: "var(--gray-95)", variant: "base", children: g }) }),
+  /* @__PURE__ */ e("div", { children: n ? /* @__PURE__ */ e(r, { style: { width: 90 }, "data-testid": `${t}-skeletonDate` }) : /* @__PURE__ */ e(a, { color: "var(--gray-95)", variant: "base", children: _ }) }),
+  n ? /* @__PURE__ */ e(f, { size: "32px", "data-testid": `${t}-skeletonIcon` }) : /* @__PURE__ */ e(p, { type: "icon", children: /* @__PURE__ */ e(y, { icon: m || "coin" }) }),
+  /* @__PURE__ */ c("div", { className: i["info-section"], children: [
+    /* @__PURE__ */ e("div", { className: i["info-section--item"], children: n ? /* @__PURE__ */ e(r, { style: { width: 70 }, "data-testid": `${t}-skeletonName` }) : /* @__PURE__ */ e(a, { color: "var(--gray-95)", variant: "base", children: d }) }),
+    s && /* @__PURE__ */ e("div", { className: i["info-section--item"], children: n ? /* @__PURE__ */ e(r, { style: { width: 70 }, "data-testid": `${t}-skeletonCategory` }) : /* @__PURE__ */ e(a, { color: "var(--gray-95)", variant: "base", children: s }) }),
+    l && /* @__PURE__ */ e("div", { className: i["info-section--item"], children: n ? /* @__PURE__ */ e(r, { style: { width: 70 }, "data-testid": `${t}-skeletonCategoryType` }) : /* @__PURE__ */ e(a, { color: "var(--gray-95)", variant: "base", children: l }) })
   ] }),
-  /* @__PURE__ */ a("div", { className: n["info-section--right"], children: [
-    t && /* @__PURE__ */ i("div", { className: n["info-section--item"], children: /* @__PURE__ */ i(r, { color: "var(--gray-95)", variant: "base", children: t }) }),
-    /* @__PURE__ */ i("div", { className: n["info-section--item"], children: /* @__PURE__ */ i(r, { color: "var(--gray-95)", variant: "base", children: m }) })
+  /* @__PURE__ */ c("div", { className: i["info-section--right"], children: [
+    h && /* @__PURE__ */ e("div", { className: i["info-section--item"], children: n ? /* @__PURE__ */ e(r, { style: { width: 70 }, "data-testid": `${t}-skeletonInstallments` }) : /* @__PURE__ */ e(a, { color: "var(--gray-95)", variant: "base", children: h }) }),
+    /* @__PURE__ */ e("div", { className: i["info-section--item"], children: n ? /* @__PURE__ */ e(r, { style: { width: 70 }, "data-testid": `${t}-skeletonType` }) : /* @__PURE__ */ e(a, { color: "var(--gray-95)", variant: "base", children: N }) })
   ] }),
-  /* @__PURE__ */ i("div", { className: n["info-section--right"], children: /* @__PURE__ */ i(r, { bold: !0, variant: "base", children: s }) })
+  /* @__PURE__ */ e("div", { className: i["info-section--right"], children: n ? /* @__PURE__ */ e(r, { style: { width: 140 }, "data-testid": `${t}-skeletonAmount` }) : /* @__PURE__ */ e(a, { bold: !0, variant: "base", children: v }) })
 ] }) });
 export {
   j as TransactionRow

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

@@ -1,10 +1,11 @@
 import { StoryObj } from '@storybook/react';
 declare const meta: {
     title: string;
-    component: ({ dateTime, category, name, type, installments, amount, month, icon, onClick, isPendingTransaction, }: {
+    component: ({ dateTime, category, categoryType, name, type, installments, amount, month, icon, onClick, isPendingTransaction, isLoading, "data-testid": dataTestId, }: {
         dateTime?: import('react').ReactNode;
         month?: import('react').ReactNode;
         category?: import('react').ReactNode;
+        categoryType?: import('react').ReactNode;
         name: import('react').ReactNode;
         type?: import('react').ReactNode;
         icon?: import('../Icon/types').IconName | undefined;
@@ -12,6 +13,8 @@ declare const meta: {
         installments?: import('react').ReactNode;
         onClick?: (() => void) | undefined;
         isPendingTransaction?: boolean | undefined;
+        isLoading?: boolean | undefined;
+        'data-testid'?: string | undefined;
     }) => import("react/jsx-runtime").JSX.Element;
     tags: string[];
     parameters: {
@@ -23,7 +26,10 @@ type Story = StoryObj<typeof meta>;
 export declare const Simple: Story;
 export declare const WithMonth: Story;
 export declare const WithInstallments: Story;
+export declare const WithCategoryType: Story;
+export declare const Loading: Story;
 export declare const WithoutCategory: Story;
 export declare const WithTwoCurrencies: Story;
 export declare const WithLargeAmount: Story;
 export declare const IsPending: Story;
+export declare const IsPendingLoading: Story;

package/dist/main.js

@@ -8,7 +8,7 @@ import { BankCard as g } from "./components/BankCard/BankCard.js";
 import { Button as u } from "./components/Button/Button.js";
 import { Calendar as C } from "./components/Calendar/Calendar.js";
 import { Checkbox as k } from "./components/Checkbox/Checkbox.js";
-import { C as D, R as A, T as B } from "./Toggle-Dp20f7qn.js";
+import { C as D, R as A, T as B } from "./Toggle-C-6aiSvn.js";
 import { ConfirmationDialog as v } from "./components/ConfirmationDialog/ConfirmationDialog.js";
 import "./components/DatePicker/DatePicker.js";
 import { Description as R } from "./components/Description/Description.js";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pismo/marola",
   "description": "CDX tribe component library",
-  "version": "2.1.3",
+  "version": "2.1.5",
   "type": "module",
   "main": "dist/main.js",
   "types": "dist/main.d.ts",