@rotki/ui-library 2.27.0 → 3.0.0-beta.2

package/dist/components/tables/data-table/RuiDataTableRow.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiDataTableRow.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../src/components/tables/data-table/RuiDataTableRow.vue"],"sourcesContent":["<script lang=\"ts\" setup generic=\"T extends object\">\nimport type { TableColumn } from '@/components/tables/RuiTableHead.vue';\nimport RuiCheckbox from '@/components/forms/checkbox/RuiCheckbox.vue';\nimport { useDataTableColumns, useDataTableExpansion, useDataTableRowIdentity, useDataTableSelection, useDataTableStyling } from '@/components/tables/data-table/context';\nimport RuiDataTableCell from '@/components/tables/data-table/RuiDataTableCell.vue';\nimport RuiDataTableExpandedRow from '@/components/tables/data-table/RuiDataTableExpandedRow.vue';\nimport RuiExpandButton from '@/components/tables/RuiExpandButton.vue';\n\nconst {\n  row,\n  index,\n} = defineProps<{\n  row: T;\n  index: number;\n}>();\n\nconst slots = defineSlots<Partial<\n  Record<`item.${string}`, (props: { column: TableColumn<T>; row: T; index: number }) => any> & {\n    'expanded-item'?: (props: { row: T; index: number }) => any;\n  }\n>>();\n\nconst { classes, dense, isMobile } = useDataTableStyling();\nconst { cellValue, columns, itemSlotKeys } = useDataTableColumns<T>();\nconst { isDisabledRow, isSelected, onCheckboxClick, onSelect, selectedData } = useDataTableSelection<T>();\nconst { expandable, isExpanded, onToggleExpand } = useDataTableExpansion<T>();\nconst { getRowId, itemClass } = useDataTableRowIdentity<T>();\n\nconst rowId = computed<T[keyof T]>(() => getRowId(row));\nconst selected = computed<boolean>(() => isSelected(get(rowId)));\nconst disabled = computed<boolean>(() => isDisabledRow(get(rowId)));\nconst expanded = computed<boolean>(() => get(expandable) && !!slots['expanded-item'] && isExpanded(get(rowId)));\nconst rowClass = computed<string>(() => typeof itemClass === 'string' ? itemClass : itemClass(row));\n\n/** Selection wins over the open-panel shade, so a selected row still reads as selected. */\nconst stateClass = computed<string>(() => {\n  if (get(selected))\n    return get(classes).trSelected;\n  if (get(expanded))\n    return get(classes).trExpandedParent;\n  return get(classes).tr;\n});\n\n/**\n * A column is pinned to the mobile card header when it is flagged\n * `mobileHeader`, typically an action column, or when it is the\n * auto-generated expand column.\n */\nfunction isMobileHeaderColumn(column: TableColumn<T>): boolean {\n  return !!column.mobileHeader || column.key === 'expand';\n}\n\n/**\n * A pinned column only earns a spot in the header if it renders something: the\n * expand toggle, a provided item slot, or a non-empty cell value. Without this,\n * a pinned column with no content, such as an action column whose\n * `#item.action` slot a nested table does not provide, leaves an empty header\n * bar with just its divider line.\n */\nfunction mobileHeaderColumnHasContent(column: TableColumn<T>): boolean {\n  if (column.key === 'expand')\n    return true;\n  if (itemSlotKeys.has(column.key.toString()))\n    return true;\n  const value = cellValue(row, column.key);\n  return value !== undefined && value !== null && value !== '';\n}\n\n/**\n * In the stacked mobile layout, header columns render in the card header row\n * instead of as a label/value pair. Everything else stacks below in the body.\n */\nconst mobileHeaderColumns = computed<TableColumn<T>[]>(() =>\n  get(isMobile) ? get(columns).filter(column => isMobileHeaderColumn(column) && mobileHeaderColumnHasContent(column)) : [],\n);\nconst bodyColumns = computed<TableColumn<T>[]>(() =>\n  get(isMobile) ? get(columns).filter(column => !isMobileHeaderColumn(column)) : get(columns),\n);\nconst showMobileHeader = computed<boolean>(() =>\n  get(isMobile) && (!!get(selectedData) || get(mobileHeaderColumns).length > 0),\n);\n\n/**\n * Without a selection checkbox the header bar would hold only the pinned\n * actions, so they float in the card's top-right corner instead and the first\n * field row makes room for them.\n */\nconst compactMobileHeader = computed<boolean>(() =>\n  get(showMobileHeader) && !get(selectedData) && get(bodyColumns).length > 0,\n);\n\n/** Room for each floating action, about one small icon button wide. */\nconst firstRowInset = computed<Record<string, string> | undefined>(() =>\n  get(compactMobileHeader) ? { paddingRight: `${get(mobileHeaderColumns).length * 2 + 1}rem` } : undefined,\n);\n\n/**\n * `!border-y` defeats the `divide-y-0` on the mobile tbody, which otherwise\n * zeroes the top and bottom border on every card except the first. An expanded\n * card flattens its bottom edge so the expanded panel attaches flush beneath\n * it.\n *\n * These bindings do not run through the class merger, so each state picks its\n * own utilities rather than emitting conflicting ones.\n */\nconst mobileCardClass = computed<string>(() => {\n  const shared = 'relative flex flex-col border !border-y border-black/[0.12] dark:border-white/[0.12] overflow-hidden';\n  return get(expanded)\n    ? `${shared} rounded-t-lg mb-0`\n    : `${shared} rounded-lg mb-3 last:mb-0`;\n});\n</script>\n\n<template>\n  <tr\n    :class=\"[stateClass, rowClass, isMobile ? mobileCardClass : '']\"\n    :aria-selected=\"selectedData ? selected : undefined\"\n    data-id=\"row\"\n  >\n    <!-- Mobile card header: checkbox on the left, pinned action columns on the right -->\n    <td\n      v-if=\"showMobileHeader\"\n      :class=\"compactMobileHeader\n        ? 'absolute top-0 right-0 z-[1] flex items-center gap-1 px-2 py-1'\n        : 'flex items-center justify-between gap-2 px-4 py-2 border-b border-black/[0.12] dark:border-white/[0.12]'\"\n      data-id=\"mobile-card-header\"\n    >\n      <RuiCheckbox\n        v-if=\"selectedData\"\n        :data-id=\"`table-toggle-check-${index}`\"\n        :model-value=\"selected\"\n        :disabled=\"disabled\"\n        :size=\"dense ? 'sm' : undefined\"\n        color=\"primary\"\n        class=\"select-none\"\n        hide-details\n        @update:model-value=\"onSelect($event, rowId, true)\"\n        @click=\"onCheckboxClick($event, rowId, index)\"\n      />\n      <span v-else-if=\"!compactMobileHeader\" />\n\n      <div\n        v-if=\"mobileHeaderColumns.length > 0\"\n        class=\"flex items-center gap-1 min-w-0\"\n      >\n        <template\n          v-for=\"(column, headerIndex) in mobileHeaderColumns\"\n          :key=\"`header-${headerIndex}`\"\n        >\n          <slot\n            v-if=\"itemSlotKeys.has(column.key.toString())\"\n            :name=\"`item.${column.key.toString()}`\"\n            :column=\"column\"\n            :row=\"row\"\n            :index=\"index\"\n          />\n          <RuiExpandButton\n            v-else-if=\"column.key === 'expand'\"\n            :expanded=\"isExpanded(rowId)\"\n            @click=\"onToggleExpand(row)\"\n          />\n          <template v-else>\n            {{ cellValue(row, column.key) }}\n          </template>\n        </template>\n      </div>\n    </td>\n\n    <!-- Desktop checkbox cell -->\n    <td\n      v-else-if=\"selectedData && !isMobile\"\n      :class=\"classes.checkbox\"\n      colspan=\"1\"\n      rowspan=\"1\"\n    >\n      <RuiCheckbox\n        :data-id=\"`table-toggle-check-${index}`\"\n        :model-value=\"selected\"\n        :disabled=\"disabled\"\n        :size=\"dense ? 'sm' : undefined\"\n        color=\"primary\"\n        class=\"select-none\"\n        hide-details\n        @update:model-value=\"onSelect($event, rowId, true)\"\n        @click=\"onCheckboxClick($event, rowId, index)\"\n      />\n    </td>\n\n    <RuiDataTableCell\n      v-for=\"(column, subIndex) in bodyColumns\"\n      :key=\"subIndex\"\n      :column=\"column\"\n      :row=\"row\"\n      :index=\"index\"\n      :row-id=\"rowId\"\n      :style=\"subIndex === 0 ? firstRowInset : undefined\"\n    >\n      <template\n        v-if=\"itemSlotKeys.has(column.key.toString())\"\n        #default=\"slotData\"\n      >\n        <slot\n          :name=\"`item.${column.key.toString()}`\"\n          v-bind=\"slotData\"\n        />\n      </template>\n    </RuiDataTableCell>\n  </tr>\n\n  <RuiDataTableExpandedRow\n    v-if=\"expanded\"\n    :row=\"row\"\n    :index=\"index\"\n  >\n    <template\n      v-if=\"slots['expanded-item']\"\n      #expanded-item=\"slotData\"\n    >\n      <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n      <slot\n        name=\"expanded-item\"\n        v-bind=\"slotData\"\n      />\n    </template>\n  </RuiDataTableExpandedRow>\n</template>\n"],"mappings":"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"}
+{"version":3,"file":"RuiDataTableRow.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../src/components/tables/data-table/RuiDataTableRow.vue"],"sourcesContent":["<script lang=\"ts\" setup generic=\"T extends object\">\nimport type { TableColumn } from '@/components/tables/RuiTableHead.vue';\nimport RuiCheckbox from '@/components/forms/checkbox/RuiCheckbox.vue';\nimport { useDataTableColumns, useDataTableExpansion, useDataTableRowIdentity, useDataTableSelection, useDataTableStyling } from '@/components/tables/data-table/context';\nimport RuiDataTableCell from '@/components/tables/data-table/RuiDataTableCell.vue';\nimport RuiDataTableExpandedRow from '@/components/tables/data-table/RuiDataTableExpandedRow.vue';\nimport RuiExpandButton from '@/components/tables/RuiExpandButton.vue';\n\nconst {\n  row,\n  index,\n} = defineProps<{\n  row: T;\n  index: number;\n}>();\n\nconst slots = defineSlots<Partial<\n  Record<`item.${string}`, (props: { column: TableColumn<T>; row: T; index: number }) => any> & {\n    'expanded-item'?: (props: { row: T; index: number }) => any;\n  }\n>>();\n\nconst { classes, dense, isMobile } = useDataTableStyling();\nconst { cellValue, columns, itemSlotKeys } = useDataTableColumns<T>();\nconst { isDisabledRow, isSelected, onCheckboxClick, onSelect, selectedData } = useDataTableSelection<T>();\nconst { expandable, isExpanded, onToggleExpand } = useDataTableExpansion<T>();\nconst { getRowId, itemClass } = useDataTableRowIdentity<T>();\n\nconst rowId = computed<T[keyof T]>(() => getRowId(row));\nconst selected = computed<boolean>(() => isSelected(get(rowId)));\nconst disabled = computed<boolean>(() => isDisabledRow(get(rowId)));\nconst expanded = computed<boolean>(() => get(expandable) && !!slots['expanded-item'] && isExpanded(get(rowId)));\n\n/** How long a closing panel stays to fade out; matches its `duration-100`. */\nconst PANEL_LEAVE_MS = 100;\n\nconst reducedMotion = usePreferredReducedMotion();\n\n/**\n * Whether the panel is in the DOM, which outlasts `expanded` by its fade-out.\n *\n * @remarks\n * Not a `<Transition>`: test utilities stub that with an element, which lands inside the consumer's\n * `<tbody>` and shifts every `tr:nth-child` its specs count. The fade-in is CSS `@starting-style`.\n */\nconst panelShown = ref<boolean>(get(expanded));\nconst panelClosing = ref<boolean>(false);\n\nconst { start: finishClosing, stop: cancelClosing } = useTimeoutFn(() => {\n  set(panelShown, false);\n  set(panelClosing, false);\n}, PANEL_LEAVE_MS, { immediate: false });\n\nwatch(expanded, (open) => {\n  if (open) {\n    cancelClosing();\n    set(panelClosing, false);\n    set(panelShown, true);\n    return;\n  }\n  if (!get(panelShown))\n    return;\n  if (get(reducedMotion) === 'reduce') {\n    set(panelShown, false);\n    return;\n  }\n  set(panelClosing, true);\n  finishClosing();\n});\n\nconst rowClass = computed<string>(() => typeof itemClass === 'string' ? itemClass : itemClass(row));\n\n/** Selection wins over the open-panel shade, so a selected row still reads as selected. */\nconst stateClass = computed<string>(() => {\n  if (get(selected))\n    return get(classes).trSelected;\n  if (get(expanded))\n    return get(classes).trExpandedParent;\n  return get(classes).tr;\n});\n\n/**\n * A column is pinned to the mobile card header when it is flagged\n * `mobileHeader`, typically an action column, or when it is the\n * auto-generated expand column.\n */\nfunction isMobileHeaderColumn(column: TableColumn<T>): boolean {\n  return !!column.mobileHeader || column.key === 'expand';\n}\n\n/**\n * A pinned column only earns a spot in the header if it renders something: the\n * expand toggle, a provided item slot, or a non-empty cell value. Without this,\n * a pinned column with no content, such as an action column whose\n * `#item.action` slot a nested table does not provide, leaves an empty header\n * bar with just its divider line.\n */\nfunction mobileHeaderColumnHasContent(column: TableColumn<T>): boolean {\n  if (column.key === 'expand')\n    return true;\n  if (itemSlotKeys.has(column.key.toString()))\n    return true;\n  const value = cellValue(row, column.key);\n  return value !== undefined && value !== null && value !== '';\n}\n\n/**\n * In the stacked mobile layout, header columns render in the card header row\n * instead of as a label/value pair. Everything else stacks below in the body.\n */\nconst mobileHeaderColumns = computed<TableColumn<T>[]>(() =>\n  get(isMobile) ? get(columns).filter(column => isMobileHeaderColumn(column) && mobileHeaderColumnHasContent(column)) : [],\n);\nconst bodyColumns = computed<TableColumn<T>[]>(() =>\n  get(isMobile) ? get(columns).filter(column => !isMobileHeaderColumn(column)) : get(columns),\n);\nconst showMobileHeader = computed<boolean>(() =>\n  get(isMobile) && (!!get(selectedData) || get(mobileHeaderColumns).length > 0),\n);\n\n/**\n * Without a selection checkbox the header bar would hold only the pinned\n * actions, so they float in the card's top-right corner instead and the first\n * field row makes room for them.\n */\nconst compactMobileHeader = computed<boolean>(() =>\n  get(showMobileHeader) && !get(selectedData) && get(bodyColumns).length > 0,\n);\n\n/** Room for each floating action, about one small icon button wide. */\nconst firstRowInset = computed<Record<string, string> | undefined>(() =>\n  get(compactMobileHeader) ? { paddingRight: `${get(mobileHeaderColumns).length * 2 + 1}rem` } : undefined,\n);\n\n/**\n * `border-y!` defeats the `divide-y-0` on the mobile tbody, which otherwise\n * zeroes the top and bottom border on every card except the first. An expanded\n * card flattens its bottom edge so the expanded panel attaches flush beneath\n * it.\n *\n * These bindings do not run through the class merger, so each state picks its\n * own utilities rather than emitting conflicting ones.\n */\nconst mobileCardClass = computed<string>(() => {\n  const shared = 'relative flex flex-col border border-y! border-rui-divider overflow-hidden';\n  return get(expanded)\n    ? `${shared} rounded-t-rui-card mb-0`\n    : `${shared} rounded-rui-card mb-3 last:mb-0`;\n});\n</script>\n\n<template>\n  <tr\n    :class=\"[stateClass, rowClass, isMobile ? mobileCardClass : '']\"\n    :aria-selected=\"selectedData ? selected : undefined\"\n    data-id=\"row\"\n  >\n    <!-- Mobile card header: checkbox on the left, pinned action columns on the right -->\n    <td\n      v-if=\"showMobileHeader\"\n      :class=\"compactMobileHeader\n        ? 'absolute top-0 right-0 z-1 flex items-center gap-1 px-2 py-1'\n        : 'flex items-center justify-between gap-2 px-4 py-2 border-b border-rui-divider'\"\n      data-id=\"mobile-card-header\"\n    >\n      <RuiCheckbox\n        v-if=\"selectedData\"\n        :data-id=\"`table-toggle-check-${index}`\"\n        aria-label=\"Select row\"\n        :model-value=\"selected\"\n        :disabled=\"disabled\"\n        :size=\"dense ? 'sm' : undefined\"\n        color=\"primary\"\n        class=\"select-none\"\n        hide-details\n        @update:model-value=\"onSelect($event, rowId, true)\"\n        @click=\"onCheckboxClick($event, rowId, index)\"\n      />\n      <span v-else-if=\"!compactMobileHeader\" />\n\n      <div\n        v-if=\"mobileHeaderColumns.length > 0\"\n        class=\"flex items-center gap-1 min-w-0\"\n      >\n        <template\n          v-for=\"(column, headerIndex) in mobileHeaderColumns\"\n          :key=\"`header-${headerIndex}`\"\n        >\n          <slot\n            v-if=\"itemSlotKeys.has(column.key.toString())\"\n            :name=\"`item.${column.key.toString()}`\"\n            :column=\"column\"\n            :row=\"row\"\n            :index=\"index\"\n          />\n          <RuiExpandButton\n            v-else-if=\"column.key === 'expand'\"\n            :expanded=\"isExpanded(rowId)\"\n            @click=\"onToggleExpand(row)\"\n          />\n          <template v-else>\n            {{ cellValue(row, column.key) }}\n          </template>\n        </template>\n      </div>\n    </td>\n\n    <!-- Desktop checkbox cell -->\n    <td\n      v-else-if=\"selectedData && !isMobile\"\n      :class=\"classes.checkbox\"\n      colspan=\"1\"\n      rowspan=\"1\"\n    >\n      <RuiCheckbox\n        :data-id=\"`table-toggle-check-${index}`\"\n        aria-label=\"Select row\"\n        :model-value=\"selected\"\n        :disabled=\"disabled\"\n        :size=\"dense ? 'sm' : undefined\"\n        color=\"primary\"\n        class=\"select-none\"\n        hide-details\n        @update:model-value=\"onSelect($event, rowId, true)\"\n        @click=\"onCheckboxClick($event, rowId, index)\"\n      />\n    </td>\n\n    <RuiDataTableCell\n      v-for=\"(column, subIndex) in bodyColumns\"\n      :key=\"subIndex\"\n      :column=\"column\"\n      :row=\"row\"\n      :index=\"index\"\n      :row-id=\"rowId\"\n      :style=\"subIndex === 0 ? firstRowInset : undefined\"\n    >\n      <template\n        v-if=\"itemSlotKeys.has(column.key.toString())\"\n        #default=\"slotData\"\n      >\n        <slot\n          :name=\"`item.${column.key.toString()}`\"\n          v-bind=\"slotData\"\n        />\n      </template>\n    </RuiDataTableCell>\n  </tr>\n\n  <!-- opacity only: the rows below move once, at once, rather than sliding with a growing height -->\n  <RuiDataTableExpandedRow\n    v-if=\"panelShown\"\n    class=\"transition-opacity starting:opacity-0 motion-reduce:transition-none\"\n    :class=\"panelClosing ? 'opacity-0 duration-100 ease-in' : 'duration-150 ease-out'\"\n    :row=\"row\"\n    :index=\"index\"\n  >\n    <template\n      v-if=\"slots['expanded-item']\"\n      #expanded-item=\"slotData\"\n    >\n      <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n      <slot\n        name=\"expanded-item\"\n        v-bind=\"slotData\"\n      />\n    </template>\n  </RuiDataTableExpandedRow>\n</template>\n"],"mappings":"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"}

package/dist/components/tables/data-table-styles.d.ts

@@ -1,4 +1,15 @@
+/**
+ * Header and pagination of a nested table, stepped by depth to stand off the band around them (about
+ * 1.12:1 or more) as well as their own rows: past the lighter band one panel deep, short of the darker
+ * band two deep. Nested bars never stick, so the tint can be translucent over the table's own surface.
+ */
+export declare const NESTED_BAR = "[[data-id=row-expanded]_&]:bg-rui-neutral-950/[0.13] dark:[[data-id=row-expanded]_&]:bg-white/[0.16] [[data-id=row-expanded]_[data-id=row-expanded]_&]:bg-rui-neutral-950/[0.06] dark:[[data-id=row-expanded]_[data-id=row-expanded]_&]:bg-white/[0.07]";
 export declare const dataTableStyles: import("tailwind-variants").TVReturnType<{
+    sticky: {
+        true: {
+            pagination: string;
+        };
+    };
     outlined: {
         true: {
             wrapper: string;
@@ -60,7 +71,13 @@ export declare const dataTableStyles: import("tailwind-variants").TVReturnType<{
     td: string;
     checkbox: string;
     tbodyLoader: string;
+    pagination: string;
 }, undefined, {
+    sticky: {
+        true: {
+            pagination: string;
+        };
+    };
     outlined: {
         true: {
             wrapper: string;
@@ -122,7 +139,13 @@ export declare const dataTableStyles: import("tailwind-variants").TVReturnType<{
     td: string;
     checkbox: string;
     tbodyLoader: string;
+    pagination: string;
 }, import("tailwind-variants").TVReturnTypeLike<{
+    sticky: {
+        true: {
+            pagination: string;
+        };
+    };
     outlined: {
         true: {
             wrapper: string;
@@ -184,4 +207,5 @@ export declare const dataTableStyles: import("tailwind-variants").TVReturnType<{
     td: string;
     checkbox: string;
     tbodyLoader: string;
+    pagination: string;
 }>>;

package/dist/components/tables/data-table-styles.js

@@ -1,40 +1,55 @@
 import { tv } from "../../utils/tv.js";
 //#region src/components/tables/data-table-styles.ts
+/** A 2px primary rail down the left edge of an open row and its panel; out of flow, so the cell keeps its padding. */
+var OPEN_ROW_RAIL = "[&>td:first-child]:relative [&>td:first-child]:before:absolute [&>td:first-child]:before:inset-y-0 [&>td:first-child]:before:left-0 [&>td:first-child]:before:w-0.5 [&>td:first-child]:before:bg-rui-primary";
+/**
+* The band of an open row inside another table's panel: a step darker than the outer band, so the two
+* levels never share a grey while the rows between them keep the plain surface.
+*/
+var NESTED_BAND = "[[data-id=row-expanded]_&]:bg-rui-neutral-950/[0.11] dark:[[data-id=row-expanded]_&]:bg-white/[0.14]";
+/**
+* Header and pagination of a nested table, stepped by depth to stand off the band around them (about
+* 1.12:1 or more) as well as their own rows: past the lighter band one panel deep, short of the darker
+* band two deep. Nested bars never stick, so the tint can be translucent over the table's own surface.
+*/
+var NESTED_BAR = "[[data-id=row-expanded]_&]:bg-rui-neutral-950/[0.13] dark:[[data-id=row-expanded]_&]:bg-white/[0.16] [[data-id=row-expanded]_[data-id=row-expanded]_&]:bg-rui-neutral-950/[0.06] dark:[[data-id=row-expanded]_[data-id=row-expanded]_&]:bg-white/[0.07]";
 var dataTableStyles = tv({
 	slots: {
-		wrapper: "relative divide-y divide-black/[0.12] dark:divide-white/[0.12] overflow-clip",
-		scroller: "overflow-x-auto overflow-y-hidden [clip-path:inset(0_0_0_0)]",
-		table: "min-w-full table-fixed divide-y divide-black/[0.12] dark:divide-white/[0.12] whitespace-nowrap mx-auto my-0 max-w-fit relative border-black/[0.12] dark:border-white/[0.12]",
-		tbody: "divide-y divide-black/[0.12] dark:divide-white/[0.12]",
-		tr: "hover:bg-black/[0.04] dark:hover:bg-white/[0.04]",
+		wrapper: "relative between:border-t between:border-b-0 between:border-rui-divider overflow-clip bg-rui-surface",
+		scroller: "overflow-x-auto overflow-y-hidden [clip-path:inset(0_0_0_0)] outline-hidden focus-visible:focus-ring focus-visible:-outline-offset-2",
+		table: "min-w-full table-fixed between:border-t between:border-b-0 between:border-rui-divider whitespace-nowrap mx-auto my-0 max-w-fit relative border-rui-divider",
+		tbody: "between:border-t between:border-b-0 between:border-rui-divider",
+		tr: "hover:bg-rui-hover",
 		td: "[:where(&)]:px-4 text-rui-text text-body-2 tabular-nums [text-wrap:initial]",
 		checkbox: "px-2 w-[3.625rem] max-w-[3.625rem] [&_label]:ml-0",
-		tbodyLoader: "text-center"
+		tbodyLoader: "text-center",
+		pagination: `bg-rui-surface-muted ${NESTED_BAR}`
 	},
 	variants: {
-		outlined: { true: { wrapper: "border border-black/[0.12] dark:border-white/[0.12]" } },
+		sticky: { true: { pagination: "sticky bottom-0 z-rui-raised" } },
+		outlined: { true: { wrapper: "border border-rui-divider" } },
 		rounded: {
-			sm: { wrapper: "rounded-[.25rem]" },
-			md: { wrapper: "rounded-[.75rem]" },
-			lg: { wrapper: "rounded-[1rem]" }
+			sm: { wrapper: "rounded-rui-sm" },
+			md: { wrapper: "rounded-rui-card" },
+			lg: { wrapper: "rounded-rui-lg" }
 		},
 		dense: {
 			true: {},
 			false: {}
 		},
-		striped: { true: { tbody: "[:where(&>tr:nth-child(even))]:bg-rui-grey-50 dark:[:where(&>tr:nth-child(even))]:bg-rui-grey-900" } },
+		striped: { true: { tbody: "[:where(&>tr:nth-child(even))]:bg-rui-neutral-950/[0.03] dark:[:where(&>tr:nth-child(even))]:bg-white/[0.04]" } },
 		rowVariant: {
-			selected: { tr: "bg-rui-primary/[0.08] dark:bg-rui-dark-primary/[0.08]" },
+			selected: { tr: "bg-rui-primary-soft" },
 			empty: { tr: "hover:bg-transparent" },
-			expandable: { tr: "bg-rui-grey-50 hover:bg-rui-grey-50 dark:bg-white/[0.03] dark:hover:bg-white/[0.03] !border-t-0" },
-			expandedParent: { tr: "bg-rui-grey-50 dark:bg-white/[0.03]" },
-			group: { tr: "bg-rui-grey-100 dark:bg-white/[0.05]" }
+			expandable: { tr: `bg-rui-neutral-950/[0.07] hover:bg-rui-neutral-950/[0.07] dark:bg-white/[0.09] dark:hover:bg-white/[0.09] ${NESTED_BAND} [[data-id=row-expanded]_&]:hover:bg-rui-neutral-950/[0.11] dark:[[data-id=row-expanded]_&]:hover:bg-white/[0.14] ${OPEN_ROW_RAIL} !border-t-0` },
+			expandedParent: { tr: `bg-rui-neutral-950/[0.07] dark:bg-white/[0.09] ${NESTED_BAND} ${OPEN_ROW_RAIL}` },
+			group: { tr: "bg-rui-neutral-100 dark:bg-white/[0.05]" }
 		},
 		mobile: { true: {
-			wrapper: "divide-y-0 border-0 rounded-none overflow-visible",
+			wrapper: "between:border-t-0 border-0 rounded-none overflow-visible",
 			scroller: "overflow-visible [clip-path:none]",
-			table: "block min-w-0 max-w-none w-full whitespace-normal divide-y-0 border-0",
-			tbody: "block divide-y-0",
+			table: "block min-w-0 max-w-none w-full whitespace-normal between:border-t-0 border-0",
+			tbody: "block between:border-t-0",
 			tr: "block",
 			td: "block px-4 py-2"
 		} }
@@ -48,7 +63,7 @@ var dataTableStyles = tv({
 	compoundVariants: [{
 		dense: false,
 		mobile: false,
-		class: { td: "[:where(&)]:py-3 [:where(&)]:h-[3.25rem]" }
+		class: { td: "[:where(&)]:py-1 [:where(&)]:h-11" }
 	}, {
 		dense: true,
 		mobile: false,
@@ -60,6 +75,6 @@ var dataTableStyles = tv({
 	}
 });
 //#endregion
-export { dataTableStyles };
+export { NESTED_BAR, dataTableStyles };
 
 //# sourceMappingURL=data-table-styles.js.map

package/dist/components/tables/data-table-styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"data-table-styles.js","names":[],"sources":["../../../src/components/tables/data-table-styles.ts"],"sourcesContent":["import { tv } from '@/utils/tv';\n\nexport const dataTableStyles = tv({\n  slots: {\n    // `clip`, not `hidden`: a hidden-overflow flex item may shrink below its rows and hide them\n    wrapper: 'relative divide-y divide-black/[0.12] dark:divide-white/[0.12] overflow-clip',\n    scroller: 'overflow-x-auto overflow-y-hidden [clip-path:inset(0_0_0_0)]',\n    table: 'min-w-full table-fixed divide-y divide-black/[0.12] dark:divide-white/[0.12] whitespace-nowrap mx-auto my-0 max-w-fit relative border-black/[0.12] dark:border-white/[0.12]',\n    tbody: 'divide-y divide-black/[0.12] dark:divide-white/[0.12]',\n    tr: 'hover:bg-black/[0.04] dark:hover:bg-white/[0.04]',\n    td: '[:where(&)]:px-4 text-rui-text text-body-2 tabular-nums [text-wrap:initial]',\n    checkbox: 'px-2 w-[3.625rem] max-w-[3.625rem] [&_label]:ml-0',\n    tbodyLoader: 'text-center',\n  },\n  variants: {\n    outlined: {\n      true: { wrapper: 'border border-black/[0.12] dark:border-white/[0.12]' },\n    },\n    rounded: {\n      sm: { wrapper: 'rounded-[.25rem]' },\n      md: { wrapper: 'rounded-[.75rem]' },\n      lg: { wrapper: 'rounded-[1rem]' },\n    },\n    dense: {\n      true: {},\n      false: {},\n    },\n    // `:where()` keeps the stripe below every row state (selected, hover, expanded, group)\n    striped: {\n      true: { tbody: '[:where(&>tr:nth-child(even))]:bg-rui-grey-50 dark:[:where(&>tr:nth-child(even))]:bg-rui-grey-900' },\n    },\n    rowVariant: {\n      selected: { tr: 'bg-rui-primary/[0.08] dark:bg-rui-dark-primary/[0.08]' },\n      empty: { tr: 'hover:bg-transparent' },\n      // `!border-t-0` drops the divider so the panel joins the row that opened it\n      expandable: { tr: 'bg-rui-grey-50 hover:bg-rui-grey-50 dark:bg-white/[0.03] dark:hover:bg-white/[0.03] !border-t-0' },\n      expandedParent: { tr: 'bg-rui-grey-50 dark:bg-white/[0.03]' },\n      group: { tr: 'bg-rui-grey-100 dark:bg-white/[0.05]' },\n    },\n    mobile: {\n      true: {\n        wrapper: 'divide-y-0 border-0 rounded-none overflow-visible',\n        scroller: 'overflow-visible [clip-path:none]',\n        table: 'block min-w-0 max-w-none w-full whitespace-normal divide-y-0 border-0',\n        tbody: 'block divide-y-0',\n        tr: 'block',\n        td: 'block px-4 py-2',\n      },\n    },\n  },\n  /**\n   * A fixed row height keeps a row of plain text as tall as one holding an\n   * icon button. Padding and floor sit in `:where()` so a consumer's `cellClass`\n   * (`py-0` is common) still wins at any stylesheet order, and each density\n   * sets its own because the class merger cannot dedupe these.\n   */\n  compoundVariants: [\n    { dense: false, mobile: false, class: { td: '[:where(&)]:py-3 [:where(&)]:h-[3.25rem]' } },\n    { dense: true, mobile: false, class: { td: '[:where(&)]:py-1 [:where(&)]:h-9' } },\n  ],\n  defaultVariants: {\n    dense: false,\n    mobile: false,\n  },\n});\n"],"mappings":";;AAEA,IAAa,kBAAkB,GAAG;CAChC,OAAO;EAEL,SAAS;EACT,UAAU;EACV,OAAO;EACP,OAAO;EACP,IAAI;EACJ,IAAI;EACJ,UAAU;EACV,aAAa;CACf;CACA,UAAU;EACR,UAAU,EACR,MAAM,EAAE,SAAS,sDAAsD,EACzE;EACA,SAAS;GACP,IAAI,EAAE,SAAS,mBAAmB;GAClC,IAAI,EAAE,SAAS,mBAAmB;GAClC,IAAI,EAAE,SAAS,iBAAiB;EAClC;EACA,OAAO;GACL,MAAM,CAAC;GACP,OAAO,CAAC;EACV;EAEA,SAAS,EACP,MAAM,EAAE,OAAO,oGAAoG,EACrH;EACA,YAAY;GACV,UAAU,EAAE,IAAI,wDAAwD;GACxE,OAAO,EAAE,IAAI,uBAAuB;GAEpC,YAAY,EAAE,IAAI,kGAAkG;GACpH,gBAAgB,EAAE,IAAI,sCAAsC;GAC5D,OAAO,EAAE,IAAI,uCAAuC;EACtD;EACA,QAAQ,EACN,MAAM;GACJ,SAAS;GACT,UAAU;GACV,OAAO;GACP,OAAO;GACP,IAAI;GACJ,IAAI;EACN,EACF;CACF;;;;;;;CAOA,kBAAkB,CAChB;EAAE,OAAO;EAAO,QAAQ;EAAO,OAAO,EAAE,IAAI,2CAA2C;CAAE,GACzF;EAAE,OAAO;EAAM,QAAQ;EAAO,OAAO,EAAE,IAAI,mCAAmC;CAAE,CAClF;CACA,iBAAiB;EACf,OAAO;EACP,QAAQ;CACV;AACF,CAAC"}
+{"version":3,"file":"data-table-styles.js","names":[],"sources":["../../../src/components/tables/data-table-styles.ts"],"sourcesContent":["import { tv } from '@/utils/tv';\n\n/** A 2px primary rail down the left edge of an open row and its panel; out of flow, so the cell keeps its padding. */\nconst OPEN_ROW_RAIL = '[&>td:first-child]:relative [&>td:first-child]:before:absolute [&>td:first-child]:before:inset-y-0 [&>td:first-child]:before:left-0 [&>td:first-child]:before:w-0.5 [&>td:first-child]:before:bg-rui-primary';\n\n/**\n * The band of an open row inside another table's panel: a step darker than the outer band, so the two\n * levels never share a grey while the rows between them keep the plain surface.\n */\nconst NESTED_BAND = '[[data-id=row-expanded]_&]:bg-rui-neutral-950/[0.11] dark:[[data-id=row-expanded]_&]:bg-white/[0.14]';\n\n/**\n * Header and pagination of a nested table, stepped by depth to stand off the band around them (about\n * 1.12:1 or more) as well as their own rows: past the lighter band one panel deep, short of the darker\n * band two deep. Nested bars never stick, so the tint can be translucent over the table's own surface.\n */\nexport const NESTED_BAR = '[[data-id=row-expanded]_&]:bg-rui-neutral-950/[0.13] dark:[[data-id=row-expanded]_&]:bg-white/[0.16] [[data-id=row-expanded]_[data-id=row-expanded]_&]:bg-rui-neutral-950/[0.06] dark:[[data-id=row-expanded]_[data-id=row-expanded]_&]:bg-white/[0.07]';\n\nexport const dataTableStyles = tv({\n  slots: {\n    // `clip`, not `hidden`, which may shrink the item below its rows; its own surface reads the same anywhere\n    wrapper: 'relative between:border-t between:border-b-0 between:border-rui-divider overflow-clip bg-rui-surface',\n    // focusable only while it scrolls with nothing to tab to (useKeyboardScroll), ring drawn inside\n    scroller: 'overflow-x-auto overflow-y-hidden [clip-path:inset(0_0_0_0)] outline-hidden focus-visible:focus-ring focus-visible:-outline-offset-2',\n    table: 'min-w-full table-fixed between:border-t between:border-b-0 between:border-rui-divider whitespace-nowrap mx-auto my-0 max-w-fit relative border-rui-divider',\n    tbody: 'between:border-t between:border-b-0 between:border-rui-divider',\n    tr: 'hover:bg-rui-hover',\n    // numbers line up in columns; no slashed zero, which in Inter reads as a second, monospace font beside zero-free values\n    td: '[:where(&)]:px-4 text-rui-text text-body-2 tabular-nums [text-wrap:initial]',\n    checkbox: 'px-2 w-[3.625rem] max-w-[3.625rem] [&_label]:ml-0',\n    tbodyLoader: 'text-center',\n    // tinted like the column header, the pair framing the body; opaque, so rows scroll behind a stuck bar\n    pagination: `bg-rui-surface-muted ${NESTED_BAR}`,\n  },\n  variants: {\n    sticky: {\n      true: { pagination: 'sticky bottom-0 z-rui-raised' },\n    },\n    outlined: {\n      true: { wrapper: 'border border-rui-divider' },\n    },\n    rounded: {\n      sm: { wrapper: 'rounded-rui-sm' },\n      md: { wrapper: 'rounded-rui-card' },\n      lg: { wrapper: 'rounded-rui-lg' },\n    },\n    dense: {\n      true: {},\n      false: {},\n    },\n    // a translucent tint under the hover one; `:where()` keeps it below every row state (selected, hover, expanded, group)\n    striped: {\n      true: { tbody: '[:where(&>tr:nth-child(even))]:bg-rui-neutral-950/[0.03] dark:[:where(&>tr:nth-child(even))]:bg-white/[0.04]' },\n    },\n    rowVariant: {\n      selected: { tr: 'bg-rui-primary-soft' },\n      empty: { tr: 'hover:bg-transparent' },\n      // a grey band darker than the header so the two never match, a step darker again inside another panel\n      expandable: { tr: `bg-rui-neutral-950/[0.07] hover:bg-rui-neutral-950/[0.07] dark:bg-white/[0.09] dark:hover:bg-white/[0.09] ${NESTED_BAND} [[data-id=row-expanded]_&]:hover:bg-rui-neutral-950/[0.11] dark:[[data-id=row-expanded]_&]:hover:bg-white/[0.14] ${OPEN_ROW_RAIL} !border-t-0` },\n      expandedParent: { tr: `bg-rui-neutral-950/[0.07] dark:bg-white/[0.09] ${NESTED_BAND} ${OPEN_ROW_RAIL}` },\n      group: { tr: 'bg-rui-neutral-100 dark:bg-white/[0.05]' },\n    },\n    mobile: {\n      true: {\n        wrapper: 'between:border-t-0 border-0 rounded-none overflow-visible',\n        scroller: 'overflow-visible [clip-path:none]',\n        table: 'block min-w-0 max-w-none w-full whitespace-normal between:border-t-0 border-0',\n        tbody: 'block between:border-t-0',\n        tr: 'block',\n        td: 'block px-4 py-2',\n      },\n    },\n  },\n  /**\n   * A fixed row height keeps a row of plain text as tall as one holding an\n   * icon button. Padding and floor sit in `:where()` so a consumer's `cellClass`\n   * (`py-0` is common) still wins at any stylesheet order, and each density\n   * sets its own because the class merger cannot dedupe these.\n   */\n  compoundVariants: [\n    // a 4px inset under the height floor fits a 36px button in a 44px row (a 28px one in a dense 36px row)\n    { dense: false, mobile: false, class: { td: '[:where(&)]:py-1 [:where(&)]:h-11' } },\n    { dense: true, mobile: false, class: { td: '[:where(&)]:py-1 [:where(&)]:h-9' } },\n  ],\n  defaultVariants: {\n    dense: false,\n    mobile: false,\n  },\n});\n"],"mappings":";;;AAGA,IAAM,gBAAgB;;;;;AAMtB,IAAM,cAAc;;;;;;AAOpB,IAAa,aAAa;AAE1B,IAAa,kBAAkB,GAAG;CAChC,OAAO;EAEL,SAAS;EAET,UAAU;EACV,OAAO;EACP,OAAO;EACP,IAAI;EAEJ,IAAI;EACJ,UAAU;EACV,aAAa;EAEb,YAAY,wBAAwB;CACtC;CACA,UAAU;EACR,QAAQ,EACN,MAAM,EAAE,YAAY,+BAA+B,EACrD;EACA,UAAU,EACR,MAAM,EAAE,SAAS,4BAA4B,EAC/C;EACA,SAAS;GACP,IAAI,EAAE,SAAS,iBAAiB;GAChC,IAAI,EAAE,SAAS,mBAAmB;GAClC,IAAI,EAAE,SAAS,iBAAiB;EAClC;EACA,OAAO;GACL,MAAM,CAAC;GACP,OAAO,CAAC;EACV;EAEA,SAAS,EACP,MAAM,EAAE,OAAO,+GAA+G,EAChI;EACA,YAAY;GACV,UAAU,EAAE,IAAI,sBAAsB;GACtC,OAAO,EAAE,IAAI,uBAAuB;GAEpC,YAAY,EAAE,IAAI,6GAA6G,YAAY,oHAAoH,cAAc,cAAc;GAC3R,gBAAgB,EAAE,IAAI,kDAAkD,YAAY,GAAG,gBAAgB;GACvG,OAAO,EAAE,IAAI,0CAA0C;EACzD;EACA,QAAQ,EACN,MAAM;GACJ,SAAS;GACT,UAAU;GACV,OAAO;GACP,OAAO;GACP,IAAI;GACJ,IAAI;EACN,EACF;CACF;;;;;;;CAOA,kBAAkB,CAEhB;EAAE,OAAO;EAAO,QAAQ;EAAO,OAAO,EAAE,IAAI,oCAAoC;CAAE,GAClF;EAAE,OAAO;EAAM,QAAQ;EAAO,OAAO,EAAE,IAAI,mCAAmC;CAAE,CAClF;CACA,iBAAiB;EACf,OAAO;EACP,QAAQ;CACV;AACF,CAAC"}

package/dist/components/tables/table_no_data_placeholder.js

@@ -1,5 +1,5 @@
 //#region src/components/tables/table_no_data_placeholder.svg
-var table_no_data_placeholder_default = "data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='152'%20height='124'%20fill='none'%3e%3ccircle%20cx='76'%20cy='58'%20r='52'%20fill='%23eaeaeb'/%3e%3cg%20fill='%23f2f2f3'%3e%3ccircle%20cx='21'%20cy='25'%20r='5'/%3e%3ccircle%20cx='18'%20cy='109'%20r='7'/%3e%3ccircle%20cx='145'%20cy='41'%20r='7'/%3e%3ccircle%20cx='134'%20cy='14'%20r='4'/%3e%3c/g%3e%3cg%20filter='url(%23B)'%3e%3cpath%20d='M76%2036.063l4.536-1.9-4.535%201.932V90.19l41.795-17.514V18.557l.204-.085-.204-.09v-.091l-.104.045L76.33%200%2034%2018.031l.2.086-.2%2053.899%2042%2018.141V36.063z'%20fill='%23fafafa'/%3e%3cpath%20d='M76%2036.063v54.095L34%2072.017l.2-53.899L76%2036.063z'%20fill='url(%23C)'/%3e%3cpath%20d='M76.001%2036.095V90.19l41.796-17.514V18.29L76.001%2036.095z'%20fill='url(%23D)'/%3e%3cpath%20d='M76%2036.063l42-17.592L76.33%200%2034%2018.031l42%2018.031z'%20fill='%23f2f2f3'/%3e%3cpath%20d='M49.832%2011.287l41.84%2018.211.38%2013.271%2011.706-4.83-.354-13.355L60.327%206.817l-10.495%204.47z'%20fill='%23eaeaeb'/%3e%3c/g%3e%3cmask%20id='A'%20maskUnits='userSpaceOnUse'%20x='52'%20y='68'%20width='48'%20height='48'%20mask-type='alpha'%3e%3cpath%20transform='translate(52%2068)'%20fill='url(%23E)'%20d='M0%200h48v48H0z'/%3e%3c/mask%3e%3cg%20mask='url(%23A)'%3e%3ccircle%20cx='76'%20cy='92'%20r='23.5'%20fill='%23fafafa'%20stroke='%23eaeaeb'/%3e%3c/g%3e%3crect%20x='60'%20y='76'%20width='32'%20height='32'%20rx='16'%20fill='%23000'%20fill-opacity='.3'/%3e%3cg%20clip-path='url(%23F)'%3e%3cpath%20d='M76%2088.667V92m0%203.333h.008M84.334%2092c0%204.602-3.731%208.333-8.333%208.333s-8.333-3.73-8.333-8.333%203.731-8.333%208.333-8.333%208.333%203.731%208.333%208.333z'%20stroke='%23fff'%20stroke-width='1.67'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3c/g%3e%3cdefs%3e%3cfilter%20id='B'%20x='14'%20y='0'%20width='124'%20height='130.19'%20filterUnits='userSpaceOnUse'%20color-interpolation-filters='sRGB'%3e%3cfeFlood%20flood-opacity='0'%20result='A'/%3e%3cfeColorMatrix%20in='SourceAlpha'%20values='0%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%20127%200'%20result='B'/%3e%3cfeMorphology%20radius='4'%20in='SourceAlpha'%20result='C'/%3e%3cfeOffset%20dy='8'/%3e%3cfeGaussianBlur%20stdDeviation='4'/%3e%3cfeComposite%20in2='B'%20operator='out'/%3e%3cfeColorMatrix%20values='0%200%200%200%200.0627451%200%200%200%200%200.0941176%200%200%200%200%200.156863%200%200%200%200.03%200'/%3e%3cfeBlend%20in2='A'%20result='C'/%3e%3cfeColorMatrix%20in='SourceAlpha'%20values='0%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%20127%200'%20result='B'/%3e%3cfeMorphology%20radius='4'%20in='SourceAlpha'/%3e%3cfeOffset%20dy='20'/%3e%3cfeGaussianBlur%20stdDeviation='12'/%3e%3cfeComposite%20in2='B'%20operator='out'/%3e%3cfeColorMatrix%20values='0%200%200%200%200.0627451%200%200%200%200%200.0941176%200%200%200%200%200.156863%200%200%200%200.08%200'/%3e%3cfeBlend%20in2='C'/%3e%3cfeBlend%20in='SourceGraphic'/%3e%3c/filter%3e%3clinearGradient%20id='C'%20x1='34'%20y1='72.289'%20x2='50.587'%20y2='27.367'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-color='%23dee1e8'/%3e%3cstop%20offset='1'%20stop-color='%23eff1f5'/%3e%3c/linearGradient%3e%3clinearGradient%20id='D'%20x1='76'%20y1='37.154'%20x2='123.359'%20y2='46.583'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-color='%23e4e7ec'/%3e%3cstop%20offset='1'%20stop-color='%23f2f4f7'/%3e%3c/linearGradient%3e%3clinearGradient%20id='E'%20x1='24'%20y1='0'%20x2='24'%20y2='48'%20gradientUnits='userSpaceOnUse'%3e%3cstop/%3e%3cstop%20offset='1'%20stop-opacity='0'/%3e%3c/linearGradient%3e%3cclipPath%20id='F'%3e%3cpath%20fill='%23fff'%20transform='translate(66%2082)'%20d='M0%200h20v20H0z'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e";
+var table_no_data_placeholder_default = "data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='152'%20height='124'%20fill='none'%3e%3ccircle%20cx='76'%20cy='58'%20r='52'%20fill='%23e4e4e7'/%3e%3cg%20fill='%23f4f4f5'%3e%3ccircle%20cx='21'%20cy='25'%20r='5'/%3e%3ccircle%20cx='18'%20cy='109'%20r='7'/%3e%3ccircle%20cx='145'%20cy='41'%20r='7'/%3e%3ccircle%20cx='134'%20cy='14'%20r='4'/%3e%3c/g%3e%3cg%20filter='url(%23B)'%3e%3cpath%20d='M76%2036.063l4.536-1.9-4.535%201.932V90.19l41.795-17.514V18.557l.204-.085-.204-.09v-.091l-.104.045L76.33%200%2034%2018.031l.2.086-.2%2053.899%2042%2018.141V36.063z'%20fill='%23fafafa'/%3e%3cpath%20d='M76%2036.063v54.095L34%2072.017l.2-53.899L76%2036.063z'%20fill='url(%23C)'/%3e%3cpath%20d='M76.001%2036.095V90.19l41.796-17.514V18.29L76.001%2036.095z'%20fill='url(%23D)'/%3e%3cpath%20d='M76%2036.063l42-17.592L76.33%200%2034%2018.031l42%2018.031z'%20fill='%23f4f4f5'/%3e%3cpath%20d='M49.832%2011.287l41.84%2018.211.38%2013.271%2011.706-4.83-.354-13.355L60.327%206.817l-10.495%204.47z'%20fill='%23e4e4e7'/%3e%3c/g%3e%3cmask%20id='A'%20maskUnits='userSpaceOnUse'%20x='52'%20y='68'%20width='48'%20height='48'%20mask-type='alpha'%3e%3cpath%20transform='translate(52%2068)'%20fill='url(%23E)'%20d='M0%200h48v48H0z'/%3e%3c/mask%3e%3cg%20mask='url(%23A)'%3e%3ccircle%20cx='76'%20cy='92'%20r='23.5'%20fill='%23fafafa'%20stroke='%23e4e4e7'/%3e%3c/g%3e%3crect%20x='60'%20y='76'%20width='32'%20height='32'%20rx='16'%20fill='%23000'%20fill-opacity='.3'/%3e%3cg%20clip-path='url(%23F)'%3e%3cpath%20d='M76%2088.667V92m0%203.333h.008M84.334%2092c0%204.602-3.731%208.333-8.333%208.333s-8.333-3.73-8.333-8.333%203.731-8.333%208.333-8.333%208.333%203.731%208.333%208.333z'%20stroke='%23fff'%20stroke-width='1.67'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3c/g%3e%3cdefs%3e%3cfilter%20id='B'%20x='14'%20y='0'%20width='124'%20height='130.19'%20filterUnits='userSpaceOnUse'%20color-interpolation-filters='sRGB'%3e%3cfeFlood%20flood-opacity='0'%20result='A'/%3e%3cfeColorMatrix%20in='SourceAlpha'%20values='0%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%20127%200'%20result='B'/%3e%3cfeMorphology%20radius='4'%20in='SourceAlpha'%20result='C'/%3e%3cfeOffset%20dy='8'/%3e%3cfeGaussianBlur%20stdDeviation='4'/%3e%3cfeComposite%20in2='B'%20operator='out'/%3e%3cfeColorMatrix%20values='0%200%200%200%200.0352941%200%200%200%200%200.0352941%200%200%200%200%200.0431373%200%200%200%200.03%200'/%3e%3cfeBlend%20in2='A'%20result='C'/%3e%3cfeColorMatrix%20in='SourceAlpha'%20values='0%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%20127%200'%20result='B'/%3e%3cfeMorphology%20radius='4'%20in='SourceAlpha'/%3e%3cfeOffset%20dy='20'/%3e%3cfeGaussianBlur%20stdDeviation='12'/%3e%3cfeComposite%20in2='B'%20operator='out'/%3e%3cfeColorMatrix%20values='0%200%200%200%200.0352941%200%200%200%200%200.0352941%200%200%200%200%200.0431373%200%200%200%200.08%200'/%3e%3cfeBlend%20in2='C'/%3e%3cfeBlend%20in='SourceGraphic'/%3e%3c/filter%3e%3clinearGradient%20id='C'%20x1='34'%20y1='72.289'%20x2='50.587'%20y2='27.367'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-color='%23e4e4e7'/%3e%3cstop%20offset='1'%20stop-color='%23f4f4f5'/%3e%3c/linearGradient%3e%3clinearGradient%20id='D'%20x1='76'%20y1='37.154'%20x2='123.359'%20y2='46.583'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-color='%23e4e4e7'/%3e%3cstop%20offset='1'%20stop-color='%23fafafa'/%3e%3c/linearGradient%3e%3clinearGradient%20id='E'%20x1='24'%20y1='0'%20x2='24'%20y2='48'%20gradientUnits='userSpaceOnUse'%3e%3cstop/%3e%3cstop%20offset='1'%20stop-opacity='0'/%3e%3c/linearGradient%3e%3cclipPath%20id='F'%3e%3cpath%20fill='%23fff'%20transform='translate(66%2082)'%20d='M0%200h20v20H0z'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e";
 //#endregion
 export { table_no_data_placeholder_default as default };
 

package/dist/components/tables/table_no_data_placeholder.js.map

@@ -1 +1 @@
-{"version":3,"file":"table_no_data_placeholder.js","names":[],"sources":["../../../src/components/tables/table_no_data_placeholder.svg"],"sourcesContent":["export default \"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='152'%20height='124'%20fill='none'%3e%3ccircle%20cx='76'%20cy='58'%20r='52'%20fill='%23eaeaeb'/%3e%3cg%20fill='%23f2f2f3'%3e%3ccircle%20cx='21'%20cy='25'%20r='5'/%3e%3ccircle%20cx='18'%20cy='109'%20r='7'/%3e%3ccircle%20cx='145'%20cy='41'%20r='7'/%3e%3ccircle%20cx='134'%20cy='14'%20r='4'/%3e%3c/g%3e%3cg%20filter='url(%23B)'%3e%3cpath%20d='M76%2036.063l4.536-1.9-4.535%201.932V90.19l41.795-17.514V18.557l.204-.085-.204-.09v-.091l-.104.045L76.33%200%2034%2018.031l.2.086-.2%2053.899%2042%2018.141V36.063z'%20fill='%23fafafa'/%3e%3cpath%20d='M76%2036.063v54.095L34%2072.017l.2-53.899L76%2036.063z'%20fill='url(%23C)'/%3e%3cpath%20d='M76.001%2036.095V90.19l41.796-17.514V18.29L76.001%2036.095z'%20fill='url(%23D)'/%3e%3cpath%20d='M76%2036.063l42-17.592L76.33%200%2034%2018.031l42%2018.031z'%20fill='%23f2f2f3'/%3e%3cpath%20d='M49.832%2011.287l41.84%2018.211.38%2013.271%2011.706-4.83-.354-13.355L60.327%206.817l-10.495%204.47z'%20fill='%23eaeaeb'/%3e%3c/g%3e%3cmask%20id='A'%20maskUnits='userSpaceOnUse'%20x='52'%20y='68'%20width='48'%20height='48'%20mask-type='alpha'%3e%3cpath%20transform='translate(52%2068)'%20fill='url(%23E)'%20d='M0%200h48v48H0z'/%3e%3c/mask%3e%3cg%20mask='url(%23A)'%3e%3ccircle%20cx='76'%20cy='92'%20r='23.5'%20fill='%23fafafa'%20stroke='%23eaeaeb'/%3e%3c/g%3e%3crect%20x='60'%20y='76'%20width='32'%20height='32'%20rx='16'%20fill='%23000'%20fill-opacity='.3'/%3e%3cg%20clip-path='url(%23F)'%3e%3cpath%20d='M76%2088.667V92m0%203.333h.008M84.334%2092c0%204.602-3.731%208.333-8.333%208.333s-8.333-3.73-8.333-8.333%203.731-8.333%208.333-8.333%208.333%203.731%208.333%208.333z'%20stroke='%23fff'%20stroke-width='1.67'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3c/g%3e%3cdefs%3e%3cfilter%20id='B'%20x='14'%20y='0'%20width='124'%20height='130.19'%20filterUnits='userSpaceOnUse'%20color-interpolation-filters='sRGB'%3e%3cfeFlood%20flood-opacity='0'%20result='A'/%3e%3cfeColorMatrix%20in='SourceAlpha'%20values='0%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%20127%200'%20result='B'/%3e%3cfeMorphology%20radius='4'%20in='SourceAlpha'%20result='C'/%3e%3cfeOffset%20dy='8'/%3e%3cfeGaussianBlur%20stdDeviation='4'/%3e%3cfeComposite%20in2='B'%20operator='out'/%3e%3cfeColorMatrix%20values='0%200%200%200%200.0627451%200%200%200%200%200.0941176%200%200%200%200%200.156863%200%200%200%200.03%200'/%3e%3cfeBlend%20in2='A'%20result='C'/%3e%3cfeColorMatrix%20in='SourceAlpha'%20values='0%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%20127%200'%20result='B'/%3e%3cfeMorphology%20radius='4'%20in='SourceAlpha'/%3e%3cfeOffset%20dy='20'/%3e%3cfeGaussianBlur%20stdDeviation='12'/%3e%3cfeComposite%20in2='B'%20operator='out'/%3e%3cfeColorMatrix%20values='0%200%200%200%200.0627451%200%200%200%200%200.0941176%200%200%200%200%200.156863%200%200%200%200.08%200'/%3e%3cfeBlend%20in2='C'/%3e%3cfeBlend%20in='SourceGraphic'/%3e%3c/filter%3e%3clinearGradient%20id='C'%20x1='34'%20y1='72.289'%20x2='50.587'%20y2='27.367'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-color='%23dee1e8'/%3e%3cstop%20offset='1'%20stop-color='%23eff1f5'/%3e%3c/linearGradient%3e%3clinearGradient%20id='D'%20x1='76'%20y1='37.154'%20x2='123.359'%20y2='46.583'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-color='%23e4e7ec'/%3e%3cstop%20offset='1'%20stop-color='%23f2f4f7'/%3e%3c/linearGradient%3e%3clinearGradient%20id='E'%20x1='24'%20y1='0'%20x2='24'%20y2='48'%20gradientUnits='userSpaceOnUse'%3e%3cstop/%3e%3cstop%20offset='1'%20stop-opacity='0'/%3e%3c/linearGradient%3e%3cclipPath%20id='F'%3e%3cpath%20fill='%23fff'%20transform='translate(66%2082)'%20d='M0%200h20v20H0z'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e\""],"mappings":";AAAA,IAAA,oCAAe"}
+{"version":3,"file":"table_no_data_placeholder.js","names":[],"sources":["../../../src/components/tables/table_no_data_placeholder.svg"],"sourcesContent":["export default \"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='152'%20height='124'%20fill='none'%3e%3ccircle%20cx='76'%20cy='58'%20r='52'%20fill='%23e4e4e7'/%3e%3cg%20fill='%23f4f4f5'%3e%3ccircle%20cx='21'%20cy='25'%20r='5'/%3e%3ccircle%20cx='18'%20cy='109'%20r='7'/%3e%3ccircle%20cx='145'%20cy='41'%20r='7'/%3e%3ccircle%20cx='134'%20cy='14'%20r='4'/%3e%3c/g%3e%3cg%20filter='url(%23B)'%3e%3cpath%20d='M76%2036.063l4.536-1.9-4.535%201.932V90.19l41.795-17.514V18.557l.204-.085-.204-.09v-.091l-.104.045L76.33%200%2034%2018.031l.2.086-.2%2053.899%2042%2018.141V36.063z'%20fill='%23fafafa'/%3e%3cpath%20d='M76%2036.063v54.095L34%2072.017l.2-53.899L76%2036.063z'%20fill='url(%23C)'/%3e%3cpath%20d='M76.001%2036.095V90.19l41.796-17.514V18.29L76.001%2036.095z'%20fill='url(%23D)'/%3e%3cpath%20d='M76%2036.063l42-17.592L76.33%200%2034%2018.031l42%2018.031z'%20fill='%23f4f4f5'/%3e%3cpath%20d='M49.832%2011.287l41.84%2018.211.38%2013.271%2011.706-4.83-.354-13.355L60.327%206.817l-10.495%204.47z'%20fill='%23e4e4e7'/%3e%3c/g%3e%3cmask%20id='A'%20maskUnits='userSpaceOnUse'%20x='52'%20y='68'%20width='48'%20height='48'%20mask-type='alpha'%3e%3cpath%20transform='translate(52%2068)'%20fill='url(%23E)'%20d='M0%200h48v48H0z'/%3e%3c/mask%3e%3cg%20mask='url(%23A)'%3e%3ccircle%20cx='76'%20cy='92'%20r='23.5'%20fill='%23fafafa'%20stroke='%23e4e4e7'/%3e%3c/g%3e%3crect%20x='60'%20y='76'%20width='32'%20height='32'%20rx='16'%20fill='%23000'%20fill-opacity='.3'/%3e%3cg%20clip-path='url(%23F)'%3e%3cpath%20d='M76%2088.667V92m0%203.333h.008M84.334%2092c0%204.602-3.731%208.333-8.333%208.333s-8.333-3.73-8.333-8.333%203.731-8.333%208.333-8.333%208.333%203.731%208.333%208.333z'%20stroke='%23fff'%20stroke-width='1.67'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3c/g%3e%3cdefs%3e%3cfilter%20id='B'%20x='14'%20y='0'%20width='124'%20height='130.19'%20filterUnits='userSpaceOnUse'%20color-interpolation-filters='sRGB'%3e%3cfeFlood%20flood-opacity='0'%20result='A'/%3e%3cfeColorMatrix%20in='SourceAlpha'%20values='0%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%20127%200'%20result='B'/%3e%3cfeMorphology%20radius='4'%20in='SourceAlpha'%20result='C'/%3e%3cfeOffset%20dy='8'/%3e%3cfeGaussianBlur%20stdDeviation='4'/%3e%3cfeComposite%20in2='B'%20operator='out'/%3e%3cfeColorMatrix%20values='0%200%200%200%200.0352941%200%200%200%200%200.0352941%200%200%200%200%200.0431373%200%200%200%200.03%200'/%3e%3cfeBlend%20in2='A'%20result='C'/%3e%3cfeColorMatrix%20in='SourceAlpha'%20values='0%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%20127%200'%20result='B'/%3e%3cfeMorphology%20radius='4'%20in='SourceAlpha'/%3e%3cfeOffset%20dy='20'/%3e%3cfeGaussianBlur%20stdDeviation='12'/%3e%3cfeComposite%20in2='B'%20operator='out'/%3e%3cfeColorMatrix%20values='0%200%200%200%200.0352941%200%200%200%200%200.0352941%200%200%200%200%200.0431373%200%200%200%200.08%200'/%3e%3cfeBlend%20in2='C'/%3e%3cfeBlend%20in='SourceGraphic'/%3e%3c/filter%3e%3clinearGradient%20id='C'%20x1='34'%20y1='72.289'%20x2='50.587'%20y2='27.367'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-color='%23e4e4e7'/%3e%3cstop%20offset='1'%20stop-color='%23f4f4f5'/%3e%3c/linearGradient%3e%3clinearGradient%20id='D'%20x1='76'%20y1='37.154'%20x2='123.359'%20y2='46.583'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-color='%23e4e4e7'/%3e%3cstop%20offset='1'%20stop-color='%23fafafa'/%3e%3c/linearGradient%3e%3clinearGradient%20id='E'%20x1='24'%20y1='0'%20x2='24'%20y2='48'%20gradientUnits='userSpaceOnUse'%3e%3cstop/%3e%3cstop%20offset='1'%20stop-opacity='0'/%3e%3c/linearGradient%3e%3cclipPath%20id='F'%3e%3cpath%20fill='%23fff'%20transform='translate(66%2082)'%20d='M0%200h20v20H0z'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e\""],"mappings":";AAAA,IAAA,oCAAe"}

package/dist/components/tables/table_no_data_placeholder_dark.js

@@ -1,5 +1,5 @@
 //#region src/components/tables/table_no_data_placeholder_dark.svg
-var table_no_data_placeholder_dark_default = "data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='152'%20height='124'%20fill='none'%3e%3ccircle%20cx='76'%20cy='58'%20r='52'%20fill='%23333741'/%3e%3cg%20fill='%231f242f'%3e%3ccircle%20cx='21'%20cy='25'%20r='5'/%3e%3ccircle%20cx='18'%20cy='109'%20r='7'/%3e%3ccircle%20cx='145'%20cy='41'%20r='7'/%3e%3ccircle%20cx='134'%20cy='14'%20r='4'/%3e%3c/g%3e%3cpath%20d='M76%2036.063l4.536-1.9-4.535%201.932V90.19l41.795-17.514V18.557l.204-.085-.204-.09v-.091l-.104.045L76.33%200%2034%2018.031l.2.086-.2%2053.899%2042%2018.141V36.063z'%20fill='%23fafafa'/%3e%3cpath%20d='M76%2036.063v54.095L34%2072.017l.2-53.899L76%2036.063z'%20fill='url(%23B)'/%3e%3cpath%20d='M76.001%2036.095V90.19l41.796-17.514V18.29L76.001%2036.095z'%20fill='url(%23C)'/%3e%3cpath%20d='M76%2036.063l42-17.592L76.33%200%2034%2018.031l42%2018.031z'%20fill='%231f242f'/%3e%3cpath%20d='M49.832%2011.287l41.84%2018.211.38%2013.271%2011.706-4.83-.354-13.355L60.327%206.817l-10.495%204.47z'%20fill='%23333741'/%3e%3cmask%20id='A'%20maskUnits='userSpaceOnUse'%20x='52'%20y='68'%20width='48'%20height='48'%20mask-type='alpha'%3e%3cpath%20transform='translate(52%2068)'%20fill='url(%23D)'%20d='M0%200h48v48H0z'/%3e%3c/mask%3e%3cg%20mask='url(%23A)'%3e%3ccircle%20cx='76'%20cy='92'%20r='23.5'%20fill='%23161b26'%20stroke='%23333741'/%3e%3c/g%3e%3crect%20x='60'%20y='76'%20width='32'%20height='32'%20rx='16'%20fill='%23161b26'/%3e%3cg%20clip-path='url(%23E)'%3e%3cpath%20d='M76%2088.667V92m0%203.333h.008M84.334%2092c0%204.602-3.731%208.333-8.333%208.333s-8.333-3.73-8.333-8.333%203.731-8.333%208.333-8.333%208.333%203.731%208.333%208.333z'%20stroke='%23fff'%20stroke-width='1.67'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3c/g%3e%3cdefs%3e%3clinearGradient%20id='B'%20x1='34'%20y1='72.289'%20x2='50.587'%20y2='27.367'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-color='%233b4354'/%3e%3cstop%20offset='1'%20stop-color='%231f242f'/%3e%3c/linearGradient%3e%3clinearGradient%20id='C'%20x1='76'%20y1='37.154'%20x2='123.359'%20y2='46.583'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-color='%233b4354'/%3e%3cstop%20offset='1'%20stop-color='%231f242f'/%3e%3c/linearGradient%3e%3clinearGradient%20id='D'%20x1='24'%20y1='0'%20x2='24'%20y2='48'%20gradientUnits='userSpaceOnUse'%3e%3cstop/%3e%3cstop%20offset='1'%20stop-opacity='0'/%3e%3c/linearGradient%3e%3cclipPath%20id='E'%3e%3cpath%20fill='%23fff'%20transform='translate(66%2082)'%20d='M0%200h20v20H0z'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e";
+var table_no_data_placeholder_dark_default = "data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='152'%20height='124'%20fill='none'%3e%3ccircle%20cx='76'%20cy='58'%20r='52'%20fill='%233f3f46'/%3e%3cg%20fill='%2327272a'%3e%3ccircle%20cx='21'%20cy='25'%20r='5'/%3e%3ccircle%20cx='18'%20cy='109'%20r='7'/%3e%3ccircle%20cx='145'%20cy='41'%20r='7'/%3e%3ccircle%20cx='134'%20cy='14'%20r='4'/%3e%3c/g%3e%3cpath%20d='M76%2036.063l4.536-1.9-4.535%201.932V90.19l41.795-17.514V18.557l.204-.085-.204-.09v-.091l-.104.045L76.33%200%2034%2018.031l.2.086-.2%2053.899%2042%2018.141V36.063z'%20fill='%23fafafa'/%3e%3cpath%20d='M76%2036.063v54.095L34%2072.017l.2-53.899L76%2036.063z'%20fill='url(%23B)'/%3e%3cpath%20d='M76.001%2036.095V90.19l41.796-17.514V18.29L76.001%2036.095z'%20fill='url(%23C)'/%3e%3cpath%20d='M76%2036.063l42-17.592L76.33%200%2034%2018.031l42%2018.031z'%20fill='%2327272a'/%3e%3cpath%20d='M49.832%2011.287l41.84%2018.211.38%2013.271%2011.706-4.83-.354-13.355L60.327%206.817l-10.495%204.47z'%20fill='%233f3f46'/%3e%3cmask%20id='A'%20maskUnits='userSpaceOnUse'%20x='52'%20y='68'%20width='48'%20height='48'%20mask-type='alpha'%3e%3cpath%20transform='translate(52%2068)'%20fill='url(%23D)'%20d='M0%200h48v48H0z'/%3e%3c/mask%3e%3cg%20mask='url(%23A)'%3e%3ccircle%20cx='76'%20cy='92'%20r='23.5'%20fill='%2318181b'%20stroke='%233f3f46'/%3e%3c/g%3e%3crect%20x='60'%20y='76'%20width='32'%20height='32'%20rx='16'%20fill='%2318181b'/%3e%3cg%20clip-path='url(%23E)'%3e%3cpath%20d='M76%2088.667V92m0%203.333h.008M84.334%2092c0%204.602-3.731%208.333-8.333%208.333s-8.333-3.73-8.333-8.333%203.731-8.333%208.333-8.333%208.333%203.731%208.333%208.333z'%20stroke='%23fff'%20stroke-width='1.67'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3c/g%3e%3cdefs%3e%3clinearGradient%20id='B'%20x1='34'%20y1='72.289'%20x2='50.587'%20y2='27.367'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-color='%2352525b'/%3e%3cstop%20offset='1'%20stop-color='%2327272a'/%3e%3c/linearGradient%3e%3clinearGradient%20id='C'%20x1='76'%20y1='37.154'%20x2='123.359'%20y2='46.583'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-color='%2352525b'/%3e%3cstop%20offset='1'%20stop-color='%2327272a'/%3e%3c/linearGradient%3e%3clinearGradient%20id='D'%20x1='24'%20y1='0'%20x2='24'%20y2='48'%20gradientUnits='userSpaceOnUse'%3e%3cstop/%3e%3cstop%20offset='1'%20stop-opacity='0'/%3e%3c/linearGradient%3e%3cclipPath%20id='E'%3e%3cpath%20fill='%23fff'%20transform='translate(66%2082)'%20d='M0%200h20v20H0z'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e";
 //#endregion
 export { table_no_data_placeholder_dark_default as default };
 

package/dist/components/tables/table_no_data_placeholder_dark.js.map

@@ -1 +1 @@
-{"version":3,"file":"table_no_data_placeholder_dark.js","names":[],"sources":["../../../src/components/tables/table_no_data_placeholder_dark.svg"],"sourcesContent":["export default \"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='152'%20height='124'%20fill='none'%3e%3ccircle%20cx='76'%20cy='58'%20r='52'%20fill='%23333741'/%3e%3cg%20fill='%231f242f'%3e%3ccircle%20cx='21'%20cy='25'%20r='5'/%3e%3ccircle%20cx='18'%20cy='109'%20r='7'/%3e%3ccircle%20cx='145'%20cy='41'%20r='7'/%3e%3ccircle%20cx='134'%20cy='14'%20r='4'/%3e%3c/g%3e%3cpath%20d='M76%2036.063l4.536-1.9-4.535%201.932V90.19l41.795-17.514V18.557l.204-.085-.204-.09v-.091l-.104.045L76.33%200%2034%2018.031l.2.086-.2%2053.899%2042%2018.141V36.063z'%20fill='%23fafafa'/%3e%3cpath%20d='M76%2036.063v54.095L34%2072.017l.2-53.899L76%2036.063z'%20fill='url(%23B)'/%3e%3cpath%20d='M76.001%2036.095V90.19l41.796-17.514V18.29L76.001%2036.095z'%20fill='url(%23C)'/%3e%3cpath%20d='M76%2036.063l42-17.592L76.33%200%2034%2018.031l42%2018.031z'%20fill='%231f242f'/%3e%3cpath%20d='M49.832%2011.287l41.84%2018.211.38%2013.271%2011.706-4.83-.354-13.355L60.327%206.817l-10.495%204.47z'%20fill='%23333741'/%3e%3cmask%20id='A'%20maskUnits='userSpaceOnUse'%20x='52'%20y='68'%20width='48'%20height='48'%20mask-type='alpha'%3e%3cpath%20transform='translate(52%2068)'%20fill='url(%23D)'%20d='M0%200h48v48H0z'/%3e%3c/mask%3e%3cg%20mask='url(%23A)'%3e%3ccircle%20cx='76'%20cy='92'%20r='23.5'%20fill='%23161b26'%20stroke='%23333741'/%3e%3c/g%3e%3crect%20x='60'%20y='76'%20width='32'%20height='32'%20rx='16'%20fill='%23161b26'/%3e%3cg%20clip-path='url(%23E)'%3e%3cpath%20d='M76%2088.667V92m0%203.333h.008M84.334%2092c0%204.602-3.731%208.333-8.333%208.333s-8.333-3.73-8.333-8.333%203.731-8.333%208.333-8.333%208.333%203.731%208.333%208.333z'%20stroke='%23fff'%20stroke-width='1.67'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3c/g%3e%3cdefs%3e%3clinearGradient%20id='B'%20x1='34'%20y1='72.289'%20x2='50.587'%20y2='27.367'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-color='%233b4354'/%3e%3cstop%20offset='1'%20stop-color='%231f242f'/%3e%3c/linearGradient%3e%3clinearGradient%20id='C'%20x1='76'%20y1='37.154'%20x2='123.359'%20y2='46.583'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-color='%233b4354'/%3e%3cstop%20offset='1'%20stop-color='%231f242f'/%3e%3c/linearGradient%3e%3clinearGradient%20id='D'%20x1='24'%20y1='0'%20x2='24'%20y2='48'%20gradientUnits='userSpaceOnUse'%3e%3cstop/%3e%3cstop%20offset='1'%20stop-opacity='0'/%3e%3c/linearGradient%3e%3cclipPath%20id='E'%3e%3cpath%20fill='%23fff'%20transform='translate(66%2082)'%20d='M0%200h20v20H0z'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e\""],"mappings":";AAAA,IAAA,yCAAe"}
+{"version":3,"file":"table_no_data_placeholder_dark.js","names":[],"sources":["../../../src/components/tables/table_no_data_placeholder_dark.svg"],"sourcesContent":["export default \"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='152'%20height='124'%20fill='none'%3e%3ccircle%20cx='76'%20cy='58'%20r='52'%20fill='%233f3f46'/%3e%3cg%20fill='%2327272a'%3e%3ccircle%20cx='21'%20cy='25'%20r='5'/%3e%3ccircle%20cx='18'%20cy='109'%20r='7'/%3e%3ccircle%20cx='145'%20cy='41'%20r='7'/%3e%3ccircle%20cx='134'%20cy='14'%20r='4'/%3e%3c/g%3e%3cpath%20d='M76%2036.063l4.536-1.9-4.535%201.932V90.19l41.795-17.514V18.557l.204-.085-.204-.09v-.091l-.104.045L76.33%200%2034%2018.031l.2.086-.2%2053.899%2042%2018.141V36.063z'%20fill='%23fafafa'/%3e%3cpath%20d='M76%2036.063v54.095L34%2072.017l.2-53.899L76%2036.063z'%20fill='url(%23B)'/%3e%3cpath%20d='M76.001%2036.095V90.19l41.796-17.514V18.29L76.001%2036.095z'%20fill='url(%23C)'/%3e%3cpath%20d='M76%2036.063l42-17.592L76.33%200%2034%2018.031l42%2018.031z'%20fill='%2327272a'/%3e%3cpath%20d='M49.832%2011.287l41.84%2018.211.38%2013.271%2011.706-4.83-.354-13.355L60.327%206.817l-10.495%204.47z'%20fill='%233f3f46'/%3e%3cmask%20id='A'%20maskUnits='userSpaceOnUse'%20x='52'%20y='68'%20width='48'%20height='48'%20mask-type='alpha'%3e%3cpath%20transform='translate(52%2068)'%20fill='url(%23D)'%20d='M0%200h48v48H0z'/%3e%3c/mask%3e%3cg%20mask='url(%23A)'%3e%3ccircle%20cx='76'%20cy='92'%20r='23.5'%20fill='%2318181b'%20stroke='%233f3f46'/%3e%3c/g%3e%3crect%20x='60'%20y='76'%20width='32'%20height='32'%20rx='16'%20fill='%2318181b'/%3e%3cg%20clip-path='url(%23E)'%3e%3cpath%20d='M76%2088.667V92m0%203.333h.008M84.334%2092c0%204.602-3.731%208.333-8.333%208.333s-8.333-3.73-8.333-8.333%203.731-8.333%208.333-8.333%208.333%203.731%208.333%208.333z'%20stroke='%23fff'%20stroke-width='1.67'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3c/g%3e%3cdefs%3e%3clinearGradient%20id='B'%20x1='34'%20y1='72.289'%20x2='50.587'%20y2='27.367'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-color='%2352525b'/%3e%3cstop%20offset='1'%20stop-color='%2327272a'/%3e%3c/linearGradient%3e%3clinearGradient%20id='C'%20x1='76'%20y1='37.154'%20x2='123.359'%20y2='46.583'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-color='%2352525b'/%3e%3cstop%20offset='1'%20stop-color='%2327272a'/%3e%3c/linearGradient%3e%3clinearGradient%20id='D'%20x1='24'%20y1='0'%20x2='24'%20y2='48'%20gradientUnits='userSpaceOnUse'%3e%3cstop/%3e%3cstop%20offset='1'%20stop-opacity='0'/%3e%3c/linearGradient%3e%3cclipPath%20id='E'%3e%3cpath%20fill='%23fff'%20transform='translate(66%2082)'%20d='M0%200h20v20H0z'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e\""],"mappings":";AAAA,IAAA,yCAAe"}

package/dist/components/tables/use-pagination-navigation.js

@@ -1,6 +1,6 @@
+import { get, set } from "../../vendor/@vueuse/shared/dist/index.js";
 import { formatInteger } from "../../utils/helpers.js";
 import { computed, toValue } from "vue";
-import { get, set } from "@vueuse/shared";
 //#region src/components/tables/use-pagination-navigation.ts
 function usePaginationNavigation(modelValue, tableDefaults, rangesThreshold = 500) {
 	const limits = computed(() => (get(modelValue).limits ?? get(tableDefaults.limits)).map((limit) => ({ limit })));

package/dist/components/tabs/tab/RuiTab.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiTab.js","names":[],"sources":["../../../../src/components/tabs/tab/RuiTab.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { RouteLocationRaw } from 'vue-router';\nimport type { ContextColorsType } from '@/consts/colors';\nimport type { VueClassValue } from '@/types/class-value';\nimport RuiButton from '@/components/buttons/button/RuiButton.vue';\nimport { TabAlignment, TabIndicatorPosition, TabLayout } from '@/components/tabs/tab-props';\nimport { useTabLink } from '@/components/tabs/tab/use-tab-link';\nimport { tv } from '@/utils/tv';\n\nexport interface RuiTabClassNames {\n  root?: VueClassValue;\n  active?: VueClassValue;\n}\n\nexport interface Props {\n  color?: ContextColorsType;\n  disabled?: boolean;\n  grow?: boolean;\n  value?: number | string;\n  active?: boolean;\n  classNames?: RuiTabClassNames;\n  /** @deprecated Use `classNames.active` instead */\n  activeClass?: string;\n  link?: boolean;\n  target?: string;\n  to?: RouteLocationRaw;\n  exact?: boolean;\n  /** @deprecated No longer used — vue-router's `useLink` handles route matching internally */\n  exactPath?: boolean;\n  vertical?: boolean;\n  align?: TabAlignment;\n  indicatorPosition?: TabIndicatorPosition;\n}\n\ndefineOptions({\n  name: 'RuiTab',\n  inheritAttrs: false,\n});\n\nconst {\n  color,\n  disabled = false,\n  grow = false,\n  value = useId(),\n  active = false,\n  classNames,\n  activeClass = '',\n  link = false,\n  to = '',\n  target = '_self',\n  exact = false,\n  vertical = false,\n  align = TabAlignment.center,\n  indicatorPosition = TabIndicatorPosition.end,\n} = defineProps<Props>();\n\nconst emit = defineEmits<{\n  click: [value: string | number];\n}>();\n\nconst slots = defineSlots<{\n  default?: (props?: object) => any;\n  prepend?: (props?: object) => any;\n  append?: (props?: object) => any;\n}>();\n\nconst tab = tv({\n  base: 'min-w-[5.625rem] max-w-[22.5rem] flex items-center rounded-none cursor-pointer relative whitespace-nowrap shrink-0 !px-4',\n  variants: {\n    layout: {\n      [TabLayout.horizontal]: '',\n      // `min-h` keeps the 48px floor of the horizontal layout while letting richer content grow instead of clipping\n      [TabLayout.vertical]: '!min-h-[3rem] w-full max-w-none',\n    },\n    align: {\n      start: 'justify-start text-left rtl:justify-end rtl:text-right',\n      center: 'justify-center text-center',\n      end: 'justify-end text-right rtl:justify-start rtl:text-left',\n    },\n    grow: {\n      true: 'grow max-w-none',\n    },\n    disabled: {\n      true: 'cursor-not-allowed',\n    },\n    active: {\n      true: '',\n      false: '',\n    },\n    indicatorPosition: {\n      start: '',\n      end: '',\n    },\n  },\n  compoundVariants: [\n    // Horizontal active indicator (bottom/top border)\n    { active: true, layout: TabLayout.horizontal, indicatorPosition: 'end', class: `after:content-[''] after:absolute after:border-current after:h-0 after:w-full after:bottom-0 after:left-0 after:border-b-2` },\n    { active: true, layout: TabLayout.horizontal, indicatorPosition: 'start', class: `after:content-[''] after:absolute after:border-current after:h-0 after:w-full after:top-0 after:left-0 after:border-b-2` },\n    // Vertical active indicator (right/left border)\n    { active: true, layout: TabLayout.vertical, indicatorPosition: 'end', class: `after:content-[''] after:absolute after:border-current after:h-full after:w-0 after:right-0 after:left-auto after:border-r-2` },\n    { active: true, layout: TabLayout.vertical, indicatorPosition: 'start', class: `after:content-[''] after:absolute after:border-current after:h-full after:w-0 after:left-0 after:right-auto after:border-r-2` },\n  ],\n  defaultVariants: { layout: TabLayout.horizontal, align: 'center', indicatorPosition: 'end', active: false },\n});\n\nconst { isRouteActive, href: linkHref, navigate, isLink } = useTabLink({\n  link: () => link,\n  to: () => to,\n  exact: () => exact,\n});\n\nconst layout = computed<TabLayout>(() => vertical ? TabLayout.vertical : TabLayout.horizontal);\nconst isSelf = computed<boolean>(() => target === '_self');\nconst isEffectivelyActive = computed<boolean>(() => active || get(isRouteActive));\n\nfunction onClick(event?: MouseEvent): void {\n  emit('click', value);\n  if (navigate && get(isSelf) && event)\n    navigate(event);\n}\n</script>\n\n<template>\n  <RuiButton\n    :class=\"[\n      tab({ layout, align, indicatorPosition, grow, disabled, active: isEffectivelyActive }),\n      isEffectivelyActive && (classNames?.active ?? activeClass),\n    ]\"\n    :data-active-tab=\"isEffectivelyActive || undefined\"\n    :data-align=\"align\"\n    :data-indicator-position=\"indicatorPosition\"\n    :data-vertical=\"vertical || undefined\"\n    :color=\"isEffectivelyActive ? color : undefined\"\n    :disabled=\"disabled\"\n    :href=\"isLink && !isSelf ? linkHref : undefined\"\n    :target=\"isLink ? target : undefined\"\n    :tag=\"isLink ? 'a' : undefined\"\n    :no-outline=\"isLink\"\n    role=\"tab\"\n    :aria-selected=\"isEffectivelyActive\"\n    tabindex=\"-1\"\n    hide-focus-indicator\n    variant=\"text\"\n    v-bind=\"$attrs\"\n    @click=\"disabled ? undefined : onClick($event)\"\n  >\n    <template\n      v-if=\"slots.prepend\"\n      #prepend\n    >\n      <slot name=\"prepend\" />\n    </template>\n    <slot />\n    <template\n      v-if=\"slots.append\"\n      #append\n    >\n      <slot name=\"append\" />\n    </template>\n  </RuiButton>\n</template>\n"],"mappings":""}
+{"version":3,"file":"RuiTab.js","names":[],"sources":["../../../../src/components/tabs/tab/RuiTab.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { RouteLocationRaw } from 'vue-router';\nimport type { ContextColorsType } from '@/consts/colors';\nimport type { VueClassValue } from '@/types/class-value';\nimport { TabAlignment, TabIndicatorPosition, TabLayout, TabVariant } from '@/components/tabs/tab-props';\nimport { useTabLink } from '@/components/tabs/tab/use-tab-link';\nimport { cn, tv } from '@/utils/tv';\n\nexport interface RuiTabClassNames {\n  root?: VueClassValue;\n  active?: VueClassValue;\n}\n\nexport interface Props {\n  color?: ContextColorsType;\n  disabled?: boolean;\n  grow?: boolean;\n  value?: number | string;\n  active?: boolean;\n  classNames?: RuiTabClassNames;\n  link?: boolean;\n  target?: string;\n  to?: RouteLocationRaw;\n  exact?: boolean;\n  vertical?: boolean;\n  align?: TabAlignment;\n  indicatorPosition?: TabIndicatorPosition;\n  variant?: TabVariant;\n}\n\ndefineOptions({\n  name: 'RuiTab',\n  inheritAttrs: false,\n});\n\nconst {\n  color,\n  disabled = false,\n  grow = false,\n  value = useId(),\n  active = false,\n  classNames,\n  link = false,\n  to = '',\n  target = '_self',\n  exact = false,\n  vertical = false,\n  align = TabAlignment.center,\n  indicatorPosition = TabIndicatorPosition.end,\n  variant = TabVariant.underline,\n} = defineProps<Props>();\n\nconst emit = defineEmits<{\n  click: [value: string | number];\n}>();\n\nconst slots = defineSlots<{\n  default?: (props?: object) => any;\n  prepend?: (props?: object) => any;\n  append?: (props?: object) => any;\n}>();\n\n/**\n * A tab is a plain button or link: RuiTabs draws the active indicator, so a tab\n * only sets its label color, and its hover fill. On the underline bar the fill\n * hugs the label rather than the 40px cell, so the bar stays calm.\n */\nconst tab = tv({\n  slots: {\n    root: [\n      'group relative inline-flex shrink-0 items-center whitespace-nowrap rounded-rui-control',\n      'text-sm font-medium text-rui-text-secondary transition-colors duration-150 [--rui-icon-size:1rem]',\n      // inset, since the scrolling bar would clip a ring drawn outside the tab\n      'outline-hidden focus-visible:focus-ring focus-visible:-outline-offset-2',\n    ].join(' '),\n    content: 'inline-flex items-center gap-2 rounded-rui-control transition-colors duration-150',\n  },\n  variants: {\n    variant: {\n      [TabVariant.underline]: { root: 'px-1', content: 'h-8 px-2' },\n      // above the sliding pill, which RuiTabs renders behind the tabs\n      [TabVariant.segmented]: { root: 'z-1 h-8 px-3' },\n    },\n    layout: {\n      [TabLayout.horizontal]: {},\n      [TabLayout.vertical]: { root: 'w-full' },\n    },\n    align: {\n      start: { root: 'justify-start text-left rtl:justify-end rtl:text-right' },\n      center: { root: 'justify-center text-center' },\n      end: { root: 'justify-end text-right rtl:justify-start rtl:text-left' },\n    },\n    grow: {\n      true: { root: 'grow' },\n    },\n    active: {\n      true: { root: 'text-rui-text' },\n      false: {},\n    },\n    disabled: {\n      true: { root: 'cursor-not-allowed text-rui-text-disabled' },\n      false: { root: 'cursor-pointer hover:text-rui-text' },\n    },\n  },\n  compoundVariants: [\n    { variant: TabVariant.underline, layout: TabLayout.horizontal, class: { root: 'h-10' } },\n    { variant: TabVariant.underline, layout: TabLayout.horizontal, disabled: false, class: { content: 'group-hover:bg-rui-hover' } },\n    // a vertical list fills the whole row on hover and keeps that fill on the selected row\n    { variant: TabVariant.underline, layout: TabLayout.vertical, class: { root: 'min-h-9 px-3', content: 'h-auto px-0 py-2' } },\n    { variant: TabVariant.underline, layout: TabLayout.vertical, disabled: false, class: { root: 'hover:bg-rui-hover' } },\n    { variant: TabVariant.underline, layout: TabLayout.vertical, active: true, class: { root: 'bg-rui-hover' } },\n  ],\n  defaultVariants: {\n    variant: TabVariant.underline,\n    layout: TabLayout.horizontal,\n    align: 'center',\n    active: false,\n    disabled: false,\n  },\n});\n\nconst { isRouteActive, href: linkHref, navigate, isLink } = useTabLink({\n  link: () => link,\n  to: () => to,\n  exact: () => exact,\n});\n\nconst layout = computed<TabLayout>(() => vertical ? TabLayout.vertical : TabLayout.horizontal);\nconst isSelf = computed<boolean>(() => target === '_self');\nconst isEffectivelyActive = computed<boolean>(() => active || get(isRouteActive));\nconst ui = computed<ReturnType<typeof tab>>(() => tab({\n  variant,\n  layout: get(layout),\n  align,\n  grow,\n  disabled,\n  active: get(isEffectivelyActive),\n}));\n\nfunction onClick(event: MouseEvent): void {\n  if (disabled) {\n    event.preventDefault();\n    return;\n  }\n\n  emit('click', value);\n  if (navigate && get(isSelf))\n    navigate(event);\n}\n</script>\n\n<template>\n  <component\n    :is=\"isLink ? 'a' : 'button'\"\n    :type=\"isLink ? undefined : 'button'\"\n    :class=\"[\n      ui.root({ class: cn(classNames?.root) }),\n      isEffectivelyActive && classNames?.active,\n    ]\"\n    :data-active-tab=\"isEffectivelyActive || undefined\"\n    :data-align=\"align\"\n    :data-indicator-position=\"indicatorPosition\"\n    :data-vertical=\"vertical || undefined\"\n    :data-variant=\"variant\"\n    :data-color=\"isEffectivelyActive ? color : undefined\"\n    :disabled=\"isLink ? undefined : disabled\"\n    :aria-disabled=\"isLink && disabled ? 'true' : undefined\"\n    :href=\"isLink && !isSelf && !disabled ? linkHref : undefined\"\n    :target=\"isLink ? target : undefined\"\n    role=\"tab\"\n    :aria-selected=\"isEffectivelyActive\"\n    :tabindex=\"isEffectivelyActive && !disabled ? 0 : -1\"\n    v-bind=\"$attrs\"\n    @click=\"onClick($event)\"\n  >\n    <span :class=\"ui.content()\">\n      <slot\n        v-if=\"slots.prepend\"\n        name=\"prepend\"\n      />\n      <slot />\n      <slot\n        v-if=\"slots.append\"\n        name=\"append\"\n      />\n    </span>\n  </component>\n</template>\n"],"mappings":""}

package/dist/components/tabs/tab/RuiTab.vue.d.ts

@@ -1,7 +1,7 @@
 import type { RouteLocationRaw } from 'vue-router';
 import type { ContextColorsType } from '../../../consts/colors.js';
 import type { VueClassValue } from '../../../types/class-value';
-import { TabAlignment, TabIndicatorPosition } from '../tab-props.js';
+import { TabAlignment, TabIndicatorPosition, TabVariant } from '../tab-props.js';
 export interface RuiTabClassNames {
     root?: VueClassValue;
     active?: VueClassValue;
@@ -13,17 +13,14 @@ export interface Props {
     value?: number | string;
     active?: boolean;
     classNames?: RuiTabClassNames;
-    /** @deprecated Use `classNames.active` instead */
-    activeClass?: string;
     link?: boolean;
     target?: string;
     to?: RouteLocationRaw;
     exact?: boolean;
-    /** @deprecated No longer used — vue-router's `useLink` handles route matching internally */
-    exactPath?: boolean;
     vertical?: boolean;
     align?: TabAlignment;
     indicatorPosition?: TabIndicatorPosition;
+    variant?: TabVariant;
 }
 type __VLS_Slots = {
     default?: (props?: object) => any;