@rotki/ui-library 3.1.7 → 3.2.0

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

@@ -1 +1 @@
-{"version":3,"file":"RuiStepper.vue_vue_type_script_setup_true_lang.js","names":["$attrs","_openBlock","_createElementBlock","_mergeProps","_unref","_Fragment","_renderList","_normalizeClass","_createCommentVNode","_createElementVNode","_renderSlot","_createVNode","RuiStepperIcon","_createBlock","RuiProgress","_toDisplayString"],"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 RuiStepperIcon from '@/components/steppers/RuiStepperIcon.vue';\nimport { useKeyboardScroll } from '@/composables/keyboard-scroll';\nimport { StepperOrientation, StepperState, type StepperStep } from '@/types/stepper';\nimport { cn, 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  orientation?: StepperOrientation;\n  keepActiveVisible?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiStepper',\n  inheritAttrs: false,\n});\n\nconst {\n  step,\n  steps,\n  iconTop = false,\n  custom = false,\n  classNames,\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');\nconst scrollTabindex = useKeyboardScroll(wrapperRef);\n\nconst stepper = tv({\n  slots: {\n    // takes focus only while it overflows (see useKeyboardScroll); the ring sits inside the clip\n    root: 'flex no-scrollbar overflow-auto rounded-rui-control outline-hidden focus-visible:focus-ring focus-visible:-outline-offset-2',\n    step: 'flex items-center px-6 relative',\n    title: '',\n    subtitle: '',\n    label: 'flex flex-col items-start text-left ml-2',\n    // the connector is decoration, so it takes the light divider rather than a control's edge\n    divider: 'border-rui-divider',\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-4 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        // 4px in from the edge, so the scrolling root does not clip the active marker's halo\n        step: 'px-1 py-3',\n        // reaches into both steps' padding, so the line runs from just under one marker to just over the next\n        divider: 'block min-h-6 min-w-0 max-h-full h-full self-start -my-3 mx-4 border-l',\n      },\n    },\n    state: {\n      // an upcoming step is not disabled, so its text keeps the 4.5:1 of the secondary tone\n      [StepperState.inactive]: {\n        step: 'text-rui-text-disabled',\n        title: 'text-rui-text-secondary',\n        subtitle: 'text-rui-text-secondary',\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    // the line runs through the 32px marker's center\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/**\n * Resolves the stepper's classes for one step, which vary with the state that\n * step is in, which the shared `ui` above cannot carry because it resolves\n * once for the whole stepper.\n *\n * @param state - the state that step is in\n * @returns the stepper's classes with that state applied\n */\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    :tabindex=\"scrollTabindex\"\n    role=\"list\"\n    aria-label=\"Progress steps\"\n    :class=\"ui.root({ class: cn([classNames?.root, $attrs.class]) })\"\n    v-bind=\"{ ...$attrs, class: undefined }\"\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      <!-- a list may hold only its items, so the connector is drawn but kept out of the accessibility tree -->\n      <hr\n        v-if=\"index > 0\"\n        aria-hidden=\"true\"\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            <RuiStepperIcon\n              :index=\"index + 1\"\n              :state=\"state\"\n              :size=\"custom ? 'lg' : 'md'\"\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=\"custom ? 40 : 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]\"\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]\"\n            class=\"text-caption\"\n          >\n            {{ description }}\n          </span>\n        </div>\n      </div>\n    </template>\n  </div>\n</template>\n"],"mappings":"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"}
+{"version":3,"file":"RuiStepper.vue_vue_type_script_setup_true_lang.js","names":["$attrs","_openBlock","_createElementBlock","_mergeProps","_unref","_Fragment","_renderList","_normalizeClass","_createCommentVNode","_createElementVNode","_renderSlot","_createVNode","RuiStepperIcon","_createBlock","RuiProgress","_toDisplayString"],"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 RuiStepperIcon from '@/components/steppers/RuiStepperIcon.vue';\nimport { useKeyboardScroll } from '@/composables/keyboard-scroll';\nimport { StepperOrientation, StepperState, type StepperStep } from '@/types/stepper';\nimport { cn } from '@/utils/tv';\nimport { stepperStyles } from './stepper-styles';\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  orientation?: StepperOrientation;\n  keepActiveVisible?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiStepper',\n  inheritAttrs: false,\n});\n\nconst {\n  step,\n  steps,\n  iconTop = false,\n  custom = false,\n  classNames,\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');\nconst scrollTabindex = useKeyboardScroll(wrapperRef);\n\n// Shared UI for layout props (no per-item state)\nconst ui = computed<ReturnType<typeof stepperStyles>>(() => stepperStyles({ orientation, custom, iconTop }));\n\n/**\n * Resolves the stepper's classes for one step, which vary with the state that\n * step is in, which the shared `ui` above cannot carry because it resolves\n * once for the whole stepper.\n *\n * @param state - the state that step is in\n * @returns the stepper's classes with that state applied\n */\nfunction stepUi(state: StepperState): ReturnType<typeof stepperStyles> {\n  return stepperStyles({ 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    :tabindex=\"scrollTabindex\"\n    role=\"list\"\n    aria-label=\"Progress steps\"\n    :class=\"ui.root({ class: cn([classNames?.root, $attrs.class]) })\"\n    v-bind=\"{ ...$attrs, class: undefined }\"\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      <!-- a list may hold only its items, so the connector is drawn but kept out of the accessibility tree -->\n      <hr\n        v-if=\"index > 0\"\n        aria-hidden=\"true\"\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            <RuiStepperIcon\n              :index=\"index + 1\"\n              :state=\"state\"\n              :size=\"custom ? 'lg' : 'md'\"\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=\"custom ? 40 : 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]\"\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]\"\n            class=\"text-caption\"\n          >\n            {{ description }}\n          </span>\n        </div>\n      </div>\n    </template>\n  </div>\n</template>\n"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"RuiStepperIcon.js","names":["_sfc_main"],"sources":["../../../src/components/steppers/RuiStepperIcon.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { RuiIcons } from '@/icons';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport { StepperState } from '@/types/stepper';\nimport { tv } from '@/utils/tv';\n\nconst { state = StepperState.inactive, index, size = 'md' } = defineProps<{\n  state?: StepperState;\n  index: number;\n  /** md is 24px, the default stepper; lg is 32px, the `custom` one */\n  size?: 'md' | 'lg';\n}>();\n\nconst statusIcons: Partial<Record<StepperState, RuiIcons>> = {\n  [StepperState.success]: 'lu-circle-check',\n  [StepperState.error]: 'lu-circle-alert',\n  [StepperState.warning]: 'lu-triangle-alert',\n  [StepperState.info]: 'lu-info',\n};\n\n/**\n * The step marker: an outlined number ahead, a filled number with a soft halo\n * for the current step, and a tinted, primary-outlined check behind. A status state shows its\n * icon at full size in the step's own color.\n */\nconst stepperIcon = tv({\n  base: 'inline-flex shrink-0 items-center justify-center rounded-full font-semibold tabular-nums transition-colors',\n  variants: {\n    size: {\n      md: 'size-6 text-xs [--rui-icon-size:0.875rem]',\n      lg: 'size-8 text-sm [--rui-icon-size:1rem]',\n    },\n    state: {\n      [StepperState.inactive]: 'border border-rui-outline bg-rui-surface text-rui-text-secondary',\n      // the 10% tint vanishes on a dark page, so dark raises the halo and the done well\n      [StepperState.active]: 'bg-rui-primary-fill text-rui-primary-foreground ring-4 ring-rui-primary-soft dark:ring-rui-primary/30',\n      // a primary outline over the tint, so done sits between the filled current step and a neutral upcoming one\n      [StepperState.done]: 'border border-rui-primary bg-rui-primary-soft text-rui-primary dark:border-rui-primary-lighter dark:bg-rui-primary/20 dark:text-rui-primary-lighter',\n      [StepperState.error]: '',\n      [StepperState.warning]: '',\n      [StepperState.info]: '',\n      [StepperState.success]: '',\n    },\n    status: {\n      true: '![--rui-icon-size:100%]',\n      false: '',\n    },\n  },\n  defaultVariants: { size: 'md', state: StepperState.inactive, status: false },\n});\n\nconst statusIcon = computed<RuiIcons | undefined>(() => statusIcons[state]);\n</script>\n\n<template>\n  <span :class=\"stepperIcon({ size, state, status: !!statusIcon })\">\n    <RuiIcon\n      v-if=\"state === StepperState.done\"\n      name=\"lu-check\"\n    />\n    <RuiIcon\n      v-else-if=\"statusIcon\"\n      :name=\"statusIcon\"\n    />\n    <span v-else>{{ index }}</span>\n  </span>\n</template>\n"],"mappings":""}
+{"version":3,"file":"RuiStepperIcon.js","names":["_sfc_main"],"sources":["../../../src/components/steppers/RuiStepperIcon.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { RuiIcons } from '@/icons';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport { StepperState } from '@/types/stepper';\nimport { stepperIconStyles } from './stepper-icon-styles';\n\nconst { state = StepperState.inactive, index, size = 'md' } = defineProps<{\n  state?: StepperState;\n  index: number;\n  /** md is 24px, the default stepper; lg is 32px, the `custom` one */\n  size?: 'md' | 'lg';\n}>();\n\nconst statusIcons: Partial<Record<StepperState, RuiIcons>> = {\n  [StepperState.success]: 'lu-circle-check',\n  [StepperState.error]: 'lu-circle-alert',\n  [StepperState.warning]: 'lu-triangle-alert',\n  [StepperState.info]: 'lu-info',\n};\n\nconst statusIcon = computed<RuiIcons | undefined>(() => statusIcons[state]);\n</script>\n\n<template>\n  <span :class=\"stepperIconStyles({ size, state, status: !!statusIcon })\">\n    <RuiIcon\n      v-if=\"state === StepperState.done\"\n      name=\"lu-check\"\n    />\n    <RuiIcon\n      v-else-if=\"statusIcon\"\n      :name=\"statusIcon\"\n    />\n    <span v-else>{{ index }}</span>\n  </span>\n</template>\n"],"mappings":""}

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

@@ -1,6 +1,6 @@
 import { StepperState } from "../../types/stepper.js";
-import { tv } from "../../utils/tv.js";
 import RuiIcon_default from "../icons/RuiIcon.js";
+import { stepperIconStyles } from "./stepper-icon-styles.js";
 import { computed, createBlock, createElementBlock, defineComponent, normalizeClass, openBlock, toDisplayString, unref } from "vue";
 //#region src/components/steppers/RuiStepperIcon.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = { key: 2 };
@@ -18,41 +18,9 @@ var RuiStepperIcon_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ d
 			[StepperState.warning]: "lu-triangle-alert",
 			[StepperState.info]: "lu-info"
 		};
-		/**
-		* The step marker: an outlined number ahead, a filled number with a soft halo
-		* for the current step, and a tinted, primary-outlined check behind. A status state shows its
-		* icon at full size in the step's own color.
-		*/
-		const stepperIcon = tv({
-			base: "inline-flex shrink-0 items-center justify-center rounded-full font-semibold tabular-nums transition-colors",
-			variants: {
-				size: {
-					md: "size-6 text-xs [--rui-icon-size:0.875rem]",
-					lg: "size-8 text-sm [--rui-icon-size:1rem]"
-				},
-				state: {
-					[StepperState.inactive]: "border border-rui-outline bg-rui-surface text-rui-text-secondary",
-					[StepperState.active]: "bg-rui-primary-fill text-rui-primary-foreground ring-4 ring-rui-primary-soft dark:ring-rui-primary/30",
-					[StepperState.done]: "border border-rui-primary bg-rui-primary-soft text-rui-primary dark:border-rui-primary-lighter dark:bg-rui-primary/20 dark:text-rui-primary-lighter",
-					[StepperState.error]: "",
-					[StepperState.warning]: "",
-					[StepperState.info]: "",
-					[StepperState.success]: ""
-				},
-				status: {
-					true: "![--rui-icon-size:100%]",
-					false: ""
-				}
-			},
-			defaultVariants: {
-				size: "md",
-				state: StepperState.inactive,
-				status: false
-			}
-		});
 		const statusIcon = computed(() => statusIcons[__props.state]);
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("span", { class: normalizeClass(unref(stepperIcon)({
+			return openBlock(), createElementBlock("span", { class: normalizeClass(unref(stepperIconStyles)({
 				size: __props.size,
 				state: __props.state,
 				status: !!unref(statusIcon)

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

@@ -1 +1 @@
-{"version":3,"file":"RuiStepperIcon.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_normalizeClass","_unref","_createBlock","RuiIcon","_toDisplayString"],"sources":["../../../src/components/steppers/RuiStepperIcon.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { RuiIcons } from '@/icons';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport { StepperState } from '@/types/stepper';\nimport { tv } from '@/utils/tv';\n\nconst { state = StepperState.inactive, index, size = 'md' } = defineProps<{\n  state?: StepperState;\n  index: number;\n  /** md is 24px, the default stepper; lg is 32px, the `custom` one */\n  size?: 'md' | 'lg';\n}>();\n\nconst statusIcons: Partial<Record<StepperState, RuiIcons>> = {\n  [StepperState.success]: 'lu-circle-check',\n  [StepperState.error]: 'lu-circle-alert',\n  [StepperState.warning]: 'lu-triangle-alert',\n  [StepperState.info]: 'lu-info',\n};\n\n/**\n * The step marker: an outlined number ahead, a filled number with a soft halo\n * for the current step, and a tinted, primary-outlined check behind. A status state shows its\n * icon at full size in the step's own color.\n */\nconst stepperIcon = tv({\n  base: 'inline-flex shrink-0 items-center justify-center rounded-full font-semibold tabular-nums transition-colors',\n  variants: {\n    size: {\n      md: 'size-6 text-xs [--rui-icon-size:0.875rem]',\n      lg: 'size-8 text-sm [--rui-icon-size:1rem]',\n    },\n    state: {\n      [StepperState.inactive]: 'border border-rui-outline bg-rui-surface text-rui-text-secondary',\n      // the 10% tint vanishes on a dark page, so dark raises the halo and the done well\n      [StepperState.active]: 'bg-rui-primary-fill text-rui-primary-foreground ring-4 ring-rui-primary-soft dark:ring-rui-primary/30',\n      // a primary outline over the tint, so done sits between the filled current step and a neutral upcoming one\n      [StepperState.done]: 'border border-rui-primary bg-rui-primary-soft text-rui-primary dark:border-rui-primary-lighter dark:bg-rui-primary/20 dark:text-rui-primary-lighter',\n      [StepperState.error]: '',\n      [StepperState.warning]: '',\n      [StepperState.info]: '',\n      [StepperState.success]: '',\n    },\n    status: {\n      true: '![--rui-icon-size:100%]',\n      false: '',\n    },\n  },\n  defaultVariants: { size: 'md', state: StepperState.inactive, status: false },\n});\n\nconst statusIcon = computed<RuiIcons | undefined>(() => statusIcons[state]);\n</script>\n\n<template>\n  <span :class=\"stepperIcon({ size, state, status: !!statusIcon })\">\n    <RuiIcon\n      v-if=\"state === StepperState.done\"\n      name=\"lu-check\"\n    />\n    <RuiIcon\n      v-else-if=\"statusIcon\"\n      :name=\"statusIcon\"\n    />\n    <span v-else>{{ index }}</span>\n  </span>\n</template>\n"],"mappings":";;;;;;;;;;;;;;EAaA,MAAM,cAAuD;IAC1D,aAAa,UAAU;IACvB,aAAa,QAAQ;IACrB,aAAa,UAAU;IACvB,aAAa,OAAO;EACvB;;;;;;EAOA,MAAM,cAAc,GAAG;GACrB,MAAM;GACN,UAAU;IACR,MAAM;KACJ,IAAI;KACJ,IAAI;IACN;IACA,OAAO;MACJ,aAAa,WAAW;MAExB,aAAa,SAAS;MAEtB,aAAa,OAAO;MACpB,aAAa,QAAQ;MACrB,aAAa,UAAU;MACvB,aAAa,OAAO;MACpB,aAAa,UAAU;IAC1B;IACA,QAAQ;KACN,MAAM;KACN,OAAO;IACT;GACF;GACA,iBAAiB;IAAE,MAAM;IAAM,OAAO,aAAa;IAAU,QAAQ;GAAM;EAC7E,CAAC;EAED,MAAM,aAAa,eAAqC,YAAY,QAAA,MAAM;;GAIxE,OAAAA,UAAA,GAAAC,mBAUO,QAAA,EAVA,OAAKC,eAAEC,MAAA,WAAA,CAAW,CAAA;IAAA,MAAG,QAAA;IAAI,OAAE,QAAA;IAAK,QAAA,CAAA,CAAYA,MAAA,UAAA;GAAU,CAAA,CAAA,EAAA,GAAA,CAEnD,QAAA,UAAUA,MAAA,YAAA,CAAY,CAAC,QAD/BH,UAAA,GAAAI,YAGEC,iBAAA;;IADA,MAAK;GAGMF,CAAAA,KAAAA,MAAA,UAAA,KADbH,UAAA,GAAAI,YAGEC,iBAAA;;IADC,MAAMF,MAAA,UAAA;GAETH,GAAAA,MAAAA,GAAAA,CAAAA,MAAAA,CAAAA,MAAAA,UAAA,GAAAC,mBAA+B,QAAA,YAAAK,gBAAf,QAAA,KAAK,GAAA,CAAA,EAAA,GAAA,CAAA"}
+{"version":3,"file":"RuiStepperIcon.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_normalizeClass","_unref","_createBlock","RuiIcon","_toDisplayString"],"sources":["../../../src/components/steppers/RuiStepperIcon.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { RuiIcons } from '@/icons';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport { StepperState } from '@/types/stepper';\nimport { stepperIconStyles } from './stepper-icon-styles';\n\nconst { state = StepperState.inactive, index, size = 'md' } = defineProps<{\n  state?: StepperState;\n  index: number;\n  /** md is 24px, the default stepper; lg is 32px, the `custom` one */\n  size?: 'md' | 'lg';\n}>();\n\nconst statusIcons: Partial<Record<StepperState, RuiIcons>> = {\n  [StepperState.success]: 'lu-circle-check',\n  [StepperState.error]: 'lu-circle-alert',\n  [StepperState.warning]: 'lu-triangle-alert',\n  [StepperState.info]: 'lu-info',\n};\n\nconst statusIcon = computed<RuiIcons | undefined>(() => statusIcons[state]);\n</script>\n\n<template>\n  <span :class=\"stepperIconStyles({ size, state, status: !!statusIcon })\">\n    <RuiIcon\n      v-if=\"state === StepperState.done\"\n      name=\"lu-check\"\n    />\n    <RuiIcon\n      v-else-if=\"statusIcon\"\n      :name=\"statusIcon\"\n    />\n    <span v-else>{{ index }}</span>\n  </span>\n</template>\n"],"mappings":";;;;;;;;;;;;;;EAaA,MAAM,cAAuD;IAC1D,aAAa,UAAU;IACvB,aAAa,QAAQ;IACrB,aAAa,UAAU;IACvB,aAAa,OAAO;EACvB;EAEA,MAAM,aAAa,eAAqC,YAAY,QAAA,MAAM;;GAIxE,OAAAA,UAAA,GAAAC,mBAUO,QAAA,EAVA,OAAKC,eAAEC,MAAA,iBAAA,CAAiB,CAAA;IAAA,MAAG,QAAA;IAAI,OAAE,QAAA;IAAK,QAAA,CAAA,CAAYA,MAAA,UAAA;GAAU,CAAA,CAAA,EAAA,GAAA,CAEzD,QAAA,UAAUA,MAAA,YAAA,CAAY,CAAC,QAD/BH,UAAA,GAAAI,YAGEC,iBAAA;;IADA,MAAK;GAGMF,CAAAA,KAAAA,MAAA,UAAA,KADbH,UAAA,GAAAI,YAGEC,iBAAA;;IADC,MAAMF,MAAA,UAAA;GAETH,GAAAA,MAAAA,GAAAA,CAAAA,MAAAA,CAAAA,MAAAA,UAAA,GAAAC,mBAA+B,QAAA,YAAAK,gBAAf,QAAA,KAAK,GAAA,CAAA,EAAA,GAAA,CAAA"}

package/dist/components/steppers/footer-stepper-styles.d.ts

@@ -0,0 +1,28 @@
+export declare const footerStepperStyles: {
+    bullet: import("tailwind-variants").TVReturnType<{
+        active: {
+            true: "w-5 bg-rui-primary hover:bg-rui-primary dark:bg-rui-primary dark:hover:bg-rui-primary";
+        };
+    }, undefined, string, {
+        active: {
+            true: "w-5 bg-rui-primary hover:bg-rui-primary dark:bg-rui-primary dark:hover:bg-rui-primary";
+        };
+    }, undefined, import("tailwind-variants").TVReturnTypeLike<{
+        active: {
+            true: "w-5 bg-rui-primary hover:bg-rui-primary dark:bg-rui-primary dark:hover:bg-rui-primary";
+        };
+    }, undefined>>;
+    pill: import("tailwind-variants").TVReturnType<{
+        active: {
+            true: "bg-rui-primary dark:bg-rui-primary";
+        };
+    }, undefined, "rounded-full h-1.5 w-full bg-rui-neutral-200 dark:bg-rui-neutral-700 transition-colors", {
+        active: {
+            true: "bg-rui-primary dark:bg-rui-primary";
+        };
+    }, undefined, import("tailwind-variants").TVReturnTypeLike<{
+        active: {
+            true: "bg-rui-primary dark:bg-rui-primary";
+        };
+    }, undefined>>;
+};

package/dist/components/steppers/footer-stepper-styles.js

@@ -0,0 +1,16 @@
+import { tv } from "../../utils/tv.js";
+//#region src/components/steppers/footer-stepper-styles.ts
+var footerStepperStyles = {
+	bullet: tv({
+		base: ["h-2 w-2 rounded-full bg-rui-neutral-300 transition-[width,background-color] duration-200 ease-out dark:bg-rui-neutral-600", "hover:bg-rui-neutral-400 dark:hover:bg-rui-neutral-500 focus-visible:focus-ring outline-hidden"].join(" "),
+		variants: { active: { true: "w-5 bg-rui-primary hover:bg-rui-primary dark:bg-rui-primary dark:hover:bg-rui-primary" } }
+	}),
+	pill: tv({
+		base: "rounded-full h-1.5 w-full bg-rui-neutral-200 dark:bg-rui-neutral-700 transition-colors",
+		variants: { active: { true: "bg-rui-primary dark:bg-rui-primary" } }
+	})
+};
+//#endregion
+export { footerStepperStyles };
+
+//# sourceMappingURL=footer-stepper-styles.js.map

package/dist/components/steppers/footer-stepper-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"footer-stepper-styles.js","names":[],"sources":["../../../src/components/steppers/footer-stepper-styles.ts"],"sourcesContent":["import { tv } from '@/utils/tv';\n\nexport const footerStepperStyles = {\n  // the current bullet stretches into a short bar, so position reads without relying on color\n  bullet: tv({\n    base: [\n      'h-2 w-2 rounded-full bg-rui-neutral-300 transition-[width,background-color] duration-200 ease-out dark:bg-rui-neutral-600',\n      'hover:bg-rui-neutral-400 dark:hover:bg-rui-neutral-500 focus-visible:focus-ring outline-hidden',\n    ].join(' '),\n    variants: {\n      active: {\n        true: 'w-5 bg-rui-primary hover:bg-rui-primary dark:bg-rui-primary dark:hover:bg-rui-primary',\n      },\n    },\n  }),\n  pill: tv({\n    base: 'rounded-full h-1.5 w-full bg-rui-neutral-200 dark:bg-rui-neutral-700 transition-colors',\n    variants: {\n      active: {\n        true: 'bg-rui-primary dark:bg-rui-primary',\n      },\n    },\n  }),\n};\n"],"mappings":";;AAEA,IAAa,sBAAsB;CAEjC,QAAQ,GAAG;EACT,MAAM,CACJ,6HACA,gGACF,CAAC,CAAC,KAAK,GAAG;EACV,UAAU,EACR,QAAQ,EACN,MAAM,wFACR,EACF;CACF,CAAC;CACD,MAAM,GAAG;EACP,MAAM;EACN,UAAU,EACR,QAAQ,EACN,MAAM,qCACR,EACF;CACF,CAAC;AACH"}

package/dist/components/steppers/stepper-icon-styles.d.ts

@@ -0,0 +1,60 @@
+/**
+ * The step marker: an outlined number ahead, a filled number with a soft halo
+ * for the current step, and a tinted, primary-outlined check behind. A status state shows its
+ * icon at full size in the step's own color.
+ */
+export declare const stepperIconStyles: import("tailwind-variants").TVReturnType<{
+    size: {
+        md: "size-6 text-xs [--rui-icon-size:0.875rem]";
+        lg: "size-8 text-sm [--rui-icon-size:1rem]";
+    };
+    state: {
+        inactive: "border border-rui-outline bg-rui-surface text-rui-text-secondary";
+        active: "bg-rui-primary-fill text-rui-primary-foreground ring-4 ring-rui-primary-soft dark:ring-rui-primary/30";
+        done: "border border-rui-primary bg-rui-primary-soft text-rui-primary dark:border-rui-primary-lighter dark:bg-rui-primary/20 dark:text-rui-primary-lighter";
+        error: "";
+        warning: "";
+        info: "";
+        success: "";
+    };
+    status: {
+        true: "![--rui-icon-size:100%]";
+        false: "";
+    };
+}, undefined, "inline-flex shrink-0 items-center justify-center rounded-full font-semibold tabular-nums transition-colors", {
+    size: {
+        md: "size-6 text-xs [--rui-icon-size:0.875rem]";
+        lg: "size-8 text-sm [--rui-icon-size:1rem]";
+    };
+    state: {
+        inactive: "border border-rui-outline bg-rui-surface text-rui-text-secondary";
+        active: "bg-rui-primary-fill text-rui-primary-foreground ring-4 ring-rui-primary-soft dark:ring-rui-primary/30";
+        done: "border border-rui-primary bg-rui-primary-soft text-rui-primary dark:border-rui-primary-lighter dark:bg-rui-primary/20 dark:text-rui-primary-lighter";
+        error: "";
+        warning: "";
+        info: "";
+        success: "";
+    };
+    status: {
+        true: "![--rui-icon-size:100%]";
+        false: "";
+    };
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
+    size: {
+        md: "size-6 text-xs [--rui-icon-size:0.875rem]";
+        lg: "size-8 text-sm [--rui-icon-size:1rem]";
+    };
+    state: {
+        inactive: "border border-rui-outline bg-rui-surface text-rui-text-secondary";
+        active: "bg-rui-primary-fill text-rui-primary-foreground ring-4 ring-rui-primary-soft dark:ring-rui-primary/30";
+        done: "border border-rui-primary bg-rui-primary-soft text-rui-primary dark:border-rui-primary-lighter dark:bg-rui-primary/20 dark:text-rui-primary-lighter";
+        error: "";
+        warning: "";
+        info: "";
+        success: "";
+    };
+    status: {
+        true: "![--rui-icon-size:100%]";
+        false: "";
+    };
+}, undefined>>;

package/dist/components/steppers/stepper-icon-styles.js

@@ -0,0 +1,39 @@
+import { StepperState } from "../../types/stepper.js";
+import { tv } from "../../utils/tv.js";
+//#region src/components/steppers/stepper-icon-styles.ts
+/**
+* The step marker: an outlined number ahead, a filled number with a soft halo
+* for the current step, and a tinted, primary-outlined check behind. A status state shows its
+* icon at full size in the step's own color.
+*/
+var stepperIconStyles = tv({
+	base: "inline-flex shrink-0 items-center justify-center rounded-full font-semibold tabular-nums transition-colors",
+	variants: {
+		size: {
+			md: "size-6 text-xs [--rui-icon-size:0.875rem]",
+			lg: "size-8 text-sm [--rui-icon-size:1rem]"
+		},
+		state: {
+			[StepperState.inactive]: "border border-rui-outline bg-rui-surface text-rui-text-secondary",
+			[StepperState.active]: "bg-rui-primary-fill text-rui-primary-foreground ring-4 ring-rui-primary-soft dark:ring-rui-primary/30",
+			[StepperState.done]: "border border-rui-primary bg-rui-primary-soft text-rui-primary dark:border-rui-primary-lighter dark:bg-rui-primary/20 dark:text-rui-primary-lighter",
+			[StepperState.error]: "",
+			[StepperState.warning]: "",
+			[StepperState.info]: "",
+			[StepperState.success]: ""
+		},
+		status: {
+			true: "![--rui-icon-size:100%]",
+			false: ""
+		}
+	},
+	defaultVariants: {
+		size: "md",
+		state: StepperState.inactive,
+		status: false
+	}
+});
+//#endregion
+export { stepperIconStyles };
+
+//# sourceMappingURL=stepper-icon-styles.js.map

package/dist/components/steppers/stepper-icon-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stepper-icon-styles.js","names":[],"sources":["../../../src/components/steppers/stepper-icon-styles.ts"],"sourcesContent":["import { StepperState } from '@/types/stepper';\nimport { tv } from '@/utils/tv';\n\n/**\n * The step marker: an outlined number ahead, a filled number with a soft halo\n * for the current step, and a tinted, primary-outlined check behind. A status state shows its\n * icon at full size in the step's own color.\n */\nexport const stepperIconStyles = tv({\n  base: 'inline-flex shrink-0 items-center justify-center rounded-full font-semibold tabular-nums transition-colors',\n  variants: {\n    size: {\n      md: 'size-6 text-xs [--rui-icon-size:0.875rem]',\n      lg: 'size-8 text-sm [--rui-icon-size:1rem]',\n    },\n    state: {\n      [StepperState.inactive]: 'border border-rui-outline bg-rui-surface text-rui-text-secondary',\n      // the 10% tint vanishes on a dark page, so dark raises the halo and the done well\n      [StepperState.active]: 'bg-rui-primary-fill text-rui-primary-foreground ring-4 ring-rui-primary-soft dark:ring-rui-primary/30',\n      // a primary outline over the tint, so done sits between the filled current step and a neutral upcoming one\n      [StepperState.done]: 'border border-rui-primary bg-rui-primary-soft text-rui-primary dark:border-rui-primary-lighter dark:bg-rui-primary/20 dark:text-rui-primary-lighter',\n      [StepperState.error]: '',\n      [StepperState.warning]: '',\n      [StepperState.info]: '',\n      [StepperState.success]: '',\n    },\n    status: {\n      true: '![--rui-icon-size:100%]',\n      false: '',\n    },\n  },\n  defaultVariants: { size: 'md', state: StepperState.inactive, status: false },\n});\n"],"mappings":";;;;;;;;AAQA,IAAa,oBAAoB,GAAG;CAClC,MAAM;CACN,UAAU;EACR,MAAM;GACJ,IAAI;GACJ,IAAI;EACN;EACA,OAAO;IACJ,aAAa,WAAW;IAExB,aAAa,SAAS;IAEtB,aAAa,OAAO;IACpB,aAAa,QAAQ;IACrB,aAAa,UAAU;IACvB,aAAa,OAAO;IACpB,aAAa,UAAU;EAC1B;EACA,QAAQ;GACN,MAAM;GACN,OAAO;EACT;CACF;CACA,iBAAiB;EAAE,MAAM;EAAM,OAAO,aAAa;EAAU,QAAQ;CAAM;AAC7E,CAAC"}

package/dist/components/steppers/stepper-styles.d.ts

@@ -0,0 +1,202 @@
+export declare const stepperStyles: import("tailwind-variants").TVReturnType<{
+    orientation: {
+        horizontal: {
+            root: string;
+            step: string;
+            divider: string;
+        };
+        vertical: {
+            root: string;
+            step: string;
+            divider: string;
+        };
+    };
+    state: {
+        inactive: {
+            step: string;
+            title: string;
+            subtitle: string;
+        };
+        active: {
+            step: string;
+            title: string;
+            subtitle: string;
+        };
+        done: {
+            step: string;
+            title: string;
+            subtitle: string;
+        };
+        error: {
+            step: string;
+            title: string;
+            subtitle: string;
+        };
+        warning: {
+            step: string;
+            title: string;
+            subtitle: string;
+        };
+        info: {
+            step: string;
+            title: string;
+            subtitle: string;
+        };
+        success: {
+            step: string;
+            title: string;
+            subtitle: string;
+        };
+    };
+    iconTop: {
+        true: {
+            step: string;
+            label: string;
+        };
+    };
+    custom: {
+        true: {};
+        false: {};
+    };
+}, {
+    root: string;
+    step: string;
+    title: string;
+    subtitle: string;
+    label: string;
+    divider: string;
+}, undefined, {
+    orientation: {
+        horizontal: {
+            root: string;
+            step: string;
+            divider: string;
+        };
+        vertical: {
+            root: string;
+            step: string;
+            divider: string;
+        };
+    };
+    state: {
+        inactive: {
+            step: string;
+            title: string;
+            subtitle: string;
+        };
+        active: {
+            step: string;
+            title: string;
+            subtitle: string;
+        };
+        done: {
+            step: string;
+            title: string;
+            subtitle: string;
+        };
+        error: {
+            step: string;
+            title: string;
+            subtitle: string;
+        };
+        warning: {
+            step: string;
+            title: string;
+            subtitle: string;
+        };
+        info: {
+            step: string;
+            title: string;
+            subtitle: string;
+        };
+        success: {
+            step: string;
+            title: string;
+            subtitle: string;
+        };
+    };
+    iconTop: {
+        true: {
+            step: string;
+            label: string;
+        };
+    };
+    custom: {
+        true: {};
+        false: {};
+    };
+}, {
+    root: string;
+    step: string;
+    title: string;
+    subtitle: string;
+    label: string;
+    divider: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+    orientation: {
+        horizontal: {
+            root: string;
+            step: string;
+            divider: string;
+        };
+        vertical: {
+            root: string;
+            step: string;
+            divider: string;
+        };
+    };
+    state: {
+        inactive: {
+            step: string;
+            title: string;
+            subtitle: string;
+        };
+        active: {
+            step: string;
+            title: string;
+            subtitle: string;
+        };
+        done: {
+            step: string;
+            title: string;
+            subtitle: string;
+        };
+        error: {
+            step: string;
+            title: string;
+            subtitle: string;
+        };
+        warning: {
+            step: string;
+            title: string;
+            subtitle: string;
+        };
+        info: {
+            step: string;
+            title: string;
+            subtitle: string;
+        };
+        success: {
+            step: string;
+            title: string;
+            subtitle: string;
+        };
+    };
+    iconTop: {
+        true: {
+            step: string;
+            label: string;
+        };
+    };
+    custom: {
+        true: {};
+        false: {};
+    };
+}, {
+    root: string;
+    step: string;
+    title: string;
+    subtitle: string;
+    label: string;
+    divider: string;
+}>>;

package/dist/components/steppers/stepper-styles.js

@@ -0,0 +1,98 @@
+import { StepperOrientation, StepperState } from "../../types/stepper.js";
+import { tv } from "../../utils/tv.js";
+//#region src/components/steppers/stepper-styles.ts
+var stepperStyles = tv({
+	slots: {
+		root: "flex no-scrollbar overflow-auto rounded-rui-control outline-hidden focus-visible:focus-ring focus-visible:-outline-offset-2",
+		step: "flex items-center px-6 relative",
+		title: "",
+		subtitle: "",
+		label: "flex flex-col items-start text-left ml-2",
+		divider: "border-rui-divider"
+	},
+	variants: {
+		orientation: {
+			[StepperOrientation.horizontal]: {
+				root: "whitespace-nowrap lg:whitespace-normal",
+				step: "",
+				divider: "block max-w-full min-w-4 h-0 max-h-0 self-center -mx-4 my-0 border-t flex-[1_1_0]"
+			},
+			[StepperOrientation.vertical]: {
+				root: "flex-col inline-flex",
+				step: "px-1 py-3",
+				divider: "block min-h-6 min-w-0 max-h-full h-full self-start -my-3 mx-4 border-l"
+			}
+		},
+		state: {
+			[StepperState.inactive]: {
+				step: "text-rui-text-disabled",
+				title: "text-rui-text-secondary",
+				subtitle: "text-rui-text-secondary"
+			},
+			[StepperState.active]: {
+				step: "text-rui-text",
+				title: "",
+				subtitle: "text-rui-text-secondary"
+			},
+			[StepperState.done]: {
+				step: "text-rui-text",
+				title: "",
+				subtitle: "text-rui-text-secondary"
+			},
+			[StepperState.error]: {
+				step: "text-rui-error",
+				title: "",
+				subtitle: ""
+			},
+			[StepperState.warning]: {
+				step: "text-rui-warning",
+				title: "",
+				subtitle: ""
+			},
+			[StepperState.info]: {
+				step: "text-rui-info",
+				title: "",
+				subtitle: ""
+			},
+			[StepperState.success]: {
+				step: "text-rui-success",
+				title: "",
+				subtitle: ""
+			}
+		},
+		iconTop: { true: {
+			step: "flex-col",
+			label: "ml-0 mt-4 items-center text-center"
+		} },
+		custom: {
+			true: {},
+			false: {}
+		}
+	},
+	compoundVariants: [
+		{
+			custom: true,
+			state: StepperState.inactive,
+			class: { step: "text-rui-text" }
+		},
+		{
+			orientation: StepperOrientation.vertical,
+			custom: true,
+			class: { divider: "mx-5" }
+		},
+		{
+			orientation: StepperOrientation.vertical,
+			iconTop: true,
+			class: { divider: "self-center mx-auto" }
+		}
+	],
+	defaultVariants: {
+		state: StepperState.inactive,
+		orientation: StepperOrientation.horizontal,
+		custom: false
+	}
+});
+//#endregion
+export { stepperStyles };
+
+//# sourceMappingURL=stepper-styles.js.map

package/dist/components/steppers/stepper-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stepper-styles.js","names":[],"sources":["../../../src/components/steppers/stepper-styles.ts"],"sourcesContent":["import { StepperOrientation, StepperState } from '@/types/stepper';\nimport { tv } from '@/utils/tv';\n\nexport const stepperStyles = tv({\n  slots: {\n    // takes focus only while it overflows (see useKeyboardScroll); the ring sits inside the clip\n    root: 'flex no-scrollbar overflow-auto rounded-rui-control outline-hidden focus-visible:focus-ring focus-visible:-outline-offset-2',\n    step: 'flex items-center px-6 relative',\n    title: '',\n    subtitle: '',\n    label: 'flex flex-col items-start text-left ml-2',\n    // the connector is decoration, so it takes the light divider rather than a control's edge\n    divider: 'border-rui-divider',\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-4 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        // 4px in from the edge, so the scrolling root does not clip the active marker's halo\n        step: 'px-1 py-3',\n        // reaches into both steps' padding, so the line runs from just under one marker to just over the next\n        divider: 'block min-h-6 min-w-0 max-h-full h-full self-start -my-3 mx-4 border-l',\n      },\n    },\n    state: {\n      // an upcoming step is not disabled, so its text keeps the 4.5:1 of the secondary tone\n      [StepperState.inactive]: {\n        step: 'text-rui-text-disabled',\n        title: 'text-rui-text-secondary',\n        subtitle: 'text-rui-text-secondary',\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    // the line runs through the 32px marker's center\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"],"mappings":";;;AAGA,IAAa,gBAAgB,GAAG;CAC9B,OAAO;EAEL,MAAM;EACN,MAAM;EACN,OAAO;EACP,UAAU;EACV,OAAO;EAEP,SAAS;CACX;CACA,UAAU;EACR,aAAa;IACV,mBAAmB,aAAa;IAC/B,MAAM;IACN,MAAM;IACN,SAAS;GACX;IACC,mBAAmB,WAAW;IAC7B,MAAM;IAEN,MAAM;IAEN,SAAS;GACX;EACF;EACA,OAAO;IAEJ,aAAa,WAAW;IACvB,MAAM;IACN,OAAO;IACP,UAAU;GACZ;IACC,aAAa,SAAS;IACrB,MAAM;IACN,OAAO;IACP,UAAU;GACZ;IACC,aAAa,OAAO;IACnB,MAAM;IACN,OAAO;IACP,UAAU;GACZ;IACC,aAAa,QAAQ;IACpB,MAAM;IACN,OAAO;IACP,UAAU;GACZ;IACC,aAAa,UAAU;IACtB,MAAM;IACN,OAAO;IACP,UAAU;GACZ;IACC,aAAa,OAAO;IACnB,MAAM;IACN,OAAO;IACP,UAAU;GACZ;IACC,aAAa,UAAU;IACtB,MAAM;IACN,OAAO;IACP,UAAU;GACZ;EACF;EACA,SAAS,EACP,MAAM;GACJ,MAAM;GACN,OAAO;EACT,EACF;EACA,QAAQ;GACN,MAAM,CAAC;GACP,OAAO,CAAC;EACV;CACF;CACA,kBAAkB;EAChB;GAAE,QAAQ;GAAM,OAAO,aAAa;GAAU,OAAO,EAAE,MAAM,gBAAgB;EAAE;EAE/E;GAAE,aAAa,mBAAmB;GAAU,QAAQ;GAAM,OAAO,EAAE,SAAS,OAAO;EAAE;EACrF;GAAE,aAAa,mBAAmB;GAAU,SAAS;GAAM,OAAO,EAAE,SAAS,sBAAsB;EAAE;CACvG;CACA,iBAAiB;EACf,OAAO,aAAa;EACpB,aAAa,mBAAmB;EAChC,QAAQ;CACV;AACF,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"RuiTable.js","names":["_sfc_main"],"sources":["../../../src/components/tables/RuiTable.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { computed } from 'vue';\nimport RuiTableEmptyState from '@/components/tables/RuiTableEmptyState.vue';\nimport RuiTableErrorState from '@/components/tables/RuiTableErrorState.vue';\nimport RuiTableLoadingState from '@/components/tables/RuiTableLoadingState.vue';\nimport { tv } from '@/utils/tv';\n\nexport interface TableEmpty {\n  label?: string;\n  description?: string;\n}\n\nexport interface Props {\n  variant?: 'default' | 'outlined';\n  dense?: boolean;\n  /** Shows a spinner under the header while a read is in flight. */\n  loading?: boolean;\n  /** Why the last read failed, which takes precedence over `empty`. */\n  error?: string;\n  /** Heading for that failure. */\n  errorTitle?: string;\n  /** Label for the retry control; without one, no control is offered. */\n  retryText?: string;\n  /**\n   * Says the table is knowingly empty. A table whose rows simply have not\n   * arrived should stay `loading` instead, so the two never read alike.\n   */\n  empty?: TableEmpty | boolean;\n}\n\ndefineOptions({\n  name: 'RuiTable',\n  inheritAttrs: false,\n});\n\nconst {\n  variant = 'outlined',\n  dense = false,\n  loading = false,\n  error = '',\n  errorTitle = '',\n  retryText = '',\n  empty = false,\n} = defineProps<Props>();\n\nconst emit = defineEmits<{\n  retry: [];\n}>();\n\ndefineSlots<{\n  default: () => any;\n  loading?: () => any;\n  error?: () => any;\n  empty?: () => any;\n}>();\n\n/**\n * The three states are mutually exclusive, and a failed read outranks an empty\n * one: rows that did not arrive are not rows that are not there.\n */\nconst state = computed<'loading' | 'error' | 'empty' | undefined>(() => {\n  if (loading)\n    return 'loading';\n\n  if (error)\n    return 'error';\n\n  if (empty)\n    return 'empty';\n\n  return undefined;\n});\n\nconst emptyProps = computed<TableEmpty>(() => (typeof empty === 'object' ? empty : {}));\n\n/**\n * Every rule that lands on a `th` or a `td` wraps the `&` in `:where()`, which\n * compiles to `:where(.generated-class) th` and so carries the specificity of\n * the element alone. A consumer writing `class=\"p-0\"` on one cell is a single\n * class, which outranks that, so a one-off override needs no `!important` the\n * way a plain `[&_th]:` rule would.\n */\nconst tableStyles = tv({\n  slots: {\n    root: 'w-full overflow-y-auto',\n    // matches RuiDataTable: text color, 13px header labels, body text, cell padding and row dividers\n    table: [\n      'w-full text-rui-text',\n      '[:where(&)_thead]:border-b [:where(&)_thead]:border-rui-divider',\n      '[:where(&)_thead_th]:font-medium [:where(&)_thead_th]:text-rui-text-secondary [:where(&)_thead_th]:text-start',\n      '[:where(&)_thead_th]:text-[0.8125rem] [:where(&)_thead_th]:leading-5',\n      '[:where(&)_th]:px-4 [:where(&)_td]:px-4 [:where(&)_td]:text-body-2',\n      '[:where(&)_tbody>tr+tr]:border-t [:where(&)_tbody>tr+tr]:border-rui-divider',\n      '[:where(&)_tbody_td]:border-b-0',\n    ],\n  },\n  variants: {\n    variant: {\n      default: {},\n      outlined: {\n        root: 'border rounded-rui-panel border-rui-divider',\n      },\n    },\n    // the data table's heights: a 40px header over 44px rows, or 32px over 36px when dense\n    dense: {\n      true: {\n        table: '[:where(&)_th]:py-0.5 [:where(&)_th]:h-8 [:where(&)_td]:py-1 [:where(&)_td]:h-9',\n      },\n      false: {\n        table: '[:where(&)_th]:py-1 [:where(&)_th]:h-10 [:where(&)_td]:py-1 [:where(&)_td]:h-11',\n      },\n    },\n  },\n});\n\nconst ui = computed<ReturnType<typeof tableStyles>>(() => tableStyles({ dense, variant }));\n</script>\n\n<template>\n  <div\n    :class=\"ui.root()\"\n    v-bind=\"$attrs\"\n  >\n    <table :class=\"ui.table()\">\n      <slot />\n    </table>\n\n    <slot\n      v-if=\"state === 'loading'\"\n      name=\"loading\"\n    >\n      <RuiTableLoadingState compact />\n    </slot>\n\n    <slot\n      v-else-if=\"state === 'error'\"\n      name=\"error\"\n    >\n      <RuiTableErrorState\n        :action-text=\"retryText\"\n        :message=\"error\"\n        :title=\"errorTitle\"\n        @action=\"emit('retry')\"\n      />\n    </slot>\n\n    <slot\n      v-else-if=\"state === 'empty'\"\n      name=\"empty\"\n    >\n      <RuiTableEmptyState\n        compact\n        :description=\"emptyProps.description\"\n        :label=\"emptyProps.label\"\n      />\n    </slot>\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"RuiTable.js","names":["_sfc_main"],"sources":["../../../src/components/tables/RuiTable.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { computed } from 'vue';\nimport RuiTableEmptyState from '@/components/tables/RuiTableEmptyState.vue';\nimport RuiTableErrorState from '@/components/tables/RuiTableErrorState.vue';\nimport RuiTableLoadingState from '@/components/tables/RuiTableLoadingState.vue';\nimport { tableStyles } from './table-styles';\n\nexport interface TableEmpty {\n  label?: string;\n  description?: string;\n}\n\nexport interface Props {\n  variant?: 'default' | 'outlined';\n  dense?: boolean;\n  /** Shows a spinner under the header while a read is in flight. */\n  loading?: boolean;\n  /** Why the last read failed, which takes precedence over `empty`. */\n  error?: string;\n  /** Heading for that failure. */\n  errorTitle?: string;\n  /** Label for the retry control; without one, no control is offered. */\n  retryText?: string;\n  /**\n   * Says the table is knowingly empty. A table whose rows simply have not\n   * arrived should stay `loading` instead, so the two never read alike.\n   */\n  empty?: TableEmpty | boolean;\n}\n\ndefineOptions({\n  name: 'RuiTable',\n  inheritAttrs: false,\n});\n\nconst {\n  variant = 'outlined',\n  dense = false,\n  loading = false,\n  error = '',\n  errorTitle = '',\n  retryText = '',\n  empty = false,\n} = defineProps<Props>();\n\nconst emit = defineEmits<{\n  retry: [];\n}>();\n\ndefineSlots<{\n  default: () => any;\n  loading?: () => any;\n  error?: () => any;\n  empty?: () => any;\n}>();\n\n/**\n * The three states are mutually exclusive, and a failed read outranks an empty\n * one: rows that did not arrive are not rows that are not there.\n */\nconst state = computed<'loading' | 'error' | 'empty' | undefined>(() => {\n  if (loading)\n    return 'loading';\n\n  if (error)\n    return 'error';\n\n  if (empty)\n    return 'empty';\n\n  return undefined;\n});\n\nconst emptyProps = computed<TableEmpty>(() => (typeof empty === 'object' ? empty : {}));\n\nconst ui = computed<ReturnType<typeof tableStyles>>(() => tableStyles({ dense, variant }));\n</script>\n\n<template>\n  <div\n    :class=\"ui.root()\"\n    v-bind=\"$attrs\"\n  >\n    <table :class=\"ui.table()\">\n      <slot />\n    </table>\n\n    <slot\n      v-if=\"state === 'loading'\"\n      name=\"loading\"\n    >\n      <RuiTableLoadingState compact />\n    </slot>\n\n    <slot\n      v-else-if=\"state === 'error'\"\n      name=\"error\"\n    >\n      <RuiTableErrorState\n        :action-text=\"retryText\"\n        :message=\"error\"\n        :title=\"errorTitle\"\n        @action=\"emit('retry')\"\n      />\n    </slot>\n\n    <slot\n      v-else-if=\"state === 'empty'\"\n      name=\"empty\"\n    >\n      <RuiTableEmptyState\n        compact\n        :description=\"emptyProps.description\"\n        :label=\"emptyProps.label\"\n      />\n    </slot>\n  </div>\n</template>\n"],"mappings":""}