@rotki/ui-library 2.14.1 → 2.16.0

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

@@ -0,0 +1,254 @@
+import { tv } from "../../utils/tv.js";
+import { ProgressVariant } from "./progress-props.js";
+import { computed, createCommentVNode, createElementBlock, createElementVNode, defineComponent, normalizeClass, normalizeStyle, openBlock, toDisplayString, unref } from "vue";
+import { get } from "@vueuse/shared";
+//#region src/components/progress/RuiProgress.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = [
+	"aria-valuenow",
+	"data-variant",
+	"data-color"
+];
+var _hoisted_2 = ["viewBox"];
+var _hoisted_3 = ["stroke-width"];
+var _hoisted_4 = [
+	"aria-valuenow",
+	"data-variant",
+	"data-color"
+];
+var CIRCLE_RADIUS = 20;
+var RuiProgress_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	name: "RuiProgress",
+	__name: "RuiProgress",
+	props: {
+		value: { default: 0 },
+		bufferValue: { default: 0 },
+		variant: { default: () => ProgressVariant.determinate },
+		color: { default: "inherit" },
+		circular: {
+			type: Boolean,
+			default: false
+		},
+		showLabel: {
+			type: Boolean,
+			default: false
+		},
+		thickness: { default: 4 },
+		size: { default: 40 }
+	},
+	setup(__props) {
+		const CIRCLE_CIRCUMFERENCE = 2 * Math.PI * CIRCLE_RADIUS;
+		function clampPercent(val) {
+			return Math.max(0, Math.min(val ?? 100, 100));
+		}
+		const progressStyles = tv({
+			slots: {
+				wrapper: "",
+				progressbar: "w-full overflow-hidden relative",
+				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",
+				label: "dark:text-white"
+			},
+			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" }
+			}, {
+				circular: true,
+				hasLabel: true,
+				class: { label: "absolute inset-0 flex items-center justify-center text-[0.6rem] leading-none" }
+			}],
+			compoundSlots: [
+				{
+					slots: ["rail", "bufferDots"],
+					color: "primary",
+					class: "bg-rui-primary/20 border-rui-primary/20"
+				},
+				{
+					slots: ["rail", "bufferDots"],
+					color: "secondary",
+					class: "bg-rui-secondary/20 border-rui-secondary/20"
+				},
+				{
+					slots: ["rail", "bufferDots"],
+					color: "error",
+					class: "bg-rui-error/20 border-rui-error/20"
+				},
+				{
+					slots: ["rail", "bufferDots"],
+					color: "warning",
+					class: "bg-rui-warning/20 border-rui-warning/20"
+				},
+				{
+					slots: ["rail", "bufferDots"],
+					color: "info",
+					class: "bg-rui-info/20 border-rui-info/20"
+				},
+				{
+					slots: ["rail", "bufferDots"],
+					color: "success",
+					class: "bg-rui-success/20 border-rui-success/20"
+				},
+				{
+					slots: ["rail", "bufferDots"],
+					color: "inherit",
+					class: "bg-current opacity-20 border-current"
+				},
+				{
+					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);
+		const ui = computed(() => progressStyles({
+			color: __props.color,
+			variant: __props.variant,
+			circular: __props.circular,
+			hasLabel: get(hasLabel)
+		}));
+		const currentValue = computed(() => clampPercent(__props.value));
+		const label = computed(() => `${Math.floor(get(currentValue))}%`);
+		const progress = computed(() => -100 + get(currentValue));
+		const barStyle = computed(() => ({ transform: `translateX(${get(progress)}%)` }));
+		const bufferRailStyle = computed(() => ({ transform: `translateX(${-100 + clampPercent(__props.bufferValue)}%)` }));
+		const linearStyle = computed(() => ({ height: `${+__props.thickness}px` }));
+		const circularSize = computed(() => ({
+			width: `${+__props.size}px`,
+			height: `${+__props.size}px`
+		}));
+		const circularGeometry = computed(() => {
+			const scaledThickness = +__props.thickness * 32 / +__props.size;
+			return {
+				scaledThickness,
+				viewSize: 40 + scaledThickness
+			};
+		});
+		const circularStrokeStyle = computed(() => ({
+			strokeDasharray: `${CIRCLE_CIRCUMFERENCE}`,
+			strokeDashoffset: `${get(progress) / 100 * -CIRCLE_CIRCUMFERENCE}`,
+			transition: "stroke-dashoffset 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms"
+		}));
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", { class: normalizeClass(unref(ui).wrapper()) }, [__props.circular && __props.variant !== unref(ProgressVariant).buffer ? (openBlock(), createElementBlock("div", {
+				key: 0,
+				"aria-valuenow": __props.value,
+				class: normalizeClass(unref(ui).circularContainer()),
+				style: normalizeStyle(unref(circularSize)),
+				"data-variant": __props.variant,
+				"data-color": __props.color,
+				"aria-valuemax": "100",
+				"aria-valuemin": "0",
+				role: "progressbar"
+			}, [(openBlock(), createElementBlock("svg", {
+				class: normalizeClass(unref(ui).svg()),
+				viewBox: `0 0 ${unref(circularGeometry).viewSize} ${unref(circularGeometry).viewSize}`
+			}, [createElementVNode("circle", {
+				cx: "50%",
+				cy: "50%",
+				fill: "none",
+				r: CIRCLE_RADIUS,
+				class: normalizeClass(unref(ui).circle()),
+				style: normalizeStyle(__props.variant === unref(ProgressVariant).determinate ? unref(circularStrokeStyle) : void 0),
+				"stroke-width": unref(circularGeometry).scaledThickness
+			}, null, 14, _hoisted_3)], 10, _hoisted_2)), unref(hasLabel) ? (openBlock(), createElementBlock("div", {
+				key: 0,
+				class: normalizeClass(unref(ui).label())
+			}, toDisplayString(unref(label)), 3)) : createCommentVNode("", true)], 14, _hoisted_1)) : (openBlock(), createElementBlock("div", {
+				key: 1,
+				"aria-valuenow": __props.value,
+				class: normalizeClass(unref(ui).progressbar()),
+				style: normalizeStyle(unref(linearStyle)),
+				"data-variant": __props.variant,
+				"data-color": __props.color,
+				"aria-valuemax": "100",
+				"aria-valuemin": "0",
+				role: "progressbar"
+			}, [
+				__props.variant === unref(ProgressVariant).buffer ? (openBlock(), createElementBlock("div", {
+					key: 0,
+					class: normalizeClass(unref(ui).bufferDots())
+				}, null, 2)) : createCommentVNode("", true),
+				createElementVNode("div", {
+					class: normalizeClass(__props.variant === unref(ProgressVariant).buffer ? [unref(ui).rail(), unref(ui).bufferRail()] : unref(ui).rail()),
+					style: normalizeStyle(__props.variant === unref(ProgressVariant).buffer ? unref(bufferRailStyle) : void 0)
+				}, null, 6),
+				__props.variant === unref(ProgressVariant).indeterminate ? (openBlock(), createElementBlock("div", {
+					key: 1,
+					class: normalizeClass(unref(ui).indeterminateBar())
+				}, null, 2)) : (openBlock(), createElementBlock("div", {
+					key: 2,
+					class: normalizeClass(unref(ui).bar()),
+					style: normalizeStyle(unref(barStyle))
+				}, null, 6))
+			], 14, _hoisted_4)), unref(hasLabel) && !__props.circular ? (openBlock(), createElementBlock("div", {
+				key: 2,
+				class: normalizeClass(unref(ui).label())
+			}, toDisplayString(unref(label)), 3)) : createCommentVNode("", true)], 2);
+		};
+	}
+});
+//#endregion
+export { RuiProgress_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=RuiProgress.vue_vue_type_script_setup_true_lang.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RuiProgress.vue_vue_type_script_setup_true_lang.js","names":[],"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   * @example - 0 <= value <= 100\n   */\n  value?: number;\n  /**\n   * in percentage value, required when variant === buffer\n   * @example - 0 <= value <= 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\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} = defineProps<Props>();\n\ndefineSlots<Record<string, never>>();\n\nconst CIRCLE_RADIUS = 20;\nconst CIRCLE_CIRCUMFERENCE = 2 * Math.PI * CIRCLE_RADIUS; // ~125.66\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',\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    label: 'dark:text-white',\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' } },\n    // Circular label (overlays the circle)\n    { circular: true, hasLabel: true, class: { label: 'absolute inset-0 flex items-center justify-center text-[0.6rem] leading-none' } },\n  ],\n  compoundSlots: [\n    // Rail background (track behind the bar)\n    { slots: ['rail', 'bufferDots'], color: 'primary', class: 'bg-rui-primary/20 border-rui-primary/20' },\n    { slots: ['rail', 'bufferDots'], color: 'secondary', class: 'bg-rui-secondary/20 border-rui-secondary/20' },\n    { slots: ['rail', 'bufferDots'], color: 'error', class: 'bg-rui-error/20 border-rui-error/20' },\n    { slots: ['rail', 'bufferDots'], color: 'warning', class: 'bg-rui-warning/20 border-rui-warning/20' },\n    { slots: ['rail', 'bufferDots'], color: 'info', class: 'bg-rui-info/20 border-rui-info/20' },\n    { slots: ['rail', 'bufferDots'], color: 'success', class: 'bg-rui-success/20 border-rui-success/20' },\n    { slots: ['rail', 'bufferDots'], color: 'inherit', class: 'bg-current opacity-20 border-current' },\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\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\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\nconst circularStrokeStyle = computed<Record<string, string>>(() => ({\n  strokeDasharray: `${CIRCLE_CIRCUMFERENCE}`,\n  strokeDashoffset: `${(get(progress) / 100) * -CIRCLE_CIRCUMFERENCE}`,\n  transition: 'stroke-dashoffset 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',\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=\"value\"\n      :class=\"ui.circularContainer()\"\n      :style=\"circularSize\"\n      :data-variant=\"variant\"\n      :data-color=\"color\"\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        <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\"\n        :class=\"ui.label()\"\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=\"value\"\n      :class=\"ui.progressbar()\"\n      :style=\"linearStyle\"\n      :data-variant=\"variant\"\n      :data-color=\"color\"\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      />\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":";;;;;;;;;;;;;;;;;AA+CA,IAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;EACtB,MAAM,uBAAuB,IAAI,KAAK,KAAK;EAE3C,SAAS,aAAa,KAAiC;AACrD,UAAO,KAAK,IAAI,GAAG,KAAK,IAAI,OAAO,KAAK,IAAI,CAAC;;EAG/C,MAAM,iBAAiB,GAAG;GACxB,OAAO;IACL,SAAS;IACT,aAAa;IACb,MAAM;IACN,KAAK;IACL,kBAAkB;IAClB,YAAY;IACZ,YAAY;IACZ,mBAAmB;IACnB,KAAK;IACL,QAAQ;IACR,OAAO;IACR;GACD,UAAU;IACR,OAAO;KACL,SAAS,EAAE,mBAAmB,oBAAoB;KAClD,WAAW,EAAE,mBAAmB,sBAAsB;KACtD,OAAO,EAAE,mBAAmB,kBAAkB;KAC9C,SAAS,EAAE,mBAAmB,oBAAoB;KAClD,MAAM,EAAE,mBAAmB,iBAAiB;KAC5C,SAAS,EAAE,mBAAmB,oBAAoB;KAClD,SAAS,EAAE,mBAAmB,gBAAA;KAC/B;IACD,SAAS;MACN,gBAAgB,cAAc,EAAE,KAAK,cAAc;MACnD,gBAAgB,gBAAgB;MAC/B,KAAK;MACL,QAAQ;MACT;MACA,gBAAgB,SAAS,EAAA;KAC3B;IACD,UAAU;KACR,MAAM,EAAE,SAAS,eAAe;KAChC,OAAO,EAAE,SAAS,UAAA;KACnB;IACD,UAAU,EACR,MAAM,EAAE,SAAS,qCAAqC,EAAA;IAEzD;GACD,kBAAkB,CAEhB;IAAE,UAAU;IAAO,UAAU;IAAM,OAAO,EAAE,OAAO,sBAAA;IAAwB,EAE3E;IAAE,UAAU;IAAM,UAAU;IAAM,OAAO,EAAE,OAAO,gFAAA;IAAkF,CACrI;GACD,eAAe;IAEb;KAAE,OAAO,CAAC,QAAQ,aAAa;KAAE,OAAO;KAAW,OAAO;KAA2C;IACrG;KAAE,OAAO,CAAC,QAAQ,aAAa;KAAE,OAAO;KAAa,OAAO;KAA+C;IAC3G;KAAE,OAAO,CAAC,QAAQ,aAAa;KAAE,OAAO;KAAS,OAAO;KAAuC;IAC/F;KAAE,OAAO,CAAC,QAAQ,aAAa;KAAE,OAAO;KAAW,OAAO;KAA2C;IACrG;KAAE,OAAO,CAAC,QAAQ,aAAa;KAAE,OAAO;KAAQ,OAAO;KAAqC;IAC5F;KAAE,OAAO,CAAC,QAAQ,aAAa;KAAE,OAAO;KAAW,OAAO;KAA2C;IACrG;KAAE,OAAO,CAAC,QAAQ,aAAa;KAAE,OAAO;KAAW,OAAO;KAAwC;IAGlG;KAAE,OAAO,CAAC,OAAO,mBAAmB;KAAE,OAAO;KAAW,OAAO;KAAkB;IACjF;KAAE,OAAO,CAAC,OAAO,mBAAmB;KAAE,OAAO;KAAa,OAAO;KAAoB;IACrF;KAAE,OAAO,CAAC,OAAO,mBAAmB;KAAE,OAAO;KAAS,OAAO;KAAgB;IAC7E;KAAE,OAAO,CAAC,OAAO,mBAAmB;KAAE,OAAO;KAAW,OAAO;KAAkB;IACjF;KAAE,OAAO,CAAC,OAAO,mBAAmB;KAAE,OAAO;KAAQ,OAAO;KAAe;IAC3E;KAAE,OAAO,CAAC,OAAO,mBAAmB;KAAE,OAAO;KAAW,OAAO;KAAkB;IACjF;KAAE,OAAO,CAAC,OAAO,mBAAmB;KAAE,OAAO;KAAW,OAAO;;;GAElE,CAAC;EAEF,MAAM,WAAW,eAAwB,QAAA,aAAa,QAAA,YAAY,gBAAgB,cAAc;EAEhG,MAAM,KAAK,eAAkD,eAAe;GAC1E,OAAI,QAAA;GACJ,SAAM,QAAA;GACN,UAAO,QAAA;GACP,UAAU,IAAI,SAAA;GACf,CAAC,CAAC;EAEH,MAAM,eAAe,eAAuB,aAAa,QAAA,MAAM,CAAC;EAEhE,MAAM,QAAQ,eAAuB,GAAG,KAAK,MAAM,IAAI,aAAa,CAAC,CAAC,GAAG;EAEzE,MAAM,WAAW,eAAuB,OAAO,IAAI,aAAa,CAAC;EAEjE,MAAM,WAAW,gBAAwC,EACvD,WAAW,cAAc,IAAI,SAAS,CAAC,KACxC,EAAE;EAEH,MAAM,kBAAkB,gBAAwC,EAC9D,WAAW,cAAc,OAAO,aAAa,QAAA,YAAY,CAAC,KAC3D,EAAE;EAEH,MAAM,cAAc,gBAAwC,EAC1D,QAAQ,GAAG,CAAC,QAAA,UAAU,KACvB,EAAE;EAEH,MAAM,eAAe,gBAAwC;GAC3D,OAAO,GAAG,CAAC,QAAA,KAAK;GAChB,QAAQ,GAAG,CAAC,QAAA,KAAK;GAClB,EAAE;EAEH,MAAM,mBAAmB,eAA8D;GACrF,MAAM,kBAAmB,CAAC,QAAA,YAAY,KAAM,CAAC,QAAA;AAC7C,UAAO;IAAE;IAAiB,UAAU,KAAK;IAAiB;IAC1D;EAEF,MAAM,sBAAsB,gBAAwC;GAClE,iBAAiB,GAAG;GACpB,kBAAkB,GAAI,IAAI,SAAS,GAAG,MAAO,CAAC;GAC9C,YAAY;GACb,EAAE;;uBAID,mBAyEM,OAAA,EAzEA,OAAK,eAAE,MAAA,GAAE,CAAC,SAAO,CAAA,EAAA,EAAA,CAGb,QAAA,YAAY,QAAA,YAAY,MAAA,gBAAe,CAAC,UAAA,WAAA,EADhD,mBA+BM,OAAA;;IA7BH,iBAAe,QAAA;IACf,OAAK,eAAE,MAAA,GAAE,CAAC,mBAAiB,CAAA;IAC3B,OAAK,eAAE,MAAA,aAAY,CAAA;IACnB,gBAAc,QAAA;IACd,cAAY,QAAA;IACb,iBAAc;IACd,iBAAc;IACd,MAAK;qBAEL,mBAaM,OAAA;IAZH,OAAK,eAAE,MAAA,GAAE,CAAC,KAAG,CAAA;IACb,SAAO,OAAS,MAAA,iBAAgB,CAAC,SAAQ,GAAI,MAAA,iBAAgB,CAAC;OAE/D,mBAQE,UAAA;IAPA,IAAG;IACH,IAAG;IACH,MAAK;IACJ,GAAG;IACH,OAAK,eAAE,MAAA,GAAE,CAAC,QAAM,CAAA;IAChB,OAAK,eAAE,QAAA,YAAY,MAAA,gBAAe,CAAC,cAAc,MAAA,oBAAmB,GAAG,KAAA,EAAS;IAChF,gBAAc,MAAA,iBAAgB,CAAC;gDAI5B,MAAA,SAAQ,IAAA,WAAA,EADhB,mBAKM,OAAA;;IAHH,OAAK,eAAE,MAAA,GAAE,CAAC,OAAK,CAAA;sBAEb,MAAA,MAAK,CAAA,EAAA,EAAA,IAAA,mBAAA,IAAA,KAAA,CAAA,EAAA,IAAA,WAAA,KAAA,WAAA,EAKZ,mBA4BM,OAAA;;IA1BH,iBAAe,QAAA;IACf,OAAK,eAAE,MAAA,GAAE,CAAC,aAAW,CAAA;IACrB,OAAK,eAAE,MAAA,YAAW,CAAA;IAClB,gBAAc,QAAA;IACd,cAAY,QAAA;IACb,iBAAc;IACd,iBAAc;IACd,MAAK;;IAGG,QAAA,YAAY,MAAA,gBAAe,CAAC,UAAA,WAAA,EADpC,mBAGE,OAAA;;KADC,OAAK,eAAE,MAAA,GAAE,CAAC,YAAU,CAAA;;IAEvB,mBAGE,OAAA;KAFC,OAAK,eAAE,QAAA,YAAY,MAAA,gBAAe,CAAC,SAAM,CAAI,MAAA,GAAE,CAAC,MAAI,EAAI,MAAA,GAAE,CAAC,YAAU,CAAA,GAAM,MAAA,GAAE,CAAC,MAAI,CAAA;KAClF,OAAK,eAAE,QAAA,YAAY,MAAA,gBAAe,CAAC,SAAS,MAAA,gBAAe,GAAG,KAAA,EAAA;;IAGzD,QAAA,YAAY,MAAA,gBAAe,CAAC,iBAAA,WAAA,EADpC,mBAGE,OAAA;;KADC,OAAK,eAAE,MAAA,GAAE,CAAC,kBAAgB,CAAA;iCAE7B,mBAIE,OAAA;;KAFC,OAAK,eAAE,MAAA,GAAE,CAAC,KAAG,CAAA;KACb,OAAK,eAAE,MAAA,SAAQ,CAAA;;wBAMZ,MAAA,SAAQ,IAAA,CAAK,QAAA,YAAA,WAAA,EADrB,mBAKM,OAAA;;IAHH,OAAK,eAAE,MAAA,GAAE,CAAC,OAAK,CAAA;sBAEb,MAAA,MAAK,CAAA,EAAA,EAAA,IAAA,mBAAA,IAAA,KAAA,CAAA,EAAA,EAAA"}

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

@@ -0,0 +1,6 @@
+export declare const ProgressVariant: {
+    readonly determinate: "determinate";
+    readonly indeterminate: "indeterminate";
+    readonly buffer: "buffer";
+};
+export type ProgressVariant = (typeof ProgressVariant)[keyof typeof ProgressVariant];

package/dist/components/progress/progress-props.js

@@ -0,0 +1,10 @@
+//#region src/components/progress/progress-props.ts
+var ProgressVariant = {
+	determinate: "determinate",
+	indeterminate: "indeterminate",
+	buffer: "buffer"
+};
+//#endregion
+export { ProgressVariant };
+
+//# sourceMappingURL=progress-props.js.map

package/dist/components/progress/progress-props.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"progress-props.js","names":[],"sources":["../../../src/components/progress/progress-props.ts"],"sourcesContent":["export const ProgressVariant = {\n  determinate: 'determinate',\n  indeterminate: 'indeterminate',\n  buffer: 'buffer',\n} as const;\n\nexport type ProgressVariant = (typeof ProgressVariant)[keyof typeof ProgressVariant];\n"],"mappings":";AAAA,IAAa,kBAAkB;CAC7B,aAAa;CACb,eAAe;CACf,QAAQ;CACT"}

package/dist/components/steppers/RuiFooterStepper.js

@@ -0,0 +1,7 @@
+import RuiFooterStepper_vue_vue_type_script_setup_true_lang_default from "./RuiFooterStepper.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/steppers/RuiFooterStepper.vue
+var RuiFooterStepper_default = RuiFooterStepper_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { RuiFooterStepper_default as default };
+
+//# sourceMappingURL=RuiFooterStepper.js.map

package/dist/components/steppers/RuiFooterStepper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RuiFooterStepper.js","names":[],"sources":["../../../src/components/steppers/RuiFooterStepper.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport RuiButton from '@/components/buttons/button/RuiButton.vue';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport RuiProgress from '@/components/progress/RuiProgress.vue';\nimport { FooterStepperVariant } from '@/components/steppers/footer-stepper-variant';\nimport { tv } from '@/utils/tv';\n\nexport interface Props {\n  pages: number;\n  variant?: FooterStepperVariant;\n  arrowButtons?: boolean;\n  hideButtons?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiFooterStepper',\n});\n\nconst modelValue = defineModel<number>({ default: 1 });\n\nconst {\n  pages,\n  variant: variantProp = FooterStepperVariant.numeric,\n  arrowButtons = false,\n  hideButtons = false,\n} = defineProps<Props>();\n\nconst footerStepper = {\n  arrowButton: '!bg-white !disabled:bg-white/60 dark:!disabled:bg-[rgb(50,50,50)]',\n  bullet: tv({\n    base: 'rounded-full h-2 w-2 bg-black/[0.26] dark:bg-white/30 transition-colors cursor-pointer hover:bg-rui-grey-300 dark:hover:bg-rui-grey-400',\n    variants: {\n      active: {\n        true: 'bg-rui-primary dark:bg-rui-primary hover:bg-rui-primary dark:hover:bg-rui-primary',\n      },\n    },\n  }),\n  pill: tv({\n    base: 'rounded-full h-2 w-full bg-rui-grey-200 dark:bg-rui-grey-300 transition-colors',\n    variants: {\n      active: {\n        true: 'bg-rui-primary dark:bg-rui-primary',\n      },\n    },\n  }),\n};\n\nfunction onChange(delta: number): void {\n  set(modelValue, get(modelValue) + delta);\n}\n\nfunction onPrev(): void {\n  if (get(modelValue) > 1)\n    onChange(-1);\n}\n\nfunction onNext(): void {\n  if (get(modelValue) < pages)\n    onChange(1);\n}\n\nfunction onClick(index: number): void {\n  onChange(index - get(modelValue));\n}\n</script>\n\n<template>\n  <div\n    role=\"navigation\"\n    aria-label=\"Step navigation\"\n    class=\"flex items-center justify-between gap-x-4 transition-all duration-150\"\n    :data-variant=\"variantProp\"\n  >\n    <template v-if=\"variantProp === FooterStepperVariant.pill\">\n      <div\n        data-id=\"pills\"\n        class=\"flex w-full gap-x-3\"\n      >\n        <span\n          v-for=\"i in pages\"\n          :key=\"i\"\n          :aria-current=\"modelValue === i ? 'step' : undefined\"\n          :class=\"footerStepper.pill({ active: modelValue === i })\"\n        />\n      </div>\n    </template>\n    <template v-else>\n      <RuiButton\n        v-if=\"!hideButtons\"\n        aria-label=\"Previous\"\n        :class=\"arrowButtons ? footerStepper.arrowButton : undefined\"\n        :disabled=\"modelValue <= 1\"\n        :icon=\"arrowButtons\"\n        :variant=\"arrowButtons ? 'outlined' : 'text'\"\n        color=\"primary\"\n        @click=\"onPrev()\"\n      >\n        <template\n          v-if=\"!arrowButtons\"\n          #prepend\n        >\n          <RuiIcon\n            :size=\"18\"\n            name=\"lu-chevron-left\"\n          />\n        </template>\n        <span v-if=\"!arrowButtons\">Back</span>\n        <RuiIcon\n          v-else\n          :size=\"24\"\n          name=\"lu-arrow-left\"\n        />\n      </RuiButton>\n      <span\n        v-if=\"variantProp === FooterStepperVariant.numeric\"\n        data-id=\"numeric\"\n        class=\"text-rui-text\"\n      >\n        {{ modelValue }}/{{ pages }}\n      </span>\n      <div\n        v-else-if=\"variantProp === FooterStepperVariant.bullet\"\n        data-id=\"bullets\"\n        class=\"flex gap-x-1\"\n      >\n        <span\n          v-for=\"i in pages\"\n          :key=\"i\"\n          :aria-current=\"modelValue === i ? 'step' : undefined\"\n          :class=\"footerStepper.bullet({ active: modelValue === i })\"\n          @click=\"onClick(i)\"\n        />\n      </div>\n      <RuiProgress\n        v-else-if=\"variantProp === FooterStepperVariant.progress\"\n        class=\"max-w-[60%]\"\n        color=\"primary\"\n        :value=\"(modelValue / pages) * 100\"\n      />\n      <RuiButton\n        v-if=\"!hideButtons\"\n        aria-label=\"Next\"\n        :class=\"arrowButtons ? footerStepper.arrowButton : undefined\"\n        :disabled=\"modelValue >= pages\"\n        :icon=\"arrowButtons\"\n        :variant=\"arrowButtons ? 'outlined' : 'text'\"\n        color=\"primary\"\n        @click=\"onNext()\"\n      >\n        <span v-if=\"!arrowButtons\">Next</span>\n        <RuiIcon\n          v-else\n          :size=\"24\"\n          name=\"lu-arrow-right\"\n        />\n        <template\n          v-if=\"!arrowButtons\"\n          #append\n        >\n          <RuiIcon\n            :size=\"18\"\n            name=\"lu-chevron-right\"\n          />\n        </template>\n      </RuiButton>\n    </template>\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/steppers/RuiFooterStepper.vue.d.ts

@@ -1,6 +1,7 @@
+import { FooterStepperVariant } from '../../components/steppers/footer-stepper-variant.js';
 export interface Props {
     pages: number;
-    variant?: 'numeric' | 'bullet' | 'progress' | 'pill';
+    variant?: FooterStepperVariant;
     arrowButtons?: boolean;
     hideButtons?: boolean;
 }

package/dist/components/steppers/RuiFooterStepper.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,164 @@
+import { tv } from "../../utils/tv.js";
+import RuiIcon_default from "../icons/RuiIcon.js";
+import RuiProgress_default from "../progress/RuiProgress.js";
+import RuiButton_default from "../buttons/button/RuiButton.js";
+import { FooterStepperVariant } from "./footer-stepper-variant.js";
+import { Fragment, createBlock, createCommentVNode, createElementBlock, createSlots, createVNode, defineComponent, mergeModels, normalizeClass, openBlock, renderList, toDisplayString, unref, useModel, withCtx } from "vue";
+import { get, set } from "@vueuse/shared";
+//#region src/components/steppers/RuiFooterStepper.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["data-variant"];
+var _hoisted_2 = {
+	key: 0,
+	"data-id": "pills",
+	class: "flex w-full gap-x-3"
+};
+var _hoisted_3 = ["aria-current"];
+var _hoisted_4 = { key: 0 };
+var _hoisted_5 = {
+	key: 1,
+	"data-id": "numeric",
+	class: "text-rui-text"
+};
+var _hoisted_6 = {
+	key: 2,
+	"data-id": "bullets",
+	class: "flex gap-x-1"
+};
+var _hoisted_7 = ["aria-current", "onClick"];
+var _hoisted_8 = { key: 0 };
+var RuiFooterStepper_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	name: "RuiFooterStepper",
+	__name: "RuiFooterStepper",
+	props: /* @__PURE__ */ mergeModels({
+		pages: {},
+		variant: { default: () => FooterStepperVariant.numeric },
+		arrowButtons: {
+			type: Boolean,
+			default: false
+		},
+		hideButtons: {
+			type: Boolean,
+			default: false
+		}
+	}, {
+		"modelValue": { default: 1 },
+		"modelModifiers": {}
+	}),
+	emits: ["update:modelValue"],
+	setup(__props) {
+		const modelValue = useModel(__props, "modelValue");
+		const footerStepper = {
+			arrowButton: "!bg-white !disabled:bg-white/60 dark:!disabled:bg-[rgb(50,50,50)]",
+			bullet: tv({
+				base: "rounded-full h-2 w-2 bg-black/[0.26] dark:bg-white/30 transition-colors cursor-pointer hover:bg-rui-grey-300 dark:hover:bg-rui-grey-400",
+				variants: { active: { true: "bg-rui-primary dark:bg-rui-primary hover:bg-rui-primary dark:hover:bg-rui-primary" } }
+			}),
+			pill: tv({
+				base: "rounded-full h-2 w-full bg-rui-grey-200 dark:bg-rui-grey-300 transition-colors",
+				variants: { active: { true: "bg-rui-primary dark:bg-rui-primary" } }
+			})
+		};
+		function onChange(delta) {
+			set(modelValue, get(modelValue) + delta);
+		}
+		function onPrev() {
+			if (get(modelValue) > 1) onChange(-1);
+		}
+		function onNext() {
+			if (get(modelValue) < __props.pages) onChange(1);
+		}
+		function onClick(index) {
+			onChange(index - get(modelValue));
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				role: "navigation",
+				"aria-label": "Step navigation",
+				class: "flex items-center justify-between gap-x-4 transition-all duration-150",
+				"data-variant": __props.variant
+			}, [__props.variant === unref(FooterStepperVariant).pill ? (openBlock(), createElementBlock("div", _hoisted_2, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.pages, (i) => {
+				return openBlock(), createElementBlock("span", {
+					key: i,
+					"aria-current": modelValue.value === i ? "step" : void 0,
+					class: normalizeClass(footerStepper.pill({ active: modelValue.value === i }))
+				}, null, 10, _hoisted_3);
+			}), 128))])) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+				!__props.hideButtons ? (openBlock(), createBlock(RuiButton_default, {
+					key: 0,
+					"aria-label": "Previous",
+					class: normalizeClass(__props.arrowButtons ? footerStepper.arrowButton : void 0),
+					disabled: modelValue.value <= 1,
+					icon: __props.arrowButtons,
+					variant: __props.arrowButtons ? "outlined" : "text",
+					color: "primary",
+					onClick: _cache[0] || (_cache[0] = ($event) => onPrev())
+				}, createSlots({
+					default: withCtx(() => [!__props.arrowButtons ? (openBlock(), createElementBlock("span", _hoisted_4, "Back")) : (openBlock(), createBlock(RuiIcon_default, {
+						key: 1,
+						size: 24,
+						name: "lu-arrow-left"
+					}))]),
+					_: 2
+				}, [!__props.arrowButtons ? {
+					name: "prepend",
+					fn: withCtx(() => [createVNode(RuiIcon_default, {
+						size: 18,
+						name: "lu-chevron-left"
+					})]),
+					key: "0"
+				} : void 0]), 1032, [
+					"class",
+					"disabled",
+					"icon",
+					"variant"
+				])) : createCommentVNode("", true),
+				__props.variant === unref(FooterStepperVariant).numeric ? (openBlock(), createElementBlock("span", _hoisted_5, toDisplayString(modelValue.value) + "/" + toDisplayString(__props.pages), 1)) : __props.variant === unref(FooterStepperVariant).bullet ? (openBlock(), createElementBlock("div", _hoisted_6, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.pages, (i) => {
+					return openBlock(), createElementBlock("span", {
+						key: i,
+						"aria-current": modelValue.value === i ? "step" : void 0,
+						class: normalizeClass(footerStepper.bullet({ active: modelValue.value === i })),
+						onClick: ($event) => onClick(i)
+					}, null, 10, _hoisted_7);
+				}), 128))])) : __props.variant === unref(FooterStepperVariant).progress ? (openBlock(), createBlock(RuiProgress_default, {
+					key: 3,
+					class: "max-w-[60%]",
+					color: "primary",
+					value: modelValue.value / __props.pages * 100
+				}, null, 8, ["value"])) : createCommentVNode("", true),
+				!__props.hideButtons ? (openBlock(), createBlock(RuiButton_default, {
+					key: 4,
+					"aria-label": "Next",
+					class: normalizeClass(__props.arrowButtons ? footerStepper.arrowButton : void 0),
+					disabled: modelValue.value >= __props.pages,
+					icon: __props.arrowButtons,
+					variant: __props.arrowButtons ? "outlined" : "text",
+					color: "primary",
+					onClick: _cache[1] || (_cache[1] = ($event) => onNext())
+				}, createSlots({
+					default: withCtx(() => [!__props.arrowButtons ? (openBlock(), createElementBlock("span", _hoisted_8, "Next")) : (openBlock(), createBlock(RuiIcon_default, {
+						key: 1,
+						size: 24,
+						name: "lu-arrow-right"
+					}))]),
+					_: 2
+				}, [!__props.arrowButtons ? {
+					name: "append",
+					fn: withCtx(() => [createVNode(RuiIcon_default, {
+						size: 18,
+						name: "lu-chevron-right"
+					})]),
+					key: "0"
+				} : void 0]), 1032, [
+					"class",
+					"disabled",
+					"icon",
+					"variant"
+				])) : createCommentVNode("", true)
+			], 64))], 8, _hoisted_1);
+		};
+	}
+});
+//#endregion
+export { RuiFooterStepper_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=RuiFooterStepper.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/steppers/RuiFooterStepper.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RuiFooterStepper.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/steppers/RuiFooterStepper.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport RuiButton from '@/components/buttons/button/RuiButton.vue';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport RuiProgress from '@/components/progress/RuiProgress.vue';\nimport { FooterStepperVariant } from '@/components/steppers/footer-stepper-variant';\nimport { tv } from '@/utils/tv';\n\nexport interface Props {\n  pages: number;\n  variant?: FooterStepperVariant;\n  arrowButtons?: boolean;\n  hideButtons?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiFooterStepper',\n});\n\nconst modelValue = defineModel<number>({ default: 1 });\n\nconst {\n  pages,\n  variant: variantProp = FooterStepperVariant.numeric,\n  arrowButtons = false,\n  hideButtons = false,\n} = defineProps<Props>();\n\nconst footerStepper = {\n  arrowButton: '!bg-white !disabled:bg-white/60 dark:!disabled:bg-[rgb(50,50,50)]',\n  bullet: tv({\n    base: 'rounded-full h-2 w-2 bg-black/[0.26] dark:bg-white/30 transition-colors cursor-pointer hover:bg-rui-grey-300 dark:hover:bg-rui-grey-400',\n    variants: {\n      active: {\n        true: 'bg-rui-primary dark:bg-rui-primary hover:bg-rui-primary dark:hover:bg-rui-primary',\n      },\n    },\n  }),\n  pill: tv({\n    base: 'rounded-full h-2 w-full bg-rui-grey-200 dark:bg-rui-grey-300 transition-colors',\n    variants: {\n      active: {\n        true: 'bg-rui-primary dark:bg-rui-primary',\n      },\n    },\n  }),\n};\n\nfunction onChange(delta: number): void {\n  set(modelValue, get(modelValue) + delta);\n}\n\nfunction onPrev(): void {\n  if (get(modelValue) > 1)\n    onChange(-1);\n}\n\nfunction onNext(): void {\n  if (get(modelValue) < pages)\n    onChange(1);\n}\n\nfunction onClick(index: number): void {\n  onChange(index - get(modelValue));\n}\n</script>\n\n<template>\n  <div\n    role=\"navigation\"\n    aria-label=\"Step navigation\"\n    class=\"flex items-center justify-between gap-x-4 transition-all duration-150\"\n    :data-variant=\"variantProp\"\n  >\n    <template v-if=\"variantProp === FooterStepperVariant.pill\">\n      <div\n        data-id=\"pills\"\n        class=\"flex w-full gap-x-3\"\n      >\n        <span\n          v-for=\"i in pages\"\n          :key=\"i\"\n          :aria-current=\"modelValue === i ? 'step' : undefined\"\n          :class=\"footerStepper.pill({ active: modelValue === i })\"\n        />\n      </div>\n    </template>\n    <template v-else>\n      <RuiButton\n        v-if=\"!hideButtons\"\n        aria-label=\"Previous\"\n        :class=\"arrowButtons ? footerStepper.arrowButton : undefined\"\n        :disabled=\"modelValue <= 1\"\n        :icon=\"arrowButtons\"\n        :variant=\"arrowButtons ? 'outlined' : 'text'\"\n        color=\"primary\"\n        @click=\"onPrev()\"\n      >\n        <template\n          v-if=\"!arrowButtons\"\n          #prepend\n        >\n          <RuiIcon\n            :size=\"18\"\n            name=\"lu-chevron-left\"\n          />\n        </template>\n        <span v-if=\"!arrowButtons\">Back</span>\n        <RuiIcon\n          v-else\n          :size=\"24\"\n          name=\"lu-arrow-left\"\n        />\n      </RuiButton>\n      <span\n        v-if=\"variantProp === FooterStepperVariant.numeric\"\n        data-id=\"numeric\"\n        class=\"text-rui-text\"\n      >\n        {{ modelValue }}/{{ pages }}\n      </span>\n      <div\n        v-else-if=\"variantProp === FooterStepperVariant.bullet\"\n        data-id=\"bullets\"\n        class=\"flex gap-x-1\"\n      >\n        <span\n          v-for=\"i in pages\"\n          :key=\"i\"\n          :aria-current=\"modelValue === i ? 'step' : undefined\"\n          :class=\"footerStepper.bullet({ active: modelValue === i })\"\n          @click=\"onClick(i)\"\n        />\n      </div>\n      <RuiProgress\n        v-else-if=\"variantProp === FooterStepperVariant.progress\"\n        class=\"max-w-[60%]\"\n        color=\"primary\"\n        :value=\"(modelValue / pages) * 100\"\n      />\n      <RuiButton\n        v-if=\"!hideButtons\"\n        aria-label=\"Next\"\n        :class=\"arrowButtons ? footerStepper.arrowButton : undefined\"\n        :disabled=\"modelValue >= pages\"\n        :icon=\"arrowButtons\"\n        :variant=\"arrowButtons ? 'outlined' : 'text'\"\n        color=\"primary\"\n        @click=\"onNext()\"\n      >\n        <span v-if=\"!arrowButtons\">Next</span>\n        <RuiIcon\n          v-else\n          :size=\"24\"\n          name=\"lu-arrow-right\"\n        />\n        <template\n          v-if=\"!arrowButtons\"\n          #append\n        >\n          <RuiIcon\n            :size=\"18\"\n            name=\"lu-chevron-right\"\n          />\n        </template>\n      </RuiButton>\n    </template>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAkBA,MAAM,aAAa,SAAmB,SAAA,aAAgB;EAStD,MAAM,gBAAgB;GACpB,aAAa;GACb,QAAQ,GAAG;IACT,MAAM;IACN,UAAU,EACR,QAAQ,EACN,MAAM,qFACP,EAAA;IAEJ,CAAC;GACF,MAAM,GAAG;IACP,MAAM;IACN,UAAU,EACR,QAAQ,EACN,MAAM,sCACP,EAAA;IAEJ,CAAA;GACF;EAED,SAAS,SAAS,OAAqB;AACrC,OAAI,YAAY,IAAI,WAAW,GAAG,MAAM;;EAG1C,SAAS,SAAe;AACtB,OAAI,IAAI,WAAW,GAAG,EACpB,UAAS,GAAG;;EAGhB,SAAS,SAAe;AACtB,OAAI,IAAI,WAAW,GAAG,QAAA,MACpB,UAAS,EAAE;;EAGf,SAAS,QAAQ,OAAqB;AACpC,YAAS,QAAQ,IAAI,WAAW,CAAC;;;uBAKjC,mBAmGM,OAAA;IAlGJ,MAAK;IACL,cAAW;IACX,OAAM;IACL,gBAAc,QAAA;OAEC,QAAA,YAAgB,MAAA,qBAAoB,CAAC,QAAA,WAAA,EACnD,mBAUM,OAVN,YAUM,EAAA,UAAA,KAAA,EANJ,mBAKE,UAAA,MAAA,WAJY,QAAA,QAAL,MAAC;wBADV,mBAKE,QAAA;KAHC,KAAK;KACL,gBAAc,WAAA,UAAe,IAAC,SAAY,KAAA;KAC1C,OAAK,eAAE,cAAc,KAAI,EAAA,QAAW,WAAA,UAAe,GAAC,CAAA,CAAA;;gCAI3D,mBA+EW,UAAA,EAAA,KAAA,GAAA,EAAA;KA7EA,QAAA,eAAA,WAAA,EADT,YAyBY,mBAAA;;KAvBV,cAAW;KACV,OAAK,eAAE,QAAA,eAAe,cAAc,cAAc,KAAA,EAAS;KAC3D,UAAU,WAAA,SAAU;KACpB,MAAM,QAAA;KACN,SAAS,QAAA,eAAY,aAAA;KACtB,OAAM;KACL,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,QAAM;;4BAWwB,CAAA,CAAzB,QAAA,gBAAA,WAAA,EAAb,mBAAsC,QAAA,YAAX,OAAI,KAAA,WAAA,EAC/B,YAIE,iBAAA;;MAFC,MAAM;MACP,MAAK;;;SAZE,QAAA,eAAA;WACN;uBAKC,CAHF,YAGE,iBAAA;MAFC,MAAM;MACP,MAAK;;;;;;;;;IAWH,QAAA,YAAgB,MAAA,qBAAoB,CAAC,WAAA,WAAA,EAD7C,mBAMO,QANP,YAMO,gBADF,WAAA,MAAU,GAAG,MAAC,gBAAG,QAAA,MAAK,EAAA,EAAA,IAGd,QAAA,YAAgB,MAAA,qBAAoB,CAAC,UAAA,WAAA,EADlD,mBAYM,OAZN,YAYM,EAAA,UAAA,KAAA,EAPJ,mBAME,UAAA,MAAA,WALY,QAAA,QAAL,MAAC;yBADV,mBAME,QAAA;MAJC,KAAK;MACL,gBAAc,WAAA,UAAe,IAAC,SAAY,KAAA;MAC1C,OAAK,eAAE,cAAc,OAAM,EAAA,QAAW,WAAA,UAAe,GAAC,CAAA,CAAA;MACtD,UAAK,WAAE,QAAQ,EAAA;;mBAIP,QAAA,YAAgB,MAAA,qBAAoB,CAAC,YAAA,WAAA,EADlD,YAKE,qBAAA;;KAHA,OAAM;KACN,OAAM;KACL,OAAQ,WAAA,QAAa,QAAA,QAAK;;KAGpB,QAAA,eAAA,WAAA,EADT,YAyBY,mBAAA;;KAvBV,cAAW;KACV,OAAK,eAAE,QAAA,eAAe,cAAc,cAAc,KAAA,EAAS;KAC3D,UAAU,WAAA,SAAc,QAAA;KACxB,MAAM,QAAA;KACN,SAAS,QAAA,eAAY,aAAA;KACtB,OAAM;KACL,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,QAAM;;4BAEwB,CAAA,CAAzB,QAAA,gBAAA,WAAA,EAAb,mBAAsC,QAAA,YAAX,OAAI,KAAA,WAAA,EAC/B,YAIE,iBAAA;;MAFC,MAAM;MACP,MAAK;;;SAGE,QAAA,eAAA;WACN;uBAKC,CAHF,YAGE,iBAAA;MAFC,MAAM;MACP,MAAK"}

package/dist/components/steppers/RuiStepper.js

@@ -0,0 +1,7 @@
+import RuiStepper_vue_vue_type_script_setup_true_lang_default from "./RuiStepper.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/steppers/RuiStepper.vue
+var RuiStepper_default = RuiStepper_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { RuiStepper_default as default };
+
+//# sourceMappingURL=RuiStepper.js.map

package/dist/components/steppers/RuiStepper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RuiStepper.js","names":[],"sources":["../../../src/components/steppers/RuiStepper.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { VueClassValue } from '@/types/class-value';\nimport RuiProgress from '@/components/progress/RuiProgress.vue';\nimport RuiStepperCustomIcon from '@/components/steppers/RuiStepperCustomIcon.vue';\nimport RuiStepperIcon from '@/components/steppers/RuiStepperIcon.vue';\nimport { StepperOrientation, StepperState, type StepperStep } from '@/types/stepper';\nimport { tv } from '@/utils/tv';\n\nexport interface RuiStepperClassNames {\n  root?: VueClassValue;\n  title?: VueClassValue;\n  subtitle?: VueClassValue;\n}\n\nexport interface Props {\n  step?: number;\n  steps: StepperStep[];\n  iconTop?: boolean;\n  custom?: boolean;\n  classNames?: RuiStepperClassNames;\n  /** @deprecated Use `classNames.title` instead */\n  titleClass?: string;\n  /** @deprecated Use `classNames.subtitle` instead */\n  subtitleClass?: string;\n  orientation?: StepperOrientation;\n  keepActiveVisible?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiStepper',\n});\n\nconst {\n  step,\n  steps,\n  iconTop = false,\n  custom = false,\n  classNames,\n  titleClass = '',\n  subtitleClass = '',\n  orientation = StepperOrientation.horizontal,\n  keepActiveVisible = true,\n} = defineProps<Props>();\n\ndefineSlots<{\n  icon?: (props: { state: StepperState | undefined; index: number }) => any;\n}>();\n\nconst wrapperRef = useTemplateRef<HTMLDivElement>('wrapperRef');\n\nconst stepper = tv({\n  slots: {\n    root: 'flex no-scrollbar overflow-auto',\n    step: 'flex items-center px-6 relative',\n    title: '',\n    subtitle: '',\n    label: 'flex flex-col items-start text-left ml-2',\n    divider: 'border-rui-grey-400',\n  },\n  variants: {\n    orientation: {\n      [StepperOrientation.horizontal]: {\n        root: 'whitespace-nowrap lg:whitespace-normal',\n        step: '',\n        divider: 'block max-w-full min-w-[1rem] h-0 max-h-0 self-center -mx-4 my-0 border-t [flex:1_1_0]',\n      },\n      [StepperOrientation.vertical]: {\n        root: 'flex-col inline-flex',\n        step: 'px-0 py-6',\n        divider: 'block min-h-[3rem] min-w-0 max-h-full h-full self-start -my-4 mx-3 border-l',\n      },\n    },\n    state: {\n      [StepperState.inactive]: {\n        step: 'text-rui-text-disabled',\n        title: 'text-rui-text-secondary',\n        subtitle: 'text-rui-text',\n      },\n      [StepperState.active]: {\n        step: 'text-rui-text',\n        title: '',\n        subtitle: 'text-rui-text-secondary',\n      },\n      [StepperState.done]: {\n        step: 'text-rui-text',\n        title: '',\n        subtitle: 'text-rui-text-secondary',\n      },\n      [StepperState.error]: {\n        step: 'text-rui-error',\n        title: '',\n        subtitle: '',\n      },\n      [StepperState.warning]: {\n        step: 'text-rui-warning',\n        title: '',\n        subtitle: '',\n      },\n      [StepperState.info]: {\n        step: 'text-rui-info',\n        title: '',\n        subtitle: '',\n      },\n      [StepperState.success]: {\n        step: 'text-rui-success',\n        title: '',\n        subtitle: '',\n      },\n    },\n    iconTop: {\n      true: {\n        step: 'flex-col',\n        label: 'ml-0 mt-4 items-center text-center',\n      },\n    },\n    custom: {\n      true: {},\n      false: {},\n    },\n  },\n  compoundVariants: [\n    { custom: true, state: StepperState.inactive, class: { step: 'text-rui-text' } },\n    { orientation: StepperOrientation.vertical, custom: true, class: { divider: 'mx-5' } },\n    { orientation: StepperOrientation.vertical, iconTop: true, class: { divider: 'self-center mx-auto' } },\n  ],\n  defaultVariants: {\n    state: StepperState.inactive,\n    orientation: StepperOrientation.horizontal,\n    custom: false,\n  },\n});\n\n// Shared UI for layout props (no per-item state)\nconst ui = computed<ReturnType<typeof stepper>>(() => stepper({ orientation, custom, iconTop }));\n\n// Per-item UI that includes the step's state\nfunction stepUi(state: StepperState): ReturnType<typeof stepper> {\n  return stepper({ orientation, custom, iconTop, state });\n}\n\n// automatically set step state to stepper.\nconst renderedStep = computed<StepperStep[]>(() => {\n  if (step === undefined)\n    return steps;\n\n  return steps.map((item, index) => {\n    let stepStatus: StepperState = StepperState.inactive;\n\n    if (index + 1 === step)\n      stepStatus = StepperState.active;\n\n    if (index + 1 < step)\n      stepStatus = StepperState.done;\n\n    return {\n      ...item,\n      state: stepStatus,\n    };\n  });\n});\n\nfunction resolveState(state: StepperState | undefined): StepperState {\n  return state ?? StepperState.inactive;\n}\n\nwatch(() => step, () => {\n  if (!keepActiveVisible || orientation !== StepperOrientation.horizontal) {\n    return;\n  }\n\n  nextTick(() => {\n    const elem = get(wrapperRef);\n    if (!elem) {\n      return;\n    }\n    const activeStep = elem.querySelector('[data-active]');\n    activeStep?.scrollIntoView?.({\n      behavior: 'smooth',\n      inline: 'center',\n    });\n  });\n});\n</script>\n\n<template>\n  <div\n    ref=\"wrapperRef\"\n    role=\"list\"\n    aria-label=\"Progress steps\"\n    :class=\"ui.root()\"\n    :data-orientation=\"orientation\"\n    :data-icon-top=\"iconTop || undefined\"\n    :data-custom=\"custom || undefined\"\n  >\n    <template\n      v-for=\"({ title, description, state, loading }, index) in renderedStep\"\n      :key=\"index\"\n    >\n      <hr\n        v-if=\"index > 0\"\n        :class=\"ui.divider()\"\n      />\n      <div\n        role=\"listitem\"\n        :aria-current=\"state === StepperState.active ? 'step' : undefined\"\n        :data-state=\"resolveState(state)\"\n        :data-active=\"state === StepperState.active || undefined\"\n        :class=\"stepUi(resolveState(state)).step()\"\n      >\n        <slot\n          name=\"icon\"\n          v-bind=\"{ state, index: index + 1 }\"\n        >\n          <div class=\"relative flex py-2\">\n            <RuiStepperCustomIcon\n              v-if=\"custom\"\n              :index=\"index + 1\"\n              :state=\"state\"\n            />\n            <RuiStepperIcon\n              v-else\n              :index=\"index + 1\"\n              :state=\"state\"\n            />\n            <RuiProgress\n              v-if=\"loading\"\n              class=\"absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2\"\n              size=\"32\"\n              variant=\"indeterminate\"\n              circular\n              thickness=\"2\"\n              color=\"primary\"\n            />\n          </div>\n        </slot>\n        <div\n          v-if=\"title || description\"\n          :class=\"ui.label()\"\n          data-id=\"stepper-label\"\n        >\n          <span\n            v-if=\"title\"\n            :class=\"[stepUi(resolveState(state)).title(), custom && (classNames?.title ?? titleClass)]\"\n            class=\"text-subtitle-2\"\n          >\n            {{ title }}\n          </span>\n          <span\n            v-if=\"description\"\n            :class=\"[stepUi(resolveState(state)).subtitle(), custom && (classNames?.subtitle ?? subtitleClass)]\"\n            class=\"text-caption\"\n          >\n            {{ description }}\n          </span>\n        </div>\n      </div>\n    </template>\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/steppers/RuiStepper.vue.d.ts

@@ -1,10 +1,19 @@
+import type { VueClassValue } from '../../types/class-value';
 import { StepperOrientation, StepperState, type StepperStep } from '../../types/stepper.js';
+export interface RuiStepperClassNames {
+    root?: VueClassValue;
+    title?: VueClassValue;
+    subtitle?: VueClassValue;
+}
 export interface Props {
     step?: number;
     steps: StepperStep[];
     iconTop?: boolean;
     custom?: boolean;
+    classNames?: RuiStepperClassNames;
+    /** @deprecated Use `classNames.title` instead */
     titleClass?: string;
+    /** @deprecated Use `classNames.subtitle` instead */
     subtitleClass?: string;
     orientation?: StepperOrientation;
     keepActiveVisible?: boolean;