@rotki/ui-library 3.1.6 → 3.2.0

package/dist/components/avatars/RuiAvatarGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiAvatarGroup.js","names":["_sfc_main"],"sources":["../../../src/components/avatars/RuiAvatarGroup.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { get } from '@vueuse/shared';\nimport { Comment, defineComponent, Fragment, Text, type VNode } from 'vue';\nimport {\n  avatarGroupInjectionKey,\n  AvatarGroupSpacing,\n  type AvatarSize,\n  type AvatarVariant,\n  resolveAvatarGroupSpacingPx,\n  resolveAvatarSizePx,\n} from '@/components/avatars/avatar-props';\nimport RuiAvatar from '@/components/avatars/RuiAvatar.vue';\nimport { tv } from '@/utils/tv';\n\nexport interface Props {\n  size?: AvatarSize | number;\n  variant?: AvatarVariant;\n  max?: number;\n  total?: number;\n  /**\n   * How much each avatar overlaps the previous one. The tokens name the\n   * amount of overlap, so `lg` overlaps the most and `sm` the least; they\n   * scale with the avatar size. A number is the inline margin in pixels and\n   * should be negative to overlap.\n   */\n  spacing?: AvatarGroupSpacing | number;\n}\n\ndefineOptions({\n  name: 'RuiAvatarGroup',\n});\n\nconst {\n  size,\n  variant = 'circular',\n  max,\n  total,\n  spacing = AvatarGroupSpacing.md,\n} = defineProps<Props>();\n\nconst slots = defineSlots<{\n  default?: () => VNode[];\n  surplus?: (props: { count: number }) => any;\n}>();\n\nconst resolvedSize = computed<AvatarSize | number>(() => size ?? 'md');\n\nconst VNodeRenderer = defineComponent<{ vnode: VNode }>({\n  props: ['vnode'],\n  setup(props) {\n    return (): VNode => props.vnode;\n  },\n});\n\nprovide(avatarGroupInjectionKey, computed(() => ({ size: get(resolvedSize), variant })));\n\nconst groupStyles = tv({\n  slots: {\n    root: 'inline-flex items-center isolate',\n    item: 'relative ring-2 ring-rui-surface',\n    surplus: 'leading-none text-[0.85em] tracking-tight',\n  },\n  // The ring follows the avatar outline\n  variants: {\n    variant: {\n      circular: { item: 'rounded-full' },\n      rounded: { item: 'rounded-rui-control' },\n      square: { item: 'rounded-none' },\n    },\n  },\n});\n\nfunction flattenChildren(nodes: VNode[] | undefined): VNode[] {\n  if (!nodes)\n    return [];\n  const out: VNode[] = [];\n  for (const node of nodes) {\n    if (node.type === Comment)\n      continue;\n    if (node.type === Text && typeof node.children === 'string' && node.children.trim() === '')\n      continue;\n    if (node.type === Fragment && Array.isArray(node.children)) {\n      const inner = node.children.filter((c): c is VNode => typeof c === 'object' && c !== null && 'type' in c);\n      out.push(...flattenChildren(inner));\n      continue;\n    }\n    out.push(node);\n  }\n  return out;\n}\n\nconst children = computed<VNode[]>(() => flattenChildren(slots.default?.()));\n\nconst visible = computed<VNode[]>(() => {\n  if (max === undefined)\n    return get(children);\n  return get(children).slice(0, max);\n});\n\nconst surplusCount = computed<number>(() => {\n  const totalCount = total ?? get(children).length;\n  const shown = get(visible).length;\n  return Math.max(0, totalCount - shown);\n});\n\nconst spacingPx = computed<number>(() => resolveAvatarGroupSpacingPx(spacing, get(resolvedSize)));\n\n// The configured spacing, which is already negative, so the items overlap\nconst ringOffsetPx = computed<number>(() => get(spacingPx));\n\nconst itemStyle = computed<Record<string, string>>(() => ({\n  marginInlineStart: `${get(ringOffsetPx)}px`,\n}));\n\nconst firstItemStyle = computed<Record<string, string>>(() => ({\n  marginInlineStart: '0',\n}));\n\nconst avatarPx = computed<number>(() => resolveAvatarSizePx(get(resolvedSize)));\n\nconst ui = computed<ReturnType<typeof groupStyles>>(() => groupStyles({ variant }));\n</script>\n\n<template>\n  <div\n    :class=\"ui.root()\"\n    data-id=\"avatar-group\"\n    :data-size=\"typeof resolvedSize === 'string' ? resolvedSize : undefined\"\n    :data-variant=\"variant\"\n  >\n    <span\n      v-for=\"(child, index) in visible\"\n      :key=\"child.key ?? index\"\n      :class=\"ui.item()\"\n      :style=\"index === 0 ? firstItemStyle : itemStyle\"\n    >\n      <VNodeRenderer :vnode=\"child\" />\n    </span>\n    <span\n      v-if=\"surplusCount > 0\"\n      :class=\"ui.item()\"\n      :style=\"visible.length === 0 ? firstItemStyle : itemStyle\"\n      data-id=\"avatar-group-surplus\"\n    >\n      <slot\n        name=\"surplus\"\n        :count=\"surplusCount\"\n      >\n        <RuiAvatar\n          :size=\"resolvedSize\"\n          :variant=\"variant\"\n          :alt=\"`+${surplusCount} more`\"\n          :style=\"{ width: `${avatarPx}px`, height: `${avatarPx}px` }\"\n        >\n          <span :class=\"ui.surplus()\">+{{ surplusCount }}</span>\n        </RuiAvatar>\n      </slot>\n    </span>\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"RuiAvatarGroup.js","names":["_sfc_main"],"sources":["../../../src/components/avatars/RuiAvatarGroup.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { get } from '@vueuse/shared';\nimport { Comment, defineComponent, Fragment, Text, type VNode } from 'vue';\nimport {\n  avatarGroupInjectionKey,\n  AvatarGroupSpacing,\n  type AvatarSize,\n  type AvatarVariant,\n  resolveAvatarGroupSpacingPx,\n  resolveAvatarSizePx,\n} from '@/components/avatars/avatar-props';\nimport RuiAvatar from '@/components/avatars/RuiAvatar.vue';\nimport { groupStyles } from './avatar-group-styles';\n\nexport interface Props {\n  size?: AvatarSize | number;\n  variant?: AvatarVariant;\n  max?: number;\n  total?: number;\n  /**\n   * How much each avatar overlaps the previous one. The tokens name the\n   * amount of overlap, so `lg` overlaps the most and `sm` the least; they\n   * scale with the avatar size. A number is the inline margin in pixels and\n   * should be negative to overlap.\n   */\n  spacing?: AvatarGroupSpacing | number;\n}\n\ndefineOptions({\n  name: 'RuiAvatarGroup',\n});\n\nconst {\n  size,\n  variant = 'circular',\n  max,\n  total,\n  spacing = AvatarGroupSpacing.md,\n} = defineProps<Props>();\n\nconst slots = defineSlots<{\n  default?: () => VNode[];\n  surplus?: (props: { count: number }) => any;\n}>();\n\nconst resolvedSize = computed<AvatarSize | number>(() => size ?? 'md');\n\nconst VNodeRenderer = defineComponent<{ vnode: VNode }>({\n  props: ['vnode'],\n  setup(props) {\n    return (): VNode => props.vnode;\n  },\n});\n\nprovide(avatarGroupInjectionKey, computed(() => ({ size: get(resolvedSize), variant })));\n\nfunction flattenChildren(nodes: VNode[] | undefined): VNode[] {\n  if (!nodes)\n    return [];\n  const out: VNode[] = [];\n  for (const node of nodes) {\n    if (node.type === Comment)\n      continue;\n    if (node.type === Text && typeof node.children === 'string' && node.children.trim() === '')\n      continue;\n    if (node.type === Fragment && Array.isArray(node.children)) {\n      const inner = node.children.filter((c): c is VNode => typeof c === 'object' && c !== null && 'type' in c);\n      out.push(...flattenChildren(inner));\n      continue;\n    }\n    out.push(node);\n  }\n  return out;\n}\n\nconst children = computed<VNode[]>(() => flattenChildren(slots.default?.()));\n\nconst visible = computed<VNode[]>(() => {\n  if (max === undefined)\n    return get(children);\n  return get(children).slice(0, max);\n});\n\nconst surplusCount = computed<number>(() => {\n  const totalCount = total ?? get(children).length;\n  const shown = get(visible).length;\n  return Math.max(0, totalCount - shown);\n});\n\nconst spacingPx = computed<number>(() => resolveAvatarGroupSpacingPx(spacing, get(resolvedSize)));\n\n// The configured spacing, which is already negative, so the items overlap\nconst ringOffsetPx = computed<number>(() => get(spacingPx));\n\nconst itemStyle = computed<Record<string, string>>(() => ({\n  marginInlineStart: `${get(ringOffsetPx)}px`,\n}));\n\nconst firstItemStyle = computed<Record<string, string>>(() => ({\n  marginInlineStart: '0',\n}));\n\nconst avatarPx = computed<number>(() => resolveAvatarSizePx(get(resolvedSize)));\n\nconst ui = computed<ReturnType<typeof groupStyles>>(() => groupStyles({ variant }));\n</script>\n\n<template>\n  <div\n    :class=\"ui.root()\"\n    data-id=\"avatar-group\"\n    :data-size=\"typeof resolvedSize === 'string' ? resolvedSize : undefined\"\n    :data-variant=\"variant\"\n  >\n    <span\n      v-for=\"(child, index) in visible\"\n      :key=\"child.key ?? index\"\n      :class=\"ui.item()\"\n      :style=\"index === 0 ? firstItemStyle : itemStyle\"\n    >\n      <VNodeRenderer :vnode=\"child\" />\n    </span>\n    <span\n      v-if=\"surplusCount > 0\"\n      :class=\"ui.item()\"\n      :style=\"visible.length === 0 ? firstItemStyle : itemStyle\"\n      data-id=\"avatar-group-surplus\"\n    >\n      <slot\n        name=\"surplus\"\n        :count=\"surplusCount\"\n      >\n        <RuiAvatar\n          :size=\"resolvedSize\"\n          :variant=\"variant\"\n          :alt=\"`+${surplusCount} more`\"\n          :style=\"{ width: `${avatarPx}px`, height: `${avatarPx}px` }\"\n        >\n          <span :class=\"ui.surplus()\">+{{ surplusCount }}</span>\n        </RuiAvatar>\n      </slot>\n    </span>\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/avatars/RuiAvatarGroup.vue_vue_type_script_setup_true_lang.js

@@ -1,7 +1,7 @@
 import { get } from "../../vendor/@vueuse/shared/dist/index.js";
-import { tv } from "../../utils/tv.js";
 import { AvatarGroupSpacing, avatarGroupInjectionKey, resolveAvatarGroupSpacingPx, resolveAvatarSizePx } from "./avatar-props.js";
 import RuiAvatar_default from "./RuiAvatar.js";
+import { groupStyles } from "./avatar-group-styles.js";
 import { Comment, Fragment, Text, computed, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, normalizeClass, normalizeStyle, openBlock, provide, renderList, renderSlot, toDisplayString, unref, useSlots, withCtx } from "vue";
 //#region src/components/avatars/RuiAvatarGroup.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = ["data-size", "data-variant"];
@@ -28,18 +28,6 @@ var RuiAvatarGroup_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ d
 			size: get(resolvedSize),
 			variant: __props.variant
 		})));
-		const groupStyles = tv({
-			slots: {
-				root: "inline-flex items-center isolate",
-				item: "relative ring-2 ring-rui-surface",
-				surplus: "leading-none text-[0.85em] tracking-tight"
-			},
-			variants: { variant: {
-				circular: { item: "rounded-full" },
-				rounded: { item: "rounded-rui-control" },
-				square: { item: "rounded-none" }
-			} }
-		});
 		function flattenChildren(nodes) {
 			if (!nodes) return [];
 			const out = [];

package/dist/components/avatars/RuiAvatarGroup.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiAvatarGroup.vue_vue_type_script_setup_true_lang.js","names":["_useSlots","_openBlock","_createElementBlock","_normalizeClass","_unref","_Fragment","_renderList","_normalizeStyle","_createVNode","_renderSlot","RuiAvatar","_withCtx","_createElementVNode","_toDisplayString","_createCommentVNode"],"sources":["../../../src/components/avatars/RuiAvatarGroup.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { get } from '@vueuse/shared';\nimport { Comment, defineComponent, Fragment, Text, type VNode } from 'vue';\nimport {\n  avatarGroupInjectionKey,\n  AvatarGroupSpacing,\n  type AvatarSize,\n  type AvatarVariant,\n  resolveAvatarGroupSpacingPx,\n  resolveAvatarSizePx,\n} from '@/components/avatars/avatar-props';\nimport RuiAvatar from '@/components/avatars/RuiAvatar.vue';\nimport { tv } from '@/utils/tv';\n\nexport interface Props {\n  size?: AvatarSize | number;\n  variant?: AvatarVariant;\n  max?: number;\n  total?: number;\n  /**\n   * How much each avatar overlaps the previous one. The tokens name the\n   * amount of overlap, so `lg` overlaps the most and `sm` the least; they\n   * scale with the avatar size. A number is the inline margin in pixels and\n   * should be negative to overlap.\n   */\n  spacing?: AvatarGroupSpacing | number;\n}\n\ndefineOptions({\n  name: 'RuiAvatarGroup',\n});\n\nconst {\n  size,\n  variant = 'circular',\n  max,\n  total,\n  spacing = AvatarGroupSpacing.md,\n} = defineProps<Props>();\n\nconst slots = defineSlots<{\n  default?: () => VNode[];\n  surplus?: (props: { count: number }) => any;\n}>();\n\nconst resolvedSize = computed<AvatarSize | number>(() => size ?? 'md');\n\nconst VNodeRenderer = defineComponent<{ vnode: VNode }>({\n  props: ['vnode'],\n  setup(props) {\n    return (): VNode => props.vnode;\n  },\n});\n\nprovide(avatarGroupInjectionKey, computed(() => ({ size: get(resolvedSize), variant })));\n\nconst groupStyles = tv({\n  slots: {\n    root: 'inline-flex items-center isolate',\n    item: 'relative ring-2 ring-rui-surface',\n    surplus: 'leading-none text-[0.85em] tracking-tight',\n  },\n  // The ring follows the avatar outline\n  variants: {\n    variant: {\n      circular: { item: 'rounded-full' },\n      rounded: { item: 'rounded-rui-control' },\n      square: { item: 'rounded-none' },\n    },\n  },\n});\n\nfunction flattenChildren(nodes: VNode[] | undefined): VNode[] {\n  if (!nodes)\n    return [];\n  const out: VNode[] = [];\n  for (const node of nodes) {\n    if (node.type === Comment)\n      continue;\n    if (node.type === Text && typeof node.children === 'string' && node.children.trim() === '')\n      continue;\n    if (node.type === Fragment && Array.isArray(node.children)) {\n      const inner = node.children.filter((c): c is VNode => typeof c === 'object' && c !== null && 'type' in c);\n      out.push(...flattenChildren(inner));\n      continue;\n    }\n    out.push(node);\n  }\n  return out;\n}\n\nconst children = computed<VNode[]>(() => flattenChildren(slots.default?.()));\n\nconst visible = computed<VNode[]>(() => {\n  if (max === undefined)\n    return get(children);\n  return get(children).slice(0, max);\n});\n\nconst surplusCount = computed<number>(() => {\n  const totalCount = total ?? get(children).length;\n  const shown = get(visible).length;\n  return Math.max(0, totalCount - shown);\n});\n\nconst spacingPx = computed<number>(() => resolveAvatarGroupSpacingPx(spacing, get(resolvedSize)));\n\n// The configured spacing, which is already negative, so the items overlap\nconst ringOffsetPx = computed<number>(() => get(spacingPx));\n\nconst itemStyle = computed<Record<string, string>>(() => ({\n  marginInlineStart: `${get(ringOffsetPx)}px`,\n}));\n\nconst firstItemStyle = computed<Record<string, string>>(() => ({\n  marginInlineStart: '0',\n}));\n\nconst avatarPx = computed<number>(() => resolveAvatarSizePx(get(resolvedSize)));\n\nconst ui = computed<ReturnType<typeof groupStyles>>(() => groupStyles({ variant }));\n</script>\n\n<template>\n  <div\n    :class=\"ui.root()\"\n    data-id=\"avatar-group\"\n    :data-size=\"typeof resolvedSize === 'string' ? resolvedSize : undefined\"\n    :data-variant=\"variant\"\n  >\n    <span\n      v-for=\"(child, index) in visible\"\n      :key=\"child.key ?? index\"\n      :class=\"ui.item()\"\n      :style=\"index === 0 ? firstItemStyle : itemStyle\"\n    >\n      <VNodeRenderer :vnode=\"child\" />\n    </span>\n    <span\n      v-if=\"surplusCount > 0\"\n      :class=\"ui.item()\"\n      :style=\"visible.length === 0 ? firstItemStyle : itemStyle\"\n      data-id=\"avatar-group-surplus\"\n    >\n      <slot\n        name=\"surplus\"\n        :count=\"surplusCount\"\n      >\n        <RuiAvatar\n          :size=\"resolvedSize\"\n          :variant=\"variant\"\n          :alt=\"`+${surplusCount} more`\"\n          :style=\"{ width: `${avatarPx}px`, height: `${avatarPx}px` }\"\n        >\n          <span :class=\"ui.surplus()\">+{{ surplusCount }}</span>\n        </RuiAvatar>\n      </slot>\n    </span>\n  </div>\n</template>\n"],"mappings":"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"}
+{"version":3,"file":"RuiAvatarGroup.vue_vue_type_script_setup_true_lang.js","names":["_useSlots","_openBlock","_createElementBlock","_normalizeClass","_unref","_Fragment","_renderList","_normalizeStyle","_createVNode","_renderSlot","RuiAvatar","_withCtx","_createElementVNode","_toDisplayString","_createCommentVNode"],"sources":["../../../src/components/avatars/RuiAvatarGroup.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { get } from '@vueuse/shared';\nimport { Comment, defineComponent, Fragment, Text, type VNode } from 'vue';\nimport {\n  avatarGroupInjectionKey,\n  AvatarGroupSpacing,\n  type AvatarSize,\n  type AvatarVariant,\n  resolveAvatarGroupSpacingPx,\n  resolveAvatarSizePx,\n} from '@/components/avatars/avatar-props';\nimport RuiAvatar from '@/components/avatars/RuiAvatar.vue';\nimport { groupStyles } from './avatar-group-styles';\n\nexport interface Props {\n  size?: AvatarSize | number;\n  variant?: AvatarVariant;\n  max?: number;\n  total?: number;\n  /**\n   * How much each avatar overlaps the previous one. The tokens name the\n   * amount of overlap, so `lg` overlaps the most and `sm` the least; they\n   * scale with the avatar size. A number is the inline margin in pixels and\n   * should be negative to overlap.\n   */\n  spacing?: AvatarGroupSpacing | number;\n}\n\ndefineOptions({\n  name: 'RuiAvatarGroup',\n});\n\nconst {\n  size,\n  variant = 'circular',\n  max,\n  total,\n  spacing = AvatarGroupSpacing.md,\n} = defineProps<Props>();\n\nconst slots = defineSlots<{\n  default?: () => VNode[];\n  surplus?: (props: { count: number }) => any;\n}>();\n\nconst resolvedSize = computed<AvatarSize | number>(() => size ?? 'md');\n\nconst VNodeRenderer = defineComponent<{ vnode: VNode }>({\n  props: ['vnode'],\n  setup(props) {\n    return (): VNode => props.vnode;\n  },\n});\n\nprovide(avatarGroupInjectionKey, computed(() => ({ size: get(resolvedSize), variant })));\n\nfunction flattenChildren(nodes: VNode[] | undefined): VNode[] {\n  if (!nodes)\n    return [];\n  const out: VNode[] = [];\n  for (const node of nodes) {\n    if (node.type === Comment)\n      continue;\n    if (node.type === Text && typeof node.children === 'string' && node.children.trim() === '')\n      continue;\n    if (node.type === Fragment && Array.isArray(node.children)) {\n      const inner = node.children.filter((c): c is VNode => typeof c === 'object' && c !== null && 'type' in c);\n      out.push(...flattenChildren(inner));\n      continue;\n    }\n    out.push(node);\n  }\n  return out;\n}\n\nconst children = computed<VNode[]>(() => flattenChildren(slots.default?.()));\n\nconst visible = computed<VNode[]>(() => {\n  if (max === undefined)\n    return get(children);\n  return get(children).slice(0, max);\n});\n\nconst surplusCount = computed<number>(() => {\n  const totalCount = total ?? get(children).length;\n  const shown = get(visible).length;\n  return Math.max(0, totalCount - shown);\n});\n\nconst spacingPx = computed<number>(() => resolveAvatarGroupSpacingPx(spacing, get(resolvedSize)));\n\n// The configured spacing, which is already negative, so the items overlap\nconst ringOffsetPx = computed<number>(() => get(spacingPx));\n\nconst itemStyle = computed<Record<string, string>>(() => ({\n  marginInlineStart: `${get(ringOffsetPx)}px`,\n}));\n\nconst firstItemStyle = computed<Record<string, string>>(() => ({\n  marginInlineStart: '0',\n}));\n\nconst avatarPx = computed<number>(() => resolveAvatarSizePx(get(resolvedSize)));\n\nconst ui = computed<ReturnType<typeof groupStyles>>(() => groupStyles({ variant }));\n</script>\n\n<template>\n  <div\n    :class=\"ui.root()\"\n    data-id=\"avatar-group\"\n    :data-size=\"typeof resolvedSize === 'string' ? resolvedSize : undefined\"\n    :data-variant=\"variant\"\n  >\n    <span\n      v-for=\"(child, index) in visible\"\n      :key=\"child.key ?? index\"\n      :class=\"ui.item()\"\n      :style=\"index === 0 ? firstItemStyle : itemStyle\"\n    >\n      <VNodeRenderer :vnode=\"child\" />\n    </span>\n    <span\n      v-if=\"surplusCount > 0\"\n      :class=\"ui.item()\"\n      :style=\"visible.length === 0 ? firstItemStyle : itemStyle\"\n      data-id=\"avatar-group-surplus\"\n    >\n      <slot\n        name=\"surplus\"\n        :count=\"surplusCount\"\n      >\n        <RuiAvatar\n          :size=\"resolvedSize\"\n          :variant=\"variant\"\n          :alt=\"`+${surplusCount} more`\"\n          :style=\"{ width: `${avatarPx}px`, height: `${avatarPx}px` }\"\n        >\n          <span :class=\"ui.surplus()\">+{{ surplusCount }}</span>\n        </RuiAvatar>\n      </slot>\n    </span>\n  </div>\n</template>\n"],"mappings":"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"}

package/dist/components/avatars/avatar-group-styles.d.ts

@@ -0,0 +1,49 @@
+export declare const groupStyles: import("tailwind-variants").TVReturnType<{
+    variant: {
+        circular: {
+            item: string;
+        };
+        rounded: {
+            item: string;
+        };
+        square: {
+            item: string;
+        };
+    };
+}, {
+    root: string;
+    item: string;
+    surplus: string;
+}, undefined, {
+    variant: {
+        circular: {
+            item: string;
+        };
+        rounded: {
+            item: string;
+        };
+        square: {
+            item: string;
+        };
+    };
+}, {
+    root: string;
+    item: string;
+    surplus: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+    variant: {
+        circular: {
+            item: string;
+        };
+        rounded: {
+            item: string;
+        };
+        square: {
+            item: string;
+        };
+    };
+}, {
+    root: string;
+    item: string;
+    surplus: string;
+}>>;

package/dist/components/avatars/avatar-group-styles.js

@@ -0,0 +1,18 @@
+import { tv } from "../../utils/tv.js";
+//#region src/components/avatars/avatar-group-styles.ts
+var groupStyles = tv({
+	slots: {
+		root: "inline-flex items-center isolate",
+		item: "relative ring-2 ring-rui-surface",
+		surplus: "leading-none text-[0.85em] tracking-tight"
+	},
+	variants: { variant: {
+		circular: { item: "rounded-full" },
+		rounded: { item: "rounded-rui-control" },
+		square: { item: "rounded-none" }
+	} }
+});
+//#endregion
+export { groupStyles };
+
+//# sourceMappingURL=avatar-group-styles.js.map

package/dist/components/avatars/avatar-group-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar-group-styles.js","names":[],"sources":["../../../src/components/avatars/avatar-group-styles.ts"],"sourcesContent":["import { tv } from '@/utils/tv';\n\nexport const groupStyles = tv({\n  slots: {\n    root: 'inline-flex items-center isolate',\n    item: 'relative ring-2 ring-rui-surface',\n    surplus: 'leading-none text-[0.85em] tracking-tight',\n  },\n  // The ring follows the avatar outline\n  variants: {\n    variant: {\n      circular: { item: 'rounded-full' },\n      rounded: { item: 'rounded-rui-control' },\n      square: { item: 'rounded-none' },\n    },\n  },\n});\n"],"mappings":";;AAEA,IAAa,cAAc,GAAG;CAC5B,OAAO;EACL,MAAM;EACN,MAAM;EACN,SAAS;CACX;CAEA,UAAU,EACR,SAAS;EACP,UAAU,EAAE,MAAM,eAAe;EACjC,SAAS,EAAE,MAAM,sBAAsB;EACvC,QAAQ,EAAE,MAAM,eAAe;CACjC,EACF;AACF,CAAC"}

package/dist/components/avatars/avatar-styles.d.ts

@@ -0,0 +1,181 @@
+export declare const avatarStyles: import("tailwind-variants").TVReturnType<{
+    variant: {
+        circular: {
+            root: string;
+        };
+        rounded: {
+            root: string;
+        };
+        square: {
+            root: string;
+        };
+    };
+    color: {
+        default: {
+            root: string;
+        };
+        primary: {
+            root: string;
+        };
+        secondary: {
+            root: string;
+        };
+        error: {
+            root: string;
+        };
+        warning: {
+            root: string;
+        };
+        info: {
+            root: string;
+        };
+        success: {
+            root: string;
+        };
+    };
+    size: {
+        xs: {
+            root: string;
+        };
+        sm: {
+            root: string;
+        };
+        md: {
+            root: string;
+        };
+        lg: {
+            root: string;
+        };
+        xl: {
+            root: string;
+        };
+        '2xl': {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    image: string;
+    fallback: string;
+    initials: string;
+}, undefined, {
+    variant: {
+        circular: {
+            root: string;
+        };
+        rounded: {
+            root: string;
+        };
+        square: {
+            root: string;
+        };
+    };
+    color: {
+        default: {
+            root: string;
+        };
+        primary: {
+            root: string;
+        };
+        secondary: {
+            root: string;
+        };
+        error: {
+            root: string;
+        };
+        warning: {
+            root: string;
+        };
+        info: {
+            root: string;
+        };
+        success: {
+            root: string;
+        };
+    };
+    size: {
+        xs: {
+            root: string;
+        };
+        sm: {
+            root: string;
+        };
+        md: {
+            root: string;
+        };
+        lg: {
+            root: string;
+        };
+        xl: {
+            root: string;
+        };
+        '2xl': {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    image: string;
+    fallback: string;
+    initials: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+    variant: {
+        circular: {
+            root: string;
+        };
+        rounded: {
+            root: string;
+        };
+        square: {
+            root: string;
+        };
+    };
+    color: {
+        default: {
+            root: string;
+        };
+        primary: {
+            root: string;
+        };
+        secondary: {
+            root: string;
+        };
+        error: {
+            root: string;
+        };
+        warning: {
+            root: string;
+        };
+        info: {
+            root: string;
+        };
+        success: {
+            root: string;
+        };
+    };
+    size: {
+        xs: {
+            root: string;
+        };
+        sm: {
+            root: string;
+        };
+        md: {
+            root: string;
+        };
+        lg: {
+            root: string;
+        };
+        xl: {
+            root: string;
+        };
+        '2xl': {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    image: string;
+    fallback: string;
+    initials: string;
+}>>;

package/dist/components/avatars/avatar-styles.js

@@ -0,0 +1,43 @@
+import { tv } from "../../utils/tv.js";
+//#region src/components/avatars/avatar-styles.ts
+var avatarStyles = tv({
+	slots: {
+		root: "relative inline-flex items-center justify-center shrink-0 overflow-hidden select-none font-medium align-middle",
+		image: "w-full h-full object-cover",
+		fallback: "w-full h-full flex items-center justify-center",
+		initials: "uppercase leading-none"
+	},
+	variants: {
+		variant: {
+			circular: { root: "rounded-full" },
+			rounded: { root: "rounded-rui-control" },
+			square: { root: "rounded-none" }
+		},
+		color: {
+			default: { root: "bg-rui-neutral-200 text-rui-text dark:bg-rui-neutral-700" },
+			primary: { root: "bg-rui-primary-fill text-rui-primary-foreground" },
+			secondary: { root: "bg-rui-secondary-fill text-rui-secondary-foreground" },
+			error: { root: "bg-rui-error-fill text-rui-error-foreground" },
+			warning: { root: "bg-rui-warning-fill text-rui-warning-foreground" },
+			info: { root: "bg-rui-info-fill text-rui-info-foreground" },
+			success: { root: "bg-rui-success-fill text-rui-success-foreground" }
+		},
+		size: {
+			"xs": { root: "text-[0.625rem]" },
+			"sm": { root: "text-[0.6875rem]" },
+			"md": { root: "text-sm" },
+			"lg": { root: "text-base" },
+			"xl": { root: "text-lg" },
+			"2xl": { root: "text-xl" }
+		}
+	},
+	defaultVariants: {
+		variant: "circular",
+		color: "default",
+		size: "md"
+	}
+});
+//#endregion
+export { avatarStyles };
+
+//# sourceMappingURL=avatar-styles.js.map

package/dist/components/avatars/avatar-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar-styles.js","names":[],"sources":["../../../src/components/avatars/avatar-styles.ts"],"sourcesContent":["import { tv } from '@/utils/tv';\n\nexport const avatarStyles = tv({\n  slots: {\n    root: 'relative inline-flex items-center justify-center shrink-0 overflow-hidden select-none font-medium align-middle',\n    image: 'w-full h-full object-cover',\n    fallback: 'w-full h-full flex items-center justify-center',\n    initials: 'uppercase leading-none',\n  },\n  variants: {\n    variant: {\n      circular: { root: 'rounded-full' },\n      rounded: { root: 'rounded-rui-control' },\n      square: { root: 'rounded-none' },\n    },\n    // `-fill` is `main` in light and, for a status color, the deep `darker` in dark\n    color: {\n      default: { root: 'bg-rui-neutral-200 text-rui-text dark:bg-rui-neutral-700' },\n      primary: { root: 'bg-rui-primary-fill text-rui-primary-foreground' },\n      secondary: { root: 'bg-rui-secondary-fill text-rui-secondary-foreground' },\n      error: { root: 'bg-rui-error-fill text-rui-error-foreground' },\n      warning: { root: 'bg-rui-warning-fill text-rui-warning-foreground' },\n      info: { root: 'bg-rui-info-fill text-rui-info-foreground' },\n      success: { root: 'bg-rui-success-fill text-rui-success-foreground' },\n    },\n    // On the root so slot content (such as a group's `+N`) scales too\n    size: {\n      'xs': { root: 'text-[0.625rem]' },\n      'sm': { root: 'text-[0.6875rem]' },\n      'md': { root: 'text-sm' },\n      'lg': { root: 'text-base' },\n      'xl': { root: 'text-lg' },\n      '2xl': { root: 'text-xl' },\n    },\n  },\n  defaultVariants: {\n    variant: 'circular',\n    color: 'default',\n    size: 'md',\n  },\n});\n"],"mappings":";;AAEA,IAAa,eAAe,GAAG;CAC7B,OAAO;EACL,MAAM;EACN,OAAO;EACP,UAAU;EACV,UAAU;CACZ;CACA,UAAU;EACR,SAAS;GACP,UAAU,EAAE,MAAM,eAAe;GACjC,SAAS,EAAE,MAAM,sBAAsB;GACvC,QAAQ,EAAE,MAAM,eAAe;EACjC;EAEA,OAAO;GACL,SAAS,EAAE,MAAM,2DAA2D;GAC5E,SAAS,EAAE,MAAM,kDAAkD;GACnE,WAAW,EAAE,MAAM,sDAAsD;GACzE,OAAO,EAAE,MAAM,8CAA8C;GAC7D,SAAS,EAAE,MAAM,kDAAkD;GACnE,MAAM,EAAE,MAAM,4CAA4C;GAC1D,SAAS,EAAE,MAAM,kDAAkD;EACrE;EAEA,MAAM;GACJ,MAAM,EAAE,MAAM,kBAAkB;GAChC,MAAM,EAAE,MAAM,mBAAmB;GACjC,MAAM,EAAE,MAAM,UAAU;GACxB,MAAM,EAAE,MAAM,YAAY;GAC1B,MAAM,EAAE,MAAM,UAAU;GACxB,OAAO,EAAE,MAAM,UAAU;EAC3B;CACF;CACA,iBAAiB;EACf,SAAS;EACT,OAAO;EACP,MAAM;CACR;AACF,CAAC"}

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

@@ -49,7 +49,7 @@ var buttonStyles = tv({
 			"focus-visible:focus-ring"
 		].join(" "),
 		label: "inline-block text-nowrap",
-		spinner: "shrink-0 h-lh items-center"
+		spinner: "shrink-0 w-(--rui-icon-size) h-lh items-center justify-center [&>*]:shrink-0"
 	},
 	variants: {
 		variant: {

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\n/**\n * The button's classes.\n *\n * Three decisions the class lists cannot state themselves:\n *\n * `position: relative` is not in the base root: it is only a positioning\n * context for the loading spinner, so the `loading` variant applies it.\n * Basing it here would collide with consumers pinning the button with\n * `fixed`/`absolute`, since cascade order picks the later utility, usually\n * `relative`, and turns their `right-*`/`bottom-*` into relative offsets,\n * which misplaces FABs.\n *\n * Icon sizing flows through the `--rui-icon-size` custom property, seeded at\n * the md value in the base root and redefined per size variant with `!` so a\n * variant beats the baseline on the same element regardless of source order.\n * RuiIcon's own `size` prop stamps an inline style on the svg, which beats the\n * inherited value, so a consumer always wins. See rotki/ui-library#512.\n *\n * `disabled` on the element covers two states: actually disabled, and loading,\n * since RuiButton sets `disabled = disabled || loading`. Only the cursor is\n * shared between them; the grey disabled palette lives in the `loading: false`\n * compounds, so a loading button keeps its variant color behind the spinner.\n *\n * An icon-only button matches the height of the text button of the same size,\n * with a 60-70% glyph ratio, which is a larger glyph than the same size gives\n * a prepend/append icon so it does not look lost in the square. xs pads by an\n * arbitrary 0.1875rem because no Tailwind token holds the ratio at a 14px\n * glyph:\n *\n * ```\n * xs            p-[0.1875rem] + 0.875rem icon = 1.25rem (20px)   70%\n * sm            p-1           + 1.25rem  icon = 1.75rem (28px)   71%\n * md (default)  p-2           + 1.25rem  icon = 2.25rem (36px)   56%\n * lg            p-1.5         + 1.5rem   icon = 2.25rem (36px)   67%\n * xl            p-2           + 1.5rem   icon = 2.5rem  (40px)   60%\n * 2xl           p-2           + 1.75rem  icon = 2.75rem (44px)   64%\n * ```\n */\nexport const buttonStyles = tv({\n  slots: {\n    root: [\n      'text-sm leading-5 font-medium inset-ring inset-ring-transparent',\n      'flex items-center justify-center gap-x-2',\n      // md is 36px, the height of a text field or select, so a button lines up with them in a row\n      'px-4 py-2 rounded-rui-control transition-colors duration-150',\n      '[--rui-icon-size:1rem]',\n      'disabled:cursor-not-allowed',\n      'focus-visible:focus-ring',\n    ].join(' '),\n    label: 'inline-block text-nowrap',\n    /*\n     * Inline in the prepend icon's place; an icon-only button centers it over its hidden glyph instead.\n     * At lg the ring outgrows the label's line box, so its box is held to one line and the ring\n     * overflows it evenly: loading never changes the button's height.\n     */\n    spinner: 'shrink-0 h-lh items-center',\n  },\n  variants: {\n    variant: {\n      default: {},\n      outlined: {},\n      text: { root: 'px-2' },\n      fab: { root: 'rounded-full py-2 shadow-rui-control disabled:shadow-none' },\n      // The label's 16px line-box matches the md icon box, so the two share an optical center (rotki/ui-library#515)\n      list: { root: 'p-3 px-3 rounded-rui-sm w-full justify-start text-left', label: 'w-full leading-4' },\n      // An action inside running text: no box, so its size, padding and fills are reset in the link compounds at the end\n      link: { root: 'inline-flex align-baseline gap-x-1 underline-offset-2 not-disabled:hover:underline' },\n    },\n    size: {\n      'xs': { root: 'px-2 py-[0.125rem] text-[.75rem] leading-4 ![--rui-icon-size:0.75rem]' },\n      'sm': { root: 'px-2.5 py-1 text-[.8125rem] leading-5 ![--rui-icon-size:0.875rem]' },\n      'lg': { root: 'px-6 py-2 text-[1rem] leading-5 ![--rui-icon-size:1.25rem]' },\n      // 40px, to line up with RuiTextField / RuiMenuSelect in a toolbar; a 44px jumbo CTA is `2xl`\n      'xl': { root: 'px-6 py-2 text-[1rem] leading-6 ![--rui-icon-size:1.375rem]' },\n      '2xl': { root: 'px-6 py-2.5 text-[1rem] leading-6 ![--rui-icon-size:1.375rem]' },\n    },\n    color: {\n      grey: { root: 'bg-rui-neutral-100 hover:bg-rui-neutral-200 active:bg-rui-neutral-300 text-rui-text dark:bg-rui-neutral-800 dark:hover:bg-rui-neutral-700 dark:active:bg-rui-neutral-600' },\n      // hover is a tint laid over the fill (see the filled compound below); pressed sinks to `darker`\n      primary: { root: 'bg-rui-primary active:bg-rui-primary-darker text-rui-dark-text dark:text-rui-text' },\n      secondary: { root: 'bg-rui-secondary active:bg-rui-secondary-darker text-rui-dark-text dark:text-rui-text' },\n      error: { root: 'bg-rui-error active:bg-rui-error-darker text-rui-dark-text dark:text-rui-text' },\n      warning: { root: 'bg-rui-warning active:bg-rui-warning-darker text-rui-dark-text dark:text-rui-text' },\n      info: { root: 'bg-rui-info active:bg-rui-info-darker text-rui-dark-text dark:text-rui-text' },\n      success: { root: 'bg-rui-success active:bg-rui-success-darker text-rui-dark-text dark:text-rui-text' },\n    },\n    rounded: {\n      true: { root: 'rounded-full' },\n    },\n    icon: {\n      /*\n       * Only the round shape; the `icon + size` compounds below carry padding and icon sizing. The\n       * label holds no text, so it lays out as a flex box: a line box would put a wrapped icon (a\n       * badge) on the text baseline and grow the button by the descender gap.\n       */\n      true: { root: 'rounded-full', label: 'inline-flex' },\n    },\n    active: {\n      true: {},\n      false: {},\n    },\n    loading: {\n      true: { root: 'relative !cursor-progress' },\n      false: {},\n    },\n    hideFocusIndicator: {\n      true: { root: 'focus-visible:!outline-hidden' },\n    },\n    /*\n     * Below the breakpoint the label turns `sr-only`, so it still names the button, and the button\n     * takes its icon-only padding and glyph from the two properties the `collapsed` compounds seed\n     * per size. One static list per breakpoint, since Tailwind cannot see a generated class.\n     */\n    collapseBelow: {\n      'sm': { root: 'max-sm:gap-x-0 max-sm:p-(--rui-btn-collapsed-p) max-sm:![--rui-icon-size:var(--rui-btn-collapsed-icon)]', label: 'max-sm:sr-only' },\n      'md': { root: 'max-md:gap-x-0 max-md:p-(--rui-btn-collapsed-p) max-md:![--rui-icon-size:var(--rui-btn-collapsed-icon)]', label: 'max-md:sr-only' },\n      'lg': { root: 'max-lg:gap-x-0 max-lg:p-(--rui-btn-collapsed-p) max-lg:![--rui-icon-size:var(--rui-btn-collapsed-icon)]', label: 'max-lg:sr-only' },\n      'xl': { root: 'max-xl:gap-x-0 max-xl:p-(--rui-btn-collapsed-p) max-xl:![--rui-icon-size:var(--rui-btn-collapsed-icon)]', label: 'max-xl:sr-only' },\n      '2xl': { root: 'max-2xl:gap-x-0 max-2xl:p-(--rui-btn-collapsed-p) max-2xl:![--rui-icon-size:var(--rui-btn-collapsed-icon)]', label: 'max-2xl:sr-only' },\n    },\n  },\n  compoundVariants: [\n    /*\n     * Filled hover: the pressed state layer (10% black in light, 12% white in dark) over the fill, a\n     * step of about a tenth rather than the jump to `darker`, which stays for the pressed state.\n     * `not-disabled:` keeps a disabled or loading button flat; an `<a>` is never `:disabled`.\n     */\n    { variant: ['default', 'fab'], color: ['primary', 'secondary', 'error', 'warning', 'info', 'success'], class: { root: 'not-disabled:hover:state-layer-pressed' } },\n    // An icon-only button has no label to keep, so its glyph goes transparent (still in the accessibility tree) under a centered spinner\n    { loading: true, icon: true, class: { root: '[&>*:not([data-spinner])]:opacity-0', spinner: 'absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2' } },\n    // Disabled appearance: a flat neutral fill, skipped while loading so the variant color shows behind the spinner\n    { loading: false, class: { root: 'disabled:!bg-rui-neutral-100 dark:disabled:!bg-rui-neutral-800 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:inset-ring-rui-text-disabled dark:disabled:inset-ring-rui-text-disabled' } },\n    { loading: false, variant: ['text', 'link'], 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-neutral-200 dark:bg-rui-neutral-700' } },\n    // the same hover and pressed tints as a highlighted menu option\n    { color: 'grey', variant: ['outlined', 'text', 'list'], class: { root: 'bg-transparent hover:bg-rui-hover active:bg-rui-pressed dark:bg-transparent dark:text-rui-text' } },\n    { color: 'grey', variant: ['outlined', 'text', 'list'], active: true, class: { root: 'bg-rui-pressed dark:bg-rui-pressed' } },\n    // the shared control edge, 3:1 against the page like the 50% context colours beside it\n    { color: 'grey', variant: 'outlined', class: { root: 'inset-ring-rui-outline' } },\n    // the dark variant overrides the shared compound's `dark:text-rui-text`, so a grey text button stays secondary in both themes\n    { color: 'grey', variant: 'text', class: { root: 'text-rui-text-secondary dark:text-rui-text-secondary' } },\n\n    // `dark:text-rui-<color>` beats the filled buttons' `dark:text-rui-text`; primary, secondary and error use their lighter tone in dark for 4.5:1\n    { color: 'primary', variant: ['outlined', 'text', 'list'], class: { root: 'bg-transparent hover:bg-rui-primary/6 active:bg-rui-primary/10 text-rui-primary dark:text-rui-primary-lighter' } },\n    { color: 'secondary', variant: ['outlined', 'text', 'list'], class: { root: 'bg-transparent hover:bg-rui-secondary/6 active:bg-rui-secondary/10 text-rui-secondary dark:text-rui-secondary-lighter' } },\n    { color: 'error', variant: ['outlined', 'text', 'list'], class: { root: 'bg-transparent hover:bg-rui-error/6 active:bg-rui-error/10 text-rui-error dark:text-rui-error-lighter' } },\n    { color: 'warning', variant: ['outlined', 'text', 'list'], class: { root: 'bg-transparent hover:bg-rui-warning/6 active:bg-rui-warning/10 text-rui-warning dark:text-rui-warning' } },\n    { color: 'info', variant: ['outlined', 'text', 'list'], class: { root: 'bg-transparent hover:bg-rui-info/6 active:bg-rui-info/10 text-rui-info dark:text-rui-info' } },\n    { color: 'success', variant: ['outlined', 'text', 'list'], class: { root: 'bg-transparent hover:bg-rui-success/6 active:bg-rui-success/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    // Active outlined/text: a quiet tint with the deeper tone as the label, which keeps 4.5:1 for every color\n    { color: 'primary', variant: ['outlined', 'text', 'list'], active: true, class: { root: 'bg-rui-primary/[0.08] text-rui-primary-darker' } },\n    { color: 'secondary', variant: ['outlined', 'text', 'list'], active: true, class: { root: 'bg-rui-secondary/[0.08] text-rui-secondary-darker' } },\n    { color: 'error', variant: ['outlined', 'text', 'list'], active: true, class: { root: 'bg-rui-error/[0.08] text-rui-error-darker' } },\n    { color: 'warning', variant: ['outlined', 'text', 'list'], active: true, class: { root: 'bg-rui-warning/[0.08] text-rui-warning-darker' } },\n    { color: 'info', variant: ['outlined', 'text', 'list'], active: true, class: { root: 'bg-rui-info/[0.08] text-rui-info-darker' } },\n    { color: 'success', variant: ['outlined', 'text', 'list'], active: true, class: { root: 'bg-rui-success/[0.08] text-rui-success-darker' } },\n\n    // === Context colors: outlined border (dark draws primary and secondary solid; at 50% their deep fills sink into the page and look alike) ===\n    { color: 'primary', variant: 'outlined', class: { root: 'inset-ring-rui-primary/50 dark:inset-ring-rui-primary' } },\n    { color: 'secondary', variant: 'outlined', class: { root: 'inset-ring-rui-secondary/50 dark:inset-ring-rui-secondary' } },\n    { color: 'error', variant: 'outlined', class: { root: 'inset-ring-rui-error/50' } },\n    { color: 'warning', variant: 'outlined', class: { root: 'inset-ring-rui-warning/50' } },\n    { color: 'info', variant: 'outlined', class: { root: 'inset-ring-rui-info/50' } },\n    { color: 'success', variant: 'outlined', class: { root: 'inset-ring-rui-success/50' } },\n\n    // === Size overrides per variant ===\n    { variant: 'text', size: 'xs', class: { root: 'px-1' } },\n    { variant: 'text', size: 'sm', class: { root: 'px-1.5' } },\n    { variant: 'text', size: 'lg', class: { root: 'px-2.5' } },\n    { variant: 'text', size: 'xl', class: { root: 'px-2.5' } },\n    { variant: 'text', size: '2xl', class: { root: 'px-2.5' } },\n    { variant: 'fab', size: 'xs', class: { root: 'py-1 px-1' } },\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: 'xs', class: { root: 'px-3 py-0.5' } },\n    // 32px: a dense select's option row, which `getOptionHeight` reserves in the virtual list\n    { variant: 'list', size: 'sm', class: { root: 'px-3 py-2' } },\n    // Icon-only sizing, per the padding and glyph table on buttonStyles above\n    { icon: true, class: { root: 'p-2 ![--rui-icon-size:1.25rem]' } },\n    { icon: true, size: 'xs', class: { root: 'p-[0.1875rem] ![--rui-icon-size:0.875rem]' } },\n    { icon: true, size: 'sm', class: { root: 'p-1 ![--rui-icon-size:1.25rem]' } },\n    { icon: true, size: 'lg', class: { root: 'p-1.5 ![--rui-icon-size:1.5rem]' } },\n    { icon: true, size: 'xl', class: { root: 'p-2 ![--rui-icon-size:1.5rem]' } },\n    { icon: true, size: '2xl', class: { root: 'p-2 ![--rui-icon-size:1.75rem]' } },\n    { variant: 'fab', icon: true, size: 'sm', class: { root: 'px-2 py-2' } },\n    // A collapsed button's icon-only padding and glyph, the same table as `icon` above\n    { collapseBelow: ['sm', 'md', 'lg', 'xl', '2xl'], class: { root: '[--rui-btn-collapsed-p:0.5rem] [--rui-btn-collapsed-icon:1.25rem]' } },\n    { collapseBelow: ['sm', 'md', 'lg', 'xl', '2xl'], size: 'xs', class: { root: '[--rui-btn-collapsed-p:0.1875rem] [--rui-btn-collapsed-icon:0.875rem]' } },\n    { collapseBelow: ['sm', 'md', 'lg', 'xl', '2xl'], size: 'sm', class: { root: '[--rui-btn-collapsed-p:0.25rem] [--rui-btn-collapsed-icon:1.25rem]' } },\n    { collapseBelow: ['sm', 'md', 'lg', 'xl', '2xl'], size: 'lg', class: { root: '[--rui-btn-collapsed-p:0.375rem] [--rui-btn-collapsed-icon:1.5rem]' } },\n    { collapseBelow: ['sm', 'md', 'lg', 'xl', '2xl'], size: 'xl', class: { root: '[--rui-btn-collapsed-p:0.5rem] [--rui-btn-collapsed-icon:1.5rem]' } },\n    { collapseBelow: ['sm', 'md', 'lg', 'xl', '2xl'], size: '2xl', class: { root: '[--rui-btn-collapsed-p:0.5rem] [--rui-btn-collapsed-icon:1.75rem]' } },\n\n    /*\n     * === Link ===\n     * Last, so they win over the size, colour and active entries above. Font size and line height\n     * come from the surrounding text; a size only changes the spinner. The colour matches the\n     * outlined/text compounds, with no fill or tint.\n     */\n    {\n      variant: 'link',\n      class: {\n        root: [\n          'p-0 text-[length:inherit] leading-[inherit] ![--rui-icon-size:1em]',\n          'bg-transparent hover:bg-transparent active:bg-transparent',\n          'dark:bg-transparent dark:hover:bg-transparent dark:active:bg-transparent',\n        ].join(' '),\n      },\n    },\n    { color: 'grey', variant: 'link', class: { root: 'text-rui-text dark:text-rui-text' } },\n    { color: 'primary', variant: 'link', class: { root: 'text-rui-primary dark:text-rui-primary-lighter' } },\n    { color: 'secondary', variant: 'link', class: { root: 'text-rui-secondary dark:text-rui-secondary-lighter' } },\n    { color: 'error', variant: 'link', class: { root: 'text-rui-error dark:text-rui-error-lighter' } },\n    { color: 'warning', variant: 'link', class: { root: 'text-rui-warning dark:text-rui-warning' } },\n    { color: 'info', variant: 'link', class: { root: 'text-rui-info dark:text-rui-info' } },\n    { color: 'success', variant: 'link', class: { root: 'text-rui-success dark:text-rui-success' } },\n  ],\n  compoundSlots: [\n    // In dark a status color's `main` is a text tone, so a filled status button takes the deep `darker` fill\n    { slots: ['root'], color: 'error', variant: ['default', 'fab'], class: 'dark:bg-rui-error-darker dark:active:bg-rui-error-darker/75' },\n    { slots: ['root'], color: 'warning', variant: ['default', 'fab'], class: 'dark:bg-rui-warning-darker dark:active:bg-rui-warning-darker/75' },\n    { slots: ['root'], color: 'info', variant: ['default', 'fab'], class: 'dark:bg-rui-info-darker dark:active:bg-rui-info-darker/75' },\n    { slots: ['root'], color: 'success', variant: ['default', 'fab'], class: 'dark:bg-rui-success-darker dark:active:bg-rui-success-darker/75' },\n    // Dark mode active outlined/text: the same quiet tint, with the lighter tone as the label\n    { slots: ['root'], color: 'primary', variant: ['outlined', 'text', 'list'], active: true, class: 'dark:bg-rui-primary/[0.16] dark:text-rui-primary-lighter' },\n    { slots: ['root'], color: 'secondary', variant: ['outlined', 'text', 'list'], active: true, class: 'dark:bg-rui-secondary/[0.16] dark:text-rui-secondary-lighter' },\n    { slots: ['root'], color: 'error', variant: ['outlined', 'text', 'list'], active: true, class: 'dark:bg-rui-error/[0.16] dark:text-rui-error-lighter' },\n    { slots: ['root'], color: 'warning', variant: ['outlined', 'text', 'list'], active: true, class: 'dark:bg-rui-warning/[0.16] dark:text-rui-warning-lighter' },\n    { slots: ['root'], color: 'info', variant: ['outlined', 'text', 'list'], active: true, class: 'dark:bg-rui-info/[0.16] dark:text-rui-info-lighter' },\n    { slots: ['root'], color: 'success', variant: ['outlined', 'text', 'list'], active: true, class: 'dark:bg-rui-success/[0.16] dark:text-rui-success-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\n/**\n * The button's classes.\n *\n * Three decisions the class lists cannot state themselves:\n *\n * `position: relative` is not in the base root: it is only a positioning\n * context for the loading spinner, so the `loading` variant applies it.\n * Basing it here would collide with consumers pinning the button with\n * `fixed`/`absolute`, since cascade order picks the later utility, usually\n * `relative`, and turns their `right-*`/`bottom-*` into relative offsets,\n * which misplaces FABs.\n *\n * Icon sizing flows through the `--rui-icon-size` custom property, seeded at\n * the md value in the base root and redefined per size variant with `!` so a\n * variant beats the baseline on the same element regardless of source order.\n * RuiIcon's own `size` prop stamps an inline style on the svg, which beats the\n * inherited value, so a consumer always wins. See rotki/ui-library#512.\n *\n * `disabled` on the element covers two states: actually disabled, and loading,\n * since RuiButton sets `disabled = disabled || loading`. Only the cursor is\n * shared between them; the grey disabled palette lives in the `loading: false`\n * compounds, so a loading button keeps its variant color behind the spinner.\n *\n * An icon-only button matches the height of the text button of the same size,\n * with a 60-70% glyph ratio, which is a larger glyph than the same size gives\n * a prepend/append icon so it does not look lost in the square. xs pads by an\n * arbitrary 0.1875rem because no Tailwind token holds the ratio at a 14px\n * glyph:\n *\n * ```\n * xs            p-[0.1875rem] + 0.875rem icon = 1.25rem (20px)   70%\n * sm            p-1           + 1.25rem  icon = 1.75rem (28px)   71%\n * md (default)  p-2           + 1.25rem  icon = 2.25rem (36px)   56%\n * lg            p-1.5         + 1.5rem   icon = 2.25rem (36px)   67%\n * xl            p-2           + 1.5rem   icon = 2.5rem  (40px)   60%\n * 2xl           p-2           + 1.75rem  icon = 2.75rem (44px)   64%\n * ```\n */\nexport const buttonStyles = tv({\n  slots: {\n    root: [\n      'text-sm leading-5 font-medium inset-ring inset-ring-transparent',\n      'flex items-center justify-center gap-x-2',\n      // md is 36px, the height of a text field or select, so a button lines up with them in a row\n      'px-4 py-2 rounded-rui-control transition-colors duration-150',\n      '[--rui-icon-size:1rem]',\n      'disabled:cursor-not-allowed',\n      'focus-visible:focus-ring',\n    ].join(' '),\n    label: 'inline-block text-nowrap',\n    /*\n     * Inline in the prepend icon's place; an icon-only button centers it over its hidden glyph instead.\n     * The ring outgrows the icon, so its box is held to the icon's width and one line, and the ring\n     * overflows it evenly: loading never moves the label or resizes the button.\n     */\n    spinner: 'shrink-0 w-(--rui-icon-size) h-lh items-center justify-center [&>*]:shrink-0',\n  },\n  variants: {\n    variant: {\n      default: {},\n      outlined: {},\n      text: { root: 'px-2' },\n      fab: { root: 'rounded-full py-2 shadow-rui-control disabled:shadow-none' },\n      // The label's 16px line-box matches the md icon box, so the two share an optical center (rotki/ui-library#515)\n      list: { root: 'p-3 px-3 rounded-rui-sm w-full justify-start text-left', label: 'w-full leading-4' },\n      // An action inside running text: no box, so its size, padding and fills are reset in the link compounds at the end\n      link: { root: 'inline-flex align-baseline gap-x-1 underline-offset-2 not-disabled:hover:underline' },\n    },\n    size: {\n      'xs': { root: 'px-2 py-[0.125rem] text-[.75rem] leading-4 ![--rui-icon-size:0.75rem]' },\n      'sm': { root: 'px-2.5 py-1 text-[.8125rem] leading-5 ![--rui-icon-size:0.875rem]' },\n      'lg': { root: 'px-6 py-2 text-[1rem] leading-5 ![--rui-icon-size:1.25rem]' },\n      // 40px, to line up with RuiTextField / RuiMenuSelect in a toolbar; a 44px jumbo CTA is `2xl`\n      'xl': { root: 'px-6 py-2 text-[1rem] leading-6 ![--rui-icon-size:1.375rem]' },\n      '2xl': { root: 'px-6 py-2.5 text-[1rem] leading-6 ![--rui-icon-size:1.375rem]' },\n    },\n    color: {\n      grey: { root: 'bg-rui-neutral-100 hover:bg-rui-neutral-200 active:bg-rui-neutral-300 text-rui-text dark:bg-rui-neutral-800 dark:hover:bg-rui-neutral-700 dark:active:bg-rui-neutral-600' },\n      // hover is a tint laid over the fill (see the filled compound below); pressed sinks to `darker`\n      primary: { root: 'bg-rui-primary active:bg-rui-primary-darker text-rui-dark-text dark:text-rui-text' },\n      secondary: { root: 'bg-rui-secondary active:bg-rui-secondary-darker text-rui-dark-text dark:text-rui-text' },\n      error: { root: 'bg-rui-error active:bg-rui-error-darker text-rui-dark-text dark:text-rui-text' },\n      warning: { root: 'bg-rui-warning active:bg-rui-warning-darker text-rui-dark-text dark:text-rui-text' },\n      info: { root: 'bg-rui-info active:bg-rui-info-darker text-rui-dark-text dark:text-rui-text' },\n      success: { root: 'bg-rui-success active:bg-rui-success-darker text-rui-dark-text dark:text-rui-text' },\n    },\n    rounded: {\n      true: { root: 'rounded-full' },\n    },\n    icon: {\n      /*\n       * Only the round shape; the `icon + size` compounds below carry padding and icon sizing. The\n       * label holds no text, so it lays out as a flex box: a line box would put a wrapped icon (a\n       * badge) on the text baseline and grow the button by the descender gap.\n       */\n      true: { root: 'rounded-full', label: 'inline-flex' },\n    },\n    active: {\n      true: {},\n      false: {},\n    },\n    loading: {\n      true: { root: 'relative !cursor-progress' },\n      false: {},\n    },\n    hideFocusIndicator: {\n      true: { root: 'focus-visible:!outline-hidden' },\n    },\n    /*\n     * Below the breakpoint the label turns `sr-only`, so it still names the button, and the button\n     * takes its icon-only padding and glyph from the two properties the `collapsed` compounds seed\n     * per size. One static list per breakpoint, since Tailwind cannot see a generated class.\n     */\n    collapseBelow: {\n      'sm': { root: 'max-sm:gap-x-0 max-sm:p-(--rui-btn-collapsed-p) max-sm:![--rui-icon-size:var(--rui-btn-collapsed-icon)]', label: 'max-sm:sr-only' },\n      'md': { root: 'max-md:gap-x-0 max-md:p-(--rui-btn-collapsed-p) max-md:![--rui-icon-size:var(--rui-btn-collapsed-icon)]', label: 'max-md:sr-only' },\n      'lg': { root: 'max-lg:gap-x-0 max-lg:p-(--rui-btn-collapsed-p) max-lg:![--rui-icon-size:var(--rui-btn-collapsed-icon)]', label: 'max-lg:sr-only' },\n      'xl': { root: 'max-xl:gap-x-0 max-xl:p-(--rui-btn-collapsed-p) max-xl:![--rui-icon-size:var(--rui-btn-collapsed-icon)]', label: 'max-xl:sr-only' },\n      '2xl': { root: 'max-2xl:gap-x-0 max-2xl:p-(--rui-btn-collapsed-p) max-2xl:![--rui-icon-size:var(--rui-btn-collapsed-icon)]', label: 'max-2xl:sr-only' },\n    },\n  },\n  compoundVariants: [\n    /*\n     * Filled hover: the pressed state layer (10% black in light, 12% white in dark) over the fill, a\n     * step of about a tenth rather than the jump to `darker`, which stays for the pressed state.\n     * `not-disabled:` keeps a disabled or loading button flat; an `<a>` is never `:disabled`.\n     */\n    { variant: ['default', 'fab'], color: ['primary', 'secondary', 'error', 'warning', 'info', 'success'], class: { root: 'not-disabled:hover:state-layer-pressed' } },\n    // An icon-only button has no label to keep, so its glyph goes transparent (still in the accessibility tree) under a centered spinner\n    { loading: true, icon: true, class: { root: '[&>*:not([data-spinner])]:opacity-0', spinner: 'absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2' } },\n    // Disabled appearance: a flat neutral fill, skipped while loading so the variant color shows behind the spinner\n    { loading: false, class: { root: 'disabled:!bg-rui-neutral-100 dark:disabled:!bg-rui-neutral-800 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:inset-ring-rui-text-disabled dark:disabled:inset-ring-rui-text-disabled' } },\n    { loading: false, variant: ['text', 'link'], 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-neutral-200 dark:bg-rui-neutral-700' } },\n    // the same hover and pressed tints as a highlighted menu option\n    { color: 'grey', variant: ['outlined', 'text', 'list'], class: { root: 'bg-transparent hover:bg-rui-hover active:bg-rui-pressed dark:bg-transparent dark:text-rui-text' } },\n    { color: 'grey', variant: ['outlined', 'text', 'list'], active: true, class: { root: 'bg-rui-pressed dark:bg-rui-pressed' } },\n    // the shared control edge, 3:1 against the page like the 50% context colours beside it\n    { color: 'grey', variant: 'outlined', class: { root: 'inset-ring-rui-outline' } },\n    // the dark variant overrides the shared compound's `dark:text-rui-text`, so a grey text button stays secondary in both themes\n    { color: 'grey', variant: 'text', class: { root: 'text-rui-text-secondary dark:text-rui-text-secondary' } },\n\n    // `dark:text-rui-<color>` beats the filled buttons' `dark:text-rui-text`; primary, secondary and error use their lighter tone in dark for 4.5:1\n    { color: 'primary', variant: ['outlined', 'text', 'list'], class: { root: 'bg-transparent hover:bg-rui-primary/6 active:bg-rui-primary/10 text-rui-primary dark:text-rui-primary-lighter' } },\n    { color: 'secondary', variant: ['outlined', 'text', 'list'], class: { root: 'bg-transparent hover:bg-rui-secondary/6 active:bg-rui-secondary/10 text-rui-secondary dark:text-rui-secondary-lighter' } },\n    { color: 'error', variant: ['outlined', 'text', 'list'], class: { root: 'bg-transparent hover:bg-rui-error/6 active:bg-rui-error/10 text-rui-error dark:text-rui-error-lighter' } },\n    { color: 'warning', variant: ['outlined', 'text', 'list'], class: { root: 'bg-transparent hover:bg-rui-warning/6 active:bg-rui-warning/10 text-rui-warning dark:text-rui-warning' } },\n    { color: 'info', variant: ['outlined', 'text', 'list'], class: { root: 'bg-transparent hover:bg-rui-info/6 active:bg-rui-info/10 text-rui-info dark:text-rui-info' } },\n    { color: 'success', variant: ['outlined', 'text', 'list'], class: { root: 'bg-transparent hover:bg-rui-success/6 active:bg-rui-success/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    // Active outlined/text: a quiet tint with the deeper tone as the label, which keeps 4.5:1 for every color\n    { color: 'primary', variant: ['outlined', 'text', 'list'], active: true, class: { root: 'bg-rui-primary/[0.08] text-rui-primary-darker' } },\n    { color: 'secondary', variant: ['outlined', 'text', 'list'], active: true, class: { root: 'bg-rui-secondary/[0.08] text-rui-secondary-darker' } },\n    { color: 'error', variant: ['outlined', 'text', 'list'], active: true, class: { root: 'bg-rui-error/[0.08] text-rui-error-darker' } },\n    { color: 'warning', variant: ['outlined', 'text', 'list'], active: true, class: { root: 'bg-rui-warning/[0.08] text-rui-warning-darker' } },\n    { color: 'info', variant: ['outlined', 'text', 'list'], active: true, class: { root: 'bg-rui-info/[0.08] text-rui-info-darker' } },\n    { color: 'success', variant: ['outlined', 'text', 'list'], active: true, class: { root: 'bg-rui-success/[0.08] text-rui-success-darker' } },\n\n    // === Context colors: outlined border (dark draws primary and secondary solid; at 50% their deep fills sink into the page and look alike) ===\n    { color: 'primary', variant: 'outlined', class: { root: 'inset-ring-rui-primary/50 dark:inset-ring-rui-primary' } },\n    { color: 'secondary', variant: 'outlined', class: { root: 'inset-ring-rui-secondary/50 dark:inset-ring-rui-secondary' } },\n    { color: 'error', variant: 'outlined', class: { root: 'inset-ring-rui-error/50' } },\n    { color: 'warning', variant: 'outlined', class: { root: 'inset-ring-rui-warning/50' } },\n    { color: 'info', variant: 'outlined', class: { root: 'inset-ring-rui-info/50' } },\n    { color: 'success', variant: 'outlined', class: { root: 'inset-ring-rui-success/50' } },\n\n    // === Size overrides per variant ===\n    { variant: 'text', size: 'xs', class: { root: 'px-1' } },\n    { variant: 'text', size: 'sm', class: { root: 'px-1.5' } },\n    { variant: 'text', size: 'lg', class: { root: 'px-2.5' } },\n    { variant: 'text', size: 'xl', class: { root: 'px-2.5' } },\n    { variant: 'text', size: '2xl', class: { root: 'px-2.5' } },\n    { variant: 'fab', size: 'xs', class: { root: 'py-1 px-1' } },\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: 'xs', class: { root: 'px-3 py-0.5' } },\n    // 32px: a dense select's option row, which `getOptionHeight` reserves in the virtual list\n    { variant: 'list', size: 'sm', class: { root: 'px-3 py-2' } },\n    // Icon-only sizing, per the padding and glyph table on buttonStyles above\n    { icon: true, class: { root: 'p-2 ![--rui-icon-size:1.25rem]' } },\n    { icon: true, size: 'xs', class: { root: 'p-[0.1875rem] ![--rui-icon-size:0.875rem]' } },\n    { icon: true, size: 'sm', class: { root: 'p-1 ![--rui-icon-size:1.25rem]' } },\n    { icon: true, size: 'lg', class: { root: 'p-1.5 ![--rui-icon-size:1.5rem]' } },\n    { icon: true, size: 'xl', class: { root: 'p-2 ![--rui-icon-size:1.5rem]' } },\n    { icon: true, size: '2xl', class: { root: 'p-2 ![--rui-icon-size:1.75rem]' } },\n    { variant: 'fab', icon: true, size: 'sm', class: { root: 'px-2 py-2' } },\n    // A collapsed button's icon-only padding and glyph, the same table as `icon` above\n    { collapseBelow: ['sm', 'md', 'lg', 'xl', '2xl'], class: { root: '[--rui-btn-collapsed-p:0.5rem] [--rui-btn-collapsed-icon:1.25rem]' } },\n    { collapseBelow: ['sm', 'md', 'lg', 'xl', '2xl'], size: 'xs', class: { root: '[--rui-btn-collapsed-p:0.1875rem] [--rui-btn-collapsed-icon:0.875rem]' } },\n    { collapseBelow: ['sm', 'md', 'lg', 'xl', '2xl'], size: 'sm', class: { root: '[--rui-btn-collapsed-p:0.25rem] [--rui-btn-collapsed-icon:1.25rem]' } },\n    { collapseBelow: ['sm', 'md', 'lg', 'xl', '2xl'], size: 'lg', class: { root: '[--rui-btn-collapsed-p:0.375rem] [--rui-btn-collapsed-icon:1.5rem]' } },\n    { collapseBelow: ['sm', 'md', 'lg', 'xl', '2xl'], size: 'xl', class: { root: '[--rui-btn-collapsed-p:0.5rem] [--rui-btn-collapsed-icon:1.5rem]' } },\n    { collapseBelow: ['sm', 'md', 'lg', 'xl', '2xl'], size: '2xl', class: { root: '[--rui-btn-collapsed-p:0.5rem] [--rui-btn-collapsed-icon:1.75rem]' } },\n\n    /*\n     * === Link ===\n     * Last, so they win over the size, colour and active entries above. Font size and line height\n     * come from the surrounding text; a size only changes the spinner. The colour matches the\n     * outlined/text compounds, with no fill or tint.\n     */\n    {\n      variant: 'link',\n      class: {\n        root: [\n          'p-0 text-[length:inherit] leading-[inherit] ![--rui-icon-size:1em]',\n          'bg-transparent hover:bg-transparent active:bg-transparent',\n          'dark:bg-transparent dark:hover:bg-transparent dark:active:bg-transparent',\n        ].join(' '),\n      },\n    },\n    { color: 'grey', variant: 'link', class: { root: 'text-rui-text dark:text-rui-text' } },\n    { color: 'primary', variant: 'link', class: { root: 'text-rui-primary dark:text-rui-primary-lighter' } },\n    { color: 'secondary', variant: 'link', class: { root: 'text-rui-secondary dark:text-rui-secondary-lighter' } },\n    { color: 'error', variant: 'link', class: { root: 'text-rui-error dark:text-rui-error-lighter' } },\n    { color: 'warning', variant: 'link', class: { root: 'text-rui-warning dark:text-rui-warning' } },\n    { color: 'info', variant: 'link', class: { root: 'text-rui-info dark:text-rui-info' } },\n    { color: 'success', variant: 'link', class: { root: 'text-rui-success dark:text-rui-success' } },\n  ],\n  compoundSlots: [\n    // In dark a status color's `main` is a text tone, so a filled status button takes the deep `darker` fill\n    { slots: ['root'], color: 'error', variant: ['default', 'fab'], class: 'dark:bg-rui-error-darker dark:active:bg-rui-error-darker/75' },\n    { slots: ['root'], color: 'warning', variant: ['default', 'fab'], class: 'dark:bg-rui-warning-darker dark:active:bg-rui-warning-darker/75' },\n    { slots: ['root'], color: 'info', variant: ['default', 'fab'], class: 'dark:bg-rui-info-darker dark:active:bg-rui-info-darker/75' },\n    { slots: ['root'], color: 'success', variant: ['default', 'fab'], class: 'dark:bg-rui-success-darker dark:active:bg-rui-success-darker/75' },\n    // Dark mode active outlined/text: the same quiet tint, with the lighter tone as the label\n    { slots: ['root'], color: 'primary', variant: ['outlined', 'text', 'list'], active: true, class: 'dark:bg-rui-primary/[0.16] dark:text-rui-primary-lighter' },\n    { slots: ['root'], color: 'secondary', variant: ['outlined', 'text', 'list'], active: true, class: 'dark:bg-rui-secondary/[0.16] dark:text-rui-secondary-lighter' },\n    { slots: ['root'], color: 'error', variant: ['outlined', 'text', 'list'], active: true, class: 'dark:bg-rui-error/[0.16] dark:text-rui-error-lighter' },\n    { slots: ['root'], color: 'warning', variant: ['outlined', 'text', 'list'], active: true, class: 'dark:bg-rui-warning/[0.16] dark:text-rui-warning-lighter' },\n    { slots: ['root'], color: 'info', variant: ['outlined', 'text', 'list'], active: true, class: 'dark:bg-rui-info/[0.16] dark:text-rui-info-lighter' },\n    { slots: ['root'], color: 'success', variant: ['outlined', 'text', 'list'], active: true, class: 'dark:bg-rui-success/[0.16] dark:text-rui-success-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":["_sfc_main"],"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 { type ButtonGroupContext, ButtonGroupKey } from '@/components/buttons/button-group/button-group-context';\nimport { cn, tv } from '@/utils/tv';\n\nexport interface Props {\n  vertical?: boolean;\n  color?: ContextColorsType;\n  activeColor?: ContextColorsType;\n  /**\n   * `segmented` draws the options as `RuiTabs variant=\"segmented\"` does: a neutral track whose active\n   * option is a raised surface. It is neutral, so it ignores `color` and `activeColor`.\n   */\n  variant?: 'default' | 'outlined' | 'text' | 'segmented';\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\ndefineSlots<{\n  default?: () => any;\n}>();\n\nconst buttonGroupStyles = tv({\n  slots: {\n    /*\n     * `w-fit`: a flex column stretches its children, inline-flex or not, which drew an outlined\n     * group's frame across the whole row. A consumer's own width still wins through the class merge.\n     * Between filled buttons a separator only needs to part the fills, so it takes the light divider.\n     */\n    root: 'inline-flex w-fit max-w-full rounded-rui-control between:border-l between:border-r-0 between:border-rui-divider outline-solid outline-1 outline-transparent -outline-offset-1',\n    button: 'border-0 inset-ring-0 focus:z-1',\n  },\n  variants: {\n    vertical: {\n      true: {\n        root: 'flex-col items-start between:border-l-0 between:border-t between:border-b-0 *:w-full',\n        button: 'w-full',\n      },\n      false: {},\n    },\n    gap: {\n      none: {\n        button: 'rounded-none!',\n      },\n      sm: {\n        root: 'between:border-0 outline-0 gap-2',\n        button: 'inset-ring',\n      },\n      md: {\n        root: 'between:border-0 outline-0 gap-4',\n        button: 'inset-ring',\n      },\n      lg: {\n        root: 'between:border-0 outline-0 gap-6',\n        button: 'inset-ring',\n      },\n    },\n    variant: {\n      default: {},\n      outlined: {\n        // the control edge, matching RuiButton's colourless outlined treatment\n        root: 'outline-rui-outline between:border-rui-outline',\n      },\n      text: {},\n      // the segmented tabs' track and pill; the 32px options make a 36px control, a field's height\n      segmented: {\n        root: 'rounded-rui-panel bg-rui-neutral-200 p-0.5 gap-0.5 outline-0 between:border-0 dark:bg-rui-neutral-800',\n        button: [\n          'h-8 px-3 text-rui-text-secondary transition-colors hover:text-rui-text focus-visible:-outline-offset-2',\n          'data-[active]:bg-rui-surface data-[active]:text-rui-text data-[active]:shadow-rui-control dark:data-[active]:bg-rui-neutral-700',\n        ].join(' '),\n      },\n    },\n    color: {\n      primary: {},\n      secondary: {},\n      error: {},\n      warning: {},\n      info: {},\n      success: {},\n    },\n  },\n  compoundVariants: [\n    /*\n     * The outer corners go to the button that is, or sits inside, the group's first or last item, so a\n     * button wrapped in a tooltip or a menu activator rounds like a direct child.\n     */\n    { gap: 'none', vertical: false, class: { button: '[&:is([data-button-group]>:first-child,[data-button-group]>:first-child_*)]:rounded-l-rui-control! [&:is([data-button-group]>:last-child,[data-button-group]>:last-child_*)]:rounded-r-rui-control!' } },\n    { gap: 'none', vertical: true, class: { button: '[&:is([data-button-group]>:first-child,[data-button-group]>:first-child_*)]:rounded-t-rui-control! [&:is([data-button-group]>:last-child,[data-button-group]>:last-child_*)]:rounded-b-rui-control!' } },\n    /*\n     * In a joined group the focus outline's sides fall on the neighbours, and on a primary neighbour a\n     * primary outline vanishes. A surface ring fills the outline's offset, so the raised segment's\n     * ring is parted from its neighbours on every side.\n     */\n    { gap: 'none', variant: ['default', 'outlined', 'text'], class: { button: 'focus-visible:ring-2 focus-visible:ring-rui-surface' } },\n    // each segment is its own rounded pill inside the track, not a slice of one joined bar\n    { variant: 'segmented', class: { button: 'rounded-rui-control!' } },\n\n    // Color dividers for outlined/text (overrides darker dividers above)\n    { color: 'primary', variant: ['outlined', 'text'], class: { root: 'between:border-rui-primary/50' } },\n    { color: 'secondary', variant: ['outlined', 'text'], class: { root: 'between:border-rui-secondary/50' } },\n    { color: 'error', variant: ['outlined', 'text'], class: { root: 'between:border-rui-error/50' } },\n    { color: 'warning', variant: ['outlined', 'text'], class: { root: 'between:border-rui-warning/50' } },\n    { color: 'info', variant: ['outlined', 'text'], class: { root: 'between:border-rui-info/50' } },\n    { color: 'success', variant: ['outlined', 'text'], class: { root: 'between:border-rui-success/50' } },\n\n    // Color outline for outlined variant\n    { color: 'primary', variant: 'outlined', class: { root: 'outline-rui-primary/50' } },\n    { color: 'secondary', variant: 'outlined', class: { root: 'outline-rui-secondary/50' } },\n    { color: 'error', variant: 'outlined', class: { root: 'outline-rui-error/50' } },\n    { color: 'warning', variant: 'outlined', class: { root: 'outline-rui-warning/50' } },\n    { color: 'info', variant: 'outlined', class: { root: 'outline-rui-info/50' } },\n    { color: 'success', variant: 'outlined', class: { root: 'outline-rui-success/50' } },\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\n/**\n * The color a button takes: the pressed one's `activeColor` when set, otherwise the group's. The\n * segmented variant is neutral, like the segmented tabs, so its buttons take none.\n *\n * @param active - whether the button is the pressed one\n * @returns the color to set, or undefined to leave the button grey\n */\nfunction buttonColor(active: boolean): ContextColorsType | undefined {\n  if (variant === 'segmented')\n    return undefined;\n  return active && activeColor ? activeColor : color;\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\n// a button that sets its own size keeps it; the rest take the group's\nprovide(ButtonGroupKey, {\n  variant: () => variant === 'segmented' ? 'text' : variant,\n  size: () => size,\n  disabled: () => disabled,\n  color: buttonColor,\n  itemClass: () => get(ui).button(),\n  isActive: (value: T) => isActive(value, get(modelValue)),\n  toggle: onClick,\n} satisfies ButtonGroupContext<T>);\n</script>\n\n<template>\n  <div\n    :class=\"ui.root({ class: cn($attrs.class) })\"\n    data-button-group\n    v-bind=\"{ ...$attrs, class: undefined }\"\n  >\n    <slot />\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"RuiButtonGroup.js","names":["_sfc_main"],"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 { type ButtonGroupContext, ButtonGroupKey } from '@/components/buttons/button-group/button-group-context';\nimport { cn } from '@/utils/tv';\nimport { buttonGroupStyles } from './button-group-styles';\n\nexport interface Props {\n  vertical?: boolean;\n  color?: ContextColorsType;\n  activeColor?: ContextColorsType;\n  /**\n   * `segmented` draws the options as `RuiTabs variant=\"segmented\"` does: a neutral track whose active\n   * option is a raised surface. It is neutral, so it ignores `color` and `activeColor`.\n   */\n  variant?: 'default' | 'outlined' | 'text' | 'segmented';\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\ndefineSlots<{\n  default?: () => any;\n}>();\n\nconst ui = computed<ReturnType<typeof buttonGroupStyles>>(() => buttonGroupStyles({\n  vertical,\n  gap: gap ?? 'none',\n  variant,\n  color,\n}));\n\n/**\n * The color a button takes: the pressed one's `activeColor` when set, otherwise the group's. The\n * segmented variant is neutral, like the segmented tabs, so its buttons take none.\n *\n * @param active - whether the button is the pressed one\n * @returns the color to set, or undefined to leave the button grey\n */\nfunction buttonColor(active: boolean): ContextColorsType | undefined {\n  if (variant === 'segmented')\n    return undefined;\n  return active && activeColor ? activeColor : color;\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\n// a button that sets its own size keeps it; the rest take the group's\nprovide(ButtonGroupKey, {\n  variant: () => variant === 'segmented' ? 'text' : variant,\n  size: () => size,\n  disabled: () => disabled,\n  color: buttonColor,\n  itemClass: () => get(ui).button(),\n  isActive: (value: T) => isActive(value, get(modelValue)),\n  toggle: onClick,\n} satisfies ButtonGroupContext<T>);\n</script>\n\n<template>\n  <div\n    :class=\"ui.root({ class: cn($attrs.class) })\"\n    data-button-group\n    v-bind=\"{ ...$attrs, class: undefined }\"\n  >\n    <slot />\n  </div>\n</template>\n"],"mappings":""}