@rotki/ui-library 3.1.7 → 3.2.0

package/dist/components/loaders/skeleton-loader-styles.d.ts

@@ -0,0 +1,37 @@
+export declare const skeletonLoaderStyles: import("tailwind-variants").TVReturnType<{
+    type: {
+        custom: "box-border";
+        text: "w-full h-4 rounded-rui-control";
+        heading: "w-full h-6 rounded-rui-control";
+        button: "w-full max-w-24 h-9 rounded-rui-control";
+        icon: "w-6 h-6 rounded-full";
+        avatar: "w-10 h-10 rounded-full";
+        thumbnail: "w-14 h-14 rounded-xs";
+        paragraph: "flex flex-col gap-2";
+        article: "flex flex-col gap-2";
+    };
+}, undefined, undefined, {
+    type: {
+        custom: "box-border";
+        text: "w-full h-4 rounded-rui-control";
+        heading: "w-full h-6 rounded-rui-control";
+        button: "w-full max-w-24 h-9 rounded-rui-control";
+        icon: "w-6 h-6 rounded-full";
+        avatar: "w-10 h-10 rounded-full";
+        thumbnail: "w-14 h-14 rounded-xs";
+        paragraph: "flex flex-col gap-2";
+        article: "flex flex-col gap-2";
+    };
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
+    type: {
+        custom: "box-border";
+        text: "w-full h-4 rounded-rui-control";
+        heading: "w-full h-6 rounded-rui-control";
+        button: "w-full max-w-24 h-9 rounded-rui-control";
+        icon: "w-6 h-6 rounded-full";
+        avatar: "w-10 h-10 rounded-full";
+        thumbnail: "w-14 h-14 rounded-xs";
+        paragraph: "flex flex-col gap-2";
+        article: "flex flex-col gap-2";
+    };
+}, undefined>>;

package/dist/components/loaders/skeleton-loader-styles.js

@@ -0,0 +1,18 @@
+import { tv } from "../../utils/tv.js";
+import { SkeletonType } from "./skeleton-type.js";
+//#region src/components/loaders/skeleton-loader-styles.ts
+var skeletonLoaderStyles = tv({ variants: { type: {
+	[SkeletonType.CUSTOM]: "box-border",
+	[SkeletonType.TEXT]: "w-full h-4 rounded-rui-control",
+	[SkeletonType.HEADING]: "w-full h-6 rounded-rui-control",
+	[SkeletonType.BUTTON]: "w-full max-w-24 h-9 rounded-rui-control",
+	[SkeletonType.ICON]: "w-6 h-6 rounded-full",
+	[SkeletonType.AVATAR]: "w-10 h-10 rounded-full",
+	[SkeletonType.THUMBNAIL]: "w-14 h-14 rounded-xs",
+	[SkeletonType.PARAGRAPH]: "flex flex-col gap-2",
+	[SkeletonType.ARTICLE]: "flex flex-col gap-2"
+} } });
+//#endregion
+export { skeletonLoaderStyles };
+
+//# sourceMappingURL=skeleton-loader-styles.js.map

package/dist/components/loaders/skeleton-loader-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton-loader-styles.js","names":[],"sources":["../../../src/components/loaders/skeleton-loader-styles.ts"],"sourcesContent":["import { SkeletonType } from '@/components/loaders/skeleton-type';\nimport { tv } from '@/utils/tv';\n\nexport const skeletonLoaderStyles = tv({\n  variants: {\n    type: {\n      [SkeletonType.CUSTOM]: 'box-border',\n      [SkeletonType.TEXT]: 'w-full h-4 rounded-rui-control',\n      [SkeletonType.HEADING]: 'w-full h-6 rounded-rui-control',\n      [SkeletonType.BUTTON]: 'w-full max-w-24 h-9 rounded-rui-control',\n      [SkeletonType.ICON]: 'w-6 h-6 rounded-full',\n      [SkeletonType.AVATAR]: 'w-10 h-10 rounded-full',\n      [SkeletonType.THUMBNAIL]: 'w-14 h-14 rounded-xs',\n      [SkeletonType.PARAGRAPH]: 'flex flex-col gap-2',\n      [SkeletonType.ARTICLE]: 'flex flex-col gap-2',\n    },\n  },\n});\n"],"mappings":";;;AAGA,IAAa,uBAAuB,GAAG,EACrC,UAAU,EACR,MAAM;EACH,aAAa,SAAS;EACtB,aAAa,OAAO;EACpB,aAAa,UAAU;EACvB,aAAa,SAAS;EACtB,aAAa,OAAO;EACpB,aAAa,SAAS;EACtB,aAAa,YAAY;EACzB,aAAa,YAAY;EACzB,aAAa,UAAU;AAC1B,EACF,EACF,CAAC"}

package/dist/components/overlays/badge/RuiBadge.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiBadge.js","names":["_sfc_main"],"sources":["../../../../src/components/overlays/badge/RuiBadge.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { ContextColorsType } from '@/consts/colors';\nimport type { RuiIcons } from '@/icons';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport { BadgePlacement, BadgeRounded, BadgeSize } from '@/components/overlays/badge/badge-props';\nimport { tv } from '@/utils/tv';\n\ntype PosConfig = [left: number, right: string, edge: string, center: number];\n\nexport interface Props {\n  text?: string | null;\n  icon?: RuiIcons | null;\n  modelValue?: boolean;\n  dot?: boolean;\n  left?: boolean;\n  offsetX?: string | number;\n  offsetY?: string | number;\n  placement?: BadgePlacement;\n  size?: BadgeSize;\n  rounded?: BadgeRounded;\n  color?: 'default' | ContextColorsType;\n}\n\ndefineOptions({\n  name: 'RuiBadge',\n});\n\nconst {\n  text = null,\n  icon = null,\n  modelValue = true,\n  dot = false,\n  placement = BadgePlacement.top,\n  left = false,\n  size = BadgeSize.md,\n  rounded = BadgeRounded.full,\n  color = 'primary',\n  offsetX = 0,\n  offsetY = 0,\n} = defineProps<Props>();\n\nconst slots = defineSlots<{\n  default?: () => any;\n  badge?: () => any;\n  icon?: () => any;\n}>();\n\nconst badgeStyles = tv({\n  slots: {\n    wrapper: 'relative inline-block',\n    badge: 'flex items-center justify-center text-xs font-medium tabular-nums absolute bg-transparent text-rui-text',\n    content: 'flex items-center gap-1 px-1.5',\n  },\n  variants: {\n    // `-fill` is `main` in light and, for a status color, the deep `darker` in dark, where `main` is a text tone\n    color: {\n      default: { badge: 'bg-rui-neutral-200 dark:bg-rui-neutral-700' },\n      primary: { badge: 'bg-rui-primary-fill text-rui-primary-foreground' },\n      secondary: { badge: 'bg-rui-secondary-fill text-rui-secondary-foreground' },\n      error: { badge: 'bg-rui-error-fill text-rui-error-foreground' },\n      warning: { badge: 'bg-rui-warning-fill text-rui-warning-foreground' },\n      info: { badge: 'bg-rui-info-fill text-rui-info-foreground' },\n      success: { badge: 'bg-rui-success-fill text-rui-success-foreground' },\n    },\n    // the icon is 60% of the badge height, as the text is, rather than filling it\n    size: {\n      sm: { badge: 'min-h-4 min-w-4 text-caption-2 [--rui-icon-size:0.625rem]' },\n      md: { badge: 'min-h-5 min-w-5 [--rui-icon-size:0.75rem]' },\n      lg: { badge: 'min-h-6 min-w-6 [--rui-icon-size:0.875rem]' },\n    },\n    rounded: {\n      sm: { badge: 'rounded-xs' },\n      md: { badge: 'rounded-rui-control' },\n      lg: { badge: 'rounded-rui-card' },\n      full: { badge: 'rounded-full' },\n    },\n    // A surface ring keeps a dot apart from whatever it overlaps, such as an avatar edge\n    dot: {\n      true: { badge: 'ring-2 ring-rui-surface' },\n    },\n    // an icon alone needs no side padding, so the badge stays as wide as it is tall\n    iconOnly: {\n      true: { content: 'px-0' },\n      false: {},\n    },\n  },\n  compoundVariants: [\n    // the default dot is a step lighter in dark, where neutral-500 nearly vanished against a dark control\n    { dot: true, color: 'default', class: { badge: 'bg-rui-neutral-500 dark:bg-rui-neutral-400' } },\n    // A dot carries no text, so it keeps the brighter `main`, which reads better as a small mark on a dark page\n    { dot: true, color: 'error', class: { badge: 'dark:bg-rui-error' } },\n    { dot: true, color: 'warning', class: { badge: 'dark:bg-rui-warning' } },\n    { dot: true, color: 'info', class: { badge: 'dark:bg-rui-info' } },\n    { dot: true, color: 'success', class: { badge: 'dark:bg-rui-success' } },\n\n    // Dot sizes: 8, 10 and 12px, since half of a dot sits off the corner and reads smaller than it is\n    { dot: true, size: 'sm', class: { badge: 'min-w-2 min-h-2' } },\n    { dot: true, size: 'md', class: { badge: 'min-w-2.5 min-h-2.5' } },\n    { dot: true, size: 'lg', class: { badge: 'min-w-3 min-h-3' } },\n  ],\n  defaultVariants: {\n    color: 'primary',\n    size: 'md',\n    rounded: 'full',\n    dot: false,\n  },\n});\n\nconst hasText = computed<boolean>(() => !!text || !!slots.badge);\n\nconst hasIconAndText = computed<boolean>(() => (!!icon || !!slots.icon) && get(hasText));\n\nconst ui = computed<ReturnType<typeof badgeStyles>>(() => badgeStyles({\n  color,\n  size,\n  rounded,\n  dot,\n  iconOnly: (!!icon || !!slots.icon) && !get(hasText),\n}));\n\n/** Dot positions as [leftOffset, rightBase, edgeBase, centerOffset]; a dot's center sits on the corner, so each size moves by half its diameter. */\nconst DOT_POS: Record<BadgeSize, PosConfig> = {\n  sm: [-0.25, '100% - 0.25rem', '100% - 0.25rem', 0.25],\n  md: [-0.3125, '100% - 0.3125rem', '100% - 0.3125rem', 0.3125],\n  lg: [-0.375, '100% - 0.375rem', '100% - 0.375rem', 0.375],\n};\nconst BADGE_POS: Record<BadgeSize, PosConfig> = {\n  sm: [-0.85, '100% - 0.375rem', '100% - 0.375rem', 0.55],\n  md: [-0.95, '100% - 0.5rem', '100% - 0.5rem', 0.65],\n  lg: [-1.05, '100% - 0.5rem', '100% - 0.5rem', 0.75],\n};\n\nconst positionStyle = computed<Record<string, string>>(() => {\n  const ox = Number(offsetX) * 0.0625;\n  const oy = Number(offsetY) * 0.0625;\n  const [l, r, edge, center] = dot ? DOT_POS[size] : BADGE_POS[size];\n\n  const horizontal = `calc(${left ? `${l}rem` : r} + ${ox}rem)`;\n  const vertical = placement === 'center'\n    ? `calc(50% - ${center}rem - ${oy}rem)`\n    : `calc(${edge} - ${oy}rem)`;\n\n  return {\n    left: horizontal,\n    [placement === 'top' ? 'bottom' : 'top']: vertical,\n  };\n});\n</script>\n\n<template>\n  <div :class=\"ui.wrapper()\">\n    <slot />\n    <!-- under reduced motion the badge appears and leaves at full size, with no scale -->\n    <Transition\n      appear\n      enter-active-class=\"transition-[scale] ease-out duration-200 motion-reduce:transition-none\"\n      enter-from-class=\"scale-0 motion-reduce:scale-100\"\n      enter-to-class=\"scale-100\"\n      leave-active-class=\"transition-[scale] ease-in duration-150 motion-reduce:transition-none\"\n      leave-from-class=\"scale-100\"\n      leave-to-class=\"scale-0 motion-reduce:scale-100\"\n    >\n      <div\n        v-if=\"modelValue\"\n        :class=\"ui.badge()\"\n        :style=\"positionStyle\"\n        :data-placement=\"placement\"\n        :data-dot=\"dot || undefined\"\n        :data-left=\"left || undefined\"\n        aria-atomic=\"true\"\n        aria-live=\"polite\"\n        role=\"status\"\n      >\n        <!-- no aria-label: on a live region it replaced the count, so a reader announced \"Badge\" -->\n        <span\n          v-if=\"!dot\"\n          :class=\"ui.content({ class: hasIconAndText ? 'px-2' : undefined })\"\n        >\n          <slot name=\"badge\">\n            {{ text }}\n          </slot>\n          <slot name=\"icon\">\n            <RuiIcon\n              v-if=\"icon\"\n              :name=\"icon\"\n            />\n          </slot>\n        </span>\n      </div>\n    </Transition>\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"RuiBadge.js","names":["_sfc_main"],"sources":["../../../../src/components/overlays/badge/RuiBadge.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { ContextColorsType } from '@/consts/colors';\nimport type { RuiIcons } from '@/icons';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport { BadgePlacement, BadgeRounded, BadgeSize } from '@/components/overlays/badge/badge-props';\nimport { badgeStyles } from './badge-styles';\n\ntype PosConfig = [left: number, right: string, edge: string, center: number];\n\nexport interface Props {\n  text?: string | null;\n  icon?: RuiIcons | null;\n  modelValue?: boolean;\n  dot?: boolean;\n  left?: boolean;\n  offsetX?: string | number;\n  offsetY?: string | number;\n  placement?: BadgePlacement;\n  size?: BadgeSize;\n  rounded?: BadgeRounded;\n  color?: 'default' | ContextColorsType;\n}\n\ndefineOptions({\n  name: 'RuiBadge',\n});\n\nconst {\n  text = null,\n  icon = null,\n  modelValue = true,\n  dot = false,\n  placement = BadgePlacement.top,\n  left = false,\n  size = BadgeSize.md,\n  rounded = BadgeRounded.full,\n  color = 'primary',\n  offsetX = 0,\n  offsetY = 0,\n} = defineProps<Props>();\n\nconst slots = defineSlots<{\n  default?: () => any;\n  badge?: () => any;\n  icon?: () => any;\n}>();\n\nconst hasText = computed<boolean>(() => !!text || !!slots.badge);\n\nconst hasIconAndText = computed<boolean>(() => (!!icon || !!slots.icon) && get(hasText));\n\nconst ui = computed<ReturnType<typeof badgeStyles>>(() => badgeStyles({\n  color,\n  size,\n  rounded,\n  dot,\n  iconOnly: (!!icon || !!slots.icon) && !get(hasText),\n}));\n\n/** Dot positions as [leftOffset, rightBase, edgeBase, centerOffset]; a dot's center sits on the corner, so each size moves by half its diameter. */\nconst DOT_POS: Record<BadgeSize, PosConfig> = {\n  sm: [-0.25, '100% - 0.25rem', '100% - 0.25rem', 0.25],\n  md: [-0.3125, '100% - 0.3125rem', '100% - 0.3125rem', 0.3125],\n  lg: [-0.375, '100% - 0.375rem', '100% - 0.375rem', 0.375],\n};\nconst BADGE_POS: Record<BadgeSize, PosConfig> = {\n  sm: [-0.85, '100% - 0.375rem', '100% - 0.375rem', 0.55],\n  md: [-0.95, '100% - 0.5rem', '100% - 0.5rem', 0.65],\n  lg: [-1.05, '100% - 0.5rem', '100% - 0.5rem', 0.75],\n};\n\nconst positionStyle = computed<Record<string, string>>(() => {\n  const ox = Number(offsetX) * 0.0625;\n  const oy = Number(offsetY) * 0.0625;\n  const [l, r, edge, center] = dot ? DOT_POS[size] : BADGE_POS[size];\n\n  const horizontal = `calc(${left ? `${l}rem` : r} + ${ox}rem)`;\n  const vertical = placement === 'center'\n    ? `calc(50% - ${center}rem - ${oy}rem)`\n    : `calc(${edge} - ${oy}rem)`;\n\n  return {\n    left: horizontal,\n    [placement === 'top' ? 'bottom' : 'top']: vertical,\n  };\n});\n</script>\n\n<template>\n  <div :class=\"ui.wrapper()\">\n    <slot />\n    <!-- under reduced motion the badge appears and leaves at full size, with no scale -->\n    <Transition\n      appear\n      enter-active-class=\"transition-[scale] ease-out duration-200 motion-reduce:transition-none\"\n      enter-from-class=\"scale-0 motion-reduce:scale-100\"\n      enter-to-class=\"scale-100\"\n      leave-active-class=\"transition-[scale] ease-in duration-150 motion-reduce:transition-none\"\n      leave-from-class=\"scale-100\"\n      leave-to-class=\"scale-0 motion-reduce:scale-100\"\n    >\n      <div\n        v-if=\"modelValue\"\n        :class=\"ui.badge()\"\n        :style=\"positionStyle\"\n        :data-placement=\"placement\"\n        :data-dot=\"dot || undefined\"\n        :data-left=\"left || undefined\"\n        aria-atomic=\"true\"\n        aria-live=\"polite\"\n        role=\"status\"\n      >\n        <!-- no aria-label: on a live region it replaced the count, so a reader announced \"Badge\" -->\n        <span\n          v-if=\"!dot\"\n          :class=\"ui.content({ class: hasIconAndText ? 'px-2' : undefined })\"\n        >\n          <slot name=\"badge\">\n            {{ text }}\n          </slot>\n          <slot name=\"icon\">\n            <RuiIcon\n              v-if=\"icon\"\n              :name=\"icon\"\n            />\n          </slot>\n        </span>\n      </div>\n    </Transition>\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/overlays/badge/RuiBadge.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 RuiIcon_default from "../../icons/RuiIcon.js";
 import { BadgePlacement, BadgeRounded, BadgeSize } from "./badge-props.js";
+import { badgeStyles } from "./badge-styles.js";
 import { Transition, computed, createBlock, createCommentVNode, createElementBlock, createTextVNode, createVNode, defineComponent, normalizeClass, normalizeStyle, openBlock, renderSlot, toDisplayString, unref, useSlots, withCtx } from "vue";
 //#region src/components/overlays/badge/RuiBadge.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = [
@@ -36,88 +36,6 @@ var RuiBadge_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineC
 	},
 	setup(__props) {
 		const slots = useSlots();
-		const badgeStyles = tv({
-			slots: {
-				wrapper: "relative inline-block",
-				badge: "flex items-center justify-center text-xs font-medium tabular-nums absolute bg-transparent text-rui-text",
-				content: "flex items-center gap-1 px-1.5"
-			},
-			variants: {
-				color: {
-					default: { badge: "bg-rui-neutral-200 dark:bg-rui-neutral-700" },
-					primary: { badge: "bg-rui-primary-fill text-rui-primary-foreground" },
-					secondary: { badge: "bg-rui-secondary-fill text-rui-secondary-foreground" },
-					error: { badge: "bg-rui-error-fill text-rui-error-foreground" },
-					warning: { badge: "bg-rui-warning-fill text-rui-warning-foreground" },
-					info: { badge: "bg-rui-info-fill text-rui-info-foreground" },
-					success: { badge: "bg-rui-success-fill text-rui-success-foreground" }
-				},
-				size: {
-					sm: { badge: "min-h-4 min-w-4 text-caption-2 [--rui-icon-size:0.625rem]" },
-					md: { badge: "min-h-5 min-w-5 [--rui-icon-size:0.75rem]" },
-					lg: { badge: "min-h-6 min-w-6 [--rui-icon-size:0.875rem]" }
-				},
-				rounded: {
-					sm: { badge: "rounded-xs" },
-					md: { badge: "rounded-rui-control" },
-					lg: { badge: "rounded-rui-card" },
-					full: { badge: "rounded-full" }
-				},
-				dot: { true: { badge: "ring-2 ring-rui-surface" } },
-				iconOnly: {
-					true: { content: "px-0" },
-					false: {}
-				}
-			},
-			compoundVariants: [
-				{
-					dot: true,
-					color: "default",
-					class: { badge: "bg-rui-neutral-500 dark:bg-rui-neutral-400" }
-				},
-				{
-					dot: true,
-					color: "error",
-					class: { badge: "dark:bg-rui-error" }
-				},
-				{
-					dot: true,
-					color: "warning",
-					class: { badge: "dark:bg-rui-warning" }
-				},
-				{
-					dot: true,
-					color: "info",
-					class: { badge: "dark:bg-rui-info" }
-				},
-				{
-					dot: true,
-					color: "success",
-					class: { badge: "dark:bg-rui-success" }
-				},
-				{
-					dot: true,
-					size: "sm",
-					class: { badge: "min-w-2 min-h-2" }
-				},
-				{
-					dot: true,
-					size: "md",
-					class: { badge: "min-w-2.5 min-h-2.5" }
-				},
-				{
-					dot: true,
-					size: "lg",
-					class: { badge: "min-w-3 min-h-3" }
-				}
-			],
-			defaultVariants: {
-				color: "primary",
-				size: "md",
-				rounded: "full",
-				dot: false
-			}
-		});
 		const hasText = computed(() => !!__props.text || !!slots.badge);
 		const hasIconAndText = computed(() => (!!__props.icon || !!slots.icon) && get(hasText));
 		const ui = computed(() => badgeStyles({

package/dist/components/overlays/badge/RuiBadge.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiBadge.vue_vue_type_script_setup_true_lang.js","names":["_useSlots","_openBlock","_createElementBlock","_normalizeClass","_unref","_renderSlot","_createVNode","_Transition","_withCtx","_normalizeStyle","_createTextVNode","_toDisplayString","_createBlock","RuiIcon","_createCommentVNode"],"sources":["../../../../src/components/overlays/badge/RuiBadge.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { ContextColorsType } from '@/consts/colors';\nimport type { RuiIcons } from '@/icons';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport { BadgePlacement, BadgeRounded, BadgeSize } from '@/components/overlays/badge/badge-props';\nimport { tv } from '@/utils/tv';\n\ntype PosConfig = [left: number, right: string, edge: string, center: number];\n\nexport interface Props {\n  text?: string | null;\n  icon?: RuiIcons | null;\n  modelValue?: boolean;\n  dot?: boolean;\n  left?: boolean;\n  offsetX?: string | number;\n  offsetY?: string | number;\n  placement?: BadgePlacement;\n  size?: BadgeSize;\n  rounded?: BadgeRounded;\n  color?: 'default' | ContextColorsType;\n}\n\ndefineOptions({\n  name: 'RuiBadge',\n});\n\nconst {\n  text = null,\n  icon = null,\n  modelValue = true,\n  dot = false,\n  placement = BadgePlacement.top,\n  left = false,\n  size = BadgeSize.md,\n  rounded = BadgeRounded.full,\n  color = 'primary',\n  offsetX = 0,\n  offsetY = 0,\n} = defineProps<Props>();\n\nconst slots = defineSlots<{\n  default?: () => any;\n  badge?: () => any;\n  icon?: () => any;\n}>();\n\nconst badgeStyles = tv({\n  slots: {\n    wrapper: 'relative inline-block',\n    badge: 'flex items-center justify-center text-xs font-medium tabular-nums absolute bg-transparent text-rui-text',\n    content: 'flex items-center gap-1 px-1.5',\n  },\n  variants: {\n    // `-fill` is `main` in light and, for a status color, the deep `darker` in dark, where `main` is a text tone\n    color: {\n      default: { badge: 'bg-rui-neutral-200 dark:bg-rui-neutral-700' },\n      primary: { badge: 'bg-rui-primary-fill text-rui-primary-foreground' },\n      secondary: { badge: 'bg-rui-secondary-fill text-rui-secondary-foreground' },\n      error: { badge: 'bg-rui-error-fill text-rui-error-foreground' },\n      warning: { badge: 'bg-rui-warning-fill text-rui-warning-foreground' },\n      info: { badge: 'bg-rui-info-fill text-rui-info-foreground' },\n      success: { badge: 'bg-rui-success-fill text-rui-success-foreground' },\n    },\n    // the icon is 60% of the badge height, as the text is, rather than filling it\n    size: {\n      sm: { badge: 'min-h-4 min-w-4 text-caption-2 [--rui-icon-size:0.625rem]' },\n      md: { badge: 'min-h-5 min-w-5 [--rui-icon-size:0.75rem]' },\n      lg: { badge: 'min-h-6 min-w-6 [--rui-icon-size:0.875rem]' },\n    },\n    rounded: {\n      sm: { badge: 'rounded-xs' },\n      md: { badge: 'rounded-rui-control' },\n      lg: { badge: 'rounded-rui-card' },\n      full: { badge: 'rounded-full' },\n    },\n    // A surface ring keeps a dot apart from whatever it overlaps, such as an avatar edge\n    dot: {\n      true: { badge: 'ring-2 ring-rui-surface' },\n    },\n    // an icon alone needs no side padding, so the badge stays as wide as it is tall\n    iconOnly: {\n      true: { content: 'px-0' },\n      false: {},\n    },\n  },\n  compoundVariants: [\n    // the default dot is a step lighter in dark, where neutral-500 nearly vanished against a dark control\n    { dot: true, color: 'default', class: { badge: 'bg-rui-neutral-500 dark:bg-rui-neutral-400' } },\n    // A dot carries no text, so it keeps the brighter `main`, which reads better as a small mark on a dark page\n    { dot: true, color: 'error', class: { badge: 'dark:bg-rui-error' } },\n    { dot: true, color: 'warning', class: { badge: 'dark:bg-rui-warning' } },\n    { dot: true, color: 'info', class: { badge: 'dark:bg-rui-info' } },\n    { dot: true, color: 'success', class: { badge: 'dark:bg-rui-success' } },\n\n    // Dot sizes: 8, 10 and 12px, since half of a dot sits off the corner and reads smaller than it is\n    { dot: true, size: 'sm', class: { badge: 'min-w-2 min-h-2' } },\n    { dot: true, size: 'md', class: { badge: 'min-w-2.5 min-h-2.5' } },\n    { dot: true, size: 'lg', class: { badge: 'min-w-3 min-h-3' } },\n  ],\n  defaultVariants: {\n    color: 'primary',\n    size: 'md',\n    rounded: 'full',\n    dot: false,\n  },\n});\n\nconst hasText = computed<boolean>(() => !!text || !!slots.badge);\n\nconst hasIconAndText = computed<boolean>(() => (!!icon || !!slots.icon) && get(hasText));\n\nconst ui = computed<ReturnType<typeof badgeStyles>>(() => badgeStyles({\n  color,\n  size,\n  rounded,\n  dot,\n  iconOnly: (!!icon || !!slots.icon) && !get(hasText),\n}));\n\n/** Dot positions as [leftOffset, rightBase, edgeBase, centerOffset]; a dot's center sits on the corner, so each size moves by half its diameter. */\nconst DOT_POS: Record<BadgeSize, PosConfig> = {\n  sm: [-0.25, '100% - 0.25rem', '100% - 0.25rem', 0.25],\n  md: [-0.3125, '100% - 0.3125rem', '100% - 0.3125rem', 0.3125],\n  lg: [-0.375, '100% - 0.375rem', '100% - 0.375rem', 0.375],\n};\nconst BADGE_POS: Record<BadgeSize, PosConfig> = {\n  sm: [-0.85, '100% - 0.375rem', '100% - 0.375rem', 0.55],\n  md: [-0.95, '100% - 0.5rem', '100% - 0.5rem', 0.65],\n  lg: [-1.05, '100% - 0.5rem', '100% - 0.5rem', 0.75],\n};\n\nconst positionStyle = computed<Record<string, string>>(() => {\n  const ox = Number(offsetX) * 0.0625;\n  const oy = Number(offsetY) * 0.0625;\n  const [l, r, edge, center] = dot ? DOT_POS[size] : BADGE_POS[size];\n\n  const horizontal = `calc(${left ? `${l}rem` : r} + ${ox}rem)`;\n  const vertical = placement === 'center'\n    ? `calc(50% - ${center}rem - ${oy}rem)`\n    : `calc(${edge} - ${oy}rem)`;\n\n  return {\n    left: horizontal,\n    [placement === 'top' ? 'bottom' : 'top']: vertical,\n  };\n});\n</script>\n\n<template>\n  <div :class=\"ui.wrapper()\">\n    <slot />\n    <!-- under reduced motion the badge appears and leaves at full size, with no scale -->\n    <Transition\n      appear\n      enter-active-class=\"transition-[scale] ease-out duration-200 motion-reduce:transition-none\"\n      enter-from-class=\"scale-0 motion-reduce:scale-100\"\n      enter-to-class=\"scale-100\"\n      leave-active-class=\"transition-[scale] ease-in duration-150 motion-reduce:transition-none\"\n      leave-from-class=\"scale-100\"\n      leave-to-class=\"scale-0 motion-reduce:scale-100\"\n    >\n      <div\n        v-if=\"modelValue\"\n        :class=\"ui.badge()\"\n        :style=\"positionStyle\"\n        :data-placement=\"placement\"\n        :data-dot=\"dot || undefined\"\n        :data-left=\"left || undefined\"\n        aria-atomic=\"true\"\n        aria-live=\"polite\"\n        role=\"status\"\n      >\n        <!-- no aria-label: on a live region it replaced the count, so a reader announced \"Badge\" -->\n        <span\n          v-if=\"!dot\"\n          :class=\"ui.content({ class: hasIconAndText ? 'px-2' : undefined })\"\n        >\n          <slot name=\"badge\">\n            {{ text }}\n          </slot>\n          <slot name=\"icon\">\n            <RuiIcon\n              v-if=\"icon\"\n              :name=\"icon\"\n            />\n          </slot>\n        </span>\n      </div>\n    </Transition>\n  </div>\n</template>\n"],"mappings":"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"}
+{"version":3,"file":"RuiBadge.vue_vue_type_script_setup_true_lang.js","names":["_useSlots","_openBlock","_createElementBlock","_normalizeClass","_unref","_renderSlot","_createVNode","_Transition","_withCtx","_normalizeStyle","_createTextVNode","_toDisplayString","_createBlock","RuiIcon","_createCommentVNode"],"sources":["../../../../src/components/overlays/badge/RuiBadge.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { ContextColorsType } from '@/consts/colors';\nimport type { RuiIcons } from '@/icons';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport { BadgePlacement, BadgeRounded, BadgeSize } from '@/components/overlays/badge/badge-props';\nimport { badgeStyles } from './badge-styles';\n\ntype PosConfig = [left: number, right: string, edge: string, center: number];\n\nexport interface Props {\n  text?: string | null;\n  icon?: RuiIcons | null;\n  modelValue?: boolean;\n  dot?: boolean;\n  left?: boolean;\n  offsetX?: string | number;\n  offsetY?: string | number;\n  placement?: BadgePlacement;\n  size?: BadgeSize;\n  rounded?: BadgeRounded;\n  color?: 'default' | ContextColorsType;\n}\n\ndefineOptions({\n  name: 'RuiBadge',\n});\n\nconst {\n  text = null,\n  icon = null,\n  modelValue = true,\n  dot = false,\n  placement = BadgePlacement.top,\n  left = false,\n  size = BadgeSize.md,\n  rounded = BadgeRounded.full,\n  color = 'primary',\n  offsetX = 0,\n  offsetY = 0,\n} = defineProps<Props>();\n\nconst slots = defineSlots<{\n  default?: () => any;\n  badge?: () => any;\n  icon?: () => any;\n}>();\n\nconst hasText = computed<boolean>(() => !!text || !!slots.badge);\n\nconst hasIconAndText = computed<boolean>(() => (!!icon || !!slots.icon) && get(hasText));\n\nconst ui = computed<ReturnType<typeof badgeStyles>>(() => badgeStyles({\n  color,\n  size,\n  rounded,\n  dot,\n  iconOnly: (!!icon || !!slots.icon) && !get(hasText),\n}));\n\n/** Dot positions as [leftOffset, rightBase, edgeBase, centerOffset]; a dot's center sits on the corner, so each size moves by half its diameter. */\nconst DOT_POS: Record<BadgeSize, PosConfig> = {\n  sm: [-0.25, '100% - 0.25rem', '100% - 0.25rem', 0.25],\n  md: [-0.3125, '100% - 0.3125rem', '100% - 0.3125rem', 0.3125],\n  lg: [-0.375, '100% - 0.375rem', '100% - 0.375rem', 0.375],\n};\nconst BADGE_POS: Record<BadgeSize, PosConfig> = {\n  sm: [-0.85, '100% - 0.375rem', '100% - 0.375rem', 0.55],\n  md: [-0.95, '100% - 0.5rem', '100% - 0.5rem', 0.65],\n  lg: [-1.05, '100% - 0.5rem', '100% - 0.5rem', 0.75],\n};\n\nconst positionStyle = computed<Record<string, string>>(() => {\n  const ox = Number(offsetX) * 0.0625;\n  const oy = Number(offsetY) * 0.0625;\n  const [l, r, edge, center] = dot ? DOT_POS[size] : BADGE_POS[size];\n\n  const horizontal = `calc(${left ? `${l}rem` : r} + ${ox}rem)`;\n  const vertical = placement === 'center'\n    ? `calc(50% - ${center}rem - ${oy}rem)`\n    : `calc(${edge} - ${oy}rem)`;\n\n  return {\n    left: horizontal,\n    [placement === 'top' ? 'bottom' : 'top']: vertical,\n  };\n});\n</script>\n\n<template>\n  <div :class=\"ui.wrapper()\">\n    <slot />\n    <!-- under reduced motion the badge appears and leaves at full size, with no scale -->\n    <Transition\n      appear\n      enter-active-class=\"transition-[scale] ease-out duration-200 motion-reduce:transition-none\"\n      enter-from-class=\"scale-0 motion-reduce:scale-100\"\n      enter-to-class=\"scale-100\"\n      leave-active-class=\"transition-[scale] ease-in duration-150 motion-reduce:transition-none\"\n      leave-from-class=\"scale-100\"\n      leave-to-class=\"scale-0 motion-reduce:scale-100\"\n    >\n      <div\n        v-if=\"modelValue\"\n        :class=\"ui.badge()\"\n        :style=\"positionStyle\"\n        :data-placement=\"placement\"\n        :data-dot=\"dot || undefined\"\n        :data-left=\"left || undefined\"\n        aria-atomic=\"true\"\n        aria-live=\"polite\"\n        role=\"status\"\n      >\n        <!-- no aria-label: on a live region it replaced the count, so a reader announced \"Badge\" -->\n        <span\n          v-if=\"!dot\"\n          :class=\"ui.content({ class: hasIconAndText ? 'px-2' : undefined })\"\n        >\n          <slot name=\"badge\">\n            {{ text }}\n          </slot>\n          <slot name=\"icon\">\n            <RuiIcon\n              v-if=\"icon\"\n              :name=\"icon\"\n            />\n          </slot>\n        </span>\n      </div>\n    </Transition>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAyCA,MAAM,QAAQA,SAAA;EAMd,MAAM,UAAU,eAAwB,CAAC,CAAC,QAAA,QAAQ,CAAC,CAAC,MAAM,KAAK;EAE/D,MAAM,iBAAiB,gBAAyB,CAAC,CAAC,QAAA,QAAQ,CAAC,CAAC,MAAM,SAAS,IAAI,OAAO,CAAC;EAEvF,MAAM,KAAK,eAA+C,YAAY;GACpE,OAAI,QAAA;GACJ,MAAG,QAAA;GACH,SAAM,QAAA;GACN,KAAE,QAAA;GACF,WAAW,CAAC,CAAC,QAAA,QAAQ,CAAC,CAAC,MAAM,SAAS,CAAC,IAAI,OAAO;EACpD,CAAC,CAAC;;EAGF,MAAM,UAAwC;GAC5C,IAAI;IAAC;IAAO;IAAkB;IAAkB;GAAI;GACpD,IAAI;IAAC;IAAS;IAAoB;IAAoB;GAAM;GAC5D,IAAI;IAAC;IAAQ;IAAmB;IAAmB;GAAK;EAC1D;EACA,MAAM,YAA0C;GAC9C,IAAI;IAAC;IAAO;IAAmB;IAAmB;GAAI;GACtD,IAAI;IAAC;IAAO;IAAiB;IAAiB;GAAI;GAClD,IAAI;IAAC;IAAO;IAAiB;IAAiB;GAAI;EACpD;EAEA,MAAM,gBAAgB,eAAuC;GAC3D,MAAM,KAAK,OAAO,QAAA,OAAO,IAAI;GAC7B,MAAM,KAAK,OAAO,QAAA,OAAO,IAAI;GAC7B,MAAM,CAAC,GAAG,GAAG,MAAM,UAAU,QAAA,MAAM,QAAQ,QAAA,QAAQ,UAAU,QAAA;GAE7D,MAAM,aAAa,QAAQ,QAAA,OAAO,GAAG,EAAE,OAAO,EAAE,KAAK,GAAG;GACxD,MAAM,WAAW,QAAA,cAAc,WAC3B,cAAc,OAAO,QAAQ,GAAG,QAChC,QAAQ,KAAK,KAAK,GAAG;GAEzB,OAAO;IACL,MAAM;KACL,QAAA,cAAc,QAAQ,WAAW,QAAQ;GAC5C;EACF,CAAC;;GAIC,OAAAC,UAAA,GAAAC,mBAwCM,OAAA,EAxCA,OAAKC,eAAEC,MAAA,EAAA,CAAE,CAAC,QAAO,CAAA,EAAA,GAAA,CACrBC,WAAQ,KAAA,QAAA,SAAA,GAERC,YAoCaC,YAAA;IAnCX,QAAA;IACA,sBAAmB;IACnB,oBAAiB;IACjB,kBAAe;IACf,sBAAmB;IACnB,oBAAiB;IACjB,kBAAe;;IAEf,SAAAC,cA0BM,CAzBE,QAAA,cADRP,UAAA,GAAAC,mBA0BM,OAAA;;KAxBH,OAAKC,eAAEC,MAAA,EAAA,CAAE,CAAC,MAAK,CAAA;KACf,OAAKK,eAAEL,MAAA,aAAA,CAAa;KACpB,kBAAgB,QAAA;KAChB,YAAU,QAAA,OAAO,KAAA;KACjB,aAAW,QAAA,QAAQ,KAAA;KACpB,eAAY;KACZ,aAAU;KACV,MAAK;IAII,GAAA,CAAA,CAAA,QAAA,OADTH,UAAA,GAAAC,mBAaO,QAAA;;KAXJ,OAAKC,eAAEC,MAAA,EAAA,CAAE,CAAC,QAAO,EAAA,OAAUA,MAAA,cAAA,IAAc,SAAY,KAAA,EAAS,CAAA,CAAA;IAE/DC,GAAAA,CAAAA,WAEO,KAAA,QAAA,SAAA,CAAA,SAAA,CADFK,gBAAAC,gBAAA,QAAA,IAAI,GAAA,CAAA,CAAA,CAAA,GAETN,WAKO,KAAA,QAAA,QAAA,CAAA,SAAA,CAHG,QAAA,QADRJ,UAAA,GAAAW,YAGEC,iBAAA;;KADC,MAAM,QAAA"}

package/dist/components/overlays/badge/badge-styles.d.ts

@@ -0,0 +1,193 @@
+export declare const badgeStyles: import("tailwind-variants").TVReturnType<{
+    color: {
+        default: {
+            badge: string;
+        };
+        primary: {
+            badge: string;
+        };
+        secondary: {
+            badge: string;
+        };
+        error: {
+            badge: string;
+        };
+        warning: {
+            badge: string;
+        };
+        info: {
+            badge: string;
+        };
+        success: {
+            badge: string;
+        };
+    };
+    size: {
+        sm: {
+            badge: string;
+        };
+        md: {
+            badge: string;
+        };
+        lg: {
+            badge: string;
+        };
+    };
+    rounded: {
+        sm: {
+            badge: string;
+        };
+        md: {
+            badge: string;
+        };
+        lg: {
+            badge: string;
+        };
+        full: {
+            badge: string;
+        };
+    };
+    dot: {
+        true: {
+            badge: string;
+        };
+    };
+    iconOnly: {
+        true: {
+            content: string;
+        };
+        false: {};
+    };
+}, {
+    wrapper: string;
+    badge: string;
+    content: string;
+}, undefined, {
+    color: {
+        default: {
+            badge: string;
+        };
+        primary: {
+            badge: string;
+        };
+        secondary: {
+            badge: string;
+        };
+        error: {
+            badge: string;
+        };
+        warning: {
+            badge: string;
+        };
+        info: {
+            badge: string;
+        };
+        success: {
+            badge: string;
+        };
+    };
+    size: {
+        sm: {
+            badge: string;
+        };
+        md: {
+            badge: string;
+        };
+        lg: {
+            badge: string;
+        };
+    };
+    rounded: {
+        sm: {
+            badge: string;
+        };
+        md: {
+            badge: string;
+        };
+        lg: {
+            badge: string;
+        };
+        full: {
+            badge: string;
+        };
+    };
+    dot: {
+        true: {
+            badge: string;
+        };
+    };
+    iconOnly: {
+        true: {
+            content: string;
+        };
+        false: {};
+    };
+}, {
+    wrapper: string;
+    badge: string;
+    content: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+    color: {
+        default: {
+            badge: string;
+        };
+        primary: {
+            badge: string;
+        };
+        secondary: {
+            badge: string;
+        };
+        error: {
+            badge: string;
+        };
+        warning: {
+            badge: string;
+        };
+        info: {
+            badge: string;
+        };
+        success: {
+            badge: string;
+        };
+    };
+    size: {
+        sm: {
+            badge: string;
+        };
+        md: {
+            badge: string;
+        };
+        lg: {
+            badge: string;
+        };
+    };
+    rounded: {
+        sm: {
+            badge: string;
+        };
+        md: {
+            badge: string;
+        };
+        lg: {
+            badge: string;
+        };
+        full: {
+            badge: string;
+        };
+    };
+    dot: {
+        true: {
+            badge: string;
+        };
+    };
+    iconOnly: {
+        true: {
+            content: string;
+        };
+        false: {};
+    };
+}, {
+    wrapper: string;
+    badge: string;
+    content: string;
+}>>;

package/dist/components/overlays/badge/badge-styles.js

@@ -0,0 +1,88 @@
+import { tv } from "../../../utils/tv.js";
+//#region src/components/overlays/badge/badge-styles.ts
+var badgeStyles = tv({
+	slots: {
+		wrapper: "relative inline-block",
+		badge: "flex items-center justify-center text-xs font-medium tabular-nums absolute bg-transparent text-rui-text",
+		content: "flex items-center gap-1 px-1.5"
+	},
+	variants: {
+		color: {
+			default: { badge: "bg-rui-neutral-200 dark:bg-rui-neutral-700" },
+			primary: { badge: "bg-rui-primary-fill text-rui-primary-foreground" },
+			secondary: { badge: "bg-rui-secondary-fill text-rui-secondary-foreground" },
+			error: { badge: "bg-rui-error-fill text-rui-error-foreground" },
+			warning: { badge: "bg-rui-warning-fill text-rui-warning-foreground" },
+			info: { badge: "bg-rui-info-fill text-rui-info-foreground" },
+			success: { badge: "bg-rui-success-fill text-rui-success-foreground" }
+		},
+		size: {
+			sm: { badge: "min-h-4 min-w-4 text-caption-2 [--rui-icon-size:0.625rem]" },
+			md: { badge: "min-h-5 min-w-5 [--rui-icon-size:0.75rem]" },
+			lg: { badge: "min-h-6 min-w-6 [--rui-icon-size:0.875rem]" }
+		},
+		rounded: {
+			sm: { badge: "rounded-xs" },
+			md: { badge: "rounded-rui-control" },
+			lg: { badge: "rounded-rui-card" },
+			full: { badge: "rounded-full" }
+		},
+		dot: { true: { badge: "ring-2 ring-rui-surface" } },
+		iconOnly: {
+			true: { content: "px-0" },
+			false: {}
+		}
+	},
+	compoundVariants: [
+		{
+			dot: true,
+			color: "default",
+			class: { badge: "bg-rui-neutral-500 dark:bg-rui-neutral-400" }
+		},
+		{
+			dot: true,
+			color: "error",
+			class: { badge: "dark:bg-rui-error" }
+		},
+		{
+			dot: true,
+			color: "warning",
+			class: { badge: "dark:bg-rui-warning" }
+		},
+		{
+			dot: true,
+			color: "info",
+			class: { badge: "dark:bg-rui-info" }
+		},
+		{
+			dot: true,
+			color: "success",
+			class: { badge: "dark:bg-rui-success" }
+		},
+		{
+			dot: true,
+			size: "sm",
+			class: { badge: "min-w-2 min-h-2" }
+		},
+		{
+			dot: true,
+			size: "md",
+			class: { badge: "min-w-2.5 min-h-2.5" }
+		},
+		{
+			dot: true,
+			size: "lg",
+			class: { badge: "min-w-3 min-h-3" }
+		}
+	],
+	defaultVariants: {
+		color: "primary",
+		size: "md",
+		rounded: "full",
+		dot: false
+	}
+});
+//#endregion
+export { badgeStyles };
+
+//# sourceMappingURL=badge-styles.js.map

package/dist/components/overlays/badge/badge-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"badge-styles.js","names":[],"sources":["../../../../src/components/overlays/badge/badge-styles.ts"],"sourcesContent":["import { tv } from '@/utils/tv';\n\nexport const badgeStyles = tv({\n  slots: {\n    wrapper: 'relative inline-block',\n    badge: 'flex items-center justify-center text-xs font-medium tabular-nums absolute bg-transparent text-rui-text',\n    content: 'flex items-center gap-1 px-1.5',\n  },\n  variants: {\n    // `-fill` is `main` in light and, for a status color, the deep `darker` in dark, where `main` is a text tone\n    color: {\n      default: { badge: 'bg-rui-neutral-200 dark:bg-rui-neutral-700' },\n      primary: { badge: 'bg-rui-primary-fill text-rui-primary-foreground' },\n      secondary: { badge: 'bg-rui-secondary-fill text-rui-secondary-foreground' },\n      error: { badge: 'bg-rui-error-fill text-rui-error-foreground' },\n      warning: { badge: 'bg-rui-warning-fill text-rui-warning-foreground' },\n      info: { badge: 'bg-rui-info-fill text-rui-info-foreground' },\n      success: { badge: 'bg-rui-success-fill text-rui-success-foreground' },\n    },\n    // the icon is 60% of the badge height, as the text is, rather than filling it\n    size: {\n      sm: { badge: 'min-h-4 min-w-4 text-caption-2 [--rui-icon-size:0.625rem]' },\n      md: { badge: 'min-h-5 min-w-5 [--rui-icon-size:0.75rem]' },\n      lg: { badge: 'min-h-6 min-w-6 [--rui-icon-size:0.875rem]' },\n    },\n    rounded: {\n      sm: { badge: 'rounded-xs' },\n      md: { badge: 'rounded-rui-control' },\n      lg: { badge: 'rounded-rui-card' },\n      full: { badge: 'rounded-full' },\n    },\n    // A surface ring keeps a dot apart from whatever it overlaps, such as an avatar edge\n    dot: {\n      true: { badge: 'ring-2 ring-rui-surface' },\n    },\n    // an icon alone needs no side padding, so the badge stays as wide as it is tall\n    iconOnly: {\n      true: { content: 'px-0' },\n      false: {},\n    },\n  },\n  compoundVariants: [\n    // the default dot is a step lighter in dark, where neutral-500 nearly vanished against a dark control\n    { dot: true, color: 'default', class: { badge: 'bg-rui-neutral-500 dark:bg-rui-neutral-400' } },\n    // A dot carries no text, so it keeps the brighter `main`, which reads better as a small mark on a dark page\n    { dot: true, color: 'error', class: { badge: 'dark:bg-rui-error' } },\n    { dot: true, color: 'warning', class: { badge: 'dark:bg-rui-warning' } },\n    { dot: true, color: 'info', class: { badge: 'dark:bg-rui-info' } },\n    { dot: true, color: 'success', class: { badge: 'dark:bg-rui-success' } },\n\n    // Dot sizes: 8, 10 and 12px, since half of a dot sits off the corner and reads smaller than it is\n    { dot: true, size: 'sm', class: { badge: 'min-w-2 min-h-2' } },\n    { dot: true, size: 'md', class: { badge: 'min-w-2.5 min-h-2.5' } },\n    { dot: true, size: 'lg', class: { badge: 'min-w-3 min-h-3' } },\n  ],\n  defaultVariants: {\n    color: 'primary',\n    size: 'md',\n    rounded: 'full',\n    dot: false,\n  },\n});\n"],"mappings":";;AAEA,IAAa,cAAc,GAAG;CAC5B,OAAO;EACL,SAAS;EACT,OAAO;EACP,SAAS;CACX;CACA,UAAU;EAER,OAAO;GACL,SAAS,EAAE,OAAO,6CAA6C;GAC/D,SAAS,EAAE,OAAO,kDAAkD;GACpE,WAAW,EAAE,OAAO,sDAAsD;GAC1E,OAAO,EAAE,OAAO,8CAA8C;GAC9D,SAAS,EAAE,OAAO,kDAAkD;GACpE,MAAM,EAAE,OAAO,4CAA4C;GAC3D,SAAS,EAAE,OAAO,kDAAkD;EACtE;EAEA,MAAM;GACJ,IAAI,EAAE,OAAO,4DAA4D;GACzE,IAAI,EAAE,OAAO,4CAA4C;GACzD,IAAI,EAAE,OAAO,6CAA6C;EAC5D;EACA,SAAS;GACP,IAAI,EAAE,OAAO,aAAa;GAC1B,IAAI,EAAE,OAAO,sBAAsB;GACnC,IAAI,EAAE,OAAO,mBAAmB;GAChC,MAAM,EAAE,OAAO,eAAe;EAChC;EAEA,KAAK,EACH,MAAM,EAAE,OAAO,0BAA0B,EAC3C;EAEA,UAAU;GACR,MAAM,EAAE,SAAS,OAAO;GACxB,OAAO,CAAC;EACV;CACF;CACA,kBAAkB;EAEhB;GAAE,KAAK;GAAM,OAAO;GAAW,OAAO,EAAE,OAAO,6CAA6C;EAAE;EAE9F;GAAE,KAAK;GAAM,OAAO;GAAS,OAAO,EAAE,OAAO,oBAAoB;EAAE;EACnE;GAAE,KAAK;GAAM,OAAO;GAAW,OAAO,EAAE,OAAO,sBAAsB;EAAE;EACvE;GAAE,KAAK;GAAM,OAAO;GAAQ,OAAO,EAAE,OAAO,mBAAmB;EAAE;EACjE;GAAE,KAAK;GAAM,OAAO;GAAW,OAAO,EAAE,OAAO,sBAAsB;EAAE;EAGvE;GAAE,KAAK;GAAM,MAAM;GAAM,OAAO,EAAE,OAAO,kBAAkB;EAAE;EAC7D;GAAE,KAAK;GAAM,MAAM;GAAM,OAAO,EAAE,OAAO,sBAAsB;EAAE;EACjE;GAAE,KAAK;GAAM,MAAM;GAAM,OAAO,EAAE,OAAO,kBAAkB;EAAE;CAC/D;CACA,iBAAiB;EACf,OAAO;EACP,MAAM;EACN,SAAS;EACT,KAAK;CACP;AACF,CAAC"}

package/dist/components/overlays/dialog/RuiDialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiDialog.js","names":["_sfc_main"],"sources":["../../../../src/components/overlays/dialog/RuiDialog.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { DialogSize } from '@/consts/tokens';\nimport type { VueClassValue } from '@/types/class-value';\nimport { ButtonGroupBoundary } from '@/components/buttons/button-group/button-group-context';\nimport { useDismissableOverlay } from '@/composables/overlay-stack';\nimport { useTimeoutManager } from '@/composables/timeout-manager';\nimport { getNonRootAttrs, getRootAttrs, transformPropsUnit } from '@/utils/helpers';\nimport { cn, tv } from '@/utils/tv';\n\nexport interface RuiDialogClassNames {\n  root?: VueClassValue;\n  content?: VueClassValue;\n}\n\nexport interface DialogProps {\n  persistent?: boolean;\n  width?: string | number;\n  maxWidth?: string | number;\n  /** A preset max width, `--rui-dialog-<size>`; an explicit `maxWidth` wins */\n  size?: DialogSize;\n  bottomSheet?: boolean;\n  classNames?: RuiDialogClassNames;\n  zIndex?: string | number;\n  ariaLabel?: string;\n}\n\ndefineOptions({\n  name: 'RuiDialog',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<boolean>({ default: false });\n\nconst {\n  persistent = false,\n  width = '98%',\n  maxWidth,\n  size,\n  bottomSheet = false,\n  classNames,\n  zIndex = 'var(--rui-z-dialog)',\n  ariaLabel,\n} = defineProps<DialogProps>();\n\nconst emit = defineEmits<{\n  'closed': [];\n  'click:outside': [];\n  'click:esc': [];\n  /**\n   * The overlay stack asked this dialog to go, which is what a back gesture\n   * reaches it as. Closes unless persistent, like escape does, so a dialog that\n   * has to ask before discarding should bind `persistent` and answer here.\n   */\n  'dismiss': [];\n}>();\n\ndefineSlots<{\n  activator?: (props: { attrs: { onClick: () => void }; isOpen: boolean }) => any;\n  default?: (props: { isOpen: boolean; close: () => void }) => any;\n}>();\n\nconst transitioning = ref<boolean>(false);\nconst contentRef = useTemplateRef<HTMLDivElement>('contentRef');\n\nconst leaveTimeout = useTimeoutManager();\n\nconst alive = computed<boolean>(() => get(modelValue) || get(transitioning));\n\nconst style = computed<{ width: string | undefined; maxWidth: string | undefined }>(() => ({\n  width: transformPropsUnit(width),\n  maxWidth: transformPropsUnit(maxWidth) ?? (size ? `var(--rui-dialog-${size})` : undefined),\n}));\n\nconst dialog = tv({\n  slots: {\n    root: 'fixed inset-0',\n    overlay: 'absolute inset-0 backdrop-blur-sm bg-rui-neutral-950/40 dark:bg-black/60',\n    content: 'absolute left-1/2 bottom-0 -translate-x-1/2 outline-hidden overflow-y-auto max-h-(--rui-dialog-max-height)',\n  },\n  variants: {\n    /*\n     * The corners match a RuiCard's, the usual content, which the box clips while it scrolls.\n     * A sheet sits on the screen's bottom edge, so its content's bottom corners are squared.\n     */\n    bottomSheet: {\n      true: { content: 'rounded-t-rui-card shadow-rui-drawer *:rounded-b-none' },\n      false: { content: 'top-1/2 -translate-y-1/2 bottom-auto rounded-rui-card shadow-rui-menu' },\n    },\n  },\n  defaultVariants: { bottomSheet: false },\n});\n\nconst ui = computed<ReturnType<typeof dialog>>(() => dialog({ bottomSheet }));\n\nconst dialogAttrs: { onClick: () => void } = {\n  onClick: toggle,\n};\n\nconst contentTransition = computed<Record<string, string>>(() => {\n  if (!bottomSheet) {\n    return {\n      enterFromClass: 'opacity-0 scale-95',\n      enterActiveClass: 'transition-all ease-out duration-200',\n      enterToClass: 'opacity-100 scale-100',\n      leaveFromClass: 'opacity-100 scale-100',\n      leaveActiveClass: 'transition-all ease-in duration-150',\n      leaveToClass: 'opacity-0 scale-95',\n    };\n  }\n\n  return {\n    enterFromClass: 'translate-y-full',\n    enterActiveClass: 'transition-transform ease-out duration-300',\n    enterToClass: 'translate-y-0',\n    leaveFromClass: 'translate-y-0',\n    leaveActiveClass: 'transition-transform ease-in duration-200',\n    leaveToClass: 'translate-y-full',\n  };\n});\n\nfunction toggle(): void {\n  set(modelValue, !get(modelValue));\n}\n\nfunction close(): void {\n  set(modelValue, false);\n}\n\n/**\n * Closes on Escape unless persistent, and reports the press as `click:esc`.\n *\n * @remarks\n * An Escape that arrives while an IME is composing belongs to the IME, which\n * cancels the candidate with it. The dialog leaves that key alone entirely: no\n * close, no `click:esc`, and no `stopPropagation`, so a search field inside the\n * dialog does not lose the dialog mid-word.\n */\nfunction onEscKeydown(event: KeyboardEvent): void {\n  if (event.isComposing)\n    return;\n\n  event.stopPropagation();\n  if (!persistent) {\n    close();\n  }\n  emit('click:esc');\n}\n\nfunction onClickOutside(): void {\n  if (!persistent) {\n    close();\n  }\n  emit('click:outside');\n}\n\nfunction onDismiss(): void {\n  if (!persistent) {\n    close();\n  }\n  emit('dismiss');\n}\n\n/**\n * Registration follows `modelValue` alone, never `persistent`: a dialog that\n * turns persistent partway through its life has to stay in the stack and refuse\n * in `onDismiss`, or the gesture starts passing through exactly once there is\n * work to lose. A dialog playing its leave transition is already on its way out\n * and does not hold the stack.\n */\nuseDismissableOverlay(modelValue, onDismiss);\n\nfunction onLeaveComplete(): void {\n  leaveTimeout.clear();\n  if (get(transitioning)) {\n    set(transitioning, false);\n    emit('closed');\n  }\n}\n\nwatch(modelValue, (value) => {\n  if (!value) {\n    set(transitioning, true);\n    // Safety fallback if transitionend is not detected\n    leaveTimeout.create(onLeaveComplete, 400);\n  }\n});\n\nwatch(contentRef, (ref) => {\n  if (ref) {\n    nextTick(() => ref.focus());\n  }\n  else {\n    onLeaveComplete();\n  }\n});\n</script>\n\n<template>\n  <div v-bind=\"getRootAttrs($attrs)\">\n    <slot\n      name=\"activator\"\n      v-bind=\"{ attrs: dialogAttrs, isOpen: modelValue }\"\n    />\n    <Teleport to=\"body\">\n      <div\n        v-if=\"alive\"\n        :class=\"ui.root({ class: cn(classNames?.root) })\"\n        :style=\"{ zIndex }\"\n        role=\"dialog\"\n        aria-modal=\"true\"\n        :aria-label=\"ariaLabel\"\n        tabindex=\"0\"\n        v-bind=\"getNonRootAttrs($attrs)\"\n        @keydown.esc=\"onEscKeydown($event)\"\n      >\n        <Transition\n          enter-from-class=\"opacity-0\"\n          enter-active-class=\"transition-opacity ease-out duration-200\"\n          enter-to-class=\"opacity-100\"\n          leave-from-class=\"opacity-100\"\n          leave-active-class=\"transition-opacity ease-in duration-150\"\n          leave-to-class=\"opacity-0\"\n        >\n          <div\n            v-if=\"modelValue\"\n            data-id=\"overlay\"\n            :class=\"ui.overlay()\"\n            @click.stop=\"onClickOutside()\"\n          />\n        </Transition>\n        <Transition\n          v-bind=\"contentTransition\"\n          @after-leave=\"onLeaveComplete()\"\n        >\n          <div\n            v-if=\"modelValue\"\n            ref=\"contentRef\"\n            data-id=\"content\"\n            :style=\"style\"\n            tabindex=\"0\"\n            :data-bottom-sheet=\"bottomSheet || undefined\"\n            :class=\"ui.content({ class: cn(classNames?.content) })\"\n          >\n            <ButtonGroupBoundary>\n              <slot v-bind=\"{ isOpen: modelValue, close }\" />\n            </ButtonGroupBoundary>\n          </div>\n        </Transition>\n      </div>\n    </Teleport>\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"RuiDialog.js","names":["_sfc_main"],"sources":["../../../../src/components/overlays/dialog/RuiDialog.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { DialogSize } from '@/consts/tokens';\nimport type { VueClassValue } from '@/types/class-value';\nimport { ButtonGroupBoundary } from '@/components/buttons/button-group/button-group-context';\nimport { useDismissableOverlay } from '@/composables/overlay-stack';\nimport { useTimeoutManager } from '@/composables/timeout-manager';\nimport { getNonRootAttrs, getRootAttrs, transformPropsUnit } from '@/utils/helpers';\nimport { cn } from '@/utils/tv';\nimport { dialogStyles } from './dialog-styles';\n\nexport interface RuiDialogClassNames {\n  root?: VueClassValue;\n  content?: VueClassValue;\n}\n\nexport interface DialogProps {\n  persistent?: boolean;\n  width?: string | number;\n  maxWidth?: string | number;\n  /** A preset max width, `--rui-dialog-<size>`; an explicit `maxWidth` wins */\n  size?: DialogSize;\n  bottomSheet?: boolean;\n  classNames?: RuiDialogClassNames;\n  zIndex?: string | number;\n  ariaLabel?: string;\n}\n\ndefineOptions({\n  name: 'RuiDialog',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<boolean>({ default: false });\n\nconst {\n  persistent = false,\n  width = '98%',\n  maxWidth,\n  size,\n  bottomSheet = false,\n  classNames,\n  zIndex = 'var(--rui-z-dialog)',\n  ariaLabel,\n} = defineProps<DialogProps>();\n\nconst emit = defineEmits<{\n  'closed': [];\n  'click:outside': [];\n  'click:esc': [];\n  /**\n   * The overlay stack asked this dialog to go, which is what a back gesture\n   * reaches it as. Closes unless persistent, like escape does, so a dialog that\n   * has to ask before discarding should bind `persistent` and answer here.\n   */\n  'dismiss': [];\n}>();\n\ndefineSlots<{\n  activator?: (props: { attrs: { onClick: () => void }; isOpen: boolean }) => any;\n  default?: (props: { isOpen: boolean; close: () => void }) => any;\n}>();\n\nconst transitioning = ref<boolean>(false);\nconst contentRef = useTemplateRef<HTMLDivElement>('contentRef');\n\nconst leaveTimeout = useTimeoutManager();\n\nconst alive = computed<boolean>(() => get(modelValue) || get(transitioning));\n\nconst style = computed<{ width: string | undefined; maxWidth: string | undefined }>(() => ({\n  width: transformPropsUnit(width),\n  maxWidth: transformPropsUnit(maxWidth) ?? (size ? `var(--rui-dialog-${size})` : undefined),\n}));\n\nconst ui = computed<ReturnType<typeof dialogStyles>>(() => dialogStyles({ bottomSheet }));\n\nconst dialogAttrs: { onClick: () => void } = {\n  onClick: toggle,\n};\n\nconst contentTransition = computed<Record<string, string>>(() => {\n  if (!bottomSheet) {\n    return {\n      enterFromClass: 'opacity-0 scale-95',\n      enterActiveClass: 'transition-all ease-out duration-200',\n      enterToClass: 'opacity-100 scale-100',\n      leaveFromClass: 'opacity-100 scale-100',\n      leaveActiveClass: 'transition-all ease-in duration-150',\n      leaveToClass: 'opacity-0 scale-95',\n    };\n  }\n\n  return {\n    enterFromClass: 'translate-y-full',\n    enterActiveClass: 'transition-transform ease-out duration-300',\n    enterToClass: 'translate-y-0',\n    leaveFromClass: 'translate-y-0',\n    leaveActiveClass: 'transition-transform ease-in duration-200',\n    leaveToClass: 'translate-y-full',\n  };\n});\n\nfunction toggle(): void {\n  set(modelValue, !get(modelValue));\n}\n\nfunction close(): void {\n  set(modelValue, false);\n}\n\n/**\n * Closes on Escape unless persistent, and reports the press as `click:esc`.\n *\n * @remarks\n * An Escape that arrives while an IME is composing belongs to the IME, which\n * cancels the candidate with it. The dialog leaves that key alone entirely: no\n * close, no `click:esc`, and no `stopPropagation`, so a search field inside the\n * dialog does not lose the dialog mid-word.\n */\nfunction onEscKeydown(event: KeyboardEvent): void {\n  if (event.isComposing)\n    return;\n\n  event.stopPropagation();\n  if (!persistent) {\n    close();\n  }\n  emit('click:esc');\n}\n\nfunction onClickOutside(): void {\n  if (!persistent) {\n    close();\n  }\n  emit('click:outside');\n}\n\nfunction onDismiss(): void {\n  if (!persistent) {\n    close();\n  }\n  emit('dismiss');\n}\n\n/**\n * Registration follows `modelValue` alone, never `persistent`: a dialog that\n * turns persistent partway through its life has to stay in the stack and refuse\n * in `onDismiss`, or the gesture starts passing through exactly once there is\n * work to lose. A dialog playing its leave transition is already on its way out\n * and does not hold the stack.\n */\nuseDismissableOverlay(modelValue, onDismiss);\n\nfunction onLeaveComplete(): void {\n  leaveTimeout.clear();\n  if (get(transitioning)) {\n    set(transitioning, false);\n    emit('closed');\n  }\n}\n\nwatch(modelValue, (value) => {\n  if (!value) {\n    set(transitioning, true);\n    // Safety fallback if transitionend is not detected\n    leaveTimeout.create(onLeaveComplete, 400);\n  }\n});\n\nwatch(contentRef, (ref) => {\n  if (ref) {\n    nextTick(() => ref.focus());\n  }\n  else {\n    onLeaveComplete();\n  }\n});\n</script>\n\n<template>\n  <div v-bind=\"getRootAttrs($attrs)\">\n    <slot\n      name=\"activator\"\n      v-bind=\"{ attrs: dialogAttrs, isOpen: modelValue }\"\n    />\n    <Teleport to=\"body\">\n      <div\n        v-if=\"alive\"\n        :class=\"ui.root({ class: cn(classNames?.root) })\"\n        :style=\"{ zIndex }\"\n        role=\"dialog\"\n        aria-modal=\"true\"\n        :aria-label=\"ariaLabel\"\n        tabindex=\"0\"\n        v-bind=\"getNonRootAttrs($attrs)\"\n        @keydown.esc=\"onEscKeydown($event)\"\n      >\n        <Transition\n          enter-from-class=\"opacity-0\"\n          enter-active-class=\"transition-opacity ease-out duration-200\"\n          enter-to-class=\"opacity-100\"\n          leave-from-class=\"opacity-100\"\n          leave-active-class=\"transition-opacity ease-in duration-150\"\n          leave-to-class=\"opacity-0\"\n        >\n          <div\n            v-if=\"modelValue\"\n            data-id=\"overlay\"\n            :class=\"ui.overlay()\"\n            @click.stop=\"onClickOutside()\"\n          />\n        </Transition>\n        <Transition\n          v-bind=\"contentTransition\"\n          @after-leave=\"onLeaveComplete()\"\n        >\n          <div\n            v-if=\"modelValue\"\n            ref=\"contentRef\"\n            data-id=\"content\"\n            :style=\"style\"\n            tabindex=\"0\"\n            :data-bottom-sheet=\"bottomSheet || undefined\"\n            :class=\"ui.content({ class: cn(classNames?.content) })\"\n          >\n            <ButtonGroupBoundary>\n              <slot v-bind=\"{ isOpen: modelValue, close }\" />\n            </ButtonGroupBoundary>\n          </div>\n        </Transition>\n      </div>\n    </Teleport>\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/overlays/dialog/RuiDialog.vue_vue_type_script_setup_true_lang.js

@@ -1,9 +1,10 @@
 import { get, set } from "../../../vendor/@vueuse/shared/dist/index.js";
-import { cn, tv } from "../../../utils/tv.js";
+import { cn } from "../../../utils/tv.js";
 import { ButtonGroupBoundary } from "../../buttons/button-group/button-group-context.js";
 import { useTimeoutManager } from "../../../composables/timeout-manager.js";
 import { getNonRootAttrs, getRootAttrs, transformPropsUnit } from "../../../utils/helpers.js";
 import { useDismissableOverlay } from "../../../composables/overlay-stack.js";
+import { dialogStyles } from "./dialog-styles.js";
 import { Teleport, Transition, computed, createBlock, createCommentVNode, createElementBlock, createVNode, defineComponent, guardReactiveProps, mergeModels, mergeProps, nextTick, normalizeClass, normalizeProps, normalizeStyle, openBlock, ref, renderSlot, unref, useModel, useTemplateRef, watch, withCtx, withKeys, withModifiers } from "vue";
 //#region src/components/overlays/dialog/RuiDialog.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = ["aria-label"];
@@ -51,19 +52,7 @@ var RuiDialog_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 			width: transformPropsUnit(__props.width),
 			maxWidth: transformPropsUnit(__props.maxWidth) ?? (__props.size ? `var(--rui-dialog-${__props.size})` : void 0)
 		}));
-		const dialog = tv({
-			slots: {
-				root: "fixed inset-0",
-				overlay: "absolute inset-0 backdrop-blur-sm bg-rui-neutral-950/40 dark:bg-black/60",
-				content: "absolute left-1/2 bottom-0 -translate-x-1/2 outline-hidden overflow-y-auto max-h-(--rui-dialog-max-height)"
-			},
-			variants: { bottomSheet: {
-				true: { content: "rounded-t-rui-card shadow-rui-drawer *:rounded-b-none" },
-				false: { content: "top-1/2 -translate-y-1/2 bottom-auto rounded-rui-card shadow-rui-menu" }
-			} },
-			defaultVariants: { bottomSheet: false }
-		});
-		const ui = computed(() => dialog({ bottomSheet: __props.bottomSheet }));
+		const ui = computed(() => dialogStyles({ bottomSheet: __props.bottomSheet }));
 		const dialogAttrs = { onClick: toggle };
 		const contentTransition = computed(() => {
 			if (!__props.bottomSheet) return {