@hina-ui/vue 1.7.5 → 1.7.7

package/src/components/lightbox/utils/zoom.ts

@@ -1,127 +1 @@
-export interface Size {
-  width: number
-  height: number
-}
-
-export interface Point {
-  x: number
-  y: number
-}
-
-export interface Bounds {
-  minX: number
-  maxX: number
-  minY: number
-  maxY: number
-}
-
-export const ZOOM_MIN = 1
-export const ZOOM_MAX = 2
-export const ZOOM_STEP = 1.5
-export const OVERSHOOT = 0.55
-export const WHEEL_INTENSITY = 0.002
-
-export const ZOOM_EPSILON = 0.001
-
-export function isZoomed(zoom: number): boolean {
-  return zoom > ZOOM_MIN + ZOOM_EPSILON
-}
-
-export function rotatedSize(size: Size, rotation: number): Size {
-  const quarter = Math.round(rotation / 90) % 2
-  return quarter === 0 ? size : { width: size.height, height: size.width }
-}
-
-export function fitSize(natural: Size, stage: Size, rotation = 0): Size {
-  const upright = rotatedSize(natural, rotation)
-  if (upright.width <= 0 || upright.height <= 0) return { width: 0, height: 0 }
-  const scale = Math.min(1, stage.width / upright.width, stage.height / upright.height)
-  return { width: upright.width * scale, height: upright.height * scale }
-}
-
-export function panBounds(displayed: Size, stage: Size): Bounds {
-  const x = Math.max(0, (displayed.width - stage.width) / 2)
-  const y = Math.max(0, (displayed.height - stage.height) / 2)
-  return { minX: x ? -x : 0, maxX: x, minY: y ? -y : 0, maxY: y }
-}
-
-export function clampOffset(offset: Point, bounds: Bounds): Point {
-  return {
-    x: Math.min(Math.max(offset.x, bounds.minX), bounds.maxX),
-    y: Math.min(Math.max(offset.y, bounds.minY), bounds.maxY),
-  }
-}
-
-export function zoomAbout(offset: Point, zoom: number, next: number, focal: Point): Point {
-  const ratio = next / zoom
-  return {
-    x: focal.x - (focal.x - offset.x) * ratio,
-    y: focal.y - (focal.y - offset.y) * ratio,
-  }
-}
-
-function resist(over: number, span: number, coefficient: number): number {
-  return (1 - 1 / ((over * coefficient) / span + 1)) * span
-}
-
-export function rubberBand(
-  value: number,
-  min: number,
-  max: number,
-  span: number,
-  coefficient = OVERSHOOT,
-): number {
-  if (span <= 0) return Math.min(Math.max(value, min), max)
-  if (value > max) return max + resist(value - max, span, coefficient)
-  if (value < min) return min - resist(min - value, span, coefficient)
-  return value
-}
-
-export function elasticOffset(offset: Point, bounds: Bounds, stage: Size): Point {
-  return {
-    x: rubberBand(offset.x, bounds.minX, bounds.maxX, stage.width),
-    y: rubberBand(offset.y, bounds.minY, bounds.maxY, stage.height),
-  }
-}
-
-export function clampZoom(zoom: number, min = ZOOM_MIN, max = ZOOM_MAX): number {
-  return Math.min(Math.max(zoom, min), max)
-}
-
-export function elasticZoom(zoom: number, min = ZOOM_MIN, max = ZOOM_MAX): number {
-  const lo = Math.log(min)
-  const hi = Math.log(max)
-  return Math.exp(rubberBand(Math.log(zoom), lo, hi, hi - lo))
-}
-
-export function pinchZoom(startZoom: number, startDistance: number, distance: number): number {
-  if (startDistance <= 0) return startZoom
-  return startZoom * (distance / startDistance)
-}
-
-export function wheelZoom(zoom: number, deltaY: number, intensity = WHEEL_INTENSITY): number {
-  return zoom * Math.exp(-deltaY * intensity)
-}
-
-export function zoomLevels(natural: Size, fit: Size, stage: Size) {
-  const original = fit.width > 0 ? Math.max(ZOOM_MIN, natural.width / fit.width) : ZOOM_MIN
-  const secondary =
-    natural.height > natural.width * 2
-      ? Math.min(original, stage.width / fit.width)
-      : natural.width > natural.height * 2
-        ? Math.min(original, stage.height / fit.height)
-        : original
-  return {
-    original,
-    secondary: Number.isFinite(secondary) ? Math.max(ZOOM_MIN, secondary) : ZOOM_MIN,
-    max: original * ZOOM_MAX,
-  }
-}
-
-export function doubleTapZoom(zoom: number, secondary: number): number {
-  return isZoomed(zoom) ? ZOOM_MIN : secondary
-}
-
-export function stepZoom(zoom: number, direction: 1 | -1, max = ZOOM_MAX): number {
-  return clampZoom(zoom * ZOOM_STEP ** direction, ZOOM_MIN, max)
-}
+export * from '../../../../../shared/src/lib/lightbox/zoom'

package/src/components/link/Link.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
-  import { Primitive, type PrimitiveProps } from 'reka-ui'
   import { cn } from '../../lib/cn'
   import { link, type LinkVariants } from './link.variants'
+  import type { PrimitiveProps } from '../../primitives/primitive'
+  import { Primitive } from '../../primitives/primitive'
 
   defineOptions({ name: 'HnLink' })
 

package/src/components/meter-group/utils/tones.ts

@@ -1,14 +1 @@
-import type { MeterTone } from '../types'
-
-export const METER_TONES: MeterTone[] = [
-  'accent',
-  'info',
-  'success',
-  'warning',
-  'danger',
-  'neutral',
-]
-
-export function toneAt(index: number): MeterTone {
-  return METER_TONES[index % METER_TONES.length]!
-}
+export * from '../../../../../shared/src/lib/meter-group'

package/src/components/multi-select/MultiSelect.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts" generic="T extends SelectOption = SelectOption">
   import { computed, ref } from 'vue'
   import { SelectRoot, SelectTrigger } from 'reka-ui'
+  import { VisuallyHidden } from '../../primitives/visually-hidden'
   import { cn } from '../../lib/cn'
   import type { VirtualizeOptions } from '../../lib/virtual/types'
   import { useUiLocale } from '../../locale'
   import Chip from '../chip/Chip.vue'
-  import VisuallyHidden from '../visually-hidden/VisuallyHidden.vue'
   import { X } from '@lucide/vue'
   import InputAction from '../input/InputAction.vue'
   import DisclosureIcon from '../disclosure-icon/DisclosureIcon.vue'
@@ -56,6 +56,7 @@
   const size = computed(() => (group ? group.size.value : props.size))
   const {
     id: fieldId,
+    labelledBy,
     invalid,
     disabled,
     describedBy,
@@ -102,6 +103,7 @@
       v-bind="$attrs"
       as="div"
       :id="fieldId"
+      :aria-labelledby="labelledBy"
       :aria-describedby="describedBy"
       data-hn-multi-select
       @keydown="keyboard = true"

package/src/components/nav-link/NavLink.vue

@@ -1,11 +1,13 @@
 <script setup lang="ts">
   import { computed } from 'vue'
-  import { Primitive, type PrimitiveProps } from 'reka-ui'
   import { cn } from '../../lib/cn'
   import { Passthrough } from '../../lib/passthrough'
   import Tooltip from '../tooltip/Tooltip.vue'
-  import { useSidebar } from '../sidebar/context'
+  import { useInSidebar, useSidebar } from '../sidebar/context'
   import { navLink, navLinkLabel } from './nav-link.variants'
+  import type { PrimitiveProps } from '../../primitives/primitive'
+  import { Primitive } from '../../primitives/primitive'
+  import NavLinkChild from './NavLinkChild'
 
   defineOptions({ name: 'HnNavLink', inheritAttrs: false })
 
@@ -21,18 +23,45 @@
     { as: 'a', active: false, disabled: false },
   )
 
-  const sidebar = useSidebar()
+  const sidebar = useInSidebar() ? useSidebar() : null
   const rail = computed(() => sidebar?.state.value === 'rail')
 
   const Wrapper = sidebar ? Tooltip : Passthrough
+
+  const linkProps = computed(() => ({
+    'aria-current': props.active ? ('page' as const) : undefined,
+    'data-state': props.active ? 'selected' : undefined,
+    'aria-disabled': props.disabled ? ('true' as const) : undefined,
+    'data-disabled': props.disabled ? '' : undefined,
+    tabindex: props.disabled ? -1 : undefined,
+    'aria-label': rail.value ? props.label : undefined,
+    class: cn(navLink({ active: props.active }), props.class),
+  }))
+
+  const labelProps = computed(() => ({
+    'aria-hidden': rail.value ? ('true' as const) : undefined,
+    inert: rail.value,
+    'data-collapsed': rail.value ? '' : undefined,
+    'data-hn-label': '',
+    class: navLinkLabel(),
+  }))
 </script>
 
 <template>
   <Wrapper :disabled="!rail || !props.label" :content="props.label" side="right">
+    <NavLinkChild
+      v-if="props.asChild"
+      v-bind="{ ...$attrs, ...linkProps }"
+      :as="props.as"
+      :label-props="labelProps"
+    >
+      <template v-if="$slots.icon" #icon><slot name="icon" /></template>
+      <slot />
+    </NavLinkChild>
     <Primitive
+      v-else
       v-bind="$attrs"
       :as="props.as"
-      :as-child="props.asChild"
       :aria-current="props.active ? 'page' : undefined"
       :data-state="props.active ? 'selected' : undefined"
       :aria-disabled="props.disabled ? 'true' : undefined"

package/src/components/nav-link/NavLinkChild.ts

@@ -0,0 +1,57 @@
+import {
+  Comment,
+  defineComponent,
+  h,
+  mergeProps,
+  Text,
+  type PropType,
+  type Slots,
+  type VNode,
+  type VNodeArrayChildren,
+} from 'vue'
+import { Primitive, type PrimitiveProps } from '../../primitives/primitive'
+import { renderSlotFragments } from '../../primitives/utils/renderSlotFragments'
+
+type Content = string | VNodeArrayChildren | null | undefined
+
+const CHILDREN_FLAGS = 8 | 16 | 32
+
+export default defineComponent({
+  name: 'HnNavLinkChild',
+  inheritAttrs: false,
+  props: {
+    as: { type: [String, Object] as PropType<PrimitiveProps['as']>, default: 'a' },
+    labelProps: { type: Object as PropType<Record<string, unknown>>, required: true },
+  },
+  setup(props, { attrs, slots }) {
+    const inner = (content: Content) => [
+      ...(slots.icon?.() ?? []),
+      h('span', props.labelProps, content ?? undefined),
+    ]
+
+    return () => {
+      const children = renderSlotFragments(slots.default?.())
+      const child = children.find(node => node.type !== Comment && node.type !== Text)
+      if (!child) return h(Primitive, mergeProps(attrs, { as: props.as }), () => inner(children))
+
+      const { ref: _, ...own } = child.props ?? {}
+      const merged = mergeProps(attrs, own)
+      const bare = {
+        ...child,
+        props: {},
+        children: null,
+        shapeFlag: child.shapeFlag & ~CHILDREN_FLAGS,
+      } as VNode
+      if (typeof child.type === 'string') return h(bare, merged, inner(child.children as Content))
+
+      const given = (child.children ?? {}) as Slots
+      const forwarded = Object.fromEntries(
+        Object.entries(given).filter(([name]) => !name.startsWith('_') && name !== 'default'),
+      )
+      return h(bare, merged, {
+        ...forwarded,
+        default: (...args: unknown[]) => inner(given.default?.(...(args as [])) as Content),
+      })
+    }
+  },
+})

package/src/components/navigation-menu/NavigationMenuLink.vue

@@ -2,7 +2,6 @@
   import {
     NavigationMenuLink as RekaNavigationMenuLink,
     type NavigationMenuLinkEmits,
-    type PrimitiveProps,
   } from 'reka-ui'
   import { cn } from '../../lib/cn'
   import { useNavigationMenu } from './context'
@@ -11,6 +10,7 @@
     navigationMenuLink,
     navigationMenuIcon,
   } from './navigation-menu.variants'
+  import type { PrimitiveProps } from '../../primitives/primitive'
 
   defineOptions({ name: 'HnNavigationMenuLink', inheritAttrs: false })
   const props = withDefaults(

package/src/components/number-input/NumberInput.vue

@@ -1,14 +1,14 @@
 <script setup lang="ts">
   import { computed } from 'vue'
   import { ChevronDown, ChevronUp } from '@lucide/vue'
+  import { useForwardPropsEmits } from 'reka-ui'
   import {
     NumberFieldDecrement,
     NumberFieldIncrement,
     NumberFieldInput,
     NumberFieldRoot,
-    useForwardPropsEmits,
     type NumberFieldRootEmits,
-  } from 'reka-ui'
+  } from '../../primitives/number-field'
   import { cn } from '../../lib/cn'
   import { useUiLocale } from '../../locale'
   import { useFieldControl } from '../form-field/context'

package/src/components/pagination/Pagination.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
   import { computed } from 'vue'
-  import { PaginationRoot } from 'reka-ui'
+  import { PaginationRoot } from '../../primitives/pagination'
   import { cn } from '../../lib/cn'
   import { useDirection } from '../../lib/useDirection'
   import { useUiLocale } from '../../locale'

package/src/components/pagination/PaginationContent.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
   import { shallowRef } from 'vue'
-  import { PaginationList } from 'reka-ui'
+  import { PaginationList } from '../../primitives/pagination'
   import { cn } from '../../lib/cn'
   import PaginationPages from './PaginationPages.vue'
   import { paginationList } from './pagination.variants'

package/src/components/pagination/PaginationControl.vue

@@ -1,6 +1,11 @@
 <script setup lang="ts">
   import { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from '@lucide/vue'
-  import { PaginationFirst, PaginationPrev, PaginationNext, PaginationLast } from 'reka-ui'
+  import {
+    PaginationFirst,
+    PaginationPrev,
+    PaginationNext,
+    PaginationLast,
+  } from '../../primitives/pagination'
   import { useUiLocale } from '../../locale'
   import Button from '../button/Button.vue'
   import type { ButtonVariants } from '../button/button.variants'

package/src/components/pagination/PaginationPage.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
   import { useTemplateRef } from 'vue'
-  import { PaginationListItem } from 'reka-ui'
+  import { PaginationListItem } from '../../primitives/pagination'
   import Button from '../button/Button.vue'
   import { vTooltip } from '../tooltip/directive'
   import { useUiLocale } from '../../locale'

package/src/components/pagination/composables/usePagination.ts

@@ -1,4 +1,5 @@
 import { computed, watch, type Ref } from 'vue'
+import { paginationInteger } from '../../../../../shared/src/lib/pagination'
 import type { PaginationChange, PaginationState } from '../types'
 
 interface PaginationOptions {
@@ -10,9 +11,7 @@ interface PaginationOptions {
   pending?: boolean
 }
 
-export function paginationInteger(value: number, fallback: number, minimum: number) {
-  return Number.isFinite(value) ? Math.max(minimum, Math.floor(value)) : fallback
-}
+export { paginationInteger }
 
 export function usePagination(
   props: PaginationOptions,

package/src/components/pagination/types.ts

@@ -1,19 +1 @@
-export interface PaginationChange {
-  page: number
-  pageSize: number
-}
-
-export interface PaginationState extends PaginationChange {
-  total: number
-  pageCount: number
-  from: number
-  to: number
-}
-
-export type PaginationEntry = { type: 'page'; value: number } | { type: 'ellipsis' }
-export type PaginationSide = 'prev' | 'next'
-export interface PaginationRange {
-  side: PaginationSide
-  from: number
-  to: number
-}
+export * from '../../../../shared/src/types/pagination'

package/src/components/pagination/utils/ranges.ts

@@ -1,12 +1 @@
-import type { PaginationEntry, PaginationRange } from '../types'
-
-export function paginationRanges(items: PaginationEntry[]): PaginationRange[] {
-  return items.flatMap((item, index) => {
-    if (item.type !== 'ellipsis') return []
-    const previous = items[index - 1]
-    const next = items[index + 1]
-    if (previous?.type !== 'page' || next?.type !== 'page' || next.value <= previous.value + 1)
-      return []
-    return [{ side: index === 1 ? 'prev' : 'next', from: previous.value + 1, to: next.value - 1 }]
-  })
-}
+export * from '../../../../../shared/src/lib/pagination'

package/src/components/panel/Panel.vue

@@ -25,7 +25,7 @@
 
 <template>
   <Card data-hn-panel :padded="false" :class="cn('flex flex-col', props.class)">
-    <div :class="panelHeader()">
+    <div :class="panelHeader({ bodiless: !slots.default })">
       <div class="flex min-w-0 flex-col gap-1">
         <div :class="panelTitle()">
           <span v-if="slots.icon" :class="panelIcon()" aria-hidden="true">

package/src/components/password-input/PasswordInput.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+  import { shallowRef } from 'vue'
   import { Eye, EyeOff } from '@lucide/vue'
   import { cn } from '../../lib/cn'
   import { useUiLocale } from '../../locale'
@@ -20,10 +21,15 @@
   const visible = defineModel<boolean>('visible', { default: false })
 
   const t = useUiLocale()
+
+  const base = shallowRef<InstanceType<typeof InputBase> | null>(null)
+
+  defineExpose({ clear: () => base.value?.clear(), focus: () => base.value?.focus() })
 </script>
 
 <template>
   <InputBase
+    ref="base"
     v-bind="$attrs"
     v-model="model"
     :type="visible ? 'text' : 'password'"

package/src/components/pin-input/PinInput.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-  import { PinInputInput, PinInputRoot } from 'reka-ui'
+  import { PinInputInput, PinInputRoot } from '../../primitives/pin-input'
   import { computed } from 'vue'
   import { cn } from '../../lib/cn'
   import { useFieldControl } from '../form-field/context'

package/src/components/prev-next/PrevNextLink.vue

@@ -1,10 +1,11 @@
 <script setup lang="ts">
-  import { Primitive, type PrimitiveProps } from 'reka-ui'
   import { ArrowLeft, ArrowRight } from '@lucide/vue'
   import Ripple from '../ripple/Ripple.vue'
   import { cn } from '../../lib/cn'
   import { useUiLocale } from '../../locale'
   import { prevNextLink, prevNextEyebrow, type PrevNextVariants } from './prev-next.variants'
+  import type { PrimitiveProps } from '../../primitives/primitive'
+  import { Primitive } from '../../primitives/primitive'
 
   defineOptions({ name: 'HnPrevNextLink', inheritAttrs: false })
 

package/src/components/progress/Progress.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-  import { ProgressIndicator, ProgressRoot } from 'reka-ui'
+  import { ProgressIndicator, ProgressRoot } from '../../primitives/progress'
   import { cn } from '../../lib/cn'
   import { useProgressValue, type ProgressFormat } from './composables/useProgressValue'
   import {

package/src/components/prose/Prose.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
-  import { Primitive, type PrimitiveProps } from 'reka-ui'
   import { cn } from '../../lib/cn'
+  import type { PrimitiveProps } from '../../primitives/primitive'
+  import { Primitive } from '../../primitives/primitive'
 
   defineOptions({ name: 'HnProse' })
 

package/src/components/qr-code/export.ts

@@ -1,65 +1 @@
-import type { QRCodeExportOptions } from './types'
-
-function dataURL(blob: Blob): Promise<string> {
-  return new Promise((resolve, reject) => {
-    const reader = new FileReader()
-    reader.onload = () => resolve(reader.result as string)
-    reader.onerror = () => reject(reader.error)
-    reader.readAsDataURL(blob)
-  })
-}
-
-export async function exportQRCode(
-  svg: SVGSVGElement,
-  size: number,
-  { type = 'image/png', scale = 2 }: QRCodeExportOptions = {},
-): Promise<Blob> {
-  const clone = svg.cloneNode(true) as SVGSVGElement
-  const source = [svg, ...svg.querySelectorAll('*')]
-  const target = [clone, ...clone.querySelectorAll('*')]
-  target.forEach((el, index) => {
-    const style = getComputedStyle(source[index]!)
-    el.removeAttribute('class')
-    el.removeAttribute('style')
-    el.setAttribute('fill', style.fill)
-  })
-  clone.setAttribute('xmlns', 'http://www.w3.org/2000/svg')
-  clone.setAttribute('width', String(size))
-  clone.setAttribute('height', String(size))
-  for (const image of clone.querySelectorAll('image')) {
-    const href = image.getAttribute('href')
-    if (!href) continue
-    let embedded = href
-    if (!href.startsWith('data:')) {
-      const response = await fetch(new URL(href, svg.ownerDocument.baseURI))
-      if (!response.ok) throw new Error('Unable to export the QR code logo')
-      embedded = await dataURL(await response.blob())
-    }
-    const decoded = new Image()
-    decoded.src = embedded
-    await decoded.decode()
-    image.setAttribute('href', embedded)
-  }
-  const blob = new Blob([new XMLSerializer().serializeToString(clone)], { type: 'image/svg+xml' })
-  if (type === 'image/svg+xml') return blob
-  const url = URL.createObjectURL(blob)
-  try {
-    const image = new Image()
-    image.src = url
-    await image.decode()
-    const factor = Number.isFinite(scale) ? Math.max(1, Math.min(8, scale)) : 2
-    const canvas = svg.ownerDocument.createElement('canvas')
-    canvas.width = canvas.height = Math.min(8192, Math.round(size * factor))
-    const context = canvas.getContext('2d')
-    if (!context) throw new Error('Canvas is unavailable')
-    context.drawImage(image, 0, 0, canvas.width, canvas.height)
-    return await new Promise<Blob>((resolve, reject) => {
-      canvas.toBlob(
-        result => (result ? resolve(result) : reject(new Error('Unable to export the QR code'))),
-        'image/png',
-      )
-    })
-  } finally {
-    URL.revokeObjectURL(url)
-  }
-}
+export * from '../../../../shared/src/lib/qr-code-export'

package/src/components/radio-group/RadioGroup.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts" generic="T extends SelectOption = SelectOption">
-  import { RadioGroupItem, RadioGroupRoot } from 'reka-ui'
+  import { RadioGroupItem, RadioGroupRoot } from '../../primitives/radio-group'
   import { cn } from '../../lib/cn'
   import { useFieldControl } from '../form-field/context'
   import {

package/src/components/range-calendar/utils/limit.ts

@@ -1,11 +1 @@
-import type { DateValue } from '@internationalized/date'
-
-export function maximumDaysMatcher(
-  start: DateValue | undefined,
-  end: DateValue | undefined,
-  maximumDays: number | undefined,
-) {
-  if (!start || end || !maximumDays) return undefined
-  const reach = maximumDays - 1
-  return (date: DateValue) => Math.abs(date.compare(start)) > reach
-}
+export * from '../../../../../shared/src/lib/range-calendar/limit'

package/src/components/range-slider/RangeSlider.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-  import { SliderRoot, SliderTrack } from 'reka-ui'
+  import { SliderRoot, SliderTrack } from '../../primitives/slider'
   import { computed, toRef } from 'vue'
   import { cn } from '../../lib/cn'
   import { useFieldControl } from '../form-field/context'

package/src/components/rating/Rating.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-  import { RatingItem, RatingItemIndicator, RatingRoot } from 'reka-ui'
+  import { RatingItem, RatingItemIndicator, RatingRoot } from '../../primitives/rating'
   import { Star } from '@lucide/vue'
   import { cn } from '../../lib/cn'
   import { rekaRatingStepStyle } from '../../lib/reka/styles'

package/src/components/rating/utils/fill.ts

@@ -1,4 +1 @@
-export function starFill(value: number, index: number) {
-  const portion = Math.min(Math.max(value - (index - 1), 0), 1)
-  return `${Math.round(portion * 1000) / 10}%`
-}
+export * from '../../../../../shared/src/lib/rating'

package/src/components/ring-progress/RingProgress.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-  import { ProgressRoot } from 'reka-ui'
+  import { ProgressRoot } from '../../primitives/progress'
   import { computed, useSlots } from 'vue'
   import { cn } from '../../lib/cn'
   import { useProgressValue, type ProgressFormat } from '../progress/composables/useProgressValue'