@rotki/ui-library 3.1.6 → 3.2.0

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

@@ -0,0 +1,82 @@
+export declare const paginationStyles: import("tailwind-variants").TVReturnType<{
+    dense: {
+        true: {
+            select: string;
+            pageInput: string;
+        };
+        false: {
+            select: string;
+            pageInput: string;
+        };
+    };
+    mobile: {
+        true: {
+            wrapper: string;
+            ranges: string;
+            sectionLabel: string;
+        };
+    };
+}, {
+    wrapper: string;
+    limit: string;
+    ranges: string;
+    pageInput: string;
+    sectionLabel: string;
+    select: string;
+    indicator: string;
+    navigation: string;
+}, undefined, {
+    dense: {
+        true: {
+            select: string;
+            pageInput: string;
+        };
+        false: {
+            select: string;
+            pageInput: string;
+        };
+    };
+    mobile: {
+        true: {
+            wrapper: string;
+            ranges: string;
+            sectionLabel: string;
+        };
+    };
+}, {
+    wrapper: string;
+    limit: string;
+    ranges: string;
+    pageInput: string;
+    sectionLabel: string;
+    select: string;
+    indicator: string;
+    navigation: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+    dense: {
+        true: {
+            select: string;
+            pageInput: string;
+        };
+        false: {
+            select: string;
+            pageInput: string;
+        };
+    };
+    mobile: {
+        true: {
+            wrapper: string;
+            ranges: string;
+            sectionLabel: string;
+        };
+    };
+}, {
+    wrapper: string;
+    limit: string;
+    ranges: string;
+    pageInput: string;
+    sectionLabel: string;
+    select: string;
+    indicator: string;
+    navigation: string;
+}>>;

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

@@ -0,0 +1,35 @@
+import { tv } from "../../utils/tv.js";
+//#region src/components/tables/table-pagination-styles.ts
+var paginationStyles = tv({
+	slots: {
+		wrapper: "relative flex flex-wrap items-center justify-end gap-x-4 gap-y-0",
+		limit: "flex items-center between:ml-2 between:mr-0 text-caption",
+		ranges: "flex items-center between:ml-2 between:mr-0 text-caption pr-2",
+		pageInput: "w-14 [&_input]:text-center [&_input]:px-1! [&_input]:text-xs! [&_input]:leading-5!",
+		sectionLabel: "text-rui-text-secondary whitespace-nowrap py-3",
+		select: "text-xs! pl-3!",
+		indicator: "text-rui-text text-caption whitespace-nowrap",
+		navigation: "flex items-center"
+	},
+	variants: {
+		dense: {
+			true: {
+				select: "min-h-7!",
+				pageInput: "[&_input]:py-1!"
+			},
+			false: {
+				select: "min-h-8!",
+				pageInput: "[&_input]:py-1.5!"
+			}
+		},
+		mobile: { true: {
+			wrapper: "flex-nowrap justify-between gap-x-2 gap-y-0",
+			ranges: "pr-0",
+			sectionLabel: "sr-only"
+		} }
+	}
+});
+//#endregion
+export { paginationStyles };
+
+//# sourceMappingURL=table-pagination-styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"table-pagination-styles.js","names":[],"sources":["../../../src/components/tables/table-pagination-styles.ts"],"sourcesContent":["import { tv } from '@/utils/tv';\n\nexport const paginationStyles = tv({\n  slots: {\n    wrapper: 'relative flex flex-wrap items-center justify-end gap-x-4 gap-y-0',\n    limit: 'flex items-center between:ml-2 between:mr-0 text-caption',\n    ranges: 'flex items-center between:ml-2 between:mr-0 text-caption pr-2',\n    pageInput: 'w-14 [&_input]:text-center [&_input]:px-1! [&_input]:text-xs! [&_input]:leading-5!',\n    sectionLabel: 'text-rui-text-secondary whitespace-nowrap py-3',\n    select: 'text-xs! pl-3!',\n    indicator: 'text-rui-text text-caption whitespace-nowrap',\n    navigation: 'flex items-center',\n  },\n  variants: {\n    // the selects match the icon buttons, 28px with `size=\"sm\"` and 32px without\n    dense: {\n      true: {\n        select: 'min-h-7!',\n        pageInput: '[&_input]:py-1!',\n      },\n      false: {\n        select: 'min-h-8!',\n        pageInput: '[&_input]:py-1.5!',\n      },\n    },\n    mobile: {\n      true: {\n        wrapper: 'flex-nowrap justify-between gap-x-2 gap-y-0',\n        ranges: 'pr-0',\n        // sr-only rather than hidden: a display:none label names nothing\n        sectionLabel: 'sr-only',\n      },\n    },\n  },\n});\n"],"mappings":";;AAEA,IAAa,mBAAmB,GAAG;CACjC,OAAO;EACL,SAAS;EACT,OAAO;EACP,QAAQ;EACR,WAAW;EACX,cAAc;EACd,QAAQ;EACR,WAAW;EACX,YAAY;CACd;CACA,UAAU;EAER,OAAO;GACL,MAAM;IACJ,QAAQ;IACR,WAAW;GACb;GACA,OAAO;IACL,QAAQ;IACR,WAAW;GACb;EACF;EACA,QAAQ,EACN,MAAM;GACJ,SAAS;GACT,QAAQ;GAER,cAAc;EAChB,EACF;CACF;AACF,CAAC"}

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

@@ -0,0 +1,62 @@
+/**
+ * Every rule that lands on a `th` or a `td` wraps the `&` in `:where()`, which
+ * compiles to `:where(.generated-class) th` and so carries the specificity of
+ * the element alone. A consumer writing `class="p-0"` on one cell is a single
+ * class, which outranks that, so a one-off override needs no `!important` the
+ * way a plain `[&_th]:` rule would.
+ */
+export declare const tableStyles: import("tailwind-variants").TVReturnType<{
+    variant: {
+        default: {};
+        outlined: {
+            root: string;
+        };
+    };
+    dense: {
+        true: {
+            table: string;
+        };
+        false: {
+            table: string;
+        };
+    };
+}, {
+    root: string;
+    table: string[];
+}, undefined, {
+    variant: {
+        default: {};
+        outlined: {
+            root: string;
+        };
+    };
+    dense: {
+        true: {
+            table: string;
+        };
+        false: {
+            table: string;
+        };
+    };
+}, {
+    root: string;
+    table: string[];
+}, import("tailwind-variants").TVReturnTypeLike<{
+    variant: {
+        default: {};
+        outlined: {
+            root: string;
+        };
+    };
+    dense: {
+        true: {
+            table: string;
+        };
+        false: {
+            table: string;
+        };
+    };
+}, {
+    root: string;
+    table: string[];
+}>>;

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

@@ -0,0 +1,37 @@
+import { tv } from "../../utils/tv.js";
+//#region src/components/tables/table-styles.ts
+/**
+* Every rule that lands on a `th` or a `td` wraps the `&` in `:where()`, which
+* compiles to `:where(.generated-class) th` and so carries the specificity of
+* the element alone. A consumer writing `class="p-0"` on one cell is a single
+* class, which outranks that, so a one-off override needs no `!important` the
+* way a plain `[&_th]:` rule would.
+*/
+var tableStyles = tv({
+	slots: {
+		root: "w-full overflow-y-auto",
+		table: [
+			"w-full text-rui-text",
+			"[:where(&)_thead]:border-b [:where(&)_thead]:border-rui-divider",
+			"[:where(&)_thead_th]:font-medium [:where(&)_thead_th]:text-rui-text-secondary [:where(&)_thead_th]:text-start",
+			"[:where(&)_thead_th]:text-[0.8125rem] [:where(&)_thead_th]:leading-5",
+			"[:where(&)_th]:px-4 [:where(&)_td]:px-4 [:where(&)_td]:text-body-2",
+			"[:where(&)_tbody>tr+tr]:border-t [:where(&)_tbody>tr+tr]:border-rui-divider",
+			"[:where(&)_tbody_td]:border-b-0"
+		]
+	},
+	variants: {
+		variant: {
+			default: {},
+			outlined: { root: "border rounded-rui-panel border-rui-divider" }
+		},
+		dense: {
+			true: { table: "[:where(&)_th]:py-0.5 [:where(&)_th]:h-8 [:where(&)_td]:py-1 [:where(&)_td]:h-9" },
+			false: { table: "[:where(&)_th]:py-1 [:where(&)_th]:h-10 [:where(&)_td]:py-1 [:where(&)_td]:h-11" }
+		}
+	}
+});
+//#endregion
+export { tableStyles };
+
+//# sourceMappingURL=table-styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"table-styles.js","names":[],"sources":["../../../src/components/tables/table-styles.ts"],"sourcesContent":["import { tv } from '@/utils/tv';\n\n/**\n * Every rule that lands on a `th` or a `td` wraps the `&` in `:where()`, which\n * compiles to `:where(.generated-class) th` and so carries the specificity of\n * the element alone. A consumer writing `class=\"p-0\"` on one cell is a single\n * class, which outranks that, so a one-off override needs no `!important` the\n * way a plain `[&_th]:` rule would.\n */\nexport const tableStyles = tv({\n  slots: {\n    root: 'w-full overflow-y-auto',\n    // matches RuiDataTable: text color, 13px header labels, body text, cell padding and row dividers\n    table: [\n      'w-full text-rui-text',\n      '[:where(&)_thead]:border-b [:where(&)_thead]:border-rui-divider',\n      '[:where(&)_thead_th]:font-medium [:where(&)_thead_th]:text-rui-text-secondary [:where(&)_thead_th]:text-start',\n      '[:where(&)_thead_th]:text-[0.8125rem] [:where(&)_thead_th]:leading-5',\n      '[:where(&)_th]:px-4 [:where(&)_td]:px-4 [:where(&)_td]:text-body-2',\n      '[:where(&)_tbody>tr+tr]:border-t [:where(&)_tbody>tr+tr]:border-rui-divider',\n      '[:where(&)_tbody_td]:border-b-0',\n    ],\n  },\n  variants: {\n    variant: {\n      default: {},\n      outlined: {\n        root: 'border rounded-rui-panel border-rui-divider',\n      },\n    },\n    // the data table's heights: a 40px header over 44px rows, or 32px over 36px when dense\n    dense: {\n      true: {\n        table: '[:where(&)_th]:py-0.5 [:where(&)_th]:h-8 [:where(&)_td]:py-1 [:where(&)_td]:h-9',\n      },\n      false: {\n        table: '[:where(&)_th]:py-1 [:where(&)_th]:h-10 [:where(&)_td]:py-1 [:where(&)_td]:h-11',\n      },\n    },\n  },\n});\n"],"mappings":";;;;;;;;;AASA,IAAa,cAAc,GAAG;CAC5B,OAAO;EACL,MAAM;EAEN,OAAO;GACL;GACA;GACA;GACA;GACA;GACA;GACA;EACF;CACF;CACA,UAAU;EACR,SAAS;GACP,SAAS,CAAC;GACV,UAAU,EACR,MAAM,8CACR;EACF;EAEA,OAAO;GACL,MAAM,EACJ,OAAO,kFACT;GACA,OAAO,EACL,OAAO,kFACT;EACF;CACF;AACF,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"RuiTab.js","names":["_sfc_main"],"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":""}
+{"version":3,"file":"RuiTab.js","names":["_sfc_main"],"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 } from '@/utils/tv';\nimport { tabStyles } from './tab-styles';\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\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 tabStyles>>(() => tabStyles({\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_vue_type_script_setup_true_lang.js

@@ -1,7 +1,8 @@
 import { get } from "../../../vendor/@vueuse/shared/dist/index.js";
-import { cn, tv } from "../../../utils/tv.js";
+import { cn } from "../../../utils/tv.js";
 import { TabAlignment, TabIndicatorPosition, TabLayout, TabVariant } from "../tab-props.js";
 import { useTabLink } from "./use-tab-link.js";
+import { tabStyles } from "./tab-styles.js";
 import { computed, createBlock, createCommentVNode, createElementVNode, defineComponent, mergeProps, normalizeClass, openBlock, renderSlot, resolveDynamicComponent, unref, useId, useSlots, withCtx } from "vue";
 //#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({
@@ -46,88 +47,6 @@ var RuiTab_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCom
 	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({
-			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]: { root: "w-full" }
-				},
-				align: {
-					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: { root: "grow" } },
-				active: {
-					true: { root: "text-rui-text" },
-					false: {}
-				},
-				disabled: {
-					true: { root: "cursor-not-allowed text-rui-text-disabled" },
-					false: { root: "cursor-pointer hover:text-rui-text" }
-				}
-			},
-			compoundVariants: [
-				{
-					variant: TabVariant.underline,
-					layout: TabLayout.horizontal,
-					class: { root: "h-10" }
-				},
-				{
-					variant: TabVariant.underline,
-					layout: TabLayout.horizontal,
-					disabled: false,
-					class: { content: "group-hover:bg-rui-hover" }
-				},
-				{
-					variant: TabVariant.underline,
-					layout: TabLayout.vertical,
-					class: {
-						root: "min-h-9 px-3",
-						content: "h-auto px-0 py-2"
-					}
-				},
-				{
-					variant: TabVariant.underline,
-					layout: TabLayout.vertical,
-					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",
-				active: false,
-				disabled: false
-			}
-		});
 		const { isRouteActive, href: linkHref, navigate, isLink } = useTabLink({
 			link: () => __props.link,
 			to: () => __props.to,
@@ -136,7 +55,7 @@ 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({
+		const ui = computed(() => tabStyles({
 			variant: __props.variant,
 			layout: get(layout),
 			align: __props.align,

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","_useSlots","_openBlock","_createBlock","_resolveDynamicComponent","_unref","_mergeProps","_withCtx","_createElementVNode","_normalizeClass","_renderSlot","_createCommentVNode"],"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":"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"}
+{"version":3,"file":"RuiTab.vue_vue_type_script_setup_true_lang.js","names":["$attrs","_useSlots","_openBlock","_createBlock","_resolveDynamicComponent","_unref","_mergeProps","_withCtx","_createElementVNode","_normalizeClass","_renderSlot","_createCommentVNode"],"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 } from '@/utils/tv';\nimport { tabStyles } from './tab-styles';\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\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 tabStyles>>(() => tabStyles({\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAqDA,MAAM,OAAO;EAIb,MAAM,QAAQC,SAAA;EAMd,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,eAA6C,UAAU;GAChE,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,OAAAC,UAAA,GAAAC,YAkCYC,wBAjCLC,MAAA,MAAA,IAAM,MAAA,QAAA,GADbC,WAkCY;IAhCT,MAAMD,MAAA,MAAA,IAAS,KAAA,IAAS;IACxB,OAAK,CAAUA,MAAA,EAAA,CAAE,CAAC,KAAI,EAAA,OAAUA,MAAA,EAAA,CAAE,CAAC,QAAA,YAAY,IAAI,EAAA,CAAA,GAAYA,MAAA,mBAAA,KAAuB,QAAA,YAAY,MAAA;IAIlG,mBAAiBA,MAAA,mBAAA,KAAuB,KAAA;IACxC,cAAY,QAAA;IACZ,2BAAyB,QAAA;IACzB,iBAAe,QAAA,YAAY,KAAA;IAC3B,gBAAc,QAAA;IACd,cAAYA,MAAA,mBAAA,IAAsB,QAAA,QAAQ,KAAA;IAC1C,UAAUA,MAAA,MAAA,IAAS,KAAA,IAAY,QAAA;IAC/B,iBAAeA,MAAA,MAAA,KAAU,QAAA,WAAQ,SAAY,KAAA;IAC7C,MAAMA,MAAA,MAAA,KAAM,CAAKA,MAAA,MAAA,KAAM,CAAK,QAAA,WAAWA,MAAA,QAAA,IAAW,KAAA;IAClD,QAAQA,MAAA,MAAA,IAAS,QAAA,SAAS,KAAA;IAC3B,MAAK;IACJ,iBAAeA,MAAA,mBAAA;IACf,UAAUA,MAAA,mBAAA,KAAmB,CAAK,QAAA,WAAQ,IAAA;GACnCL,GAAAA,KAAAA,QAAM,EACb,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,QAAQ,MAAM,GAAA,CAAA,GAAA;IAEtB,SAAAO,cAUO,CAVPC,mBAUO,QAAA,EAVA,OAAKC,eAAEJ,MAAA,EAAA,CAAE,CAAC,QAAO,CAAA,EAAA,GAAA;KAEd,MAAM,UADdK,WAGE,KAAA,QAAA,WAAA,CAAA,GAAA,KAAA,GAAA,KAAA,GAAA,CAAA,IAAA,mBAAA,IAAA,IAAA;KACFA,WAAQ,KAAA,QAAA,SAAA;KAEA,MAAM,SADdA,WAGE,KAAA,QAAA,UAAA,CAAA,GAAA,KAAA,GAAA,KAAA,GAAA,CAAA,IAAA,mBAAA,IAAA,IAAA"}

package/dist/components/tabs/tab/tab-styles.d.ts

@@ -0,0 +1,153 @@
+/**
+ * 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.
+ */
+export declare const tabStyles: import("tailwind-variants").TVReturnType<{
+    variant: {
+        underline: {
+            root: string;
+            content: string;
+        };
+        segmented: {
+            root: string;
+        };
+    };
+    layout: {
+        horizontal: {};
+        vertical: {
+            root: string;
+        };
+    };
+    align: {
+        start: {
+            root: string;
+        };
+        center: {
+            root: string;
+        };
+        end: {
+            root: string;
+        };
+    };
+    grow: {
+        true: {
+            root: string;
+        };
+    };
+    active: {
+        true: {
+            root: string;
+        };
+        false: {};
+    };
+    disabled: {
+        true: {
+            root: string;
+        };
+        false: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    content: string;
+}, undefined, {
+    variant: {
+        underline: {
+            root: string;
+            content: string;
+        };
+        segmented: {
+            root: string;
+        };
+    };
+    layout: {
+        horizontal: {};
+        vertical: {
+            root: string;
+        };
+    };
+    align: {
+        start: {
+            root: string;
+        };
+        center: {
+            root: string;
+        };
+        end: {
+            root: string;
+        };
+    };
+    grow: {
+        true: {
+            root: string;
+        };
+    };
+    active: {
+        true: {
+            root: string;
+        };
+        false: {};
+    };
+    disabled: {
+        true: {
+            root: string;
+        };
+        false: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    content: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+    variant: {
+        underline: {
+            root: string;
+            content: string;
+        };
+        segmented: {
+            root: string;
+        };
+    };
+    layout: {
+        horizontal: {};
+        vertical: {
+            root: string;
+        };
+    };
+    align: {
+        start: {
+            root: string;
+        };
+        center: {
+            root: string;
+        };
+        end: {
+            root: string;
+        };
+    };
+    grow: {
+        true: {
+            root: string;
+        };
+    };
+    active: {
+        true: {
+            root: string;
+        };
+        false: {};
+    };
+    disabled: {
+        true: {
+            root: string;
+        };
+        false: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    content: string;
+}>>;

package/dist/components/tabs/tab/tab-styles.js

@@ -0,0 +1,89 @@
+import { tv } from "../../../utils/tv.js";
+import { TabLayout, TabVariant } from "../tab-props.js";
+//#region src/components/tabs/tab/tab-styles.ts
+/**
+* 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.
+*/
+var tabStyles = tv({
+	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]: { root: "w-full" }
+		},
+		align: {
+			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: { root: "grow" } },
+		active: {
+			true: { root: "text-rui-text" },
+			false: {}
+		},
+		disabled: {
+			true: { root: "cursor-not-allowed text-rui-text-disabled" },
+			false: { root: "cursor-pointer hover:text-rui-text" }
+		}
+	},
+	compoundVariants: [
+		{
+			variant: TabVariant.underline,
+			layout: TabLayout.horizontal,
+			class: { root: "h-10" }
+		},
+		{
+			variant: TabVariant.underline,
+			layout: TabLayout.horizontal,
+			disabled: false,
+			class: { content: "group-hover:bg-rui-hover" }
+		},
+		{
+			variant: TabVariant.underline,
+			layout: TabLayout.vertical,
+			class: {
+				root: "min-h-9 px-3",
+				content: "h-auto px-0 py-2"
+			}
+		},
+		{
+			variant: TabVariant.underline,
+			layout: TabLayout.vertical,
+			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",
+		active: false,
+		disabled: false
+	}
+});
+//#endregion
+export { tabStyles };
+
+//# sourceMappingURL=tab-styles.js.map

package/dist/components/tabs/tab/tab-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab-styles.js","names":[],"sources":["../../../../src/components/tabs/tab/tab-styles.ts"],"sourcesContent":["import { TabLayout, TabVariant } from '@/components/tabs/tab-props';\nimport { tv } from '@/utils/tv';\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 */\nexport const tabStyles = 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"],"mappings":";;;;;;;;AAQA,IAAa,YAAY,GAAG;CAC1B,OAAO;EACL,MAAM;GACJ;GACA;GAEA;EACF,CAAC,CAAC,KAAK,GAAG;EACV,SAAS;CACX;CACA,UAAU;EACR,SAAS;IACN,WAAW,YAAY;IAAE,MAAM;IAAQ,SAAS;GAAW;IAE3D,WAAW,YAAY,EAAE,MAAM,eAAe;EACjD;EACA,QAAQ;IACL,UAAU,aAAa,CAAC;IACxB,UAAU,WAAW,EAAE,MAAM,SAAS;EACzC;EACA,OAAO;GACL,OAAO,EAAE,MAAM,yDAAyD;GACxE,QAAQ,EAAE,MAAM,6BAA6B;GAC7C,KAAK,EAAE,MAAM,yDAAyD;EACxE;EACA,MAAM,EACJ,MAAM,EAAE,MAAM,OAAO,EACvB;EACA,QAAQ;GACN,MAAM,EAAE,MAAM,gBAAgB;GAC9B,OAAO,CAAC;EACV;EACA,UAAU;GACR,MAAM,EAAE,MAAM,4CAA4C;GAC1D,OAAO,EAAE,MAAM,qCAAqC;EACtD;CACF;CACA,kBAAkB;EAChB;GAAE,SAAS,WAAW;GAAW,QAAQ,UAAU;GAAY,OAAO,EAAE,MAAM,OAAO;EAAE;EACvF;GAAE,SAAS,WAAW;GAAW,QAAQ,UAAU;GAAY,UAAU;GAAO,OAAO,EAAE,SAAS,2BAA2B;EAAE;EAE/H;GAAE,SAAS,WAAW;GAAW,QAAQ,UAAU;GAAU,OAAO;IAAE,MAAM;IAAgB,SAAS;GAAmB;EAAE;EAC1H;GAAE,SAAS,WAAW;GAAW,QAAQ,UAAU;GAAU,UAAU;GAAO,OAAO,EAAE,MAAM,qBAAqB;EAAE;EACpH;GAAE,SAAS,WAAW;GAAW,QAAQ,UAAU;GAAU,QAAQ;GAAM,OAAO,EAAE,MAAM,eAAe;EAAE;CAC7G;CACA,iBAAiB;EACf,SAAS,WAAW;EACpB,QAAQ,UAAU;EAClB,OAAO;EACP,QAAQ;EACR,UAAU;CACZ;AACF,CAAC"}