@rotki/ui-library 2.16.3 → 2.17.1

package/dist/components/buttons/button/button-props.d.ts

@@ -9,6 +9,7 @@ export type ButtonVariant = (typeof ButtonVariant)[keyof typeof ButtonVariant];
 export declare const ButtonSize: {
     readonly sm: "sm";
     readonly lg: "lg";
+    readonly xl: "xl";
 };
 export type ButtonSize = (typeof ButtonSize)[keyof typeof ButtonSize];
 export declare const FAB_DEFAULT_ELEVATION = 6;

package/dist/components/buttons/button/button-props.js

@@ -8,7 +8,8 @@ var ButtonVariant = {
 };
 var SPINNER_SIZES = {
 	sm: 18,
-	lg: 26
+	lg: 26,
+	xl: 28
 };
 var DEFAULT_SPINNER_SIZE = 22;
 function getButtonSpinnerSize(size) {

package/dist/components/buttons/button/button-props.js.map

@@ -1 +1 @@
-{"version":3,"file":"button-props.js","names":[],"sources":["../../../../src/components/buttons/button/button-props.ts"],"sourcesContent":["export const ButtonVariant = {\n  default: 'default',\n  outlined: 'outlined',\n  text: 'text',\n  fab: 'fab',\n  list: 'list',\n} as const;\n\nexport type ButtonVariant = (typeof ButtonVariant)[keyof typeof ButtonVariant];\n\nexport const ButtonSize = {\n  sm: 'sm',\n  lg: 'lg',\n} as const;\n\nexport type ButtonSize = (typeof ButtonSize)[keyof typeof ButtonSize];\n\nconst SPINNER_SIZES: Record<string, number> = { sm: 18, lg: 26 };\nconst DEFAULT_SPINNER_SIZE = 22;\n\nexport const FAB_DEFAULT_ELEVATION = 6;\n\nexport const NO_ELEVATION = 0;\n\nexport function getButtonSpinnerSize(size?: ButtonSize): number {\n  return (size && SPINNER_SIZES[size]) || DEFAULT_SPINNER_SIZE;\n}\n"],"mappings":";AAAA,IAAa,gBAAgB;CAC3B,SAAS;CACT,UAAU;CACV,MAAM;CACN,KAAK;CACL,MAAM;CACP;AAWD,IAAM,gBAAwC;CAAE,IAAI;CAAI,IAAI;CAAI;AAChE,IAAM,uBAAuB;AAM7B,SAAgB,qBAAqB,MAA2B;AAC9D,QAAQ,QAAQ,cAAc,SAAU"}
+{"version":3,"file":"button-props.js","names":[],"sources":["../../../../src/components/buttons/button/button-props.ts"],"sourcesContent":["export const ButtonVariant = {\n  default: 'default',\n  outlined: 'outlined',\n  text: 'text',\n  fab: 'fab',\n  list: 'list',\n} as const;\n\nexport type ButtonVariant = (typeof ButtonVariant)[keyof typeof ButtonVariant];\n\nexport const ButtonSize = {\n  sm: 'sm',\n  lg: 'lg',\n  xl: 'xl',\n} as const;\n\nexport type ButtonSize = (typeof ButtonSize)[keyof typeof ButtonSize];\n\nconst SPINNER_SIZES: Record<string, number> = { sm: 18, lg: 26, xl: 28 };\nconst DEFAULT_SPINNER_SIZE = 22;\n\nexport const FAB_DEFAULT_ELEVATION = 6;\n\nexport const NO_ELEVATION = 0;\n\nexport function getButtonSpinnerSize(size?: ButtonSize): number {\n  return (size && SPINNER_SIZES[size]) || DEFAULT_SPINNER_SIZE;\n}\n"],"mappings":";AAAA,IAAa,gBAAgB;CAC3B,SAAS;CACT,UAAU;CACV,MAAM;CACN,KAAK;CACL,MAAM;CACP;AAYD,IAAM,gBAAwC;CAAE,IAAI;CAAI,IAAI;CAAI,IAAI;CAAI;AACxE,IAAM,uBAAuB;AAM7B,SAAgB,qBAAqB,MAA2B;AAC9D,QAAQ,QAAQ,cAAc,SAAU"}

package/dist/components/buttons/button/button-styles.d.ts

@@ -20,6 +20,9 @@ export declare const buttonStyles: import("tailwind-variants").TVReturnType<{
         lg: {
             root: string;
         };
+        xl: {
+            root: string;
+        };
     };
     color: {
         grey: {
@@ -95,6 +98,9 @@ export declare const buttonStyles: import("tailwind-variants").TVReturnType<{
         lg: {
             root: string;
         };
+        xl: {
+            root: string;
+        };
     };
     color: {
         grey: {
@@ -170,6 +176,9 @@ export declare const buttonStyles: import("tailwind-variants").TVReturnType<{
         lg: {
             root: string;
         };
+        xl: {
+            root: string;
+        };
     };
     color: {
         grey: {

package/dist/components/buttons/button/button-styles.js

@@ -6,6 +6,7 @@ var buttonStyles = tv({
 			"text-sm leading-5 font-medium outline outline-1 outline-transparent outline-offset-[-1px]",
 			"flex items-center justify-center gap-x-2",
 			"px-4 py-1.5 rounded transition-all",
+			"[&_.rui-icon]:w-[1.125rem] [&_.rui-icon]:h-[1.125rem]",
 			"disabled:cursor-not-allowed",
 			"focus-visible:!ring-2"
 		].join(" "),
@@ -24,8 +25,9 @@ var buttonStyles = tv({
 			}
 		},
 		size: {
-			sm: { root: "px-2.5 py-1 text-[.8125rem] leading-5" },
-			lg: { root: "px-6 py-2 text-[1rem] leading-5" }
+			sm: { root: "px-2.5 py-1 text-[.8125rem] leading-5 [&_.rui-icon]:!w-4 [&_.rui-icon]:!h-4" },
+			lg: { root: "px-6 py-2 text-[1rem] leading-5 [&_.rui-icon]:!w-5 [&_.rui-icon]:!h-5" },
+			xl: { root: "px-6 py-2.5 text-[1rem] leading-6 [&_.rui-icon]:!w-[1.375rem] [&_.rui-icon]:!h-[1.375rem]" }
 		},
 		color: {
 			grey: { root: "bg-rui-grey-200 hover:bg-rui-grey-100 active:bg-rui-grey-50 text-rui-text ring-rui-grey-400 dark:bg-rui-grey-300 dark:text-rui-light-text dark:ring-rui-grey-600" },
@@ -37,7 +39,7 @@ var buttonStyles = tv({
 			success: { root: "bg-rui-success hover:bg-rui-success-darker active:bg-rui-success-darker/90 text-rui-dark-text ring-rui-success/40 dark:text-rui-text dark:ring-rui-success/60" }
 		},
 		rounded: { true: { root: "rounded-full" } },
-		icon: { true: { root: "rounded-full px-3 py-3" } },
+		icon: { true: { root: "rounded-full" } },
 		active: {
 			true: {},
 			false: {}
@@ -301,15 +303,24 @@ var buttonStyles = tv({
 			size: "sm",
 			class: { root: "px-3 py-1" }
 		},
+		{
+			icon: true,
+			class: { root: "p-1.5 [&_.rui-icon]:!w-5 [&_.rui-icon]:!h-5" }
+		},
 		{
 			icon: true,
 			size: "sm",
-			class: { root: "px-1 py-1" }
+			class: { root: "p-1 [&_.rui-icon]:!w-5 [&_.rui-icon]:!h-5" }
 		},
 		{
 			icon: true,
 			size: "lg",
-			class: { root: "px-4 py-4" }
+			class: { root: "p-1.5 [&_.rui-icon]:!w-6 [&_.rui-icon]:!h-6" }
+		},
+		{
+			icon: true,
+			size: "xl",
+			class: { root: "p-2 [&_.rui-icon]:!w-7 [&_.rui-icon]:!h-7" }
 		},
 		{
 			variant: "fab",

package/dist/components/buttons/button/button-styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"button-styles.js","names":[],"sources":["../../../../src/components/buttons/button/button-styles.ts"],"sourcesContent":["import { tv } from '@/utils/tv';\n\nexport const buttonStyles = tv({\n  slots: {\n    root: [\n      'text-sm leading-5 font-medium outline outline-1 outline-transparent outline-offset-[-1px]',\n      // `position: relative` is only needed as a positioning context for the\n      // absolute-positioned loading spinner; applied via the `loading` variant\n      // below. Putting it here would collide with consumers that need to pin\n      // the button with `fixed`/`absolute` (cascade order picks the later\n      // utility — usually `relative` — and the consumer's `right-*`/`bottom-*`\n      // end up as relative offsets, which misplaces FABs).\n      'flex items-center justify-center gap-x-2',\n      'px-4 py-1.5 rounded transition-all',\n      // `disabled` on the element covers two states: actually disabled and\n      // loading (RuiButton sets `disabled = disabled || loading`). The\n      // color/bg/text overrides for the \"grey disabled\" look live in the\n      // `loading: false` compounds below so they skip firing on loading\n      // buttons — where we want the variant color to stay visible behind\n      // the spinner. Cursor stays here since both states are non-clickable.\n      'disabled:cursor-not-allowed',\n      'focus-visible:!ring-2',\n    ].join(' '),\n    label: 'inline-block text-nowrap',\n    spinner: 'absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2',\n  },\n  variants: {\n    variant: {\n      default: {},\n      outlined: {},\n      text: { root: 'px-2' },\n      fab: { root: 'rounded-full py-2' },\n      list: { root: 'p-3 px-3 rounded-none w-full justify-start text-left', label: 'w-full' },\n    },\n    size: {\n      sm: { root: 'px-2.5 py-1 text-[.8125rem] leading-5' },\n      lg: { root: 'px-6 py-2 text-[1rem] leading-5' },\n    },\n    color: {\n      grey: { root: 'bg-rui-grey-200 hover:bg-rui-grey-100 active:bg-rui-grey-50 text-rui-text ring-rui-grey-400 dark:bg-rui-grey-300 dark:text-rui-light-text dark:ring-rui-grey-600' },\n      primary: { root: 'bg-rui-primary hover:bg-rui-primary-darker active:bg-rui-primary-darker/90 text-rui-dark-text ring-rui-primary/40 dark:text-rui-text dark:ring-rui-primary/60' },\n      secondary: { root: 'bg-rui-secondary hover:bg-rui-secondary-darker active:bg-rui-secondary-darker/90 text-rui-dark-text ring-rui-secondary/40 dark:text-rui-text dark:ring-rui-secondary/60' },\n      error: { root: 'bg-rui-error hover:bg-rui-error-darker active:bg-rui-error-darker/90 text-rui-dark-text ring-rui-error/40 dark:text-rui-text dark:ring-rui-error/60' },\n      warning: { root: 'bg-rui-warning hover:bg-rui-warning-darker active:bg-rui-warning-darker/90 text-rui-dark-text ring-rui-warning/40 dark:text-rui-text dark:ring-rui-warning/60' },\n      info: { root: 'bg-rui-info hover:bg-rui-info-darker active:bg-rui-info-darker/90 text-rui-dark-text ring-rui-info/40 dark:text-rui-text dark:ring-rui-info/60' },\n      success: { root: 'bg-rui-success hover:bg-rui-success-darker active:bg-rui-success-darker/90 text-rui-dark-text ring-rui-success/40 dark:text-rui-text dark:ring-rui-success/60' },\n    },\n    rounded: {\n      true: { root: 'rounded-full' },\n    },\n    icon: {\n      true: { root: 'rounded-full px-3 py-3' },\n    },\n    active: {\n      true: {},\n      false: {},\n    },\n    loading: {\n      true: { root: 'relative !cursor-progress space-x-0 [&>*:not([data-spinner])]:opacity-0 [&>*:not([data-spinner])]:invisible' },\n      false: {},\n    },\n    hideFocusIndicator: {\n      true: { root: 'focus-visible:!ring-0' },\n    },\n  },\n  compoundVariants: [\n    // === Disabled (not loading) appearance ===\n    // Applied only when `loading: false` so that loading buttons keep their\n    // variant color/outline visible behind the spinner; pure disabled buttons\n    // fade to the Material disabled palette.\n    { loading: false, class: { root: 'disabled:!bg-black/[.12] dark:disabled:!bg-white/[.12] disabled:!text-rui-text-disabled disabled:active:!text-rui-text-disabled' } },\n    { loading: false, variant: 'outlined', class: { root: 'disabled:!bg-transparent dark:disabled:!bg-transparent disabled:active:!bg-transparent disabled:outline-rui-text-disabled' } },\n    { loading: false, variant: 'text', class: { root: 'disabled:!bg-transparent dark:disabled:!bg-transparent disabled:active:!bg-transparent' } },\n    { loading: false, variant: 'list', class: { root: 'disabled:!bg-transparent dark:disabled:!bg-transparent disabled:active:!bg-transparent' } },\n\n    // === Grey color variants ===\n    { color: 'grey', active: true, class: { root: 'bg-rui-grey-50' } },\n    { color: 'grey', variant: ['outlined', 'text', 'list'], class: { root: 'bg-transparent hover:bg-black/[.04] active:bg-black/10 dark:bg-transparent dark:active:bg-white/10 dark:hover:bg-white/[.04] dark:text-rui-text' } },\n    { color: 'grey', variant: ['outlined', 'text', 'list'], active: true, class: { root: 'bg-black/10 dark:bg-white/30' } },\n    { color: 'grey', variant: 'outlined', class: { root: 'outline-rui-text' } },\n    { color: 'grey', variant: 'text', class: { root: 'text-rui-text-secondary' } },\n\n    // === Context colors — outlined/text variants ===\n    // `dark:text-rui-<color>` is required to beat `dark:text-rui-text` set by\n    // the base color variant (meant for filled buttons where text sits on a\n    // colored bg). Without the override, outlined/text/list buttons in dark\n    // mode render white text against a themed outline/underline.\n    { color: 'primary', variant: ['outlined', 'text', 'list'], class: { root: 'bg-transparent hover:bg-rui-primary-lighter/[.04] active:bg-rui-primary-lighter/10 text-rui-primary dark:text-rui-primary' } },\n    { color: 'secondary', variant: ['outlined', 'text', 'list'], class: { root: 'bg-transparent hover:bg-rui-secondary-lighter/[.04] active:bg-rui-secondary-lighter/10 text-rui-secondary dark:text-rui-secondary' } },\n    { color: 'error', variant: ['outlined', 'text', 'list'], class: { root: 'bg-transparent hover:bg-rui-error-lighter/[.04] active:bg-rui-error-lighter/10 text-rui-error dark:text-rui-error' } },\n    { color: 'warning', variant: ['outlined', 'text', 'list'], class: { root: 'bg-transparent hover:bg-rui-warning-lighter/[.04] active:bg-rui-warning-lighter/10 text-rui-warning dark:text-rui-warning' } },\n    { color: 'info', variant: ['outlined', 'text', 'list'], class: { root: 'bg-transparent hover:bg-rui-info-lighter/[.04] active:bg-rui-info-lighter/10 text-rui-info dark:text-rui-info' } },\n    { color: 'success', variant: ['outlined', 'text', 'list'], class: { root: 'bg-transparent hover:bg-rui-success-lighter/[.04] active:bg-rui-success-lighter/10 text-rui-success dark:text-rui-success' } },\n\n    // === Context colors — active default ===\n    { color: 'primary', active: true, class: { root: 'bg-rui-primary-darker' } },\n    { color: 'secondary', active: true, class: { root: 'bg-rui-secondary-darker' } },\n    { color: 'error', active: true, class: { root: 'bg-rui-error-darker' } },\n    { color: 'warning', active: true, class: { root: 'bg-rui-warning-darker' } },\n    { color: 'info', active: true, class: { root: 'bg-rui-info-darker' } },\n    { color: 'success', active: true, class: { root: 'bg-rui-success-darker' } },\n\n    // === Context colors — active outlined/text ===\n    { color: 'primary', variant: ['outlined', 'text', 'list'], active: true, class: { root: 'bg-rui-primary-lighter/30' } },\n    { color: 'secondary', variant: ['outlined', 'text', 'list'], active: true, class: { root: 'bg-rui-secondary-lighter/30' } },\n    { color: 'error', variant: ['outlined', 'text', 'list'], active: true, class: { root: 'bg-rui-error-lighter/30' } },\n    { color: 'warning', variant: ['outlined', 'text', 'list'], active: true, class: { root: 'bg-rui-warning-lighter/30' } },\n    { color: 'info', variant: ['outlined', 'text', 'list'], active: true, class: { root: 'bg-rui-info-lighter/30' } },\n    { color: 'success', variant: ['outlined', 'text', 'list'], active: true, class: { root: 'bg-rui-success-lighter/30' } },\n\n    // === Context colors — outlined border ===\n    { color: 'primary', variant: 'outlined', class: { root: 'outline-rui-primary/[0.5]' } },\n    { color: 'secondary', variant: 'outlined', class: { root: 'outline-rui-secondary/[0.5]' } },\n    { color: 'error', variant: 'outlined', class: { root: 'outline-rui-error/[0.5]' } },\n    { color: 'warning', variant: 'outlined', class: { root: 'outline-rui-warning/[0.5]' } },\n    { color: 'info', variant: 'outlined', class: { root: 'outline-rui-info/[0.5]' } },\n    { color: 'success', variant: 'outlined', class: { root: 'outline-rui-success/[0.5]' } },\n\n    // === Size overrides per variant ===\n    { variant: 'text', size: 'sm', class: { root: 'px-1.5' } },\n    { variant: 'text', size: 'lg', class: { root: 'px-2.5' } },\n    { variant: 'fab', size: 'sm', class: { root: 'py-1.5 px-2' } },\n    { variant: 'fab', size: 'lg', class: { root: 'py-3' } },\n    { variant: 'list', size: 'sm', class: { root: 'px-3 py-1' } },\n    { icon: true, size: 'sm', class: { root: 'px-1 py-1' } },\n    { icon: true, size: 'lg', class: { root: 'px-4 py-4' } },\n    { variant: 'fab', icon: true, size: 'sm', class: { root: 'px-2 py-2' } },\n  ],\n  compoundSlots: [\n    // Dark mode default variant text override for warning/success/info\n    { slots: ['root'], color: ['warning', 'success', 'info'], variant: 'default', class: 'dark:text-rui-light-text' },\n    // Dark mode active outlined/text override for primary/secondary\n    { slots: ['root'], color: 'primary', variant: ['outlined', 'text', 'list'], active: true, class: 'dark:bg-rui-primary-darker/60 dark:text-rui-primary-lighter' },\n    { slots: ['root'], color: 'secondary', variant: ['outlined', 'text', 'list'], active: true, class: 'dark:bg-rui-secondary-darker/60 dark:text-rui-secondary-lighter' },\n  ],\n  defaultVariants: {\n    variant: 'default',\n    color: 'grey',\n    active: false,\n  },\n});\n"],"mappings":"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"}
+{"version":3,"file":"button-styles.js","names":[],"sources":["../../../../src/components/buttons/button/button-styles.ts"],"sourcesContent":["import { tv } from '@/utils/tv';\n\nexport const buttonStyles = tv({\n  slots: {\n    root: [\n      'text-sm leading-5 font-medium outline outline-1 outline-transparent outline-offset-[-1px]',\n      // `position: relative` is only needed as a positioning context for the\n      // absolute-positioned loading spinner; applied via the `loading` variant\n      // below. Putting it here would collide with consumers that need to pin\n      // the button with `fixed`/`absolute` (cascade order picks the later\n      // utility — usually `relative` — and the consumer's `right-*`/`bottom-*`\n      // end up as relative offsets, which misplaces FABs).\n      'flex items-center justify-center gap-x-2',\n      'px-4 py-1.5 rounded transition-all',\n      // Default (md) icon sizing for RuiIcons in button slots (prepend/append\n      // /default). Size variants below override this via `!` so the rule\n      // specificity wins regardless of CSS source order.\n      '[&_.rui-icon]:w-[1.125rem] [&_.rui-icon]:h-[1.125rem]',\n      // `disabled` on the element covers two states: actually disabled and\n      // loading (RuiButton sets `disabled = disabled || loading`). The\n      // color/bg/text overrides for the \"grey disabled\" look live in the\n      // `loading: false` compounds below so they skip firing on loading\n      // buttons — where we want the variant color to stay visible behind\n      // the spinner. Cursor stays here since both states are non-clickable.\n      'disabled:cursor-not-allowed',\n      'focus-visible:!ring-2',\n    ].join(' '),\n    label: 'inline-block text-nowrap',\n    spinner: 'absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2',\n  },\n  variants: {\n    variant: {\n      default: {},\n      outlined: {},\n      text: { root: 'px-2' },\n      fab: { root: 'rounded-full py-2' },\n      list: { root: 'p-3 px-3 rounded-none w-full justify-start text-left', label: 'w-full' },\n    },\n    size: {\n      // Each size variant sets a matching descendant rule so RuiIcons in\n      // button slots (prepend/append/default) inherit a size proportional to\n      // the button's height. The `.rui-icon` class sits on the icon's <svg>\n      // and its `w-6 h-6` default (set by RuiIcon when no size prop is\n      // passed) is overridden here because the descendant selector is more\n      // specific. `!` guarantees size variants beat the md default baked\n      // into the base root regardless of CSS source order. Consumers can\n      // still force a specific icon size by passing the `size` prop on\n      // RuiIcon — that path stamps inline width/height which beats classes.\n      sm: { root: 'px-2.5 py-1 text-[.8125rem] leading-5 [&_.rui-icon]:!w-4 [&_.rui-icon]:!h-4' },\n      lg: { root: 'px-6 py-2 text-[1rem] leading-5 [&_.rui-icon]:!w-5 [&_.rui-icon]:!h-5' },\n      xl: { root: 'px-6 py-2.5 text-[1rem] leading-6 [&_.rui-icon]:!w-[1.375rem] [&_.rui-icon]:!h-[1.375rem]' },\n    },\n    color: {\n      grey: { root: 'bg-rui-grey-200 hover:bg-rui-grey-100 active:bg-rui-grey-50 text-rui-text ring-rui-grey-400 dark:bg-rui-grey-300 dark:text-rui-light-text dark:ring-rui-grey-600' },\n      primary: { root: 'bg-rui-primary hover:bg-rui-primary-darker active:bg-rui-primary-darker/90 text-rui-dark-text ring-rui-primary/40 dark:text-rui-text dark:ring-rui-primary/60' },\n      secondary: { root: 'bg-rui-secondary hover:bg-rui-secondary-darker active:bg-rui-secondary-darker/90 text-rui-dark-text ring-rui-secondary/40 dark:text-rui-text dark:ring-rui-secondary/60' },\n      error: { root: 'bg-rui-error hover:bg-rui-error-darker active:bg-rui-error-darker/90 text-rui-dark-text ring-rui-error/40 dark:text-rui-text dark:ring-rui-error/60' },\n      warning: { root: 'bg-rui-warning hover:bg-rui-warning-darker active:bg-rui-warning-darker/90 text-rui-dark-text ring-rui-warning/40 dark:text-rui-text dark:ring-rui-warning/60' },\n      info: { root: 'bg-rui-info hover:bg-rui-info-darker active:bg-rui-info-darker/90 text-rui-dark-text ring-rui-info/40 dark:text-rui-text dark:ring-rui-info/60' },\n      success: { root: 'bg-rui-success hover:bg-rui-success-darker active:bg-rui-success-darker/90 text-rui-dark-text ring-rui-success/40 dark:text-rui-text dark:ring-rui-success/60' },\n    },\n    rounded: {\n      true: { root: 'rounded-full' },\n    },\n    icon: {\n      // Padding and icon sizing live in the `icon + size` compound variants\n      // below so every size resolves to a height matching its text-button\n      // counterpart; this base only contributes the round shape.\n      true: { root: 'rounded-full' },\n    },\n    active: {\n      true: {},\n      false: {},\n    },\n    loading: {\n      true: { root: 'relative !cursor-progress space-x-0 [&>*:not([data-spinner])]:opacity-0 [&>*:not([data-spinner])]:invisible' },\n      false: {},\n    },\n    hideFocusIndicator: {\n      true: { root: 'focus-visible:!ring-0' },\n    },\n  },\n  compoundVariants: [\n    // === Disabled (not loading) appearance ===\n    // Applied only when `loading: false` so that loading buttons keep their\n    // variant color/outline visible behind the spinner; pure disabled buttons\n    // fade to the Material disabled palette.\n    { loading: false, class: { root: 'disabled:!bg-black/[.12] dark:disabled:!bg-white/[.12] disabled:!text-rui-text-disabled disabled:active:!text-rui-text-disabled' } },\n    { loading: false, variant: 'outlined', class: { root: 'disabled:!bg-transparent dark:disabled:!bg-transparent disabled:active:!bg-transparent disabled:outline-rui-text-disabled' } },\n    { loading: false, variant: 'text', class: { root: 'disabled:!bg-transparent dark:disabled:!bg-transparent disabled:active:!bg-transparent' } },\n    { loading: false, variant: 'list', class: { root: 'disabled:!bg-transparent dark:disabled:!bg-transparent disabled:active:!bg-transparent' } },\n\n    // === Grey color variants ===\n    { color: 'grey', active: true, class: { root: 'bg-rui-grey-50' } },\n    { color: 'grey', variant: ['outlined', 'text', 'list'], class: { root: 'bg-transparent hover:bg-black/[.04] active:bg-black/10 dark:bg-transparent dark:active:bg-white/10 dark:hover:bg-white/[.04] dark:text-rui-text' } },\n    { color: 'grey', variant: ['outlined', 'text', 'list'], active: true, class: { root: 'bg-black/10 dark:bg-white/30' } },\n    { color: 'grey', variant: 'outlined', class: { root: 'outline-rui-text' } },\n    { color: 'grey', variant: 'text', class: { root: 'text-rui-text-secondary' } },\n\n    // === Context colors — outlined/text variants ===\n    // `dark:text-rui-<color>` is required to beat `dark:text-rui-text` set by\n    // the base color variant (meant for filled buttons where text sits on a\n    // colored bg). Without the override, outlined/text/list buttons in dark\n    // mode render white text against a themed outline/underline.\n    { color: 'primary', variant: ['outlined', 'text', 'list'], class: { root: 'bg-transparent hover:bg-rui-primary-lighter/[.04] active:bg-rui-primary-lighter/10 text-rui-primary dark:text-rui-primary' } },\n    { color: 'secondary', variant: ['outlined', 'text', 'list'], class: { root: 'bg-transparent hover:bg-rui-secondary-lighter/[.04] active:bg-rui-secondary-lighter/10 text-rui-secondary dark:text-rui-secondary' } },\n    { color: 'error', variant: ['outlined', 'text', 'list'], class: { root: 'bg-transparent hover:bg-rui-error-lighter/[.04] active:bg-rui-error-lighter/10 text-rui-error dark:text-rui-error' } },\n    { color: 'warning', variant: ['outlined', 'text', 'list'], class: { root: 'bg-transparent hover:bg-rui-warning-lighter/[.04] active:bg-rui-warning-lighter/10 text-rui-warning dark:text-rui-warning' } },\n    { color: 'info', variant: ['outlined', 'text', 'list'], class: { root: 'bg-transparent hover:bg-rui-info-lighter/[.04] active:bg-rui-info-lighter/10 text-rui-info dark:text-rui-info' } },\n    { color: 'success', variant: ['outlined', 'text', 'list'], class: { root: 'bg-transparent hover:bg-rui-success-lighter/[.04] active:bg-rui-success-lighter/10 text-rui-success dark:text-rui-success' } },\n\n    // === Context colors — active default ===\n    { color: 'primary', active: true, class: { root: 'bg-rui-primary-darker' } },\n    { color: 'secondary', active: true, class: { root: 'bg-rui-secondary-darker' } },\n    { color: 'error', active: true, class: { root: 'bg-rui-error-darker' } },\n    { color: 'warning', active: true, class: { root: 'bg-rui-warning-darker' } },\n    { color: 'info', active: true, class: { root: 'bg-rui-info-darker' } },\n    { color: 'success', active: true, class: { root: 'bg-rui-success-darker' } },\n\n    // === Context colors — active outlined/text ===\n    { color: 'primary', variant: ['outlined', 'text', 'list'], active: true, class: { root: 'bg-rui-primary-lighter/30' } },\n    { color: 'secondary', variant: ['outlined', 'text', 'list'], active: true, class: { root: 'bg-rui-secondary-lighter/30' } },\n    { color: 'error', variant: ['outlined', 'text', 'list'], active: true, class: { root: 'bg-rui-error-lighter/30' } },\n    { color: 'warning', variant: ['outlined', 'text', 'list'], active: true, class: { root: 'bg-rui-warning-lighter/30' } },\n    { color: 'info', variant: ['outlined', 'text', 'list'], active: true, class: { root: 'bg-rui-info-lighter/30' } },\n    { color: 'success', variant: ['outlined', 'text', 'list'], active: true, class: { root: 'bg-rui-success-lighter/30' } },\n\n    // === Context colors — outlined border ===\n    { color: 'primary', variant: 'outlined', class: { root: 'outline-rui-primary/[0.5]' } },\n    { color: 'secondary', variant: 'outlined', class: { root: 'outline-rui-secondary/[0.5]' } },\n    { color: 'error', variant: 'outlined', class: { root: 'outline-rui-error/[0.5]' } },\n    { color: 'warning', variant: 'outlined', class: { root: 'outline-rui-warning/[0.5]' } },\n    { color: 'info', variant: 'outlined', class: { root: 'outline-rui-info/[0.5]' } },\n    { color: 'success', variant: 'outlined', class: { root: 'outline-rui-success/[0.5]' } },\n\n    // === Size overrides per variant ===\n    { variant: 'text', size: 'sm', class: { root: 'px-1.5' } },\n    { variant: 'text', size: 'lg', class: { root: 'px-2.5' } },\n    { variant: 'fab', size: 'sm', class: { root: 'py-1.5 px-2' } },\n    { variant: 'fab', size: 'lg', class: { root: 'py-3' } },\n    { variant: 'list', size: 'sm', class: { root: 'px-3 py-1' } },\n    // Icon-only button sizing — every size lands at the same height as the\n    // text button of the matching size, with a ~60–70% icon ratio (Material-3\n    // style). The `size` rule sizes icons to 16/20/22px for text-button\n    // prepend/append slots; here icon-only buttons get a larger glyph so they\n    // don't look lost in the square. All values use standard Tailwind tokens\n    // (rem-based): p-1 = 0.25rem, p-1.5 = 0.375rem, p-2 = 0.5rem; w-5/6/7 =\n    // 1.25/1.5/1.75rem. Prior `px-3 py-3` on icon base + `px-4 py-4` on lg\n    // compound produced 42px (md) and 52px (lg) squares that dwarfed\n    // neighboring text buttons in toolbars.\n    //\n    // md (default): p-1.5 + w-5  icon = 0.75 + 1.25 = 2rem   (32px)\n    // sm:           p-1   + w-5  icon = 0.5  + 1.25 = 1.75rem (28px)\n    // lg:           p-1.5 + w-6  icon = 0.75 + 1.5  = 2.25rem (36px)\n    // xl:           p-2   + w-7  icon = 1    + 1.75 = 2.75rem (44px)\n    { icon: true, class: { root: 'p-1.5 [&_.rui-icon]:!w-5 [&_.rui-icon]:!h-5' } },\n    { icon: true, size: 'sm', class: { root: 'p-1 [&_.rui-icon]:!w-5 [&_.rui-icon]:!h-5' } },\n    { icon: true, size: 'lg', class: { root: 'p-1.5 [&_.rui-icon]:!w-6 [&_.rui-icon]:!h-6' } },\n    { icon: true, size: 'xl', class: { root: 'p-2 [&_.rui-icon]:!w-7 [&_.rui-icon]:!h-7' } },\n    { variant: 'fab', icon: true, size: 'sm', class: { root: 'px-2 py-2' } },\n  ],\n  compoundSlots: [\n    // Dark mode default variant text override for warning/success/info\n    { slots: ['root'], color: ['warning', 'success', 'info'], variant: 'default', class: 'dark:text-rui-light-text' },\n    // Dark mode active outlined/text override for primary/secondary\n    { slots: ['root'], color: 'primary', variant: ['outlined', 'text', 'list'], active: true, class: 'dark:bg-rui-primary-darker/60 dark:text-rui-primary-lighter' },\n    { slots: ['root'], color: 'secondary', variant: ['outlined', 'text', 'list'], active: true, class: 'dark:bg-rui-secondary-darker/60 dark:text-rui-secondary-lighter' },\n  ],\n  defaultVariants: {\n    variant: 'default',\n    color: 'grey',\n    active: false,\n  },\n});\n"],"mappings":"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"}

package/dist/components/buttons/button-group/RuiButtonGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiButtonGroup.js","names":[],"sources":["../../../../src/components/buttons/button-group/RuiButtonGroup.vue"],"sourcesContent":["<script lang=\"ts\" generic=\"T = undefined\" setup>\nimport type { ContextColorsType } from '@/consts/colors';\nimport { Fragment, isVNode } from 'vue';\nimport { tv } from '@/utils/tv';\n\nexport interface Props {\n  vertical?: boolean;\n  color?: ContextColorsType;\n  activeColor?: ContextColorsType;\n  variant?: 'default' | 'outlined' | 'text';\n  size?: 'sm' | 'lg';\n  gap?: 'sm' | 'md' | 'lg';\n  required?: boolean;\n  disabled?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiButtonGroup',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<T | T[]>();\n\nconst {\n  vertical = false,\n  color,\n  activeColor,\n  variant = 'default',\n  size,\n  gap,\n  required = false,\n  disabled = false,\n} = defineProps<Props>();\n\nconst slots = useSlots();\n\nconst buttonGroupStyles = tv({\n  slots: {\n    root: 'inline-flex rounded divide-x divide-rui-grey-400 outline outline-1 outline-transparent outline-offset-[-1px]',\n    button: 'border-0 outline-0 focus:z-[1]',\n  },\n  variants: {\n    vertical: {\n      true: {\n        root: 'flex-col items-start divide-x-0 divide-y',\n        button: 'w-full',\n      },\n      false: {},\n    },\n    gap: {\n      none: {\n        button: '!rounded-none',\n      },\n      sm: {\n        root: 'divide-x-0 divide-y-0 outline-0 gap-2',\n        button: 'outline-1',\n      },\n      md: {\n        root: 'divide-x-0 divide-y-0 outline-0 gap-4',\n        button: 'outline-1',\n      },\n      lg: {\n        root: 'divide-x-0 divide-y-0 outline-0 gap-6',\n        button: 'outline-1',\n      },\n    },\n    variant: {\n      default: {},\n      outlined: {\n        root: 'outline-rui-text divide-rui-text',\n      },\n      text: {},\n    },\n    color: {\n      primary: {},\n      secondary: {},\n      error: {},\n      warning: {},\n      info: {},\n      success: {},\n    },\n  },\n  compoundVariants: [\n    // First/last child rounding when not separated (! needed to override RuiButton's CSS module border-radius)\n    { gap: 'none', vertical: false, class: { button: 'first:!rounded-l last:!rounded-r' } },\n    { gap: 'none', vertical: true, class: { button: 'first:!rounded-t last:!rounded-b' } },\n\n    // Color dividers (default variant)\n    { color: 'primary', class: { root: 'divide-rui-primary-darker' } },\n    { color: 'secondary', class: { root: 'divide-rui-secondary-darker' } },\n    { color: 'error', class: { root: 'divide-rui-error-darker' } },\n    { color: 'warning', class: { root: 'divide-rui-warning-darker' } },\n    { color: 'info', class: { root: 'divide-rui-info-darker' } },\n    { color: 'success', class: { root: 'divide-rui-success-darker' } },\n\n    // Color dividers for outlined/text (overrides darker dividers above)\n    { color: 'primary', variant: ['outlined', 'text'], class: { root: 'divide-rui-primary/[0.5]' } },\n    { color: 'secondary', variant: ['outlined', 'text'], class: { root: 'divide-rui-secondary/[0.5]' } },\n    { color: 'error', variant: ['outlined', 'text'], class: { root: 'divide-rui-error/[0.5]' } },\n    { color: 'warning', variant: ['outlined', 'text'], class: { root: 'divide-rui-warning/[0.5]' } },\n    { color: 'info', variant: ['outlined', 'text'], class: { root: 'divide-rui-info/[0.5]' } },\n    { color: 'success', variant: ['outlined', 'text'], class: { root: 'divide-rui-success/[0.5]' } },\n\n    // Color outline for outlined variant\n    { color: 'primary', variant: 'outlined', class: { root: 'outline-rui-primary/[0.5]' } },\n    { color: 'secondary', variant: 'outlined', class: { root: 'outline-rui-secondary/[0.5]' } },\n    { color: 'error', variant: 'outlined', class: { root: 'outline-rui-error/[0.5]' } },\n    { color: 'warning', variant: 'outlined', class: { root: 'outline-rui-warning/[0.5]' } },\n    { color: 'info', variant: 'outlined', class: { root: 'outline-rui-info/[0.5]' } },\n    { color: 'success', variant: 'outlined', class: { root: 'outline-rui-success/[0.5]' } },\n  ],\n  defaultVariants: {\n    vertical: false,\n    gap: 'none',\n    variant: 'default',\n  },\n});\n\nconst ui = computed<ReturnType<typeof buttonGroupStyles>>(() => buttonGroupStyles({\n  vertical,\n  gap: gap ?? 'none',\n  variant,\n  color,\n}));\n\nconst children = computed<VNode[]>(() => {\n  const selectedValue: T | T[] | undefined = get(modelValue);\n  const slotContent = slots.default?.() ?? [];\n  const resolved = flattenSlotContent(slotContent);\n\n  return resolved.map((child, i) => {\n    // child props are in kebab-case\n    const value = child.props?.['model-value'];\n    const active = isActive(value ?? i, selectedValue);\n    const resolvedColor = active && activeColor ? activeColor : color;\n\n    child.props = {\n      ...child.props,\n      active,\n      ...(disabled && { disabled: true }),\n      ...(resolvedColor && { color: resolvedColor }),\n    };\n\n    return child;\n  });\n});\n\n/**\n * Flattens slot content by unwrapping Fragments (created by v-for).\n * Returns only actual VNode children.\n */\nfunction flattenSlotContent(nodes: VNode[]): VNode[] {\n  return nodes.flatMap((node) => {\n    if (node.type === Fragment && Array.isArray(node.children) && node.children.length > 0)\n      return flattenSlotContent(node.children.filter(isVNode));\n\n    return [node];\n  });\n}\n\nfunction isActive(id: T, selected?: T | T[]): boolean {\n  if (Array.isArray(selected))\n    return selected.includes(id);\n\n  return selected === id;\n}\n\nfunction onClick(id: T): void {\n  const selected = get(modelValue);\n\n  if (Array.isArray(selected)) {\n    const index = selected.indexOf(id);\n    if (index >= 0) {\n      if (required && selected.length === 1)\n        return;\n\n      set(modelValue, selected.filter((_, i) => i !== index));\n    }\n    else {\n      set(modelValue, [...selected, id]);\n    }\n  }\n  else if (required) {\n    set(modelValue, id);\n  }\n  else {\n    set(modelValue, isActive(id, selected) ? undefined : id);\n  }\n}\n</script>\n\n<template>\n  <div\n    :class=\"ui.root()\"\n    v-bind=\"$attrs\"\n  >\n    <Component\n      :is=\"child\"\n      v-for=\"(child, i) in children\"\n      :key=\"i\"\n      :class=\"ui.button()\"\n      :size=\"size\"\n      :variant=\"variant\"\n      @update:model-value=\"onClick($event ?? i)\"\n    />\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"RuiButtonGroup.js","names":[],"sources":["../../../../src/components/buttons/button-group/RuiButtonGroup.vue"],"sourcesContent":["<script lang=\"ts\" generic=\"T = undefined\" setup>\nimport type { ButtonSize } from '@/components/buttons/button/button-props';\nimport type { ContextColorsType } from '@/consts/colors';\nimport { Fragment, isVNode } from 'vue';\nimport { tv } from '@/utils/tv';\n\nexport interface Props {\n  vertical?: boolean;\n  color?: ContextColorsType;\n  activeColor?: ContextColorsType;\n  variant?: 'default' | 'outlined' | 'text';\n  size?: ButtonSize;\n  gap?: 'sm' | 'md' | 'lg';\n  required?: boolean;\n  disabled?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiButtonGroup',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<T | T[]>();\n\nconst {\n  vertical = false,\n  color,\n  activeColor,\n  variant = 'default',\n  size,\n  gap,\n  required = false,\n  disabled = false,\n} = defineProps<Props>();\n\nconst slots = useSlots();\n\nconst buttonGroupStyles = tv({\n  slots: {\n    root: 'inline-flex rounded divide-x divide-rui-grey-400 outline outline-1 outline-transparent outline-offset-[-1px]',\n    button: 'border-0 outline-0 focus:z-[1]',\n  },\n  variants: {\n    vertical: {\n      true: {\n        root: 'flex-col items-start divide-x-0 divide-y',\n        button: 'w-full',\n      },\n      false: {},\n    },\n    gap: {\n      none: {\n        button: '!rounded-none',\n      },\n      sm: {\n        root: 'divide-x-0 divide-y-0 outline-0 gap-2',\n        button: 'outline-1',\n      },\n      md: {\n        root: 'divide-x-0 divide-y-0 outline-0 gap-4',\n        button: 'outline-1',\n      },\n      lg: {\n        root: 'divide-x-0 divide-y-0 outline-0 gap-6',\n        button: 'outline-1',\n      },\n    },\n    variant: {\n      default: {},\n      outlined: {\n        root: 'outline-rui-text divide-rui-text',\n      },\n      text: {},\n    },\n    color: {\n      primary: {},\n      secondary: {},\n      error: {},\n      warning: {},\n      info: {},\n      success: {},\n    },\n  },\n  compoundVariants: [\n    // First/last child rounding when not separated (! needed to override RuiButton's CSS module border-radius)\n    { gap: 'none', vertical: false, class: { button: 'first:!rounded-l last:!rounded-r' } },\n    { gap: 'none', vertical: true, class: { button: 'first:!rounded-t last:!rounded-b' } },\n\n    // Color dividers (default variant)\n    { color: 'primary', class: { root: 'divide-rui-primary-darker' } },\n    { color: 'secondary', class: { root: 'divide-rui-secondary-darker' } },\n    { color: 'error', class: { root: 'divide-rui-error-darker' } },\n    { color: 'warning', class: { root: 'divide-rui-warning-darker' } },\n    { color: 'info', class: { root: 'divide-rui-info-darker' } },\n    { color: 'success', class: { root: 'divide-rui-success-darker' } },\n\n    // Color dividers for outlined/text (overrides darker dividers above)\n    { color: 'primary', variant: ['outlined', 'text'], class: { root: 'divide-rui-primary/[0.5]' } },\n    { color: 'secondary', variant: ['outlined', 'text'], class: { root: 'divide-rui-secondary/[0.5]' } },\n    { color: 'error', variant: ['outlined', 'text'], class: { root: 'divide-rui-error/[0.5]' } },\n    { color: 'warning', variant: ['outlined', 'text'], class: { root: 'divide-rui-warning/[0.5]' } },\n    { color: 'info', variant: ['outlined', 'text'], class: { root: 'divide-rui-info/[0.5]' } },\n    { color: 'success', variant: ['outlined', 'text'], class: { root: 'divide-rui-success/[0.5]' } },\n\n    // Color outline for outlined variant\n    { color: 'primary', variant: 'outlined', class: { root: 'outline-rui-primary/[0.5]' } },\n    { color: 'secondary', variant: 'outlined', class: { root: 'outline-rui-secondary/[0.5]' } },\n    { color: 'error', variant: 'outlined', class: { root: 'outline-rui-error/[0.5]' } },\n    { color: 'warning', variant: 'outlined', class: { root: 'outline-rui-warning/[0.5]' } },\n    { color: 'info', variant: 'outlined', class: { root: 'outline-rui-info/[0.5]' } },\n    { color: 'success', variant: 'outlined', class: { root: 'outline-rui-success/[0.5]' } },\n  ],\n  defaultVariants: {\n    vertical: false,\n    gap: 'none',\n    variant: 'default',\n  },\n});\n\nconst ui = computed<ReturnType<typeof buttonGroupStyles>>(() => buttonGroupStyles({\n  vertical,\n  gap: gap ?? 'none',\n  variant,\n  color,\n}));\n\nconst children = computed<VNode[]>(() => {\n  const selectedValue: T | T[] | undefined = get(modelValue);\n  const slotContent = slots.default?.() ?? [];\n  const resolved = flattenSlotContent(slotContent);\n\n  return resolved.map((child, i) => {\n    // child props are in kebab-case\n    const value = child.props?.['model-value'];\n    const active = isActive(value ?? i, selectedValue);\n    const resolvedColor = active && activeColor ? activeColor : color;\n\n    // Only fall back to the group's size when the child did not set one itself.\n    // This lets consumers override size per-button while still benefiting from\n    // the group-level default.\n    const childSize = child.props?.size;\n\n    child.props = {\n      ...child.props,\n      active,\n      ...(disabled && { disabled: true }),\n      ...(resolvedColor && { color: resolvedColor }),\n      ...(!childSize && size && { size }),\n    };\n\n    return child;\n  });\n});\n\n/**\n * Flattens slot content by unwrapping Fragments (created by v-for).\n * Returns only actual VNode children.\n */\nfunction flattenSlotContent(nodes: VNode[]): VNode[] {\n  return nodes.flatMap((node) => {\n    if (node.type === Fragment && Array.isArray(node.children) && node.children.length > 0)\n      return flattenSlotContent(node.children.filter(isVNode));\n\n    return [node];\n  });\n}\n\nfunction isActive(id: T, selected?: T | T[]): boolean {\n  if (Array.isArray(selected))\n    return selected.includes(id);\n\n  return selected === id;\n}\n\nfunction onClick(id: T): void {\n  const selected = get(modelValue);\n\n  if (Array.isArray(selected)) {\n    const index = selected.indexOf(id);\n    if (index >= 0) {\n      if (required && selected.length === 1)\n        return;\n\n      set(modelValue, selected.filter((_, i) => i !== index));\n    }\n    else {\n      set(modelValue, [...selected, id]);\n    }\n  }\n  else if (required) {\n    set(modelValue, id);\n  }\n  else {\n    set(modelValue, isActive(id, selected) ? undefined : id);\n  }\n}\n</script>\n\n<template>\n  <div\n    :class=\"ui.root()\"\n    v-bind=\"$attrs\"\n  >\n    <Component\n      :is=\"child\"\n      v-for=\"(child, i) in children\"\n      :key=\"i\"\n      :class=\"ui.button()\"\n      :variant=\"variant\"\n      @update:model-value=\"onClick($event ?? i)\"\n    />\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/buttons/button-group/RuiButtonGroup.vue.d.ts

@@ -1,10 +1,11 @@
+import type { ButtonSize } from '../../../components/buttons/button/button-props.js';
 import type { ContextColorsType } from '../../../consts/colors.js';
 export interface Props {
     vertical?: boolean;
     color?: ContextColorsType;
     activeColor?: ContextColorsType;
     variant?: 'default' | 'outlined' | 'text';
-    size?: 'sm' | 'lg';
+    size?: ButtonSize;
     gap?: 'sm' | 'md' | 'lg';
     required?: boolean;
     disabled?: boolean;

package/dist/components/buttons/button-group/RuiButtonGroup.vue_vue_type_script_setup_true_lang.js

@@ -188,11 +188,13 @@ var RuiButtonGroup_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 				const value = child.props?.["model-value"];
 				const active = isActive(value ?? i, selectedValue);
 				const resolvedColor = active && __props.activeColor ? __props.activeColor : __props.color;
+				const childSize = child.props?.size;
 				child.props = {
 					...child.props,
 					active,
 					...__props.disabled && { disabled: true },
-					...resolvedColor && { color: resolvedColor }
+					...resolvedColor && { color: resolvedColor },
+					...!childSize && __props.size && { size: __props.size }
 				};
 				return child;
 			});
@@ -227,12 +229,10 @@ var RuiButtonGroup_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 				return openBlock(), createBlock(resolveDynamicComponent(child), {
 					key: i,
 					class: normalizeClass(unref(ui).button()),
-					size: __props.size,
 					variant: __props.variant,
 					"onUpdate:modelValue": ($event) => onClick($event ?? i)
 				}, null, 8, [
 					"class",
-					"size",
 					"variant",
 					"onUpdate:modelValue"
 				]);

package/dist/components/buttons/button-group/RuiButtonGroup.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiButtonGroup.vue_vue_type_script_setup_true_lang.js","names":["$attrs"],"sources":["../../../../src/components/buttons/button-group/RuiButtonGroup.vue"],"sourcesContent":["<script lang=\"ts\" generic=\"T = undefined\" setup>\nimport type { ContextColorsType } from '@/consts/colors';\nimport { Fragment, isVNode } from 'vue';\nimport { tv } from '@/utils/tv';\n\nexport interface Props {\n  vertical?: boolean;\n  color?: ContextColorsType;\n  activeColor?: ContextColorsType;\n  variant?: 'default' | 'outlined' | 'text';\n  size?: 'sm' | 'lg';\n  gap?: 'sm' | 'md' | 'lg';\n  required?: boolean;\n  disabled?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiButtonGroup',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<T | T[]>();\n\nconst {\n  vertical = false,\n  color,\n  activeColor,\n  variant = 'default',\n  size,\n  gap,\n  required = false,\n  disabled = false,\n} = defineProps<Props>();\n\nconst slots = useSlots();\n\nconst buttonGroupStyles = tv({\n  slots: {\n    root: 'inline-flex rounded divide-x divide-rui-grey-400 outline outline-1 outline-transparent outline-offset-[-1px]',\n    button: 'border-0 outline-0 focus:z-[1]',\n  },\n  variants: {\n    vertical: {\n      true: {\n        root: 'flex-col items-start divide-x-0 divide-y',\n        button: 'w-full',\n      },\n      false: {},\n    },\n    gap: {\n      none: {\n        button: '!rounded-none',\n      },\n      sm: {\n        root: 'divide-x-0 divide-y-0 outline-0 gap-2',\n        button: 'outline-1',\n      },\n      md: {\n        root: 'divide-x-0 divide-y-0 outline-0 gap-4',\n        button: 'outline-1',\n      },\n      lg: {\n        root: 'divide-x-0 divide-y-0 outline-0 gap-6',\n        button: 'outline-1',\n      },\n    },\n    variant: {\n      default: {},\n      outlined: {\n        root: 'outline-rui-text divide-rui-text',\n      },\n      text: {},\n    },\n    color: {\n      primary: {},\n      secondary: {},\n      error: {},\n      warning: {},\n      info: {},\n      success: {},\n    },\n  },\n  compoundVariants: [\n    // First/last child rounding when not separated (! needed to override RuiButton's CSS module border-radius)\n    { gap: 'none', vertical: false, class: { button: 'first:!rounded-l last:!rounded-r' } },\n    { gap: 'none', vertical: true, class: { button: 'first:!rounded-t last:!rounded-b' } },\n\n    // Color dividers (default variant)\n    { color: 'primary', class: { root: 'divide-rui-primary-darker' } },\n    { color: 'secondary', class: { root: 'divide-rui-secondary-darker' } },\n    { color: 'error', class: { root: 'divide-rui-error-darker' } },\n    { color: 'warning', class: { root: 'divide-rui-warning-darker' } },\n    { color: 'info', class: { root: 'divide-rui-info-darker' } },\n    { color: 'success', class: { root: 'divide-rui-success-darker' } },\n\n    // Color dividers for outlined/text (overrides darker dividers above)\n    { color: 'primary', variant: ['outlined', 'text'], class: { root: 'divide-rui-primary/[0.5]' } },\n    { color: 'secondary', variant: ['outlined', 'text'], class: { root: 'divide-rui-secondary/[0.5]' } },\n    { color: 'error', variant: ['outlined', 'text'], class: { root: 'divide-rui-error/[0.5]' } },\n    { color: 'warning', variant: ['outlined', 'text'], class: { root: 'divide-rui-warning/[0.5]' } },\n    { color: 'info', variant: ['outlined', 'text'], class: { root: 'divide-rui-info/[0.5]' } },\n    { color: 'success', variant: ['outlined', 'text'], class: { root: 'divide-rui-success/[0.5]' } },\n\n    // Color outline for outlined variant\n    { color: 'primary', variant: 'outlined', class: { root: 'outline-rui-primary/[0.5]' } },\n    { color: 'secondary', variant: 'outlined', class: { root: 'outline-rui-secondary/[0.5]' } },\n    { color: 'error', variant: 'outlined', class: { root: 'outline-rui-error/[0.5]' } },\n    { color: 'warning', variant: 'outlined', class: { root: 'outline-rui-warning/[0.5]' } },\n    { color: 'info', variant: 'outlined', class: { root: 'outline-rui-info/[0.5]' } },\n    { color: 'success', variant: 'outlined', class: { root: 'outline-rui-success/[0.5]' } },\n  ],\n  defaultVariants: {\n    vertical: false,\n    gap: 'none',\n    variant: 'default',\n  },\n});\n\nconst ui = computed<ReturnType<typeof buttonGroupStyles>>(() => buttonGroupStyles({\n  vertical,\n  gap: gap ?? 'none',\n  variant,\n  color,\n}));\n\nconst children = computed<VNode[]>(() => {\n  const selectedValue: T | T[] | undefined = get(modelValue);\n  const slotContent = slots.default?.() ?? [];\n  const resolved = flattenSlotContent(slotContent);\n\n  return resolved.map((child, i) => {\n    // child props are in kebab-case\n    const value = child.props?.['model-value'];\n    const active = isActive(value ?? i, selectedValue);\n    const resolvedColor = active && activeColor ? activeColor : color;\n\n    child.props = {\n      ...child.props,\n      active,\n      ...(disabled && { disabled: true }),\n      ...(resolvedColor && { color: resolvedColor }),\n    };\n\n    return child;\n  });\n});\n\n/**\n * Flattens slot content by unwrapping Fragments (created by v-for).\n * Returns only actual VNode children.\n */\nfunction flattenSlotContent(nodes: VNode[]): VNode[] {\n  return nodes.flatMap((node) => {\n    if (node.type === Fragment && Array.isArray(node.children) && node.children.length > 0)\n      return flattenSlotContent(node.children.filter(isVNode));\n\n    return [node];\n  });\n}\n\nfunction isActive(id: T, selected?: T | T[]): boolean {\n  if (Array.isArray(selected))\n    return selected.includes(id);\n\n  return selected === id;\n}\n\nfunction onClick(id: T): void {\n  const selected = get(modelValue);\n\n  if (Array.isArray(selected)) {\n    const index = selected.indexOf(id);\n    if (index >= 0) {\n      if (required && selected.length === 1)\n        return;\n\n      set(modelValue, selected.filter((_, i) => i !== index));\n    }\n    else {\n      set(modelValue, [...selected, id]);\n    }\n  }\n  else if (required) {\n    set(modelValue, id);\n  }\n  else {\n    set(modelValue, isActive(id, selected) ? undefined : id);\n  }\n}\n</script>\n\n<template>\n  <div\n    :class=\"ui.root()\"\n    v-bind=\"$attrs\"\n  >\n    <Component\n      :is=\"child\"\n      v-for=\"(child, i) in children\"\n      :key=\"i\"\n      :class=\"ui.button()\"\n      :size=\"size\"\n      :variant=\"variant\"\n      @update:model-value=\"onClick($event ?? i)\"\n    />\n  </div>\n</template>\n"],"mappings":"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"}
+{"version":3,"file":"RuiButtonGroup.vue_vue_type_script_setup_true_lang.js","names":["$attrs"],"sources":["../../../../src/components/buttons/button-group/RuiButtonGroup.vue"],"sourcesContent":["<script lang=\"ts\" generic=\"T = undefined\" setup>\nimport type { ButtonSize } from '@/components/buttons/button/button-props';\nimport type { ContextColorsType } from '@/consts/colors';\nimport { Fragment, isVNode } from 'vue';\nimport { tv } from '@/utils/tv';\n\nexport interface Props {\n  vertical?: boolean;\n  color?: ContextColorsType;\n  activeColor?: ContextColorsType;\n  variant?: 'default' | 'outlined' | 'text';\n  size?: ButtonSize;\n  gap?: 'sm' | 'md' | 'lg';\n  required?: boolean;\n  disabled?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiButtonGroup',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<T | T[]>();\n\nconst {\n  vertical = false,\n  color,\n  activeColor,\n  variant = 'default',\n  size,\n  gap,\n  required = false,\n  disabled = false,\n} = defineProps<Props>();\n\nconst slots = useSlots();\n\nconst buttonGroupStyles = tv({\n  slots: {\n    root: 'inline-flex rounded divide-x divide-rui-grey-400 outline outline-1 outline-transparent outline-offset-[-1px]',\n    button: 'border-0 outline-0 focus:z-[1]',\n  },\n  variants: {\n    vertical: {\n      true: {\n        root: 'flex-col items-start divide-x-0 divide-y',\n        button: 'w-full',\n      },\n      false: {},\n    },\n    gap: {\n      none: {\n        button: '!rounded-none',\n      },\n      sm: {\n        root: 'divide-x-0 divide-y-0 outline-0 gap-2',\n        button: 'outline-1',\n      },\n      md: {\n        root: 'divide-x-0 divide-y-0 outline-0 gap-4',\n        button: 'outline-1',\n      },\n      lg: {\n        root: 'divide-x-0 divide-y-0 outline-0 gap-6',\n        button: 'outline-1',\n      },\n    },\n    variant: {\n      default: {},\n      outlined: {\n        root: 'outline-rui-text divide-rui-text',\n      },\n      text: {},\n    },\n    color: {\n      primary: {},\n      secondary: {},\n      error: {},\n      warning: {},\n      info: {},\n      success: {},\n    },\n  },\n  compoundVariants: [\n    // First/last child rounding when not separated (! needed to override RuiButton's CSS module border-radius)\n    { gap: 'none', vertical: false, class: { button: 'first:!rounded-l last:!rounded-r' } },\n    { gap: 'none', vertical: true, class: { button: 'first:!rounded-t last:!rounded-b' } },\n\n    // Color dividers (default variant)\n    { color: 'primary', class: { root: 'divide-rui-primary-darker' } },\n    { color: 'secondary', class: { root: 'divide-rui-secondary-darker' } },\n    { color: 'error', class: { root: 'divide-rui-error-darker' } },\n    { color: 'warning', class: { root: 'divide-rui-warning-darker' } },\n    { color: 'info', class: { root: 'divide-rui-info-darker' } },\n    { color: 'success', class: { root: 'divide-rui-success-darker' } },\n\n    // Color dividers for outlined/text (overrides darker dividers above)\n    { color: 'primary', variant: ['outlined', 'text'], class: { root: 'divide-rui-primary/[0.5]' } },\n    { color: 'secondary', variant: ['outlined', 'text'], class: { root: 'divide-rui-secondary/[0.5]' } },\n    { color: 'error', variant: ['outlined', 'text'], class: { root: 'divide-rui-error/[0.5]' } },\n    { color: 'warning', variant: ['outlined', 'text'], class: { root: 'divide-rui-warning/[0.5]' } },\n    { color: 'info', variant: ['outlined', 'text'], class: { root: 'divide-rui-info/[0.5]' } },\n    { color: 'success', variant: ['outlined', 'text'], class: { root: 'divide-rui-success/[0.5]' } },\n\n    // Color outline for outlined variant\n    { color: 'primary', variant: 'outlined', class: { root: 'outline-rui-primary/[0.5]' } },\n    { color: 'secondary', variant: 'outlined', class: { root: 'outline-rui-secondary/[0.5]' } },\n    { color: 'error', variant: 'outlined', class: { root: 'outline-rui-error/[0.5]' } },\n    { color: 'warning', variant: 'outlined', class: { root: 'outline-rui-warning/[0.5]' } },\n    { color: 'info', variant: 'outlined', class: { root: 'outline-rui-info/[0.5]' } },\n    { color: 'success', variant: 'outlined', class: { root: 'outline-rui-success/[0.5]' } },\n  ],\n  defaultVariants: {\n    vertical: false,\n    gap: 'none',\n    variant: 'default',\n  },\n});\n\nconst ui = computed<ReturnType<typeof buttonGroupStyles>>(() => buttonGroupStyles({\n  vertical,\n  gap: gap ?? 'none',\n  variant,\n  color,\n}));\n\nconst children = computed<VNode[]>(() => {\n  const selectedValue: T | T[] | undefined = get(modelValue);\n  const slotContent = slots.default?.() ?? [];\n  const resolved = flattenSlotContent(slotContent);\n\n  return resolved.map((child, i) => {\n    // child props are in kebab-case\n    const value = child.props?.['model-value'];\n    const active = isActive(value ?? i, selectedValue);\n    const resolvedColor = active && activeColor ? activeColor : color;\n\n    // Only fall back to the group's size when the child did not set one itself.\n    // This lets consumers override size per-button while still benefiting from\n    // the group-level default.\n    const childSize = child.props?.size;\n\n    child.props = {\n      ...child.props,\n      active,\n      ...(disabled && { disabled: true }),\n      ...(resolvedColor && { color: resolvedColor }),\n      ...(!childSize && size && { size }),\n    };\n\n    return child;\n  });\n});\n\n/**\n * Flattens slot content by unwrapping Fragments (created by v-for).\n * Returns only actual VNode children.\n */\nfunction flattenSlotContent(nodes: VNode[]): VNode[] {\n  return nodes.flatMap((node) => {\n    if (node.type === Fragment && Array.isArray(node.children) && node.children.length > 0)\n      return flattenSlotContent(node.children.filter(isVNode));\n\n    return [node];\n  });\n}\n\nfunction isActive(id: T, selected?: T | T[]): boolean {\n  if (Array.isArray(selected))\n    return selected.includes(id);\n\n  return selected === id;\n}\n\nfunction onClick(id: T): void {\n  const selected = get(modelValue);\n\n  if (Array.isArray(selected)) {\n    const index = selected.indexOf(id);\n    if (index >= 0) {\n      if (required && selected.length === 1)\n        return;\n\n      set(modelValue, selected.filter((_, i) => i !== index));\n    }\n    else {\n      set(modelValue, [...selected, id]);\n    }\n  }\n  else if (required) {\n    set(modelValue, id);\n  }\n  else {\n    set(modelValue, isActive(id, selected) ? undefined : id);\n  }\n}\n</script>\n\n<template>\n  <div\n    :class=\"ui.root()\"\n    v-bind=\"$attrs\"\n  >\n    <Component\n      :is=\"child\"\n      v-for=\"(child, i) in children\"\n      :key=\"i\"\n      :class=\"ui.button()\"\n      :variant=\"variant\"\n      @update:model-value=\"onClick($event ?? i)\"\n    />\n  </div>\n</template>\n"],"mappings":"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"}

package/dist/components/forms/text-field/text-field-styles.js

@@ -137,6 +137,20 @@ var textFieldStyles = tv({
 				label: "leading-[3.5]"
 			}
 		},
+		{
+			variant: "default",
+			noLabel: true,
+			class: {
+				wrapper: "!pt-0",
+				input: "py-2"
+			}
+		},
+		{
+			variant: "default",
+			noLabel: true,
+			dense: true,
+			class: { input: "py-1" }
+		},
 		{
 			variant: "filled",
 			focused: true,

package/dist/components/forms/text-field/text-field-styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"text-field-styles.js","names":[],"sources":["../../../../src/components/forms/text-field/text-field-styles.ts"],"sourcesContent":["import { textInputBase, type TextInputVariant, underlinePseudo } from '@/components/forms/text-input-styles';\nimport { tv } from '@/utils/tv';\n\nexport type TextFieldVariant = TextInputVariant;\n\n/**\n * tv() styles for RuiTextField. Extends textInputBase for shared\n * fieldset/legend/label/validation core.\n *\n * IMPORTANT: tv() extend does NOT deduplicate conflicting Tailwind classes\n * between base and extension. Never put a class in the base slot that a\n * variant needs to override — put variant-specific classes in the variants.\n */\n\nexport const textFieldStyles = tv({\n  extend: textInputBase,\n  slots: {\n    // Re-declare base slots for type inference (extend merges classes at runtime)\n    fieldset: '',\n    legend: '',\n    // No pt-* here — each variant sets its own padding-top\n    wrapper: 'relative w-full flex items-center rounded bg-white dark:bg-transparent',\n    input: [\n      'peer leading-6 text-rui-text w-full bg-transparent pr-4',\n      'outline-0 outline-none transition-all',\n      'placeholder:opacity-0 focus:placeholder:opacity-100',\n    ].join(' '),\n    // No border-b or display here — each variant sets its own\n    label: [\n      // Use arbitrary `text-[1rem]` instead of `text-base` — the named class\n      // bundles `line-height: 1.5rem`, and the consumer's later-loaded\n      // `.text-base` rule would override our `leading-*` per variant. The\n      // arbitrary form emits font-size only, so `leading-*` stays authoritative.\n      'left-0 text-[1rem] pointer-events-none',\n      'absolute top-0 h-full w-full select-none',\n      // Dynamic padding via CSS variables\n      '[padding-left:calc(var(--x-padding,0px)+var(--prepend-w,0px))]',\n      '[padding-right:calc(var(--x-padding,0px)+var(--append-w,0px))]',\n      // CSS-only autofill fallback (before JS catches up)\n      'peer-autofill:text-[0.75rem] peer-autofill:leading-tight',\n    ].join(' '),\n    labelText: 'truncate transition-all duration-75',\n    inputWrapper: 'flex flex-1 overflow-hidden',\n    prepend: 'flex items-center gap-1 shrink-0',\n    append: 'flex items-center gap-1 shrink-0',\n    icon: 'text-black/[0.54] dark:text-white/[0.56]',\n    details: 'pt-1 px-4',\n    required: 'text-rui-error',\n    clearButton: '!p-2',\n  },\n  variants: {\n    variant: {\n      default: {\n        wrapper: 'pt-3',\n        input: 'py-1.5',\n        label: `flex leading-[3.75] ${underlinePseudo}`,\n        prepend: 'pr-3',\n        append: 'pl-3',\n      },\n      filled: {\n        input: 'px-4 py-4',\n        label: `flex leading-[3.5] [--x-padding:1rem] rounded-t bg-black/[0.06] dark:bg-white/[0.09] ${underlinePseudo}`,\n        prepend: 'pl-3',\n        append: 'pr-3',\n      },\n      outlined: {\n        inputWrapper: '!overflow-visible',\n        input: 'px-4 py-4',\n        label: [\n          'flex leading-[3.5] [--x-padding:1rem]',\n          'border-0 border-transparent',\n          'after:content-none',\n        ].join(' '),\n        fieldset: '!mt-0 !h-full',\n        prepend: 'pl-3',\n        append: 'pr-3',\n      },\n    },\n    dense: {\n      true: {},\n    },\n    hovered: {\n      true: {\n        label: 'border-black dark:border-white',\n      },\n    },\n    focused: {\n      true: {},\n    },\n    active: {\n      true: {\n        label: [\n          'text-[0.75rem] leading-tight',\n          '[padding-left:var(--x-padding,0px)]',\n          '[padding-right:var(--x-padding,0px)]',\n        ].join(' '),\n      },\n    },\n    noLabel: {\n      true: {},\n    },\n    showLabel: {\n      true: {},\n    },\n    textColor: {\n      primary: { prepend: 'text-rui-primary', append: 'text-rui-primary', input: 'text-rui-primary', icon: 'text-rui-primary' },\n      secondary: { prepend: 'text-rui-secondary', append: 'text-rui-secondary', input: 'text-rui-secondary', icon: 'text-rui-secondary' },\n      error: { prepend: 'text-rui-error', append: 'text-rui-error', input: 'text-rui-error', icon: 'text-rui-error' },\n      warning: { prepend: 'text-rui-warning', append: 'text-rui-warning', input: 'text-rui-warning', icon: 'text-rui-warning' },\n      info: { prepend: 'text-rui-info', append: 'text-rui-info', input: 'text-rui-info', icon: 'text-rui-info' },\n      success: { prepend: 'text-rui-success', append: 'text-rui-success', input: 'text-rui-success', icon: 'text-rui-success' },\n    },\n    validation: {\n      error: {\n        input: '!border-rui-error',\n        label: '!text-rui-error !after:border-rui-error',\n      },\n      success: {\n        input: '!border-rui-success',\n        label: '!text-rui-success !after:border-rui-success',\n      },\n    },\n  },\n  compoundVariants: [\n    // --- Default variant ---\n    { variant: 'default', focused: true, class: { label: 'after:scale-x-100' } },\n    { variant: 'default', dense: true, class: { input: 'py-1', label: 'leading-[3.5]' } },\n\n    // --- Filled variant ---\n    { variant: 'filled', focused: true, class: { label: 'bg-black/[0.09] dark:bg-white/[0.13]' } },\n    { variant: 'filled', active: true, class: { label: 'leading-[1.5]' } },\n    { variant: 'filled', dense: true, class: { input: 'pt-5 pb-1', label: 'leading-[3]' } },\n    { variant: 'filled', dense: true, active: true, class: { label: 'leading-[2.25]' } },\n    { variant: 'filled', noLabel: true, class: { input: 'py-4' } },\n    { variant: 'filled', noLabel: true, dense: true, class: { input: 'py-3' } },\n\n    // --- Outlined variant ---\n    { variant: 'outlined', active: true, class: {\n      input: 'border-t-transparent',\n      label: '!h-auto -translate-y-1/2 pl-4',\n    } },\n    { variant: 'outlined', dense: true, class: { input: 'py-2', label: 'leading-[2.5]' } },\n\n    // --- Focus label color (per color) ---\n    { focused: true, color: 'primary', class: { label: 'text-rui-primary' } },\n    { focused: true, color: 'secondary', class: { label: 'text-rui-secondary' } },\n    { focused: true, color: 'error', class: { label: 'text-rui-error' } },\n    { focused: true, color: 'warning', class: { label: 'text-rui-warning' } },\n    { focused: true, color: 'info', class: { label: 'text-rui-info' } },\n    { focused: true, color: 'success', class: { label: 'text-rui-success' } },\n\n    // --- Label after border color (always applied when color set) ---\n    { color: 'primary', class: { label: 'after:border-rui-primary' } },\n    { color: 'secondary', class: { label: 'after:border-rui-secondary' } },\n    { color: 'error', class: { label: 'after:border-rui-error' } },\n    { color: 'warning', class: { label: 'after:border-rui-warning' } },\n    { color: 'info', class: { label: 'after:border-rui-info' } },\n    { color: 'success', class: { label: 'after:border-rui-success' } },\n  ],\n  defaultVariants: {\n    variant: 'default',\n  },\n});\n"],"mappings":"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"}
+{"version":3,"file":"text-field-styles.js","names":[],"sources":["../../../../src/components/forms/text-field/text-field-styles.ts"],"sourcesContent":["import { textInputBase, type TextInputVariant, underlinePseudo } from '@/components/forms/text-input-styles';\nimport { tv } from '@/utils/tv';\n\nexport type TextFieldVariant = TextInputVariant;\n\n/**\n * tv() styles for RuiTextField. Extends textInputBase for shared\n * fieldset/legend/label/validation core.\n *\n * IMPORTANT: tv() extend does NOT deduplicate conflicting Tailwind classes\n * between base and extension. Never put a class in the base slot that a\n * variant needs to override — put variant-specific classes in the variants.\n */\n\nexport const textFieldStyles = tv({\n  extend: textInputBase,\n  slots: {\n    // Re-declare base slots for type inference (extend merges classes at runtime)\n    fieldset: '',\n    legend: '',\n    // No pt-* here — each variant sets its own padding-top\n    wrapper: 'relative w-full flex items-center rounded bg-white dark:bg-transparent',\n    input: [\n      'peer leading-6 text-rui-text w-full bg-transparent pr-4',\n      'outline-0 outline-none transition-all',\n      'placeholder:opacity-0 focus:placeholder:opacity-100',\n    ].join(' '),\n    // No border-b or display here — each variant sets its own\n    label: [\n      // Use arbitrary `text-[1rem]` instead of `text-base` — the named class\n      // bundles `line-height: 1.5rem`, and the consumer's later-loaded\n      // `.text-base` rule would override our `leading-*` per variant. The\n      // arbitrary form emits font-size only, so `leading-*` stays authoritative.\n      'left-0 text-[1rem] pointer-events-none',\n      'absolute top-0 h-full w-full select-none',\n      // Dynamic padding via CSS variables\n      '[padding-left:calc(var(--x-padding,0px)+var(--prepend-w,0px))]',\n      '[padding-right:calc(var(--x-padding,0px)+var(--append-w,0px))]',\n      // CSS-only autofill fallback (before JS catches up)\n      'peer-autofill:text-[0.75rem] peer-autofill:leading-tight',\n    ].join(' '),\n    labelText: 'truncate transition-all duration-75',\n    inputWrapper: 'flex flex-1 overflow-hidden',\n    prepend: 'flex items-center gap-1 shrink-0',\n    append: 'flex items-center gap-1 shrink-0',\n    icon: 'text-black/[0.54] dark:text-white/[0.56]',\n    details: 'pt-1 px-4',\n    required: 'text-rui-error',\n    clearButton: '!p-2',\n  },\n  variants: {\n    variant: {\n      default: {\n        wrapper: 'pt-3',\n        input: 'py-1.5',\n        label: `flex leading-[3.75] ${underlinePseudo}`,\n        prepend: 'pr-3',\n        append: 'pl-3',\n      },\n      filled: {\n        input: 'px-4 py-4',\n        label: `flex leading-[3.5] [--x-padding:1rem] rounded-t bg-black/[0.06] dark:bg-white/[0.09] ${underlinePseudo}`,\n        prepend: 'pl-3',\n        append: 'pr-3',\n      },\n      outlined: {\n        inputWrapper: '!overflow-visible',\n        input: 'px-4 py-4',\n        label: [\n          'flex leading-[3.5] [--x-padding:1rem]',\n          'border-0 border-transparent',\n          'after:content-none',\n        ].join(' '),\n        fieldset: '!mt-0 !h-full',\n        prepend: 'pl-3',\n        append: 'pr-3',\n      },\n    },\n    dense: {\n      true: {},\n    },\n    hovered: {\n      true: {\n        label: 'border-black dark:border-white',\n      },\n    },\n    focused: {\n      true: {},\n    },\n    active: {\n      true: {\n        label: [\n          'text-[0.75rem] leading-tight',\n          '[padding-left:var(--x-padding,0px)]',\n          '[padding-right:var(--x-padding,0px)]',\n        ].join(' '),\n      },\n    },\n    noLabel: {\n      true: {},\n    },\n    showLabel: {\n      true: {},\n    },\n    textColor: {\n      primary: { prepend: 'text-rui-primary', append: 'text-rui-primary', input: 'text-rui-primary', icon: 'text-rui-primary' },\n      secondary: { prepend: 'text-rui-secondary', append: 'text-rui-secondary', input: 'text-rui-secondary', icon: 'text-rui-secondary' },\n      error: { prepend: 'text-rui-error', append: 'text-rui-error', input: 'text-rui-error', icon: 'text-rui-error' },\n      warning: { prepend: 'text-rui-warning', append: 'text-rui-warning', input: 'text-rui-warning', icon: 'text-rui-warning' },\n      info: { prepend: 'text-rui-info', append: 'text-rui-info', input: 'text-rui-info', icon: 'text-rui-info' },\n      success: { prepend: 'text-rui-success', append: 'text-rui-success', input: 'text-rui-success', icon: 'text-rui-success' },\n    },\n    validation: {\n      error: {\n        input: '!border-rui-error',\n        label: '!text-rui-error !after:border-rui-error',\n      },\n      success: {\n        input: '!border-rui-success',\n        label: '!text-rui-success !after:border-rui-success',\n      },\n    },\n  },\n  compoundVariants: [\n    // --- Default variant ---\n    { variant: 'default', focused: true, class: { label: 'after:scale-x-100' } },\n    { variant: 'default', dense: true, class: { input: 'py-1', label: 'leading-[3.5]' } },\n    // Without a label, the wrapper's `pt-3` floating-label reserve serves no\n    // purpose and leaves the field ~4–12px taller than an equivalent\n    // RuiMenuSelect dense activator. Strip it and tighten the input padding\n    // so the underline sits at a matching baseline (40px non-dense, 32px\n    // dense) — these match min-h-10 and !min-h-8 of the menu-select\n    // activator.\n    { variant: 'default', noLabel: true, class: { wrapper: '!pt-0', input: 'py-2' } },\n    { variant: 'default', noLabel: true, dense: true, class: { input: 'py-1' } },\n\n    // --- Filled variant ---\n    { variant: 'filled', focused: true, class: { label: 'bg-black/[0.09] dark:bg-white/[0.13]' } },\n    { variant: 'filled', active: true, class: { label: 'leading-[1.5]' } },\n    { variant: 'filled', dense: true, class: { input: 'pt-5 pb-1', label: 'leading-[3]' } },\n    { variant: 'filled', dense: true, active: true, class: { label: 'leading-[2.25]' } },\n    { variant: 'filled', noLabel: true, class: { input: 'py-4' } },\n    { variant: 'filled', noLabel: true, dense: true, class: { input: 'py-3' } },\n\n    // --- Outlined variant ---\n    { variant: 'outlined', active: true, class: {\n      input: 'border-t-transparent',\n      label: '!h-auto -translate-y-1/2 pl-4',\n    } },\n    { variant: 'outlined', dense: true, class: { input: 'py-2', label: 'leading-[2.5]' } },\n\n    // --- Focus label color (per color) ---\n    { focused: true, color: 'primary', class: { label: 'text-rui-primary' } },\n    { focused: true, color: 'secondary', class: { label: 'text-rui-secondary' } },\n    { focused: true, color: 'error', class: { label: 'text-rui-error' } },\n    { focused: true, color: 'warning', class: { label: 'text-rui-warning' } },\n    { focused: true, color: 'info', class: { label: 'text-rui-info' } },\n    { focused: true, color: 'success', class: { label: 'text-rui-success' } },\n\n    // --- Label after border color (always applied when color set) ---\n    { color: 'primary', class: { label: 'after:border-rui-primary' } },\n    { color: 'secondary', class: { label: 'after:border-rui-secondary' } },\n    { color: 'error', class: { label: 'after:border-rui-error' } },\n    { color: 'warning', class: { label: 'after:border-rui-warning' } },\n    { color: 'info', class: { label: 'after:border-rui-info' } },\n    { color: 'success', class: { label: 'after:border-rui-success' } },\n  ],\n  defaultVariants: {\n    variant: 'default',\n  },\n});\n"],"mappings":"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"}

package/dist/components/icons/RuiIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiIcon.js","names":[],"sources":["../../../src/components/icons/RuiIcon.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { ContextColorsType } from '@/consts/colors';\nimport { useIcons } from '@/composables/icons';\nimport { isRuiIcon, type RuiIcons } from '@/icons';\nimport { tv } from '@/utils/tv';\n\nexport interface Props {\n  name: RuiIcons;\n  size?: number | string;\n  color?: ContextColorsType;\n}\n\ndefineOptions({\n  name: 'RuiIcon',\n});\n\nconst { name, size = 24, color } = defineProps<Props>();\n\nconst { registeredIcons } = useIcons();\n\ntype SvgComponent = [tag: string, attrs: Record<string, string>];\n\nconst iconStyles = tv({\n  variants: {\n    color: {\n      primary: 'text-rui-primary',\n      secondary: 'text-rui-secondary',\n      error: 'text-rui-error',\n      warning: 'text-rui-warning',\n      info: 'text-rui-info',\n      success: 'text-rui-success',\n    },\n  },\n});\n\nconst ui = computed<string>(() => iconStyles({ color }));\n\nconst isFill = computed<boolean>(() => name.endsWith('-fill'));\n\nconst components = computed<SvgComponent[] | undefined>(() => {\n  if (!isRuiIcon(name)) {\n    console.warn(`icon ${name} must be a valid RuiIcon`);\n  }\n  const found = registeredIcons[name];\n\n  if (!found) {\n    console.error(\n      `Icons \"${name}\" not found. Make sure that you have register the icon when installing the RuiPlugin`,\n    );\n  }\n  return found;\n});\n</script>\n\n<template>\n  <svg\n    aria-hidden=\"true\"\n    :class=\"ui\"\n    :height=\"size\"\n    :width=\"size\"\n    viewBox=\"0 0 24 24\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <component\n      :is=\"component[0]\"\n      v-for=\"(component, index) in components\"\n      :key=\"index\"\n      v-bind=\"component[1]\"\n      :fill=\"!isFill ? 'none' : 'currentColor'\"\n      :stroke=\"!isFill ? 'currentColor' : 'none'\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      fill-rule=\"evenodd\"\n      clip-rule=\"evenodd\"\n    />\n  </svg>\n</template>\n"],"mappings":""}
+{"version":3,"file":"RuiIcon.js","names":[],"sources":["../../../src/components/icons/RuiIcon.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { ContextColorsType } from '@/consts/colors';\nimport { useIcons } from '@/composables/icons';\nimport { isRuiIcon, type RuiIcons } from '@/icons';\nimport { tv } from '@/utils/tv';\n\nexport interface Props {\n  name: RuiIcons;\n  size?: number | string;\n  color?: ContextColorsType;\n}\n\ndefineOptions({\n  name: 'RuiIcon',\n});\n\nconst { name, size, color } = defineProps<Props>();\n\nconst { registeredIcons } = useIcons();\n\ntype SvgComponent = [tag: string, attrs: Record<string, string>];\n\nconst iconStyles = tv({\n  variants: {\n    color: {\n      primary: 'text-rui-primary',\n      secondary: 'text-rui-secondary',\n      error: 'text-rui-error',\n      warning: 'text-rui-warning',\n      info: 'text-rui-info',\n      success: 'text-rui-success',\n    },\n    sized: {\n      // When no explicit size prop is set, fall back to Tailwind classes so a\n      // parent (e.g. RuiButton) can override the icon size via CSS without\n      // competing with inline width/height attributes.\n      false: 'w-6 h-6',\n      true: '',\n    },\n  },\n});\n\nconst hasExplicitSize = computed<boolean>(() => size !== undefined);\nconst ui = computed<string>(() => iconStyles({ color, sized: get(hasExplicitSize) }));\n\nconst isFill = computed<boolean>(() => name.endsWith('-fill'));\n\nconst components = computed<SvgComponent[] | undefined>(() => {\n  if (!isRuiIcon(name)) {\n    console.warn(`icon ${name} must be a valid RuiIcon`);\n  }\n  const found = registeredIcons[name];\n\n  if (!found) {\n    console.error(\n      `Icons \"${name}\" not found. Make sure that you have register the icon when installing the RuiPlugin`,\n    );\n  }\n  return found;\n});\n</script>\n\n<template>\n  <svg\n    aria-hidden=\"true\"\n    class=\"rui-icon\"\n    :class=\"ui\"\n    :height=\"hasExplicitSize ? size : undefined\"\n    :width=\"hasExplicitSize ? size : undefined\"\n    viewBox=\"0 0 24 24\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <component\n      :is=\"component[0]\"\n      v-for=\"(component, index) in components\"\n      :key=\"index\"\n      v-bind=\"component[1]\"\n      :fill=\"!isFill ? 'none' : 'currentColor'\"\n      :stroke=\"!isFill ? 'currentColor' : 'none'\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      fill-rule=\"evenodd\"\n      clip-rule=\"evenodd\"\n    />\n  </svg>\n</template>\n"],"mappings":""}

package/dist/components/icons/RuiIcon.vue_vue_type_script_setup_true_lang.js

@@ -2,6 +2,7 @@ import { isRuiIcon } from "../../icons/index.js";
 import { useIcons } from "../../composables/icons.js";
 import { tv } from "../../utils/tv.js";
 import { Fragment, computed, createBlock, createElementBlock, defineComponent, mergeProps, normalizeClass, openBlock, renderList, resolveDynamicComponent, unref } from "vue";
+import { get } from "@vueuse/shared";
 //#region src/components/icons/RuiIcon.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = ["height", "width"];
 var RuiIcon_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
@@ -9,20 +10,30 @@ var RuiIcon_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ define
 	__name: "RuiIcon",
 	props: {
 		name: {},
-		size: { default: 24 },
+		size: {},
 		color: {}
 	},
 	setup(__props) {
 		const { registeredIcons } = useIcons();
-		const iconStyles = tv({ variants: { color: {
-			primary: "text-rui-primary",
-			secondary: "text-rui-secondary",
-			error: "text-rui-error",
-			warning: "text-rui-warning",
-			info: "text-rui-info",
-			success: "text-rui-success"
-		} } });
-		const ui = computed(() => iconStyles({ color: __props.color }));
+		const iconStyles = tv({ variants: {
+			color: {
+				primary: "text-rui-primary",
+				secondary: "text-rui-secondary",
+				error: "text-rui-error",
+				warning: "text-rui-warning",
+				info: "text-rui-info",
+				success: "text-rui-success"
+			},
+			sized: {
+				false: "w-6 h-6",
+				true: ""
+			}
+		} });
+		const hasExplicitSize = computed(() => __props.size !== void 0);
+		const ui = computed(() => iconStyles({
+			color: __props.color,
+			sized: get(hasExplicitSize)
+		}));
 		const isFill = computed(() => __props.name.endsWith("-fill"));
 		const components = computed(() => {
 			if (!isRuiIcon(__props.name)) console.warn(`icon ${__props.name} must be a valid RuiIcon`);
@@ -33,9 +44,9 @@ var RuiIcon_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ define
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("svg", {
 				"aria-hidden": "true",
-				class: normalizeClass(unref(ui)),
-				height: __props.size,
-				width: __props.size,
+				class: normalizeClass(["rui-icon", unref(ui)]),
+				height: unref(hasExplicitSize) ? __props.size : void 0,
+				width: unref(hasExplicitSize) ? __props.size : void 0,
 				viewBox: "0 0 24 24",
 				xmlns: "http://www.w3.org/2000/svg"
 			}, [(openBlock(true), createElementBlock(Fragment, null, renderList(unref(components), (component, index) => {

package/dist/components/icons/RuiIcon.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiIcon.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/icons/RuiIcon.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { ContextColorsType } from '@/consts/colors';\nimport { useIcons } from '@/composables/icons';\nimport { isRuiIcon, type RuiIcons } from '@/icons';\nimport { tv } from '@/utils/tv';\n\nexport interface Props {\n  name: RuiIcons;\n  size?: number | string;\n  color?: ContextColorsType;\n}\n\ndefineOptions({\n  name: 'RuiIcon',\n});\n\nconst { name, size = 24, color } = defineProps<Props>();\n\nconst { registeredIcons } = useIcons();\n\ntype SvgComponent = [tag: string, attrs: Record<string, string>];\n\nconst iconStyles = tv({\n  variants: {\n    color: {\n      primary: 'text-rui-primary',\n      secondary: 'text-rui-secondary',\n      error: 'text-rui-error',\n      warning: 'text-rui-warning',\n      info: 'text-rui-info',\n      success: 'text-rui-success',\n    },\n  },\n});\n\nconst ui = computed<string>(() => iconStyles({ color }));\n\nconst isFill = computed<boolean>(() => name.endsWith('-fill'));\n\nconst components = computed<SvgComponent[] | undefined>(() => {\n  if (!isRuiIcon(name)) {\n    console.warn(`icon ${name} must be a valid RuiIcon`);\n  }\n  const found = registeredIcons[name];\n\n  if (!found) {\n    console.error(\n      `Icons \"${name}\" not found. Make sure that you have register the icon when installing the RuiPlugin`,\n    );\n  }\n  return found;\n});\n</script>\n\n<template>\n  <svg\n    aria-hidden=\"true\"\n    :class=\"ui\"\n    :height=\"size\"\n    :width=\"size\"\n    viewBox=\"0 0 24 24\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <component\n      :is=\"component[0]\"\n      v-for=\"(component, index) in components\"\n      :key=\"index\"\n      v-bind=\"component[1]\"\n      :fill=\"!isFill ? 'none' : 'currentColor'\"\n      :stroke=\"!isFill ? 'currentColor' : 'none'\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      fill-rule=\"evenodd\"\n      clip-rule=\"evenodd\"\n    />\n  </svg>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;EAkBA,MAAM,EAAE,oBAAoB,UAAU;EAItC,MAAM,aAAa,GAAG,EACpB,UAAU,EACR,OAAO;GACL,SAAS;GACT,WAAW;GACX,OAAO;GACP,SAAS;GACT,MAAM;GACN,SAAS;GACV,EACF,EACF,CAAC;EAEF,MAAM,KAAK,eAAuB,WAAW,EAAE,OAAI,QAAA,OAAG,CAAC,CAAC;EAExD,MAAM,SAAS,eAAwB,QAAA,KAAK,SAAS,QAAQ,CAAC;EAE9D,MAAM,aAAa,eAA2C;AAC5D,OAAI,CAAC,UAAU,QAAA,KAAK,CAClB,SAAQ,KAAK,QAAQ,QAAA,KAAK,0BAA0B;GAEtD,MAAM,QAAQ,gBAAgB,QAAA;AAE9B,OAAI,CAAC,MACH,SAAQ,MACN,UAAU,QAAA,KAAK,sFAChB;AAEH,UAAO;IACP;;uBAIA,mBAqBM,OAAA;IApBJ,eAAY;IACX,OAAK,eAAE,MAAA,GAAE,CAAA;IACT,QAAQ,QAAA;IACR,OAAO,QAAA;IACR,SAAQ;IACR,OAAM;yBAEN,mBAYE,UAAA,MAAA,WAV6B,MAAA,WAAU,GAA/B,WAAW,UAAK;wBAF1B,YAYE,wBAXK,UAAS,GAAA,EADhB,WAYE,EATC,KAAK,OAAK,EAAA,EAAA,SAAA,MAAA,EACH,UAAS,IAAA;KAChB,MAAI,CAAG,MAAA,OAAM,GAAA,SAAA;KACb,QAAM,CAAG,MAAA,OAAM,GAAA,iBAAA;KAChB,gBAAa;KACb,kBAAe;KACf,mBAAgB;KAChB,aAAU;KACV,aAAU"}
+{"version":3,"file":"RuiIcon.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/icons/RuiIcon.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { ContextColorsType } from '@/consts/colors';\nimport { useIcons } from '@/composables/icons';\nimport { isRuiIcon, type RuiIcons } from '@/icons';\nimport { tv } from '@/utils/tv';\n\nexport interface Props {\n  name: RuiIcons;\n  size?: number | string;\n  color?: ContextColorsType;\n}\n\ndefineOptions({\n  name: 'RuiIcon',\n});\n\nconst { name, size, color } = defineProps<Props>();\n\nconst { registeredIcons } = useIcons();\n\ntype SvgComponent = [tag: string, attrs: Record<string, string>];\n\nconst iconStyles = tv({\n  variants: {\n    color: {\n      primary: 'text-rui-primary',\n      secondary: 'text-rui-secondary',\n      error: 'text-rui-error',\n      warning: 'text-rui-warning',\n      info: 'text-rui-info',\n      success: 'text-rui-success',\n    },\n    sized: {\n      // When no explicit size prop is set, fall back to Tailwind classes so a\n      // parent (e.g. RuiButton) can override the icon size via CSS without\n      // competing with inline width/height attributes.\n      false: 'w-6 h-6',\n      true: '',\n    },\n  },\n});\n\nconst hasExplicitSize = computed<boolean>(() => size !== undefined);\nconst ui = computed<string>(() => iconStyles({ color, sized: get(hasExplicitSize) }));\n\nconst isFill = computed<boolean>(() => name.endsWith('-fill'));\n\nconst components = computed<SvgComponent[] | undefined>(() => {\n  if (!isRuiIcon(name)) {\n    console.warn(`icon ${name} must be a valid RuiIcon`);\n  }\n  const found = registeredIcons[name];\n\n  if (!found) {\n    console.error(\n      `Icons \"${name}\" not found. Make sure that you have register the icon when installing the RuiPlugin`,\n    );\n  }\n  return found;\n});\n</script>\n\n<template>\n  <svg\n    aria-hidden=\"true\"\n    class=\"rui-icon\"\n    :class=\"ui\"\n    :height=\"hasExplicitSize ? size : undefined\"\n    :width=\"hasExplicitSize ? size : undefined\"\n    viewBox=\"0 0 24 24\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <component\n      :is=\"component[0]\"\n      v-for=\"(component, index) in components\"\n      :key=\"index\"\n      v-bind=\"component[1]\"\n      :fill=\"!isFill ? 'none' : 'currentColor'\"\n      :stroke=\"!isFill ? 'currentColor' : 'none'\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      fill-rule=\"evenodd\"\n      clip-rule=\"evenodd\"\n    />\n  </svg>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;EAkBA,MAAM,EAAE,oBAAoB,UAAU;EAItC,MAAM,aAAa,GAAG,EACpB,UAAU;GACR,OAAO;IACL,SAAS;IACT,WAAW;IACX,OAAO;IACP,SAAS;IACT,MAAM;IACN,SAAS;IACV;GACD,OAAO;IAIL,OAAO;IACP,MAAM;;GAET,EACF,CAAC;EAEF,MAAM,kBAAkB,eAAwB,QAAA,SAAS,KAAA,EAAU;EACnE,MAAM,KAAK,eAAuB,WAAW;GAAE,OAAI,QAAA;GAAG,OAAO,IAAI,gBAAA;GAAkB,CAAC,CAAC;EAErF,MAAM,SAAS,eAAwB,QAAA,KAAK,SAAS,QAAQ,CAAC;EAE9D,MAAM,aAAa,eAA2C;AAC5D,OAAI,CAAC,UAAU,QAAA,KAAK,CAClB,SAAQ,KAAK,QAAQ,QAAA,KAAK,0BAA0B;GAEtD,MAAM,QAAQ,gBAAgB,QAAA;AAE9B,OAAI,CAAC,MACH,SAAQ,MACN,UAAU,QAAA,KAAK,sFAChB;AAEH,UAAO;IACP;;uBAIA,mBAsBM,OAAA;IArBJ,eAAY;IACZ,OAAK,eAAA,CAAC,YACE,MAAA,GAAE,CAAA,CAAA;IACT,QAAQ,MAAA,gBAAe,GAAG,QAAA,OAAO,KAAA;IACjC,OAAO,MAAA,gBAAe,GAAG,QAAA,OAAO,KAAA;IACjC,SAAQ;IACR,OAAM;yBAEN,mBAYE,UAAA,MAAA,WAV6B,MAAA,WAAU,GAA/B,WAAW,UAAK;wBAF1B,YAYE,wBAXK,UAAS,GAAA,EADhB,WAYE,EATC,KAAK,OAAK,EAAA,EAAA,SAAA,MAAA,EACH,UAAS,IAAA;KAChB,MAAI,CAAG,MAAA,OAAM,GAAA,SAAA;KACb,QAAM,CAAG,MAAA,OAAM,GAAA,iBAAA;KAChB,gBAAa;KACb,kBAAe;KACf,mBAAgB;KAChB,aAAU;KACV,aAAU"}

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

@@ -1 +1 @@
-{"version":3,"file":"RuiTablePagination.js","names":[],"sources":["../../../src/components/tables/RuiTablePagination.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport RuiButton from '@/components/buttons/button/RuiButton.vue';\nimport RuiMenuSelect from '@/components/forms/select/RuiMenuSelect.vue';\nimport RuiTextField from '@/components/forms/text-field/RuiTextField.vue';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport { type TablePaginationData, usePaginationNavigation } from '@/components/tables/use-pagination-navigation';\nimport { useTable } from '@/composables/defaults/table';\nimport { tv } from '@/utils/tv';\n\nexport type { TablePaginationData };\n\nexport interface Props {\n  dense?: boolean;\n  disablePerPage?: boolean;\n  loading?: boolean;\n  /**\n   * Maximum number of pages before the jump-to-page dropdown is replaced\n   * with a numeric input. Set to `0` to always use the input, or a very\n   * large number to always use the dropdown. Defaults to `500` — past that\n   * materialising the full range list stalls the main thread.\n   */\n  rangesThreshold?: number;\n}\n\nconst modelValue = defineModel<TablePaginationData>({ required: true });\n\nconst {\n  dense = false,\n  loading = false,\n  disablePerPage = false,\n  rangesThreshold = 500,\n} = defineProps<Props>();\n\nconst 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 space-x-2 text-caption',\n    ranges: 'flex items-center space-x-2 text-caption pr-2',\n    pageInput: 'w-20',\n    sectionLabel: 'text-rui-text-secondary whitespace-nowrap py-3',\n    indicator: 'text-rui-text text-caption whitespace-nowrap',\n    navigation: 'flex items-center',\n  },\n  variants: {\n    dense: {\n      true: {\n        wrapper: 'gap-x-2',\n      },\n    },\n  },\n});\n\nconst ui = computed<ReturnType<typeof paginationStyles>>(() => paginationStyles({ dense }));\n\nconst tableDefaults = useTable();\n\nconst {\n  limits,\n  currentLimit,\n  pages,\n  ranges,\n  indicatorText,\n  currentRange,\n  useInputJump,\n  hasPrev,\n  hasNext,\n  onPrev,\n  onNext,\n  onFirst,\n  onLast,\n} = usePaginationNavigation(modelValue, tableDefaults, () => rangesThreshold);\n\nconst pageDraft = ref<string>(String(get(currentRange)));\n\nwatch(currentRange, (value) => {\n  set(pageDraft, String(value));\n});\n\nfunction commitPageInput(): void {\n  const parsed = Number.parseInt(get(pageDraft), 10);\n  const maxPage = get(pages);\n  if (!Number.isFinite(parsed) || maxPage === 0) {\n    set(pageDraft, String(get(currentRange)));\n    return;\n  }\n  const clamped = Math.min(Math.max(parsed, 1), maxPage);\n  if (clamped !== get(currentRange))\n    set(currentRange, clamped);\n  set(pageDraft, String(clamped));\n}\n</script>\n\n<template>\n  <div :class=\"ui.wrapper()\">\n    <div\n      :class=\"ui.limit()\"\n      data-id=\"table-pagination-limit-section\"\n    >\n      <span :class=\"ui.sectionLabel()\">Rows per page:</span>\n      <RuiMenuSelect\n        v-model=\"currentLimit\"\n        :options=\"limits\"\n        :disabled=\"loading || disablePerPage\"\n        label-class=\"!text-xs !min-h-8\"\n        name=\"limit\"\n        key-attr=\"limit\"\n        text-attr=\"limit\"\n        hide-details\n        dense\n        data-id=\"table-pagination-limit\"\n      />\n    </div>\n    <div\n      :class=\"ui.ranges()\"\n      data-id=\"table-pagination-ranges-section\"\n    >\n      <span :class=\"ui.sectionLabel()\">{{ useInputJump ? 'Page' : 'Items #' }}</span>\n      <RuiTextField\n        v-if=\"useInputJump\"\n        v-model=\"pageDraft\"\n        :disabled=\"loading\"\n        :class=\"ui.pageInput()\"\n        type=\"number\"\n        min=\"1\"\n        :max=\"pages\"\n        inputmode=\"numeric\"\n        hide-details\n        dense\n        variant=\"outlined\"\n        data-id=\"table-pagination-ranges-input\"\n        @blur=\"commitPageInput()\"\n        @keydown.enter=\"commitPageInput()\"\n      />\n      <RuiMenuSelect\n        v-else-if=\"ranges.length > 0\"\n        v-model=\"currentRange\"\n        :options=\"ranges\"\n        :disabled=\"loading\"\n        label-class=\"!text-xs !min-h-8\"\n        name=\"ranges\"\n        key-attr=\"page\"\n        text-attr=\"text\"\n        hide-details\n        dense\n        data-id=\"table-pagination-ranges\"\n      />\n      <span :class=\"ui.indicator()\">\n        {{ indicatorText }}\n      </span>\n    </div>\n    <div\n      :class=\"ui.navigation()\"\n      data-id=\"table-pagination-navigation\"\n    >\n      <RuiButton\n        :size=\"dense ? 'sm' : undefined\"\n        :disabled=\"!hasPrev || loading\"\n        variant=\"text\"\n        icon\n        data-id=\"table-pagination-first\"\n        @click=\"onFirst()\"\n      >\n        <RuiIcon name=\"lu-chevrons-left\" />\n      </RuiButton>\n      <RuiButton\n        :size=\"dense ? 'sm' : undefined\"\n        :disabled=\"!hasPrev || loading\"\n        variant=\"text\"\n        icon\n        data-id=\"table-pagination-prev\"\n        @click=\"onPrev()\"\n      >\n        <RuiIcon name=\"lu-chevron-left\" />\n      </RuiButton>\n      <RuiButton\n        :size=\"dense ? 'sm' : undefined\"\n        :disabled=\"!hasNext || loading\"\n        variant=\"text\"\n        icon\n        data-id=\"table-pagination-next\"\n        @click=\"onNext()\"\n      >\n        <RuiIcon name=\"lu-chevron-right\" />\n      </RuiButton>\n      <RuiButton\n        :size=\"dense ? 'sm' : undefined\"\n        :disabled=\"!hasNext || loading\"\n        variant=\"text\"\n        icon\n        data-id=\"table-pagination-last\"\n        @click=\"onLast()\"\n      >\n        <RuiIcon name=\"lu-chevrons-right\" />\n      </RuiButton>\n    </div>\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"RuiTablePagination.js","names":[],"sources":["../../../src/components/tables/RuiTablePagination.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport RuiButton from '@/components/buttons/button/RuiButton.vue';\nimport RuiMenuSelect from '@/components/forms/select/RuiMenuSelect.vue';\nimport RuiTextField from '@/components/forms/text-field/RuiTextField.vue';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport { type TablePaginationData, usePaginationNavigation } from '@/components/tables/use-pagination-navigation';\nimport { useTable } from '@/composables/defaults/table';\nimport { tv } from '@/utils/tv';\n\nexport type { TablePaginationData };\n\nexport interface Props {\n  dense?: boolean;\n  disablePerPage?: boolean;\n  loading?: boolean;\n  /**\n   * Maximum number of pages before the jump-to-page dropdown is replaced\n   * with a numeric input. Set to `0` to always use the input, or a very\n   * large number to always use the dropdown. Defaults to `500` — past that\n   * materialising the full range list stalls the main thread.\n   */\n  rangesThreshold?: number;\n}\n\nconst modelValue = defineModel<TablePaginationData>({ required: true });\n\nconst {\n  dense = false,\n  loading = false,\n  disablePerPage = false,\n  rangesThreshold = 500,\n} = defineProps<Props>();\n\nconst 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 space-x-2 text-caption',\n    ranges: 'flex items-center space-x-2 text-caption pr-2',\n    pageInput: 'w-14 [&_input]:text-center',\n    sectionLabel: 'text-rui-text-secondary whitespace-nowrap py-3',\n    indicator: 'text-rui-text text-caption whitespace-nowrap',\n    navigation: 'flex items-center',\n  },\n  variants: {\n    dense: {\n      true: {\n        wrapper: 'gap-x-2',\n      },\n    },\n  },\n});\n\nconst ui = computed<ReturnType<typeof paginationStyles>>(() => paginationStyles({ dense }));\n\nconst tableDefaults = useTable();\n\nconst {\n  limits,\n  currentLimit,\n  pages,\n  ranges,\n  indicatorText,\n  currentRange,\n  useInputJump,\n  hasPrev,\n  hasNext,\n  onPrev,\n  onNext,\n  onFirst,\n  onLast,\n} = usePaginationNavigation(modelValue, tableDefaults, () => rangesThreshold);\n\nconst pageDraft = ref<string>(String(get(currentRange)));\n\nwatch(currentRange, (value) => {\n  set(pageDraft, String(value));\n});\n\nfunction commitPageInput(): void {\n  const parsed = Number.parseInt(get(pageDraft), 10);\n  const maxPage = get(pages);\n  if (!Number.isFinite(parsed) || maxPage === 0) {\n    set(pageDraft, String(get(currentRange)));\n    return;\n  }\n  const clamped = Math.min(Math.max(parsed, 1), maxPage);\n  if (clamped !== get(currentRange))\n    set(currentRange, clamped);\n  set(pageDraft, String(clamped));\n}\n</script>\n\n<template>\n  <div :class=\"ui.wrapper()\">\n    <div\n      :class=\"ui.limit()\"\n      data-id=\"table-pagination-limit-section\"\n    >\n      <span :class=\"ui.sectionLabel()\">Rows per page:</span>\n      <RuiMenuSelect\n        v-model=\"currentLimit\"\n        :options=\"limits\"\n        :disabled=\"loading || disablePerPage\"\n        label-class=\"!text-xs !min-h-8\"\n        name=\"limit\"\n        key-attr=\"limit\"\n        text-attr=\"limit\"\n        hide-details\n        dense\n        data-id=\"table-pagination-limit\"\n      />\n    </div>\n    <div\n      :class=\"ui.ranges()\"\n      data-id=\"table-pagination-ranges-section\"\n    >\n      <span :class=\"ui.sectionLabel()\">{{ useInputJump ? 'Page' : 'Items #' }}</span>\n      <RuiTextField\n        v-if=\"useInputJump\"\n        v-model=\"pageDraft\"\n        :disabled=\"loading\"\n        :class=\"[ui.pageInput()]\"\n        class=\"[&_input]:!pr-0\"\n        type=\"number\"\n        min=\"1\"\n        :max=\"pages\"\n        inputmode=\"numeric\"\n        hide-details\n        dense\n        data-id=\"table-pagination-ranges-input\"\n        @blur=\"commitPageInput()\"\n        @keydown.enter=\"commitPageInput()\"\n      />\n      <RuiMenuSelect\n        v-else-if=\"ranges.length > 0\"\n        v-model=\"currentRange\"\n        :options=\"ranges\"\n        :disabled=\"loading\"\n        label-class=\"!text-xs !min-h-8\"\n        name=\"ranges\"\n        key-attr=\"page\"\n        text-attr=\"text\"\n        hide-details\n        dense\n        data-id=\"table-pagination-ranges\"\n      />\n      <span :class=\"ui.indicator()\">\n        {{ indicatorText }}\n      </span>\n    </div>\n    <div\n      :class=\"ui.navigation()\"\n      data-id=\"table-pagination-navigation\"\n    >\n      <RuiButton\n        :size=\"dense ? 'sm' : undefined\"\n        :disabled=\"!hasPrev || loading\"\n        variant=\"text\"\n        icon\n        data-id=\"table-pagination-first\"\n        @click=\"onFirst()\"\n      >\n        <RuiIcon name=\"lu-chevrons-left\" />\n      </RuiButton>\n      <RuiButton\n        :size=\"dense ? 'sm' : undefined\"\n        :disabled=\"!hasPrev || loading\"\n        variant=\"text\"\n        icon\n        data-id=\"table-pagination-prev\"\n        @click=\"onPrev()\"\n      >\n        <RuiIcon name=\"lu-chevron-left\" />\n      </RuiButton>\n      <RuiButton\n        :size=\"dense ? 'sm' : undefined\"\n        :disabled=\"!hasNext || loading\"\n        variant=\"text\"\n        icon\n        data-id=\"table-pagination-next\"\n        @click=\"onNext()\"\n      >\n        <RuiIcon name=\"lu-chevron-right\" />\n      </RuiButton>\n      <RuiButton\n        :size=\"dense ? 'sm' : undefined\"\n        :disabled=\"!hasNext || loading\"\n        variant=\"text\"\n        icon\n        data-id=\"table-pagination-last\"\n        @click=\"onLast()\"\n      >\n        <RuiIcon name=\"lu-chevrons-right\" />\n      </RuiButton>\n    </div>\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/tables/RuiTablePagination.vue_vue_type_script_setup_true_lang.js

@@ -36,7 +36,7 @@ var RuiTablePagination_vue_vue_type_script_setup_true_lang_default = /* @__PURE_
 				wrapper: "relative flex flex-wrap items-center justify-end gap-x-4 gap-y-0",
 				limit: "flex items-center space-x-2 text-caption",
 				ranges: "flex items-center space-x-2 text-caption pr-2",
-				pageInput: "w-20",
+				pageInput: "w-14 [&_input]:text-center",
 				sectionLabel: "text-rui-text-secondary whitespace-nowrap py-3",
 				indicator: "text-rui-text text-caption whitespace-nowrap",
 				navigation: "flex items-center"
@@ -92,14 +92,13 @@ var RuiTablePagination_vue_vue_type_script_setup_true_lang_default = /* @__PURE_
 						modelValue: unref(pageDraft),
 						"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => isRef(pageDraft) ? pageDraft.value = $event : null),
 						disabled: __props.loading,
-						class: normalizeClass(unref(ui).pageInput()),
+						class: normalizeClass([[unref(ui).pageInput()], "[&_input]:!pr-0"]),
 						type: "number",
 						min: "1",
 						max: unref(pages),
 						inputmode: "numeric",
 						"hide-details": "",
 						dense: "",
-						variant: "outlined",
 						"data-id": "table-pagination-ranges-input",
 						onBlur: _cache[2] || (_cache[2] = ($event) => commitPageInput()),
 						onKeydown: _cache[3] || (_cache[3] = withKeys(($event) => commitPageInput(), ["enter"]))

package/dist/components/tables/RuiTablePagination.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiTablePagination.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/tables/RuiTablePagination.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport RuiButton from '@/components/buttons/button/RuiButton.vue';\nimport RuiMenuSelect from '@/components/forms/select/RuiMenuSelect.vue';\nimport RuiTextField from '@/components/forms/text-field/RuiTextField.vue';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport { type TablePaginationData, usePaginationNavigation } from '@/components/tables/use-pagination-navigation';\nimport { useTable } from '@/composables/defaults/table';\nimport { tv } from '@/utils/tv';\n\nexport type { TablePaginationData };\n\nexport interface Props {\n  dense?: boolean;\n  disablePerPage?: boolean;\n  loading?: boolean;\n  /**\n   * Maximum number of pages before the jump-to-page dropdown is replaced\n   * with a numeric input. Set to `0` to always use the input, or a very\n   * large number to always use the dropdown. Defaults to `500` — past that\n   * materialising the full range list stalls the main thread.\n   */\n  rangesThreshold?: number;\n}\n\nconst modelValue = defineModel<TablePaginationData>({ required: true });\n\nconst {\n  dense = false,\n  loading = false,\n  disablePerPage = false,\n  rangesThreshold = 500,\n} = defineProps<Props>();\n\nconst 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 space-x-2 text-caption',\n    ranges: 'flex items-center space-x-2 text-caption pr-2',\n    pageInput: 'w-20',\n    sectionLabel: 'text-rui-text-secondary whitespace-nowrap py-3',\n    indicator: 'text-rui-text text-caption whitespace-nowrap',\n    navigation: 'flex items-center',\n  },\n  variants: {\n    dense: {\n      true: {\n        wrapper: 'gap-x-2',\n      },\n    },\n  },\n});\n\nconst ui = computed<ReturnType<typeof paginationStyles>>(() => paginationStyles({ dense }));\n\nconst tableDefaults = useTable();\n\nconst {\n  limits,\n  currentLimit,\n  pages,\n  ranges,\n  indicatorText,\n  currentRange,\n  useInputJump,\n  hasPrev,\n  hasNext,\n  onPrev,\n  onNext,\n  onFirst,\n  onLast,\n} = usePaginationNavigation(modelValue, tableDefaults, () => rangesThreshold);\n\nconst pageDraft = ref<string>(String(get(currentRange)));\n\nwatch(currentRange, (value) => {\n  set(pageDraft, String(value));\n});\n\nfunction commitPageInput(): void {\n  const parsed = Number.parseInt(get(pageDraft), 10);\n  const maxPage = get(pages);\n  if (!Number.isFinite(parsed) || maxPage === 0) {\n    set(pageDraft, String(get(currentRange)));\n    return;\n  }\n  const clamped = Math.min(Math.max(parsed, 1), maxPage);\n  if (clamped !== get(currentRange))\n    set(currentRange, clamped);\n  set(pageDraft, String(clamped));\n}\n</script>\n\n<template>\n  <div :class=\"ui.wrapper()\">\n    <div\n      :class=\"ui.limit()\"\n      data-id=\"table-pagination-limit-section\"\n    >\n      <span :class=\"ui.sectionLabel()\">Rows per page:</span>\n      <RuiMenuSelect\n        v-model=\"currentLimit\"\n        :options=\"limits\"\n        :disabled=\"loading || disablePerPage\"\n        label-class=\"!text-xs !min-h-8\"\n        name=\"limit\"\n        key-attr=\"limit\"\n        text-attr=\"limit\"\n        hide-details\n        dense\n        data-id=\"table-pagination-limit\"\n      />\n    </div>\n    <div\n      :class=\"ui.ranges()\"\n      data-id=\"table-pagination-ranges-section\"\n    >\n      <span :class=\"ui.sectionLabel()\">{{ useInputJump ? 'Page' : 'Items #' }}</span>\n      <RuiTextField\n        v-if=\"useInputJump\"\n        v-model=\"pageDraft\"\n        :disabled=\"loading\"\n        :class=\"ui.pageInput()\"\n        type=\"number\"\n        min=\"1\"\n        :max=\"pages\"\n        inputmode=\"numeric\"\n        hide-details\n        dense\n        variant=\"outlined\"\n        data-id=\"table-pagination-ranges-input\"\n        @blur=\"commitPageInput()\"\n        @keydown.enter=\"commitPageInput()\"\n      />\n      <RuiMenuSelect\n        v-else-if=\"ranges.length > 0\"\n        v-model=\"currentRange\"\n        :options=\"ranges\"\n        :disabled=\"loading\"\n        label-class=\"!text-xs !min-h-8\"\n        name=\"ranges\"\n        key-attr=\"page\"\n        text-attr=\"text\"\n        hide-details\n        dense\n        data-id=\"table-pagination-ranges\"\n      />\n      <span :class=\"ui.indicator()\">\n        {{ indicatorText }}\n      </span>\n    </div>\n    <div\n      :class=\"ui.navigation()\"\n      data-id=\"table-pagination-navigation\"\n    >\n      <RuiButton\n        :size=\"dense ? 'sm' : undefined\"\n        :disabled=\"!hasPrev || loading\"\n        variant=\"text\"\n        icon\n        data-id=\"table-pagination-first\"\n        @click=\"onFirst()\"\n      >\n        <RuiIcon name=\"lu-chevrons-left\" />\n      </RuiButton>\n      <RuiButton\n        :size=\"dense ? 'sm' : undefined\"\n        :disabled=\"!hasPrev || loading\"\n        variant=\"text\"\n        icon\n        data-id=\"table-pagination-prev\"\n        @click=\"onPrev()\"\n      >\n        <RuiIcon name=\"lu-chevron-left\" />\n      </RuiButton>\n      <RuiButton\n        :size=\"dense ? 'sm' : undefined\"\n        :disabled=\"!hasNext || loading\"\n        variant=\"text\"\n        icon\n        data-id=\"table-pagination-next\"\n        @click=\"onNext()\"\n      >\n        <RuiIcon name=\"lu-chevron-right\" />\n      </RuiButton>\n      <RuiButton\n        :size=\"dense ? 'sm' : undefined\"\n        :disabled=\"!hasNext || loading\"\n        variant=\"text\"\n        icon\n        data-id=\"table-pagination-last\"\n        @click=\"onLast()\"\n      >\n        <RuiIcon name=\"lu-chevrons-right\" />\n      </RuiButton>\n    </div>\n  </div>\n</template>\n"],"mappings":"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"}
+{"version":3,"file":"RuiTablePagination.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/tables/RuiTablePagination.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport RuiButton from '@/components/buttons/button/RuiButton.vue';\nimport RuiMenuSelect from '@/components/forms/select/RuiMenuSelect.vue';\nimport RuiTextField from '@/components/forms/text-field/RuiTextField.vue';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport { type TablePaginationData, usePaginationNavigation } from '@/components/tables/use-pagination-navigation';\nimport { useTable } from '@/composables/defaults/table';\nimport { tv } from '@/utils/tv';\n\nexport type { TablePaginationData };\n\nexport interface Props {\n  dense?: boolean;\n  disablePerPage?: boolean;\n  loading?: boolean;\n  /**\n   * Maximum number of pages before the jump-to-page dropdown is replaced\n   * with a numeric input. Set to `0` to always use the input, or a very\n   * large number to always use the dropdown. Defaults to `500` — past that\n   * materialising the full range list stalls the main thread.\n   */\n  rangesThreshold?: number;\n}\n\nconst modelValue = defineModel<TablePaginationData>({ required: true });\n\nconst {\n  dense = false,\n  loading = false,\n  disablePerPage = false,\n  rangesThreshold = 500,\n} = defineProps<Props>();\n\nconst 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 space-x-2 text-caption',\n    ranges: 'flex items-center space-x-2 text-caption pr-2',\n    pageInput: 'w-14 [&_input]:text-center',\n    sectionLabel: 'text-rui-text-secondary whitespace-nowrap py-3',\n    indicator: 'text-rui-text text-caption whitespace-nowrap',\n    navigation: 'flex items-center',\n  },\n  variants: {\n    dense: {\n      true: {\n        wrapper: 'gap-x-2',\n      },\n    },\n  },\n});\n\nconst ui = computed<ReturnType<typeof paginationStyles>>(() => paginationStyles({ dense }));\n\nconst tableDefaults = useTable();\n\nconst {\n  limits,\n  currentLimit,\n  pages,\n  ranges,\n  indicatorText,\n  currentRange,\n  useInputJump,\n  hasPrev,\n  hasNext,\n  onPrev,\n  onNext,\n  onFirst,\n  onLast,\n} = usePaginationNavigation(modelValue, tableDefaults, () => rangesThreshold);\n\nconst pageDraft = ref<string>(String(get(currentRange)));\n\nwatch(currentRange, (value) => {\n  set(pageDraft, String(value));\n});\n\nfunction commitPageInput(): void {\n  const parsed = Number.parseInt(get(pageDraft), 10);\n  const maxPage = get(pages);\n  if (!Number.isFinite(parsed) || maxPage === 0) {\n    set(pageDraft, String(get(currentRange)));\n    return;\n  }\n  const clamped = Math.min(Math.max(parsed, 1), maxPage);\n  if (clamped !== get(currentRange))\n    set(currentRange, clamped);\n  set(pageDraft, String(clamped));\n}\n</script>\n\n<template>\n  <div :class=\"ui.wrapper()\">\n    <div\n      :class=\"ui.limit()\"\n      data-id=\"table-pagination-limit-section\"\n    >\n      <span :class=\"ui.sectionLabel()\">Rows per page:</span>\n      <RuiMenuSelect\n        v-model=\"currentLimit\"\n        :options=\"limits\"\n        :disabled=\"loading || disablePerPage\"\n        label-class=\"!text-xs !min-h-8\"\n        name=\"limit\"\n        key-attr=\"limit\"\n        text-attr=\"limit\"\n        hide-details\n        dense\n        data-id=\"table-pagination-limit\"\n      />\n    </div>\n    <div\n      :class=\"ui.ranges()\"\n      data-id=\"table-pagination-ranges-section\"\n    >\n      <span :class=\"ui.sectionLabel()\">{{ useInputJump ? 'Page' : 'Items #' }}</span>\n      <RuiTextField\n        v-if=\"useInputJump\"\n        v-model=\"pageDraft\"\n        :disabled=\"loading\"\n        :class=\"[ui.pageInput()]\"\n        class=\"[&_input]:!pr-0\"\n        type=\"number\"\n        min=\"1\"\n        :max=\"pages\"\n        inputmode=\"numeric\"\n        hide-details\n        dense\n        data-id=\"table-pagination-ranges-input\"\n        @blur=\"commitPageInput()\"\n        @keydown.enter=\"commitPageInput()\"\n      />\n      <RuiMenuSelect\n        v-else-if=\"ranges.length > 0\"\n        v-model=\"currentRange\"\n        :options=\"ranges\"\n        :disabled=\"loading\"\n        label-class=\"!text-xs !min-h-8\"\n        name=\"ranges\"\n        key-attr=\"page\"\n        text-attr=\"text\"\n        hide-details\n        dense\n        data-id=\"table-pagination-ranges\"\n      />\n      <span :class=\"ui.indicator()\">\n        {{ indicatorText }}\n      </span>\n    </div>\n    <div\n      :class=\"ui.navigation()\"\n      data-id=\"table-pagination-navigation\"\n    >\n      <RuiButton\n        :size=\"dense ? 'sm' : undefined\"\n        :disabled=\"!hasPrev || loading\"\n        variant=\"text\"\n        icon\n        data-id=\"table-pagination-first\"\n        @click=\"onFirst()\"\n      >\n        <RuiIcon name=\"lu-chevrons-left\" />\n      </RuiButton>\n      <RuiButton\n        :size=\"dense ? 'sm' : undefined\"\n        :disabled=\"!hasPrev || loading\"\n        variant=\"text\"\n        icon\n        data-id=\"table-pagination-prev\"\n        @click=\"onPrev()\"\n      >\n        <RuiIcon name=\"lu-chevron-left\" />\n      </RuiButton>\n      <RuiButton\n        :size=\"dense ? 'sm' : undefined\"\n        :disabled=\"!hasNext || loading\"\n        variant=\"text\"\n        icon\n        data-id=\"table-pagination-next\"\n        @click=\"onNext()\"\n      >\n        <RuiIcon name=\"lu-chevron-right\" />\n      </RuiButton>\n      <RuiButton\n        :size=\"dense ? 'sm' : undefined\"\n        :disabled=\"!hasNext || loading\"\n        variant=\"text\"\n        icon\n        data-id=\"table-pagination-last\"\n        @click=\"onLast()\"\n      >\n        <RuiIcon name=\"lu-chevrons-right\" />\n      </RuiButton>\n    </div>\n  </div>\n</template>\n"],"mappings":"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"}

package/dist/composables/forms/auto-complete/value.js

@@ -58,7 +58,7 @@ function useAutoCompleteValue(modelValue, options, opts, deps) {
 			setSelected(selected);
 		}
 	});
-	watch([modelValue, () => toValue(deps.isOpen)], () => {
+	watch([value, () => toValue(deps.isOpen)], () => {
 		if (toValue(deps.isOpen) || !toValue(deps.shouldApplyValueAsSearch)) return;
 		const currentValue = get(value);
 		if (toValue(deps.multiple) || currentValue.length === 0) deps.updateInternalSearch();

package/dist/composables/forms/auto-complete/value.js.map

@@ -1 +1 @@
-{"version":3,"file":"value.js","names":[],"sources":["../../../../src/composables/forms/auto-complete/value.ts"],"sourcesContent":["import type { ComputedRef, MaybeRefOrGetter, Ref } from 'vue';\nimport { get, set } from '@vueuse/shared';\nimport { assert } from '@/utils/assert';\n\nexport interface UseAutoCompleteValueOptions<TItem> {\n  /** The property used as the unique identifier for each item. */\n  keyAttr?: MaybeRefOrGetter<keyof TItem | undefined>;\n  /** Whether to return the full item object instead of just the key. */\n  returnObject?: MaybeRefOrGetter<boolean>;\n  /** Whether custom (free-text) values are allowed. */\n  customValue?: MaybeRefOrGetter<boolean>;\n}\n\nexport interface UseAutoCompleteValueReturn<TItem> {\n  value: ComputedRef<TItem[]>;\n  setSelected: (selected: TItem[]) => void;\n}\n\nexport interface UseAutoCompleteValueDeps<TItem> {\n  getIdentifier: (item: TItem) => any;\n  getText: (item: TItem) => string | undefined;\n  textValueToProperValue: (val: any, returnObject?: boolean) => TItem;\n  shouldApplyValueAsSearch: MaybeRefOrGetter<boolean>;\n  isOpen: MaybeRefOrGetter<boolean>;\n  multiple: MaybeRefOrGetter<boolean>;\n  updateInternalSearch: (value?: string) => void;\n}\n\nexport function useAutoCompleteValue<TValue, TItem>(\n  modelValue: Ref<TValue | undefined>, // eslint-disable-line @rotki/composable-input-flexibility -- needs write access\n  options: MaybeRefOrGetter<TItem[]>,\n  opts: UseAutoCompleteValueOptions<TItem>,\n  deps: UseAutoCompleteValueDeps<TItem>,\n): UseAutoCompleteValueReturn<TItem> {\n  // Create maps for O(1) lookup performance\n  const optionsMap = computed<Map<any, TItem>>(() => {\n    const map = new Map<any, TItem>();\n    const optionsData = toValue(options);\n    for (const item of optionsData) {\n      map.set(deps.getIdentifier(item), item);\n    }\n    return map;\n  });\n\n  function convertModelValueToArray(modelValueData: TValue | undefined): any[] {\n    if (modelValueData === null || modelValueData === undefined)\n      return [];\n    return Array.isArray(modelValueData) ? modelValueData : [modelValueData];\n  }\n\n  function filterValues(\n    valueArray: any[],\n    optionsMapData: Map<any, TItem>,\n    customValue: boolean,\n    returnObject: boolean,\n    getKey: (val: any) => any,\n  ): TItem[] {\n    const filtered: TItem[] = [];\n    for (const val of valueArray) {\n      const inOptions = optionsMapData.get(getKey(val));\n      if (inOptions !== undefined)\n        filtered.push(inOptions);\n      else if (customValue)\n        filtered.push(deps.textValueToProperValue(val, returnObject));\n    }\n    return filtered;\n  }\n\n  function processReturnObjectValue(\n    modelValueData: TValue | undefined,\n    optionsMapData: Map<any, TItem>,\n    returnObject: boolean,\n    customValue: boolean,\n  ): TItem[] {\n    const multipleValue = Array.isArray(modelValueData);\n    const valueArray = convertModelValueToArray(modelValueData);\n    const filtered = filterValues(valueArray, optionsMapData, customValue, returnObject, val => deps.getIdentifier(val));\n\n    if (multipleValue || filtered.length === 0)\n      return filtered;\n\n    const val = filtered[0];\n    assert(val !== undefined && val !== null);\n    return [val];\n  }\n\n  function processStandardValue(\n    modelValueData: TValue | undefined,\n    optionsMapData: Map<any, TItem>,\n    returnObject: boolean,\n    customValue: boolean,\n  ): TItem[] {\n    const valueArray = convertModelValueToArray(modelValueData);\n    return filterValues(valueArray, optionsMapData, customValue, returnObject, val => val);\n  }\n\n  function onUpdateModelValue(value: TValue | undefined): void {\n    set(modelValue, value);\n  }\n\n  function setSelected(selected: TItem[]): void {\n    const keyAttr = toValue(opts.keyAttr);\n    const returnObject = toValue(opts.returnObject);\n    const selection = keyAttr && !returnObject ? selected.map(item => item[keyAttr]) : selected;\n\n    if (toValue(deps.multiple))\n      return onUpdateModelValue(selection as TValue);\n\n    if (selection.length === 0)\n      return onUpdateModelValue(undefined);\n\n    return onUpdateModelValue(selection[0] as TValue);\n  }\n\n  const value = computed<TItem[]>({\n    get: () => {\n      const modelValueData = get(modelValue);\n      const keyAttr = toValue(opts.keyAttr);\n      const returnObject = toValue(opts.returnObject) ?? false;\n      const customValue = toValue(opts.customValue) ?? false;\n      const optionsMapData = get(optionsMap);\n\n      if (keyAttr && returnObject)\n        return processReturnObjectValue(modelValueData, optionsMapData, returnObject, customValue);\n\n      return processStandardValue(modelValueData, optionsMapData, returnObject, customValue);\n    },\n    set: (selected: TItem[]): void => {\n      setSelected(selected);\n    },\n  });\n\n  // Sync search text when menu is closed and value changes\n  watch([modelValue, () => toValue(deps.isOpen)], () => {\n    if (toValue(deps.isOpen) || !toValue(deps.shouldApplyValueAsSearch))\n      return;\n\n    const currentValue = get(value);\n    if (toValue(deps.multiple) || currentValue.length === 0) {\n      deps.updateInternalSearch();\n    }\n    else {\n      const firstItem = currentValue[0];\n      assert(firstItem !== undefined && firstItem !== null);\n      deps.updateInternalSearch(deps.getText(firstItem));\n    }\n  }, { immediate: true });\n\n  return {\n    setSelected,\n    value,\n  };\n}\n"],"mappings":";;;;AA4BA,SAAgB,qBACd,YACA,SACA,MACA,MACmC;CAEnC,MAAM,aAAa,eAAgC;EACjD,MAAM,sBAAM,IAAI,KAAiB;EACjC,MAAM,cAAc,QAAQ,QAAQ;AACpC,OAAK,MAAM,QAAQ,YACjB,KAAI,IAAI,KAAK,cAAc,KAAK,EAAE,KAAK;AAEzC,SAAO;GACP;CAEF,SAAS,yBAAyB,gBAA2C;AAC3E,MAAI,mBAAmB,QAAQ,mBAAmB,KAAA,EAChD,QAAO,EAAE;AACX,SAAO,MAAM,QAAQ,eAAe,GAAG,iBAAiB,CAAC,eAAe;;CAG1E,SAAS,aACP,YACA,gBACA,aACA,cACA,QACS;EACT,MAAM,WAAoB,EAAE;AAC5B,OAAK,MAAM,OAAO,YAAY;GAC5B,MAAM,YAAY,eAAe,IAAI,OAAO,IAAI,CAAC;AACjD,OAAI,cAAc,KAAA,EAChB,UAAS,KAAK,UAAU;YACjB,YACP,UAAS,KAAK,KAAK,uBAAuB,KAAK,aAAa,CAAC;;AAEjE,SAAO;;CAGT,SAAS,yBACP,gBACA,gBACA,cACA,aACS;EACT,MAAM,gBAAgB,MAAM,QAAQ,eAAe;EAEnD,MAAM,WAAW,aADE,yBAAyB,eAAe,EACjB,gBAAgB,aAAa,eAAc,QAAO,KAAK,cAAc,IAAI,CAAC;AAEpH,MAAI,iBAAiB,SAAS,WAAW,EACvC,QAAO;EAET,MAAM,MAAM,SAAS;AACrB,SAAO,QAAQ,KAAA,KAAa,QAAQ,KAAK;AACzC,SAAO,CAAC,IAAI;;CAGd,SAAS,qBACP,gBACA,gBACA,cACA,aACS;AAET,SAAO,aADY,yBAAyB,eAAe,EAC3B,gBAAgB,aAAa,eAAc,QAAO,IAAI;;CAGxF,SAAS,mBAAmB,OAAiC;AAC3D,MAAI,YAAY,MAAM;;CAGxB,SAAS,YAAY,UAAyB;EAC5C,MAAM,UAAU,QAAQ,KAAK,QAAQ;EACrC,MAAM,eAAe,QAAQ,KAAK,aAAa;EAC/C,MAAM,YAAY,WAAW,CAAC,eAAe,SAAS,KAAI,SAAQ,KAAK,SAAS,GAAG;AAEnF,MAAI,QAAQ,KAAK,SAAS,CACxB,QAAO,mBAAmB,UAAoB;AAEhD,MAAI,UAAU,WAAW,EACvB,QAAO,mBAAmB,KAAA,EAAU;AAEtC,SAAO,mBAAmB,UAAU,GAAa;;CAGnD,MAAM,QAAQ,SAAkB;EAC9B,WAAW;GACT,MAAM,iBAAiB,IAAI,WAAW;GACtC,MAAM,UAAU,QAAQ,KAAK,QAAQ;GACrC,MAAM,eAAe,QAAQ,KAAK,aAAa,IAAI;GACnD,MAAM,cAAc,QAAQ,KAAK,YAAY,IAAI;GACjD,MAAM,iBAAiB,IAAI,WAAW;AAEtC,OAAI,WAAW,aACb,QAAO,yBAAyB,gBAAgB,gBAAgB,cAAc,YAAY;AAE5F,UAAO,qBAAqB,gBAAgB,gBAAgB,cAAc,YAAY;;EAExF,MAAM,aAA4B;AAChC,eAAY,SAAS;;EAExB,CAAC;AAGF,OAAM,CAAC,kBAAkB,QAAQ,KAAK,OAAO,CAAC,QAAQ;AACpD,MAAI,QAAQ,KAAK,OAAO,IAAI,CAAC,QAAQ,KAAK,yBAAyB,CACjE;EAEF,MAAM,eAAe,IAAI,MAAM;AAC/B,MAAI,QAAQ,KAAK,SAAS,IAAI,aAAa,WAAW,EACpD,MAAK,sBAAsB;OAExB;GACH,MAAM,YAAY,aAAa;AAC/B,UAAO,cAAc,KAAA,KAAa,cAAc,KAAK;AACrD,QAAK,qBAAqB,KAAK,QAAQ,UAAU,CAAC;;IAEnD,EAAE,WAAW,MAAM,CAAC;AAEvB,QAAO;EACL;EACA;EACD"}
+{"version":3,"file":"value.js","names":[],"sources":["../../../../src/composables/forms/auto-complete/value.ts"],"sourcesContent":["import type { ComputedRef, MaybeRefOrGetter, Ref } from 'vue';\nimport { get, set } from '@vueuse/shared';\nimport { assert } from '@/utils/assert';\n\nexport interface UseAutoCompleteValueOptions<TItem> {\n  /** The property used as the unique identifier for each item. */\n  keyAttr?: MaybeRefOrGetter<keyof TItem | undefined>;\n  /** Whether to return the full item object instead of just the key. */\n  returnObject?: MaybeRefOrGetter<boolean>;\n  /** Whether custom (free-text) values are allowed. */\n  customValue?: MaybeRefOrGetter<boolean>;\n}\n\nexport interface UseAutoCompleteValueReturn<TItem> {\n  value: ComputedRef<TItem[]>;\n  setSelected: (selected: TItem[]) => void;\n}\n\nexport interface UseAutoCompleteValueDeps<TItem> {\n  getIdentifier: (item: TItem) => any;\n  getText: (item: TItem) => string | undefined;\n  textValueToProperValue: (val: any, returnObject?: boolean) => TItem;\n  shouldApplyValueAsSearch: MaybeRefOrGetter<boolean>;\n  isOpen: MaybeRefOrGetter<boolean>;\n  multiple: MaybeRefOrGetter<boolean>;\n  updateInternalSearch: (value?: string) => void;\n}\n\nexport function useAutoCompleteValue<TValue, TItem>(\n  modelValue: Ref<TValue | undefined>, // eslint-disable-line @rotki/composable-input-flexibility -- needs write access\n  options: MaybeRefOrGetter<TItem[]>,\n  opts: UseAutoCompleteValueOptions<TItem>,\n  deps: UseAutoCompleteValueDeps<TItem>,\n): UseAutoCompleteValueReturn<TItem> {\n  // Create maps for O(1) lookup performance\n  const optionsMap = computed<Map<any, TItem>>(() => {\n    const map = new Map<any, TItem>();\n    const optionsData = toValue(options);\n    for (const item of optionsData) {\n      map.set(deps.getIdentifier(item), item);\n    }\n    return map;\n  });\n\n  function convertModelValueToArray(modelValueData: TValue | undefined): any[] {\n    if (modelValueData === null || modelValueData === undefined)\n      return [];\n    return Array.isArray(modelValueData) ? modelValueData : [modelValueData];\n  }\n\n  function filterValues(\n    valueArray: any[],\n    optionsMapData: Map<any, TItem>,\n    customValue: boolean,\n    returnObject: boolean,\n    getKey: (val: any) => any,\n  ): TItem[] {\n    const filtered: TItem[] = [];\n    for (const val of valueArray) {\n      const inOptions = optionsMapData.get(getKey(val));\n      if (inOptions !== undefined)\n        filtered.push(inOptions);\n      else if (customValue)\n        filtered.push(deps.textValueToProperValue(val, returnObject));\n    }\n    return filtered;\n  }\n\n  function processReturnObjectValue(\n    modelValueData: TValue | undefined,\n    optionsMapData: Map<any, TItem>,\n    returnObject: boolean,\n    customValue: boolean,\n  ): TItem[] {\n    const multipleValue = Array.isArray(modelValueData);\n    const valueArray = convertModelValueToArray(modelValueData);\n    const filtered = filterValues(valueArray, optionsMapData, customValue, returnObject, val => deps.getIdentifier(val));\n\n    if (multipleValue || filtered.length === 0)\n      return filtered;\n\n    const val = filtered[0];\n    assert(val !== undefined && val !== null);\n    return [val];\n  }\n\n  function processStandardValue(\n    modelValueData: TValue | undefined,\n    optionsMapData: Map<any, TItem>,\n    returnObject: boolean,\n    customValue: boolean,\n  ): TItem[] {\n    const valueArray = convertModelValueToArray(modelValueData);\n    return filterValues(valueArray, optionsMapData, customValue, returnObject, val => val);\n  }\n\n  function onUpdateModelValue(value: TValue | undefined): void {\n    set(modelValue, value);\n  }\n\n  function setSelected(selected: TItem[]): void {\n    const keyAttr = toValue(opts.keyAttr);\n    const returnObject = toValue(opts.returnObject);\n    const selection = keyAttr && !returnObject ? selected.map(item => item[keyAttr]) : selected;\n\n    if (toValue(deps.multiple))\n      return onUpdateModelValue(selection as TValue);\n\n    if (selection.length === 0)\n      return onUpdateModelValue(undefined);\n\n    return onUpdateModelValue(selection[0] as TValue);\n  }\n\n  const value = computed<TItem[]>({\n    get: () => {\n      const modelValueData = get(modelValue);\n      const keyAttr = toValue(opts.keyAttr);\n      const returnObject = toValue(opts.returnObject) ?? false;\n      const customValue = toValue(opts.customValue) ?? false;\n      const optionsMapData = get(optionsMap);\n\n      if (keyAttr && returnObject)\n        return processReturnObjectValue(modelValueData, optionsMapData, returnObject, customValue);\n\n      return processStandardValue(modelValueData, optionsMapData, returnObject, customValue);\n    },\n    set: (selected: TItem[]): void => {\n      setSelected(selected);\n    },\n  });\n\n  // Watching `value` (not `modelValue`) so the search text resyncs once\n  // `options` arrives later and the lookup can finally resolve.\n  watch([value, () => toValue(deps.isOpen)], () => {\n    if (toValue(deps.isOpen) || !toValue(deps.shouldApplyValueAsSearch))\n      return;\n\n    const currentValue = get(value);\n    if (toValue(deps.multiple) || currentValue.length === 0) {\n      deps.updateInternalSearch();\n    }\n    else {\n      const firstItem = currentValue[0];\n      assert(firstItem !== undefined && firstItem !== null);\n      deps.updateInternalSearch(deps.getText(firstItem));\n    }\n  }, { immediate: true });\n\n  return {\n    setSelected,\n    value,\n  };\n}\n"],"mappings":";;;;AA4BA,SAAgB,qBACd,YACA,SACA,MACA,MACmC;CAEnC,MAAM,aAAa,eAAgC;EACjD,MAAM,sBAAM,IAAI,KAAiB;EACjC,MAAM,cAAc,QAAQ,QAAQ;AACpC,OAAK,MAAM,QAAQ,YACjB,KAAI,IAAI,KAAK,cAAc,KAAK,EAAE,KAAK;AAEzC,SAAO;GACP;CAEF,SAAS,yBAAyB,gBAA2C;AAC3E,MAAI,mBAAmB,QAAQ,mBAAmB,KAAA,EAChD,QAAO,EAAE;AACX,SAAO,MAAM,QAAQ,eAAe,GAAG,iBAAiB,CAAC,eAAe;;CAG1E,SAAS,aACP,YACA,gBACA,aACA,cACA,QACS;EACT,MAAM,WAAoB,EAAE;AAC5B,OAAK,MAAM,OAAO,YAAY;GAC5B,MAAM,YAAY,eAAe,IAAI,OAAO,IAAI,CAAC;AACjD,OAAI,cAAc,KAAA,EAChB,UAAS,KAAK,UAAU;YACjB,YACP,UAAS,KAAK,KAAK,uBAAuB,KAAK,aAAa,CAAC;;AAEjE,SAAO;;CAGT,SAAS,yBACP,gBACA,gBACA,cACA,aACS;EACT,MAAM,gBAAgB,MAAM,QAAQ,eAAe;EAEnD,MAAM,WAAW,aADE,yBAAyB,eAAe,EACjB,gBAAgB,aAAa,eAAc,QAAO,KAAK,cAAc,IAAI,CAAC;AAEpH,MAAI,iBAAiB,SAAS,WAAW,EACvC,QAAO;EAET,MAAM,MAAM,SAAS;AACrB,SAAO,QAAQ,KAAA,KAAa,QAAQ,KAAK;AACzC,SAAO,CAAC,IAAI;;CAGd,SAAS,qBACP,gBACA,gBACA,cACA,aACS;AAET,SAAO,aADY,yBAAyB,eAAe,EAC3B,gBAAgB,aAAa,eAAc,QAAO,IAAI;;CAGxF,SAAS,mBAAmB,OAAiC;AAC3D,MAAI,YAAY,MAAM;;CAGxB,SAAS,YAAY,UAAyB;EAC5C,MAAM,UAAU,QAAQ,KAAK,QAAQ;EACrC,MAAM,eAAe,QAAQ,KAAK,aAAa;EAC/C,MAAM,YAAY,WAAW,CAAC,eAAe,SAAS,KAAI,SAAQ,KAAK,SAAS,GAAG;AAEnF,MAAI,QAAQ,KAAK,SAAS,CACxB,QAAO,mBAAmB,UAAoB;AAEhD,MAAI,UAAU,WAAW,EACvB,QAAO,mBAAmB,KAAA,EAAU;AAEtC,SAAO,mBAAmB,UAAU,GAAa;;CAGnD,MAAM,QAAQ,SAAkB;EAC9B,WAAW;GACT,MAAM,iBAAiB,IAAI,WAAW;GACtC,MAAM,UAAU,QAAQ,KAAK,QAAQ;GACrC,MAAM,eAAe,QAAQ,KAAK,aAAa,IAAI;GACnD,MAAM,cAAc,QAAQ,KAAK,YAAY,IAAI;GACjD,MAAM,iBAAiB,IAAI,WAAW;AAEtC,OAAI,WAAW,aACb,QAAO,yBAAyB,gBAAgB,gBAAgB,cAAc,YAAY;AAE5F,UAAO,qBAAqB,gBAAgB,gBAAgB,cAAc,YAAY;;EAExF,MAAM,aAA4B;AAChC,eAAY,SAAS;;EAExB,CAAC;AAIF,OAAM,CAAC,aAAa,QAAQ,KAAK,OAAO,CAAC,QAAQ;AAC/C,MAAI,QAAQ,KAAK,OAAO,IAAI,CAAC,QAAQ,KAAK,yBAAyB,CACjE;EAEF,MAAM,eAAe,IAAI,MAAM;AAC/B,MAAI,QAAQ,KAAK,SAAS,IAAI,aAAa,WAAW,EACpD,MAAK,sBAAsB;OAExB;GACH,MAAM,YAAY,aAAa;AAC/B,UAAO,cAAc,KAAA,KAAa,cAAc,KAAK;AACrD,QAAK,qBAAqB,KAAK,QAAQ,UAAU,CAAC;;IAEnD,EAAE,WAAW,MAAM,CAAC;AAEvB,QAAO;EACL;EACA;EACD"}

package/dist/style.css

@@ -1507,10 +1507,6 @@ html[data-theme="dark"], html.dark {
   width: 0.625rem;
 }
 
-.w-20 {
-  width: 5rem;
-}
-
 .w-3 {
   width: 0.75rem;
 }
@@ -1531,6 +1527,10 @@ html[data-theme="dark"], html.dark {
   width: 16rem;
 }
 
+.w-7 {
+  width: 1.75rem;
+}
+
 .w-8 {
   width: 2rem;
 }
@@ -2927,6 +2927,10 @@ html[data-theme="dark"], html.dark {
   padding: 0.25rem;
 }
 
+.p-1\.5 {
+  padding: 0.375rem;
+}
+
 .p-2 {
   padding: 0.5rem;
 }
@@ -2966,11 +2970,6 @@ html[data-theme="dark"], html.dark {
   padding-right: 0px;
 }
 
-.px-1 {
-  padding-left: 0.25rem;
-  padding-right: 0.25rem;
-}
-
 .px-1\.5 {
   padding-left: 0.375rem;
   padding-right: 0.375rem;
@@ -3051,6 +3050,10 @@ html[data-theme="dark"], html.dark {
   padding-bottom: 0.38rem;
 }
 
+.\!pt-0 {
+  padding-top: 0px !important;
+}
+
 .\!pt-2 {
   padding-top: 0.5rem !important;
 }
@@ -5491,6 +5494,58 @@ body {
   background-color: rgba(var(--rui-grey-900), var(--tw-bg-opacity, 1));
 }
 
+.\[\&_\.rui-icon\]\:\!h-4 .rui-icon {
+  height: 1rem !important;
+}
+
+.\[\&_\.rui-icon\]\:\!h-5 .rui-icon {
+  height: 1.25rem !important;
+}
+
+.\[\&_\.rui-icon\]\:\!h-6 .rui-icon {
+  height: 1.5rem !important;
+}
+
+.\[\&_\.rui-icon\]\:\!h-7 .rui-icon {
+  height: 1.75rem !important;
+}
+
+.\[\&_\.rui-icon\]\:\!h-\[1\.375rem\] .rui-icon {
+  height: 1.375rem !important;
+}
+
+.\[\&_\.rui-icon\]\:h-\[1\.125rem\] .rui-icon {
+  height: 1.125rem;
+}
+
+.\[\&_\.rui-icon\]\:\!w-4 .rui-icon {
+  width: 1rem !important;
+}
+
+.\[\&_\.rui-icon\]\:\!w-5 .rui-icon {
+  width: 1.25rem !important;
+}
+
+.\[\&_\.rui-icon\]\:\!w-6 .rui-icon {
+  width: 1.5rem !important;
+}
+
+.\[\&_\.rui-icon\]\:\!w-7 .rui-icon {
+  width: 1.75rem !important;
+}
+
+.\[\&_\.rui-icon\]\:\!w-\[1\.375rem\] .rui-icon {
+  width: 1.375rem !important;
+}
+
+.\[\&_\.rui-icon\]\:w-\[1\.125rem\] .rui-icon {
+  width: 1.125rem;
+}
+
+.\[\&_input\]\:\!pr-0 input {
+  padding-right: 0px !important;
+}
+
 .\[\&_input\]\:text-center input {
   text-align: center;
 }

package/dist/web-types.json

@@ -2,7 +2,7 @@
   "$schema": "http://json.schemastore.org/web-types",
   "framework": "vue",
   "name": "@rotki/ui-library",
-  "version": "2.16.3",
+  "version": "2.17.1",
   "js-types-syntax": "typescript",
   "description-markup": "markdown",
   "contributions": {
@@ -1440,7 +1440,6 @@
               "name": "size",
               "description": "",
               "required": false,
-              "default": "24",
               "value": {
                 "kind": "expression",
                 "type": "string | number | undefined"
@@ -3246,7 +3245,7 @@
               "required": false,
               "value": {
                 "kind": "expression",
-                "type": "'sm' | 'lg' | undefined"
+                "type": "ButtonSize | undefined"
               }
             },
             {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rotki/ui-library",
-  "version": "2.16.3",
+  "version": "2.17.1",
   "description": "A vue design system and component library for rotki",
   "type": "module",
   "keywords": [
@@ -98,43 +98,41 @@
   },
   "devDependencies": {
     "@fontsource/roboto": "5.2.10",
-    "@storybook/addon-a11y": "10.3.4",
-    "@storybook/addon-docs": "10.3.4",
-    "@storybook/addon-links": "10.3.4",
-    "@storybook/addon-themes": "10.3.4",
-    "@storybook/addon-vitest": "10.3.4",
-    "@storybook/vue3-vite": "10.3.4",
+    "@storybook/addon-a11y": "10.3.5",
+    "@storybook/addon-docs": "10.3.5",
+    "@storybook/addon-links": "10.3.5",
+    "@storybook/addon-themes": "10.3.5",
+    "@storybook/addon-vitest": "10.3.5",
+    "@storybook/vue3-vite": "10.3.5",
     "@tsconfig/node24": "24.0.4",
-    "@types/jsdom": "28.0.1",
     "@types/node": "24.12.2",
     "@types/tinycolor2": "1.4.6",
-    "@vitejs/plugin-vue": "6.0.5",
-    "@vitest/browser": "4.1.2",
-    "@vitest/browser-playwright": "4.1.2",
-    "@vitest/coverage-v8": "4.1.2",
-    "@vitest/ui": "4.1.2",
+    "@vitejs/plugin-vue": "6.0.6",
+    "@vitest/browser": "4.1.4",
+    "@vitest/browser-playwright": "4.1.4",
+    "@vitest/coverage-v8": "4.1.4",
+    "@vitest/ui": "4.1.4",
     "@vue/test-utils": "2.4.6",
     "@vue/tsconfig": "0.9.1",
-    "autoprefixer": "10.4.27",
+    "autoprefixer": "10.5.0",
     "cac": "7.0.0",
     "consola": "3.4.2",
     "fast-glob": "3.3.3",
-    "fast-xml-parser": "5.5.10",
+    "fast-xml-parser": "5.5.12",
     "fs-extra": "11.3.4",
-    "happy-dom": "20.8.9",
-    "jsdom": "28.1.0",
+    "happy-dom": "20.9.0",
     "lucide": "0.577.0",
-    "msw": "2.13.0",
-    "postcss": "8.5.8",
-    "storybook": "10.3.4",
+    "msw": "2.13.3",
+    "postcss": "8.5.9",
+    "storybook": "10.3.5",
     "tailwindcss": "3.4.19",
     "tsc-alias": "1.8.16",
     "tsx": "4.21.0",
     "typescript": "5.9.3",
     "unplugin-auto-import": "21.0.0",
-    "vite": "8.0.7",
+    "vite": "8.0.8",
     "vite-plugin-vue-devtools": "8.1.1",
-    "vitest": "4.1.2",
+    "vitest": "4.1.4",
     "vue": "3.5.32",
     "vue-component-meta": "3.2.6",
     "vue-router": "5.0.4",