@economic/taco 2.45.0-alpha.2 → 2.45.0-alpha.20

package/dist/components/Table3/features/useTableEditing.d.ts

@@ -1,36 +1,41 @@
 import React from 'react';
 import { Table as ReactTable } from '@tanstack/react-table';
-import { Table3EditingChangeHandler, Table3EditingSaveHandler, Table3EditingValidatorFn } from '../types';
-export declare function useTableEditing<TType = unknown>(isEnabled: boolean | undefined, handleSave: Table3EditingSaveHandler<TType> | undefined, handleChange: Table3EditingChangeHandler<TType> | undefined, rowIdentityAccessor: keyof TType | undefined, validator: Table3EditingValidatorFn<TType> | undefined): {
-    setRowValue: <T extends TType>(rowId: string, original: T, value: Partial<T>) => Promise<void>;
-    getRowValue: (rowId: string) => any;
-    getRowMoveReason: (rowId: string) => unknown;
+import { Table3EditingChangeHandler, Table3EditingCreateHandler, Table3EditingDiscardHandler, Table3EditingSaveHandler, Table3EditingValidatorFn } from '../types';
+export declare function useTableEditing<TType = unknown>(isEnabled: boolean | undefined, handleSave: Table3EditingSaveHandler<TType> | undefined, handleChange: Table3EditingChangeHandler<TType> | undefined, handleCreate: Table3EditingCreateHandler<TType> | undefined, handleDiscard: Table3EditingDiscardHandler | undefined, rowIdentityAccessor: keyof TType | undefined, validator: Table3EditingValidatorFn<TType> | undefined): {
+    getRowValue: (rowId: string) => Partial<unknown>;
+    getRowMoveReason: (rowId: string) => "search" | "sorting" | "filter";
     hasRowErrors: (rowId: string) => boolean;
     hasRowErrorsShownInAlert: (rowId: string) => boolean;
-    hasTemporaryRowErrors: <T_1 extends TType>() => boolean;
-    getRowStatus: (rowId: string) => any;
+    hasTemporaryRowErrors: <T extends TType>() => boolean;
+    getRowStatus: (rowId: string) => "saving" | "saved" | "errored";
     setRowStatus: (rowId: string, status: "saving" | "saved" | "errored" | undefined) => void;
-    setCellValue: <T_2 extends TType>(cell: import("@tanstack/react-table").Cell<T_2, unknown>, value: unknown) => void;
-    getCellValue: <T_3 extends TType>(cell: import("@tanstack/react-table").Cell<T_3, unknown>) => unknown;
-    getCellError: <T_4 extends TType>(cell: import("@tanstack/react-table").Cell<T_4, unknown>) => string | undefined;
-    onCellChanged: <T_5 extends TType>(cell: import("@tanstack/react-table").Cell<T_5, unknown>, rowIndex: number, shouldRunUpdaters?: boolean) => Promise<void>;
-    getErrorsShownInAlert: <T_6 extends TType>() => {
+    setCellValue: <T_1 extends TType>(cell: import("@tanstack/react-table").Cell<T_1, unknown>, rowIndex: number, value: unknown) => void;
+    getCellValue: <T_2 extends TType>(cell: import("@tanstack/react-table").Cell<T_2, unknown>) => unknown;
+    getCellError: <T_3 extends TType>(cell: import("@tanstack/react-table").Cell<T_3, unknown>) => string | undefined;
+    onCellChanged: <T_4 extends TType>(cell: import("@tanstack/react-table").Cell<T_4, unknown>, rowIndex: number, nextValue: any, shouldRunUpdaters?: boolean) => Promise<void>;
+    getErrorsShownInAlert: <T_5 extends TType>() => {
         rowId: string;
-        changes: Partial<T_6>;
-        errors: any;
+        index: number;
+        changes: Partial<T_5>;
+        errors: {
+            row: string;
+            cells: Record<string, string>;
+            shouldShowErrorAlert: boolean;
+        };
     }[];
     hasChanges: (rowId?: string | undefined) => boolean;
-    saveChanges: <T_7 extends TType>(table: ReactTable<T_7>, rowId?: string | undefined) => Promise<boolean>;
-    discardChanges: <T_8 extends TType>(rowId: string, table: ReactTable<T_8>) => void;
+    saveChanges: <T_6 extends TType>(table: ReactTable<T_6>, rowId?: string | undefined) => Promise<boolean>;
+    discardChanges: <T_7 extends TType>(rowId: string, table: ReactTable<T_7>) => Promise<void>;
     hasSaved: () => boolean;
-    createRow: <T_9 extends TType>(data: Partial<T_9>) => string;
-    temporaryRows: any;
+    insertTemporaryRow: <T_8 extends TType>(data: Partial<T_8>, rowIndex: number) => string;
+    temporaryRows: unknown[];
     isEnabled: boolean;
     isEditing: boolean;
     isDetailedMode: boolean;
     toggleDetailedMode: React.Dispatch<React.SetStateAction<boolean>>;
-    toggleEditing: <T_10 extends TType>(enabled: React.SetStateAction<boolean>, table: ReactTable<T_10>, scrollToIndex: (index: number) => void) => void;
+    toggleEditing: <T_9 extends TType>(enabled: React.SetStateAction<boolean>, table: ReactTable<T_9>, scrollToIndex: (index: number) => void) => void;
     lastFocusedCellIndex: number | undefined;
     setLastFocusedCellIndex: React.Dispatch<React.SetStateAction<number | undefined>>;
+    createRow: <T_10 extends TType>(table: ReactTable<T_10>, row?: Partial<T_10> | undefined) => Promise<void>;
     createRowButtonRef: React.RefObject<HTMLButtonElement>;
 };

package/dist/components/Table3/types.d.ts

@@ -7,6 +7,7 @@ export declare type Table3Ref = TableRef & {
 };
 export declare type Table3EditingChangeHandler<TType = unknown> = (accessor: string, value: unknown, row: TType, prevRow: TType) => Promise<Partial<TType>> | undefined;
 export declare type Table3EditingCreateHandler<TType = unknown> = () => Partial<TType>;
+export declare type Table3EditingDiscardHandler = () => void;
 export declare type Table3EditingSaveHandler<TType = unknown> = (row: TType) => Promise<void>;
 export declare type Table3EditingValidatorFn<TType = unknown> = (row: TType) => Promise<Partial<Record<keyof TType, string>> | undefined> | Partial<Record<keyof TType, string>> | undefined;
 export interface Table3FeatureProps<TType = unknown> extends TableFeatureProps<TType> {
@@ -15,6 +16,7 @@ export interface Table3FeatureProps<TType = unknown> extends TableFeatureProps<T
 export interface Table3CommonProps<TType = unknown> extends Table3FeatureProps<TType> {
     onEditingChange?: Table3EditingChangeHandler<TType>;
     onEditingCreate?: Table3EditingCreateHandler<TType>;
+    onEditingDiscard?: Table3EditingDiscardHandler;
     validator?: Table3EditingValidatorFn<TType>;
 }
 export interface Table3WithoutEditingWithClientProps<TType = unknown> extends Table3CommonProps<TType>, TableClientProps<TType> {

package/dist/components/Table3/util/editing.d.ts

@@ -1,4 +1,6 @@
+import React from 'react';
 import { Cell as ReactTableCell } from '@tanstack/react-table';
+import { TableRef } from '../../../primitives/Table/types';
 import { Localization } from '../../Provider/Localization';
 export declare function willRowMove<TType = unknown>(cell: ReactTableCell<TType, unknown>, change: unknown, rowIndex: number, localization: Localization): "search" | "filter" | "sorting" | undefined;
 export declare const TEMPORARY_ROW_ID_PREFIX = "temp-";
@@ -8,3 +10,4 @@ export declare const shortcut: {
     meta: boolean;
     shift: boolean;
 };
+export declare function isTableScrolled(ref: React.RefObject<TableRef>): boolean;

package/dist/components/Tag/Tag.d.ts

@@ -13,7 +13,7 @@ export declare const Tag: React.ForwardRefExoticComponent<Pick<React.HTMLAttribu
     children: string;
     color?: "green" | "yellow" | "red" | "blue" | "purple" | "brown" | "pink" | "orange" | "grey" | "transparent" | undefined;
     disabled?: boolean | undefined;
-    icon?: "id" | React.ReactElement<IconProps, string | ((props: any, deprecatedLegacyContext?: any) => React.ReactElement<any, any> | null) | (new (props: any, deprecatedLegacyContext?: any) => React.Component<any, any, any>)> | "account-preview" | "accounting-year-cancel" | "accounting-year" | "accounting" | "ai-chat-solid" | "ai-stars" | "arrow-bottom" | "arrow-down" | "arrow-end" | "arrow-left" | "arrow-right" | "arrow-start" | "arrow-top" | "arrow-up" | "attach-auto" | "attach-cancel" | "attach-warning" | "attach" | "autotext-insert" | "autotext" | "basic-tabs" | "basic" | "bell-solid" | "book" | "booking" | "budget" | "calendar" | "cash-account" | "cash-reports" | "chart-area" | "chart-bar" | "chart-line" | "chart-pie" | "chart-table" | "chat-solid" | "chat" | "chevron-down-double" | "chevron-down-solid" | "chevron-down" | "chevron-left-double" | "chevron-left-solid" | "chevron-left" | "chevron-right-double" | "chevron-right-solid" | "chevron-right" | "chevron-up-double" | "chevron-up-solid" | "chevron-up" | "circle-close" | "circle-information" | "circle-minus" | "circle-plus" | "circle-questionmark" | "circle-tick" | "circle-warning" | "clamp-open" | "clamp" | "close" | "column-freeze" | "column-unfreeze" | "columns" | "connection-enable" | "connection-revoke" | "contacts" | "copy" | "courses" | "credit" | "delete-permanently" | "delete" | "depecriate" | "developer" | "distribution-template" | "document-approve" | "document-create-entry" | "document-cut" | "document-error" | "document-isolate-page" | "document-merge" | "document-move" | "document-preview" | "document-received" | "document-rejected-request" | "document-signed-solid" | "document-signed" | "document-split" | "document-time" | "document" | "download" | "drag" | "e-copedia" | "edit-simple" | "edit" | "ellipsis-horizontal" | "ellipsis-vertical" | "entries-on-account" | "entries-open" | "entries-warning" | "entry-type-customer-invoice" | "entry-type-customer-payment" | "entry-type-journal-entry" | "entry-type-manual-customer-invoice" | "entry-type-supplier-invoice" | "entry-type-supplier-payment" | "envelope-approved" | "envelope-solid" | "envelope" | "expand-view" | "expenses" | "export-to-excel" | "export-to-pdf" | "export" | "eye-off" | "eye-on" | "filter-solid" | "filter" | "font-size" | "graph-solid" | "hash" | "height-extra-tall" | "height-medium" | "height-short" | "height-tall" | "house-solid" | "house" | "images" | "import" | "inbox-einvoicing" | "inbox-scanning" | "inbox-smart" | "inbox" | "info" | "inventory-matrix" | "inventory" | "journal-pro" | "layout-both" | "layout-first" | "layout-last" | "layout-none" | "layout" | "ledger-card-customer-reminder" | "ledger-card-manual-customer-invoice" | "ledger-card-obsolete-stock" | "ledger-card-opening-entry" | "ledger-card-reserved-entry" | "ledger-card-shrinkage-pilferage" | "ledger-card-stock-adjustment" | "ledger-card-transferred-opening-entry" | "ledger-card" | "lightbulb" | "line" | "link-external" | "list-bulleted" | "list-search" | "list" | "location" | "lock-open" | "lock" | "log-out" | "log" | "market" | "mastercard-os" | "match-amount" | "match-entries" | "menu" | "mileage" | "modal-resize" | "modal-shrink" | "more-solid" | "more" | "move" | "navigation-list" | "note-follow-up" | "note-read" | "note" | "november-first" | "numbers" | "partner-api" | "payment-paid" | "payment-unpaid" | "period" | "person-change" | "person-minus" | "person-plus" | "person-tick" | "phone-solid" | "phone" | "play" | "plus-minus" | "print" | "process-payment" | "product-ledger-card" | "profile" | "project-cards" | "projects" | "question-mark-bold" | "question-mark" | "quicklinks" | "rating-bankruptcy" | "rating-payment-problems" | "reconciled" | "refresh" | "report-solid" | "report" | "restore" | "rotate-left" | "rotate-right" | "sales" | "search-bold" | "search" | "secure-tick" | "secure" | "settings-solid" | "settings" | "shortcuts" | "show-all" | "show-less" | "show-more" | "show-template" | "sliders" | "smartpay" | "sort-by" | "star-solid" | "star" | "subscriptions" | "system-entries" | "tag" | "template-override" | "templates" | "thumb-both" | "thumb-down-solid" | "thumb-down" | "thumb-up-solid" | "thumb-up" | "tick-bold" | "tick" | "time" | "transfer-cancel" | "transfer-locked" | "transfer" | "undo" | "undock" | "unreconciled" | "warning" | "webshop" | "website" | "workflow-template-basic" | "workflow" | "zoom" | undefined;
+    icon?: "id" | React.ReactElement<IconProps, string | ((props: any, deprecatedLegacyContext?: any) => React.ReactElement<any, any> | null) | (new (props: any, deprecatedLegacyContext?: any) => React.Component<any, any, any>)> | "account-preview" | "accounting-year-cancel" | "accounting-year" | "accounting" | "ai-chat-solid" | "ai-stars" | "arrow-bottom" | "arrow-down" | "arrow-end" | "arrow-left" | "arrow-right" | "arrow-start" | "arrow-top" | "arrow-up" | "attach-auto" | "attach-cancel" | "attach-warning" | "attach" | "autopay-paused" | "autopay" | "autotext-insert" | "autotext" | "basic-tabs" | "basic" | "bell-solid" | "book" | "booking" | "budget" | "calendar" | "cash-account" | "cash-reports" | "chart-area" | "chart-bar" | "chart-line" | "chart-pie" | "chart-table" | "chat-solid" | "chat" | "chevron-down-double" | "chevron-down-solid" | "chevron-down" | "chevron-left-double" | "chevron-left-solid" | "chevron-left" | "chevron-right-double" | "chevron-right-solid" | "chevron-right" | "chevron-up-double" | "chevron-up-solid" | "chevron-up" | "circle-close" | "circle-information" | "circle-minus" | "circle-plus" | "circle-questionmark" | "circle-tick" | "circle-warning" | "clamp-open" | "clamp" | "close" | "column-freeze" | "column-unfreeze" | "columns" | "connection-enable" | "connection-revoke" | "contacts" | "copy" | "courses" | "credit" | "delete-permanently" | "delete" | "depecriate" | "developer" | "distribution-template" | "document-approve" | "document-create-entry" | "document-cut" | "document-error" | "document-isolate-page" | "document-merge" | "document-move" | "document-preview" | "document-received" | "document-rejected-request" | "document-signed-solid" | "document-signed" | "document-split" | "document-time" | "document" | "download" | "drag" | "e-copedia" | "edit-simple" | "edit" | "ellipsis-horizontal" | "ellipsis-vertical" | "entries-on-account" | "entries-open" | "entries-warning" | "entry-type-customer-invoice" | "entry-type-customer-payment" | "entry-type-journal-entry" | "entry-type-manual-customer-invoice" | "entry-type-supplier-invoice" | "entry-type-supplier-payment" | "envelope-approved" | "envelope-solid" | "envelope" | "expand-view" | "expenses" | "experiment" | "export-to-excel" | "export-to-pdf" | "export" | "eye-off" | "eye-on" | "filter-solid" | "filter" | "font-size" | "graph-solid" | "hash" | "height-extra-tall" | "height-medium" | "height-short" | "height-tall" | "house-solid" | "house" | "images" | "import" | "inbox-einvoicing" | "inbox-scanning" | "inbox-smart" | "inbox" | "info" | "inventory-matrix" | "inventory" | "journal-pro" | "layout-both" | "layout-first" | "layout-last" | "layout-none" | "layout" | "ledger-card-customer-reminder" | "ledger-card-manual-customer-invoice" | "ledger-card-obsolete-stock" | "ledger-card-opening-entry" | "ledger-card-reserved-entry" | "ledger-card-shrinkage-pilferage" | "ledger-card-stock-adjustment" | "ledger-card-transferred-opening-entry" | "ledger-card" | "lightbulb" | "line" | "link-external" | "list-bulleted" | "list-search" | "list" | "location" | "lock-open" | "lock" | "log-out" | "log" | "market" | "mastercard-os" | "match-amount" | "match-entries" | "menu" | "mileage" | "modal-resize" | "modal-shrink" | "more-solid" | "more" | "move" | "navigation-list" | "note-follow-up" | "note-read" | "note" | "november-first" | "numbers" | "partner-api" | "payment-paid" | "payment-unpaid" | "period" | "person-change" | "person-minus" | "person-plus" | "person-solid" | "person-tick" | "person" | "phone-solid" | "phone" | "play" | "plus-minus" | "print" | "process-payment" | "product-ledger-card" | "profile" | "project-cards" | "projects" | "question-mark-bold" | "question-mark" | "quicklinks" | "rating-bankruptcy" | "rating-payment-problems" | "reconciled" | "refresh" | "report-solid" | "report" | "restore" | "rotate-left" | "rotate-right" | "sales" | "search-bold" | "search" | "secure-tick" | "secure" | "settings-solid" | "settings" | "shortcuts" | "show-all" | "show-less" | "show-more" | "show-template" | "sliders" | "smartpay" | "sort-by" | "star-solid" | "star" | "subscriptions" | "system-entries" | "tag" | "template-override" | "templates" | "thumb-both" | "thumb-down-solid" | "thumb-down" | "thumb-up-solid" | "thumb-up" | "tick-bold" | "tick" | "time" | "transfer-cancel" | "transfer-locked" | "transfer" | "undo" | "undock" | "unreconciled" | "wallet" | "warning" | "webshop" | "website" | "workflow-template-basic" | "workflow" | "zoom" | undefined;
     readOnly?: boolean | undefined;
     onDelete?: ((event: React.MouseEvent<SVGSVGElement>) => void) | undefined;
 } & React.RefAttributes<HTMLSpanElement>>;

package/dist/esm/index.css

@@ -166,6 +166,14 @@
         @apply invisible;
     }
 
+    /* 
+     * While the dialog is open, all elements are aria-hidden except for the dialog content. This ensures that the
+     * print document contains only the dialog content.
+     */
+    [aria-hidden='true'] {
+        @apply print:!hidden;
+    }
+
     .wcag-transparent {
         @apply bg-black/[0.08] text-black;
     }
@@ -180,6 +188,24 @@
     }
 }
 
+.recharts-cartesian-axis line,
+.recharts-cartesian-grid-horizontal line {
+    stroke: #efefef !important;
+}
+
+.recharts-tooltip-cursor {
+    fill: transparent !important;
+}
+
+.recharts-legend-wrapper {
+    left: 0 !important;
+    width: 100% !important;
+}
+
+.recharts-wrapper > svg g {
+    outline: none !important;
+}
+
 [data-taco='badge'] > [data-taco='spinner'] {
     @apply ml-2 h-3 w-3;
 }
@@ -393,6 +419,12 @@
     bottom: 3px;
 }
 
+/* When dealing with nested dialogs, the dialog behind remains rendered because it only receives the [aria-hidden] attribute but not display: none.
+   As a result, tabs in the hidden dialog remain visible, as they still have the visible class assigned. To properly hide them, we need to override their visibility. */
+[data-taco='backdrop'][aria-hidden='true'] [role='tablist'] [role='tab'].visible {
+    visibility: hidden;
+}
+
 /* label inside label is invalid html, but the client is littered with it */
 [data-taco='label'] [data-taco='label'] {
     min-height: 0;
@@ -556,7 +588,7 @@ table[data-taco^='table'] {
 
 table[data-taco^='table'] thead {
     /* z-indexes & layout */
-    @apply sticky top-0 isolate z-20;
+    @apply sticky top-0 isolate z-20 print:static;
     /* grid */
     @apply col-span-full grid auto-rows-min grid-cols-[subgrid];
 }
@@ -585,13 +617,17 @@ table[data-taco^='table'] thead tr:last-child {
 
 /* bottom border for column groups */
 
-table[data-taco^='table'] thead tr:not(:last-child) th:before {
-            @apply bg-grey-300 absolute bottom-0 left-2 right-2 h-[2px] content-[''];
+table[data-taco^='table'] thead tr:not(:last-child) th {
+            @apply print:border-grey-300 print:border-b;
         }
 
+table[data-taco^='table'] thead tr:not(:last-child) th:before {
+                @apply bg-grey-300 absolute bottom-0 left-2 right-2 h-[2px] content-[''];
+            }
+
 table[data-taco^='table'] tfoot {
     /* z-indexes & layout */
-    @apply sticky bottom-0 isolate z-20;
+    @apply sticky bottom-0 isolate z-20 print:static;
     /* grid */
     @apply col-span-full grid grid-cols-[subgrid];
 }
@@ -609,6 +645,10 @@ table[data-taco^='table'] tbody {
     @apply print:!h-auto;
 }
 
+table[data-taco^='table']:has([data-taco='empty-state']) {
+    @apply overflow-x-hidden;
+}
+
 table[data-taco^='table'] tr {
     /* styling */
     @apply relative bg-white outline-none;
@@ -632,13 +672,22 @@ table[data-taco^='table'] tr[data-row-group]:first-child {
             @apply pt-0;
         }
 
+/* Only apply -mt-px when the row group header is sticked to the top of the table.
+               margin-top -1px is needed to hide a little gap between the group header and table and the edge of the table.
+               If we'll not do this, then it will be slightly visible how rows are moving behind it when scrolled.
+            */
+
+table[data-taco^='table'] tr[data-row-group]:first-child td {
+                @apply -mt-px;
+            }
+
 table[data-taco^='table'] tr[data-row-group]:not(:first-child):before {
             content: '';
-            @apply bg-grey-100 border-grey-300 absolute left-0 right-0 top-0 h-10 border-t print:top-0 print:h-[2px] print:border-t-2;
+            @apply bg-grey-100 border-grey-300 absolute -top-1 left-0 right-0 h-10 border-t print:top-0 print:h-[2px] print:border-t-2;
         }
 
 table[data-taco^='table'] tr[data-row-group] td {
-            @apply -mt-px border-b-2 border-t-0 font-bold;
+            @apply border-b-2 border-t-0 font-bold;
         }
 
 table[data-taco^='table'] tr:first-child td {
@@ -734,14 +783,14 @@ table[data-taco^='table'] td:not([data-cell-truncate='true']) {
 }
 
 /* FOOTER */
-table[data-taco^='table'] tfoot td {
+table[data-taco^='table'] tfoot tr:not([data-row-index]) td {
     /*
      * Since footer has sticky position, the top and bottom padding ensures that the inner content doesn't come over
      * the border of the footer row.
      */
     @apply border-b-0 !py-1 font-bold;
 }
-table[data-taco^='table'] tfoot td:first-child {
+table[data-taco^='table'] tfoot tr:not([data-row-index]) td:first-child {
         @apply z-30 !pb-0 !pt-[2px];
     }
 
@@ -1117,19 +1166,19 @@ table[data-taco^='table'][data-table-pause-hover='true'] > tbody > tr:hover[data
 
 /* row metadata */
 table[data-taco^='table'] tbody tr[data-row-meta-layout='heading']:not([data-row-group='true']) td {
-    @apply !border-b-0 border-t font-bold;
+    @apply border-b-0 border-t font-bold;
 }
 
 table[data-taco^='table'] tbody tr[data-row-group='true'] + tr[data-row-meta-layout='heading'] td {
-    @apply !border-t-0;
+    @apply border-t-0;
 }
 
 table[data-taco^='table'] tbody tr[data-row-meta-layout='summary']:not([data-row-group='true']) td {
-    @apply !border-b-0 font-bold;
+    @apply border-b-0 font-bold;
 }
 
 table[data-taco^='table'] tbody tr[data-row-meta-layout='item']:not([data-row-group='true']) td {
-    @apply !border-b-0;
+    @apply border-b-0;
 }
 
 /* rows */
@@ -1292,6 +1341,14 @@ table[data-taco='table3'][data-table-editing-mode] tbody tr[data-row-editing-mov
         @apply border-r-2 border-blue-500 pr-[calc(var(--table-cell-padding-x)_-_2px)];
     }
 
+table[data-taco^='table3'][data-table-editing-mode] [data-cell-align='center'] > label {
+    @apply flex-row justify-center text-center;
+}
+
+table[data-taco^='table3'][data-table-editing-mode] [data-cell-align='right'] > label {
+    @apply flex-row justify-end text-right;
+}
+
 /* invalid rows */
 
 table[data-taco='table3'] > tbody > tr[data-row-editing-invalid='true'] > td,
@@ -1368,3 +1425,8 @@ table[data-taco^='table'][data-table-row-height='tall'] tr[data-row-create] td,
 table[data-taco^='table'][data-table-row-height='extra-tall'] tr[data-row-create] td {
     @apply !min-h-[41px] !pt-[10px];
 }
+
+/* Hiding CreateNewRow using CSS to ensure higher specificity for hiding the row */
+table[data-taco^='table'] tr[data-row-create] {
+    @apply print:hidden;
+}

package/dist/esm/packages/taco/src/charts/components/Area/AreaChart.js

@@ -0,0 +1,67 @@
+import React__default, { useState } from 'react';
+import { AreaChart as AreaChart$1, CartesianGrid, XAxis, YAxis, Legend, Tooltip, Area as Area$1 } from 'recharts';
+import { getThemeColor } from '../../utils/color.js';
+import { getCartesianGridProps, getXAxisProps, getYAxisProps, getLegendProps, getTooltipProps } from '../../utils/common.js';
+import { ResponsiveContainer } from '../ResponsiveContainer.js';
+
+const Area = _ => null;
+const AreaChart = function AreaChart(externalProps) {
+  const {
+    children,
+    data,
+    formatter,
+    ...props
+  } = externalProps;
+  const [hoveredArea, setHoveredArea] = useState(null);
+  const [activeAreas, setActiveAreas] = useState(() => {
+    const areas = {};
+    React__default.Children.forEach(children, child => {
+      areas[child.props.accessor] = true;
+    });
+    return areas;
+  });
+  const handleLegendClick = entry => {
+    setHoveredArea(null);
+    setActiveAreas({
+      ...activeAreas,
+      [entry.dataKey]: !activeAreas[entry.dataKey]
+    });
+  };
+  return /*#__PURE__*/React__default.createElement(ResponsiveContainer, null, /*#__PURE__*/React__default.createElement(AreaChart$1, {
+    data: data,
+    margin: {
+      top: 10,
+      right: 0,
+      left: -25,
+      bottom: 0
+    }
+  }, /*#__PURE__*/React__default.createElement(CartesianGrid, Object.assign({}, getCartesianGridProps())), /*#__PURE__*/React__default.createElement(XAxis, Object.assign({}, getXAxisProps(props))), /*#__PURE__*/React__default.createElement(YAxis, Object.assign({}, getYAxisProps(props))), /*#__PURE__*/React__default.createElement(Legend, Object.assign({}, getLegendProps({
+    onClick: handleLegendClick,
+    onMouseEnter: entry => setHoveredArea(entry.dataKey),
+    onMouseLeave: () => setHoveredArea(null),
+    activeItems: activeAreas
+  }))), /*#__PURE__*/React__default.createElement(Tooltip, Object.assign({}, getTooltipProps(), {
+    formatter: formatter
+  })), React__default.Children.map(children, child => {
+    var _child$props$color, _child$props$color2, _child$props$color3;
+    return /*#__PURE__*/React__default.createElement(Area$1, {
+      activeDot: {
+        fill: getThemeColor((_child$props$color = child.props.color) !== null && _child$props$color !== void 0 ? _child$props$color : 'blue-300')
+      },
+      isAnimationActive: false,
+      dataKey: child.props.accessor,
+      dot: false,
+      fill: getThemeColor((_child$props$color2 = child.props.color) !== null && _child$props$color2 !== void 0 ? _child$props$color2 : 'grey-100'),
+      name: child.props.label,
+      strokeWidth: 2,
+      stroke: getThemeColor((_child$props$color3 = child.props.color) !== null && _child$props$color3 !== void 0 ? _child$props$color3 : 'grey-300'),
+      stackId: child.props.stackId,
+      hide: !activeAreas[child.props.accessor],
+      opacity: hoveredArea && child.props.accessor !== hoveredArea ? 0.3 : 1
+    });
+  })));
+};
+AreaChart.Area = Area;
+
+export { AreaChart };
+//# sourceMappingURL=AreaChart.js.map

package/dist/esm/packages/taco/src/charts/components/Area/AreaChart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AreaChart.js","sources":["../../../../../../../../src/charts/components/Area/AreaChart.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport * as Recharts from 'recharts';\n\nimport { Color, getThemeColor } from '../../utils/color';\nimport {\n    CommonChartProps,\n    getCartesianGridProps,\n    getXAxisProps,\n    getYAxisProps,\n    getLegendProps,\n    getTooltipProps,\n} from '../../utils/common';\nimport { ResponsiveContainer } from '../ResponsiveContainer';\nimport { ActiveChartItems, PayloadType } from '../types';\n\ntype AreaChartBarProps<TType> = {\n    accessor: keyof TType & string;\n    color?: Color;\n    label?: string;\n    stackId?: string;\n};\n\nconst Area = (_: AreaChartBarProps<any>) => null;\n\ntype AreaChartProps<TType> = CommonChartProps<TType> & {\n    children: React.ReactElement<AreaChartBarProps<TType>> | React.ReactElement<AreaChartBarProps<TType>>[];\n    data: TType[];\n    formatter?: (value: any) => string;\n};\n\nexport const AreaChart = function AreaChart<TType = unknown>(externalProps: AreaChartProps<TType>) {\n    const { children, data, formatter, ...props } = externalProps;\n    const [hoveredArea, setHoveredArea] = useState<(keyof TType & string) | null>(null);\n    const [activeAreas, setActiveAreas] = useState<ActiveChartItems<TType>>(() => {\n        const areas = {} as ActiveChartItems<TType>;\n\n        React.Children.forEach(children, child => {\n            areas[child.props.accessor] = true;\n        });\n\n        return areas;\n    });\n\n    const handleLegendClick = (entry: PayloadType<TType>): void => {\n        setHoveredArea(null);\n        setActiveAreas({ ...activeAreas, [entry.dataKey]: !activeAreas[entry.dataKey] });\n    };\n\n    return (\n        <ResponsiveContainer>\n            <Recharts.AreaChart data={data} margin={{ top: 10, right: 0, left: -25, bottom: 0 }}>\n                <Recharts.CartesianGrid {...getCartesianGridProps()} />\n                <Recharts.XAxis {...getXAxisProps<TType>(props)} />\n                <Recharts.YAxis {...getYAxisProps<TType>(props)} />\n                <Recharts.Legend\n                    {...getLegendProps({\n                        onClick: handleLegendClick,\n                        onMouseEnter: entry => setHoveredArea(entry.dataKey),\n                        onMouseLeave: () => setHoveredArea(null),\n                        activeItems: activeAreas,\n                    })}\n                />\n                <Recharts.Tooltip {...getTooltipProps()} formatter={formatter} />\n                {React.Children.map(children, child => (\n                    <Recharts.Area\n                        activeDot={{\n                            fill: getThemeColor(child.props.color ?? 'blue-300'),\n                        }}\n                        isAnimationActive={false}\n                        dataKey={child.props.accessor}\n                        dot={false}\n                        fill={getThemeColor(child.props.color ?? 'grey-100')}\n                        name={child.props.label}\n                        strokeWidth={2}\n                        stroke={getThemeColor(child.props.color ?? 'grey-300')}\n                        stackId={child.props.stackId}\n                        hide={!activeAreas[child.props.accessor]}\n                        opacity={hoveredArea && child.props.accessor !== hoveredArea ? 0.3 : 1}\n                    />\n                ))}\n            </Recharts.AreaChart>\n        </ResponsiveContainer>\n    );\n};\nAreaChart.Area = Area;\n"],"names":["Area","_","AreaChart","externalProps","children","data","formatter","props","hoveredArea","setHoveredArea","useState","activeAreas","setActiveAreas","areas","React","Children","forEach","child","accessor","handleLegendClick","entry","dataKey","ResponsiveContainer","Recharts","margin","top","right","left","bottom","getCartesianGridProps","getXAxisProps","getYAxisProps","getLegendProps","onClick","onMouseEnter","onMouseLeave","activeItems","getTooltipProps","map","_child$props$color","_child$props$color2","_child$props$color3","activeDot","fill","getThemeColor","color","isAnimationActive","dot","name","label","strokeWidth","stroke","stackId","hide","opacity"],"mappings":";;;;;;AAsBA,MAAMA,IAAI,GAAIC,CAAyB,IAAK,IAAI;MAQnCC,SAAS,GAAG,SAASA,SAASA,CAAkBC,aAAoC;EAC7F,MAAM;IAAEC,QAAQ;IAAEC,IAAI;IAAEC,SAAS;IAAE,GAAGC;GAAO,GAAGJ,aAAa;EAC7D,MAAM,CAACK,WAAW,EAAEC,cAAc,CAAC,GAAGC,QAAQ,CAAgC,IAAI,CAAC;EACnF,MAAM,CAACC,WAAW,EAAEC,cAAc,CAAC,GAAGF,QAAQ,CAA0B;IACpE,MAAMG,KAAK,GAAG,EAA6B;IAE3CC,cAAK,CAACC,QAAQ,CAACC,OAAO,CAACZ,QAAQ,EAAEa,KAAK;MAClCJ,KAAK,CAACI,KAAK,CAACV,KAAK,CAACW,QAAQ,CAAC,GAAG,IAAI;KACrC,CAAC;IAEF,OAAOL,KAAK;GACf,CAAC;EAEF,MAAMM,iBAAiB,GAAIC,KAAyB;IAChDX,cAAc,CAAC,IAAI,CAAC;IACpBG,cAAc,CAAC;MAAE,GAAGD,WAAW;MAAE,CAACS,KAAK,CAACC,OAAO,GAAG,CAACV,WAAW,CAACS,KAAK,CAACC,OAAO;KAAG,CAAC;GACnF;EAED,oBACIP,6BAACQ,mBAAmB,qBAChBR,6BAACS,WAAkB;IAAClB,IAAI,EAAEA,IAAI;IAAEmB,MAAM,EAAE;MAAEC,GAAG,EAAE,EAAE;MAAEC,KAAK,EAAE,CAAC;MAAEC,IAAI,EAAE,CAAC,EAAE;MAAEC,MAAM,EAAE;;kBAC5Ed,6BAACS,aAAsB,oBAAKM,qBAAqB,EAAE,EAAI,eACvDf,6BAACS,KAAc,oBAAKO,aAAa,CAAQvB,KAAK,CAAC,EAAI,eACnDO,6BAACS,KAAc,oBAAKQ,aAAa,CAAQxB,KAAK,CAAC,EAAI,eACnDO,6BAACS,MAAe,oBACRS,cAAc,CAAC;IACfC,OAAO,EAAEd,iBAAiB;IAC1Be,YAAY,EAAEd,KAAK,IAAIX,cAAc,CAACW,KAAK,CAACC,OAAO,CAAC;IACpDc,YAAY,EAAEA,MAAM1B,cAAc,CAAC,IAAI,CAAC;IACxC2B,WAAW,EAAEzB;GAChB,CAAC,EACJ,eACFG,6BAACS,OAAgB,oBAAKc,eAAe,EAAE;IAAE/B,SAAS,EAAEA;KAAa,EAChEQ,cAAK,CAACC,QAAQ,CAACuB,GAAG,CAAClC,QAAQ,EAAEa,KAAK;IAAA,IAAAsB,kBAAA,EAAAC,mBAAA,EAAAC,mBAAA;IAAA,oBAC/B3B,6BAACS,MAAa;MACVmB,SAAS,EAAE;QACPC,IAAI,EAAEC,aAAa,EAAAL,kBAAA,GAACtB,KAAK,CAACV,KAAK,CAACsC,KAAK,cAAAN,kBAAA,cAAAA,kBAAA,GAAI,UAAU;OACtD;MACDO,iBAAiB,EAAE,KAAK;MACxBzB,OAAO,EAAEJ,KAAK,CAACV,KAAK,CAACW,QAAQ;MAC7B6B,GAAG,EAAE,KAAK;MACVJ,IAAI,EAAEC,aAAa,EAAAJ,mBAAA,GAACvB,KAAK,CAACV,KAAK,CAACsC,KAAK,cAAAL,mBAAA,cAAAA,mBAAA,GAAI,UAAU,CAAC;MACpDQ,IAAI,EAAE/B,KAAK,CAACV,KAAK,CAAC0C,KAAK;MACvBC,WAAW,EAAE,CAAC;MACdC,MAAM,EAAEP,aAAa,EAAAH,mBAAA,GAACxB,KAAK,CAACV,KAAK,CAACsC,KAAK,cAAAJ,mBAAA,cAAAA,mBAAA,GAAI,UAAU,CAAC;MACtDW,OAAO,EAAEnC,KAAK,CAACV,KAAK,CAAC6C,OAAO;MAC5BC,IAAI,EAAE,CAAC1C,WAAW,CAACM,KAAK,CAACV,KAAK,CAACW,QAAQ,CAAC;MACxCoC,OAAO,EAAE9C,WAAW,IAAIS,KAAK,CAACV,KAAK,CAACW,QAAQ,KAAKV,WAAW,GAAG,GAAG,GAAG;MACvE;GACL,CAAC,CACe,CACH;AAE9B;AACAN,SAAS,CAACF,IAAI,GAAGA,IAAI;;;;"}

package/dist/esm/packages/taco/src/charts/components/Bar/BarChart.js

@@ -0,0 +1,120 @@
+import React__default from 'react';
+import { BarChart as BarChart$1, CartesianGrid, XAxis, YAxis, Legend, Tooltip, Bar as Bar$1, Cell } from 'recharts';
+import { getThemeColor } from '../../utils/color.js';
+import { getCartesianGridProps, getXAxisProps, getYAxisProps, getLegendProps, getTooltipProps } from '../../utils/common.js';
+import { ResponsiveContainer } from '../ResponsiveContainer.js';
+
+const Bar = _ => null;
+const getXAxisVerticalProps = props => ({
+  ...getXAxisProps(props),
+  ...{
+    type: 'number',
+    dataKey: undefined
+  }
+});
+const getYAxisVerticalProps = props => ({
+  ...getYAxisProps(props),
+  ...{
+    dataKey: props.accessor,
+    type: 'category'
+  }
+});
+const BarChart = function BarChart(externalProps) {
+  const {
+    children,
+    data,
+    formatter,
+    layout = 'horizontal',
+    ...props
+  } = externalProps;
+  const [activeIndex, setActiveIndex] = React__default.useState(undefined);
+  const [hoveredBar, setHoveredBar] = React__default.useState(null);
+  const [activeBars, setActiveBars] = React__default.useState(() => {
+    const keys = {};
+    React__default.Children.forEach(children, child => {
+      keys[child.props.accessor] = true;
+    });
+    return keys;
+  });
+  // Recharts doesn't provide a way for us to know if a stacked bar is at the top or the bottom,
+  // so we can't set proper radiuses without some "magic"
+  const stacks = {};
+  React__default.Children.forEach(children, child => {
+    if (child.props.stackId) {
+      if (!stacks[child.props.stackId]) {
+        stacks[child.props.stackId] = [child.props.accessor];
+      } else {
+        stacks[child.props.stackId].push(child.props.accessor);
+      }
+    }
+  });
+  const handleLegendClick = entry => {
+    setHoveredBar(null);
+    setActiveBars({
+      ...activeBars,
+      [entry.dataKey]: !activeBars[entry.dataKey]
+    });
+  };
+  const handleLegendHover = (entry, index) => {
+    setHoveredBar(entry.dataKey);
+    setActiveIndex(index);
+  };
+  return /*#__PURE__*/React__default.createElement(ResponsiveContainer, null, /*#__PURE__*/React__default.createElement(BarChart$1, {
+    layout: layout,
+    data: data,
+    margin: {
+      top: 10,
+      right: 0,
+      left: layout === 'vertical' ? 0 : -25,
+      bottom: 0
+    },
+    onMouseMove: chartState => setActiveIndex(chartState.activeTooltipIndex),
+    onMouseLeave: () => setActiveIndex(undefined)
+  }, /*#__PURE__*/React__default.createElement(CartesianGrid, Object.assign({}, getCartesianGridProps())), /*#__PURE__*/React__default.createElement(XAxis, Object.assign({}, layout === 'vertical' ? getXAxisVerticalProps(props) : getXAxisProps(props))), /*#__PURE__*/React__default.createElement(YAxis, Object.assign({}, layout === 'vertical' ? getYAxisVerticalProps(props) : getYAxisProps(props))), /*#__PURE__*/React__default.createElement(Legend, Object.assign({}, getLegendProps({
+    onClick: handleLegendClick,
+    onMouseEnter: handleLegendHover,
+    onMouseLeave: () => setHoveredBar(null),
+    activeItems: activeBars
+  }))), /*#__PURE__*/React__default.createElement(Tooltip, Object.assign({}, getTooltipProps(), {
+    formatter: formatter
+  })), React__default.Children.map(children, child => (/*#__PURE__*/React__default.createElement(Bar$1, {
+    isAnimationActive: false,
+    barSize: 16,
+    dataKey: child.props.accessor,
+    name: child.props.label,
+    onMouseEnter: (_, index) => setActiveIndex(index),
+    onMouseLeave: () => setActiveIndex(undefined),
+    fill: getThemeColor(child.props.color ? `${child.props.color}` : `blue-300`),
+    radius: getBarRadius(stacks, child.props.accessor, child.props.stackId, activeBars),
+    stackId: child.props.stackId,
+    style: child.props.stackId ? {
+      stroke: '#fff',
+      strokeWidth: '2px'
+    } : undefined,
+    hide: !activeBars[child.props.accessor]
+  }, data.map((_, index) => (/*#__PURE__*/React__default.createElement(Cell, {
+    key: `cell-${index}`,
+    opacity: hoveredBar && child.props.accessor !== hoveredBar || activeIndex !== undefined && activeIndex !== index ? 0.3 : 1
+  }))))))));
+};
+BarChart.Bar = Bar;
+const getBarRadius = (stacks, accessor, stackId, activeBars) => {
+  if (stackId && Array.isArray(stacks[stackId])) {
+    const length = stacks[stackId].length - 1;
+    const index = stacks[stackId].indexOf(accessor);
+    if (Object.entries(activeBars).filter(item => item[0] !== accessor).every(item => !item[1])) {
+      return [3, 3, 0, 0];
+    }
+    if (activeBars[stacks[stackId][index + 1]] === false) {
+      return [index === 0 ? 0 : 3, index === 0 ? 0 : 3, index === length - 1 ? 0 : 3, index === length - 1 ? 0 : 3];
+    }
+    if (index !== 0 && index !== length) {
+      return 0;
+    }
+    return [index === 0 ? 0 : 3, index === 0 ? 0 : 3, index === length ? 0 : 3, index === length ? 0 : 3];
+  }
+  return 3;
+};
+
+export { BarChart };
+//# sourceMappingURL=BarChart.js.map

package/dist/esm/packages/taco/src/charts/components/Bar/BarChart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BarChart.js","sources":["../../../../../../../../src/charts/components/Bar/BarChart.tsx"],"sourcesContent":["import React from 'react';\nimport * as Recharts from 'recharts';\n\nimport { Color, getThemeColor } from '../../utils/color';\nimport {\n    CommonChartProps,\n    getCartesianGridProps,\n    getXAxisProps,\n    getYAxisProps,\n    getLegendProps,\n    getTooltipProps,\n} from '../../utils/common';\nimport { ResponsiveContainer } from '../ResponsiveContainer';\nimport { ActiveChartItems, PayloadType } from '../types';\n\ntype StacksType<TType> = Record<string, Array<keyof TType & string>>;\n\ntype BarChartBarProps<TType> = {\n    accessor: keyof TType & string;\n    color?: Color;\n    label?: string;\n    stackId?: string;\n};\n\nconst Bar = (_: BarChartBarProps<any>) => null;\n\ntype BarChartProps<TType> = CommonChartProps<TType> & {\n    children: React.ReactElement<BarChartBarProps<TType>> | React.ReactElement<BarChartBarProps<TType>>[];\n    data: TType[];\n    formatter?: (value: any) => string;\n    layout?: 'horizontal' | 'vertical';\n};\n\nconst getXAxisVerticalProps = <TType,>(props: CommonChartProps<TType>) => ({\n    ...getXAxisProps<TType>(props),\n    ...{ type: 'number' as const, dataKey: undefined },\n});\n\nconst getYAxisVerticalProps = <TType,>(props: CommonChartProps<TType>) => ({\n    ...getYAxisProps<TType>(props),\n    ...{ dataKey: props.accessor, type: 'category' as const },\n});\n\nexport const BarChart = function BarChart<TType = unknown>(externalProps: BarChartProps<TType>) {\n    const { children, data, formatter, layout = 'horizontal', ...props } = externalProps;\n    const [activeIndex, setActiveIndex] = React.useState<number | undefined>(undefined);\n    const [hoveredBar, setHoveredBar] = React.useState<(keyof TType & string) | null>(null);\n    const [activeBars, setActiveBars] = React.useState<ActiveChartItems<TType>>(() => {\n        const keys = {} as ActiveChartItems<TType>;\n\n        React.Children.forEach(children, child => {\n            keys[child.props.accessor] = true;\n        });\n\n        return keys;\n    });\n\n    // Recharts doesn't provide a way for us to know if a stacked bar is at the top or the bottom,\n    // so we can't set proper radiuses without some \"magic\"\n    const stacks = {} as StacksType<TType>;\n\n    React.Children.forEach(children, child => {\n        if (child.props.stackId) {\n            if (!stacks[child.props.stackId]) {\n                stacks[child.props.stackId] = [child.props.accessor];\n            } else {\n                stacks[child.props.stackId].push(child.props.accessor);\n            }\n        }\n    });\n\n    const handleLegendClick = (entry: PayloadType<TType>): void => {\n        setHoveredBar(null);\n        setActiveBars({ ...activeBars, [entry.dataKey]: !activeBars[entry.dataKey] });\n    };\n\n    const handleLegendHover = (entry: PayloadType<TType>, index: number): void => {\n        setHoveredBar(entry.dataKey);\n        setActiveIndex(index);\n    };\n\n    return (\n        <ResponsiveContainer>\n            <Recharts.BarChart\n                layout={layout}\n                data={data}\n                margin={{ top: 10, right: 0, left: layout === 'vertical' ? 0 : -25, bottom: 0 }}\n                onMouseMove={chartState => setActiveIndex(chartState.activeTooltipIndex)}\n                onMouseLeave={() => setActiveIndex(undefined)}>\n                <Recharts.CartesianGrid {...getCartesianGridProps()} />\n                <Recharts.XAxis\n                    {...(layout === 'vertical' ? getXAxisVerticalProps<TType>(props) : getXAxisProps<TType>(props))}\n                />\n                <Recharts.YAxis\n                    {...(layout === 'vertical' ? getYAxisVerticalProps<TType>(props) : getYAxisProps<TType>(props))}\n                />\n                <Recharts.Legend\n                    {...getLegendProps({\n                        onClick: handleLegendClick,\n                        onMouseEnter: handleLegendHover,\n                        onMouseLeave: () => setHoveredBar(null),\n                        activeItems: activeBars,\n                    })}\n                />\n                <Recharts.Tooltip {...getTooltipProps()} formatter={formatter} />\n                {React.Children.map(children, child => (\n                    <Recharts.Bar\n                        isAnimationActive={false}\n                        barSize={16}\n                        dataKey={child.props.accessor}\n                        name={child.props.label}\n                        onMouseEnter={(_, index) => setActiveIndex(index)}\n                        onMouseLeave={() => setActiveIndex(undefined)}\n                        fill={getThemeColor(child.props.color ? `${child.props.color}` : `blue-300`)}\n                        radius={getBarRadius<TType>(stacks, child.props.accessor, child.props.stackId, activeBars)}\n                        stackId={child.props.stackId}\n                        style={child.props.stackId ? { stroke: '#fff', strokeWidth: '2px' } : undefined}\n                        hide={!activeBars[child.props.accessor]}>\n                        {data.map((_, index) => (\n                            <Recharts.Cell\n                                key={`cell-${index}`}\n                                opacity={\n                                    (hoveredBar && child.props.accessor !== hoveredBar) ||\n                                    (activeIndex !== undefined && activeIndex !== index)\n                                        ? 0.3\n                                        : 1\n                                }\n                            />\n                        ))}\n                    </Recharts.Bar>\n                ))}\n            </Recharts.BarChart>\n        </ResponsiveContainer>\n    );\n};\nBarChart.Bar = Bar;\n\nconst getBarRadius = <TType,>(\n    stacks: StacksType<TType>,\n    accessor: keyof TType & string,\n    stackId: string | undefined,\n    activeBars: ActiveChartItems<TType>\n): number | [number, number, number, number] => {\n    if (stackId && Array.isArray(stacks[stackId])) {\n        const length = stacks[stackId].length - 1;\n        const index: number = stacks[stackId].indexOf(accessor);\n\n        if (\n            Object.entries(activeBars)\n                .filter(item => item[0] !== accessor)\n                .every(item => !item[1])\n        ) {\n            return [3, 3, 0, 0];\n        }\n\n        if (activeBars[stacks[stackId][index + 1]] === false) {\n            return [index === 0 ? 0 : 3, index === 0 ? 0 : 3, index === length - 1 ? 0 : 3, index === length - 1 ? 0 : 3];\n        }\n\n        if (index !== 0 && index !== length) {\n            return 0;\n        }\n\n        return [index === 0 ? 0 : 3, index === 0 ? 0 : 3, index === length ? 0 : 3, index === length ? 0 : 3];\n    }\n\n    return 3;\n};\n"],"names":["Bar","_","getXAxisVerticalProps","props","getXAxisProps","type","dataKey","undefined","getYAxisVerticalProps","getYAxisProps","accessor","BarChart","externalProps","children","data","formatter","layout","activeIndex","setActiveIndex","React","useState","hoveredBar","setHoveredBar","activeBars","setActiveBars","keys","Children","forEach","child","stacks","stackId","push","handleLegendClick","entry","handleLegendHover","index","ResponsiveContainer","Recharts","margin","top","right","left","bottom","onMouseMove","chartState","activeTooltipIndex","onMouseLeave","getCartesianGridProps","getLegendProps","onClick","onMouseEnter","activeItems","getTooltipProps","map","isAnimationActive","barSize","name","label","fill","getThemeColor","color","radius","getBarRadius","style","stroke","strokeWidth","hide","key","opacity","Array","isArray","length","indexOf","Object","entries","filter","item","every"],"mappings":"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"}

package/dist/esm/packages/taco/src/charts/components/Donut/ActiveShape.js

@@ -0,0 +1,47 @@
+import React__default from 'react';
+import cn from 'clsx';
+import { Sector } from 'recharts';
+import { getThemeColor } from '../../utils/color.js';
+import { HOVER_DONUT_WIDTH } from './util.js';
+
+const ActiveShape = props => {
+  var _getThemeColor;
+  const {
+    cx,
+    cy,
+    id,
+    innerRadius,
+    onClick,
+    outerRadius = 0,
+    pieColors,
+    startAngle,
+    endAngle,
+    fill
+  } = props;
+  return /*#__PURE__*/React__default.createElement("g", {
+    onClick: () => onClick(id),
+    className: cn({
+      'cursor-pointer': !!onClick
+    })
+  }, /*#__PURE__*/React__default.createElement(Sector, {
+    cx: cx,
+    cy: cy,
+    innerRadius: innerRadius,
+    outerRadius: outerRadius,
+    startAngle: startAngle,
+    endAngle: endAngle,
+    fill: fill
+  }), /*#__PURE__*/React__default.createElement(Sector, {
+    cx: cx,
+    cy: cy,
+    startAngle: startAngle,
+    endAngle: endAngle,
+    innerRadius: outerRadius + 2,
+    outerRadius: outerRadius + HOVER_DONUT_WIDTH,
+    fill: id !== undefined ? (_getThemeColor = getThemeColor(pieColors[id])) !== null && _getThemeColor !== void 0 ? _getThemeColor : getThemeColor('blue-500') : getThemeColor('blue-500'),
+    opacity: 0.3
+  }));
+};
+
+export { ActiveShape };
+//# sourceMappingURL=ActiveShape.js.map

package/dist/esm/packages/taco/src/charts/components/Donut/ActiveShape.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActiveShape.js","sources":["../../../../../../../../src/charts/components/Donut/ActiveShape.tsx"],"sourcesContent":["import React from 'react';\nimport * as Recharts from 'recharts';\nimport cn from 'clsx';\n\nimport { getThemeColor } from '../../utils/color';\nimport { PieSectorDataItem } from 'recharts/types/polar/Pie';\nimport { HOVER_DONUT_WIDTH } from './util';\n\ntype ActiveShapeProps = Omit<PieSectorDataItem, 'onClick'> & {\n    onClick: (id: string | undefined) => void;\n    pieColors: Record<string, string>;\n};\n\nexport const ActiveShape = (props: ActiveShapeProps) => {\n    const { cx, cy, id, innerRadius, onClick, outerRadius = 0, pieColors, startAngle, endAngle, fill } = props;\n\n    return (\n        <g onClick={() => onClick(id)} className={cn({ 'cursor-pointer': !!onClick })}>\n            <Recharts.Sector\n                cx={cx}\n                cy={cy}\n                innerRadius={innerRadius}\n                outerRadius={outerRadius}\n                startAngle={startAngle}\n                endAngle={endAngle}\n                fill={fill}\n            />\n            <Recharts.Sector\n                cx={cx}\n                cy={cy}\n                startAngle={startAngle}\n                endAngle={endAngle}\n                innerRadius={outerRadius + 2}\n                outerRadius={outerRadius + HOVER_DONUT_WIDTH}\n                fill={id !== undefined ? getThemeColor(pieColors[id]) ?? getThemeColor('blue-500') : getThemeColor('blue-500')}\n                opacity={0.3}\n            />\n        </g>\n    );\n};\n"],"names":["ActiveShape","props","cx","cy","id","innerRadius","onClick","outerRadius","pieColors","startAngle","endAngle","fill","React","className","cn","Recharts","HOVER_DONUT_WIDTH","undefined","_getThemeColor","getThemeColor","opacity"],"mappings":";;;;;;MAaaA,WAAW,GAAIC,KAAuB;;EAC/C,MAAM;IAAEC,EAAE;IAAEC,EAAE;IAAEC,EAAE;IAAEC,WAAW;IAAEC,OAAO;IAAEC,WAAW,GAAG,CAAC;IAAEC,SAAS;IAAEC,UAAU;IAAEC,QAAQ;IAAEC;GAAM,GAAGV,KAAK;EAE1G,oBACIW;IAAGN,OAAO,EAAEA,MAAMA,OAAO,CAACF,EAAE,CAAC;IAAES,SAAS,EAAEC,EAAE,CAAC;MAAE,gBAAgB,EAAE,CAAC,CAACR;KAAS;kBACxEM,6BAACG,MAAe;IACZb,EAAE,EAAEA,EAAE;IACNC,EAAE,EAAEA,EAAE;IACNE,WAAW,EAAEA,WAAW;IACxBE,WAAW,EAAEA,WAAW;IACxBE,UAAU,EAAEA,UAAU;IACtBC,QAAQ,EAAEA,QAAQ;IAClBC,IAAI,EAAEA;IACR,eACFC,6BAACG,MAAe;IACZb,EAAE,EAAEA,EAAE;IACNC,EAAE,EAAEA,EAAE;IACNM,UAAU,EAAEA,UAAU;IACtBC,QAAQ,EAAEA,QAAQ;IAClBL,WAAW,EAAEE,WAAW,GAAG,CAAC;IAC5BA,WAAW,EAAEA,WAAW,GAAGS,iBAAiB;IAC5CL,IAAI,EAAEP,EAAE,KAAKa,SAAS,IAAAC,cAAA,GAAGC,aAAa,CAACX,SAAS,CAACJ,EAAE,CAAC,CAAC,cAAAc,cAAA,cAAAA,cAAA,GAAIC,aAAa,CAAC,UAAU,CAAC,GAAGA,aAAa,CAAC,UAAU,CAAC;IAC9GC,OAAO,EAAE;IACX,CACF;AAEZ;;;;"}

package/dist/esm/packages/taco/src/charts/components/Donut/CenteredLabel.js

@@ -0,0 +1,27 @@
+import React__default from 'react';
+import { HOVER_DONUT_WIDTH, DONUT_WIDTH } from './util.js';
+
+const CenteredLabel = ({
+  radius,
+  legendPosition,
+  label,
+  total,
+  formatter,
+  showLegend
+}) => {
+  const totalInset = HOVER_DONUT_WIDTH + DONUT_WIDTH + DONUT_WIDTH;
+  const diameter = radius * 2;
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "absolute mt-1 flex h-12 flex-col text-center",
+    style: {
+      top: `calc(${radius}px - (3rem / 2))`,
+      left: legendPosition === 'right' ? `${totalInset}px` : `calc(50%-${diameter - 2 * totalInset})`,
+      width: showLegend ? `${diameter - 2 * totalInset}px` : `${diameter}px`
+    }
+  }, /*#__PURE__*/React__default.createElement("span", {
+    className: "w-full truncate text-lg font-bold"
+  }, formatter ? formatter(total) : total), label);
+};
+
+export { CenteredLabel };
+//# sourceMappingURL=CenteredLabel.js.map

package/dist/esm/packages/taco/src/charts/components/Donut/CenteredLabel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CenteredLabel.js","sources":["../../../../../../../../src/charts/components/Donut/CenteredLabel.tsx"],"sourcesContent":["import React from 'react';\nimport { HOVER_DONUT_WIDTH, DONUT_WIDTH } from './util';\n\ntype CenteredLabelProps = {\n    radius: number;\n    legendPosition: string;\n    label: string;\n    total: number;\n    formatter: ((value: number) => string) | undefined;\n    showLegend: boolean;\n};\n\nexport const CenteredLabel = ({ radius, legendPosition, label, total, formatter, showLegend }: CenteredLabelProps) => {\n    const totalInset = HOVER_DONUT_WIDTH + DONUT_WIDTH + DONUT_WIDTH;\n    const diameter = radius * 2;\n\n    return (\n        <div\n            className=\"absolute mt-1 flex h-12 flex-col text-center\"\n            style={{\n                top: `calc(${radius}px - (3rem / 2))`, // h-12 is 3rem\n                left: legendPosition === 'right' ? `${totalInset}px` : `calc(50%-${diameter - 2 * totalInset})`,\n                width: showLegend ? `${diameter - 2 * totalInset}px` : `${diameter}px`,\n            }}>\n            <span className=\"w-full truncate text-lg font-bold\">{formatter ? formatter(total) : total}</span>\n            {label}\n        </div>\n    );\n};\n"],"names":["CenteredLabel","radius","legendPosition","label","total","formatter","showLegend","totalInset","HOVER_DONUT_WIDTH","DONUT_WIDTH","diameter","React","className","style","top","left","width"],"mappings":";;;MAYaA,aAAa,GAAGA,CAAC;EAAEC,MAAM;EAAEC,cAAc;EAAEC,KAAK;EAAEC,KAAK;EAAEC,SAAS;EAAEC;CAAgC;EAC7G,MAAMC,UAAU,GAAGC,iBAAiB,GAAGC,WAAW,GAAGA,WAAW;EAChE,MAAMC,QAAQ,GAAGT,MAAM,GAAG,CAAC;EAE3B,oBACIU;IACIC,SAAS,EAAC,8CAA8C;IACxDC,KAAK,EAAE;MACHC,GAAG,EAAE,QAAQb,MAAM,kBAAkB;MACrCc,IAAI,EAAEb,cAAc,KAAK,OAAO,GAAG,GAAGK,UAAU,IAAI,GAAG,YAAYG,QAAQ,GAAG,CAAC,GAAGH,UAAU,GAAG;MAC/FS,KAAK,EAAEV,UAAU,GAAG,GAAGI,QAAQ,GAAG,CAAC,GAAGH,UAAU,IAAI,GAAG,GAAGG,QAAQ;;kBAEtEC;IAAMC,SAAS,EAAC;KAAqCP,SAAS,GAAGA,SAAS,CAACD,KAAK,CAAC,GAAGA,KAAK,CAAQ,EAChGD,KAAK,CACJ;AAEd;;;;"}