@economic/taco 2.21.2 → 2.22.0

package/dist/esm/index.css

@@ -522,6 +522,490 @@
     @apply -mt-px py-0 px-2;
 }
 
+table[data-taco='report'] {
+    /* reset table */
+    @apply border-separate border-spacing-0;
+    /* z-indexes & layout */
+    @apply relative isolate h-full w-full grow overflow-auto;
+    /* styling */
+    @apply border-grey-300 rounded border bg-white outline-none;
+    /* grid */
+    @apply grid;
+    /* print */
+    @apply print:float-left print:h-max print:w-full print:overflow-visible print:border-0;
+}
+
+table[data-taco='report'] thead {
+    /* z-indexes & layout */
+    @apply sticky top-0 isolate z-20;
+    /* grid */
+    @apply col-span-full grid auto-rows-min grid-cols-[subgrid];
+}
+
+/* header column separator */
+
+table[data-taco='report'] thead:hover th:not(:last-child):after {
+            @apply bg-grey-300 absolute bottom-2 right-0 top-2 w-px content-[''];
+        }
+
+table[data-taco='report'] thead tr:first-child {
+        @apply rounded-t;
+    }
+
+table[data-taco='report'] thead tr:first-child th:first-child {
+            @apply rounded-tl;
+        }
+
+table[data-taco='report'] thead tr:first-child th:last-child {
+            @apply rounded-tr;
+        }
+
+table[data-taco='report'] thead tr:last-child {
+        @apply border-grey-300 border-b-2;
+    }
+
+/* bottom border for column groups */
+
+table[data-taco='report'] thead tr:not(:last-child) th:before {
+            @apply bg-grey-300 absolute bottom-0 left-2 right-2 h-[2px] content-[''];
+        }
+
+table[data-taco='report'] tfoot {
+    /* z-indexes & layout */
+    @apply sticky bottom-0 isolate z-20;
+    /* grid */
+    @apply col-span-full grid auto-rows-min grid-cols-[subgrid];
+}
+
+table[data-taco='report'] tbody {
+    /* z-indexes & layout */
+    @apply isolate z-10;
+    /* grid */
+    @apply col-span-full grid auto-rows-min grid-cols-[subgrid];
+    /* printing - override virtualiser bottom spacing */
+    @apply print:!h-auto print:!pb-0;
+}
+
+table[data-taco='report'] tr {
+    /* styling */
+    @apply relative bg-white outline-none;
+    /* grid */
+    @apply col-span-full grid auto-rows-min grid-cols-[subgrid];
+}
+
+/* botom border for column groups */
+
+table[data-taco='report'] tr:last-child th:before {
+        @apply left-0 right-0;
+    }
+
+/* row groups */
+
+table[data-taco='report'] tr[data-row-group] {
+        @apply bg-grey-100 sticky top-[calc(var(--table-header-group-depth)_*_42px)] z-20 mt-10 print:mt-0;
+    }
+
+table[data-taco='report'] tr[data-row-group]:first-child {
+            @apply mt-0;
+        }
+
+table[data-taco='report'] tr[data-row-group]:not(:first-child):before {
+            content: '';
+            @apply bg-grey-100 border-grey-300 absolute -top-full left-0 right-0 mt-px h-10 border-t print:top-0 print:h-[2px] print:border-t-2;
+        }
+
+table[data-taco='report'] tr[data-row-group] td {
+            @apply -mt-px border-b-2 border-t-0 font-bold;
+        }
+
+table[data-taco='report'] tr:first-child td {
+        @apply !border-t-0;
+    }
+
+table[data-taco='report'] th {
+    /* layout */
+    @apply relative flex h-10 items-center justify-start px-[var(--table-cell-padding-x)];
+    /* styling */
+    @apply border-grey-300 bg-white font-bold;
+}
+
+table[data-taco='report'] th:not([data-cell-placeholder='true']):hover {
+        @apply bg-grey-100;
+    }
+
+table[data-taco='report'] th[aria-sort]:hover {
+        @apply cursor-pointer;
+    }
+
+table[data-taco='report'] td {
+    /* layout */
+    @apply flex justify-start px-[var(--table-cell-padding-x)] py-[var(--table-cell-padding-y)];
+    /* styling */
+    @apply border-grey-300 border-b bg-white outline-none;
+    /* word breaking */
+    @apply break-word hyphens-auto whitespace-pre-line;
+}
+
+table[data-taco='report'][data-table-row-height='short'] td {
+    @apply min-h-[33px];
+}
+
+table[data-taco='report'][data-table-row-height='medium'] td {
+    @apply min-h-[41px];
+}
+
+table[data-taco='report'] [data-cell-align='left'] {
+    @apply justify-start text-left;
+}
+
+table[data-taco='report'] [data-cell-align='center'] {
+    @apply justify-center text-center;
+}
+
+table[data-taco='report'] [data-cell-align='right'] {
+    @apply justify-end text-right;
+}
+
+table[data-taco='report'] [data-cell-pinned] {
+    @apply sticky;
+}
+
+table[data-taco='report'] th[data-cell-pinned] {
+    @apply z-30;
+}
+
+table[data-taco='report'] td[data-cell-pinned] {
+    @apply z-10;
+}
+
+table[data-taco='report'] td:not([data-cell-truncate='true']) {
+    @apply break-word hyphens-auto whitespace-pre-line;
+}
+
+/* FOOTER */
+table[data-taco='report'] tfoot td {
+    @apply border-b-0 font-bold;
+}
+
+table[data-taco='report'] tfoot td:before {
+    @apply bg-grey-300 absolute left-0 right-0 top-0 h-[2px] content-[''];
+}
+
+/* OTHER */
+
+/* resizing */
+table[data-taco='report'][data-table-resizing='true'] {
+        @apply select-none;
+    }
+table[data-taco='report'][data-table-resizing='true'] th,
+    table[data-taco='report'][data-table-resizing='true'] td,
+    table[data-taco='report'][data-table-resizing='true'] tbody tr {
+        @apply pointer-events-none;
+    }
+
+/* components in cells */
+table[data-taco='report'] td[data-cell-align='right'] [data-taco='input'],
+table[data-taco='report'] td[data-cell-align='right'] [data-taco='textarea'] {
+    @apply text-right;
+}
+
+table[data-taco='report'] td [data-taco='textarea'] {
+    @apply resize-none overflow-y-hidden focus:resize-y;
+}
+
+table[data-taco='report'] td[data-cell-truncate='true'] [data-taco='textarea'] {
+    @apply focus:absolute focus:overflow-y-auto;
+}
+
+/* font sizing */
+table[data-taco='report'][data-table-font-size='small'] {
+    @apply text-xs;
+}
+
+table[data-taco='report'][data-table-font-size='medium'] {
+    @apply text-sm;
+}
+
+table[data-taco='report'][data-table-font-size='large'] {
+    @apply text-base;
+}
+
+/* small font size */
+table[data-taco='report'][data-table-font-size='small'] td > [data-taco='button'],
+table[data-taco='report'][data-table-font-size='small'] td > [data-taco='icon-button'] {
+    @apply !-my-2;
+}
+
+table[data-taco='report'][data-table-font-size='small'] td [data-taco='spinner'] {
+    @apply !h-4 !w-4;
+}
+
+table[data-taco='report'][data-table-font-size='small'] td > [data-taco='icon'],
+table[data-taco='report'][data-table-font-size='small'] td [data-taco='spinner'] {
+    @apply !-my-[3px];
+}
+
+table[data-taco='report'][data-table-font-size='small'] td [data-taco='badge'],
+table[data-taco='report'][data-table-font-size='small'] td [data-taco='badge-icon'],
+table[data-taco='report'][data-table-font-size='small'] td [data-taco='icon'],
+table[data-taco='report'][data-table-font-size='small'] td [data-taco='spinner'] {
+    @apply !-my-0.5 !text-xs;
+}
+
+table[data-taco='report'][data-table-font-size='small'] td [data-taco='tag'] {
+    @apply !-my-0.5 h-5;
+}
+
+table[data-taco='report'][data-table-font-size='small'] td [data-taco='select2-container'],
+table[data-taco='report'][data-table-font-size='small'] td [data-taco='Select2'],
+table[data-taco='report'][data-table-font-size='small'] td [data-taco='input'],
+table[data-taco='report'][data-table-font-size='small'] td [data-taco='textarea'] {
+    @apply !-mx-[7px] !-my-[4px] !min-h-[theme(spacing.6)] !w-[calc(100%_+_14px)] text-xs focus:z-10;
+}
+
+table[data-taco='report'][data-table-font-size='small'] td [data-taco='Select2'],
+table[data-taco='report'][data-table-font-size='small'] td [data-taco='input'],
+table[data-taco='report'][data-table-font-size='small'] td [data-taco='textarea'] {
+    @apply !px-1.5;
+}
+
+table[data-taco='report'][data-table-font-size='small'] td [data-taco='select2-container'] [data-taco='Select2'] {
+    @apply !m-auto !w-full;
+}
+
+table[data-taco='report'][data-table-font-size='small'] td [data-taco='Select2'] [data-taco='tag'],
+table[data-taco='report'][data-table-font-size='small'] td [data-taco='Select2'] [data-taco='scrollarea'] {
+    @apply !my-0;
+}
+
+table[data-taco='report'][data-table-font-size='small'] td [data-taco='textarea'] {
+    @apply !py-[3px];
+}
+
+table[data-taco='report'][data-table-font-size='small'] td [data-taco='input-container'] [data-affix-type='postfix'] button {
+    @apply z-10 !-mr-[15px] !h-6 !min-h-[theme(spacing.6)] !w-6 !min-w-[theme(spacing.6)];
+}
+
+table[data-taco='report'][data-table-font-size='small']
+    td
+    [data-taco='input-container']
+    [data-affix-type='postfix']
+    [data-taco='icon'] {
+    @apply !h-4 !w-4;
+}
+
+table[data-taco='report'][data-table-font-size='small'] td [data-taco='checkbox'],
+table[data-taco='report'][data-table-font-size='small'] td [data-taco='checkbox-container'],
+table[data-taco='report'][data-table-font-size='small'] td [data-taco='switch'],
+table[data-taco='report'][data-table-font-size='small'] td [data-taco='switch-container'] {
+    @apply !-my-0.5;
+}
+
+table[data-taco='report'][data-table-font-size='small'] td [data-taco='checkbox-container'] [data-taco='checkbox'],
+table[data-taco='report'][data-table-font-size='small'] td [data-taco='switch-container'] [data-taco='switch'] {
+    @apply !my-0;
+}
+
+/* medium font size */
+table[data-taco='report'][data-table-font-size='medium'] td > [data-taco='button'],
+table[data-taco='report'][data-table-font-size='medium'] td > [data-taco='icon-button'] {
+    @apply !-my-1.5;
+}
+
+table[data-taco='report'][data-table-font-size='medium'] td > [data-taco='icon'] {
+    @apply !-my-0.5;
+}
+
+table[data-taco='report'][data-table-font-size='medium'] td [data-taco='tag'] {
+    @apply !-my-0.5;
+}
+
+table[data-taco='report'][data-table-font-size='medium'] td [data-taco='select2-container'],
+table[data-taco='report'][data-table-font-size='medium'] td [data-taco='Select2'],
+table[data-taco='report'][data-table-font-size='medium'] td [data-taco='input'],
+table[data-taco='report'][data-table-font-size='medium'] td [data-taco='textarea'] {
+    @apply !-mx-[9px] !-my-[6px] !min-h-[theme(spacing.8)] !w-[calc(100%_+_16px)] focus:z-10;
+}
+
+table[data-taco='report'][data-table-font-size='medium'] td [data-taco='select2-container'] [data-taco='Select2'] {
+    @apply !m-auto !w-full;
+}
+
+table[data-taco='report'][data-table-font-size='medium'] td [data-taco='Select2'] [data-taco='tag'] {
+    @apply !my-0;
+}
+
+table[data-taco='report'][data-table-font-size='medium'] td [data-taco='Select2'] {
+    @apply !px-2;
+}
+
+table[data-taco='report'][data-table-font-size='medium'] td[data-cell-truncate='true'] [data-taco='textarea'] {
+    @apply !pb-[5px];
+}
+
+table[data-taco='report'][data-table-font-size='medium'] td [data-taco='input-container'] [data-affix-type='postfix'] button {
+    @apply z-10 !-mr-4;
+}
+
+/* large font size */
+table[data-taco='report'][data-table-font-size='large'] td > [data-taco='button'],
+table[data-taco='report'][data-table-font-size='large'] td > [data-taco='icon-button'] {
+    @apply !-my-1;
+}
+
+table[data-taco='report'][data-table-font-size='large'] td > [data-taco='icon'] {
+    @apply !-my-0.5;
+}
+
+table[data-taco='report'][data-table-font-size='large'] td [data-taco='select2-container'],
+table[data-taco='report'][data-table-font-size='large'] td [data-taco='Select2'],
+table[data-taco='report'][data-table-font-size='large'] td [data-taco='input'],
+table[data-taco='report'][data-table-font-size='large'] td [data-taco='textarea'] {
+    @apply !-mx-[11px] !-mb-[7.5px] !-mt-[8.5px] !w-[calc(100%_+_22px)] focus:z-10;
+}
+
+table[data-taco='report'][data-table-font-size='large'] td [data-taco='select2-container'] [data-taco='Select2'] {
+    @apply !m-auto !w-full;
+}
+
+table[data-taco='report'][data-table-font-size='large'] td [data-taco='Select2'] {
+    @apply !px-2.5;
+}
+
+table[data-taco='report'][data-table-font-size='large'] td [data-taco='Select2'] [data-taco='tag'] {
+    @apply !my-0 !mt-px;
+}
+
+table[data-taco='report'][data-table-font-size='large'] td [data-taco='textarea'] {
+    @apply !py-[7.5px];
+}
+
+table[data-taco='report'][data-table-font-size='large'] td:not([data-cell-truncate='true']) > [data-taco='textarea'] {
+    @apply !pb-[8.5px];
+}
+
+table[data-taco='report'][data-table-font-size='large'] td [data-taco='input'],
+table[data-taco='report'][data-table-font-size='large'] td [data-taco='Select2'],
+table[data-taco='report'][data-table-font-size='large'] td [data-taco='textarea'] {
+    @apply h-10 px-2.5 text-base;
+}
+
+table[data-taco='report'][data-table-font-size='large'] td [data-taco='input-container'] [data-affix-type='postfix'] button {
+    @apply !-mr-[19px] !h-10 !w-10;
+}
+
+table[data-taco='report'][data-table-font-size='large']
+    td
+    [data-taco='input-container']
+    [data-affix-type='postfix']
+    [data-taco='icon'] {
+    @apply !h-6 !w-6;
+}
+
+/* row/cell backgrounds -- we have to be specific so that nested tables don't inherit */
+
+/* normal rows */
+table[data-taco='report'] > tbody > tr:not([data-row-selected='true']) > td {
+        @apply bg-white;
+    }
+/* search highlighting */
+table[data-taco='report'] > tbody > tr:not([data-row-selected='true']) > td[data-cell-highlighted='true'] {
+            @apply bg-[#e9f2ff];
+        }
+table[data-taco='report'] > tbody > tr:not([data-row-selected='true']) > td[data-cell-highlighted='current'] {
+            @apply !bg-[#bfd9ff];
+        }
+table[data-taco='report'] > tbody > tr:not([data-row-selected='true'])[data-row-group] > td {
+        @apply bg-grey-100;
+    }
+table[data-taco='report'] > tbody > tr:not([data-row-selected='true']):hover > td,
+    table[data-taco='report'] > tbody > tr:not([data-row-selected='true'])[data-row-active='true'] > td,
+    table[data-taco='report'] > tbody > tr:not([data-row-selected='true'])[data-row-active='true']:hover > td {
+        --table-row-actions-shadow: theme(colors.grey.100);
+        @apply bg-grey-100;
+    }
+/* search highlighting */
+table[data-taco='report'] > tbody > tr:not([data-row-selected='true']):hover > td[data-cell-highlighted='true'], table[data-taco='report'] > tbody > tr:not([data-row-selected='true'])[data-row-active='true'] > td[data-cell-highlighted='true'], table[data-taco='report'] > tbody > tr:not([data-row-selected='true'])[data-row-active='true']:hover > td[data-cell-highlighted='true'] {
+            @apply bg-[#e2ebf8];
+        }
+/* normal rows when focus is inside the table */
+table[data-taco='report']:focus-within > tbody > tr[data-row-active='true']:not([data-row-selected='true']) > td {
+    --table-row-actions-shadow: theme(colors.grey.200);
+    @apply !bg-grey-200;
+}
+
+/* normal rows when hover is paused */
+table[data-taco='report'][data-table-pause-hover='true'] > tbody > tr:not([data-row-selected='true']):hover:not([data-row-active='true']) > td {
+        --table-row-actions-shadow: theme(colors.white);
+        @apply !bg-white;
+    }
+table[data-taco='report'][data-table-pause-hover='true'] > tbody > tr:not([data-row-selected='true']):hover[data-row-active='true'] > td {
+        --table-row-actions-shadow: theme(colors.grey.200);
+        @apply !bg-grey-200;
+    }
+
+/* selected rows */
+table[data-taco='report'] > tbody > tr[data-row-selected='true'] > td {
+        @apply bg-blue-100;
+    }
+/* search highlighting */
+table[data-taco='report'] > tbody > tr[data-row-selected='true'] > td[data-cell-highlighted='true'] {
+            @apply bg-[#d0e4ff];
+        }
+table[data-taco='report'] > tbody > tr[data-row-selected='true'] > td[data-cell-highlighted='current'] {
+            @apply !bg-[#b6d4ff];
+        }
+table[data-taco='report'] > tbody > tr[data-row-selected='true']:hover > td,
+    table[data-taco='report'] > tbody > tr[data-row-selected='true'][data-row-active='true'] > td,
+    table[data-taco='report'] > tbody > tr[data-row-selected='true'][data-row-active='true']:hover > td {
+        --table-row-actions-shadow: #d6e3f6;
+        @apply bg-[#D6E3F6];
+    }
+/* search highlighting */
+table[data-taco='report'] > tbody > tr[data-row-selected='true']:hover > td[data-cell-highlighted='true'], table[data-taco='report'] > tbody > tr[data-row-selected='true'][data-row-active='true'] > td[data-cell-highlighted='true'], table[data-taco='report'] > tbody > tr[data-row-selected='true'][data-row-active='true']:hover > td[data-cell-highlighted='true'] {
+            @apply bg-[#cadef9];
+        }
+table[data-taco='report'] > tbody > tr[data-row-selected='true']:hover > td[data-cell-highlighted='current'], table[data-taco='report'] > tbody > tr[data-row-selected='true'][data-row-active='true'] > td[data-cell-highlighted='current'], table[data-taco='report'] > tbody > tr[data-row-selected='true'][data-row-active='true']:hover > td[data-cell-highlighted='current'] {
+            @apply !bg-[#b4d2fd];
+        }
+/* selected rows when focus is inside the table */
+table[data-taco='report']:focus-within > tbody > tr[data-row-active='true'][data-row-selected='true'] > td {
+    --table-row-actions-shadow: #ccd8eb;
+    @apply bg-[#CCD8EB];
+}
+/* selected rows when hover is paused */
+table[data-taco='report'][data-table-pause-hover='true'] > tbody > tr[data-row-selected='true']:hover:not([data-row-active='true']) > td {
+        --table-row-actions-shadow: theme(colors.blue.100);
+        @apply !bg-blue-100;
+    }
+table[data-taco='report'][data-table-pause-hover='true'] > tbody > tr[data-row-selected='true']:hover[data-row-active='true'] > td {
+        --table-row-actions-shadow: #ccd8eb;
+        @apply !bg-[#CCD8EB];
+    }
+
+/* row metadata */
+
+table[data-taco='report'] tbody tr[data-row-meta-layout='heading']:not([data-row-group='true']) td {
+    @apply !border-b-0 border-t font-bold;
+}
+
+table[data-taco='report'] tbody tr[data-row-group='true'] + tr[data-row-meta-layout='heading'] td {
+    @apply !border-t-0;
+}
+
+table[data-taco='report'] tbody tr[data-row-meta-layout='summary']:not([data-row-group='true']) td {
+    @apply !border-b-0 font-bold;
+}
+
+table[data-taco='report'] tbody tr[data-row-meta-layout='item']:not([data-row-group='true']) td {
+    @apply !border-b-0;
+}
+
+/* printing */
+table[data-taco='report'] [data-cell-id^='__'] {
+    @apply print:hidden;
+}
+
 /* rows */
 .yt-table__row {
     @apply border-grey-300 flex border-b;
@@ -856,7 +1340,7 @@
 
 [data-font-size='small'] [role='cell'] [data-taco='Select2'],
 [data-font-size='small'] [role='cell'] [data-taco='input-container'] {
-    @apply !-my-[3px];
+    @apply !-my-[2px];
 }
 
 /* from validation */
@@ -869,9 +1353,14 @@
 }
 /*---*/
 
+[data-font-size='small'] [role='cell'] [data-taco='textarea'] {
+    @apply py-px leading-4;
+}
+
 [data-font-size='small'] [role='cell'] [data-taco='input'],
 [data-font-size='small'] [role='cell'] [data-taco='Select2'],
-[data-font-size='small'] [role='cell'] [data-taco='textarea'] {
+[data-font-size='small'] [role='cell'] [data-taco='textarea'],
+[data-font-size='small'] [role='cell'] [data-taco='combobox'] {
     @apply h-6 min-h-[theme(spacing.6)] px-1.5 text-xs;
 }
 
@@ -931,7 +1420,7 @@
 
 [data-font-size='medium'] [role='cell'] [data-taco='Select2'],
 [data-font-size='medium'] [role='cell'] [data-taco='input-container'] {
-    @apply !-my-[5px];
+    @apply !-my-[4px];
 }
 
 /* When cell is editable, but not highlighted, then we apply cell padding to a cell itself and remove 1px border-width */
@@ -940,7 +1429,7 @@
         @apply px-[calc(var(--table3-cell-padding-x)_-_8px_-_1px)];
     }
 
-/* When cell is editable and highlighted, the padding should apply to highlight wrapper and remove 1px border-width, 
+/* When cell is editable and highlighted, the padding should apply to highlight wrapper and remove 1px border-width,
        because it should take all the available space in the cell */
 
 [data-font-size='medium'] [role='cell'][data-editable][data-highlighted='true'] [data-taco='highlight'] {
@@ -958,8 +1447,7 @@
 [data-font-size='medium'] [role='row'][data-invalid='true'] [role='cell'] [data-taco='input-container'],
 [data-font-size='medium'] [role='row'] [role='cell'][data-invalid='true'] [data-taco='Select2'],
 [data-font-size='medium'] [role='row'] [role='cell'][data-invalid='true'] [data-taco='input-container'] {
-    @apply !-mt-1.5;
-    @apply !mb-0;
+    @apply !-mt-1.5 !mb-0;
 }
 
 /* large font size */
@@ -978,7 +1466,11 @@
 
 [data-font-size='large'] [role='cell'] [data-taco='Select2'],
 [data-font-size='large'] [role='cell'] [data-taco='input-container'] {
-    @apply !-my-[7.5px];
+    @apply !-my-[6.5px];
+}
+
+[data-font-size='large'] [role='cell'] [data-taco='textarea'] {
+    @apply py-[9.5px];
 }
 
 [data-font-size='large'] [role='row'][data-invalid='true'] [role='cell'] [data-taco='Select2'],
@@ -1009,7 +1501,7 @@
         @apply px-[calc(var(--table3-cell-padding-x)_-_10px_-_1px)];
     }
 
-/* When cell is editable and highlighted, the padding should apply to highlight wrapper and remove 1px border-width, 
+/* When cell is editable and highlighted, the padding should apply to highlight wrapper and remove 1px border-width,
        because it should take all the available space in the cell */
 
 [data-font-size='large'] [role='cell'][data-editable][data-highlighted='true'] [data-taco='highlight'] {
@@ -1023,7 +1515,7 @@
     @apply !mx-[calc(var(--table3-cell-padding-x)_-_5px)] !mt-px;
 }
 
-/* Icon inside column header button uses em values therefore text-sm is required to prevent icon 
+/* Icon inside column header button uses em values therefore text-sm is required to prevent icon
    from overflowing button's boundaries */
 [data-font-size='large'] [role='columnheader'] button {
     @apply !text-sm;

package/dist/esm/packages/taco/src/components/Card/Card.js

@@ -21,7 +21,7 @@ const Card = /*#__PURE__*/forwardRef(function Card(props, ref) {
     menu,
     children
   } = props;
-  const className = cn('bg-white flex flex-col rounded-xl border border-solid border-radius-[12px] border-grey-300 hover:border-grey-500', props.className);
+  const className = cn('bg-white flex flex-col rounded-xl border border-solid border-radius-[12px] border-grey-300 hover:border-grey-500 [&_[data-taco="table2"]]:!border-0', props.className);
   return /*#__PURE__*/createElement("div", {
     className: className,
     "data-taco": "card",

package/dist/esm/packages/taco/src/components/Card/Card.js.map

@@ -1 +1 @@
-{"version":3,"file":"Card.js","sources":["../../../../../../../src/components/Card/Card.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\n\nimport { MenuProps } from '../Menu/Menu';\nimport { IconButton } from '../IconButton/IconButton';\n\nexport type CardContentProps = React.HTMLAttributes<HTMLDivElement> & {\n    noPadding?: boolean;\n};\n\nconst Content = React.forwardRef<HTMLDivElement, CardContentProps>(function CardContent(externalProps, ref) {\n    const { noPadding, ...props } = externalProps;\n    const className = cn(\n        'flex-grow overflow-auto',\n        {\n            'mx-4 mb-4': !noPadding,\n        },\n        props.className\n    );\n    return <div {...props} className={className} ref={ref} />;\n});\n\nexport type CardProps = React.HTMLAttributes<HTMLDivElement> & {\n    /** Title of the Card */\n    title: string | React.ReactElement;\n    /** Menu component associated with the Card */\n    menu?: (props: Partial<MenuProps>) => JSX.Element;\n};\n\nexport const Card = React.forwardRef<HTMLDivElement, CardProps>(function Card(props, ref) {\n    const { title, menu, children } = props;\n    const className = cn(\n        'bg-white flex flex-col rounded-xl border border-solid border-radius-[12px] border-grey-300 hover:border-grey-500',\n        props.className\n    );\n\n    return (\n        <div className={className} data-taco=\"card\" ref={ref}>\n            <div className=\"mx-4 mb-2 mt-4 flex\">\n                {title && <h4 className=\"mb-0 flex-grow text-left\">{title}</h4>}\n                {menu ? <IconButton icon=\"ellipsis-horizontal\" appearance=\"discrete\" menu={menu} className=\"-mt-[4px]\" /> : null}\n            </div>\n            {children}\n        </div>\n    );\n}) as React.ForwardRefExoticComponent<CardProps> & {\n    Content: React.ForwardRefExoticComponent<CardContentProps>;\n};\nCard.Content = Content;\n"],"names":["Content","React","CardContent","externalProps","ref","noPadding","props","className","cn","Card","title","menu","children","IconButton","icon","appearance"],"mappings":";;;;AAUA,MAAMA,OAAO,gBAAGC,UAAgB,CAAmC,SAASC,WAAWA,CAACC,aAAa,EAAEC,GAAG;EACtG,MAAM;IAAEC,SAAS;IAAE,GAAGC;GAAO,GAAGH,aAAa;EAC7C,MAAMI,SAAS,GAAGC,EAAE,CAChB,yBAAyB,EACzB;IACI,WAAW,EAAE,CAACH;GACjB,EACDC,KAAK,CAACC,SAAS,CAClB;EACD,oBAAON,uCAASK,KAAK;IAAEC,SAAS,EAAEA,SAAS;IAAEH,GAAG,EAAEA;KAAO;AAC7D,CAAC,CAAC;MASWK,IAAI,gBAAGR,UAAgB,CAA4B,SAASQ,IAAIA,CAACH,KAAK,EAAEF,GAAG;EACpF,MAAM;IAAEM,KAAK;IAAEC,IAAI;IAAEC;GAAU,GAAGN,KAAK;EACvC,MAAMC,SAAS,GAAGC,EAAE,CAChB,kHAAkH,EAClHF,KAAK,CAACC,SAAS,CAClB;EAED,oBACIN;IAAKM,SAAS,EAAEA,SAAS;iBAAY,MAAM;IAACH,GAAG,EAAEA;kBAC7CH;IAAKM,SAAS,EAAC;KACVG,KAAK,iBAAIT;IAAIM,SAAS,EAAC;KAA4BG,KAAK,CAAM,EAC9DC,IAAI,gBAAGV,cAACY,UAAU;IAACC,IAAI,EAAC,qBAAqB;IAACC,UAAU,EAAC,UAAU;IAACJ,IAAI,EAAEA,IAAI;IAAEJ,SAAS,EAAC;IAAc,GAAG,IAAI,CAC9G,EACLK,QAAQ,CACP;AAEd,CAAC;AAGDH,IAAI,CAACT,OAAO,GAAGA,OAAO;;;;"}
+{"version":3,"file":"Card.js","sources":["../../../../../../../src/components/Card/Card.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\n\nimport { MenuProps } from '../Menu/Menu';\nimport { IconButton } from '../IconButton/IconButton';\n\nexport type CardContentProps = React.HTMLAttributes<HTMLDivElement> & {\n    noPadding?: boolean;\n};\n\nconst Content = React.forwardRef<HTMLDivElement, CardContentProps>(function CardContent(externalProps, ref) {\n    const { noPadding, ...props } = externalProps;\n    const className = cn(\n        'flex-grow overflow-auto',\n        {\n            'mx-4 mb-4': !noPadding,\n        },\n        props.className\n    );\n    return <div {...props} className={className} ref={ref} />;\n});\n\nexport type CardProps = React.HTMLAttributes<HTMLDivElement> & {\n    /** Title of the Card */\n    title: string | React.ReactElement;\n    /** Menu component associated with the Card */\n    menu?: (props: Partial<MenuProps>) => JSX.Element;\n};\n\nexport const Card = React.forwardRef<HTMLDivElement, CardProps>(function Card(props, ref) {\n    const { title, menu, children } = props;\n    const className = cn(\n        'bg-white flex flex-col rounded-xl border border-solid border-radius-[12px] border-grey-300 hover:border-grey-500 [&_[data-taco=\"table2\"]]:!border-0',\n        props.className\n    );\n\n    return (\n        <div className={className} data-taco=\"card\" ref={ref}>\n            <div className=\"mx-4 mb-2 mt-4 flex\">\n                {title && <h4 className=\"mb-0 flex-grow text-left\">{title}</h4>}\n                {menu ? <IconButton icon=\"ellipsis-horizontal\" appearance=\"discrete\" menu={menu} className=\"-mt-[4px]\" /> : null}\n            </div>\n            {children}\n        </div>\n    );\n}) as React.ForwardRefExoticComponent<CardProps> & {\n    Content: React.ForwardRefExoticComponent<CardContentProps>;\n};\nCard.Content = Content;\n"],"names":["Content","React","CardContent","externalProps","ref","noPadding","props","className","cn","Card","title","menu","children","IconButton","icon","appearance"],"mappings":";;;;AAUA,MAAMA,OAAO,gBAAGC,UAAgB,CAAmC,SAASC,WAAWA,CAACC,aAAa,EAAEC,GAAG;EACtG,MAAM;IAAEC,SAAS;IAAE,GAAGC;GAAO,GAAGH,aAAa;EAC7C,MAAMI,SAAS,GAAGC,EAAE,CAChB,yBAAyB,EACzB;IACI,WAAW,EAAE,CAACH;GACjB,EACDC,KAAK,CAACC,SAAS,CAClB;EACD,oBAAON,uCAASK,KAAK;IAAEC,SAAS,EAAEA,SAAS;IAAEH,GAAG,EAAEA;KAAO;AAC7D,CAAC,CAAC;MASWK,IAAI,gBAAGR,UAAgB,CAA4B,SAASQ,IAAIA,CAACH,KAAK,EAAEF,GAAG;EACpF,MAAM;IAAEM,KAAK;IAAEC,IAAI;IAAEC;GAAU,GAAGN,KAAK;EACvC,MAAMC,SAAS,GAAGC,EAAE,CAChB,qJAAqJ,EACrJF,KAAK,CAACC,SAAS,CAClB;EAED,oBACIN;IAAKM,SAAS,EAAEA,SAAS;iBAAY,MAAM;IAACH,GAAG,EAAEA;kBAC7CH;IAAKM,SAAS,EAAC;KACVG,KAAK,iBAAIT;IAAIM,SAAS,EAAC;KAA4BG,KAAK,CAAM,EAC9DC,IAAI,gBAAGV,cAACY,UAAU;IAACC,IAAI,EAAC,qBAAqB;IAACC,UAAU,EAAC,UAAU;IAACJ,IAAI,EAAEA,IAAI;IAAEJ,SAAS,EAAC;IAAc,GAAG,IAAI,CAC9G,EACLK,QAAQ,CACP;AAEd,CAAC;AAGDH,IAAI,CAACT,OAAO,GAAGA,OAAO;;;;"}

package/dist/esm/packages/taco/src/components/Group/Group.js

@@ -7,7 +7,7 @@ const Group = /*#__PURE__*/forwardRef(function Group(props, ref) {
     orientation = 'horizontal',
     ...otherProps
   } = props;
-  const className = cn('flex gap-2', {
+  const className = cn('flex gap-2 [&:has([data-taco="tag"])]:!gap-1', {
     'flex-col ': orientation === 'vertical'
   }, props.className);
   return /*#__PURE__*/createElement(Tag, Object.assign({}, otherProps, {

package/dist/esm/packages/taco/src/components/Group/Group.js.map

@@ -1 +1 @@
-{"version":3,"file":"Group.js","sources":["../../../../../../../src/components/Group/Group.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport { Orientation } from '../../types';\n\nexport type GroupProps = React.HTMLAttributes<HTMLElement> & {\n    /**\n     * Change what html tag element will render.\n     * Default value is `span`\n     */\n    as?: 'div' | 'span' | 'nav';\n    /** Content should be composed of other Taco elements */\n    children: React.ReactNode;\n    /**\n     * Define orientation of grouping.\n     * @defaultValue horizontal\n     */\n    orientation?: Orientation;\n};\n\nexport const Group = React.forwardRef(function Group(props: GroupProps, ref: React.Ref<HTMLDivElement>) {\n    const { as: Tag = 'span', orientation = 'horizontal', ...otherProps } = props;\n    const className = cn('flex gap-2', { 'flex-col ': orientation === 'vertical' }, props.className);\n    return <Tag {...otherProps} className={className} data-taco=\"group\" ref={ref} />;\n});\n"],"names":["Group","React","props","ref","as","Tag","orientation","otherProps","className","cn"],"mappings":";;;MAmBaA,KAAK,gBAAGC,UAAgB,CAAC,SAASD,KAAKA,CAACE,KAAiB,EAAEC,GAA8B;EAClG,MAAM;IAAEC,EAAE,EAAEC,GAAG,GAAG,MAAM;IAAEC,WAAW,GAAG,YAAY;IAAE,GAAGC;GAAY,GAAGL,KAAK;EAC7E,MAAMM,SAAS,GAAGC,EAAE,CAAC,YAAY,EAAE;IAAE,WAAW,EAAEH,WAAW,KAAK;GAAY,EAAEJ,KAAK,CAACM,SAAS,CAAC;EAChG,oBAAOP,cAACI,GAAG,oBAAKE,UAAU;IAAEC,SAAS,EAAEA,SAAS;iBAAY,OAAO;IAACL,GAAG,EAAEA;KAAO;AACpF,CAAC;;;;"}
+{"version":3,"file":"Group.js","sources":["../../../../../../../src/components/Group/Group.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport { Orientation } from '../../types';\n\nexport type GroupProps = React.HTMLAttributes<HTMLElement> & {\n    /**\n     * Change what html tag element will render.\n     * Default value is `span`\n     */\n    as?: 'div' | 'span' | 'nav';\n    /** Content should be composed of other Taco elements */\n    children: React.ReactNode;\n    /**\n     * Define orientation of grouping.\n     * @defaultValue horizontal\n     */\n    orientation?: Orientation;\n};\n\nexport const Group = React.forwardRef(function Group(props: GroupProps, ref: React.Ref<HTMLDivElement>) {\n    const { as: Tag = 'span', orientation = 'horizontal', ...otherProps } = props;\n    const className = cn(\n        'flex gap-2 [&:has([data-taco=\"tag\"])]:!gap-1',\n        { 'flex-col ': orientation === 'vertical' },\n        props.className\n    );\n    return <Tag {...otherProps} className={className} data-taco=\"group\" ref={ref} />;\n});\n"],"names":["Group","React","props","ref","as","Tag","orientation","otherProps","className","cn"],"mappings":";;;MAmBaA,KAAK,gBAAGC,UAAgB,CAAC,SAASD,KAAKA,CAACE,KAAiB,EAAEC,GAA8B;EAClG,MAAM;IAAEC,EAAE,EAAEC,GAAG,GAAG,MAAM;IAAEC,WAAW,GAAG,YAAY;IAAE,GAAGC;GAAY,GAAGL,KAAK;EAC7E,MAAMM,SAAS,GAAGC,EAAE,CAChB,8CAA8C,EAC9C;IAAE,WAAW,EAAEH,WAAW,KAAK;GAAY,EAC3CJ,KAAK,CAACM,SAAS,CAClB;EACD,oBAAOP,cAACI,GAAG,oBAAKE,UAAU;IAAEC,SAAS,EAAEA,SAAS;iBAAY,OAAO;IAACL,GAAG,EAAEA;KAAO;AACpF,CAAC;;;;"}