@rotki/ui-library 3.1.7 → 3.3.0

package/dist/components/overlays/tooltip/RuiTooltip.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiTooltip.vue_vue_type_script_setup_true_lang.js","names":["$attrs","_openBlock","_createElementBlock","_mergeProps","_unref","_renderSlot","_createBlock","_Teleport","_normalizeClass","_createVNode","_TransitionGroup","_withCtx","_createTextVNode","_toDisplayString","_createCommentVNode","_createElementVNode"],"sources":["../../../../src/components/overlays/tooltip/RuiTooltip.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { VueClassValue } from '@/types/class-value';\nimport { ButtonGroupBoundary } from '@/components/buttons/button-group/button-group-context';\nimport { type FloatingOptions, useFloating } from '@/composables/floating';\nimport { cn, tv } from '@/utils/tv';\nimport { tooltipStyles } from './tooltip-styles';\n\nexport interface RuiTooltipClassNames {\n  root?: VueClassValue;\n  tooltip?: VueClassValue;\n}\n\nexport interface Props {\n  text?: string | null;\n  disabled?: boolean;\n  hideArrow?: boolean;\n  openDelay?: number;\n  closeDelay?: number;\n  persistOnTooltipHover?: boolean;\n  options?: FloatingOptions;\n  classNames?: RuiTooltipClassNames;\n}\n\ndefineOptions({\n  name: 'RuiTooltip',\n  inheritAttrs: false,\n});\n\nconst {\n  text = null,\n  disabled = false,\n  hideArrow = false,\n  openDelay = 0,\n  closeDelay = 500,\n  persistOnTooltipHover = false,\n  options,\n  classNames,\n} = defineProps<Props>();\n\ndefineSlots<{\n  activator?: (props: { open: boolean; close: () => void }) => any;\n  default?: () => any;\n}>();\n\nconst rootStyle = tv({ base: 'relative inline-flex' });\n\n// wraps at `--rui-tooltip-max-width`; a `max-w-*` in `classNames.tooltip` replaces it\nconst popoverStyle = tv({ base: 'w-max max-w-rui-tooltip z-rui-tooltip' });\n\nconst tooltipId = useId();\n\nconst {\n  reference: activator,\n  popover: tooltip,\n  open,\n  visible,\n  currentPlacement,\n  onOpen,\n  onClose,\n  onLeaveComplete,\n  updatePosition,\n} = useFloating(\n  () => options ?? {},\n  () => disabled,\n  () => openDelay,\n  () => closeDelay,\n);\n\ntype PlacementSide = 'bottom' | 'left' | 'right' | 'top';\n\nconst placementSide = computed<PlacementSide>(() => {\n  const placement = get(currentPlacement);\n  if (placement.startsWith('top'))\n    return 'top';\n  if (placement.startsWith('left'))\n    return 'left';\n  if (placement.startsWith('right'))\n    return 'right';\n  return 'bottom';\n});\n\ndefineExpose({\n  onOpen,\n  onClose,\n});\n</script>\n\n<template>\n  <div\n    ref=\"activator\"\n    v-bind=\"{ ...$attrs, class: undefined }\"\n    :class=\"rootStyle({ class: cn($attrs.class) })\"\n    :data-tooltip-disabled=\"disabled\"\n    :aria-describedby=\"!disabled && open ? tooltipId : undefined\"\n    @mouseover=\"onOpen()\"\n    @mouseleave=\"onClose()\"\n    @focusin=\"onOpen()\"\n    @focusout=\"onClose()\"\n  >\n    <slot\n      name=\"activator\"\n      :open=\"open\"\n      :close=\"onClose\"\n    />\n\n    <Teleport\n      v-if=\"!disabled\"\n      to=\"body\"\n    >\n      <div\n        v-if=\"visible\"\n        :id=\"tooltipId\"\n        ref=\"tooltip\"\n        :class=\"popoverStyle({ class: cn(classNames?.tooltip) })\"\n        :role=\"open ? 'tooltip' : undefined\"\n        :data-placement=\"currentPlacement\"\n      >\n        <TransitionGroup\n          enter-active-class=\"transition ease-out duration-200\"\n          enter-from-class=\"opacity-0 translate-y-1\"\n          enter-to-class=\"opacity-100 translate-y-0\"\n          leave-active-class=\"transition ease-in duration-150\"\n          leave-from-class=\"opacity-100 translate-y-0\"\n          leave-to-class=\"opacity-0 translate-y-1\"\n          @before-enter=\"updatePosition()\"\n          @after-leave=\"onLeaveComplete()\"\n        >\n          <div\n            v-if=\"open\"\n            key=\"tooltip\"\n            class=\"px-2 py-1.5 text-xs font-normal wrap-break-word bg-rui-neutral-900 dark:bg-rui-neutral-700 text-white rounded-rui-control shadow-rui-tooltip\"\n            data-id=\"content\"\n            @mouseover=\"persistOnTooltipHover && onOpen()\"\n            @mouseleave=\"persistOnTooltipHover && onClose()\"\n          >\n            <ButtonGroupBoundary>\n              <slot>\n                {{ text }}\n              </slot>\n            </ButtonGroupBoundary>\n          </div>\n          <span\n            v-if=\"!hideArrow\"\n            key=\"arrow\"\n            :class=\"tooltipStyles({ open, side: placementSide }).arrow()\"\n            data-id=\"arrow\"\n          >\n            <span :class=\"tooltipStyles({ open, side: placementSide }).diamond()\" />\n          </span>\n        </TransitionGroup>\n      </div>\n    </Teleport>\n  </div>\n</template>\n"],"mappings":"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"}
+{"version":3,"file":"RuiTooltip.vue_vue_type_script_setup_true_lang.js","names":["$attrs","_openBlock","_createElementBlock","_mergeProps","_unref","_renderSlot","_createBlock","_Teleport","_normalizeClass","_createVNode","_TransitionGroup","_withCtx","_createTextVNode","_toDisplayString","_createCommentVNode","_createElementVNode"],"sources":["../../../../src/components/overlays/tooltip/RuiTooltip.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { HTMLAttributes, Reactive } from 'vue';\nimport type { VueClassValue } from '@/types/class-value';\nimport { ButtonGroupBoundary } from '@/components/buttons/button-group/button-group-context';\nimport { type FloatingOptions, useFloating, type UseFloatingReturn } from '@/composables/floating';\nimport { cn } from '@/utils/tv';\nimport { tooltipPopoverStyles, tooltipRootStyles, tooltipStyles } from './tooltip-styles';\n\nexport interface RuiTooltipClassNames {\n  root?: VueClassValue;\n  tooltip?: VueClassValue;\n}\n\nexport interface Props {\n  text?: string | null;\n  disabled?: boolean;\n  hideArrow?: boolean;\n  openDelay?: number;\n  closeDelay?: number;\n  persistOnTooltipHover?: boolean;\n  options?: FloatingOptions;\n  classNames?: RuiTooltipClassNames;\n}\n\ndefineOptions({\n  name: 'RuiTooltip',\n  inheritAttrs: false,\n});\n\nconst {\n  text = null,\n  disabled = false,\n  hideArrow = false,\n  openDelay = 0,\n  closeDelay = 500,\n  persistOnTooltipHover = false,\n  options,\n  classNames,\n} = defineProps<Props & /* @vue-ignore */ Omit<HTMLAttributes, keyof Props>>();\n\ndefineSlots<{\n  activator?: (props: { open: boolean; close: () => void }) => any;\n  default?: () => any;\n}>();\n\nconst tooltipId = useId();\nconst activator = useTemplateRef<HTMLElement>('activator');\nconst tooltip = useTemplateRef<HTMLElement>('tooltip');\n// Owned by this component, so a setup run on first use still stops on unmount\nconst setupScope = effectScope();\nconst floating = shallowRef<Reactive<UseFloatingReturn>>();\n\nconst open = computed<boolean>(() => get(floating)?.open ?? false);\nconst visible = computed<boolean>(() => get(floating)?.visible ?? false);\n\ntype PlacementSide = 'bottom' | 'left' | 'right' | 'top';\n\n/**\n * Sets the floating state up on the first hover, focus or `onOpen`, so a\n * table with a tooltip on every row pays only for the tooltips it shows. An\n * event that reaches the activator after unmount gets nothing back.\n */\nfunction setUp(): Reactive<UseFloatingReturn> | undefined {\n  if (setupScope.active && !disabled && !get(floating)) {\n    set(floating, setupScope.run(() => reactive(useFloating(\n      () => options ?? {},\n      () => disabled,\n      () => openDelay,\n      () => closeDelay,\n      () => get(activator) ?? undefined,\n      tooltip,\n    ))));\n  }\n  return setupScope.active ? get(floating) : undefined;\n}\n\nfunction onOpen(immediate?: boolean): void {\n  setUp()?.onOpen(immediate);\n}\n\nfunction onClose(immediate?: boolean): void {\n  if (setupScope.active)\n    get(floating)?.onClose(immediate);\n}\n\nfunction placementSide(placement: string): PlacementSide {\n  if (placement.startsWith('top'))\n    return 'top';\n  if (placement.startsWith('left'))\n    return 'left';\n  if (placement.startsWith('right'))\n    return 'right';\n  return 'bottom';\n}\n\ndefineExpose({\n  onOpen,\n  onClose,\n});\n</script>\n\n<template>\n  <div\n    ref=\"activator\"\n    v-bind=\"{ ...$attrs, class: undefined }\"\n    :class=\"tooltipRootStyles({ class: cn($attrs.class) })\"\n    :data-tooltip-disabled=\"disabled\"\n    :aria-describedby=\"!disabled && open ? tooltipId : undefined\"\n    @mouseover=\"onOpen()\"\n    @mouseleave=\"onClose()\"\n    @focusin=\"onOpen()\"\n    @focusout=\"onClose()\"\n  >\n    <slot\n      name=\"activator\"\n      :open=\"open\"\n      :close=\"onClose\"\n    />\n\n    <Teleport\n      v-if=\"!disabled && floating\"\n      to=\"body\"\n    >\n      <div\n        v-if=\"visible\"\n        :id=\"tooltipId\"\n        ref=\"tooltip\"\n        :class=\"tooltipPopoverStyles({ class: cn(classNames?.tooltip) })\"\n        :role=\"open ? 'tooltip' : undefined\"\n        :data-placement=\"floating.currentPlacement\"\n      >\n        <TransitionGroup\n          enter-active-class=\"transition ease-out duration-200\"\n          enter-from-class=\"opacity-0 translate-y-1\"\n          enter-to-class=\"opacity-100 translate-y-0\"\n          leave-active-class=\"transition ease-in duration-150\"\n          leave-from-class=\"opacity-100 translate-y-0\"\n          leave-to-class=\"opacity-0 translate-y-1\"\n          @before-enter=\"floating?.updatePosition()\"\n          @after-leave=\"floating?.onLeaveComplete()\"\n        >\n          <div\n            v-if=\"open\"\n            key=\"tooltip\"\n            class=\"px-2 py-1.5 text-xs font-normal wrap-break-word bg-rui-neutral-900 dark:bg-rui-neutral-700 text-white rounded-rui-control shadow-rui-tooltip\"\n            data-id=\"content\"\n            @mouseover=\"persistOnTooltipHover && onOpen()\"\n            @mouseleave=\"persistOnTooltipHover && onClose()\"\n          >\n            <ButtonGroupBoundary>\n              <slot>\n                {{ text }}\n              </slot>\n            </ButtonGroupBoundary>\n          </div>\n          <span\n            v-if=\"!hideArrow\"\n            key=\"arrow\"\n            :class=\"tooltipStyles({ open, side: placementSide(floating.currentPlacement) }).arrow()\"\n            data-id=\"arrow\"\n          >\n            <span :class=\"tooltipStyles({ open, side: placementSide(floating.currentPlacement) }).diamond()\" />\n          </span>\n        </TransitionGroup>\n      </div>\n    </Teleport>\n  </div>\n</template>\n"],"mappings":"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"}

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

@@ -82,3 +82,5 @@ export declare const tooltipStyles: import("tailwind-variants").TVReturnType<{
     arrow: string;
     diamond: string;
 }>>;
+export declare const tooltipRootStyles: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "relative inline-flex", {} | {}, undefined, import("tailwind-variants").TVReturnTypeLike<unknown, undefined>>;
+export declare const tooltipPopoverStyles: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "w-max max-w-rui-tooltip z-rui-tooltip", {} | {}, undefined, import("tailwind-variants").TVReturnTypeLike<unknown, undefined>>;

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

@@ -27,7 +27,9 @@ var tooltipStyles = tv({
 		side: "bottom"
 	}
 });
+var tooltipRootStyles = tv({ base: "relative inline-flex" });
+var tooltipPopoverStyles = tv({ base: "w-max max-w-rui-tooltip z-rui-tooltip" });
 //#endregion
-export { tooltipStyles };
+export { tooltipPopoverStyles, tooltipRootStyles, tooltipStyles };
 
 //# sourceMappingURL=tooltip-styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"tooltip-styles.js","names":[],"sources":["../../../../src/components/overlays/tooltip/tooltip-styles.ts"],"sourcesContent":["import { tv } from '@/utils/tv';\n\n/**\n * The arrow is a solid square turned 45°, centred on the bubble's edge so half of it tucks under the\n * bubble in the same color. A triangle drawn from two borders showed a hairline where the borders\n * met, and a square has no such join. Being symmetric, it needs no rotation per side.\n */\nexport const tooltipStyles = tv({\n  slots: {\n    arrow: 'absolute block size-2 transition-opacity',\n    // eslint-disable-next-line better-tailwindcss/no-restricted-classes -- the tip of the arrow is geometry, not a surface's corner\n    diamond: 'block size-2 rotate-45 rounded-[0.0625rem] bg-rui-neutral-900 dark:bg-rui-neutral-700',\n  },\n  variants: {\n    open: {\n      true: { arrow: 'opacity-100' },\n      false: { arrow: 'opacity-0' },\n    },\n    side: {\n      top: { arrow: '-bottom-1' },\n      bottom: { arrow: '-top-1' },\n      left: { arrow: '-right-1' },\n      right: { arrow: '-left-1' },\n    },\n  },\n  defaultVariants: { open: false, side: 'bottom' },\n});\n"],"mappings":";;;;;;;AAOA,IAAa,gBAAgB,GAAG;CAC9B,OAAO;EACL,OAAO;EAEP,SAAS;CACX;CACA,UAAU;EACR,MAAM;GACJ,MAAM,EAAE,OAAO,cAAc;GAC7B,OAAO,EAAE,OAAO,YAAY;EAC9B;EACA,MAAM;GACJ,KAAK,EAAE,OAAO,YAAY;GAC1B,QAAQ,EAAE,OAAO,SAAS;GAC1B,MAAM,EAAE,OAAO,WAAW;GAC1B,OAAO,EAAE,OAAO,UAAU;EAC5B;CACF;CACA,iBAAiB;EAAE,MAAM;EAAO,MAAM;CAAS;AACjD,CAAC"}
+{"version":3,"file":"tooltip-styles.js","names":[],"sources":["../../../../src/components/overlays/tooltip/tooltip-styles.ts"],"sourcesContent":["import { tv } from '@/utils/tv';\n\n/**\n * The arrow is a solid square turned 45°, centred on the bubble's edge so half of it tucks under the\n * bubble in the same color. A triangle drawn from two borders showed a hairline where the borders\n * met, and a square has no such join. Being symmetric, it needs no rotation per side.\n */\nexport const tooltipStyles = tv({\n  slots: {\n    arrow: 'absolute block size-2 transition-opacity',\n    // eslint-disable-next-line better-tailwindcss/no-restricted-classes -- the tip of the arrow is geometry, not a surface's corner\n    diamond: 'block size-2 rotate-45 rounded-[0.0625rem] bg-rui-neutral-900 dark:bg-rui-neutral-700',\n  },\n  variants: {\n    open: {\n      true: { arrow: 'opacity-100' },\n      false: { arrow: 'opacity-0' },\n    },\n    side: {\n      top: { arrow: '-bottom-1' },\n      bottom: { arrow: '-top-1' },\n      left: { arrow: '-right-1' },\n      right: { arrow: '-left-1' },\n    },\n  },\n  defaultVariants: { open: false, side: 'bottom' },\n});\n\nexport const tooltipRootStyles = tv({ base: 'relative inline-flex' });\n\n// wraps at `--rui-tooltip-max-width`; a `max-w-*` in `classNames.tooltip` replaces it\nexport const tooltipPopoverStyles = tv({ base: 'w-max max-w-rui-tooltip z-rui-tooltip' });\n"],"mappings":";;;;;;;AAOA,IAAa,gBAAgB,GAAG;CAC9B,OAAO;EACL,OAAO;EAEP,SAAS;CACX;CACA,UAAU;EACR,MAAM;GACJ,MAAM,EAAE,OAAO,cAAc;GAC7B,OAAO,EAAE,OAAO,YAAY;EAC9B;EACA,MAAM;GACJ,KAAK,EAAE,OAAO,YAAY;GAC1B,QAAQ,EAAE,OAAO,SAAS;GAC1B,MAAM,EAAE,OAAO,WAAW;GAC1B,OAAO,EAAE,OAAO,UAAU;EAC5B;CACF;CACA,iBAAiB;EAAE,MAAM;EAAO,MAAM;CAAS;AACjD,CAAC;AAED,IAAa,oBAAoB,GAAG,EAAE,MAAM,uBAAuB,CAAC;AAGpE,IAAa,uBAAuB,GAAG,EAAE,MAAM,wCAAwC,CAAC"}

package/dist/components/progress/RuiProgress.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiProgress.js","names":["_sfc_main"],"sources":["../../../src/components/progress/RuiProgress.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { ContextColorsType } from '@/consts/colors';\nimport { ProgressVariant } from '@/components/progress/progress-props';\nimport { tv } from '@/utils/tv';\n\nexport interface Props {\n  /**\n   * in percentage value, required when variant === determinate or buffer\n   * Ranges from 0 to 100.\n   */\n  value?: number;\n  /**\n   * in percentage value, required when variant === buffer\n   * Ranges from 0 to 100.\n   */\n  bufferValue?: number;\n  variant?: ProgressVariant;\n  color?: ContextColorsType | 'inherit';\n  circular?: boolean;\n  showLabel?: boolean;\n  /**\n   * Sets the stroke thickness in pixels\n   */\n  thickness?: number | string;\n  /**\n   * only used for circular progress\n   */\n  size?: number | string;\n  /**\n   * What is loading, as the progress bar's accessible name (\"Loading\" when not given)\n   */\n  ariaLabel?: string;\n}\n\ndefineOptions({\n  name: 'RuiProgress',\n});\n\nconst {\n  value = 0,\n  bufferValue = 0,\n  variant = ProgressVariant.determinate,\n  color = 'inherit',\n  circular = false,\n  showLabel = false,\n  thickness = 4,\n  size = 40,\n  ariaLabel = 'Loading',\n} = defineProps<Props>();\n\ndefineSlots<Record<string, never>>();\n\nconst CIRCLE_RADIUS = 20;\nconst CIRCLE_CIRCUMFERENCE = 2 * Math.PI * CIRCLE_RADIUS; // ~125.66\n/** width of `100%` in ems, measured with tabular figures */\nconst LABEL_WIDTH_EM = 2.95;\n/** keeps the label off the stroke rather than merely inside it */\nconst LABEL_BREATHING_ROOM = 0.9;\n/** below this font size a label inside the ring is unreadable, so the ring drops it rather than change its footprint */\nconst MIN_INSIDE_LABEL_PX = 9;\n\nfunction clampPercent(val: number | undefined): number {\n  return Math.max(0, Math.min(val ?? 100, 100));\n}\n\nconst progressStyles = tv({\n  slots: {\n    wrapper: '',\n    progressbar: 'w-full overflow-hidden relative rounded-full',\n    rail: 'w-full h-full',\n    bar: 'transition-all duration-150 ease-in-out absolute left-0 top-0 h-full w-full',\n    indeterminateBar: 'absolute left-0 top-0 h-full w-auto transition-transform duration-200 ease-linear origin-left animate-slide-rail',\n    bufferDots: 'absolute h-0 w-[200%] -top-px -left-full border-dashed border-y-[0.2rem] animate-buffer-pulse',\n    bufferRail: 'w-full h-full transition-transform duration-200 ease-linear origin-left',\n    circularContainer: 'inline-block relative',\n    svg: 'block',\n    circle: 'stroke-current',\n    circleTrack: '',\n    label: 'text-rui-text',\n  },\n  variants: {\n    color: {\n      primary: { circularContainer: 'text-rui-primary' },\n      secondary: { circularContainer: 'text-rui-secondary' },\n      error: { circularContainer: 'text-rui-error' },\n      warning: { circularContainer: 'text-rui-warning' },\n      info: { circularContainer: 'text-rui-info' },\n      success: { circularContainer: 'text-rui-success' },\n      inherit: { circularContainer: 'text-current' },\n    },\n    variant: {\n      [ProgressVariant.determinate]: { svg: '-rotate-90' },\n      [ProgressVariant.indeterminate]: {\n        svg: 'animate-circular-spin',\n        circle: 'animate-collapse-stroke [stroke-dasharray:80px,200px] [stroke-linecap:round]',\n      },\n      [ProgressVariant.buffer]: {},\n    },\n    circular: {\n      true: { wrapper: 'inline-flex' },\n      false: { wrapper: 'w-full' },\n    },\n    hasLabel: {\n      true: { wrapper: 'inline-flex items-center relative' },\n    },\n  },\n  compoundVariants: [\n    // Linear label\n    { circular: false, hasLabel: true, class: { label: 'block text-sm ml-4 text-rui-text-secondary tabular-nums' } },\n    // Circular label (overlays the circle, font size derived from `size`)\n    { circular: true, hasLabel: true, class: { label: 'absolute inset-0 flex items-center justify-center leading-none font-medium tabular-nums whitespace-nowrap' } },\n  ],\n  compoundSlots: [\n    // Track behind the bar: one neutral for every named color, neutral-700 in dark like the footer stepper pills, which reads on a near-black page\n    { slots: ['rail'], color: ['primary', 'secondary', 'error', 'warning', 'info', 'success'], class: 'bg-rui-neutral-200 dark:bg-rui-neutral-700' },\n    { slots: ['bufferDots'], color: ['primary', 'secondary', 'error', 'warning', 'info', 'success'], class: 'border-rui-neutral-200 dark:border-rui-neutral-700' },\n    { slots: ['circleTrack'], color: ['primary', 'secondary', 'error', 'warning', 'info', 'success'], class: 'stroke-rui-neutral-200 dark:stroke-rui-neutral-700' },\n    // `inherit` keeps a tint of whatever color it is given\n    { slots: ['rail', 'bufferDots'], color: 'inherit', class: 'bg-current opacity-20 border-current' },\n    { slots: ['circleTrack'], color: 'inherit', class: 'stroke-current opacity-20' },\n\n    // Bar fill (active progress)\n    { slots: ['bar', 'indeterminateBar'], color: 'primary', class: 'bg-rui-primary' },\n    { slots: ['bar', 'indeterminateBar'], color: 'secondary', class: 'bg-rui-secondary' },\n    { slots: ['bar', 'indeterminateBar'], color: 'error', class: 'bg-rui-error' },\n    { slots: ['bar', 'indeterminateBar'], color: 'warning', class: 'bg-rui-warning' },\n    { slots: ['bar', 'indeterminateBar'], color: 'info', class: 'bg-rui-info' },\n    { slots: ['bar', 'indeterminateBar'], color: 'success', class: 'bg-rui-success' },\n    { slots: ['bar', 'indeterminateBar'], color: 'inherit', class: 'bg-current' },\n  ],\n});\n\nconst hasLabel = computed<boolean>(() => showLabel && variant !== ProgressVariant.indeterminate);\n\n/**\n * The font size that fits the widest label (`100%`) inside the ring, solved against the chord\n * it spans. Always computed for that widest label so the text does not resize as the value climbs.\n */\nconst insideLabelFit = computed<number>(() => {\n  const innerRadius = Math.max((+size - 2 * +thickness) / 2, 0);\n  return (LABEL_BREATHING_ROOM * 2 * innerRadius) / Math.sqrt(LABEL_WIDTH_EM ** 2 + 1);\n});\n\nconst labelFits = computed<boolean>(() => get(insideLabelFit) >= MIN_INSIDE_LABEL_PX);\n\nconst ui = computed<ReturnType<typeof progressStyles>>(() => progressStyles({\n  color,\n  variant,\n  circular,\n  hasLabel: get(hasLabel),\n}));\n\nconst currentValue = computed<number>(() => clampPercent(value));\n\n/** An indeterminate bar has no value to report, so it leaves `aria-valuenow` off. */\nconst ariaValueNow = computed<number | undefined>(() =>\n  variant === ProgressVariant.indeterminate ? undefined : get(currentValue));\n\nconst label = computed<string>(() => `${Math.floor(get(currentValue))}%`);\n\nconst progress = computed<number>(() => -100 + get(currentValue));\n\nconst barStyle = computed<Record<string, string>>(() => ({\n  transform: `translateX(${get(progress)}%)`,\n}));\n\nconst bufferRailStyle = computed<Record<string, string>>(() => ({\n  transform: `translateX(${-100 + clampPercent(bufferValue)}%)`,\n}));\n\nconst linearStyle = computed<Record<string, string>>(() => ({\n  height: `${+thickness}px`,\n}));\n\nconst circularSize = computed<Record<string, string>>(() => ({\n  width: `${+size}px`,\n  height: `${+size}px`,\n}));\n\nconst circularGeometry = computed<{ scaledThickness: number; viewSize: number }>(() => {\n  const scaledThickness = (+thickness * 32) / +size;\n  return { scaledThickness, viewSize: 40 + scaledThickness };\n});\n\n/**\n * The label inside the ring scales with both `size` and `thickness`. The fit is capped by\n * a sublinear curve so large rings do not end up with an oversized number in the middle.\n */\nconst circularLabelStyle = computed<Record<string, string>>(() => ({\n  fontSize: `${Math.min(get(insideLabelFit), +size * 0.15 + 6)}px`,\n}));\n\nconst circularStrokeStyle = computed<Record<string, string>>(() => ({\n  strokeDasharray: `${CIRCLE_CIRCUMFERENCE}`,\n  strokeDashoffset: `${(get(progress) / 100) * -CIRCLE_CIRCUMFERENCE}`,\n  // the library's own motion, not Material's standard curve\n  transition: 'stroke-dashoffset 200ms ease-out',\n}));\n</script>\n\n<template>\n  <div :class=\"ui.wrapper()\">\n    <!-- Circular progress (not supported for buffer variant) -->\n    <div\n      v-if=\"circular && variant !== ProgressVariant.buffer\"\n      :aria-valuenow=\"ariaValueNow\"\n      :class=\"ui.circularContainer()\"\n      :style=\"circularSize\"\n      :data-variant=\"variant\"\n      :data-color=\"color\"\n      :aria-label=\"ariaLabel\"\n      :title=\"hasLabel && !labelFits ? label : undefined\"\n      aria-valuemax=\"100\"\n      aria-valuemin=\"0\"\n      role=\"progressbar\"\n    >\n      <svg\n        :class=\"ui.svg()\"\n        :viewBox=\"`0 0 ${circularGeometry.viewSize} ${circularGeometry.viewSize}`\"\n      >\n        <!-- Track behind the arc, mirroring the linear rail. Indeterminate spins, so it gets no track. -->\n        <circle\n          v-if=\"variant === ProgressVariant.determinate\"\n          cx=\"50%\"\n          cy=\"50%\"\n          fill=\"none\"\n          :r=\"CIRCLE_RADIUS\"\n          :class=\"ui.circleTrack()\"\n          :stroke-width=\"circularGeometry.scaledThickness\"\n        />\n        <circle\n          cx=\"50%\"\n          cy=\"50%\"\n          fill=\"none\"\n          :r=\"CIRCLE_RADIUS\"\n          :class=\"ui.circle()\"\n          :style=\"variant === ProgressVariant.determinate ? circularStrokeStyle : undefined\"\n          :stroke-width=\"circularGeometry.scaledThickness\"\n        />\n      </svg>\n      <div\n        v-if=\"hasLabel && labelFits\"\n        :class=\"ui.label()\"\n        :style=\"circularLabelStyle\"\n        aria-hidden=\"true\"\n      >\n        {{ label }}\n      </div>\n    </div>\n\n    <!-- Linear progress (also used as fallback for circular + buffer) -->\n    <div\n      v-else\n      :aria-valuenow=\"ariaValueNow\"\n      :class=\"ui.progressbar()\"\n      :style=\"linearStyle\"\n      :data-variant=\"variant\"\n      :data-color=\"color\"\n      :aria-label=\"ariaLabel\"\n      aria-valuemax=\"100\"\n      aria-valuemin=\"0\"\n      role=\"progressbar\"\n    >\n      <div\n        v-if=\"variant === ProgressVariant.buffer\"\n        :class=\"ui.bufferDots()\"\n      />\n      <div\n        :class=\"variant === ProgressVariant.buffer ? [ui.rail(), ui.bufferRail()] : ui.rail()\"\n        :style=\"variant === ProgressVariant.buffer ? bufferRailStyle : undefined\"\n        data-id=\"progress-rail\"\n      />\n      <div\n        v-if=\"variant === ProgressVariant.indeterminate\"\n        :class=\"ui.indeterminateBar()\"\n      />\n      <div\n        v-else\n        :class=\"ui.bar()\"\n        :style=\"barStyle\"\n      />\n    </div>\n\n    <!-- Linear label -->\n    <div\n      v-if=\"hasLabel && !circular\"\n      :class=\"ui.label()\"\n    >\n      {{ label }}\n    </div>\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"RuiProgress.js","names":["_sfc_main"],"sources":["../../../src/components/progress/RuiProgress.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue';\nimport type { ContextColorsType } from '@/consts/colors';\nimport { ProgressVariant } from '@/components/progress/progress-props';\nimport { progressStyles } from './progress-styles';\n\nexport interface Props {\n  /**\n   * in percentage value, required when variant === determinate or buffer\n   * Ranges from 0 to 100.\n   */\n  value?: number;\n  /**\n   * in percentage value, required when variant === buffer\n   * Ranges from 0 to 100.\n   */\n  bufferValue?: number;\n  variant?: ProgressVariant;\n  color?: ContextColorsType | 'inherit';\n  circular?: boolean;\n  showLabel?: boolean;\n  /**\n   * Sets the stroke thickness in pixels\n   */\n  thickness?: number | string;\n  /**\n   * only used for circular progress\n   */\n  size?: number | string;\n  /**\n   * What is loading, as the progress bar's accessible name (\"Loading\" when not given)\n   */\n  ariaLabel?: string;\n}\n\ndefineOptions({\n  name: 'RuiProgress',\n});\n\nconst {\n  value = 0,\n  bufferValue = 0,\n  variant = ProgressVariant.determinate,\n  color = 'inherit',\n  circular = false,\n  showLabel = false,\n  thickness = 4,\n  size = 40,\n  ariaLabel = 'Loading',\n} = defineProps<Props & /* @vue-ignore */ Omit<HTMLAttributes, keyof Props>>();\n\ndefineSlots<Record<string, never>>();\n\nconst CIRCLE_RADIUS = 20;\nconst CIRCLE_CIRCUMFERENCE = 2 * Math.PI * CIRCLE_RADIUS; // ~125.66\n/** width of `100%` in ems, measured with tabular figures */\nconst LABEL_WIDTH_EM = 2.95;\n/** keeps the label off the stroke rather than merely inside it */\nconst LABEL_BREATHING_ROOM = 0.9;\n/** below this font size a label inside the ring is unreadable, so the ring drops it rather than change its footprint */\nconst MIN_INSIDE_LABEL_PX = 9;\n\nfunction clampPercent(val: number | undefined): number {\n  return Math.max(0, Math.min(val ?? 100, 100));\n}\n\nconst hasLabel = computed<boolean>(() => showLabel && variant !== ProgressVariant.indeterminate);\n\n/**\n * The font size that fits the widest label (`100%`) inside the ring, solved against the chord\n * it spans. Always computed for that widest label so the text does not resize as the value climbs.\n */\nconst insideLabelFit = computed<number>(() => {\n  const innerRadius = Math.max((+size - 2 * +thickness) / 2, 0);\n  return (LABEL_BREATHING_ROOM * 2 * innerRadius) / Math.sqrt(LABEL_WIDTH_EM ** 2 + 1);\n});\n\nconst labelFits = computed<boolean>(() => get(insideLabelFit) >= MIN_INSIDE_LABEL_PX);\n\nconst ui = computed<ReturnType<typeof progressStyles>>(() => progressStyles({\n  color,\n  variant,\n  circular,\n  hasLabel: get(hasLabel),\n}));\n\nconst currentValue = computed<number>(() => clampPercent(value));\n\n/** An indeterminate bar has no value to report, so it leaves `aria-valuenow` off. */\nconst ariaValueNow = computed<number | undefined>(() =>\n  variant === ProgressVariant.indeterminate ? undefined : get(currentValue));\n\nconst label = computed<string>(() => `${Math.floor(get(currentValue))}%`);\n\nconst progress = computed<number>(() => -100 + get(currentValue));\n\nconst barStyle = computed<Record<string, string>>(() => ({\n  transform: `translateX(${get(progress)}%)`,\n}));\n\nconst bufferRailStyle = computed<Record<string, string>>(() => ({\n  transform: `translateX(${-100 + clampPercent(bufferValue)}%)`,\n}));\n\nconst linearStyle = computed<Record<string, string>>(() => ({\n  height: `${+thickness}px`,\n}));\n\nconst circularSize = computed<Record<string, string>>(() => ({\n  width: `${+size}px`,\n  height: `${+size}px`,\n}));\n\nconst circularGeometry = computed<{ scaledThickness: number; viewSize: number }>(() => {\n  const scaledThickness = (+thickness * 32) / +size;\n  return { scaledThickness, viewSize: 40 + scaledThickness };\n});\n\n/**\n * The label inside the ring scales with both `size` and `thickness`. The fit is capped by\n * a sublinear curve so large rings do not end up with an oversized number in the middle.\n */\nconst circularLabelStyle = computed<Record<string, string>>(() => ({\n  fontSize: `${Math.min(get(insideLabelFit), +size * 0.15 + 6)}px`,\n}));\n\nconst circularStrokeStyle = computed<Record<string, string>>(() => ({\n  strokeDasharray: `${CIRCLE_CIRCUMFERENCE}`,\n  strokeDashoffset: `${(get(progress) / 100) * -CIRCLE_CIRCUMFERENCE}`,\n  // the library's own motion, not Material's standard curve\n  transition: 'stroke-dashoffset 200ms ease-out',\n}));\n</script>\n\n<template>\n  <div :class=\"ui.wrapper()\">\n    <!-- Circular progress (not supported for buffer variant) -->\n    <div\n      v-if=\"circular && variant !== ProgressVariant.buffer\"\n      :aria-valuenow=\"ariaValueNow\"\n      :class=\"ui.circularContainer()\"\n      :style=\"circularSize\"\n      :data-variant=\"variant\"\n      :data-color=\"color\"\n      :aria-label=\"ariaLabel\"\n      :title=\"hasLabel && !labelFits ? label : undefined\"\n      aria-valuemax=\"100\"\n      aria-valuemin=\"0\"\n      role=\"progressbar\"\n    >\n      <svg\n        :class=\"ui.svg()\"\n        :viewBox=\"`0 0 ${circularGeometry.viewSize} ${circularGeometry.viewSize}`\"\n      >\n        <!-- Track behind the arc, mirroring the linear rail. Indeterminate spins, so it gets no track. -->\n        <circle\n          v-if=\"variant === ProgressVariant.determinate\"\n          cx=\"50%\"\n          cy=\"50%\"\n          fill=\"none\"\n          :r=\"CIRCLE_RADIUS\"\n          :class=\"ui.circleTrack()\"\n          :stroke-width=\"circularGeometry.scaledThickness\"\n        />\n        <circle\n          cx=\"50%\"\n          cy=\"50%\"\n          fill=\"none\"\n          :r=\"CIRCLE_RADIUS\"\n          :class=\"ui.circle()\"\n          :style=\"variant === ProgressVariant.determinate ? circularStrokeStyle : undefined\"\n          :stroke-width=\"circularGeometry.scaledThickness\"\n        />\n      </svg>\n      <div\n        v-if=\"hasLabel && labelFits\"\n        :class=\"ui.label()\"\n        :style=\"circularLabelStyle\"\n        aria-hidden=\"true\"\n      >\n        {{ label }}\n      </div>\n    </div>\n\n    <!-- Linear progress (also used as fallback for circular + buffer) -->\n    <div\n      v-else\n      :aria-valuenow=\"ariaValueNow\"\n      :class=\"ui.progressbar()\"\n      :style=\"linearStyle\"\n      :data-variant=\"variant\"\n      :data-color=\"color\"\n      :aria-label=\"ariaLabel\"\n      aria-valuemax=\"100\"\n      aria-valuemin=\"0\"\n      role=\"progressbar\"\n    >\n      <div\n        v-if=\"variant === ProgressVariant.buffer\"\n        :class=\"ui.bufferDots()\"\n      />\n      <div\n        :class=\"variant === ProgressVariant.buffer ? [ui.rail(), ui.bufferRail()] : ui.rail()\"\n        :style=\"variant === ProgressVariant.buffer ? bufferRailStyle : undefined\"\n        data-id=\"progress-rail\"\n      />\n      <div\n        v-if=\"variant === ProgressVariant.indeterminate\"\n        :class=\"ui.indeterminateBar()\"\n      />\n      <div\n        v-else\n        :class=\"ui.bar()\"\n        :style=\"barStyle\"\n      />\n    </div>\n\n    <!-- Linear label -->\n    <div\n      v-if=\"hasLabel && !circular\"\n      :class=\"ui.label()\"\n    >\n      {{ label }}\n    </div>\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/progress/RuiProgress.vue.d.ts

@@ -1,3 +1,4 @@
+import type { HTMLAttributes } from 'vue';
 import type { ContextColorsType } from '../../consts/colors.js';
 import { ProgressVariant } from './progress-props.js';
 export interface Props {
@@ -28,8 +29,9 @@ export interface Props {
      */
     ariaLabel?: string;
 }
+type __VLS_Props = Props & /* @vue-ignore */ Omit<HTMLAttributes, keyof Props>;
 type __VLS_Slots = Record<string, never>;
-declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/components/progress/RuiProgress.vue_vue_type_script_setup_true_lang.js

@@ -1,6 +1,6 @@
 import { get } from "../../vendor/@vueuse/shared/dist/index.js";
-import { tv } from "../../utils/tv.js";
 import { ProgressVariant } from "./progress-props.js";
+import { progressStyles } from "./progress-styles.js";
 import { computed, createCommentVNode, createElementBlock, createElementVNode, defineComponent, normalizeClass, normalizeStyle, openBlock, toDisplayString, unref } from "vue";
 //#region src/components/progress/RuiProgress.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = [
@@ -51,138 +51,6 @@ var RuiProgress_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defi
 		function clampPercent(val) {
 			return Math.max(0, Math.min(val ?? 100, 100));
 		}
-		const progressStyles = tv({
-			slots: {
-				wrapper: "",
-				progressbar: "w-full overflow-hidden relative rounded-full",
-				rail: "w-full h-full",
-				bar: "transition-all duration-150 ease-in-out absolute left-0 top-0 h-full w-full",
-				indeterminateBar: "absolute left-0 top-0 h-full w-auto transition-transform duration-200 ease-linear origin-left animate-slide-rail",
-				bufferDots: "absolute h-0 w-[200%] -top-px -left-full border-dashed border-y-[0.2rem] animate-buffer-pulse",
-				bufferRail: "w-full h-full transition-transform duration-200 ease-linear origin-left",
-				circularContainer: "inline-block relative",
-				svg: "block",
-				circle: "stroke-current",
-				circleTrack: "",
-				label: "text-rui-text"
-			},
-			variants: {
-				color: {
-					primary: { circularContainer: "text-rui-primary" },
-					secondary: { circularContainer: "text-rui-secondary" },
-					error: { circularContainer: "text-rui-error" },
-					warning: { circularContainer: "text-rui-warning" },
-					info: { circularContainer: "text-rui-info" },
-					success: { circularContainer: "text-rui-success" },
-					inherit: { circularContainer: "text-current" }
-				},
-				variant: {
-					[ProgressVariant.determinate]: { svg: "-rotate-90" },
-					[ProgressVariant.indeterminate]: {
-						svg: "animate-circular-spin",
-						circle: "animate-collapse-stroke [stroke-dasharray:80px,200px] [stroke-linecap:round]"
-					},
-					[ProgressVariant.buffer]: {}
-				},
-				circular: {
-					true: { wrapper: "inline-flex" },
-					false: { wrapper: "w-full" }
-				},
-				hasLabel: { true: { wrapper: "inline-flex items-center relative" } }
-			},
-			compoundVariants: [{
-				circular: false,
-				hasLabel: true,
-				class: { label: "block text-sm ml-4 text-rui-text-secondary tabular-nums" }
-			}, {
-				circular: true,
-				hasLabel: true,
-				class: { label: "absolute inset-0 flex items-center justify-center leading-none font-medium tabular-nums whitespace-nowrap" }
-			}],
-			compoundSlots: [
-				{
-					slots: ["rail"],
-					color: [
-						"primary",
-						"secondary",
-						"error",
-						"warning",
-						"info",
-						"success"
-					],
-					class: "bg-rui-neutral-200 dark:bg-rui-neutral-700"
-				},
-				{
-					slots: ["bufferDots"],
-					color: [
-						"primary",
-						"secondary",
-						"error",
-						"warning",
-						"info",
-						"success"
-					],
-					class: "border-rui-neutral-200 dark:border-rui-neutral-700"
-				},
-				{
-					slots: ["circleTrack"],
-					color: [
-						"primary",
-						"secondary",
-						"error",
-						"warning",
-						"info",
-						"success"
-					],
-					class: "stroke-rui-neutral-200 dark:stroke-rui-neutral-700"
-				},
-				{
-					slots: ["rail", "bufferDots"],
-					color: "inherit",
-					class: "bg-current opacity-20 border-current"
-				},
-				{
-					slots: ["circleTrack"],
-					color: "inherit",
-					class: "stroke-current opacity-20"
-				},
-				{
-					slots: ["bar", "indeterminateBar"],
-					color: "primary",
-					class: "bg-rui-primary"
-				},
-				{
-					slots: ["bar", "indeterminateBar"],
-					color: "secondary",
-					class: "bg-rui-secondary"
-				},
-				{
-					slots: ["bar", "indeterminateBar"],
-					color: "error",
-					class: "bg-rui-error"
-				},
-				{
-					slots: ["bar", "indeterminateBar"],
-					color: "warning",
-					class: "bg-rui-warning"
-				},
-				{
-					slots: ["bar", "indeterminateBar"],
-					color: "info",
-					class: "bg-rui-info"
-				},
-				{
-					slots: ["bar", "indeterminateBar"],
-					color: "success",
-					class: "bg-rui-success"
-				},
-				{
-					slots: ["bar", "indeterminateBar"],
-					color: "inherit",
-					class: "bg-current"
-				}
-			]
-		});
 		const hasLabel = computed(() => __props.showLabel && __props.variant !== ProgressVariant.indeterminate);
 		/**
 		* The font size that fits the widest label (`100%`) inside the ring, solved against the chord

package/dist/components/progress/RuiProgress.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiProgress.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_normalizeClass","_unref","_normalizeStyle","_createCommentVNode","_createElementVNode","_toDisplayString"],"sources":["../../../src/components/progress/RuiProgress.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { ContextColorsType } from '@/consts/colors';\nimport { ProgressVariant } from '@/components/progress/progress-props';\nimport { tv } from '@/utils/tv';\n\nexport interface Props {\n  /**\n   * in percentage value, required when variant === determinate or buffer\n   * Ranges from 0 to 100.\n   */\n  value?: number;\n  /**\n   * in percentage value, required when variant === buffer\n   * Ranges from 0 to 100.\n   */\n  bufferValue?: number;\n  variant?: ProgressVariant;\n  color?: ContextColorsType | 'inherit';\n  circular?: boolean;\n  showLabel?: boolean;\n  /**\n   * Sets the stroke thickness in pixels\n   */\n  thickness?: number | string;\n  /**\n   * only used for circular progress\n   */\n  size?: number | string;\n  /**\n   * What is loading, as the progress bar's accessible name (\"Loading\" when not given)\n   */\n  ariaLabel?: string;\n}\n\ndefineOptions({\n  name: 'RuiProgress',\n});\n\nconst {\n  value = 0,\n  bufferValue = 0,\n  variant = ProgressVariant.determinate,\n  color = 'inherit',\n  circular = false,\n  showLabel = false,\n  thickness = 4,\n  size = 40,\n  ariaLabel = 'Loading',\n} = defineProps<Props>();\n\ndefineSlots<Record<string, never>>();\n\nconst CIRCLE_RADIUS = 20;\nconst CIRCLE_CIRCUMFERENCE = 2 * Math.PI * CIRCLE_RADIUS; // ~125.66\n/** width of `100%` in ems, measured with tabular figures */\nconst LABEL_WIDTH_EM = 2.95;\n/** keeps the label off the stroke rather than merely inside it */\nconst LABEL_BREATHING_ROOM = 0.9;\n/** below this font size a label inside the ring is unreadable, so the ring drops it rather than change its footprint */\nconst MIN_INSIDE_LABEL_PX = 9;\n\nfunction clampPercent(val: number | undefined): number {\n  return Math.max(0, Math.min(val ?? 100, 100));\n}\n\nconst progressStyles = tv({\n  slots: {\n    wrapper: '',\n    progressbar: 'w-full overflow-hidden relative rounded-full',\n    rail: 'w-full h-full',\n    bar: 'transition-all duration-150 ease-in-out absolute left-0 top-0 h-full w-full',\n    indeterminateBar: 'absolute left-0 top-0 h-full w-auto transition-transform duration-200 ease-linear origin-left animate-slide-rail',\n    bufferDots: 'absolute h-0 w-[200%] -top-px -left-full border-dashed border-y-[0.2rem] animate-buffer-pulse',\n    bufferRail: 'w-full h-full transition-transform duration-200 ease-linear origin-left',\n    circularContainer: 'inline-block relative',\n    svg: 'block',\n    circle: 'stroke-current',\n    circleTrack: '',\n    label: 'text-rui-text',\n  },\n  variants: {\n    color: {\n      primary: { circularContainer: 'text-rui-primary' },\n      secondary: { circularContainer: 'text-rui-secondary' },\n      error: { circularContainer: 'text-rui-error' },\n      warning: { circularContainer: 'text-rui-warning' },\n      info: { circularContainer: 'text-rui-info' },\n      success: { circularContainer: 'text-rui-success' },\n      inherit: { circularContainer: 'text-current' },\n    },\n    variant: {\n      [ProgressVariant.determinate]: { svg: '-rotate-90' },\n      [ProgressVariant.indeterminate]: {\n        svg: 'animate-circular-spin',\n        circle: 'animate-collapse-stroke [stroke-dasharray:80px,200px] [stroke-linecap:round]',\n      },\n      [ProgressVariant.buffer]: {},\n    },\n    circular: {\n      true: { wrapper: 'inline-flex' },\n      false: { wrapper: 'w-full' },\n    },\n    hasLabel: {\n      true: { wrapper: 'inline-flex items-center relative' },\n    },\n  },\n  compoundVariants: [\n    // Linear label\n    { circular: false, hasLabel: true, class: { label: 'block text-sm ml-4 text-rui-text-secondary tabular-nums' } },\n    // Circular label (overlays the circle, font size derived from `size`)\n    { circular: true, hasLabel: true, class: { label: 'absolute inset-0 flex items-center justify-center leading-none font-medium tabular-nums whitespace-nowrap' } },\n  ],\n  compoundSlots: [\n    // Track behind the bar: one neutral for every named color, neutral-700 in dark like the footer stepper pills, which reads on a near-black page\n    { slots: ['rail'], color: ['primary', 'secondary', 'error', 'warning', 'info', 'success'], class: 'bg-rui-neutral-200 dark:bg-rui-neutral-700' },\n    { slots: ['bufferDots'], color: ['primary', 'secondary', 'error', 'warning', 'info', 'success'], class: 'border-rui-neutral-200 dark:border-rui-neutral-700' },\n    { slots: ['circleTrack'], color: ['primary', 'secondary', 'error', 'warning', 'info', 'success'], class: 'stroke-rui-neutral-200 dark:stroke-rui-neutral-700' },\n    // `inherit` keeps a tint of whatever color it is given\n    { slots: ['rail', 'bufferDots'], color: 'inherit', class: 'bg-current opacity-20 border-current' },\n    { slots: ['circleTrack'], color: 'inherit', class: 'stroke-current opacity-20' },\n\n    // Bar fill (active progress)\n    { slots: ['bar', 'indeterminateBar'], color: 'primary', class: 'bg-rui-primary' },\n    { slots: ['bar', 'indeterminateBar'], color: 'secondary', class: 'bg-rui-secondary' },\n    { slots: ['bar', 'indeterminateBar'], color: 'error', class: 'bg-rui-error' },\n    { slots: ['bar', 'indeterminateBar'], color: 'warning', class: 'bg-rui-warning' },\n    { slots: ['bar', 'indeterminateBar'], color: 'info', class: 'bg-rui-info' },\n    { slots: ['bar', 'indeterminateBar'], color: 'success', class: 'bg-rui-success' },\n    { slots: ['bar', 'indeterminateBar'], color: 'inherit', class: 'bg-current' },\n  ],\n});\n\nconst hasLabel = computed<boolean>(() => showLabel && variant !== ProgressVariant.indeterminate);\n\n/**\n * The font size that fits the widest label (`100%`) inside the ring, solved against the chord\n * it spans. Always computed for that widest label so the text does not resize as the value climbs.\n */\nconst insideLabelFit = computed<number>(() => {\n  const innerRadius = Math.max((+size - 2 * +thickness) / 2, 0);\n  return (LABEL_BREATHING_ROOM * 2 * innerRadius) / Math.sqrt(LABEL_WIDTH_EM ** 2 + 1);\n});\n\nconst labelFits = computed<boolean>(() => get(insideLabelFit) >= MIN_INSIDE_LABEL_PX);\n\nconst ui = computed<ReturnType<typeof progressStyles>>(() => progressStyles({\n  color,\n  variant,\n  circular,\n  hasLabel: get(hasLabel),\n}));\n\nconst currentValue = computed<number>(() => clampPercent(value));\n\n/** An indeterminate bar has no value to report, so it leaves `aria-valuenow` off. */\nconst ariaValueNow = computed<number | undefined>(() =>\n  variant === ProgressVariant.indeterminate ? undefined : get(currentValue));\n\nconst label = computed<string>(() => `${Math.floor(get(currentValue))}%`);\n\nconst progress = computed<number>(() => -100 + get(currentValue));\n\nconst barStyle = computed<Record<string, string>>(() => ({\n  transform: `translateX(${get(progress)}%)`,\n}));\n\nconst bufferRailStyle = computed<Record<string, string>>(() => ({\n  transform: `translateX(${-100 + clampPercent(bufferValue)}%)`,\n}));\n\nconst linearStyle = computed<Record<string, string>>(() => ({\n  height: `${+thickness}px`,\n}));\n\nconst circularSize = computed<Record<string, string>>(() => ({\n  width: `${+size}px`,\n  height: `${+size}px`,\n}));\n\nconst circularGeometry = computed<{ scaledThickness: number; viewSize: number }>(() => {\n  const scaledThickness = (+thickness * 32) / +size;\n  return { scaledThickness, viewSize: 40 + scaledThickness };\n});\n\n/**\n * The label inside the ring scales with both `size` and `thickness`. The fit is capped by\n * a sublinear curve so large rings do not end up with an oversized number in the middle.\n */\nconst circularLabelStyle = computed<Record<string, string>>(() => ({\n  fontSize: `${Math.min(get(insideLabelFit), +size * 0.15 + 6)}px`,\n}));\n\nconst circularStrokeStyle = computed<Record<string, string>>(() => ({\n  strokeDasharray: `${CIRCLE_CIRCUMFERENCE}`,\n  strokeDashoffset: `${(get(progress) / 100) * -CIRCLE_CIRCUMFERENCE}`,\n  // the library's own motion, not Material's standard curve\n  transition: 'stroke-dashoffset 200ms ease-out',\n}));\n</script>\n\n<template>\n  <div :class=\"ui.wrapper()\">\n    <!-- Circular progress (not supported for buffer variant) -->\n    <div\n      v-if=\"circular && variant !== ProgressVariant.buffer\"\n      :aria-valuenow=\"ariaValueNow\"\n      :class=\"ui.circularContainer()\"\n      :style=\"circularSize\"\n      :data-variant=\"variant\"\n      :data-color=\"color\"\n      :aria-label=\"ariaLabel\"\n      :title=\"hasLabel && !labelFits ? label : undefined\"\n      aria-valuemax=\"100\"\n      aria-valuemin=\"0\"\n      role=\"progressbar\"\n    >\n      <svg\n        :class=\"ui.svg()\"\n        :viewBox=\"`0 0 ${circularGeometry.viewSize} ${circularGeometry.viewSize}`\"\n      >\n        <!-- Track behind the arc, mirroring the linear rail. Indeterminate spins, so it gets no track. -->\n        <circle\n          v-if=\"variant === ProgressVariant.determinate\"\n          cx=\"50%\"\n          cy=\"50%\"\n          fill=\"none\"\n          :r=\"CIRCLE_RADIUS\"\n          :class=\"ui.circleTrack()\"\n          :stroke-width=\"circularGeometry.scaledThickness\"\n        />\n        <circle\n          cx=\"50%\"\n          cy=\"50%\"\n          fill=\"none\"\n          :r=\"CIRCLE_RADIUS\"\n          :class=\"ui.circle()\"\n          :style=\"variant === ProgressVariant.determinate ? circularStrokeStyle : undefined\"\n          :stroke-width=\"circularGeometry.scaledThickness\"\n        />\n      </svg>\n      <div\n        v-if=\"hasLabel && labelFits\"\n        :class=\"ui.label()\"\n        :style=\"circularLabelStyle\"\n        aria-hidden=\"true\"\n      >\n        {{ label }}\n      </div>\n    </div>\n\n    <!-- Linear progress (also used as fallback for circular + buffer) -->\n    <div\n      v-else\n      :aria-valuenow=\"ariaValueNow\"\n      :class=\"ui.progressbar()\"\n      :style=\"linearStyle\"\n      :data-variant=\"variant\"\n      :data-color=\"color\"\n      :aria-label=\"ariaLabel\"\n      aria-valuemax=\"100\"\n      aria-valuemin=\"0\"\n      role=\"progressbar\"\n    >\n      <div\n        v-if=\"variant === ProgressVariant.buffer\"\n        :class=\"ui.bufferDots()\"\n      />\n      <div\n        :class=\"variant === ProgressVariant.buffer ? [ui.rail(), ui.bufferRail()] : ui.rail()\"\n        :style=\"variant === ProgressVariant.buffer ? bufferRailStyle : undefined\"\n        data-id=\"progress-rail\"\n      />\n      <div\n        v-if=\"variant === ProgressVariant.indeterminate\"\n        :class=\"ui.indeterminateBar()\"\n      />\n      <div\n        v-else\n        :class=\"ui.bar()\"\n        :style=\"barStyle\"\n      />\n    </div>\n\n    <!-- Linear label -->\n    <div\n      v-if=\"hasLabel && !circular\"\n      :class=\"ui.label()\"\n    >\n      {{ label }}\n    </div>\n  </div>\n</template>\n"],"mappings":"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"}
+{"version":3,"file":"RuiProgress.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_normalizeClass","_unref","_normalizeStyle","_createCommentVNode","_createElementVNode","_toDisplayString"],"sources":["../../../src/components/progress/RuiProgress.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue';\nimport type { ContextColorsType } from '@/consts/colors';\nimport { ProgressVariant } from '@/components/progress/progress-props';\nimport { progressStyles } from './progress-styles';\n\nexport interface Props {\n  /**\n   * in percentage value, required when variant === determinate or buffer\n   * Ranges from 0 to 100.\n   */\n  value?: number;\n  /**\n   * in percentage value, required when variant === buffer\n   * Ranges from 0 to 100.\n   */\n  bufferValue?: number;\n  variant?: ProgressVariant;\n  color?: ContextColorsType | 'inherit';\n  circular?: boolean;\n  showLabel?: boolean;\n  /**\n   * Sets the stroke thickness in pixels\n   */\n  thickness?: number | string;\n  /**\n   * only used for circular progress\n   */\n  size?: number | string;\n  /**\n   * What is loading, as the progress bar's accessible name (\"Loading\" when not given)\n   */\n  ariaLabel?: string;\n}\n\ndefineOptions({\n  name: 'RuiProgress',\n});\n\nconst {\n  value = 0,\n  bufferValue = 0,\n  variant = ProgressVariant.determinate,\n  color = 'inherit',\n  circular = false,\n  showLabel = false,\n  thickness = 4,\n  size = 40,\n  ariaLabel = 'Loading',\n} = defineProps<Props & /* @vue-ignore */ Omit<HTMLAttributes, keyof Props>>();\n\ndefineSlots<Record<string, never>>();\n\nconst CIRCLE_RADIUS = 20;\nconst CIRCLE_CIRCUMFERENCE = 2 * Math.PI * CIRCLE_RADIUS; // ~125.66\n/** width of `100%` in ems, measured with tabular figures */\nconst LABEL_WIDTH_EM = 2.95;\n/** keeps the label off the stroke rather than merely inside it */\nconst LABEL_BREATHING_ROOM = 0.9;\n/** below this font size a label inside the ring is unreadable, so the ring drops it rather than change its footprint */\nconst MIN_INSIDE_LABEL_PX = 9;\n\nfunction clampPercent(val: number | undefined): number {\n  return Math.max(0, Math.min(val ?? 100, 100));\n}\n\nconst hasLabel = computed<boolean>(() => showLabel && variant !== ProgressVariant.indeterminate);\n\n/**\n * The font size that fits the widest label (`100%`) inside the ring, solved against the chord\n * it spans. Always computed for that widest label so the text does not resize as the value climbs.\n */\nconst insideLabelFit = computed<number>(() => {\n  const innerRadius = Math.max((+size - 2 * +thickness) / 2, 0);\n  return (LABEL_BREATHING_ROOM * 2 * innerRadius) / Math.sqrt(LABEL_WIDTH_EM ** 2 + 1);\n});\n\nconst labelFits = computed<boolean>(() => get(insideLabelFit) >= MIN_INSIDE_LABEL_PX);\n\nconst ui = computed<ReturnType<typeof progressStyles>>(() => progressStyles({\n  color,\n  variant,\n  circular,\n  hasLabel: get(hasLabel),\n}));\n\nconst currentValue = computed<number>(() => clampPercent(value));\n\n/** An indeterminate bar has no value to report, so it leaves `aria-valuenow` off. */\nconst ariaValueNow = computed<number | undefined>(() =>\n  variant === ProgressVariant.indeterminate ? undefined : get(currentValue));\n\nconst label = computed<string>(() => `${Math.floor(get(currentValue))}%`);\n\nconst progress = computed<number>(() => -100 + get(currentValue));\n\nconst barStyle = computed<Record<string, string>>(() => ({\n  transform: `translateX(${get(progress)}%)`,\n}));\n\nconst bufferRailStyle = computed<Record<string, string>>(() => ({\n  transform: `translateX(${-100 + clampPercent(bufferValue)}%)`,\n}));\n\nconst linearStyle = computed<Record<string, string>>(() => ({\n  height: `${+thickness}px`,\n}));\n\nconst circularSize = computed<Record<string, string>>(() => ({\n  width: `${+size}px`,\n  height: `${+size}px`,\n}));\n\nconst circularGeometry = computed<{ scaledThickness: number; viewSize: number }>(() => {\n  const scaledThickness = (+thickness * 32) / +size;\n  return { scaledThickness, viewSize: 40 + scaledThickness };\n});\n\n/**\n * The label inside the ring scales with both `size` and `thickness`. The fit is capped by\n * a sublinear curve so large rings do not end up with an oversized number in the middle.\n */\nconst circularLabelStyle = computed<Record<string, string>>(() => ({\n  fontSize: `${Math.min(get(insideLabelFit), +size * 0.15 + 6)}px`,\n}));\n\nconst circularStrokeStyle = computed<Record<string, string>>(() => ({\n  strokeDasharray: `${CIRCLE_CIRCUMFERENCE}`,\n  strokeDashoffset: `${(get(progress) / 100) * -CIRCLE_CIRCUMFERENCE}`,\n  // the library's own motion, not Material's standard curve\n  transition: 'stroke-dashoffset 200ms ease-out',\n}));\n</script>\n\n<template>\n  <div :class=\"ui.wrapper()\">\n    <!-- Circular progress (not supported for buffer variant) -->\n    <div\n      v-if=\"circular && variant !== ProgressVariant.buffer\"\n      :aria-valuenow=\"ariaValueNow\"\n      :class=\"ui.circularContainer()\"\n      :style=\"circularSize\"\n      :data-variant=\"variant\"\n      :data-color=\"color\"\n      :aria-label=\"ariaLabel\"\n      :title=\"hasLabel && !labelFits ? label : undefined\"\n      aria-valuemax=\"100\"\n      aria-valuemin=\"0\"\n      role=\"progressbar\"\n    >\n      <svg\n        :class=\"ui.svg()\"\n        :viewBox=\"`0 0 ${circularGeometry.viewSize} ${circularGeometry.viewSize}`\"\n      >\n        <!-- Track behind the arc, mirroring the linear rail. Indeterminate spins, so it gets no track. -->\n        <circle\n          v-if=\"variant === ProgressVariant.determinate\"\n          cx=\"50%\"\n          cy=\"50%\"\n          fill=\"none\"\n          :r=\"CIRCLE_RADIUS\"\n          :class=\"ui.circleTrack()\"\n          :stroke-width=\"circularGeometry.scaledThickness\"\n        />\n        <circle\n          cx=\"50%\"\n          cy=\"50%\"\n          fill=\"none\"\n          :r=\"CIRCLE_RADIUS\"\n          :class=\"ui.circle()\"\n          :style=\"variant === ProgressVariant.determinate ? circularStrokeStyle : undefined\"\n          :stroke-width=\"circularGeometry.scaledThickness\"\n        />\n      </svg>\n      <div\n        v-if=\"hasLabel && labelFits\"\n        :class=\"ui.label()\"\n        :style=\"circularLabelStyle\"\n        aria-hidden=\"true\"\n      >\n        {{ label }}\n      </div>\n    </div>\n\n    <!-- Linear progress (also used as fallback for circular + buffer) -->\n    <div\n      v-else\n      :aria-valuenow=\"ariaValueNow\"\n      :class=\"ui.progressbar()\"\n      :style=\"linearStyle\"\n      :data-variant=\"variant\"\n      :data-color=\"color\"\n      :aria-label=\"ariaLabel\"\n      aria-valuemax=\"100\"\n      aria-valuemin=\"0\"\n      role=\"progressbar\"\n    >\n      <div\n        v-if=\"variant === ProgressVariant.buffer\"\n        :class=\"ui.bufferDots()\"\n      />\n      <div\n        :class=\"variant === ProgressVariant.buffer ? [ui.rail(), ui.bufferRail()] : ui.rail()\"\n        :style=\"variant === ProgressVariant.buffer ? bufferRailStyle : undefined\"\n        data-id=\"progress-rail\"\n      />\n      <div\n        v-if=\"variant === ProgressVariant.indeterminate\"\n        :class=\"ui.indeterminateBar()\"\n      />\n      <div\n        v-else\n        :class=\"ui.bar()\"\n        :style=\"barStyle\"\n      />\n    </div>\n\n    <!-- Linear label -->\n    <div\n      v-if=\"hasLabel && !circular\"\n      :class=\"ui.label()\"\n    >\n      {{ label }}\n    </div>\n  </div>\n</template>\n"],"mappings":"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"}

package/dist/components/progress/progress-styles.d.ts

@@ -0,0 +1,181 @@
+export declare const progressStyles: import("tailwind-variants").TVReturnType<{
+    color: {
+        primary: {
+            circularContainer: string;
+        };
+        secondary: {
+            circularContainer: string;
+        };
+        error: {
+            circularContainer: string;
+        };
+        warning: {
+            circularContainer: string;
+        };
+        info: {
+            circularContainer: string;
+        };
+        success: {
+            circularContainer: string;
+        };
+        inherit: {
+            circularContainer: string;
+        };
+    };
+    variant: {
+        determinate: {
+            svg: string;
+        };
+        indeterminate: {
+            svg: string;
+            circle: string;
+        };
+        buffer: {};
+    };
+    circular: {
+        true: {
+            wrapper: string;
+        };
+        false: {
+            wrapper: string;
+        };
+    };
+    hasLabel: {
+        true: {
+            wrapper: string;
+        };
+    };
+}, {
+    wrapper: string;
+    progressbar: string;
+    rail: string;
+    bar: string;
+    indeterminateBar: string;
+    bufferDots: string;
+    bufferRail: string;
+    circularContainer: string;
+    svg: string;
+    circle: string;
+    circleTrack: string;
+    label: string;
+}, undefined, {
+    color: {
+        primary: {
+            circularContainer: string;
+        };
+        secondary: {
+            circularContainer: string;
+        };
+        error: {
+            circularContainer: string;
+        };
+        warning: {
+            circularContainer: string;
+        };
+        info: {
+            circularContainer: string;
+        };
+        success: {
+            circularContainer: string;
+        };
+        inherit: {
+            circularContainer: string;
+        };
+    };
+    variant: {
+        determinate: {
+            svg: string;
+        };
+        indeterminate: {
+            svg: string;
+            circle: string;
+        };
+        buffer: {};
+    };
+    circular: {
+        true: {
+            wrapper: string;
+        };
+        false: {
+            wrapper: string;
+        };
+    };
+    hasLabel: {
+        true: {
+            wrapper: string;
+        };
+    };
+}, {
+    wrapper: string;
+    progressbar: string;
+    rail: string;
+    bar: string;
+    indeterminateBar: string;
+    bufferDots: string;
+    bufferRail: string;
+    circularContainer: string;
+    svg: string;
+    circle: string;
+    circleTrack: string;
+    label: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+    color: {
+        primary: {
+            circularContainer: string;
+        };
+        secondary: {
+            circularContainer: string;
+        };
+        error: {
+            circularContainer: string;
+        };
+        warning: {
+            circularContainer: string;
+        };
+        info: {
+            circularContainer: string;
+        };
+        success: {
+            circularContainer: string;
+        };
+        inherit: {
+            circularContainer: string;
+        };
+    };
+    variant: {
+        determinate: {
+            svg: string;
+        };
+        indeterminate: {
+            svg: string;
+            circle: string;
+        };
+        buffer: {};
+    };
+    circular: {
+        true: {
+            wrapper: string;
+        };
+        false: {
+            wrapper: string;
+        };
+    };
+    hasLabel: {
+        true: {
+            wrapper: string;
+        };
+    };
+}, {
+    wrapper: string;
+    progressbar: string;
+    rail: string;
+    bar: string;
+    indeterminateBar: string;
+    bufferDots: string;
+    bufferRail: string;
+    circularContainer: string;
+    svg: string;
+    circle: string;
+    circleTrack: string;
+    label: string;
+}>>;