@rotki/ui-library 2.23.5 → 2.25.0

package/dist/components/overlays/notification/RuiNotification.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiNotification.vue_vue_type_script_setup_true_lang.js","names":["$attrs"],"sources":["../../../../src/components/overlays/notification/RuiNotification.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { useTimeoutFn } from '@vueuse/core';\nimport { transformPropsUnit } from '@/utils/helpers';\nimport { cn, tv } from '@/utils/tv';\n\nexport interface NotificationProps {\n  timeout: number;\n  width?: number | string;\n  theme?: 'light' | 'dark';\n}\n\ndefineOptions({\n  name: 'RuiNotification',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<boolean>({ required: true });\n\nconst { timeout, width = 400, theme } = defineProps<NotificationProps>();\n\ndefineSlots<{\n  default?: () => any;\n}>();\n\nconst style = computed<{ width: string | undefined }>(() => ({\n  width: transformPropsUnit(width),\n}));\n\nconst rootStyle = tv({ base: 'top-2 right-2 fixed drop-shadow-lg rounded-sm z-50' });\n\nconst { start, stop } = useTimeoutFn(() => {\n  set(modelValue, false);\n}, timeout, { immediate: false });\n\nfunction dismiss(): void {\n  if (timeout < 0)\n    return;\n\n  set(modelValue, false);\n}\n\nwatchImmediate(modelValue, (display) => {\n  if (!display) {\n    stop();\n    return;\n  }\n\n  if (timeout > 0) {\n    stop();\n    start();\n  }\n});\n</script>\n\n<template>\n  <Teleport to=\"body\">\n    <Transition\n      enter-from-class=\"opacity-0\"\n      enter-active-class=\"ease-out duration-150\"\n      enter-to-class=\"opacity-100\"\n      leave-from-class=\"opacity-100\"\n      leave-active-class=\"ease-in duration-100\"\n      leave-to-class=\"opacity-0\"\n    >\n      <div\n        v-if=\"modelValue\"\n        role=\"alert\"\n        aria-live=\"polite\"\n        :class=\"rootStyle({ class: cn([$attrs.class, {\n          'bg-white dark:bg-[#363636]': !theme,\n          'bg-white text-rui-light-text': theme === 'light',\n          'bg-[#363636] text-rui-dark-text': theme === 'dark',\n        }]) })\"\n        :style=\"style\"\n        v-bind=\"{ ...$attrs, class: undefined }\"\n        @click=\"dismiss()\"\n      >\n        <slot />\n      </div>\n    </Transition>\n  </Teleport>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;EAgBA,MAAM,aAAa,SAAoB,SAAA,YAAmB;EAQ1D,MAAM,QAAQ,gBAA+C,EAC3D,OAAO,mBAAmB,QAAA,KAAK,EACjC,EAAE;EAEF,MAAM,YAAY,GAAG,EAAE,MAAM,qDAAqD,CAAC;EAEnF,MAAM,EAAE,OAAO,SAAS,mBAAmB;GACzC,MAAI,YAAY,KAAK;EACvB,GAAG,QAAA,SAAS,EAAE,WAAW,MAAM,CAAC;EAEhC,SAAS,UAAgB;GACvB,IAAI,QAAA,UAAU,GACZ;GAEF,MAAI,YAAY,KAAK;EACvB;EAEA,eAAe,aAAa,YAAY;GACtC,IAAI,CAAC,SAAS;IACZ,KAAK;IACL;GACF;GAEA,IAAI,QAAA,UAAU,GAAG;IACf,KAAK;IACL,MAAM;GACR;EACF,CAAC;;uBAIC,YAyBW,UAAA,EAzBD,IAAG,OAAM,GAAA,CACjB,YAuBa,YAAA;IAtBX,oBAAiB;IACjB,sBAAmB;IACnB,kBAAe;IACf,oBAAiB;IACjB,sBAAmB;IACnB,kBAAe;;2BAgBT,CAbE,WAAA,SAAA,UAAA,GADR,mBAcM,OAdN,WAcM;;KAZJ,MAAK;KACL,aAAU;KACT,OAAO,MAAA,SAAA,CAAS,CAAA,EAAA,OAAU,MAAA,EAAA,CAAE,CAAA,CAAEA,KAAAA,OAAO,OAAK;qCAA6C,QAAA;sCAAiD,QAAA,UAAK;yCAA2D,QAAA,UAAK;;KAK7M,OAAO,MAAA,KAAA;;QACKA,KAAAA;KAAM,OAAS,KAAA;IAAS,GAAA,EACpC,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,QAAO,GAAA,CAAA,GAAA,CAEf,WAAQ,KAAA,QAAA,SAAA,CAAA,GAAA,EAAA,KAAA,mBAAA,IAAA,IAAA,CAAA,CAAA"}
+{"version":3,"file":"RuiNotification.vue_vue_type_script_setup_true_lang.js","names":["$attrs"],"sources":["../../../../src/components/overlays/notification/RuiNotification.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { useTimeoutFn } from '@vueuse/core';\nimport { transformPropsUnit } from '@/utils/helpers';\nimport { cn, tv } from '@/utils/tv';\n\nexport interface NotificationProps {\n  timeout: number;\n  width?: number | string;\n  theme?: 'light' | 'dark';\n}\n\ndefineOptions({\n  name: 'RuiNotification',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<boolean>({ required: true });\n\nconst { timeout, width = 400, theme } = defineProps<NotificationProps>();\n\ndefineSlots<{\n  default?: () => any;\n}>();\n\nconst style = computed<{ width: string | undefined }>(() => ({\n  width: transformPropsUnit(width),\n}));\n\nconst rootStyle = tv({ base: 'top-2 right-2 fixed drop-shadow-lg rounded-sm z-50' });\n\nconst { start, stop } = useTimeoutFn(() => {\n  set(modelValue, false);\n}, timeout, { immediate: false });\n\nfunction dismiss(): void {\n  if (timeout < 0)\n    return;\n\n  set(modelValue, false);\n}\n\nwatchImmediate(modelValue, (display) => {\n  if (!display) {\n    stop();\n    return;\n  }\n\n  if (timeout > 0) {\n    stop();\n    start();\n  }\n});\n</script>\n\n<template>\n  <Teleport to=\"body\">\n    <Transition\n      enter-from-class=\"opacity-0\"\n      enter-active-class=\"ease-out duration-150\"\n      enter-to-class=\"opacity-100\"\n      leave-from-class=\"opacity-100\"\n      leave-active-class=\"ease-in duration-100\"\n      leave-to-class=\"opacity-0\"\n    >\n      <div\n        v-if=\"modelValue\"\n        role=\"alert\"\n        aria-live=\"polite\"\n        :class=\"rootStyle({ class: cn([$attrs.class, {\n          'bg-white dark:bg-[#363636]': !theme,\n          'bg-white text-rui-light-text': theme === 'light',\n          'bg-[#363636] text-rui-dark-text': theme === 'dark',\n        }]) })\"\n        :style=\"style\"\n        v-bind=\"{ ...$attrs, class: undefined }\"\n        @click=\"dismiss()\"\n      >\n        <slot />\n      </div>\n    </Transition>\n  </Teleport>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;EAgBA,MAAM,aAAa,SAAoB,SAAA,YAAmB;EAQ1D,MAAM,QAAQ,gBAA+C,EAC3D,OAAO,mBAAmB,QAAA,KAAK,EACjC,EAAE;EAEF,MAAM,YAAY,GAAG,EAAE,MAAM,qDAAqD,CAAC;EAEnF,MAAM,EAAE,OAAO,SAAS,mBAAmB;GACzC,MAAI,YAAY,KAAK;EACvB,GAAG,QAAA,SAAS,EAAE,WAAW,MAAM,CAAC;EAEhC,SAAS,UAAgB;GACvB,IAAI,QAAA,UAAU,GACZ;GAEF,MAAI,YAAY,KAAK;EACvB;EAEA,eAAe,aAAa,YAAY;GACtC,IAAI,CAAC,SAAS;IACZ,KAAK;IACL;GACF;GAEA,IAAI,QAAA,UAAU,GAAG;IACf,KAAK;IACL,MAAM;GACR;EACF,CAAC;;GAIC,OAAA,UAAA,GAAA,YAyBW,UAAA,EAzBD,IAAG,OAAM,GAAA,CACjB,YAuBa,YAAA;IAtBX,oBAAiB;IACjB,sBAAmB;IACnB,kBAAe;IACf,oBAAiB;IACjB,sBAAmB;IACnB,kBAAe;;IAEf,SAAA,cAcM,CAbE,WAAA,SADR,UAAA,GAAA,mBAcM,OAdN,WAcM;;KAZJ,MAAK;KACL,aAAU;KACT,OAAO,MAAA,SAAA,CAAS,CAAA,EAAA,OAAU,MAAA,EAAA,CAAE,CAAA,CAAEA,KAAAA,OAAO,OAAK;MAA6C,8BAAA,CAAA,QAAA;MAAiD,gCAAA,QAAA,UAAK;MAA2D,mCAAA,QAAA,UAAK;;KAK7M,OAAO,MAAA,KAAA;IACKA,GAAAA;KAAAA,GAAAA,KAAAA;KAAM,OAAS,KAAA;IAAS,GAAA,EACpC,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,QAAO,GAAA,CAAA,GAAA,CAEf,WAAQ,KAAA,QAAA,SAAA,CAAA,GAAA,EAAA,KAAA,mBAAA,IAAA,IAAA,CAAA,CAAA"}

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

@@ -1 +1 @@
-{"version":3,"file":"RuiTooltip.vue_vue_type_script_setup_true_lang.js","names":["$attrs"],"sources":["../../../../src/components/overlays/tooltip/RuiTooltip.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { VueClassValue } from '@/types/class-value';\nimport { type FloatingOptions, useFloating } from '@/composables/floating';\nimport { type PopperOptions, toFloatingOptions } from '@/composables/popper';\nimport { cn, tv } from '@/utils/tv';\nimport { tooltipStyles } from './tooltip-styles';\n\nexport interface RuiTooltipClassNames {\n  root?: VueClassValue;\n  tooltip?: VueClassValue;\n}\n\nexport interface Props {\n  text?: string | null;\n  disabled?: boolean;\n  hideArrow?: boolean;\n  openDelay?: number;\n  closeDelay?: number;\n  persistOnTooltipHover?: boolean;\n  options?: FloatingOptions;\n  /** @deprecated Use `options` instead */\n  popper?: PopperOptions;\n  classNames?: RuiTooltipClassNames;\n  /** @deprecated Use `classNames.tooltip` instead */\n  tooltipClass?: string;\n}\n\ndefineOptions({\n  name: 'RuiTooltip',\n  inheritAttrs: false,\n});\n\nconst {\n  text = null,\n  disabled = false,\n  hideArrow = false,\n  openDelay = 0,\n  closeDelay = 500,\n  persistOnTooltipHover = false,\n  options,\n  popper,\n  classNames,\n  tooltipClass = '',\n} = defineProps<Props>();\n\ndefineSlots<{\n  activator?: (props: { open: boolean; close: () => void }) => any;\n  default?: () => any;\n}>();\n\nconst rootStyle = tv({ base: 'relative inline-flex' });\n\nconst tooltipId = useId();\n\nconst {\n  reference: activator,\n  popover: tooltip,\n  open,\n  visible,\n  currentPlacement,\n  onOpen,\n  onClose,\n  onLeaveComplete,\n  updatePosition,\n} = useFloating(\n  () => popper ? toFloatingOptions(popper) : (options ?? {}),\n  () => disabled,\n  () => openDelay,\n  () => closeDelay,\n);\n\ntype PlacementSide = 'bottom' | 'left' | 'right' | 'top';\n\nconst placementSide = computed<PlacementSide>(() => {\n  const placement = get(currentPlacement);\n  if (placement.startsWith('top'))\n    return 'top';\n  if (placement.startsWith('left'))\n    return 'left';\n  if (placement.startsWith('right'))\n    return 'right';\n  return 'bottom';\n});\n\ndefineExpose({\n  onOpen,\n  onClose,\n});\n</script>\n\n<template>\n  <div\n    ref=\"activator\"\n    v-bind=\"{ ...$attrs, class: undefined }\"\n    :class=\"rootStyle({ class: cn($attrs.class) })\"\n    :data-tooltip-disabled=\"disabled\"\n    :aria-describedby=\"!disabled && open ? tooltipId : undefined\"\n    @mouseover=\"onOpen()\"\n    @mouseleave=\"onClose()\"\n    @focusin=\"onOpen()\"\n    @focusout=\"onClose()\"\n  >\n    <slot\n      name=\"activator\"\n      :open=\"open\"\n      :close=\"onClose\"\n    />\n\n    <Teleport\n      v-if=\"!disabled\"\n      to=\"body\"\n    >\n      <div\n        v-if=\"visible\"\n        :id=\"tooltipId\"\n        ref=\"tooltip\"\n        class=\"w-max z-[9999]\"\n        :class=\"classNames?.tooltip ?? tooltipClass\"\n        role=\"tooltip\"\n        :data-placement=\"currentPlacement\"\n      >\n        <TransitionGroup\n          enter-active-class=\"transition ease-out duration-200\"\n          enter-from-class=\"opacity-0 translate-y-1\"\n          enter-to-class=\"opacity-100 translate-y-0\"\n          leave-active-class=\"transition ease-in duration-150\"\n          leave-from-class=\"opacity-100 translate-y-0\"\n          leave-to-class=\"opacity-0 translate-y-1\"\n          @before-enter=\"updatePosition()\"\n          @after-leave=\"onLeaveComplete()\"\n        >\n          <div\n            v-if=\"open\"\n            key=\"tooltip\"\n            class=\"px-2 py-2 text-xs font-normal bg-rui-grey-700/90 text-white rounded shadow\"\n            data-id=\"content\"\n            @mouseover=\"persistOnTooltipHover && onOpen()\"\n            @mouseleave=\"persistOnTooltipHover && onClose()\"\n          >\n            <slot>\n              {{ text }}\n            </slot>\n          </div>\n          <span\n            v-if=\"!hideArrow\"\n            key=\"arrow\"\n            :class=\"tooltipStyles({ open, side: placementSide }).arrow()\"\n            data-id=\"arrow\"\n          >\n            <span :class=\"tooltipStyles({ open, side: placementSide }).diamond()\" />\n          </span>\n        </TransitionGroup>\n      </div>\n    </Teleport>\n  </div>\n</template>\n"],"mappings":"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"}
+{"version":3,"file":"RuiTooltip.vue_vue_type_script_setup_true_lang.js","names":["$attrs"],"sources":["../../../../src/components/overlays/tooltip/RuiTooltip.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { VueClassValue } from '@/types/class-value';\nimport { type FloatingOptions, useFloating } from '@/composables/floating';\nimport { type PopperOptions, toFloatingOptions } from '@/composables/popper';\nimport { cn, tv } from '@/utils/tv';\nimport { tooltipStyles } from './tooltip-styles';\n\nexport interface RuiTooltipClassNames {\n  root?: VueClassValue;\n  tooltip?: VueClassValue;\n}\n\nexport interface Props {\n  text?: string | null;\n  disabled?: boolean;\n  hideArrow?: boolean;\n  openDelay?: number;\n  closeDelay?: number;\n  persistOnTooltipHover?: boolean;\n  options?: FloatingOptions;\n  /** @deprecated Use `options` instead */\n  popper?: PopperOptions;\n  classNames?: RuiTooltipClassNames;\n  /** @deprecated Use `classNames.tooltip` instead */\n  tooltipClass?: string;\n}\n\ndefineOptions({\n  name: 'RuiTooltip',\n  inheritAttrs: false,\n});\n\nconst {\n  text = null,\n  disabled = false,\n  hideArrow = false,\n  openDelay = 0,\n  closeDelay = 500,\n  persistOnTooltipHover = false,\n  options,\n  popper,\n  classNames,\n  tooltipClass = '',\n} = defineProps<Props>();\n\ndefineSlots<{\n  activator?: (props: { open: boolean; close: () => void }) => any;\n  default?: () => any;\n}>();\n\nconst rootStyle = tv({ base: 'relative inline-flex' });\n\nconst tooltipId = useId();\n\nconst {\n  reference: activator,\n  popover: tooltip,\n  open,\n  visible,\n  currentPlacement,\n  onOpen,\n  onClose,\n  onLeaveComplete,\n  updatePosition,\n} = useFloating(\n  () => popper ? toFloatingOptions(popper) : (options ?? {}),\n  () => disabled,\n  () => openDelay,\n  () => closeDelay,\n);\n\ntype PlacementSide = 'bottom' | 'left' | 'right' | 'top';\n\nconst placementSide = computed<PlacementSide>(() => {\n  const placement = get(currentPlacement);\n  if (placement.startsWith('top'))\n    return 'top';\n  if (placement.startsWith('left'))\n    return 'left';\n  if (placement.startsWith('right'))\n    return 'right';\n  return 'bottom';\n});\n\ndefineExpose({\n  onOpen,\n  onClose,\n});\n</script>\n\n<template>\n  <div\n    ref=\"activator\"\n    v-bind=\"{ ...$attrs, class: undefined }\"\n    :class=\"rootStyle({ class: cn($attrs.class) })\"\n    :data-tooltip-disabled=\"disabled\"\n    :aria-describedby=\"!disabled && open ? tooltipId : undefined\"\n    @mouseover=\"onOpen()\"\n    @mouseleave=\"onClose()\"\n    @focusin=\"onOpen()\"\n    @focusout=\"onClose()\"\n  >\n    <slot\n      name=\"activator\"\n      :open=\"open\"\n      :close=\"onClose\"\n    />\n\n    <Teleport\n      v-if=\"!disabled\"\n      to=\"body\"\n    >\n      <div\n        v-if=\"visible\"\n        :id=\"tooltipId\"\n        ref=\"tooltip\"\n        class=\"w-max z-[9999]\"\n        :class=\"classNames?.tooltip ?? tooltipClass\"\n        role=\"tooltip\"\n        :data-placement=\"currentPlacement\"\n      >\n        <TransitionGroup\n          enter-active-class=\"transition ease-out duration-200\"\n          enter-from-class=\"opacity-0 translate-y-1\"\n          enter-to-class=\"opacity-100 translate-y-0\"\n          leave-active-class=\"transition ease-in duration-150\"\n          leave-from-class=\"opacity-100 translate-y-0\"\n          leave-to-class=\"opacity-0 translate-y-1\"\n          @before-enter=\"updatePosition()\"\n          @after-leave=\"onLeaveComplete()\"\n        >\n          <div\n            v-if=\"open\"\n            key=\"tooltip\"\n            class=\"px-2 py-2 text-xs font-normal bg-rui-grey-700/90 text-white rounded shadow\"\n            data-id=\"content\"\n            @mouseover=\"persistOnTooltipHover && onOpen()\"\n            @mouseleave=\"persistOnTooltipHover && onClose()\"\n          >\n            <slot>\n              {{ text }}\n            </slot>\n          </div>\n          <span\n            v-if=\"!hideArrow\"\n            key=\"arrow\"\n            :class=\"tooltipStyles({ open, side: placementSide }).arrow()\"\n            data-id=\"arrow\"\n          >\n            <span :class=\"tooltipStyles({ open, side: placementSide }).diamond()\" />\n          </span>\n        </TransitionGroup>\n      </div>\n    </Teleport>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAkDA,MAAM,YAAY,GAAG,EAAE,MAAM,uBAAuB,CAAC;EAErD,MAAM,YAAY,MAAM;EAExB,MAAM,EACJ,WAAW,WACX,SAAS,SACT,MACA,SACA,kBACA,QACA,SACA,iBACA,mBACE,kBACI,QAAA,SAAS,kBAAkB,QAAA,MAAM,IAAK,QAAA,WAAW,CAAC,SAClD,QAAA,gBACA,QAAA,iBACA,QAAA,UACR;EAIA,MAAM,gBAAgB,eAA8B;GAClD,MAAM,YAAY,IAAI,gBAAgB;GACtC,IAAI,UAAU,WAAW,KAAK,GAC5B,OAAO;GACT,IAAI,UAAU,WAAW,MAAM,GAC7B,OAAO;GACT,IAAI,UAAU,WAAW,OAAO,GAC9B,OAAO;GACT,OAAO;EACT,CAAC;EAED,SAAa;GACX;GACA;EACF,CAAC;;GAIC,OAAA,UAAA,GAAA,mBA+DM,OA/DN,WA+DM;IA9DA,SAAA;IAAJ,KAAI;GACSA,GAAAA;IAAAA,GAAAA,KAAAA;IAAM,OAAS,KAAA;GAAS,GAAA;IACpC,OAAO,MAAA,SAAA,CAAS,CAAA,EAAA,OAAU,MAAA,EAAA,CAAE,CAACA,KAAAA,OAAO,KAAK,EAAA,CAAA;IACzC,yBAAuB,QAAA;IACvB,oBAAgB,CAAG,QAAA,YAAY,MAAA,IAAA,IAAO,MAAA,SAAA,IAAY,KAAA;IAClD,aAAS,OAAA,OAAA,OAAA,MAAA,WAAE,MAAA,MAAA,CAAM,CAAA;IACjB,cAAU,OAAA,OAAA,OAAA,MAAA,WAAE,MAAA,OAAA,CAAO,CAAA;IACnB,WAAO,OAAA,OAAA,OAAA,MAAA,WAAE,MAAA,MAAA,CAAM,CAAA;IACf,YAAQ,OAAA,OAAA,OAAA,MAAA,WAAE,MAAA,OAAA,CAAO,CAAA;GAElB,CAAA,GAAA,CAAA,WAIE,KAAA,QAAA,aAAA;IAFC,MAAM,MAAA,IAAA;IACN,OAAO,MAAA,OAAA;GAID,CAAA,GAAA,CAAA,QAAA,YADT,UAAA,GAAA,YA6CW,UAAA;;IA3CT,IAAG;GAGK,GAAA,CAAA,MAAA,OAAA,KADR,UAAA,GAAA,mBAwCM,OAAA;;IAtCH,IAAI,MAAA,SAAA;IACD,SAAA;IAAJ,KAAI;IACJ,OAAK,eAAA,CAAC,kBACE,QAAA,YAAY,WAAW,QAAA,YAAY,CAAA;IAC3C,MAAK;IACJ,kBAAgB,MAAA,gBAAA;GAEjB,GAAA,CAAA,YA8BkB,iBAAA;IA7BhB,sBAAmB;IACnB,oBAAiB;IACjB,kBAAe;IACf,sBAAmB;IACnB,oBAAiB;IACjB,kBAAe;IACd,eAAY,OAAA,OAAA,OAAA,MAAA,WAAE,MAAA,cAAA,CAAc,CAAA;IAC5B,cAAW,OAAA,OAAA,OAAA,MAAA,WAAE,MAAA,eAAA,CAAe,CAAA;;IAE7B,SAAA,cAWM,CAVE,MAAA,IAAA,KADR,UAAA,GAAA,mBAWM,OAAA;KATJ,KAAI;KACJ,OAAM;KACN,WAAQ;KACP,aAAS,OAAA,OAAA,OAAA,MAAA,WAAE,QAAA,yBAAyB,MAAA,MAAA,CAAM,CAAA;KAC1C,cAAU,OAAA,OAAA,OAAA,MAAA,WAAE,QAAA,yBAAyB,MAAA,OAAA,CAAO,CAAA;IAE7C,GAAA,CAAA,WAEO,KAAA,QAAA,WAAA,CAAA,SAAA,CADF,gBAAA,gBAAA,QAAA,IAAI,GAAA,CAAA,CAAA,CAAA,CAAA,GAAA,EAAA,KAAA,mBAAA,IAAA,IAAA,GAIF,CAAA,QAAA,aADT,UAAA,GAAA,mBAOO,QAAA;KALL,KAAI;KACH,OAAK,eAAE,MAAA,aAAA,CAAa,CAAA;MAAA,MAAG,MAAA,IAAA;MAAI,MAAQ,MAAA,aAAA;KAAa,CAAA,CAAA,CAAI,MAAK,CAAA;KAC1D,WAAQ;IAER,GAAA,CAAA,mBAAwE,QAAA,EAAjE,OAAK,eAAE,MAAA,aAAA,CAAa,CAAA;KAAA,MAAG,MAAA,IAAA;KAAI,MAAQ,MAAA,aAAA;IAAa,CAAA,CAAA,CAAI,QAAO,CAAA,EAAA,GAAA,MAAA,CAAA,CAAA,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,CAAA,CAAA"}

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

@@ -58,7 +58,7 @@ export declare const tooltipStyles: import("tailwind-variants").TVReturnType<{
 }, {
     arrow: string;
     diamond: string;
-}, import("tailwind-variants").TVReturnType<{
+}, import("tailwind-variants").TVReturnTypeLike<{
     open: {
         true: {
             arrow: string;
@@ -88,4 +88,4 @@ export declare const tooltipStyles: import("tailwind-variants").TVReturnType<{
 }, {
     arrow: string;
     diamond: string;
-}, undefined, unknown, unknown, undefined>>;
+}>>;

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

@@ -1 +1 @@
-{"version":3,"file":"RuiProgress.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/** approximate width of `100%` in ems */\nconst LABEL_WIDTH_EM = 2.5;\n/** keeps the label off the stroke rather than merely inside it */\nconst LABEL_BREATHING_ROOM = 0.85;\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    circleTrack: 'stroke-current opacity-20',\n    label: 'text-rui-text',\n  },\n  variants: {\n    color: {\n      primary: { circularContainer: 'text-rui-primary' },\n      secondary: { circularContainer: 'text-rui-secondary' },\n      error: { circularContainer: 'text-rui-error' },\n      warning: { circularContainer: 'text-rui-warning' },\n      info: { circularContainer: 'text-rui-info' },\n      success: { circularContainer: 'text-rui-success' },\n      inherit: { circularContainer: 'text-current' },\n    },\n    variant: {\n      [ProgressVariant.determinate]: { svg: '-rotate-90' },\n      [ProgressVariant.indeterminate]: {\n        svg: 'animate-circular-spin',\n        circle: 'animate-collapse-stroke [stroke-dasharray:80px,200px] [stroke-linecap:round]',\n      },\n      [ProgressVariant.buffer]: {},\n    },\n    circular: {\n      true: { wrapper: 'inline-flex' },\n      false: { wrapper: 'w-full' },\n    },\n    hasLabel: {\n      true: { wrapper: 'inline-flex items-center relative' },\n    },\n  },\n  compoundVariants: [\n    // Linear label\n    { circular: false, hasLabel: true, class: { label: 'block text-sm ml-4' } },\n    // Circular label (overlays the circle, font size derived from `size`)\n    { circular: true, hasLabel: true, class: { label: 'absolute inset-0 flex items-center justify-center leading-none tabular-nums whitespace-nowrap' } },\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\n/**\n * The circular label lives inside the ring, so it scales with both `size` and `thickness`.\n * `fit` solves for the widest label (`100%`) fitting the chord it spans, always computed\n * for that widest label so the text does not resize as the value climbs. It is capped by\n * a sublinear curve so large rings do not end up with an oversized number in the middle.\n */\nconst circularLabelStyle = computed<Record<string, string>>(() => {\n  const innerRadius = Math.max((+size - 2 * +thickness) / 2, 0);\n  const fit = (LABEL_BREATHING_ROOM * 2 * innerRadius) / Math.sqrt(LABEL_WIDTH_EM ** 2 + 1);\n  return { fontSize: `${Math.min(fit, +size * 0.15 + 6)}px` };\n});\n\nconst circularStrokeStyle = computed<Record<string, string>>(() => ({\n  strokeDasharray: `${CIRCLE_CIRCUMFERENCE}`,\n  strokeDashoffset: `${(get(progress) / 100) * -CIRCLE_CIRCUMFERENCE}`,\n  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        <!-- Track behind the arc, mirroring the linear rail. Indeterminate spins, so it gets no track. -->\n        <circle\n          v-if=\"variant === ProgressVariant.determinate\"\n          cx=\"50%\"\n          cy=\"50%\"\n          fill=\"none\"\n          :r=\"CIRCLE_RADIUS\"\n          :class=\"ui.circleTrack()\"\n          :stroke-width=\"circularGeometry.scaledThickness\"\n        />\n        <circle\n          cx=\"50%\"\n          cy=\"50%\"\n          fill=\"none\"\n          :r=\"CIRCLE_RADIUS\"\n          :class=\"ui.circle()\"\n          :style=\"variant === ProgressVariant.determinate ? circularStrokeStyle : undefined\"\n          :stroke-width=\"circularGeometry.scaledThickness\"\n        />\n      </svg>\n      <div\n        v-if=\"hasLabel\"\n        :class=\"ui.label()\"\n        :style=\"circularLabelStyle\"\n        aria-hidden=\"true\"\n      >\n        {{ label }}\n      </div>\n    </div>\n\n    <!-- Linear progress (also used as fallback for circular + buffer) -->\n    <div\n      v-else\n      :aria-valuenow=\"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":""}
+{"version":3,"file":"RuiProgress.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   * Ranges from 0 to 100.\n   */\n  value?: number;\n  /**\n   * in percentage value, required when variant === buffer\n   * Ranges from 0 to 100.\n   */\n  bufferValue?: number;\n  variant?: ProgressVariant;\n  color?: ContextColorsType | 'inherit';\n  circular?: boolean;\n  showLabel?: boolean;\n  /**\n   * Sets the stroke thickness in pixels\n   */\n  thickness?: number | string;\n  /**\n   * only used for circular progress\n   */\n  size?: number | string;\n}\n\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/** approximate width of `100%` in ems */\nconst LABEL_WIDTH_EM = 2.5;\n/** keeps the label off the stroke rather than merely inside it */\nconst LABEL_BREATHING_ROOM = 0.85;\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    circleTrack: 'stroke-current opacity-20',\n    label: 'text-rui-text',\n  },\n  variants: {\n    color: {\n      primary: { circularContainer: 'text-rui-primary' },\n      secondary: { circularContainer: 'text-rui-secondary' },\n      error: { circularContainer: 'text-rui-error' },\n      warning: { circularContainer: 'text-rui-warning' },\n      info: { circularContainer: 'text-rui-info' },\n      success: { circularContainer: 'text-rui-success' },\n      inherit: { circularContainer: 'text-current' },\n    },\n    variant: {\n      [ProgressVariant.determinate]: { svg: '-rotate-90' },\n      [ProgressVariant.indeterminate]: {\n        svg: 'animate-circular-spin',\n        circle: 'animate-collapse-stroke [stroke-dasharray:80px,200px] [stroke-linecap:round]',\n      },\n      [ProgressVariant.buffer]: {},\n    },\n    circular: {\n      true: { wrapper: 'inline-flex' },\n      false: { wrapper: 'w-full' },\n    },\n    hasLabel: {\n      true: { wrapper: 'inline-flex items-center relative' },\n    },\n  },\n  compoundVariants: [\n    // Linear label\n    { circular: false, hasLabel: true, class: { label: 'block text-sm ml-4' } },\n    // Circular label (overlays the circle, font size derived from `size`)\n    { circular: true, hasLabel: true, class: { label: 'absolute inset-0 flex items-center justify-center leading-none tabular-nums whitespace-nowrap' } },\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\n/**\n * The circular label lives inside the ring, so it scales with both `size` and `thickness`.\n * `fit` solves for the widest label (`100%`) fitting the chord it spans, always computed\n * for that widest label so the text does not resize as the value climbs. It is capped by\n * a sublinear curve so large rings do not end up with an oversized number in the middle.\n */\nconst circularLabelStyle = computed<Record<string, string>>(() => {\n  const innerRadius = Math.max((+size - 2 * +thickness) / 2, 0);\n  const fit = (LABEL_BREATHING_ROOM * 2 * innerRadius) / Math.sqrt(LABEL_WIDTH_EM ** 2 + 1);\n  return { fontSize: `${Math.min(fit, +size * 0.15 + 6)}px` };\n});\n\nconst circularStrokeStyle = computed<Record<string, string>>(() => ({\n  strokeDasharray: `${CIRCLE_CIRCUMFERENCE}`,\n  strokeDashoffset: `${(get(progress) / 100) * -CIRCLE_CIRCUMFERENCE}`,\n  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        <!-- Track behind the arc, mirroring the linear rail. Indeterminate spins, so it gets no track. -->\n        <circle\n          v-if=\"variant === ProgressVariant.determinate\"\n          cx=\"50%\"\n          cy=\"50%\"\n          fill=\"none\"\n          :r=\"CIRCLE_RADIUS\"\n          :class=\"ui.circleTrack()\"\n          :stroke-width=\"circularGeometry.scaledThickness\"\n        />\n        <circle\n          cx=\"50%\"\n          cy=\"50%\"\n          fill=\"none\"\n          :r=\"CIRCLE_RADIUS\"\n          :class=\"ui.circle()\"\n          :style=\"variant === ProgressVariant.determinate ? circularStrokeStyle : undefined\"\n          :stroke-width=\"circularGeometry.scaledThickness\"\n        />\n      </svg>\n      <div\n        v-if=\"hasLabel\"\n        :class=\"ui.label()\"\n        :style=\"circularLabelStyle\"\n        aria-hidden=\"true\"\n      >\n        {{ label }}\n      </div>\n    </div>\n\n    <!-- Linear progress (also used as fallback for circular + buffer) -->\n    <div\n      v-else\n      :aria-valuenow=\"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":""}

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

@@ -1,14 +1,14 @@
 import type { ContextColorsType } from '../../consts/colors.js';
-import { ProgressVariant } from '../../components/progress/progress-props.js';
+import { ProgressVariant } from './progress-props.js';
 export interface Props {
     /**
      * in percentage value, required when variant === determinate or buffer
-     * @example - 0 <= value <= 100
+     * Ranges from 0 to 100.
      */
     value?: number;
     /**
      * in percentage value, required when variant === buffer
-     * @example - 0 <= value <= 100
+     * Ranges from 0 to 100.
      */
     bufferValue?: number;
     variant?: ProgressVariant;

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

@@ -1 +1 @@
-{"version":3,"file":"RuiProgress.vue_vue_type_script_setup_true_lang.js","names":[],"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/** approximate width of `100%` in ems */\nconst LABEL_WIDTH_EM = 2.5;\n/** keeps the label off the stroke rather than merely inside it */\nconst LABEL_BREATHING_ROOM = 0.85;\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    circleTrack: 'stroke-current opacity-20',\n    label: 'text-rui-text',\n  },\n  variants: {\n    color: {\n      primary: { circularContainer: 'text-rui-primary' },\n      secondary: { circularContainer: 'text-rui-secondary' },\n      error: { circularContainer: 'text-rui-error' },\n      warning: { circularContainer: 'text-rui-warning' },\n      info: { circularContainer: 'text-rui-info' },\n      success: { circularContainer: 'text-rui-success' },\n      inherit: { circularContainer: 'text-current' },\n    },\n    variant: {\n      [ProgressVariant.determinate]: { svg: '-rotate-90' },\n      [ProgressVariant.indeterminate]: {\n        svg: 'animate-circular-spin',\n        circle: 'animate-collapse-stroke [stroke-dasharray:80px,200px] [stroke-linecap:round]',\n      },\n      [ProgressVariant.buffer]: {},\n    },\n    circular: {\n      true: { wrapper: 'inline-flex' },\n      false: { wrapper: 'w-full' },\n    },\n    hasLabel: {\n      true: { wrapper: 'inline-flex items-center relative' },\n    },\n  },\n  compoundVariants: [\n    // Linear label\n    { circular: false, hasLabel: true, class: { label: 'block text-sm ml-4' } },\n    // Circular label (overlays the circle, font size derived from `size`)\n    { circular: true, hasLabel: true, class: { label: 'absolute inset-0 flex items-center justify-center leading-none tabular-nums whitespace-nowrap' } },\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\n/**\n * The circular label lives inside the ring, so it scales with both `size` and `thickness`.\n * `fit` solves for the widest label (`100%`) fitting the chord it spans, always computed\n * for that widest label so the text does not resize as the value climbs. It is capped by\n * a sublinear curve so large rings do not end up with an oversized number in the middle.\n */\nconst circularLabelStyle = computed<Record<string, string>>(() => {\n  const innerRadius = Math.max((+size - 2 * +thickness) / 2, 0);\n  const fit = (LABEL_BREATHING_ROOM * 2 * innerRadius) / Math.sqrt(LABEL_WIDTH_EM ** 2 + 1);\n  return { fontSize: `${Math.min(fit, +size * 0.15 + 6)}px` };\n});\n\nconst circularStrokeStyle = computed<Record<string, string>>(() => ({\n  strokeDasharray: `${CIRCLE_CIRCUMFERENCE}`,\n  strokeDashoffset: `${(get(progress) / 100) * -CIRCLE_CIRCUMFERENCE}`,\n  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        <!-- Track behind the arc, mirroring the linear rail. Indeterminate spins, so it gets no track. -->\n        <circle\n          v-if=\"variant === ProgressVariant.determinate\"\n          cx=\"50%\"\n          cy=\"50%\"\n          fill=\"none\"\n          :r=\"CIRCLE_RADIUS\"\n          :class=\"ui.circleTrack()\"\n          :stroke-width=\"circularGeometry.scaledThickness\"\n        />\n        <circle\n          cx=\"50%\"\n          cy=\"50%\"\n          fill=\"none\"\n          :r=\"CIRCLE_RADIUS\"\n          :class=\"ui.circle()\"\n          :style=\"variant === ProgressVariant.determinate ? circularStrokeStyle : undefined\"\n          :stroke-width=\"circularGeometry.scaledThickness\"\n        />\n      </svg>\n      <div\n        v-if=\"hasLabel\"\n        :class=\"ui.label()\"\n        :style=\"circularLabelStyle\"\n        aria-hidden=\"true\"\n      >\n        {{ label }}\n      </div>\n    </div>\n\n    <!-- Linear progress (also used as fallback for circular + buffer) -->\n    <div\n      v-else\n      :aria-valuenow=\"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":"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"}
+{"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   * Ranges from 0 to 100.\n   */\n  value?: number;\n  /**\n   * in percentage value, required when variant === buffer\n   * Ranges from 0 to 100.\n   */\n  bufferValue?: number;\n  variant?: ProgressVariant;\n  color?: ContextColorsType | 'inherit';\n  circular?: boolean;\n  showLabel?: boolean;\n  /**\n   * Sets the stroke thickness in pixels\n   */\n  thickness?: number | string;\n  /**\n   * only used for circular progress\n   */\n  size?: number | string;\n}\n\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/** approximate width of `100%` in ems */\nconst LABEL_WIDTH_EM = 2.5;\n/** keeps the label off the stroke rather than merely inside it */\nconst LABEL_BREATHING_ROOM = 0.85;\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    circleTrack: 'stroke-current opacity-20',\n    label: 'text-rui-text',\n  },\n  variants: {\n    color: {\n      primary: { circularContainer: 'text-rui-primary' },\n      secondary: { circularContainer: 'text-rui-secondary' },\n      error: { circularContainer: 'text-rui-error' },\n      warning: { circularContainer: 'text-rui-warning' },\n      info: { circularContainer: 'text-rui-info' },\n      success: { circularContainer: 'text-rui-success' },\n      inherit: { circularContainer: 'text-current' },\n    },\n    variant: {\n      [ProgressVariant.determinate]: { svg: '-rotate-90' },\n      [ProgressVariant.indeterminate]: {\n        svg: 'animate-circular-spin',\n        circle: 'animate-collapse-stroke [stroke-dasharray:80px,200px] [stroke-linecap:round]',\n      },\n      [ProgressVariant.buffer]: {},\n    },\n    circular: {\n      true: { wrapper: 'inline-flex' },\n      false: { wrapper: 'w-full' },\n    },\n    hasLabel: {\n      true: { wrapper: 'inline-flex items-center relative' },\n    },\n  },\n  compoundVariants: [\n    // Linear label\n    { circular: false, hasLabel: true, class: { label: 'block text-sm ml-4' } },\n    // Circular label (overlays the circle, font size derived from `size`)\n    { circular: true, hasLabel: true, class: { label: 'absolute inset-0 flex items-center justify-center leading-none tabular-nums whitespace-nowrap' } },\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\n/**\n * The circular label lives inside the ring, so it scales with both `size` and `thickness`.\n * `fit` solves for the widest label (`100%`) fitting the chord it spans, always computed\n * for that widest label so the text does not resize as the value climbs. It is capped by\n * a sublinear curve so large rings do not end up with an oversized number in the middle.\n */\nconst circularLabelStyle = computed<Record<string, string>>(() => {\n  const innerRadius = Math.max((+size - 2 * +thickness) / 2, 0);\n  const fit = (LABEL_BREATHING_ROOM * 2 * innerRadius) / Math.sqrt(LABEL_WIDTH_EM ** 2 + 1);\n  return { fontSize: `${Math.min(fit, +size * 0.15 + 6)}px` };\n});\n\nconst circularStrokeStyle = computed<Record<string, string>>(() => ({\n  strokeDasharray: `${CIRCLE_CIRCUMFERENCE}`,\n  strokeDashoffset: `${(get(progress) / 100) * -CIRCLE_CIRCUMFERENCE}`,\n  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        <!-- Track behind the arc, mirroring the linear rail. Indeterminate spins, so it gets no track. -->\n        <circle\n          v-if=\"variant === ProgressVariant.determinate\"\n          cx=\"50%\"\n          cy=\"50%\"\n          fill=\"none\"\n          :r=\"CIRCLE_RADIUS\"\n          :class=\"ui.circleTrack()\"\n          :stroke-width=\"circularGeometry.scaledThickness\"\n        />\n        <circle\n          cx=\"50%\"\n          cy=\"50%\"\n          fill=\"none\"\n          :r=\"CIRCLE_RADIUS\"\n          :class=\"ui.circle()\"\n          :style=\"variant === ProgressVariant.determinate ? circularStrokeStyle : undefined\"\n          :stroke-width=\"circularGeometry.scaledThickness\"\n        />\n      </svg>\n      <div\n        v-if=\"hasLabel\"\n        :class=\"ui.label()\"\n        :style=\"circularLabelStyle\"\n        aria-hidden=\"true\"\n      >\n        {{ label }}\n      </div>\n    </div>\n\n    <!-- Linear progress (also used as fallback for circular + buffer) -->\n    <div\n      v-else\n      :aria-valuenow=\"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":"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"}

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

@@ -1,4 +1,4 @@
-import { FooterStepperVariant } from '../../components/steppers/footer-stepper-variant.js';
+import { FooterStepperVariant } from './footer-stepper-variant.js';
 export interface Props {
     pages: number;
     variant?: FooterStepperVariant;

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

@@ -1 +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":"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"}
+{"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":"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"}

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

@@ -1 +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":""}
+{"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/**\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    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_vue_type_script_setup_true_lang.js

@@ -138,6 +138,14 @@ var RuiStepper_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 			custom: __props.custom,
 			iconTop: __props.iconTop
 		}));
+		/**
+		* Resolves the stepper's classes for one step, which vary with the state that
+		* step is in, which the shared `ui` above cannot carry because it resolves
+		* once for the whole stepper.
+		*
+		* @param state - the state that step is in
+		* @returns the stepper's classes with that state applied
+		*/
 		function stepUi(state) {
 			return stepper({
 				orientation: __props.orientation,

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":[],"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":"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"}
+{"version":3,"file":"RuiStepper.vue_vue_type_script_setup_true_lang.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/**\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    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":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"RuiStepperCustomIcon.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/steppers/RuiStepperCustomIcon.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport { StepperState } from '@/types/stepper';\nimport { tv } from '@/utils/tv';\n\ntype IndicatorState = typeof StepperState.inactive | typeof StepperState.active;\n\nconst { state = StepperState.inactive } = defineProps<{\n  state?: StepperState;\n  index: number;\n}>();\n\nconst stepperCustomIcon = tv({\n  base: 'inline-flex items-center justify-center rounded-full h-10 w-10 shrink-0 border border-rui-primary',\n  variants: {\n    state: {\n      [StepperState.inactive]: 'text-xs bg-white dark:bg-rui-primary dark:text-white dark:border-white',\n      [StepperState.active]: 'text-white bg-rui-primary dark:bg-white dark:text-rui-primary',\n    },\n  },\n  defaultVariants: { state: StepperState.active },\n});\n\nconst indicatorState = computed<IndicatorState>(() => state === StepperState.inactive ? StepperState.inactive : StepperState.active);\n</script>\n\n<template>\n  <span :class=\"stepperCustomIcon({ state: indicatorState })\">\n    <span\n      v-if=\"state === StepperState.inactive\"\n      class=\"text-rui-primary dark:text-white\"\n    >\n      {{ index }}\n    </span>\n    <RuiIcon\n      v-else-if=\"state === StepperState.active\"\n      name=\"lu-checkbox-blank-circle-fill\"\n      :size=\"20\"\n    />\n    <RuiIcon\n      v-else-if=\"state === StepperState.done\"\n      :size=\"20\"\n      name=\"lu-check\"\n    />\n    <span v-else>\n      {{ index }}\n    </span>\n  </span>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;EAYA,MAAM,oBAAoB,GAAG;GAC3B,MAAM;GACN,UAAU,EACR,OAAO;KACJ,aAAa,WAAW;KACxB,aAAa,SAAS;GACzB,EACF;GACA,iBAAiB,EAAE,OAAO,aAAa,OAAO;EAChD,CAAC;EAED,MAAM,iBAAiB,eAA+B,QAAA,UAAU,aAAa,WAAW,aAAa,WAAW,aAAa,MAAM;;uBAIjI,mBAoBO,QAAA,EApBA,OAAK,eAAE,MAAA,iBAAA,CAAiB,CAAA,EAAA,OAAU,MAAA,cAAA,EAAc,CAAA,CAAA,EAAA,GAAA,CAE7C,QAAA,UAAU,MAAA,YAAA,CAAY,CAAC,YAAA,UAAA,GAD/B,mBAKO,QALP,YAKO,gBADF,QAAA,KAAK,GAAA,CAAA,KAGG,QAAA,UAAU,MAAA,YAAA,CAAY,CAAC,UAAA,UAAA,GADpC,YAIE,iBAAA;;IAFA,MAAK;IACJ,MAAM;SAGI,QAAA,UAAU,MAAA,YAAA,CAAY,CAAC,QAAA,UAAA,GADpC,YAIE,iBAAA;;IAFC,MAAM;IACP,MAAK;uBAEP,mBAEO,QAAA,YAAA,gBADF,QAAA,KAAK,GAAA,CAAA,EAAA,GAAA,CAAA"}
+{"version":3,"file":"RuiStepperCustomIcon.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/steppers/RuiStepperCustomIcon.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport { StepperState } from '@/types/stepper';\nimport { tv } from '@/utils/tv';\n\ntype IndicatorState = typeof StepperState.inactive | typeof StepperState.active;\n\nconst { state = StepperState.inactive } = defineProps<{\n  state?: StepperState;\n  index: number;\n}>();\n\nconst stepperCustomIcon = tv({\n  base: 'inline-flex items-center justify-center rounded-full h-10 w-10 shrink-0 border border-rui-primary',\n  variants: {\n    state: {\n      [StepperState.inactive]: 'text-xs bg-white dark:bg-rui-primary dark:text-white dark:border-white',\n      [StepperState.active]: 'text-white bg-rui-primary dark:bg-white dark:text-rui-primary',\n    },\n  },\n  defaultVariants: { state: StepperState.active },\n});\n\nconst indicatorState = computed<IndicatorState>(() => state === StepperState.inactive ? StepperState.inactive : StepperState.active);\n</script>\n\n<template>\n  <span :class=\"stepperCustomIcon({ state: indicatorState })\">\n    <span\n      v-if=\"state === StepperState.inactive\"\n      class=\"text-rui-primary dark:text-white\"\n    >\n      {{ index }}\n    </span>\n    <RuiIcon\n      v-else-if=\"state === StepperState.active\"\n      name=\"lu-checkbox-blank-circle-fill\"\n      :size=\"20\"\n    />\n    <RuiIcon\n      v-else-if=\"state === StepperState.done\"\n      :size=\"20\"\n      name=\"lu-check\"\n    />\n    <span v-else>\n      {{ index }}\n    </span>\n  </span>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;EAYA,MAAM,oBAAoB,GAAG;GAC3B,MAAM;GACN,UAAU,EACR,OAAO;KACJ,aAAa,WAAW;KACxB,aAAa,SAAS;GACzB,EACF;GACA,iBAAiB,EAAE,OAAO,aAAa,OAAO;EAChD,CAAC;EAED,MAAM,iBAAiB,eAA+B,QAAA,UAAU,aAAa,WAAW,aAAa,WAAW,aAAa,MAAM;;GAIjI,OAAA,UAAA,GAAA,mBAoBO,QAAA,EApBA,OAAK,eAAE,MAAA,iBAAA,CAAiB,CAAA,EAAA,OAAU,MAAA,cAAA,EAAc,CAAA,CAAA,EAAA,GAAA,CAE7C,QAAA,UAAU,MAAA,YAAA,CAAY,CAAC,YAD/B,UAAA,GAAA,mBAKO,QALP,YAKO,gBADF,QAAA,KAAK,GAAA,CAAA,KAGG,QAAA,UAAU,MAAA,YAAA,CAAY,CAAC,UADpC,UAAA,GAAA,YAIE,iBAAA;;IAFA,MAAK;IACJ,MAAM;GAGI,CAAA,KAAA,QAAA,UAAU,MAAA,YAAA,CAAY,CAAC,QADpC,UAAA,GAAA,YAIE,iBAAA;;IAFC,MAAM;IACP,MAAK;GAEP,CAAA,MAAA,UAAA,GAAA,mBAEO,QAAA,YAAA,gBADF,QAAA,KAAK,GAAA,CAAA,EAAA,GAAA,CAAA"}

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":[],"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\ninterface StateIconProps {\n  name: RuiIcons;\n  class?: string;\n  size?: number;\n}\n\nconst { state = StepperState.inactive, index } = defineProps<{\n  state?: StepperState;\n  index: number;\n}>();\n\nconst stateIconMap: Partial<Record<StepperState, StateIconProps>> = {\n  [StepperState.done]: { name: 'lu-check', class: 'text-rui-dark-text dark:text-rui-light-text', size: 20 },\n  [StepperState.success]: { name: 'lu-circle-check' },\n  [StepperState.error]: { name: 'lu-circle-alert' },\n  [StepperState.warning]: { name: 'lu-triangle-alert' },\n  [StepperState.info]: { name: 'lu-info' },\n};\n\nconst stepperIcon = tv({\n  slots: {\n    indicator: 'inline-flex items-center justify-center rounded-full h-6 w-6',\n    label: 'text-rui-dark-text',\n  },\n  variants: {\n    state: {\n      [StepperState.inactive]: {\n        indicator: 'bg-current text-xs',\n        label: 'dark:text-rui-light-text-secondary',\n      },\n      [StepperState.active]: {\n        indicator: 'bg-rui-primary text-xs',\n        label: 'dark:text-rui-light-text',\n      },\n      [StepperState.done]: {\n        indicator: 'bg-rui-primary text-xs',\n        label: 'dark:text-rui-light-text',\n      },\n      [StepperState.error]: {},\n      [StepperState.warning]: {},\n      [StepperState.info]: {},\n      [StepperState.success]: {},\n    },\n  },\n  defaultVariants: { state: StepperState.inactive },\n});\n\nconst ui = computed<ReturnType<typeof stepperIcon>>(() => stepperIcon({ state }));\n\nconst showLabel = computed<boolean>(() => state === StepperState.inactive || state === StepperState.active);\n\nconst iconProps = computed<StateIconProps | undefined>(() => stateIconMap[state]);\n</script>\n\n<template>\n  <span :class=\"ui.indicator()\">\n    <span\n      v-if=\"showLabel\"\n      :class=\"ui.label()\"\n    >\n      {{ index }}\n    </span>\n    <RuiIcon\n      v-else-if=\"iconProps\"\n      :name=\"iconProps.name\"\n      :class=\"iconProps.class\"\n      :size=\"iconProps.size\"\n    />\n  </span>\n</template>\n"],"mappings":";;;;;;;;;;;;EAiBA,MAAM,eAA8D;IACjE,aAAa,OAAO;IAAE,MAAM;IAAY,OAAO;IAA+C,MAAM;GAAG;IACvG,aAAa,UAAU,EAAE,MAAM,kBAAkB;IACjD,aAAa,QAAQ,EAAE,MAAM,kBAAkB;IAC/C,aAAa,UAAU,EAAE,MAAM,oBAAoB;IACnD,aAAa,OAAO,EAAE,MAAM,UAAU;EACzC;EAEA,MAAM,cAAc,GAAG;GACrB,OAAO;IACL,WAAW;IACX,OAAO;GACT;GACA,UAAU,EACR,OAAO;KACJ,aAAa,WAAW;KACvB,WAAW;KACX,OAAO;IACT;KACC,aAAa,SAAS;KACrB,WAAW;KACX,OAAO;IACT;KACC,aAAa,OAAO;KACnB,WAAW;KACX,OAAO;IACT;KACC,aAAa,QAAQ,CAAC;KACtB,aAAa,UAAU,CAAC;KACxB,aAAa,OAAO,CAAC;KACrB,aAAa,UAAU,CAAC;GAC3B,EACF;GACA,iBAAiB,EAAE,OAAO,aAAa,SAAS;EAClD,CAAC;EAED,MAAM,KAAK,eAA+C,YAAY,EAAE,OAAI,QAAA,MAAE,CAAC,CAAC;EAEhF,MAAM,YAAY,eAAwB,QAAA,UAAU,aAAa,YAAY,QAAA,UAAU,aAAa,MAAM;EAE1G,MAAM,YAAY,eAA2C,aAAa,QAAA,MAAM;;uBAI9E,mBAaO,QAAA,EAbA,OAAK,eAAE,MAAA,EAAA,CAAE,CAAC,UAAS,CAAA,EAAA,GAAA,CAEhB,MAAA,SAAA,KAAA,UAAA,GADR,mBAKO,QAAA;;IAHJ,OAAK,eAAE,MAAA,EAAA,CAAE,CAAC,MAAK,CAAA;sBAEb,QAAA,KAAK,GAAA,CAAA,KAGG,MAAA,SAAA,KAAA,UAAA,GADb,YAKE,iBAAA;;IAHC,MAAM,MAAA,SAAA,CAAS,CAAC;IAChB,OAAK,eAAE,MAAA,SAAA,CAAS,CAAC,KAAK;IACtB,MAAM,MAAA,SAAA,CAAS,CAAC"}
+{"version":3,"file":"RuiStepperIcon.vue_vue_type_script_setup_true_lang.js","names":[],"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\ninterface StateIconProps {\n  name: RuiIcons;\n  class?: string;\n  size?: number;\n}\n\nconst { state = StepperState.inactive, index } = defineProps<{\n  state?: StepperState;\n  index: number;\n}>();\n\nconst stateIconMap: Partial<Record<StepperState, StateIconProps>> = {\n  [StepperState.done]: { name: 'lu-check', class: 'text-rui-dark-text dark:text-rui-light-text', size: 20 },\n  [StepperState.success]: { name: 'lu-circle-check' },\n  [StepperState.error]: { name: 'lu-circle-alert' },\n  [StepperState.warning]: { name: 'lu-triangle-alert' },\n  [StepperState.info]: { name: 'lu-info' },\n};\n\nconst stepperIcon = tv({\n  slots: {\n    indicator: 'inline-flex items-center justify-center rounded-full h-6 w-6',\n    label: 'text-rui-dark-text',\n  },\n  variants: {\n    state: {\n      [StepperState.inactive]: {\n        indicator: 'bg-current text-xs',\n        label: 'dark:text-rui-light-text-secondary',\n      },\n      [StepperState.active]: {\n        indicator: 'bg-rui-primary text-xs',\n        label: 'dark:text-rui-light-text',\n      },\n      [StepperState.done]: {\n        indicator: 'bg-rui-primary text-xs',\n        label: 'dark:text-rui-light-text',\n      },\n      [StepperState.error]: {},\n      [StepperState.warning]: {},\n      [StepperState.info]: {},\n      [StepperState.success]: {},\n    },\n  },\n  defaultVariants: { state: StepperState.inactive },\n});\n\nconst ui = computed<ReturnType<typeof stepperIcon>>(() => stepperIcon({ state }));\n\nconst showLabel = computed<boolean>(() => state === StepperState.inactive || state === StepperState.active);\n\nconst iconProps = computed<StateIconProps | undefined>(() => stateIconMap[state]);\n</script>\n\n<template>\n  <span :class=\"ui.indicator()\">\n    <span\n      v-if=\"showLabel\"\n      :class=\"ui.label()\"\n    >\n      {{ index }}\n    </span>\n    <RuiIcon\n      v-else-if=\"iconProps\"\n      :name=\"iconProps.name\"\n      :class=\"iconProps.class\"\n      :size=\"iconProps.size\"\n    />\n  </span>\n</template>\n"],"mappings":";;;;;;;;;;;;EAiBA,MAAM,eAA8D;IACjE,aAAa,OAAO;IAAE,MAAM;IAAY,OAAO;IAA+C,MAAM;GAAG;IACvG,aAAa,UAAU,EAAE,MAAM,kBAAkB;IACjD,aAAa,QAAQ,EAAE,MAAM,kBAAkB;IAC/C,aAAa,UAAU,EAAE,MAAM,oBAAoB;IACnD,aAAa,OAAO,EAAE,MAAM,UAAU;EACzC;EAEA,MAAM,cAAc,GAAG;GACrB,OAAO;IACL,WAAW;IACX,OAAO;GACT;GACA,UAAU,EACR,OAAO;KACJ,aAAa,WAAW;KACvB,WAAW;KACX,OAAO;IACT;KACC,aAAa,SAAS;KACrB,WAAW;KACX,OAAO;IACT;KACC,aAAa,OAAO;KACnB,WAAW;KACX,OAAO;IACT;KACC,aAAa,QAAQ,CAAC;KACtB,aAAa,UAAU,CAAC;KACxB,aAAa,OAAO,CAAC;KACrB,aAAa,UAAU,CAAC;GAC3B,EACF;GACA,iBAAiB,EAAE,OAAO,aAAa,SAAS;EAClD,CAAC;EAED,MAAM,KAAK,eAA+C,YAAY,EAAE,OAAI,QAAA,MAAE,CAAC,CAAC;EAEhF,MAAM,YAAY,eAAwB,QAAA,UAAU,aAAa,YAAY,QAAA,UAAU,aAAa,MAAM;EAE1G,MAAM,YAAY,eAA2C,aAAa,QAAA,MAAM;;GAI9E,OAAA,UAAA,GAAA,mBAaO,QAAA,EAbA,OAAK,eAAE,MAAA,EAAA,CAAE,CAAC,UAAS,CAAA,EAAA,GAAA,CAEhB,MAAA,SAAA,KADR,UAAA,GAAA,mBAKO,QAAA;;IAHJ,OAAK,eAAE,MAAA,EAAA,CAAE,CAAC,MAAK,CAAA;GAEb,GAAA,gBAAA,QAAA,KAAK,GAAA,CAAA,KAGG,MAAA,SAAA,KADb,UAAA,GAAA,YAKE,iBAAA;;IAHC,MAAM,MAAA,SAAA,CAAS,CAAC;IAChB,OAAK,eAAE,MAAA,SAAA,CAAS,CAAC,KAAK;IACtB,MAAM,MAAA,SAAA,CAAS,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"RuiDataTable.js","names":[],"sources":["../../../src/components/tables/RuiDataTable.vue"],"sourcesContent":["<script lang=\"ts\" setup generic=\"T extends object, IdType extends keyof T = keyof T\">\nimport type { GroupHeader } from '@/composables/tables/data-table/types';\nimport { dataTableStyles } from '@/components/tables/data-table-styles';\nimport { type DataTableClasses, provideDataTableContext, provideDataTableNested, useDataTableNested } from '@/components/tables/data-table/context';\nimport RuiDataTableBody from '@/components/tables/data-table/RuiDataTableBody.vue';\nimport RuiDataTableMobileSort from '@/components/tables/data-table/RuiDataTableMobileSort.vue';\nimport RuiTableHead, {\n  type GroupData,\n  type TableColumn,\n  type TableRowKeyData,\n  type TableSortData,\n} from '@/components/tables/RuiTableHead.vue';\nimport RuiTablePagination, {\n  type TablePaginationData,\n} from '@/components/tables/RuiTablePagination.vue';\nimport { GroupExpandButtonPosition } from '@/components/tables/table-props';\nimport { useTable } from '@/composables/defaults/table';\nimport { useStickyTableHeader } from '@/composables/sticky-header';\nimport { useTableColumns } from '@/composables/tables/data-table/columns';\nimport { useTableExpansion } from '@/composables/tables/data-table/expansion';\nimport { useTableGrouping } from '@/composables/tables/data-table/grouping';\nimport { useTablePagination } from '@/composables/tables/data-table/pagination';\nimport { useTableSelection } from '@/composables/tables/data-table/selection';\nimport { useTableSort } from '@/composables/tables/data-table/sort';\n\nexport type { GroupedTableRow, GroupHeader, TableOptions } from '@/composables/tables/data-table/types';\n\nexport interface Props<T, K extends keyof T> {\n  /**\n   * list of items for each row\n   */\n  rows: readonly T[];\n  /**\n   * the attribute used to identify each row uniquely for selection, usually `id`\n   */\n  rowAttr: K;\n  /**\n   * model for internal searching\n   */\n  search?: string;\n  /**\n   * model for items per page\n   * will be used if the `pagination` model isn't specified\n   */\n  itemsPerPage?: number;\n  /**\n   * list of column definitions\n   */\n  cols?: TableColumn<T>[];\n  /**\n   * attribute to use from column definitions to display column titles\n   */\n  columnAttr?: keyof TableColumn<T>;\n  /**\n   * flag to show a more or less spacious table\n   */\n  dense?: boolean;\n  /**\n   * flag to outline the flag with a border\n   */\n  outlined?: boolean;\n  /**\n   * should add zebra-striping to the table row\n   */\n  striped?: boolean;\n  /**\n   * flag to show loading state of the table\n   * triggers indefinite progress at the bottom of the table header\n   */\n  loading?: boolean;\n  disablePerPage?: boolean;\n  /**\n   * Maximum number of pages before the jump-to-page dropdown is replaced with\n   * a numeric input. Defaults to `500`. Forwarded to `RuiTablePagination`.\n   */\n  rangesThreshold?: number;\n  /**\n   * data to display for empty state\n   * text and icon\n   * @example :empty=\"{ icon: 'transactions-line', label: 'No transactions found' }\"\n   */\n  empty?: {\n    label?: string;\n    description?: string;\n  };\n  /**\n   * should hide the header navigation\n   */\n  hideDefaultHeader?: boolean;\n  /**\n   * should hide the footer navigation\n   */\n  hideDefaultFooter?: boolean;\n\n  rounded?: 'sm' | 'md' | 'lg';\n  /**\n   * make expansion work like accordion\n   */\n  singleExpand?: boolean;\n  /**\n   * make table head stick to top on scroll\n   */\n  stickyHeader?: boolean;\n  stickyOffset?: number;\n  /**\n   * Affects how the items per page work across the app.\n   * When true, changing the items per page setting in one table will affect other tables.\n   */\n  globalItemsPerPage?: boolean;\n  groupExpandButtonPosition?: GroupExpandButtonPosition;\n  disabledRows?: readonly T[];\n  multiPageSelect?: boolean;\n  itemClass?: ((item: T) => string) | string;\n  /**\n   * Render each row as a stacked card instead of a table row once the measured\n   * width is narrower than this width (in pixels). Columns flagged with\n   * `mobileHidden` are dropped in this layout. Falls back to the global\n   * `mobileBreakpoint` table default; leave both unset to keep the default table\n   * layout at every width.\n   */\n  mobileBreakpoint?: number;\n  /**\n   * What the `mobileBreakpoint` is measured against: the browser `viewport`\n   * (default) or this table's own `container` width. Use `container` when the\n   * table lives in a narrow region of a wider window. Falls back to the global\n   * `mobileBreakpointBasis` table default.\n   */\n  mobileBreakpointBasis?: 'viewport' | 'container';\n  /**\n   * Force the stacked mobile card layout on (`true`) or off (`false`),\n   * regardless of `mobileBreakpoint`. Leave unset to derive it from the width.\n   */\n  mobile?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiDataTable',\n});\n\nconst selectedData = defineModel<T[IdType][]>();\n\nconst expanded = defineModel<T[]>('expanded');\n\nconst [pagination, paginationModifiers] = defineModel<TablePaginationData, 'external'>('pagination');\n\nconst [sort, sortModifiers] = defineModel<TableSortData<T>, 'external'>('sort');\n\nconst group = defineModel<TableRowKeyData<T>>('group');\n\nconst collapsed = defineModel<T[]>('collapsed');\n\nconst {\n  rows,\n  rowAttr,\n  search = '',\n  itemsPerPage = 10,\n  cols,\n  columnAttr = 'label',\n  dense = false,\n  outlined = false,\n  striped = false,\n  loading = false,\n  disablePerPage = false,\n  rangesThreshold = 500,\n  empty = { label: 'No item found' },\n  hideDefaultHeader = false,\n  hideDefaultFooter = false,\n  rounded = 'md',\n  singleExpand = false,\n  stickyHeader = false,\n  stickyOffset,\n  globalItemsPerPage = undefined,\n  groupExpandButtonPosition = GroupExpandButtonPosition.start,\n  disabledRows,\n  multiPageSelect = false,\n  itemClass = '',\n  mobileBreakpoint,\n  mobileBreakpointBasis,\n  mobile,\n} = defineProps<Props<T, IdType>>();\n\nconst emit = defineEmits<{\n  'update:options': [value: { pagination?: TablePaginationData; sort?: TableSortData<T> }];\n  'copy:group': [value: GroupData<T>];\n}>();\n\nconst slots = defineSlots<Partial<\n  Record<`header.${string}`, (props: { column: TableColumn<T> }) => any> &\n  Record<`item.${string}`, (props: { column: TableColumn<T>; row: T; index: number }) => any> & {\n    'body.prepend': (props: { colspan: number }) => any;\n    'body.append': (props: { colspan: number }) => any;\n    'group.header': (props: {\n      colspan: number;\n      header: GroupHeader<T>;\n      isOpen: boolean;\n      toggle: () => void;\n    }) => any;\n    'group.header.content': (props: { header: GroupHeader<T>; groupKey: string }) => any;\n    'expanded-item': (props: { row: T; index: number }) => any;\n    'no-data': () => any;\n    'empty-description': () => any;\n    'tfoot': () => any;\n  }\n>>();\n\nconst tableDefaults = useTable();\n\nconst tableWrapper = useTemplateRef<HTMLElement>('tableWrapper');\nconst { width: windowWidth } = useWindowSize();\nconst { width: containerWidth } = useElementSize(tableWrapper);\n\n// Per-table props win, then the global table defaults.\nconst resolvedMobileBreakpoint = computed<number | undefined>(() => {\n  if (mobileBreakpoint !== undefined)\n    return mobileBreakpoint;\n  const globalBreakpoint = tableDefaults.mobileBreakpoint;\n  return globalBreakpoint === undefined ? undefined : get(globalBreakpoint);\n});\nconst resolvedMobileBasis = computed<'viewport' | 'container'>(() => {\n  if (mobileBreakpointBasis !== undefined)\n    return mobileBreakpointBasis;\n  const globalBasis = tableDefaults.mobileBreakpointBasis;\n  return globalBasis === undefined ? 'viewport' : get(globalBasis);\n});\n\nconst isMobile = computed<boolean>(() => {\n  const breakpoint = get(resolvedMobileBreakpoint);\n  // Vue coerces an absent Boolean prop to `false`, so `mobile` cannot be used to\n  // detect \"unset\". When no breakpoint is configured, `mobile` is the manual\n  // switch (defaulting to desktop). When a breakpoint is configured it drives\n  // the layout, and `mobile === true` can still force the stacked layout on.\n  if (breakpoint === undefined)\n    return mobile;\n  if (mobile)\n    return true;\n  // Before the container is measured, `containerWidth` is 0; fall back to the\n  // viewport so the layout does not flash to mobile on first paint.\n  const width = get(resolvedMobileBasis) === 'container'\n    ? (get(containerWidth) || get(windowWidth))\n    : get(windowWidth);\n  return width < breakpoint;\n});\n\nconst stickyHeaderOffset = computed<number | undefined>(() =>\n  stickyOffset !== undefined ? stickyOffset : get(tableDefaults.stickyOffset),\n);\n\n// Nested tables (e.g. rendered inside an expanded row) must not pin their own\n// toolbar: only the outermost table sticks, otherwise the bars stack and\n// collide. Detect nesting via inject, then mark descendants as nested.\nconst isNestedTable = useDataTableNested();\nprovideDataTableNested();\n\n// On mobile there is no column header to pin, so `stickyHeader` instead keeps\n// the pagination + sort toolbar pinned to the top while the card list scrolls.\nconst stickyMobileToolbar = computed<boolean>(() => stickyHeader && get(isMobile) && !isNestedTable);\n\nconst table = useTemplateRef<HTMLTableElement>('table');\nconst tableScroller = useTemplateRef<HTMLElement>('tableScroller');\n\nconst { stick } = useStickyTableHeader(\n  () => stickyHeader,\n  stickyHeaderOffset,\n  { table, tableScroller },\n);\n\nconst { expandable, isExpanded, onToggleExpand } = useTableExpansion<T, IdType>(\n  { rowAttr, singleExpand },\n  { expanded },\n);\n\nfunction emitUpdateOptions(opts: { sort?: TableSortData<T>; pagination?: TablePaginationData }): void {\n  emit('update:options', opts);\n}\n\nconst {\n  sortData,\n  sortedMap,\n  sorted,\n  onSort: applySort,\n} = useTableSort<T>(\n  { rows: () => rows, search: () => search, sortModifiersExternal: sortModifiers.external },\n  {\n    sort,\n    pagination,\n    emitUpdateOptions,\n  },\n);\n\nconst {\n  groupKeys,\n  groupKey,\n  grouped,\n  isExpandedGroup,\n  isHiddenRow,\n  onToggleExpandGroup,\n  onUngroup,\n} = useTableGrouping<T, IdType>(\n  { rowAttr },\n  {\n    group,\n    collapsed,\n    sorted,\n  },\n);\n\nconst {\n  paginationData,\n  filtered,\n  setInternalTotal,\n  resetPagination,\n} = useTablePagination<T>(\n  {\n    itemsPerPage,\n    paginationModifiersExternal: paginationModifiers.external,\n    globalItemsPerPage,\n  },\n  {\n    pagination,\n    grouped,\n    isHiddenRow,\n    sort,\n    emitUpdateOptions,\n    tableDefaults,\n  },\n);\n\nconst noData = computed<boolean>(() => get(filtered).length === 0);\n\nconst { columns, colspan, headerSlots, cellValue } = useTableColumns<T, IdType>({\n  cols: () => cols,\n  columnAttr,\n  rows: () => rows,\n  expandable,\n  groupKeys,\n  selectedData,\n  slots,\n  isMobile,\n  tdResolver: options => get(ui).td(options),\n});\n\nconst showMobileSort = computed<boolean>(() =>\n  get(isMobile) && !!get(sortData) && get(columns).some(column => column.sortable),\n);\n\nconst ITEM_SLOT_PREFIX = 'item.';\n\n// Slot keys are static for the component lifetime — no reactivity needed\nconst itemSlotKeys: Set<string> = new Set(\n  Object.keys(slots)\n    .filter((key): key is `item.${string}` => key.startsWith(ITEM_SLOT_PREFIX))\n    .map(key => key.slice(ITEM_SLOT_PREFIX.length)),\n);\n\nconst {\n  isAllSelected,\n  indeterminate,\n  isSelected,\n  isDisabledRow,\n  onToggleAll,\n  onSelect,\n  onCheckboxClick,\n  deselectRemovedRows,\n  resetCheckboxShiftState,\n} = useTableSelection<T, IdType>(\n  { rowAttr, multiPageSelect, disabledRows: () => disabledRows },\n  { selectedData, filtered },\n);\n\n// Sort triggers selection reset — handled here to avoid circular dependency between sort and selection\nfunction onSort(payload: Parameters<typeof applySort>[0]): void {\n  applySort(payload);\n  if (!multiPageSelect)\n    onToggleAll(false);\n  resetCheckboxShiftState();\n}\n\nfunction onPaginate(): void {\n  if ((get(expanded)?.length ?? 0) > 0)\n    set(expanded, []);\n  if (!multiPageSelect)\n    onToggleAll(false);\n  resetCheckboxShiftState();\n}\n\n// Reset pagination page to 1 on search query change\nwatch(() => search, () => {\n  resetPagination();\n  onToggleAll(false);\n  resetCheckboxShiftState();\n});\n\nwatch(sorted, (items) => {\n  if (!multiPageSelect)\n    deselectRemovedRows();\n  setInternalTotal(items);\n});\n\nonMounted(() => {\n  setInternalTotal(get(sorted));\n});\n\nconst ui = computed<ReturnType<typeof dataTableStyles>>(() => dataTableStyles({\n  outlined,\n  rounded,\n  dense,\n  striped,\n  mobile: get(isMobile),\n}));\n\nconst classes = computed<DataTableClasses>(() => {\n  const s = get(ui);\n  return {\n    td: s.td(),\n    tr: s.tr(),\n    trSelected: s.tr({ rowVariant: 'selected' }),\n    trExpandable: s.tr({ rowVariant: 'expandable' }),\n    trGroup: s.tr({ rowVariant: 'group' }),\n    trEmpty: s.tr({ rowVariant: 'empty' }),\n    checkbox: s.checkbox(),\n    tbody: s.tbody(),\n    tbodyLoader: s.tbodyLoader(),\n    tbodyLoaderContent: s.tbodyLoaderContent(),\n  };\n});\n\nprovideDataTableContext<T, IdType>({\n  // Reactive (ComputedRef/Ref) — destructuring preserves reactivity via Vue template auto-unwrap\n  classes,\n  columns,\n  colspan,\n  expandable,\n  groupKey,\n  isMobile,\n  selectedData,\n  // Static values\n  cellValue,\n  columnAttr,\n  dense,\n  getRowId: (row: T) => row[rowAttr],\n  itemSlotKeys,\n  groupExpandButtonPosition,\n  isDisabledRow,\n  isExpanded,\n  isExpandedGroup,\n  isSelected,\n  itemClass,\n  onCheckboxClick,\n  onCopyGroup: (header: GroupHeader<T>) => emit('copy:group', { key: get(groupKey) ?? '', value: header.group }),\n  onSelect,\n  onToggleExpand,\n  onToggleExpandGroup,\n  onUngroup,\n});\n</script>\n\n<template>\n  <div\n    ref=\"tableWrapper\"\n    :class=\"ui.wrapper()\"\n    data-id=\"table-wrapper\"\n  >\n    <div\n      :class=\"stickyMobileToolbar ? 'sticky z-10 bg-white dark:bg-[#121212] pt-2' : 'contents'\"\n      :style=\"stickyMobileToolbar ? { top: `${stickyHeaderOffset ?? 0}px` } : undefined\"\n      data-id=\"table-mobile-toolbar-sticky\"\n    >\n      <RuiTablePagination\n        v-if=\"paginationData && !hideDefaultHeader\"\n        v-model=\"paginationData\"\n        :dense=\"dense\"\n        :loading=\"loading\"\n        :mobile=\"isMobile\"\n        :disable-per-page=\"disablePerPage\"\n        :ranges-threshold=\"rangesThreshold\"\n        data-id=\"table-pagination\"\n        @update:model-value=\"onPaginate()\"\n      />\n      <div\n        v-if=\"showMobileSort\"\n        class=\"flex justify-end p-2\"\n        data-id=\"table-mobile-toolbar\"\n      >\n        <RuiDataTableMobileSort\n          :columns=\"columns\"\n          :column-attr=\"columnAttr\"\n          :sorted-map=\"sortedMap\"\n          :dense=\"dense\"\n          @sort=\"onSort($event)\"\n        />\n      </div>\n    </div>\n    <div\n      ref=\"tableScroller\"\n      :class=\"[ui.scroller(), isMobile && !showMobileSort ? 'pt-2' : '']\"\n      data-id=\"table-scroller\"\n    >\n      <table\n        ref=\"table\"\n        :class=\"ui.table()\"\n        :aria-busy=\"loading\"\n      >\n        <RuiTableHead\n          v-if=\"!isMobile\"\n          :loading=\"loading\"\n          :indeterminate=\"indeterminate\"\n          :capitalize-headers=\"!cols\"\n          :colspan=\"colspan\"\n          :column-attr=\"columnAttr\"\n          :columns=\"columns\"\n          :dense=\"dense\"\n          :disable-check-all=\"!filtered?.length\"\n          :is-all-selected=\"isAllSelected\"\n          :selectable=\"!!selectedData\"\n          :sort-data=\"sortData\"\n          :sorted-map=\"sortedMap\"\n          :stick=\"stick\"\n          :sticky-header=\"stickyHeader\"\n          @sort=\"onSort($event)\"\n          @select:all=\"onToggleAll($event)\"\n        >\n          <template\n            v-for=\"headerSlot in headerSlots\"\n            #[headerSlot]=\"slotData\"\n          >\n            <slot\n              :name=\"headerSlot\"\n              v-bind=\"slotData\"\n            />\n          </template>\n        </RuiTableHead>\n        <RuiTableHead\n          v-if=\"stickyHeader && !isMobile\"\n          :loading=\"loading\"\n          :capitalize-headers=\"!cols\"\n          :colspan=\"colspan\"\n          :column-attr=\"columnAttr\"\n          :columns=\"columns\"\n          :dense=\"dense\"\n          :selectable=\"!!selectedData\"\n          :sort-data=\"sortData\"\n          :sorted-map=\"sortedMap\"\n          data-id=\"head-clone\"\n          class=\"opacity-0 invisible\"\n        >\n          <template\n            v-for=\"headerSlot in headerSlots\"\n            #[headerSlot]=\"slotData\"\n          >\n            <slot\n              :name=\"headerSlot\"\n              v-bind=\"slotData\"\n            />\n          </template>\n        </RuiTableHead>\n        <RuiDataTableBody\n          :filtered=\"filtered\"\n          :loading=\"loading\"\n          :no-data=\"noData\"\n          :empty=\"empty\"\n        >\n          <template\n            v-if=\"slots['body.prepend']\"\n            #body.prepend=\"slotData\"\n          >\n            <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n            <slot\n              name=\"body.prepend\"\n              v-bind=\"slotData\"\n            />\n          </template>\n          <template\n            v-if=\"slots['group.header']\"\n            #group.header=\"slotData\"\n          >\n            <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n            <slot\n              name=\"group.header\"\n              v-bind=\"slotData\"\n            />\n          </template>\n          <template\n            v-if=\"slots['group.header.content']\"\n            #group.header.content=\"slotData\"\n          >\n            <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n            <slot\n              name=\"group.header.content\"\n              v-bind=\"slotData\"\n            />\n          </template>\n          <template\n            v-for=\"key in itemSlotKeys\"\n            #[`item.${key}`]=\"slotData\"\n          >\n            <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n            <slot\n              :name=\"`item.${key}`\"\n              v-bind=\"slotData\"\n            />\n          </template>\n          <template\n            v-if=\"slots['expanded-item']\"\n            #expanded-item=\"slotData\"\n          >\n            <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n            <slot\n              name=\"expanded-item\"\n              v-bind=\"slotData\"\n            />\n          </template>\n          <template\n            v-if=\"slots['no-data']\"\n            #no-data\n          >\n            <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n            <slot name=\"no-data\" />\n          </template>\n          <template\n            v-if=\"slots['empty-description']\"\n            #empty-description\n          >\n            <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n            <slot name=\"empty-description\" />\n          </template>\n          <template\n            v-if=\"slots['body.append']\"\n            #body.append=\"slotData\"\n          >\n            <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n            <slot\n              name=\"body.append\"\n              v-bind=\"slotData\"\n            />\n          </template>\n        </RuiDataTableBody>\n        <tfoot>\n          <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n          <slot name=\"tfoot\" />\n        </tfoot>\n      </table>\n    </div>\n    <RuiTablePagination\n      v-if=\"paginationData && !hideDefaultFooter\"\n      v-model=\"paginationData\"\n      :dense=\"dense\"\n      :loading=\"loading\"\n      :mobile=\"isMobile\"\n      :disable-per-page=\"disablePerPage\"\n      :ranges-threshold=\"rangesThreshold\"\n      data-id=\"table-pagination\"\n      @update:model-value=\"onPaginate()\"\n    />\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"RuiDataTable.js","names":[],"sources":["../../../src/components/tables/RuiDataTable.vue"],"sourcesContent":["<script lang=\"ts\" setup generic=\"T extends object, IdType extends keyof T = keyof T\">\nimport type { GroupHeader } from '@/composables/tables/data-table/types';\nimport { dataTableStyles } from '@/components/tables/data-table-styles';\nimport { type DataTableClasses, provideDataTableContext, provideDataTableNested, useDataTableNested } from '@/components/tables/data-table/context';\nimport RuiDataTableBody from '@/components/tables/data-table/RuiDataTableBody.vue';\nimport RuiDataTableMobileSort from '@/components/tables/data-table/RuiDataTableMobileSort.vue';\nimport RuiTableHead, {\n  type GroupData,\n  type TableColumn,\n  type TableRowKeyData,\n  type TableSortData,\n} from '@/components/tables/RuiTableHead.vue';\nimport RuiTablePagination, {\n  type TablePaginationData,\n} from '@/components/tables/RuiTablePagination.vue';\nimport { GroupExpandButtonPosition } from '@/components/tables/table-props';\nimport { useTable } from '@/composables/defaults/table';\nimport { useStickyTableHeader } from '@/composables/sticky-header';\nimport { useTableColumns } from '@/composables/tables/data-table/columns';\nimport { useTableExpansion } from '@/composables/tables/data-table/expansion';\nimport { useTableGrouping } from '@/composables/tables/data-table/grouping';\nimport { useTablePagination } from '@/composables/tables/data-table/pagination';\nimport { useTableSelection } from '@/composables/tables/data-table/selection';\nimport { useTableSort } from '@/composables/tables/data-table/sort';\n\nexport type { GroupedTableRow, GroupHeader, TableOptions } from '@/composables/tables/data-table/types';\n\nexport interface Props<T, K extends keyof T> {\n  /**\n   * list of items for each row\n   */\n  rows: readonly T[];\n  /**\n   * the attribute used to identify each row uniquely for selection, usually `id`\n   */\n  rowAttr: K;\n  /**\n   * model for internal searching\n   */\n  search?: string;\n  /**\n   * model for items per page\n   * will be used if the `pagination` model isn't specified\n   */\n  itemsPerPage?: number;\n  /**\n   * list of column definitions\n   */\n  cols?: TableColumn<T>[];\n  /**\n   * attribute to use from column definitions to display column titles\n   */\n  columnAttr?: keyof TableColumn<T>;\n  /**\n   * flag to show a more or less spacious table\n   */\n  dense?: boolean;\n  /**\n   * flag to outline the flag with a border\n   */\n  outlined?: boolean;\n  /**\n   * should add zebra-striping to the table row\n   */\n  striped?: boolean;\n  /**\n   * flag to show loading state of the table\n   * triggers indefinite progress at the bottom of the table header\n   */\n  loading?: boolean;\n  disablePerPage?: boolean;\n  /**\n   * Maximum number of pages before the jump-to-page dropdown is replaced with\n   * a numeric input. Defaults to `500`. Forwarded to `RuiTablePagination`.\n   */\n  rangesThreshold?: number;\n  /**\n   * The text and icon shown when there are no rows, e.g.\n   * `:empty=\"\\{ icon: 'transactions-line', label: 'No transactions found' \\}\"`\n   */\n  empty?: {\n    label?: string;\n    description?: string;\n  };\n  /**\n   * should hide the header navigation\n   */\n  hideDefaultHeader?: boolean;\n  /**\n   * should hide the footer navigation\n   */\n  hideDefaultFooter?: boolean;\n\n  rounded?: 'sm' | 'md' | 'lg';\n  /**\n   * make expansion work like accordion\n   */\n  singleExpand?: boolean;\n  /**\n   * make table head stick to top on scroll\n   */\n  stickyHeader?: boolean;\n  stickyOffset?: number;\n  /**\n   * Affects how the items per page work across the app.\n   * When true, changing the items per page setting in one table will affect other tables.\n   */\n  globalItemsPerPage?: boolean;\n  groupExpandButtonPosition?: GroupExpandButtonPosition;\n  disabledRows?: readonly T[];\n  multiPageSelect?: boolean;\n  itemClass?: ((item: T) => string) | string;\n  /**\n   * Render each row as a stacked card instead of a table row once the measured\n   * width is narrower than this width (in pixels). Columns flagged with\n   * `mobileHidden` are dropped in this layout. Falls back to the global\n   * `mobileBreakpoint` table default; leave both unset to keep the default table\n   * layout at every width.\n   */\n  mobileBreakpoint?: number;\n  /**\n   * What the `mobileBreakpoint` is measured against: the browser `viewport`\n   * (default) or this table's own `container` width. Use `container` when the\n   * table lives in a narrow region of a wider window. Falls back to the global\n   * `mobileBreakpointBasis` table default.\n   */\n  mobileBreakpointBasis?: 'viewport' | 'container';\n  /**\n   * Force the stacked mobile card layout on (`true`) or off (`false`),\n   * regardless of `mobileBreakpoint`. Leave unset to derive it from the width.\n   */\n  mobile?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiDataTable',\n});\n\nconst selectedData = defineModel<T[IdType][]>();\n\nconst expanded = defineModel<T[]>('expanded');\n\nconst [pagination, paginationModifiers] = defineModel<TablePaginationData, 'external'>('pagination');\n\nconst [sort, sortModifiers] = defineModel<TableSortData<T>, 'external'>('sort');\n\nconst group = defineModel<TableRowKeyData<T>>('group');\n\nconst collapsed = defineModel<T[]>('collapsed');\n\nconst {\n  rows,\n  rowAttr,\n  search = '',\n  itemsPerPage = 10,\n  cols,\n  columnAttr = 'label',\n  dense = false,\n  outlined = false,\n  striped = false,\n  loading = false,\n  disablePerPage = false,\n  rangesThreshold = 500,\n  empty = { label: 'No item found' },\n  hideDefaultHeader = false,\n  hideDefaultFooter = false,\n  rounded = 'md',\n  singleExpand = false,\n  stickyHeader = false,\n  stickyOffset,\n  globalItemsPerPage = undefined,\n  groupExpandButtonPosition = GroupExpandButtonPosition.start,\n  disabledRows,\n  multiPageSelect = false,\n  itemClass = '',\n  mobileBreakpoint,\n  mobileBreakpointBasis,\n  mobile,\n} = defineProps<Props<T, IdType>>();\n\nconst emit = defineEmits<{\n  'update:options': [value: { pagination?: TablePaginationData; sort?: TableSortData<T> }];\n  'copy:group': [value: GroupData<T>];\n}>();\n\nconst slots = defineSlots<Partial<\n  Record<`header.${string}`, (props: { column: TableColumn<T> }) => any> &\n  Record<`item.${string}`, (props: { column: TableColumn<T>; row: T; index: number }) => any> & {\n    'body.prepend': (props: { colspan: number }) => any;\n    'body.append': (props: { colspan: number }) => any;\n    'group.header': (props: {\n      colspan: number;\n      header: GroupHeader<T>;\n      isOpen: boolean;\n      toggle: () => void;\n    }) => any;\n    'group.header.content': (props: { header: GroupHeader<T>; groupKey: string }) => any;\n    'expanded-item': (props: { row: T; index: number }) => any;\n    'no-data': () => any;\n    'empty-description': () => any;\n    'tfoot': () => any;\n  }\n>>();\n\nconst tableDefaults = useTable();\n\nconst tableWrapper = useTemplateRef<HTMLElement>('tableWrapper');\nconst { width: windowWidth } = useWindowSize();\nconst { width: containerWidth } = useElementSize(tableWrapper);\n\n// Per-table props win, then the global table defaults.\nconst resolvedMobileBreakpoint = computed<number | undefined>(() => {\n  if (mobileBreakpoint !== undefined)\n    return mobileBreakpoint;\n  const globalBreakpoint = tableDefaults.mobileBreakpoint;\n  return globalBreakpoint === undefined ? undefined : get(globalBreakpoint);\n});\nconst resolvedMobileBasis = computed<'viewport' | 'container'>(() => {\n  if (mobileBreakpointBasis !== undefined)\n    return mobileBreakpointBasis;\n  const globalBasis = tableDefaults.mobileBreakpointBasis;\n  return globalBasis === undefined ? 'viewport' : get(globalBasis);\n});\n\n/**\n * Whether the stacked card layout is showing.\n *\n * Vue coerces an absent Boolean prop to `false`, so `mobile` cannot say\n * \"unset\": with no breakpoint configured it is the manual switch, defaulting\n * to desktop, and with one configured the breakpoint drives the layout while\n * `mobile === true` can still force the stacked layout on.\n */\nconst isMobile = computed<boolean>(() => {\n  const breakpoint = get(resolvedMobileBreakpoint);\n  if (breakpoint === undefined)\n    return mobile;\n  if (mobile)\n    return true;\n  // `containerWidth` is 0 until measured; the viewport keeps the first paint off mobile\n  const width = get(resolvedMobileBasis) === 'container'\n    ? (get(containerWidth) || get(windowWidth))\n    : get(windowWidth);\n  return width < breakpoint;\n});\n\nconst stickyHeaderOffset = computed<number | undefined>(() =>\n  stickyOffset !== undefined ? stickyOffset : get(tableDefaults.stickyOffset),\n);\n\n/**\n * A table rendered inside an expanded row must not pin its own toolbar: only\n * the outermost table sticks, otherwise the bars stack and collide.\n */\nconst isNestedTable = useDataTableNested();\nprovideDataTableNested();\n\n/**\n * On mobile there is no column header to pin, so `stickyHeader` pins the\n * pagination and sort toolbar instead while the card list scrolls.\n */\nconst stickyMobileToolbar = computed<boolean>(() => stickyHeader && get(isMobile) && !isNestedTable);\n\nconst table = useTemplateRef<HTMLTableElement>('table');\nconst tableScroller = useTemplateRef<HTMLElement>('tableScroller');\n\nconst { stick } = useStickyTableHeader(\n  () => stickyHeader,\n  stickyHeaderOffset,\n  { table, tableScroller },\n);\n\nconst { expandable, isExpanded, onToggleExpand } = useTableExpansion<T, IdType>(\n  { rowAttr, singleExpand },\n  { expanded },\n);\n\nfunction emitUpdateOptions(opts: { sort?: TableSortData<T>; pagination?: TablePaginationData }): void {\n  emit('update:options', opts);\n}\n\nconst {\n  sortData,\n  sortedMap,\n  sorted,\n  onSort: applySort,\n} = useTableSort<T>(\n  { rows: () => rows, search: () => search, sortModifiersExternal: sortModifiers.external },\n  {\n    sort,\n    pagination,\n    emitUpdateOptions,\n  },\n);\n\nconst {\n  groupKeys,\n  groupKey,\n  grouped,\n  isExpandedGroup,\n  isHiddenRow,\n  onToggleExpandGroup,\n  onUngroup,\n} = useTableGrouping<T, IdType>(\n  { rowAttr },\n  {\n    group,\n    collapsed,\n    sorted,\n  },\n);\n\nconst {\n  paginationData,\n  filtered,\n  setInternalTotal,\n  resetPagination,\n} = useTablePagination<T>(\n  {\n    itemsPerPage,\n    paginationModifiersExternal: paginationModifiers.external,\n    globalItemsPerPage,\n  },\n  {\n    pagination,\n    grouped,\n    isHiddenRow,\n    sort,\n    emitUpdateOptions,\n    tableDefaults,\n  },\n);\n\nconst noData = computed<boolean>(() => get(filtered).length === 0);\n\nconst ui = computed<ReturnType<typeof dataTableStyles>>(() => dataTableStyles({\n  outlined,\n  rounded,\n  dense,\n  striped,\n  mobile: get(isMobile),\n}));\n\nconst { columns, colspan, headerSlots, cellValue } = useTableColumns<T, IdType>({\n  cols: () => cols,\n  columnAttr,\n  rows: () => rows,\n  expandable,\n  groupKeys,\n  selectedData,\n  slots,\n  isMobile,\n  tdResolver: options => get(ui).td(options),\n});\n\nconst showMobileSort = computed<boolean>(() =>\n  get(isMobile) && !!get(sortData) && get(columns).some(column => column.sortable),\n);\n\nconst ITEM_SLOT_PREFIX = 'item.';\n\n// Slot keys are static for the component lifetime — no reactivity needed\nconst itemSlotKeys: Set<string> = new Set(\n  Object.keys(slots)\n    .filter((key): key is `item.${string}` => key.startsWith(ITEM_SLOT_PREFIX))\n    .map(key => key.slice(ITEM_SLOT_PREFIX.length)),\n);\n\nconst {\n  isAllSelected,\n  indeterminate,\n  isSelected,\n  isDisabledRow,\n  onToggleAll,\n  onSelect,\n  onCheckboxClick,\n  deselectRemovedRows,\n  resetCheckboxShiftState,\n} = useTableSelection<T, IdType>(\n  { rowAttr, multiPageSelect, disabledRows: () => disabledRows },\n  { selectedData, filtered },\n);\n\n/**\n * Sorting clears the selection. That lives here rather than in either\n * composable, which would make sort and selection depend on each other.\n */\nfunction onSort(payload: Parameters<typeof applySort>[0]): void {\n  applySort(payload);\n  if (!multiPageSelect)\n    onToggleAll(false);\n  resetCheckboxShiftState();\n}\n\nfunction onPaginate(): void {\n  if ((get(expanded)?.length ?? 0) > 0)\n    set(expanded, []);\n  if (!multiPageSelect)\n    onToggleAll(false);\n  resetCheckboxShiftState();\n}\n\n// Reset pagination page to 1 on search query change\nwatch(() => search, () => {\n  resetPagination();\n  onToggleAll(false);\n  resetCheckboxShiftState();\n});\n\nwatch(sorted, (items) => {\n  if (!multiPageSelect)\n    deselectRemovedRows();\n  setInternalTotal(items);\n});\n\nonMounted(() => {\n  setInternalTotal(get(sorted));\n});\n\nconst classes = computed<DataTableClasses>(() => {\n  const s = get(ui);\n  return {\n    td: s.td(),\n    tr: s.tr(),\n    trSelected: s.tr({ rowVariant: 'selected' }),\n    trExpandable: s.tr({ rowVariant: 'expandable' }),\n    trGroup: s.tr({ rowVariant: 'group' }),\n    trEmpty: s.tr({ rowVariant: 'empty' }),\n    checkbox: s.checkbox(),\n    tbody: s.tbody(),\n    tbodyLoader: s.tbodyLoader(),\n  };\n});\n\nprovideDataTableContext<T, IdType>({\n  // Reactive (ComputedRef/Ref) — destructuring preserves reactivity via Vue template auto-unwrap\n  classes,\n  columns,\n  colspan,\n  expandable,\n  groupKey,\n  isMobile,\n  selectedData,\n  // Static values\n  cellValue,\n  columnAttr,\n  dense,\n  getRowId: (row: T) => row[rowAttr],\n  itemSlotKeys,\n  groupExpandButtonPosition,\n  isDisabledRow,\n  isExpanded,\n  isExpandedGroup,\n  isSelected,\n  itemClass,\n  onCheckboxClick,\n  onCopyGroup: (header: GroupHeader<T>) => emit('copy:group', { key: get(groupKey) ?? '', value: header.group }),\n  onSelect,\n  onToggleExpand,\n  onToggleExpandGroup,\n  onUngroup,\n});\n</script>\n\n<template>\n  <div\n    ref=\"tableWrapper\"\n    :class=\"ui.wrapper()\"\n    data-id=\"table-wrapper\"\n  >\n    <div\n      :class=\"stickyMobileToolbar ? 'sticky z-10 bg-white dark:bg-[#121212] pt-2' : 'contents'\"\n      :style=\"stickyMobileToolbar ? { top: `${stickyHeaderOffset ?? 0}px` } : undefined\"\n      data-id=\"table-mobile-toolbar-sticky\"\n    >\n      <RuiTablePagination\n        v-if=\"paginationData && !hideDefaultHeader\"\n        v-model=\"paginationData\"\n        :dense=\"dense\"\n        :loading=\"loading\"\n        :mobile=\"isMobile\"\n        :disable-per-page=\"disablePerPage\"\n        :ranges-threshold=\"rangesThreshold\"\n        data-id=\"table-pagination\"\n        @update:model-value=\"onPaginate()\"\n      />\n      <div\n        v-if=\"showMobileSort\"\n        class=\"flex justify-end p-2\"\n        data-id=\"table-mobile-toolbar\"\n      >\n        <RuiDataTableMobileSort\n          :columns=\"columns\"\n          :column-attr=\"columnAttr\"\n          :sorted-map=\"sortedMap\"\n          :dense=\"dense\"\n          @sort=\"onSort($event)\"\n        />\n      </div>\n    </div>\n    <div\n      ref=\"tableScroller\"\n      :class=\"[ui.scroller(), isMobile && !showMobileSort ? 'pt-2' : '']\"\n      data-id=\"table-scroller\"\n    >\n      <table\n        ref=\"table\"\n        :class=\"ui.table()\"\n        :aria-busy=\"loading\"\n      >\n        <RuiTableHead\n          v-if=\"!isMobile\"\n          :loading=\"loading\"\n          :indeterminate=\"indeterminate\"\n          :capitalize-headers=\"!cols\"\n          :colspan=\"colspan\"\n          :column-attr=\"columnAttr\"\n          :columns=\"columns\"\n          :dense=\"dense\"\n          :disable-check-all=\"!filtered?.length\"\n          :is-all-selected=\"isAllSelected\"\n          :selectable=\"!!selectedData\"\n          :sort-data=\"sortData\"\n          :sorted-map=\"sortedMap\"\n          :stick=\"stick\"\n          :sticky-header=\"stickyHeader\"\n          @sort=\"onSort($event)\"\n          @select:all=\"onToggleAll($event)\"\n        >\n          <template\n            v-for=\"headerSlot in headerSlots\"\n            #[headerSlot]=\"slotData\"\n          >\n            <slot\n              :name=\"headerSlot\"\n              v-bind=\"slotData\"\n            />\n          </template>\n        </RuiTableHead>\n        <RuiTableHead\n          v-if=\"stickyHeader && !isMobile\"\n          :loading=\"loading\"\n          :capitalize-headers=\"!cols\"\n          :colspan=\"colspan\"\n          :column-attr=\"columnAttr\"\n          :columns=\"columns\"\n          :dense=\"dense\"\n          :selectable=\"!!selectedData\"\n          :sort-data=\"sortData\"\n          :sorted-map=\"sortedMap\"\n          data-id=\"head-clone\"\n          class=\"opacity-0 invisible\"\n        >\n          <template\n            v-for=\"headerSlot in headerSlots\"\n            #[headerSlot]=\"slotData\"\n          >\n            <slot\n              :name=\"headerSlot\"\n              v-bind=\"slotData\"\n            />\n          </template>\n        </RuiTableHead>\n        <RuiDataTableBody\n          :filtered=\"filtered\"\n          :loading=\"loading\"\n          :no-data=\"noData\"\n          :empty=\"empty\"\n        >\n          <template\n            v-if=\"slots['body.prepend']\"\n            #body.prepend=\"slotData\"\n          >\n            <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n            <slot\n              name=\"body.prepend\"\n              v-bind=\"slotData\"\n            />\n          </template>\n          <template\n            v-if=\"slots['group.header']\"\n            #group.header=\"slotData\"\n          >\n            <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n            <slot\n              name=\"group.header\"\n              v-bind=\"slotData\"\n            />\n          </template>\n          <template\n            v-if=\"slots['group.header.content']\"\n            #group.header.content=\"slotData\"\n          >\n            <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n            <slot\n              name=\"group.header.content\"\n              v-bind=\"slotData\"\n            />\n          </template>\n          <template\n            v-for=\"key in itemSlotKeys\"\n            #[`item.${key}`]=\"slotData\"\n          >\n            <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n            <slot\n              :name=\"`item.${key}`\"\n              v-bind=\"slotData\"\n            />\n          </template>\n          <template\n            v-if=\"slots['expanded-item']\"\n            #expanded-item=\"slotData\"\n          >\n            <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n            <slot\n              name=\"expanded-item\"\n              v-bind=\"slotData\"\n            />\n          </template>\n          <template\n            v-if=\"slots['no-data']\"\n            #no-data\n          >\n            <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n            <slot name=\"no-data\" />\n          </template>\n          <template\n            v-if=\"slots['empty-description']\"\n            #empty-description\n          >\n            <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n            <slot name=\"empty-description\" />\n          </template>\n          <template\n            v-if=\"slots['body.append']\"\n            #body.append=\"slotData\"\n          >\n            <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n            <slot\n              name=\"body.append\"\n              v-bind=\"slotData\"\n            />\n          </template>\n        </RuiDataTableBody>\n        <tfoot>\n          <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n          <slot name=\"tfoot\" />\n        </tfoot>\n      </table>\n    </div>\n    <RuiTablePagination\n      v-if=\"paginationData && !hideDefaultFooter\"\n      v-model=\"paginationData\"\n      :dense=\"dense\"\n      :loading=\"loading\"\n      :mobile=\"isMobile\"\n      :disable-per-page=\"disablePerPage\"\n      :ranges-threshold=\"rangesThreshold\"\n      data-id=\"table-pagination\"\n      @update:model-value=\"onPaginate()\"\n    />\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/tables/RuiDataTable.vue.d.ts

@@ -1,7 +1,7 @@
 import type { GroupHeader } from '../../composables/tables/data-table/types.js';
-import { type GroupData, type TableColumn, type TableRowKeyData, type TableSortData } from '../../components/tables/RuiTableHead.vue';
-import { type TablePaginationData } from '../../components/tables/RuiTablePagination.vue';
-import { GroupExpandButtonPosition } from '../../components/tables/table-props.js';
+import { type GroupData, type TableColumn, type TableRowKeyData, type TableSortData } from './RuiTableHead.vue';
+import { type TablePaginationData } from './RuiTablePagination.vue';
+import { GroupExpandButtonPosition } from './table-props.js';
 export type { GroupedTableRow, GroupHeader, TableOptions } from '../../composables/tables/data-table/types.js';
 export interface Props<T, K extends keyof T> {
     /**
@@ -53,9 +53,8 @@ export interface Props<T, K extends keyof T> {
      */
     rangesThreshold?: number;
     /**
-     * data to display for empty state
-     * text and icon
-     * @example :empty="{ icon: 'transactions-line', label: 'No transactions found' }"
+     * The text and icon shown when there are no rows, e.g.
+     * `:empty="\{ icon: 'transactions-line', label: 'No transactions found' \}"`
      */
     empty?: {
         label?: string;