@glyphui/ui 0.4.0 → 0.5.0

package/src/components/segmented-control/segmented-control.tsx

@@ -1,24 +1,29 @@
 import { ToggleGroup } from 'radix-ui'
-import { type ReactNode, useContext } from 'react'
+import { type ReactNode, useContext, useId } from 'react'
 import { useComponentConfig } from '../../hooks/use-component-config'
+import { useControllableState } from '../../hooks/use-controllable-state'
 import { warnOnce } from '../../internal/dev'
+import { ActiveIndicator } from '../../motion/active-indicator'
 import { focusRing, themedBorder, transition } from '../../utils/styles'
 import { tv, type VariantProps } from '../../utils/tv'
 import { FieldContext } from '../field/field-context'
 
-export const segmentedControlStyles = tv({
+export const segmentedControlStyles = /* @__PURE__ */ tv({
   slots: {
     root: [
-      'inline-flex items-center gap-0.5 rounded-md border-border bg-muted p-0.5',
+      'isolate inline-flex items-center gap-0.5 rounded-md border-border bg-muted p-0.5',
       themedBorder,
     ],
     item: [
-      'inline-flex h-full cursor-pointer select-none items-center justify-center gap-1.5 whitespace-nowrap rounded-[calc(var(--radius-md)-2px)] px-3 font-medium text-muted-foreground',
+      'relative inline-flex h-full cursor-pointer select-none items-center justify-center gap-1.5 whitespace-nowrap rounded-[calc(var(--radius-md)-2px)] px-3 font-medium text-muted-foreground',
       transition,
       focusRing,
-      'hover:text-foreground data-[state=on]:bg-raised data-[state=on]:text-foreground data-[state=on]:shadow-xs',
+      'hover:text-foreground data-[state=on]:text-foreground',
       'disabled:pointer-events-none disabled:opacity-50 [&>svg]:size-4',
     ],
+    /** The raised thumb that slides to the selected option. */
+    indicator:
+      'pointer-events-none absolute inset-0 -z-10 rounded-[calc(var(--radius-md)-2px)] bg-raised shadow-xs',
   },
   variants: {
     size: {
@@ -58,6 +63,12 @@ export function SegmentedControl<T extends string>(inProps: SegmentedControlProp
   const { options, value, defaultValue, onValueChange, size, fullWidth, className, ...rest } = props
   const field = useContext(FieldContext)
   const s = segmentedControlStyles({ size, fullWidth })
+  const [selected, setSelected] = useControllableState<T | undefined>({
+    value,
+    defaultValue,
+    onChange: (next) => next !== undefined && onValueChange?.(next),
+  })
+  const indicatorId = `${useId()}-segmented-indicator`
   const labelledBy = rest['aria-labelledby'] ?? (rest['aria-label'] ? undefined : field?.labelId)
   if (!rest['aria-label'] && !labelledBy) {
     warnOnce(
@@ -70,10 +81,9 @@ export function SegmentedControl<T extends string>(inProps: SegmentedControlProp
     <ToggleGroup.Root
       type="single"
       data-slot="segmented-control"
-      {...(value !== undefined && { value })}
-      {...(defaultValue !== undefined && { defaultValue })}
+      value={selected ?? ''}
       // Radix emits '' when the active item is clicked again; a segmented control never deselects.
-      onValueChange={(next: string) => next && onValueChange?.(next as T)}
+      onValueChange={(next: string) => next && setSelected(next as T)}
       className={s.root({ class: [slots.root, className] })}
       aria-labelledby={labelledBy}
       aria-describedby={describedBy || undefined}
@@ -87,6 +97,12 @@ export function SegmentedControl<T extends string>(inProps: SegmentedControlProp
           className={s.item({ class: slots.item })}
         >
           {option.label}
+          {option.value === selected && (
+            <ActiveIndicator
+              layoutId={indicatorId}
+              className={s.indicator({ class: slots.indicator })}
+            />
+          )}
         </ToggleGroup.Item>
       ))}
     </ToggleGroup.Root>

package/src/components/select/select.tsx

@@ -7,7 +7,7 @@ import { tv, type VariantProps } from '../../utils/tv'
 import { useFieldControl } from '../field/field-context'
 import { fieldControl } from '../input/input.styles'
 
-export const selectStyles = tv({
+export const selectStyles = /* @__PURE__ */ tv({
   slots: {
     trigger: [
       ...fieldControl,
@@ -19,7 +19,7 @@ export const selectStyles = tv({
     icon: 'size-4 shrink-0 text-faint-foreground',
     content: [
       popover,
-      'max-h-(--radix-select-content-available-height) min-w-(--radix-select-trigger-width)',
+      'origin-(--radix-select-content-transform-origin) max-h-(--radix-select-content-available-height) min-w-(--radix-select-trigger-width)',
     ],
     viewport: 'p-1',
     item: [

package/src/components/separator/separator.tsx

@@ -3,7 +3,7 @@ import type { ComponentProps } from 'react'
 import { useComponentConfig } from '../../hooks/use-component-config'
 import { tv } from '../../utils/tv'
 
-export const separatorStyles = tv({
+export const separatorStyles = /* @__PURE__ */ tv({
   slots: { base: 'shrink-0 bg-border' },
   variants: {
     orientation: {

package/src/components/sheet/sheet.styles.ts

@@ -2,7 +2,7 @@ import type { StylesEntry } from '../../utils/registry'
 import { focusRing, transition } from '../../utils/styles'
 import { tv, type VariantProps } from '../../utils/tv'
 
-export const sheetStyles = tv({
+export const sheetStyles = /* @__PURE__ */ tv({
   slots: {
     overlay:
       'fixed inset-0 z-50 bg-overlay data-[state=open]:animate-fade-in data-[state=closed]:animate-fade-out',

package/src/components/skeleton/skeleton.tsx

@@ -2,7 +2,7 @@ import type { ComponentProps } from 'react'
 import { useComponentConfig } from '../../hooks/use-component-config'
 import { tv } from '../../utils/tv'
 
-export const skeletonStyles = tv({
+export const skeletonStyles = /* @__PURE__ */ tv({
   slots: { base: 'animate-pulse rounded-sm bg-muted' },
 })
 

package/src/components/slider/slider.styles.ts

@@ -1,7 +1,7 @@
 import type { StylesEntry } from '../../utils/registry'
 import { tv, type VariantProps } from '../../utils/tv'
 
-export const sliderStyles = tv({
+export const sliderStyles = /* @__PURE__ */ tv({
   slots: {
     wrapper: 'grid w-full gap-1.5',
     root: 'relative flex h-5 w-full touch-none select-none items-center data-disabled:cursor-not-allowed data-disabled:opacity-50',

package/src/components/spinner/spinner.styles.ts

@@ -1,6 +1,6 @@
 import { tv, type VariantProps } from '../../utils/tv'
 
-export const spinnerStyles = tv({
+export const spinnerStyles = /* @__PURE__ */ tv({
   slots: {
     base: 'inline-block shrink-0 animate-spin',
     track: 'opacity-20',

package/src/components/stack/stack.tsx

@@ -2,7 +2,7 @@ import { Slot } from 'radix-ui'
 import type { ComponentProps } from 'react'
 import { tv, type VariantProps } from '../../utils/tv'
 
-export const stackStyles = tv({
+export const stackStyles = /* @__PURE__ */ tv({
   base: 'flex',
   variants: {
     direction: { column: 'flex-col', row: 'flex-row' },

package/src/components/stat-card/stat-card.styles.ts

@@ -1,7 +1,7 @@
 import type { StylesEntry } from '../../utils/registry'
 import { tv, type VariantProps } from '../../utils/tv'
 
-export const statCardStyles = tv({
+export const statCardStyles = /* @__PURE__ */ tv({
   slots: {
     root: 'gap-2',
     header: 'flex items-center justify-between gap-2',

package/src/components/stepper/stepper.styles.ts

@@ -2,7 +2,7 @@ import type { StylesEntry } from '../../utils/registry'
 import { focusRing, themedBorder, transition } from '../../utils/styles'
 import { tv, type VariantProps } from '../../utils/tv'
 
-export const stepperStyles = tv({
+export const stepperStyles = /* @__PURE__ */ tv({
   slots: {
     root: 'flex w-full list-none p-0',
     step: 'relative flex min-w-0',

package/src/components/switch/switch.tsx

@@ -5,7 +5,7 @@ import { focusRing, themedBorder, transition } from '../../utils/styles'
 import { tv, type VariantProps } from '../../utils/tv'
 import { useFieldControl } from '../field/field-context'
 
-export const switchStyles = tv({
+export const switchStyles = /* @__PURE__ */ tv({
   slots: {
     root: [
       'peer inline-flex shrink-0 cursor-pointer items-center rounded-pill border-transparent bg-input p-px',
@@ -15,7 +15,7 @@ export const switchStyles = tv({
       'data-[state=checked]:bg-primary disabled:cursor-not-allowed disabled:opacity-50',
     ],
     thumb:
-      'pointer-events-none block rounded-pill bg-white shadow-sm transition-transform duration-(--glyph-duration-base) ease-emphasized data-[state=unchecked]:translate-x-0',
+      'pointer-events-none block rounded-pill bg-white shadow-sm transition-[translate] duration-(--glyph-duration-spring) ease-spring data-[state=unchecked]:translate-x-0',
   },
   variants: {
     size: {

package/src/components/table/table.tsx

@@ -2,7 +2,7 @@ import type { ComponentProps } from 'react'
 import { useComponentConfig } from '../../hooks/use-component-config'
 import { tv } from '../../utils/tv'
 
-export const tableStyles = tv({
+export const tableStyles = /* @__PURE__ */ tv({
   slots: {
     wrapper: 'relative w-full overflow-x-auto',
     table: 'w-full caption-bottom border-collapse text-small tabular-nums',

package/src/components/tabs/tabs.tsx

@@ -1,13 +1,16 @@
 import { Tabs as TabsPrimitive } from 'radix-ui'
-import { type ComponentProps, createContext, useContext } from 'react'
+import { type ComponentProps, createContext, useContext, useId } from 'react'
 import { useComponentConfig } from '../../hooks/use-component-config'
+import { useControllableState } from '../../hooks/use-controllable-state'
+import { ActiveIndicator } from '../../motion/active-indicator'
 import { focusRing, themedBorder, transition } from '../../utils/styles'
 import { tv, type VariantProps } from '../../utils/tv'
 
-export const tabsStyles = tv({
+export const tabsStyles = /* @__PURE__ */ tv({
   slots: {
     root: 'flex flex-col gap-4',
-    list: 'flex items-center',
+    // Isolated so the sliding indicator stays under every tab's label while it moves.
+    list: 'isolate flex items-center',
     trigger: [
       'relative inline-flex cursor-pointer select-none items-center justify-center gap-2 whitespace-nowrap text-small font-medium text-muted-foreground',
       transition,
@@ -15,19 +18,21 @@ export const tabsStyles = tv({
       'hover:text-foreground data-[state=active]:text-foreground disabled:pointer-events-none disabled:opacity-50',
       '[&>svg]:size-4',
     ],
+    /** Slides to the active tab. Underline bar or pill background, by variant. */
+    indicator: 'pointer-events-none absolute',
     content: 'outline-none',
   },
   variants: {
     variant: {
       underline: {
         list: 'gap-5 border-b border-border',
-        trigger:
-          'h-9 after:absolute after:inset-x-0 after:-bottom-px after:h-0.5 after:rounded-pill after:bg-transparent data-[state=active]:after:bg-foreground',
+        trigger: 'h-9',
+        indicator: 'inset-x-0 -bottom-px h-0.5 rounded-pill bg-foreground',
       },
       pill: {
         list: ['inline-flex w-fit gap-0.5 rounded-md border-border bg-muted p-0.5', themedBorder],
-        trigger:
-          'h-7 rounded-[calc(var(--radius-md)-2px)] px-3 data-[state=active]:bg-raised data-[state=active]:shadow-xs',
+        trigger: 'h-7 rounded-[calc(var(--radius-md)-2px)] px-3',
+        indicator: 'inset-0 -z-10 rounded-[calc(var(--radius-md)-2px)] bg-raised shadow-xs',
       },
     },
   },
@@ -35,17 +40,31 @@ export const tabsStyles = tv({
 })
 
 type TabsVariants = VariantProps<typeof tabsStyles>
-const TabsContext = createContext<TabsVariants>({})
+interface TabsContextValue extends TabsVariants {
+  value?: string
+  indicatorId?: string
+}
+const TabsContext = createContext<TabsContextValue>({})
 
 export interface TabsProps extends ComponentProps<typeof TabsPrimitive.Root>, TabsVariants {}
 
 export function Tabs(inProps: TabsProps) {
-  const [{ variant, className, ...rest }, slots] = useComponentConfig('Tabs', inProps)
+  const [props, slots] = useComponentConfig('Tabs', inProps)
+  const { variant, className, value: valueProp, defaultValue, onValueChange, ...rest } = props
+  // Tracked here so the active trigger can host the sliding indicator.
+  const [value, setValue] = useControllableState({
+    value: valueProp,
+    defaultValue: defaultValue ?? '',
+    onChange: onValueChange,
+  })
+  const indicatorId = `${useId()}-tabs-indicator`
   return (
-    <TabsContext.Provider value={{ variant }}>
+    <TabsContext.Provider value={{ variant, value, indicatorId }}>
       <TabsPrimitive.Root
         data-slot="tabs"
         className={tabsStyles({ variant }).root({ class: [slots.root, className] })}
+        value={value}
+        onValueChange={setValue}
         {...rest}
       />
     </TabsContext.Provider>
@@ -53,9 +72,9 @@ export function Tabs(inProps: TabsProps) {
 }
 
 function useTabsParts() {
-  const { variant } = useContext(TabsContext)
+  const context = useContext(TabsContext)
   const [, slots] = useComponentConfig('Tabs', {})
-  return { s: tabsStyles({ variant }), slots }
+  return { s: tabsStyles({ variant: context.variant }), slots, context }
 }
 
 export function TabsList({ className, ...props }: ComponentProps<typeof TabsPrimitive.List>) {
@@ -69,14 +88,26 @@ export function TabsList({ className, ...props }: ComponentProps<typeof TabsPrim
   )
 }
 
-export function TabsTrigger({ className, ...props }: ComponentProps<typeof TabsPrimitive.Trigger>) {
-  const { s, slots } = useTabsParts()
+export function TabsTrigger({
+  className,
+  children,
+  ...props
+}: ComponentProps<typeof TabsPrimitive.Trigger>) {
+  const { s, slots, context } = useTabsParts()
   return (
     <TabsPrimitive.Trigger
       data-slot="tabs-trigger"
       className={s.trigger({ class: [slots.trigger, className] })}
       {...props}
-    />
+    >
+      {children}
+      {context.indicatorId && context.value === props.value && (
+        <ActiveIndicator
+          layoutId={context.indicatorId}
+          className={s.indicator({ class: slots.indicator })}
+        />
+      )}
+    </TabsPrimitive.Trigger>
   )
 }
 

package/src/components/tag-input/tag-input.styles.ts

@@ -2,7 +2,7 @@ import type { StylesEntry } from '../../utils/registry'
 import { tv, type VariantProps } from '../../utils/tv'
 import { fieldControl } from '../input/input.styles'
 
-export const tagInputStyles = tv({
+export const tagInputStyles = /* @__PURE__ */ tv({
   slots: {
     root: 'grid gap-1.5',
     frame: [

package/src/components/tag-input/tag-input.tsx

@@ -1,6 +1,7 @@
 import { type ClipboardEvent, type KeyboardEvent, useId, useRef, useState } from 'react'
 import { useComponentConfig } from '../../hooks/use-component-config'
 import { useControllableState } from '../../hooks/use-controllable-state'
+import { PresenceItem, PresenceList } from '../../motion/presence-list'
 import { useFieldControl } from '../field/field-context'
 import { type TagInputVariants, tagInputStyles } from './tag-input.styles'
 
@@ -147,24 +148,32 @@ export function TagInput(inProps: TagInputProps) {
         className={s.frame({ class: slots.frame })}
         onClick={() => inputRef.current?.focus()}
       >
-        {tags.map((tag, index) => (
-          <span key={`${tag}-${index}`} data-slot="tag" className={s.tag({ class: slots.tag })}>
-            <span className={s.tagLabel({ class: slots.tagLabel })}>{tag}</span>
-            {!disabled && (
-              <button
-                type="button"
-                aria-label={`Remove ${tag}`}
-                className={s.remove({ class: slots.remove })}
-                onClick={(event) => {
-                  event.stopPropagation()
-                  remove(index)
-                }}
-              >
-                <XIcon />
-              </button>
-            )}
-          </span>
-        ))}
+        <PresenceList>
+          {tags.map((tag, index) => (
+            <PresenceItem
+              as="span"
+              // Keyed by value and occurrence, so removing one tag doesn't re-key the rest.
+              key={`${tag}-${tags.slice(0, index).filter((t) => t === tag).length}`}
+              data-slot="tag"
+              className={s.tag({ class: slots.tag })}
+            >
+              <span className={s.tagLabel({ class: slots.tagLabel })}>{tag}</span>
+              {!disabled && (
+                <button
+                  type="button"
+                  aria-label={`Remove ${tag}`}
+                  className={s.remove({ class: slots.remove })}
+                  onClick={(event) => {
+                    event.stopPropagation()
+                    remove(index)
+                  }}
+                >
+                  <XIcon />
+                </button>
+              )}
+            </PresenceItem>
+          ))}
+        </PresenceList>
         <input
           ref={inputRef}
           id={id}

package/src/components/text/text.styles.ts

@@ -1,6 +1,6 @@
 import { tv, type VariantProps } from '../../utils/tv'
 
-export const textStyles = tv({
+export const textStyles = /* @__PURE__ */ tv({
   slots: { base: '' },
   variants: {
     size: {

package/src/components/textarea/textarea.tsx

@@ -4,7 +4,7 @@ import { tv } from '../../utils/tv'
 import { useFieldControl } from '../field/field-context'
 import { fieldControl } from '../input/input.styles'
 
-export const textareaStyles = tv({
+export const textareaStyles = /* @__PURE__ */ tv({
   slots: {
     base: [
       ...fieldControl,

package/src/components/timeline/timeline.styles.ts

@@ -2,7 +2,7 @@ import type { StylesEntry } from '../../utils/registry'
 import { themedBorder } from '../../utils/styles'
 import { tv, type VariantProps } from '../../utils/tv'
 
-export const timelineStyles = tv({
+export const timelineStyles = /* @__PURE__ */ tv({
   slots: {
     root: 'grid',
     item: 'group/item relative grid grid-cols-[auto_1fr] gap-x-3',

package/src/components/toast/toast.tsx

@@ -5,7 +5,7 @@ import type { StylesEntry } from '../../utils/registry'
 import { focusRing, themedBorder, transition } from '../../utils/styles'
 import { tv } from '../../utils/tv'
 
-export const toastStyles = tv({
+export const toastStyles = /* @__PURE__ */ tv({
   slots: {
     toast: [
       'group flex w-(--width) items-start gap-3 rounded-lg border-border bg-raised p-4 text-small text-foreground shadow-lg',

package/src/components/toggle/toggle.styles.ts

@@ -2,7 +2,7 @@ import type { StylesEntry } from '../../utils/registry'
 import { focusRing, themedBorder, transition } from '../../utils/styles'
 import { tv, type VariantProps } from '../../utils/tv'
 
-export const toggleStyles = tv({
+export const toggleStyles = /* @__PURE__ */ tv({
   slots: {
     base: [
       'inline-flex shrink-0 cursor-pointer select-none items-center justify-center gap-2 whitespace-nowrap rounded-md font-medium text-muted-foreground',

package/src/components/tooltip/tooltip.tsx

@@ -1,12 +1,15 @@
 import { Tooltip as TooltipPrimitive } from 'radix-ui'
 import type { ComponentProps, ReactNode } from 'react'
 import { useComponentConfig } from '../../hooks/use-component-config'
+import { popoverMotion } from '../../utils/styles'
 import { tv } from '../../utils/tv'
 
-export const tooltipStyles = tv({
+export const tooltipStyles = /* @__PURE__ */ tv({
   slots: {
-    content:
-      'z-50 max-w-xs animate-pop-in rounded-sm bg-secondary px-2 py-1 text-caption text-secondary-foreground shadow-md',
+    content: [
+      'z-50 max-w-xs origin-(--radix-tooltip-content-transform-origin) rounded-sm bg-secondary px-2 py-1 text-caption text-secondary-foreground shadow-md',
+      popoverMotion,
+    ],
   },
 })
 

package/src/components/tree-view/tree-view.styles.ts

@@ -2,7 +2,7 @@ import type { StylesEntry } from '../../utils/registry'
 import { transition } from '../../utils/styles'
 import { tv, type VariantProps } from '../../utils/tv'
 
-export const treeViewStyles = tv({
+export const treeViewStyles = /* @__PURE__ */ tv({
   slots: {
     root: 'grid gap-px text-small',
     // Focus and selection are drawn on the item's own row only, never on nested rows.

package/src/index.ts

@@ -6,8 +6,10 @@ export {
   type ColorToken,
   type ComponentOverrides,
   defineTheme,
+  type MotionLevel,
   type RadiusToken,
   type ShadowToken,
+  type SpringConfig,
   type TextToken,
   type Theme,
   type ThemeInput,
@@ -87,6 +89,7 @@ export * from './components/tooltip'
 export * from './components/tree-view'
 export * from './components/visually-hidden'
 export * from './hooks'
+export * from './motion'
 // Patterns
 export * from './patterns/app-shell'
 export * from './patterns/async'

package/src/motion/active-indicator.tsx

@@ -0,0 +1,26 @@
+import { m } from 'motion/react'
+import { useMotionSettings } from './use-motion-settings'
+
+interface ActiveIndicatorProps {
+  /** Shared by every indicator in one group, so the active one slides between items. */
+  layoutId: string
+  className?: string | undefined
+}
+
+/**
+ * The highlight behind (or under) the active item of Tabs, SegmentedControl, Sidebar and
+ * similar. Rendered only inside the active item; `motion` animates it from the previous one.
+ */
+export function ActiveIndicator({ layoutId, className }: ActiveIndicatorProps) {
+  const { animate } = useMotionSettings()
+  if (!animate) return <span aria-hidden="true" data-slot="indicator" className={className} />
+  return (
+    <m.span
+      aria-hidden="true"
+      data-slot="indicator"
+      layoutId={layoutId}
+      initial={false}
+      className={className}
+    />
+  )
+}

package/src/motion/animated-number.tsx

@@ -0,0 +1,113 @@
+import { springEasing, springPosition } from '@glyphui/tokens'
+import { type ComponentProps, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react'
+import { cn } from '../utils/cn'
+import { useMotionSettings } from './use-motion-settings'
+
+const useIsomorphicLayoutEffect = typeof window === 'undefined' ? useEffect : useLayoutEffect
+
+export interface AnimatedNumberProps extends Omit<ComponentProps<'span'>, 'children'> {
+  value: number
+  /** Intl number formatting, e.g. `{ style: 'currency', currency: 'USD' }`. */
+  format?: Intl.NumberFormatOptions
+  locale?: string
+  /** Full control over the text, e.g. your own price formatter. Overrides `format`. */
+  formatValue?: (value: number) => string
+  /**
+   * Where the first count starts. Defaults to 0, counting up once the number scrolls into
+   * view. Set it to `value` to skip the first count.
+   */
+  from?: number
+}
+
+/**
+ * A number that springs to each new value: stats, prices, counters. Screen readers get the
+ * final value once, not every frame. Shows the final value immediately when motion is off.
+ */
+export function AnimatedNumber({
+  value,
+  format,
+  locale,
+  formatValue,
+  from = 0,
+  className,
+  ref,
+  ...props
+}: AnimatedNumberProps) {
+  const { animate, spring } = useMotionSettings()
+  const formatter = useMemo(() => new Intl.NumberFormat(locale, format), [locale, format])
+  const text = (n: number) => (formatValue ? formatValue(n) : formatter.format(n))
+  // Render the real value first: server HTML, tests and no-JS visitors see the right number.
+  const [shown, setShown] = useState(value)
+  const current = useRef(value)
+  const el = useRef<HTMLSpanElement>(null)
+  const [armed, setArmed] = useState(false)
+  const [inView, setInView] = useState(false)
+
+  // Before the first paint, rewind to `from` and wait until the number is on screen.
+  useIsomorphicLayoutEffect(() => {
+    const node = el.current
+    if (!node || !animate || typeof IntersectionObserver === 'undefined') return
+    current.current = from
+    setShown(from)
+    setArmed(true)
+    const observer = new IntersectionObserver(([entry]) => {
+      if (entry?.isIntersecting) {
+        setInView(true)
+        observer.disconnect()
+      }
+    })
+    observer.observe(node)
+    return () => observer.disconnect()
+    // Only on mount and when motion turns on: later changes to `from` don't restart it.
+  }, [animate])
+
+  useEffect(() => {
+    if (!animate || !armed) {
+      current.current = value
+      setShown(value)
+      return
+    }
+    if (!inView) return
+    const start = current.current
+    if (start === value) return
+    const { duration } = springEasing(spring)
+    const begin = performance.now()
+    let frame = 0
+    const tick = (now: number) => {
+      const elapsed = Math.min(now - begin, duration)
+      const next = start + (value - start) * springPosition(spring, elapsed / 1000)
+      current.current = next
+      setShown(next)
+      if (elapsed < duration) frame = requestAnimationFrame(tick)
+      else {
+        current.current = value
+        setShown(value)
+      }
+    }
+    frame = requestAnimationFrame(tick)
+    return () => cancelAnimationFrame(frame)
+  }, [value, animate, armed, inView, spring])
+
+  return (
+    <span
+      data-slot="animated-number"
+      ref={(node) => {
+        el.current = node
+        if (typeof ref === 'function') ref(node)
+        else if (ref) ref.current = node
+      }}
+      className={cn('tabular-nums', className)}
+      {...props}
+    >
+      {shown === value ? (
+        text(value)
+      ) : (
+        // While counting, screen readers get the final value once, not every frame.
+        <>
+          <span aria-hidden="true">{text(shown)}</span>
+          <span className="sr-only">{text(value)}</span>
+        </>
+      )}
+    </span>
+  )
+}

package/src/motion/features.ts

@@ -0,0 +1,7 @@
+import { domMax } from 'motion/react'
+
+/**
+ * Animation features, loaded on demand by `LazyMotion` so they stay out of the initial
+ * bundle. `domMax` because shared `layoutId` indicators need layout animations.
+ */
+export default domMax

package/src/motion/index.ts

@@ -0,0 +1,9 @@
+export { m } from 'motion/react'
+export { ActiveIndicator } from './active-indicator'
+export { AnimatedNumber, type AnimatedNumberProps } from './animated-number'
+export { PageTransition, type PageTransitionProps } from './page-transition'
+export { Presence, type PresenceProps } from './presence'
+export { Reveal, type RevealProps } from './reveal'
+export { Stagger, StaggerItem, type StaggerItemProps, type StaggerProps } from './stagger'
+export { type MotionSettings, useMotionSettings } from './use-motion-settings'
+export type { RevealOptions } from './use-reveal'