@tesouro/embedded-components-react 0.5.187 → 0.5.188

package/README.md

@@ -399,18 +399,28 @@ A self-contained widget for managing an organization's customers: searchable lis
 
 ### ExpenseManagementWidget
 
-A composite expense widget for receipt upload, matching slots, approval policies, and transaction requirements.
+A self-contained expenses widget: a bank-attribution header, My/Team transactions tabs with count badges, per-tab Action Items, a searchable/filterable/paginated transactions table, receipt upload (mailbox or drag-and-drop), and a full-screen transaction review dialog opened from a row or an Action Item.
 
 #### Props
 
-| Prop                  | Type                       | Default                  | Description                                   |
-| --------------------- | -------------------------- | ------------------------ | --------------------------------------------- |
-| `labels`              | `Partial<Labels>`          | English labels           | Overrides tab and heading copy.               |
-| `receiptUpload`       | `UploadReceiptWidgetProps` | `undefined`              | Enables the default receipt upload control.   |
-| `receiptsContent`     | `ReactNode`                | Upload widget or empty   | Replaces the receipts tab content.            |
-| `matchingContent`     | `ReactNode`                | Receipt matching         | Replaces the matching tab content.            |
-| `policiesContent`     | `ReactNode`                | Approval policies widget | Replaces the policies tab content.            |
-| `requirementsContent` | `ReactNode`                | Requirements widget      | Replaces the requirements tab content.        |
+| Prop                              | Type                                           | Default | Description                                                                                                               |
+| --------------------------------- | ---------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------- |
+| `bankDisplayName`                 | `string`                                       | —       | Bank name shown in the attribution header.                                                                                |
+| `bankLogoSrc`                     | `string`                                       | —       | URL for the bank logo in the attribution header.                                                                          |
+| `bankLogoAlt`                     | `string`                                       | —       | Alt text for the bank logo.                                                                                               |
+| `isBankingTaglineVisible`         | `boolean`                                      | —       | Shows the "Business Banking provided by" tagline beside the header.                                                       |
+| `onSettingsClick`                 | `() => void`                                   | —       | Renders a settings entry point in the header (host routing ban — the widget never navigates itself). Gated on scopes.     |
+| `receiptUpload`                   | `UploadReceiptWidgetProps`                     | —       | Overrides the built-in receipt-upload control's `onFileUpload` / `onAwaitMatching` and other `UploadReceiptWidget` props. |
+| `screenLabels`                    | `Partial<ExpensesScreenLabels>`                | English | Tab labels and other `ExpensesScreen` shell copy.                                                                         |
+| `headerLabels`                    | `Partial<ExpensesHeaderLabels>`                | English | Bank-attribution header copy.                                                                                             |
+| `transactionsTableLabels`         | `Partial<ExpensesTransactionsTableLabels>`     | English | Transactions table column headers and empty/loading copy.                                                                 |
+| `filterBarLabels`                 | `Partial<ExpensesTransactionsFilterBarLabels>` | English | Search/filter bar copy.                                                                                                   |
+| `actionItemsLabels`               | `Partial<ActionItemsListLabels>`               | English | Action Items list copy.                                                                                                   |
+| `statusBadgeLabels`               | `Partial<ExpenseStatusBadgeLabels>`            | English | Status pill copy, shared between the table and the review dialog.                                                         |
+| `transactionDetailsLabels`        | `Partial<TransactionDetailsLabels>`            | English | Copy for the full-screen review dialog opened from a row or an Action Item.                                               |
+| `transactionDetailsCardLabels`    | `Partial<AccordionItemCardLabels>`             | English | Copy for the accordion cards inside the review dialog.                                                                    |
+| `transactionDetailsActionsLabels` | `Partial<TransactionDetailsActionsLabels>`     | English | Copy for the review dialog's action buttons.                                                                              |
+| `fileViewerLabels`                | `Partial<FileViewerLabels>`                    | English | Copy for the receipt/attachment file viewer inside the review dialog.                                                     |
 
 ### UploadReceiptWidget
 

package/dist/index.css

@@ -9,6 +9,7 @@
     --ttw-color-red-100: oklch(93.6% 0.032 17.717);
     --ttw-color-red-200: oklch(88.5% 0.062 18.334);
     --ttw-color-red-400: oklch(70.4% 0.191 22.216);
+    --ttw-color-red-500: oklch(63.7% 0.237 25.331);
     --ttw-color-red-600: oklch(57.7% 0.245 27.325);
     --ttw-color-red-700: oklch(50.5% 0.213 27.518);
     --ttw-color-red-900: oklch(39.6% 0.141 25.723);
@@ -52,8 +53,10 @@
     --ttw-color-cyan-100: oklch(95.6% 0.045 203.388);
     --ttw-color-cyan-200: oklch(91.7% 0.08 205.041);
     --ttw-color-cyan-700: oklch(52% 0.105 223.128);
+    --ttw-color-sky-100: oklch(95.1% 0.026 236.824);
     --ttw-color-sky-200: oklch(90.1% 0.058 230.902);
     --ttw-color-sky-400: oklch(74.6% 0.16 232.661);
+    --ttw-color-sky-700: oklch(50% 0.134 242.749);
     --ttw-color-blue-50: oklch(97% 0.014 254.604);
     --ttw-color-blue-100: oklch(93.2% 0.032 255.585);
     --ttw-color-blue-200: oklch(88.2% 0.059 254.128);
@@ -73,10 +76,13 @@
     --ttw-color-violet-200: oklch(89.4% 0.057 293.283);
     --ttw-color-violet-400: oklch(70.2% 0.183 293.541);
     --ttw-color-violet-700: oklch(49.1% 0.27 292.581);
+    --ttw-color-purple-50: oklch(97.7% 0.014 308.299);
     --ttw-color-purple-100: oklch(94.6% 0.033 307.174);
     --ttw-color-purple-400: oklch(71.4% 0.203 305.504);
     --ttw-color-purple-700: oklch(49.6% 0.265 301.924);
+    --ttw-color-pink-50: oklch(97.1% 0.014 343.198);
     --ttw-color-pink-100: oklch(94.8% 0.028 342.258);
+    --ttw-color-pink-200: oklch(89.9% 0.061 343.231);
     --ttw-color-pink-700: oklch(52.5% 0.223 3.958);
     --ttw-color-rose-300: oklch(81% 0.117 11.638);
     --ttw-color-rose-700: oklch(51.4% 0.222 16.935);
@@ -478,6 +484,9 @@
   .ttw\:mr-2 {
     margin-right: calc(var(--ttw-spacing) * 2);
   }
+  .ttw\:mr-3 {
+    margin-right: calc(var(--ttw-spacing) * 3);
+  }
   .ttw\:-mb-px {
     margin-bottom: -1px;
   }
@@ -657,6 +666,10 @@
     width: calc(var(--ttw-spacing) * 14);
     height: calc(var(--ttw-spacing) * 14);
   }
+  .ttw\:size-15 {
+    width: calc(var(--ttw-spacing) * 15);
+    height: calc(var(--ttw-spacing) * 15);
+  }
   .ttw\:size-16 {
     width: calc(var(--ttw-spacing) * 16);
     height: calc(var(--ttw-spacing) * 16);
@@ -722,6 +735,9 @@
   .ttw\:h-4 {
     height: calc(var(--ttw-spacing) * 4);
   }
+  .ttw\:h-4\.5 {
+    height: calc(var(--ttw-spacing) * 4.5);
+  }
   .ttw\:h-5 {
     height: calc(var(--ttw-spacing) * 5);
   }
@@ -887,6 +903,9 @@
   .ttw\:max-h-\(--radix-select-content-available-height\) {
     max-height: var(--radix-select-content-available-height);
   }
+  .ttw\:max-h-24 {
+    max-height: calc(var(--ttw-spacing) * 24);
+  }
   .ttw\:max-h-38 {
     max-height: calc(var(--ttw-spacing) * 38);
   }
@@ -1190,6 +1209,9 @@
   .ttw\:w-120 {
     width: calc(var(--ttw-spacing) * 120);
   }
+  .ttw\:w-140 {
+    width: calc(var(--ttw-spacing) * 140);
+  }
   .ttw\:w-150 {
     width: calc(var(--ttw-spacing) * 150);
   }
@@ -1256,6 +1278,9 @@
   .ttw\:w-\[90px\] {
     width: 90px;
   }
+  .ttw\:w-\[95\%\] {
+    width: 95%;
+  }
   .ttw\:w-\[140px\] {
     width: 140px;
   }
@@ -1355,6 +1380,9 @@
   .ttw\:max-w-48 {
     max-width: calc(var(--ttw-spacing) * 48);
   }
+  .ttw\:max-w-55\.5 {
+    max-width: calc(var(--ttw-spacing) * 55.5);
+  }
   .ttw\:max-w-56 {
     max-width: calc(var(--ttw-spacing) * 56);
   }
@@ -1418,6 +1446,9 @@
   .ttw\:max-w-\[800px\] {
     max-width: 800px;
   }
+  .ttw\:max-w-\[900px\] {
+    max-width: 900px;
+  }
   .ttw\:max-w-\[calc\(100\%-2rem\)\] {
     max-width: calc(100% - 2rem);
   }
@@ -1460,6 +1491,9 @@
   .ttw\:min-w-2 {
     min-width: calc(var(--ttw-spacing) * 2);
   }
+  .ttw\:min-w-4\.5 {
+    min-width: calc(var(--ttw-spacing) * 4.5);
+  }
   .ttw\:min-w-5 {
     min-width: calc(var(--ttw-spacing) * 5);
   }
@@ -1493,12 +1527,18 @@
   .ttw\:min-w-30 {
     min-width: calc(var(--ttw-spacing) * 30);
   }
+  .ttw\:min-w-30\.5 {
+    min-width: calc(var(--ttw-spacing) * 30.5);
+  }
   .ttw\:min-w-35 {
     min-width: calc(var(--ttw-spacing) * 35);
   }
   .ttw\:min-w-44 {
     min-width: calc(var(--ttw-spacing) * 44);
   }
+  .ttw\:min-w-56 {
+    min-width: calc(var(--ttw-spacing) * 56);
+  }
   .ttw\:min-w-64 {
     min-width: calc(var(--ttw-spacing) * 64);
   }
@@ -1544,6 +1584,9 @@
   .ttw\:flex-1 {
     flex: 1;
   }
+  .ttw\:flex-1\/2 {
+    flex: calc(1/2 * 100%);
+  }
   .ttw\:flex-2\/5 {
     flex: calc(2/5 * 100%);
   }
@@ -1632,6 +1675,10 @@
     --tw-translate-x: 1px;
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
+  .ttw\:-translate-y-0\.5 {
+    --tw-translate-y: calc(var(--ttw-spacing) * -0.5);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
   .ttw\:-translate-y-1\/2 {
     --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
     translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -2331,6 +2378,12 @@
   .ttw\:border-orange-400 {
     border-color: var(--ttw-color-orange-400);
   }
+  .ttw\:border-pink-100 {
+    border-color: var(--ttw-color-pink-100);
+  }
+  .ttw\:border-pink-200 {
+    border-color: var(--ttw-color-pink-200);
+  }
   .ttw\:border-primary {
     border-color: var(--ttw-primary);
   }
@@ -2352,6 +2405,9 @@
   .ttw\:border-sidebar-border {
     border-color: var(--ttw-sidebar-border);
   }
+  .ttw\:border-sky-100 {
+    border-color: var(--ttw-color-sky-100);
+  }
   .ttw\:border-transparent {
     border-color: transparent;
   }
@@ -2601,6 +2657,9 @@
   .ttw\:bg-green-100 {
     background-color: var(--ttw-color-green-100);
   }
+  .ttw\:bg-green-500 {
+    background-color: var(--ttw-color-green-500);
+  }
   .ttw\:bg-green-700 {
     background-color: var(--ttw-color-green-700);
   }
@@ -2655,6 +2714,9 @@
   .ttw\:bg-orange-700 {
     background-color: var(--ttw-color-orange-700);
   }
+  .ttw\:bg-pink-50 {
+    background-color: var(--ttw-color-pink-50);
+  }
   .ttw\:bg-pink-100 {
     background-color: var(--ttw-color-pink-100);
   }
@@ -2703,6 +2765,9 @@
   .ttw\:bg-red-100 {
     background-color: var(--ttw-color-red-100);
   }
+  .ttw\:bg-red-500 {
+    background-color: var(--ttw-color-red-500);
+  }
   .ttw\:bg-red-600 {
     background-color: var(--ttw-color-red-600);
   }
@@ -2721,6 +2786,9 @@
   .ttw\:bg-sidebar-border {
     background-color: var(--ttw-sidebar-border);
   }
+  .ttw\:bg-sky-100 {
+    background-color: var(--ttw-color-sky-100);
+  }
   .ttw\:bg-stone-200 {
     background-color: var(--ttw-color-stone-200);
   }
@@ -3054,6 +3122,9 @@
   .ttw\:py-14 {
     padding-block: calc(var(--ttw-spacing) * 14);
   }
+  .ttw\:py-20 {
+    padding-block: calc(var(--ttw-spacing) * 20);
+  }
   .ttw\:py-\[7px\] {
     padding-block: 7px;
   }
@@ -3204,6 +3275,9 @@
   .ttw\:pl-9 {
     padding-left: calc(var(--ttw-spacing) * 9);
   }
+  .ttw\:pl-9\! {
+    padding-left: calc(var(--ttw-spacing) * 9) !important;
+  }
   .ttw\:pl-20 {
     padding-left: calc(var(--ttw-spacing) * 20);
   }
@@ -3633,6 +3707,9 @@
       color: color-mix(in oklab, var(--ttw-sidebar-foreground) 70%, transparent);
     }
   }
+  .ttw\:text-sky-700 {
+    color: var(--ttw-color-sky-700);
+  }
   .ttw\:text-violet-700 {
     color: var(--ttw-color-violet-700);
   }
@@ -3739,6 +3816,10 @@
     --tw-shadow: 0 0 0 1px var(--tw-shadow-color, hsl(var(--ttw-sidebar-border)));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .ttw\:shadow-\[0_0_40px_8px\] {
+    --tw-shadow: 0 0 40px 8px var(--tw-shadow-color, currentcolor);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .ttw\:shadow-\[0px_1px_2px_0px_rgba\(26\,26\,26\,0\.05\)\] {
     --tw-shadow: 0px 1px 2px 0px var(--tw-shadow-color, rgba(26,26,26,0.05));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -3787,6 +3868,12 @@
     --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(8px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .ttw\:shadow-emerald-700\/25 {
+    --tw-shadow-color: var(--ttw-color-emerald-700);
+    @supports (color: color-mix(in lab, red, red)) {
+      --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--ttw-color-emerald-700) 25%, transparent) var(--tw-shadow-alpha), transparent);
+    }
+  }
   .ttw\:ring-background {
     --tw-ring-color: var(--ttw-background);
   }
@@ -4524,6 +4611,9 @@
     .ttw\:hover\:bg-emerald-100:hover {
       background-color: var(--ttw-color-emerald-100);
     }
+    .ttw\:hover\:bg-emerald-700:hover {
+      background-color: var(--ttw-color-emerald-700);
+    }
     .ttw\:hover\:bg-green-100:hover {
       background-color: var(--ttw-color-green-100);
     }
@@ -4565,6 +4655,9 @@
         background-color: color-mix(in oklab, var(--ttw-muted) 60%, transparent);
       }
     }
+    .ttw\:hover\:bg-pink-100:hover {
+      background-color: var(--ttw-color-pink-100);
+    }
     .ttw\:hover\:bg-primary:hover {
       background-color: var(--ttw-primary);
     }
@@ -4603,6 +4696,9 @@
         background-color: color-mix(in oklab, var(--ttw-primary) 90%, transparent);
       }
     }
+    .ttw\:hover\:bg-purple-50:hover {
+      background-color: var(--ttw-color-purple-50);
+    }
     .ttw\:hover\:bg-red-50:hover {
       background-color: var(--ttw-color-red-50);
     }
@@ -4620,6 +4716,9 @@
     .ttw\:hover\:bg-sidebar-accent:hover {
       background-color: var(--ttw-sidebar-accent);
     }
+    .ttw\:hover\:bg-sky-100:hover {
+      background-color: var(--ttw-color-sky-100);
+    }
     .ttw\:hover\:bg-transparent:hover {
       background-color: transparent;
     }
@@ -4879,6 +4978,9 @@
   .ttw\:disabled\:pointer-events-none:disabled {
     pointer-events: none;
   }
+  .ttw\:disabled\:cursor-default:disabled {
+    cursor: default;
+  }
   .ttw\:disabled\:cursor-not-allowed:disabled {
     cursor: not-allowed;
   }
@@ -5559,6 +5661,10 @@
     --tw-exit-scale: calc(95*1%);
     --tw-exit-scale: .95;
   }
+  .ttw\:data-\[state\=closed\]\:zoom-out-100[data-state="closed"] {
+    --tw-exit-scale: calc(100*1%);
+    --tw-exit-scale: 1;
+  }
   .ttw\:data-\[state\=closed\]\:slide-out-to-bottom[data-state="closed"] {
     --tw-exit-translate-y: 100%;
   }
@@ -5628,6 +5734,10 @@
     --tw-enter-scale: calc(95*1%);
     --tw-enter-scale: .95;
   }
+  .ttw\:data-\[state\=open\]\:zoom-in-100[data-state="open"] {
+    --tw-enter-scale: calc(100*1%);
+    --tw-enter-scale: 1;
+  }
   .ttw\:data-\[state\=open\]\:slide-in-from-bottom[data-state="open"] {
     --tw-enter-translate-y: 100%;
   }