@rotki/ui-library 2.25.0 → 2.26.0

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

@@ -16,9 +16,8 @@ export declare const dataTableStyles: import("tailwind-variants").TVReturnType<{
         };
     };
     dense: {
-        true: {
-            td: string;
-        };
+        true: {};
+        false: {};
     };
     striped: {
         true: {
@@ -35,6 +34,9 @@ export declare const dataTableStyles: import("tailwind-variants").TVReturnType<{
         expandable: {
             tr: string;
         };
+        expandedParent: {
+            tr: string;
+        };
         group: {
             tr: string;
         };
@@ -76,9 +78,8 @@ export declare const dataTableStyles: import("tailwind-variants").TVReturnType<{
         };
     };
     dense: {
-        true: {
-            td: string;
-        };
+        true: {};
+        false: {};
     };
     striped: {
         true: {
@@ -95,6 +96,9 @@ export declare const dataTableStyles: import("tailwind-variants").TVReturnType<{
         expandable: {
             tr: string;
         };
+        expandedParent: {
+            tr: string;
+        };
         group: {
             tr: string;
         };
@@ -136,9 +140,8 @@ export declare const dataTableStyles: import("tailwind-variants").TVReturnType<{
         };
     };
     dense: {
-        true: {
-            td: string;
-        };
+        true: {};
+        false: {};
     };
     striped: {
         true: {
@@ -155,6 +158,9 @@ export declare const dataTableStyles: import("tailwind-variants").TVReturnType<{
         expandable: {
             tr: string;
         };
+        expandedParent: {
+            tr: string;
+        };
         group: {
             tr: string;
         };

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

@@ -7,7 +7,7 @@ var dataTableStyles = tv({
 		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]",
-		td: "p-4 text-rui-text text-body-2 [text-wrap:initial]",
+		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"
 	},
@@ -18,13 +18,17 @@ var dataTableStyles = tv({
 			md: { wrapper: "rounded-[.75rem]" },
 			lg: { wrapper: "rounded-[1rem]" }
 		},
-		dense: { true: { td: "py-[0.38rem]" } },
-		striped: { true: { tbody: "even:[&>tr]:bg-rui-grey-50 dark:even:[&>tr]:bg-rui-grey-900" } },
+		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" } },
 		rowVariant: {
 			selected: { tr: "bg-rui-primary/[0.08] dark:bg-rui-dark-primary/[0.08]" },
 			empty: { tr: "hover:bg-transparent" },
-			expandable: { tr: "bg-[#f9fafb] hover:bg-[#f9fafb] dark:bg-[#121212] dark:hover:bg-[#121212]" },
-			group: { tr: "bg-black/[0.02] dark:bg-white/[0.02]" }
+			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]" }
 		},
 		mobile: { true: {
 			wrapper: "divide-y-0 border-0 rounded-none overflow-visible",
@@ -34,6 +38,25 @@ var dataTableStyles = tv({
 			tr: "block",
 			td: "block px-4 py-2"
 		} }
+	},
+	/**
+	* A fixed row height keeps a row of plain text as tall as one holding an
+	* icon button. Padding and floor sit in `:where()` so a consumer's `cellClass`
+	* (`py-0` is common) still wins at any stylesheet order, and each density
+	* sets its own because the class merger cannot dedupe these.
+	*/
+	compoundVariants: [{
+		dense: false,
+		mobile: false,
+		class: { td: "[:where(&)]:py-3 [:where(&)]:h-[3.25rem]" }
+	}, {
+		dense: true,
+		mobile: false,
+		class: { td: "[:where(&)]:py-1 [:where(&)]:h-9" }
+	}],
+	defaultVariants: {
+		dense: false,
+		mobile: false
 	}
 });
 //#endregion

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    wrapper: 'relative divide-y divide-black/[0.12] dark:divide-white/[0.12] overflow-hidden',\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: 'p-4 text-rui-text text-body-2 [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: { td: 'py-[0.38rem]' },\n    },\n    striped: {\n      true: { tbody: 'even:[&>tr]:bg-rui-grey-50 dark:even:[&>tr]: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      expandable: { tr: 'bg-[#f9fafb] hover:bg-[#f9fafb] dark:bg-[#121212] dark:hover:bg-[#121212]' },\n      group: { tr: 'bg-black/[0.02] dark:bg-white/[0.02]' },\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"],"mappings":";;AAEA,IAAa,kBAAkB,GAAG;CAChC,OAAO;EACL,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,EACL,MAAM,EAAE,IAAI,eAAe,EAC7B;EACA,SAAS,EACP,MAAM,EAAE,OAAO,8DAA8D,EAC/E;EACA,YAAY;GACV,UAAU,EAAE,IAAI,wDAAwD;GACxE,OAAO,EAAE,IAAI,uBAAuB;GACpC,YAAY,EAAE,IAAI,4EAA4E;GAC9F,OAAO,EAAE,IAAI,uCAAuC;EACtD;EACA,QAAQ,EACN,MAAM;GACJ,SAAS;GACT,UAAU;GACV,OAAO;GACP,OAAO;GACP,IAAI;GACJ,IAAI;EACN,EACF;CACF;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\nexport const dataTableStyles = tv({\n  slots: {\n    wrapper: 'relative divide-y divide-black/[0.12] dark:divide-white/[0.12] overflow-hidden',\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;EACL,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"}

package/dist/components/tables/table-props.d.ts

@@ -16,9 +16,8 @@ export declare const SortDirection: {
 export type SortDirection = (typeof SortDirection)[keyof typeof SortDirection];
 /**
  * Returns alignment Tailwind classes for a table cell.
- * When sortable, adds reduced padding for the sort button.
  */
-export declare function getAlignClass(align?: TableAlign, sortable?: boolean): string;
+export declare function getAlignClass(align?: TableAlign): string;
 /**
  * Returns extra class for sort button when column is center-aligned.
  */

package/dist/components/tables/table-props.js

@@ -17,19 +17,11 @@ var ALIGN_CLASSES = {
 	[TableAlign.center]: "text-center",
 	[TableAlign.end]: "text-right rtl:text-left"
 };
-var SORTABLE_ALIGN_CLASSES = {
-	[TableAlign.start]: "pl-3",
-	[TableAlign.center]: "px-3",
-	[TableAlign.end]: "pr-3"
-};
 /**
 * Returns alignment Tailwind classes for a table cell.
-* When sortable, adds reduced padding for the sort button.
 */
-function getAlignClass(align = TableAlign.start, sortable) {
-	const classes = ALIGN_CLASSES[align];
-	if (sortable) return `${classes} ${SORTABLE_ALIGN_CLASSES[align]}`;
-	return classes;
+function getAlignClass(align = TableAlign.start) {
+	return ALIGN_CLASSES[align];
 }
 /**
 * Returns extra class for sort button when column is center-aligned.

package/dist/components/tables/table-props.js.map

@@ -1 +1 @@
-{"version":3,"file":"table-props.js","names":[],"sources":["../../../src/components/tables/table-props.ts"],"sourcesContent":["export const TableAlign = {\n  start: 'start',\n  center: 'center',\n  end: 'end',\n} as const;\n\nexport type TableAlign = (typeof TableAlign)[keyof typeof TableAlign];\n\nexport const GroupExpandButtonPosition = {\n  start: 'start',\n  end: 'end',\n} as const;\n\nexport type GroupExpandButtonPosition = (typeof GroupExpandButtonPosition)[keyof typeof GroupExpandButtonPosition];\n\nexport const SortDirection = {\n  asc: 'asc',\n  desc: 'desc',\n} as const;\n\nexport type SortDirection = (typeof SortDirection)[keyof typeof SortDirection];\n\nconst ALIGN_CLASSES: Record<TableAlign, string> = {\n  [TableAlign.start]: 'text-left rtl:text-right',\n  [TableAlign.center]: 'text-center',\n  [TableAlign.end]: 'text-right rtl:text-left',\n};\n\nconst SORTABLE_ALIGN_CLASSES: Record<TableAlign, string> = {\n  [TableAlign.start]: 'pl-3',\n  [TableAlign.center]: 'px-3',\n  [TableAlign.end]: 'pr-3',\n};\n\n/**\n * Returns alignment Tailwind classes for a table cell.\n * When sortable, adds reduced padding for the sort button.\n */\nexport function getAlignClass(align: TableAlign = TableAlign.start, sortable?: boolean): string {\n  const classes = ALIGN_CLASSES[align];\n  if (sortable)\n    return `${classes} ${SORTABLE_ALIGN_CLASSES[align]}`;\n  return classes;\n}\n\n/**\n * Returns extra class for sort button when column is center-aligned.\n */\nexport function getSortButtonAlignClass(align: TableAlign = TableAlign.start): string | undefined {\n  return align === TableAlign.center ? 'ml-6' : undefined;\n}\n"],"mappings":";AAAA,IAAa,aAAa;CACxB,OAAO;CACP,QAAQ;CACR,KAAK;AACP;AAIA,IAAa,4BAA4B;CACvC,OAAO;CACP,KAAK;AACP;AAIA,IAAa,gBAAgB;CAC3B,KAAK;CACL,MAAM;AACR;AAIA,IAAM,gBAA4C;EAC/C,WAAW,QAAQ;EACnB,WAAW,SAAS;EACpB,WAAW,MAAM;AACpB;AAEA,IAAM,yBAAqD;EACxD,WAAW,QAAQ;EACnB,WAAW,SAAS;EACpB,WAAW,MAAM;AACpB;;;;;AAMA,SAAgB,cAAc,QAAoB,WAAW,OAAO,UAA4B;CAC9F,MAAM,UAAU,cAAc;CAC9B,IAAI,UACF,OAAO,GAAG,QAAQ,GAAG,uBAAuB;CAC9C,OAAO;AACT;;;;AAKA,SAAgB,wBAAwB,QAAoB,WAAW,OAA2B;CAChG,OAAO,UAAU,WAAW,SAAS,SAAS,KAAA;AAChD"}
+{"version":3,"file":"table-props.js","names":[],"sources":["../../../src/components/tables/table-props.ts"],"sourcesContent":["export const TableAlign = {\n  start: 'start',\n  center: 'center',\n  end: 'end',\n} as const;\n\nexport type TableAlign = (typeof TableAlign)[keyof typeof TableAlign];\n\nexport const GroupExpandButtonPosition = {\n  start: 'start',\n  end: 'end',\n} as const;\n\nexport type GroupExpandButtonPosition = (typeof GroupExpandButtonPosition)[keyof typeof GroupExpandButtonPosition];\n\nexport const SortDirection = {\n  asc: 'asc',\n  desc: 'desc',\n} as const;\n\nexport type SortDirection = (typeof SortDirection)[keyof typeof SortDirection];\n\nconst ALIGN_CLASSES: Record<TableAlign, string> = {\n  [TableAlign.start]: 'text-left rtl:text-right',\n  [TableAlign.center]: 'text-center',\n  [TableAlign.end]: 'text-right rtl:text-left',\n};\n\n/**\n * Returns alignment Tailwind classes for a table cell.\n */\nexport function getAlignClass(align: TableAlign = TableAlign.start): string {\n  return ALIGN_CLASSES[align];\n}\n\n/**\n * Returns extra class for sort button when column is center-aligned.\n */\nexport function getSortButtonAlignClass(align: TableAlign = TableAlign.start): string | undefined {\n  return align === TableAlign.center ? 'ml-6' : undefined;\n}\n"],"mappings":";AAAA,IAAa,aAAa;CACxB,OAAO;CACP,QAAQ;CACR,KAAK;AACP;AAIA,IAAa,4BAA4B;CACvC,OAAO;CACP,KAAK;AACP;AAIA,IAAa,gBAAgB;CAC3B,KAAK;CACL,MAAM;AACR;AAIA,IAAM,gBAA4C;EAC/C,WAAW,QAAQ;EACnB,WAAW,SAAS;EACpB,WAAW,MAAM;AACpB;;;;AAKA,SAAgB,cAAc,QAAoB,WAAW,OAAe;CAC1E,OAAO,cAAc;AACvB;;;;AAKA,SAAgB,wBAAwB,QAAoB,WAAW,OAA2B;CAChG,OAAO,UAAU,WAAW,SAAS,SAAS,KAAA;AAChD"}

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

@@ -21,7 +21,7 @@ function usePaginationNavigation(modelValue, tableDefaults, rangesThreshold = 50
 		const { limit, total } = get(modelValue);
 		const start = (page - 1) * limit + 1;
 		const end = Math.min(page * limit, total);
-		return `${formatInteger(start)} - ${formatInteger(end)}`;
+		return `${formatInteger(start)}–${formatInteger(end)}`;
 	}
 	const useInputJump = computed(() => {
 		const threshold = toValue(rangesThreshold);

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

@@ -1 +1 @@
-{"version":3,"file":"use-pagination-navigation.js","names":[],"sources":["../../../src/components/tables/use-pagination-navigation.ts"],"sourcesContent":["import type { ComputedRef, MaybeRefOrGetter, Ref, WritableComputedRef } from 'vue';\nimport type { TableOptions } from '@/composables/defaults/table';\nimport { formatInteger } from '@/utils/helpers';\n\ninterface LimitEntry { limit: number }\n\ninterface PageRange { page: number; text: string }\n\nexport interface TablePaginationData {\n  page: number;\n  total: number;\n  limit: number;\n  limits?: number[];\n}\n\nexport interface UsePaginationNavigationReturn {\n  limits: ComputedRef<LimitEntry[]>;\n  currentLimit: WritableComputedRef<number>;\n  pages: ComputedRef<number>;\n  ranges: ComputedRef<PageRange[]>;\n  indicatorText: ComputedRef<string>;\n  currentRange: WritableComputedRef<number>;\n  useInputJump: ComputedRef<boolean>;\n  hasPrev: ComputedRef<boolean>;\n  hasNext: ComputedRef<boolean>;\n  onPrev: () => void;\n  onNext: () => void;\n  onFirst: () => void;\n  onLast: () => void;\n}\n\nexport function usePaginationNavigation(\n  modelValue: Ref<TablePaginationData>,\n  tableDefaults: TableOptions,\n  rangesThreshold: MaybeRefOrGetter<number> = 500,\n): UsePaginationNavigationReturn {\n  const limits = computed<LimitEntry[]>(() =>\n    (get(modelValue).limits ?? get(tableDefaults.limits)).map(limit => ({ limit })),\n  );\n\n  const currentLimit = computed<number>({\n    get: () => get(modelValue).limit,\n    set: limit =>\n      set(modelValue, {\n        ...get(modelValue),\n        limit,\n        page: 1,\n      }),\n  });\n\n  const pages = computed<number>(() => {\n    const { limit, total } = get(modelValue);\n    if (!total)\n      return 0;\n\n    return Math.ceil(total / limit);\n  });\n\n  function pageRangeText(page: number): string {\n    const { limit, total } = get(modelValue);\n    const start = (page - 1) * limit + 1;\n    const end = Math.min(page * limit, total);\n    return `${formatInteger(start)} - ${formatInteger(end)}`;\n  }\n\n  const useInputJump = computed<boolean>(() => {\n    const threshold = toValue(rangesThreshold);\n    return threshold > 0 && get(pages) > threshold;\n  });\n\n  const ranges = computed<PageRange[]>(() => {\n    if (get(useInputJump))\n      return [];\n\n    return Array.from({ length: get(pages) }, (_, i) => {\n      const page = i + 1;\n      return { page, text: pageRangeText(page) };\n    });\n  });\n\n  const indicatorText = computed<string>(() => {\n    const { total } = get(modelValue);\n    if (get(useInputJump))\n      return `of ${formatInteger(get(pages))}`;\n\n    return total ? `of ${formatInteger(total)}` : `0 of 0`;\n  });\n\n  const currentRange = computed<number>({\n    get: () => get(modelValue).page,\n    set: page =>\n      set(modelValue, {\n        ...get(modelValue),\n        page,\n      }),\n  });\n\n  const hasPrev = computed<boolean>(() => get(modelValue).page > 1);\n  const hasNext = computed<boolean>(() => get(pages) > get(modelValue).page);\n\n  function goToPage(page: number): void {\n    set(currentRange, page);\n  }\n\n  function onPrev(): void {\n    if (get(hasPrev))\n      goToPage(get(modelValue).page - 1);\n  }\n\n  function onNext(): void {\n    if (get(hasNext))\n      goToPage(get(modelValue).page + 1);\n  }\n\n  function onFirst(): void {\n    if (get(hasPrev))\n      goToPage(1);\n  }\n\n  function onLast(): void {\n    if (get(hasNext))\n      goToPage(get(pages));\n  }\n\n  return {\n    limits,\n    currentLimit,\n    pages,\n    ranges,\n    indicatorText,\n    currentRange,\n    useInputJump,\n    hasPrev,\n    hasNext,\n    onPrev,\n    onNext,\n    onFirst,\n    onLast,\n  };\n}\n"],"mappings":";;;;AA+BA,SAAgB,wBACd,YACA,eACA,kBAA4C,KACb;CAC/B,MAAM,SAAS,gBACZ,IAAI,UAAU,CAAC,CAAC,UAAU,IAAI,cAAc,MAAM,EAAA,CAAG,KAAI,WAAU,EAAE,MAAM,EAAE,CAChF;CAEA,MAAM,eAAe,SAAiB;EACpC,WAAW,IAAI,UAAU,CAAC,CAAC;EAC3B,MAAK,UACH,IAAI,YAAY;GACd,GAAG,IAAI,UAAU;GACjB;GACA,MAAM;EACR,CAAC;CACL,CAAC;CAED,MAAM,QAAQ,eAAuB;EACnC,MAAM,EAAE,OAAO,UAAU,IAAI,UAAU;EACvC,IAAI,CAAC,OACH,OAAO;EAET,OAAO,KAAK,KAAK,QAAQ,KAAK;CAChC,CAAC;CAED,SAAS,cAAc,MAAsB;EAC3C,MAAM,EAAE,OAAO,UAAU,IAAI,UAAU;EACvC,MAAM,SAAS,OAAO,KAAK,QAAQ;EACnC,MAAM,MAAM,KAAK,IAAI,OAAO,OAAO,KAAK;EACxC,OAAO,GAAG,cAAc,KAAK,EAAE,KAAK,cAAc,GAAG;CACvD;CAEA,MAAM,eAAe,eAAwB;EAC3C,MAAM,YAAY,QAAQ,eAAe;EACzC,OAAO,YAAY,KAAK,IAAI,KAAK,IAAI;CACvC,CAAC;CAED,MAAM,SAAS,eAA4B;EACzC,IAAI,IAAI,YAAY,GAClB,OAAO,CAAC;EAEV,OAAO,MAAM,KAAK,EAAE,QAAQ,IAAI,KAAK,EAAE,IAAI,GAAG,MAAM;GAClD,MAAM,OAAO,IAAI;GACjB,OAAO;IAAE;IAAM,MAAM,cAAc,IAAI;GAAE;EAC3C,CAAC;CACH,CAAC;CAED,MAAM,gBAAgB,eAAuB;EAC3C,MAAM,EAAE,UAAU,IAAI,UAAU;EAChC,IAAI,IAAI,YAAY,GAClB,OAAO,MAAM,cAAc,IAAI,KAAK,CAAC;EAEvC,OAAO,QAAQ,MAAM,cAAc,KAAK,MAAM;CAChD,CAAC;CAED,MAAM,eAAe,SAAiB;EACpC,WAAW,IAAI,UAAU,CAAC,CAAC;EAC3B,MAAK,SACH,IAAI,YAAY;GACd,GAAG,IAAI,UAAU;GACjB;EACF,CAAC;CACL,CAAC;CAED,MAAM,UAAU,eAAwB,IAAI,UAAU,CAAC,CAAC,OAAO,CAAC;CAChE,MAAM,UAAU,eAAwB,IAAI,KAAK,IAAI,IAAI,UAAU,CAAC,CAAC,IAAI;CAEzE,SAAS,SAAS,MAAoB;EACpC,IAAI,cAAc,IAAI;CACxB;CAEA,SAAS,SAAe;EACtB,IAAI,IAAI,OAAO,GACb,SAAS,IAAI,UAAU,CAAC,CAAC,OAAO,CAAC;CACrC;CAEA,SAAS,SAAe;EACtB,IAAI,IAAI,OAAO,GACb,SAAS,IAAI,UAAU,CAAC,CAAC,OAAO,CAAC;CACrC;CAEA,SAAS,UAAgB;EACvB,IAAI,IAAI,OAAO,GACb,SAAS,CAAC;CACd;CAEA,SAAS,SAAe;EACtB,IAAI,IAAI,OAAO,GACb,SAAS,IAAI,KAAK,CAAC;CACvB;CAEA,OAAO;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;AACF"}
+{"version":3,"file":"use-pagination-navigation.js","names":[],"sources":["../../../src/components/tables/use-pagination-navigation.ts"],"sourcesContent":["import type { ComputedRef, MaybeRefOrGetter, Ref, WritableComputedRef } from 'vue';\nimport type { TableOptions } from '@/composables/defaults/table';\nimport { formatInteger } from '@/utils/helpers';\n\ninterface LimitEntry { limit: number }\n\ninterface PageRange { page: number; text: string }\n\nexport interface TablePaginationData {\n  page: number;\n  total: number;\n  limit: number;\n  limits?: number[];\n}\n\nexport interface UsePaginationNavigationReturn {\n  limits: ComputedRef<LimitEntry[]>;\n  currentLimit: WritableComputedRef<number>;\n  pages: ComputedRef<number>;\n  ranges: ComputedRef<PageRange[]>;\n  indicatorText: ComputedRef<string>;\n  currentRange: WritableComputedRef<number>;\n  useInputJump: ComputedRef<boolean>;\n  hasPrev: ComputedRef<boolean>;\n  hasNext: ComputedRef<boolean>;\n  onPrev: () => void;\n  onNext: () => void;\n  onFirst: () => void;\n  onLast: () => void;\n}\n\nexport function usePaginationNavigation(\n  modelValue: Ref<TablePaginationData>,\n  tableDefaults: TableOptions,\n  rangesThreshold: MaybeRefOrGetter<number> = 500,\n): UsePaginationNavigationReturn {\n  const limits = computed<LimitEntry[]>(() =>\n    (get(modelValue).limits ?? get(tableDefaults.limits)).map(limit => ({ limit })),\n  );\n\n  const currentLimit = computed<number>({\n    get: () => get(modelValue).limit,\n    set: limit =>\n      set(modelValue, {\n        ...get(modelValue),\n        limit,\n        page: 1,\n      }),\n  });\n\n  const pages = computed<number>(() => {\n    const { limit, total } = get(modelValue);\n    if (!total)\n      return 0;\n\n    return Math.ceil(total / limit);\n  });\n\n  function pageRangeText(page: number): string {\n    const { limit, total } = get(modelValue);\n    const start = (page - 1) * limit + 1;\n    const end = Math.min(page * limit, total);\n    return `${formatInteger(start)}–${formatInteger(end)}`;\n  }\n\n  const useInputJump = computed<boolean>(() => {\n    const threshold = toValue(rangesThreshold);\n    return threshold > 0 && get(pages) > threshold;\n  });\n\n  const ranges = computed<PageRange[]>(() => {\n    if (get(useInputJump))\n      return [];\n\n    return Array.from({ length: get(pages) }, (_, i) => {\n      const page = i + 1;\n      return { page, text: pageRangeText(page) };\n    });\n  });\n\n  const indicatorText = computed<string>(() => {\n    const { total } = get(modelValue);\n    if (get(useInputJump))\n      return `of ${formatInteger(get(pages))}`;\n\n    return total ? `of ${formatInteger(total)}` : `0 of 0`;\n  });\n\n  const currentRange = computed<number>({\n    get: () => get(modelValue).page,\n    set: page =>\n      set(modelValue, {\n        ...get(modelValue),\n        page,\n      }),\n  });\n\n  const hasPrev = computed<boolean>(() => get(modelValue).page > 1);\n  const hasNext = computed<boolean>(() => get(pages) > get(modelValue).page);\n\n  function goToPage(page: number): void {\n    set(currentRange, page);\n  }\n\n  function onPrev(): void {\n    if (get(hasPrev))\n      goToPage(get(modelValue).page - 1);\n  }\n\n  function onNext(): void {\n    if (get(hasNext))\n      goToPage(get(modelValue).page + 1);\n  }\n\n  function onFirst(): void {\n    if (get(hasPrev))\n      goToPage(1);\n  }\n\n  function onLast(): void {\n    if (get(hasNext))\n      goToPage(get(pages));\n  }\n\n  return {\n    limits,\n    currentLimit,\n    pages,\n    ranges,\n    indicatorText,\n    currentRange,\n    useInputJump,\n    hasPrev,\n    hasNext,\n    onPrev,\n    onNext,\n    onFirst,\n    onLast,\n  };\n}\n"],"mappings":";;;;AA+BA,SAAgB,wBACd,YACA,eACA,kBAA4C,KACb;CAC/B,MAAM,SAAS,gBACZ,IAAI,UAAU,CAAC,CAAC,UAAU,IAAI,cAAc,MAAM,EAAA,CAAG,KAAI,WAAU,EAAE,MAAM,EAAE,CAChF;CAEA,MAAM,eAAe,SAAiB;EACpC,WAAW,IAAI,UAAU,CAAC,CAAC;EAC3B,MAAK,UACH,IAAI,YAAY;GACd,GAAG,IAAI,UAAU;GACjB;GACA,MAAM;EACR,CAAC;CACL,CAAC;CAED,MAAM,QAAQ,eAAuB;EACnC,MAAM,EAAE,OAAO,UAAU,IAAI,UAAU;EACvC,IAAI,CAAC,OACH,OAAO;EAET,OAAO,KAAK,KAAK,QAAQ,KAAK;CAChC,CAAC;CAED,SAAS,cAAc,MAAsB;EAC3C,MAAM,EAAE,OAAO,UAAU,IAAI,UAAU;EACvC,MAAM,SAAS,OAAO,KAAK,QAAQ;EACnC,MAAM,MAAM,KAAK,IAAI,OAAO,OAAO,KAAK;EACxC,OAAO,GAAG,cAAc,KAAK,EAAE,GAAG,cAAc,GAAG;CACrD;CAEA,MAAM,eAAe,eAAwB;EAC3C,MAAM,YAAY,QAAQ,eAAe;EACzC,OAAO,YAAY,KAAK,IAAI,KAAK,IAAI;CACvC,CAAC;CAED,MAAM,SAAS,eAA4B;EACzC,IAAI,IAAI,YAAY,GAClB,OAAO,CAAC;EAEV,OAAO,MAAM,KAAK,EAAE,QAAQ,IAAI,KAAK,EAAE,IAAI,GAAG,MAAM;GAClD,MAAM,OAAO,IAAI;GACjB,OAAO;IAAE;IAAM,MAAM,cAAc,IAAI;GAAE;EAC3C,CAAC;CACH,CAAC;CAED,MAAM,gBAAgB,eAAuB;EAC3C,MAAM,EAAE,UAAU,IAAI,UAAU;EAChC,IAAI,IAAI,YAAY,GAClB,OAAO,MAAM,cAAc,IAAI,KAAK,CAAC;EAEvC,OAAO,QAAQ,MAAM,cAAc,KAAK,MAAM;CAChD,CAAC;CAED,MAAM,eAAe,SAAiB;EACpC,WAAW,IAAI,UAAU,CAAC,CAAC;EAC3B,MAAK,SACH,IAAI,YAAY;GACd,GAAG,IAAI,UAAU;GACjB;EACF,CAAC;CACL,CAAC;CAED,MAAM,UAAU,eAAwB,IAAI,UAAU,CAAC,CAAC,OAAO,CAAC;CAChE,MAAM,UAAU,eAAwB,IAAI,KAAK,IAAI,IAAI,UAAU,CAAC,CAAC,IAAI;CAEzE,SAAS,SAAS,MAAoB;EACpC,IAAI,cAAc,IAAI;CACxB;CAEA,SAAS,SAAe;EACtB,IAAI,IAAI,OAAO,GACb,SAAS,IAAI,UAAU,CAAC,CAAC,OAAO,CAAC;CACrC;CAEA,SAAS,SAAe;EACtB,IAAI,IAAI,OAAO,GACb,SAAS,IAAI,UAAU,CAAC,CAAC,OAAO,CAAC;CACrC;CAEA,SAAS,UAAgB;EACvB,IAAI,IAAI,OAAO,GACb,SAAS,CAAC;CACd;CAEA,SAAS,SAAe;EACtB,IAAI,IAAI,OAAO,GACb,SAAS,IAAI,KAAK,CAAC;CACvB;CAEA,OAAO;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;AACF"}

package/dist/i18n/keys.d.ts

@@ -9,6 +9,7 @@ export declare const RUI_I18N_KEYS: {
         readonly label: "rui.date_time_picker.label";
         readonly now: "rui.date_time_picker.now";
         readonly openCalendar: "rui.date_time_picker.open_calendar";
+        readonly pasteUnreadable: "rui.date_time_picker.paste_unreadable";
         readonly today: "rui.date_time_picker.today";
     };
     readonly timezoneSelect: {

package/dist/i18n/keys.js

@@ -10,6 +10,7 @@ var RUI_I18N_KEYS = {
 		label: "rui.date_time_picker.label",
 		now: "rui.date_time_picker.now",
 		openCalendar: "rui.date_time_picker.open_calendar",
+		pasteUnreadable: "rui.date_time_picker.paste_unreadable",
 		today: "rui.date_time_picker.today"
 	},
 	timezoneSelect: { label: "rui.timezone_select.label" }

package/dist/i18n/keys.js.map

@@ -1 +1 @@
-{"version":3,"file":"keys.js","names":[],"sources":["../../src/i18n/keys.ts"],"sourcesContent":["export const RUI_I18N_KEYS = {\n  dateTimePicker: {\n    clear: 'rui.date_time_picker.clear',\n    clearValue: 'rui.date_time_picker.clear_value',\n    closeCalendar: 'rui.date_time_picker.close_calendar',\n    dateAfterMax: 'rui.date_time_picker.date_after_max',\n    dateBeforeMin: 'rui.date_time_picker.date_before_min',\n    dateInFuture: 'rui.date_time_picker.date_in_future',\n    label: 'rui.date_time_picker.label',\n    now: 'rui.date_time_picker.now',\n    openCalendar: 'rui.date_time_picker.open_calendar',\n    today: 'rui.date_time_picker.today',\n  },\n  timezoneSelect: {\n    label: 'rui.timezone_select.label',\n  },\n} as const;\n\nfunction flattenKeys(obj: Record<string, any>): string[] {\n  return Object.values(obj).flatMap(value =>\n    typeof value === 'string' ? [value] : flattenKeys(value),\n  );\n}\n\n/**\n * Retrieves all translation keys available in the library.\n *\n * @returns the flattened translation keys\n */\nexport function translationKeys(): string[] {\n  return flattenKeys(RUI_I18N_KEYS);\n}\n"],"mappings":";AAAA,IAAa,gBAAgB;CAC3B,gBAAgB;EACd,OAAO;EACP,YAAY;EACZ,eAAe;EACf,cAAc;EACd,eAAe;EACf,cAAc;EACd,OAAO;EACP,KAAK;EACL,cAAc;EACd,OAAO;CACT;CACA,gBAAgB,EACd,OAAO,4BACT;AACF;AAEA,SAAS,YAAY,KAAoC;CACvD,OAAO,OAAO,OAAO,GAAG,CAAC,CAAC,SAAQ,UAChC,OAAO,UAAU,WAAW,CAAC,KAAK,IAAI,YAAY,KAAK,CACzD;AACF;;;;;;AAOA,SAAgB,kBAA4B;CAC1C,OAAO,YAAY,aAAa;AAClC"}
+{"version":3,"file":"keys.js","names":[],"sources":["../../src/i18n/keys.ts"],"sourcesContent":["export const RUI_I18N_KEYS = {\n  dateTimePicker: {\n    clear: 'rui.date_time_picker.clear',\n    clearValue: 'rui.date_time_picker.clear_value',\n    closeCalendar: 'rui.date_time_picker.close_calendar',\n    dateAfterMax: 'rui.date_time_picker.date_after_max',\n    dateBeforeMin: 'rui.date_time_picker.date_before_min',\n    dateInFuture: 'rui.date_time_picker.date_in_future',\n    label: 'rui.date_time_picker.label',\n    now: 'rui.date_time_picker.now',\n    openCalendar: 'rui.date_time_picker.open_calendar',\n    pasteUnreadable: 'rui.date_time_picker.paste_unreadable',\n    today: 'rui.date_time_picker.today',\n  },\n  timezoneSelect: {\n    label: 'rui.timezone_select.label',\n  },\n} as const;\n\nfunction flattenKeys(obj: Record<string, any>): string[] {\n  return Object.values(obj).flatMap(value =>\n    typeof value === 'string' ? [value] : flattenKeys(value),\n  );\n}\n\n/**\n * Retrieves all translation keys available in the library.\n *\n * @returns the flattened translation keys\n */\nexport function translationKeys(): string[] {\n  return flattenKeys(RUI_I18N_KEYS);\n}\n"],"mappings":";AAAA,IAAa,gBAAgB;CAC3B,gBAAgB;EACd,OAAO;EACP,YAAY;EACZ,eAAe;EACf,cAAc;EACd,eAAe;EACf,cAAc;EACd,OAAO;EACP,KAAK;EACL,cAAc;EACd,iBAAiB;EACjB,OAAO;CACT;CACA,gBAAgB,EACd,OAAO,4BACT;AACF;AAEA,SAAS,YAAY,KAAoC;CACvD,OAAO,OAAO,OAAO,GAAG,CAAC,CAAC,SAAQ,UAChC,OAAO,UAAU,WAAW,CAAC,KAAK,IAAI,YAAY,KAAK,CACzD;AACF;;;;;;AAOA,SAAgB,kBAA4B;CAC1C,OAAO,YAAY,aAAa;AAClC"}

package/dist/index.js

@@ -59,11 +59,11 @@ import RuiNotification_default from "./components/overlays/notification/RuiNotif
 import RuiFooterStepper_default from "./components/steppers/RuiFooterStepper.js";
 import RuiStepper_default from "./components/steppers/RuiStepper.js";
 import RuiTableEmptyState_default from "./components/tables/RuiTableEmptyState.js";
+import RuiTableErrorState_default from "./components/tables/RuiTableErrorState.js";
 import RuiExpandButton_default from "./components/tables/RuiExpandButton.js";
 import RuiTableLoadingState_default from "./components/tables/RuiTableLoadingState.js";
 import RuiTablePagination_default from "./components/tables/RuiTablePagination.js";
 import RuiDataTable_default from "./components/tables/RuiDataTable.js";
-import RuiTableErrorState_default from "./components/tables/RuiTableErrorState.js";
 import RuiTable_default from "./components/tables/RuiTable.js";
 import RuiTabItem_default from "./components/tabs/tab-item/RuiTabItem.js";
 import RuiTabItems_default from "./components/tabs/tab-items/RuiTabItems.js";

package/dist/library-icons.json

@@ -29,7 +29,7 @@
   "lu-info",
   "lu-radio-button-fill",
   "lu-search",
-  "lu-trash-2",
   "lu-triangle-alert",
+  "lu-ungroup",
   "lu-x"
 ]

package/dist/style.css

@@ -929,6 +929,17 @@ html[data-theme="dark"], html.dark {
     max-width: 1536px;
   }
 }
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
 .pointer-events-none {
   pointer-events: none;
 }
@@ -1053,6 +1064,9 @@ html[data-theme="dark"], html.dark {
 .z-\[10000\] {
   z-index: 10000;
 }
+.z-\[1\] {
+  z-index: 1;
+}
 .z-\[2\] {
   z-index: 2;
 }
@@ -1068,6 +1082,10 @@ html[data-theme="dark"], html.dark {
 .m-\[-1px\] {
   margin: -1px;
 }
+.-mx-1\.5 {
+  margin-left: -0.375rem;
+  margin-right: -0.375rem;
+}
 .-mx-4 {
   margin-left: -1rem;
   margin-right: -1rem;
@@ -1108,12 +1126,18 @@ html[data-theme="dark"], html.dark {
 .-mb-2 {
   margin-bottom: -0.5rem;
 }
+.-ml-1\.5 {
+  margin-left: -0.375rem;
+}
 .-ml-\[0\.5625rem\] {
   margin-left: -0.5625rem;
 }
 .-mr-1 {
   margin-right: -0.25rem;
 }
+.-mr-1\.5 {
+  margin-right: -0.375rem;
+}
 .-mt-1 {
   margin-top: -0.25rem;
 }
@@ -1319,6 +1343,9 @@ html[data-theme="dark"], html.dark {
 .max-h-full {
   max-height: 100%;
 }
+.\!min-h-7 {
+  min-height: 1.75rem !important;
+}
 .\!min-h-8 {
   min-height: 2rem !important;
 }
@@ -1609,14 +1636,6 @@ html[data-theme="dark"], html.dark {
   --tw-translate-y: 100%;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
-.\!rotate-0 {
-  --tw-rotate: 0deg !important;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) !important;
-}
-.\!rotate-180 {
-  --tw-rotate: 180deg !important;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) !important;
-}
 .-rotate-180 {
   --tw-rotate: -180deg;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -1633,6 +1652,10 @@ html[data-theme="dark"], html.dark {
   --tw-rotate: -135deg;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
+.rotate-0 {
+  --tw-rotate: 0deg;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
 .rotate-180 {
   --tw-rotate: 180deg;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -1819,6 +1842,9 @@ html[data-theme="dark"], html.dark {
 .items-center {
   align-items: center;
 }
+.items-baseline {
+  align-items: baseline;
+}
 .justify-start {
   justify-content: flex-start;
 }
@@ -2119,6 +2145,9 @@ html[data-theme="dark"], html.dark {
 .\!border-b {
   border-bottom-width: 1px !important;
 }
+.\!border-t-0 {
+  border-top-width: 0px !important;
+}
 .border-b {
   border-bottom-width: 1px;
 }
@@ -2371,10 +2400,6 @@ html[data-theme="dark"], html.dark {
   --tw-bg-opacity: 1;
   background-color: rgb(54 54 54 / var(--tw-bg-opacity, 1));
 }
-.bg-\[\#f9fafb\] {
-  --tw-bg-opacity: 1;
-  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
-}
 .bg-black {
   --tw-bg-opacity: 1;
   background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
@@ -2385,9 +2410,6 @@ html[data-theme="dark"], html.dark {
 .bg-black\/\[\.12\] {
   background-color: rgb(0 0 0 / .12);
 }
-.bg-black\/\[0\.02\] {
-  background-color: rgb(0 0 0 / 0.02);
-}
 .bg-black\/\[0\.03\] {
   background-color: rgb(0 0 0 / 0.03);
 }
@@ -2706,9 +2728,8 @@ html[data-theme="dark"], html.dark {
   padding-top: 0.19rem;
   padding-bottom: 0.19rem;
 }
-.py-\[0\.38rem\] {
-  padding-top: 0.38rem;
-  padding-bottom: 0.38rem;
+.\!pl-3 {
+  padding-left: 0.75rem !important;
 }
 .\!pt-0 {
   padding-top: 0px !important;
@@ -3054,6 +3075,9 @@ html[data-theme="dark"], html.dark {
 .opacity-20 {
   opacity: 0.2;
 }
+.opacity-30 {
+  opacity: 0.3;
+}
 .opacity-40 {
   opacity: 0.4;
 }
@@ -3985,11 +4009,6 @@ body {
   border-color: rgba(var(--rui-primary-main), var(--tw-border-opacity, 1));
 }
 
-.hover\:bg-\[\#f9fafb\]:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
-}
-
 .hover\:bg-black\/\[\.04\]:hover {
   background-color: rgb(0 0 0 / .04);
 }
@@ -4031,6 +4050,11 @@ body {
   background-color: rgba(var(--rui-grey-300), var(--tw-bg-opacity, 1));
 }
 
+.hover\:bg-rui-grey-50:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgba(var(--rui-grey-50), var(--tw-bg-opacity, 1));
+}
+
 .hover\:bg-rui-info-darker:hover {
   --tw-bg-opacity: 1;
   background-color: rgba(var(--rui-info-darker), var(--tw-bg-opacity, 1));
@@ -4376,6 +4400,10 @@ body {
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
+.group\/sort:focus-visible .group-focus-visible\/sort\:opacity-60 {
+  opacity: 0.6;
+}
+
 .peer:-webkit-autofill ~ .peer-autofill\:text-\[0\.75rem\] {
   font-size: 0.75rem;
 }
@@ -4691,14 +4719,18 @@ body {
   background-color: rgb(255 255 255 / .16);
 }
 
-.dark\:bg-white\/\[0\.02\]:is([data-theme="dark"] *) {
-  background-color: rgb(255 255 255 / 0.02);
+.dark\:bg-white\/\[0\.03\]:is([data-theme="dark"] *) {
+  background-color: rgb(255 255 255 / 0.03);
 }
 
 .dark\:bg-white\/\[0\.05\]:is([data-theme="dark"] *) {
   background-color: rgb(255 255 255 / 0.05);
 }
 
+.dark\:bg-white\/\[0\.08\]:is([data-theme="dark"] *) {
+  background-color: rgb(255 255 255 / 0.08);
+}
+
 .dark\:bg-white\/\[0\.09\]:is([data-theme="dark"] *) {
   background-color: rgb(255 255 255 / 0.09);
 }
@@ -4870,11 +4902,6 @@ body {
   border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
 }
 
-.dark\:hover\:bg-\[\#121212\]:hover:is([data-theme="dark"] *) {
-  --tw-bg-opacity: 1;
-  background-color: rgb(18 18 18 / var(--tw-bg-opacity, 1));
-}
-
 .dark\:hover\:bg-gray-600:hover:is([data-theme="dark"] *) {
   --tw-bg-opacity: 1;
   background-color: rgb(75 85 99 / var(--tw-bg-opacity, 1));
@@ -4921,6 +4948,10 @@ body {
   background-color: rgb(255 255 255 / .04);
 }
 
+.dark\:hover\:bg-white\/\[0\.03\]:hover:is([data-theme="dark"] *) {
+  background-color: rgb(255 255 255 / 0.03);
+}
+
 .dark\:hover\:bg-white\/\[0\.04\]:hover:is([data-theme="dark"] *) {
   background-color: rgb(255 255 255 / 0.04);
 }
@@ -5051,32 +5082,73 @@ body {
   opacity: 0;
 }
 
-.even\:\[\&\>tr\]\:bg-rui-grey-50>tr:nth-child(even) {
-  --tw-bg-opacity: 1;
-  background-color: rgba(var(--rui-grey-50), var(--tw-bg-opacity, 1));
+.\[\&_input\]\:\!px-1 input {
+  padding-left: 0.25rem !important;
+  padding-right: 0.25rem !important;
 }
 
-.dark\:even\:\[\&\>tr\]\:bg-rui-grey-900>tr:nth-child(even):is([data-theme="dark"] *) {
-  --tw-bg-opacity: 1;
-  background-color: rgba(var(--rui-grey-900), var(--tw-bg-opacity, 1));
+.\[\&_input\]\:\!py-1 input {
+  padding-top: 0.25rem !important;
+  padding-bottom: 0.25rem !important;
 }
 
-.\[\&_input\]\:\!pr-0 input {
-  padding-right: 0px !important;
+.\[\&_input\]\:\!py-1\.5 input {
+  padding-top: 0.375rem !important;
+  padding-bottom: 0.375rem !important;
 }
 
 .\[\&_input\]\:text-center input {
   text-align: center;
 }
 
+.\[\&_input\]\:\!text-xs input {
+  font-size: 0.75rem !important;
+  line-height: 1rem !important;
+}
+
 .\[\&_input\]\:uppercase input {
   text-transform: uppercase;
 }
 
+.\[\&_input\]\:\!leading-5 input {
+  line-height: 1.25rem !important;
+}
+
 .\[\&_label\]\:ml-0 label {
   margin-left: 0px;
 }
 
+:where(.\[\:where\(\&\)\]\:h-10) {
+  height: 2.5rem;
+}
+
+:where(.\[\:where\(\&\)\]\:h-14) {
+  height: 3.5rem;
+}
+
+:where(.\[\:where\(\&\)\]\:h-9) {
+  height: 2.25rem;
+}
+
+:where(.\[\:where\(\&\)\]\:h-\[3\.25rem\]) {
+  height: 3.25rem;
+}
+
+:where(.\[\:where\(\&\)\]\:px-4) {
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+
+:where(.\[\:where\(\&\)\]\:py-1) {
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+}
+
+:where(.\[\:where\(\&\)\]\:py-3) {
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
+}
+
 :where(.\[\:where\(\&\)_tbody_td\]\:border-b-0) tbody td {
   border-bottom-width: 0px;
 }
@@ -5156,4 +5228,14 @@ body {
 :where(.\[\:where\(\&\)_thead_th\]\:text-rui-text-secondary) thead th {
   color: var(--rui-text-secondary);
 }
+
+:where(.\[\:where\(\&\>tr\:nth-child\(even\)\)\]\:bg-rui-grey-50>tr:nth-child(even)) {
+  --tw-bg-opacity: 1;
+  background-color: rgba(var(--rui-grey-50), var(--tw-bg-opacity, 1));
+}
+
+:where(.dark\:\[\:where\(\&\>tr\:nth-child\(even\)\)\]\:bg-rui-grey-900>tr:nth-child(even)):is([data-theme="dark"] *) {
+  --tw-bg-opacity: 1;
+  background-color: rgba(var(--rui-grey-900), var(--tw-bg-opacity, 1));
+}
 /*$vite$:1*/