@rotki/ui-library 2.26.1 → 3.0.0-beta.1

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/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;

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

@@ -1,8 +1,7 @@
-import { tv } from "../../../utils/tv.js";
-import RuiButton_default from "../../buttons/button/RuiButton.js";
-import { TabAlignment, TabIndicatorPosition, TabLayout } from "../tab-props.js";
+import { cn, tv } from "../../../utils/tv.js";
+import { TabAlignment, TabIndicatorPosition, TabLayout, TabVariant } from "../tab-props.js";
 import { useTabLink } from "./use-tab-link.js";
-import { computed, createBlock, createSlots, defineComponent, mergeProps, openBlock, renderSlot, unref, useId, useSlots, withCtx } from "vue";
+import { computed, createBlock, createCommentVNode, createElementVNode, defineComponent, mergeProps, normalizeClass, openBlock, renderSlot, resolveDynamicComponent, unref, useId, useSlots, withCtx } from "vue";
 import { get } from "@vueuse/shared";
 //#region src/components/tabs/tab/RuiTab.vue?vue&type=script&setup=true&lang.ts
 var RuiTab_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
@@ -25,7 +24,6 @@ var RuiTab_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCom
 			default: false
 		},
 		classNames: {},
-		activeClass: { default: "" },
 		link: {
 			type: Boolean,
 			default: false
@@ -36,72 +34,98 @@ var RuiTab_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCom
 			type: Boolean,
 			default: false
 		},
-		exactPath: { type: Boolean },
 		vertical: {
 			type: Boolean,
 			default: false
 		},
 		align: { default: () => TabAlignment.center },
-		indicatorPosition: { default: () => TabIndicatorPosition.end }
+		indicatorPosition: { default: () => TabIndicatorPosition.end },
+		variant: { default: () => TabVariant.underline }
 	},
 	emits: ["click"],
 	setup(__props, { emit: __emit }) {
 		const emit = __emit;
 		const slots = useSlots();
+		/**
+		* A tab is a plain button or link: RuiTabs draws the active indicator, so a tab
+		* only sets its label color, and its hover fill. On the underline bar the fill
+		* hugs the label rather than the 40px cell, so the bar stays calm.
+		*/
 		const tab = tv({
-			base: "min-w-[5.625rem] max-w-[22.5rem] flex items-center rounded-none cursor-pointer relative whitespace-nowrap shrink-0 !px-4",
+			slots: {
+				root: [
+					"group relative inline-flex shrink-0 items-center whitespace-nowrap rounded-rui-control",
+					"text-sm font-medium text-rui-text-secondary transition-colors duration-150 [--rui-icon-size:1rem]",
+					"outline-hidden focus-visible:focus-ring focus-visible:-outline-offset-2"
+				].join(" "),
+				content: "inline-flex items-center gap-2 rounded-rui-control transition-colors duration-150"
+			},
 			variants: {
+				variant: {
+					[TabVariant.underline]: {
+						root: "px-1",
+						content: "h-8 px-2"
+					},
+					[TabVariant.segmented]: { root: "z-1 h-8 px-3" }
+				},
 				layout: {
-					[TabLayout.horizontal]: "",
-					[TabLayout.vertical]: "!min-h-[3rem] w-full max-w-none"
+					[TabLayout.horizontal]: {},
+					[TabLayout.vertical]: { root: "w-full" }
 				},
 				align: {
-					start: "justify-start text-left rtl:justify-end rtl:text-right",
-					center: "justify-center text-center",
-					end: "justify-end text-right rtl:justify-start rtl:text-left"
+					start: { root: "justify-start text-left rtl:justify-end rtl:text-right" },
+					center: { root: "justify-center text-center" },
+					end: { root: "justify-end text-right rtl:justify-start rtl:text-left" }
 				},
-				grow: { true: "grow max-w-none" },
-				disabled: { true: "cursor-not-allowed" },
+				grow: { true: { root: "grow" } },
 				active: {
-					true: "",
-					false: ""
+					true: { root: "text-rui-text" },
+					false: {}
 				},
-				indicatorPosition: {
-					start: "",
-					end: ""
+				disabled: {
+					true: { root: "cursor-not-allowed text-rui-text-disabled" },
+					false: { root: "cursor-pointer hover:text-rui-text" }
 				}
 			},
 			compoundVariants: [
 				{
-					active: true,
+					variant: TabVariant.underline,
 					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`
+					class: { root: "h-10" }
 				},
 				{
-					active: true,
+					variant: TabVariant.underline,
 					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`
+					disabled: false,
+					class: { content: "group-hover:bg-rui-hover" }
 				},
 				{
-					active: true,
+					variant: TabVariant.underline,
 					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`
+					class: {
+						root: "min-h-9 px-3",
+						content: "h-auto px-0 py-2"
+					}
 				},
 				{
-					active: true,
+					variant: TabVariant.underline,
 					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`
+					disabled: false,
+					class: { root: "hover:bg-rui-hover" }
+				},
+				{
+					variant: TabVariant.underline,
+					layout: TabLayout.vertical,
+					active: true,
+					class: { root: "bg-rui-hover" }
 				}
 			],
 			defaultVariants: {
+				variant: TabVariant.underline,
 				layout: TabLayout.horizontal,
 				align: "center",
-				indicatorPosition: "end",
-				active: false
+				active: false,
+				disabled: false
 			}
 		});
 		const { isRouteActive, href: linkHref, navigate, isLink } = useTabLink({
@@ -112,59 +136,61 @@ var RuiTab_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCom
 		const layout = computed(() => __props.vertical ? TabLayout.vertical : TabLayout.horizontal);
 		const isSelf = computed(() => __props.target === "_self");
 		const isEffectivelyActive = computed(() => __props.active || get(isRouteActive));
+		const ui = computed(() => tab({
+			variant: __props.variant,
+			layout: get(layout),
+			align: __props.align,
+			grow: __props.grow,
+			disabled: __props.disabled,
+			active: get(isEffectivelyActive)
+		}));
 		function onClick(event) {
+			if (__props.disabled) {
+				event.preventDefault();
+				return;
+			}
 			emit("click", __props.value);
-			if (navigate && get(isSelf) && event) navigate(event);
+			if (navigate && get(isSelf)) navigate(event);
 		}
 		return (_ctx, _cache) => {
-			return openBlock(), createBlock(RuiButton_default, mergeProps({
-				class: [unref(tab)({
-					layout: unref(layout),
-					align: __props.align,
-					indicatorPosition: __props.indicatorPosition,
-					grow: __props.grow,
-					disabled: __props.disabled,
-					active: unref(isEffectivelyActive)
-				}), unref(isEffectivelyActive) && (__props.classNames?.active ?? __props.activeClass)],
+			return openBlock(), createBlock(resolveDynamicComponent(unref(isLink) ? "a" : "button"), mergeProps({
+				type: unref(isLink) ? void 0 : "button",
+				class: [unref(ui).root({ class: unref(cn)(__props.classNames?.root) }), unref(isEffectivelyActive) && __props.classNames?.active],
 				"data-active-tab": unref(isEffectivelyActive) || void 0,
 				"data-align": __props.align,
 				"data-indicator-position": __props.indicatorPosition,
 				"data-vertical": __props.vertical || void 0,
-				color: unref(isEffectivelyActive) ? __props.color : void 0,
-				disabled: __props.disabled,
-				href: unref(isLink) && !unref(isSelf) ? unref(linkHref) : void 0,
+				"data-variant": __props.variant,
+				"data-color": unref(isEffectivelyActive) ? __props.color : void 0,
+				disabled: unref(isLink) ? void 0 : __props.disabled,
+				"aria-disabled": unref(isLink) && __props.disabled ? "true" : void 0,
+				href: unref(isLink) && !unref(isSelf) && !__props.disabled ? unref(linkHref) : void 0,
 				target: unref(isLink) ? __props.target : void 0,
-				tag: unref(isLink) ? "a" : void 0,
-				"no-outline": unref(isLink),
 				role: "tab",
 				"aria-selected": unref(isEffectivelyActive),
-				tabindex: "-1",
-				"hide-focus-indicator": "",
-				variant: "text"
-			}, _ctx.$attrs, { onClick: _cache[0] || (_cache[0] = ($event) => __props.disabled ? void 0 : onClick($event)) }), createSlots({
-				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
-				_: 2
-			}, [slots.prepend ? {
-				name: "prepend",
-				fn: withCtx(() => [renderSlot(_ctx.$slots, "prepend")]),
-				key: "0"
-			} : void 0, slots.append ? {
-				name: "append",
-				fn: withCtx(() => [renderSlot(_ctx.$slots, "append")]),
-				key: "1"
-			} : void 0]), 1040, [
+				tabindex: unref(isEffectivelyActive) && !__props.disabled ? 0 : -1
+			}, _ctx.$attrs, { onClick: _cache[0] || (_cache[0] = ($event) => onClick($event)) }), {
+				default: withCtx(() => [createElementVNode("span", { class: normalizeClass(unref(ui).content()) }, [
+					slots.prepend ? renderSlot(_ctx.$slots, "prepend", {}, void 0, void 0, 0) : createCommentVNode("", true),
+					renderSlot(_ctx.$slots, "default"),
+					slots.append ? renderSlot(_ctx.$slots, "append", {}, void 0, void 0, 1) : createCommentVNode("", true)
+				], 2)]),
+				_: 3
+			}, 16, [
+				"type",
 				"class",
 				"data-active-tab",
 				"data-align",
 				"data-indicator-position",
 				"data-vertical",
-				"color",
+				"data-variant",
+				"data-color",
 				"disabled",
+				"aria-disabled",
 				"href",
 				"target",
-				"tag",
-				"no-outline",
-				"aria-selected"
+				"aria-selected",
+				"tabindex"
 			]);
 		};
 	}

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

@@ -1 +1 @@
-{"version":3,"file":"RuiTab.vue_vue_type_script_setup_true_lang.js","names":["$attrs"],"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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAwDA,MAAM,OAAO;EAIb,MAAM,QAAQ,SAAA;EAMd,MAAM,MAAM,GAAG;GACb,MAAM;GACN,UAAU;IACR,QAAQ;MACL,UAAU,aAAa;MAEvB,UAAU,WAAW;IACxB;IACA,OAAO;KACL,OAAO;KACP,QAAQ;KACR,KAAK;IACP;IACA,MAAM,EACJ,MAAM,kBACR;IACA,UAAU,EACR,MAAM,qBACR;IACA,QAAQ;KACN,MAAM;KACN,OAAO;IACT;IACA,mBAAmB;KACjB,OAAO;KACP,KAAK;IACP;GACF;GACA,kBAAkB;IAEhB;KAAE,QAAQ;KAAM,QAAQ,UAAU;KAAY,mBAAmB;KAAO,OAAO;IAA6H;IAC5M;KAAE,QAAQ;KAAM,QAAQ,UAAU;KAAY,mBAAmB;KAAS,OAAO;IAA0H;IAE3M;KAAE,QAAQ;KAAM,QAAQ,UAAU;KAAU,mBAAmB;KAAO,OAAO;IAA+H;IAC5M;KAAE,QAAQ;KAAM,QAAQ,UAAU;KAAU,mBAAmB;KAAS,OAAO;IAA+H;GAChN;GACA,iBAAiB;IAAE,QAAQ,UAAU;IAAY,OAAO;IAAU,mBAAmB;IAAO,QAAQ;GAAM;EAC5G,CAAC;EAED,MAAM,EAAE,eAAe,MAAM,UAAU,UAAU,WAAW,WAAW;GACrE,YAAY,QAAA;GACZ,UAAU,QAAA;GACV,aAAa,QAAA;EACf,CAAC;EAED,MAAM,SAAS,eAA0B,QAAA,WAAW,UAAU,WAAW,UAAU,UAAU;EAC7F,MAAM,SAAS,eAAwB,QAAA,WAAW,OAAO;EACzD,MAAM,sBAAsB,eAAwB,QAAA,UAAU,IAAI,aAAa,CAAC;EAEhF,SAAS,QAAQ,OAA0B;GACzC,KAAK,SAAS,QAAA,KAAK;GACnB,IAAI,YAAY,IAAI,MAAM,KAAK,OAC7B,SAAS,KAAK;EAClB;;GAIE,OAAA,UAAA,GAAA,YAoCY,mBApCZ,WAoCY;IAnCT,OAAK,CAAU,MAAA,GAAA,CAAG,CAAA;KAAA,QAAG,MAAA,MAAA;KAAM,OAAE,QAAA;KAAK,mBAAE,QAAA;KAAiB,MAAE,QAAA;KAAI,UAAE,QAAA;KAAQ,QAAU,MAAA,mBAAA;IAAmB,CAAA,GAAW,MAAA,mBAAA,MAAwB,QAAA,YAAY,UAAU,QAAA,YAAA;IAI3J,mBAAiB,MAAA,mBAAA,KAAuB,KAAA;IACxC,cAAY,QAAA;IACZ,2BAAyB,QAAA;IACzB,iBAAe,QAAA,YAAY,KAAA;IAC3B,OAAO,MAAA,mBAAA,IAAsB,QAAA,QAAQ,KAAA;IACrC,UAAU,QAAA;IACV,MAAM,MAAA,MAAA,KAAM,CAAK,MAAA,MAAA,IAAS,MAAA,QAAA,IAAW,KAAA;IACrC,QAAQ,MAAA,MAAA,IAAS,QAAA,SAAS,KAAA;IAC1B,KAAK,MAAA,MAAA,IAAM,MAAS,KAAA;IACpB,cAAY,MAAA,MAAA;IACb,MAAK;IACJ,iBAAe,MAAA,mBAAA;IAChB,UAAS;IACT,wBAAA;IACA,SAAQ;GACAA,GAAAA,KAAAA,QAAM,EACb,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,QAAA,WAAW,KAAA,IAAY,QAAQ,MAAM,GAAA,CAAA,GAAA,YAAA;IAQ7C,SAAA,cAAQ,CAAR,WAAQ,KAAA,QAAA,SAAA,CAAA,CAAA;;GALA,GAAA,CAAA,MAAM,UAAA;IACX,MAAA;IAED,IAAA,cAAuB,CAAvB,WAAuB,KAAA,QAAA,SAAA,CAAA,CAAA;;GAIjB,IAAA,KAAA,GAAA,MAAM,SAAA;IACX,MAAA;IAED,IAAA,cAAsB,CAAtB,WAAsB,KAAA,QAAA,QAAA,CAAA,CAAA"}
+{"version":3,"file":"RuiTab.vue_vue_type_script_setup_true_lang.js","names":["$attrs"],"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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAoDA,MAAM,OAAO;EAIb,MAAM,QAAQ,SAAA;;;;;;EAWd,MAAM,MAAM,GAAG;GACb,OAAO;IACL,MAAM;KACJ;KACA;KAEA;IACF,CAAC,CAAC,KAAK,GAAG;IACV,SAAS;GACX;GACA,UAAU;IACR,SAAS;MACN,WAAW,YAAY;MAAE,MAAM;MAAQ,SAAS;KAAW;MAE3D,WAAW,YAAY,EAAE,MAAM,eAAe;IACjD;IACA,QAAQ;MACL,UAAU,aAAa,CAAC;MACxB,UAAU,WAAW,EAAE,MAAM,SAAS;IACzC;IACA,OAAO;KACL,OAAO,EAAE,MAAM,yDAAyD;KACxE,QAAQ,EAAE,MAAM,6BAA6B;KAC7C,KAAK,EAAE,MAAM,yDAAyD;IACxE;IACA,MAAM,EACJ,MAAM,EAAE,MAAM,OAAO,EACvB;IACA,QAAQ;KACN,MAAM,EAAE,MAAM,gBAAgB;KAC9B,OAAO,CAAC;IACV;IACA,UAAU;KACR,MAAM,EAAE,MAAM,4CAA4C;KAC1D,OAAO,EAAE,MAAM,qCAAqC;IACtD;GACF;GACA,kBAAkB;IAChB;KAAE,SAAS,WAAW;KAAW,QAAQ,UAAU;KAAY,OAAO,EAAE,MAAM,OAAO;IAAE;IACvF;KAAE,SAAS,WAAW;KAAW,QAAQ,UAAU;KAAY,UAAU;KAAO,OAAO,EAAE,SAAS,2BAA2B;IAAE;IAE/H;KAAE,SAAS,WAAW;KAAW,QAAQ,UAAU;KAAU,OAAO;MAAE,MAAM;MAAgB,SAAS;KAAmB;IAAE;IAC1H;KAAE,SAAS,WAAW;KAAW,QAAQ,UAAU;KAAU,UAAU;KAAO,OAAO,EAAE,MAAM,qBAAqB;IAAE;IACpH;KAAE,SAAS,WAAW;KAAW,QAAQ,UAAU;KAAU,QAAQ;KAAM,OAAO,EAAE,MAAM,eAAe;IAAE;GAC7G;GACA,iBAAiB;IACf,SAAS,WAAW;IACpB,QAAQ,UAAU;IAClB,OAAO;IACP,QAAQ;IACR,UAAU;GACZ;EACF,CAAC;EAED,MAAM,EAAE,eAAe,MAAM,UAAU,UAAU,WAAW,WAAW;GACrE,YAAY,QAAA;GACZ,UAAU,QAAA;GACV,aAAa,QAAA;EACf,CAAC;EAED,MAAM,SAAS,eAA0B,QAAA,WAAW,UAAU,WAAW,UAAU,UAAU;EAC7F,MAAM,SAAS,eAAwB,QAAA,WAAW,OAAO;EACzD,MAAM,sBAAsB,eAAwB,QAAA,UAAU,IAAI,aAAa,CAAC;EAChF,MAAM,KAAK,eAAuC,IAAI;GACpD,SAAM,QAAA;GACN,QAAQ,IAAI,MAAM;GAClB,OAAI,QAAA;GACJ,MAAG,QAAA;GACH,UAAO,QAAA;GACP,QAAQ,IAAI,mBAAmB;EACjC,CAAC,CAAC;EAEF,SAAS,QAAQ,OAAyB;GACxC,IAAI,QAAA,UAAU;IACZ,MAAM,eAAe;IACrB;GACF;GAEA,KAAK,SAAS,QAAA,KAAK;GACnB,IAAI,YAAY,IAAI,MAAM,GACxB,SAAS,KAAK;EAClB;;GAIE,OAAA,UAAA,GAAA,YAkCY,wBAjCL,MAAA,MAAA,IAAM,MAAA,QAAA,GADb,WAkCY;IAhCT,MAAM,MAAA,MAAA,IAAS,KAAA,IAAS;IACxB,OAAK,CAAU,MAAA,EAAA,CAAE,CAAC,KAAI,EAAA,OAAU,MAAA,EAAA,CAAE,CAAC,QAAA,YAAY,IAAI,EAAA,CAAA,GAAY,MAAA,mBAAA,KAAuB,QAAA,YAAY,MAAA;IAIlG,mBAAiB,MAAA,mBAAA,KAAuB,KAAA;IACxC,cAAY,QAAA;IACZ,2BAAyB,QAAA;IACzB,iBAAe,QAAA,YAAY,KAAA;IAC3B,gBAAc,QAAA;IACd,cAAY,MAAA,mBAAA,IAAsB,QAAA,QAAQ,KAAA;IAC1C,UAAU,MAAA,MAAA,IAAS,KAAA,IAAY,QAAA;IAC/B,iBAAe,MAAA,MAAA,KAAU,QAAA,WAAQ,SAAY,KAAA;IAC7C,MAAM,MAAA,MAAA,KAAM,CAAK,MAAA,MAAA,KAAM,CAAK,QAAA,WAAW,MAAA,QAAA,IAAW,KAAA;IAClD,QAAQ,MAAA,MAAA,IAAS,QAAA,SAAS,KAAA;IAC3B,MAAK;IACJ,iBAAe,MAAA,mBAAA;IACf,UAAU,MAAA,mBAAA,KAAmB,CAAK,QAAA,WAAQ,IAAA;GACnCA,GAAAA,KAAAA,QAAM,EACb,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,QAAQ,MAAM,GAAA,CAAA,GAAA;IAEtB,SAAA,cAUO,CAVP,mBAUO,QAAA,EAVA,OAAK,eAAE,MAAA,EAAA,CAAE,CAAC,QAAO,CAAA,EAAA,GAAA;KAEd,MAAM,UADd,WAGE,KAAA,QAAA,WAAA,CAAA,GAAA,KAAA,GAAA,KAAA,GAAA,CAAA,IAAA,mBAAA,IAAA,IAAA;KACF,WAAQ,KAAA,QAAA,SAAA;KAEA,MAAM,SADd,WAGE,KAAA,QAAA,UAAA,CAAA,GAAA,KAAA,GAAA,KAAA,GAAA,CAAA,IAAA,mBAAA,IAAA,IAAA"}