@dowel-ui/react 0.5.0 → 0.8.0

package/dist/components/tilt-card/tilt-card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tilt-card.js","names":[],"sources":["../../../src/components/tilt-card/tilt-card.tsx"],"sourcesContent":["\"use client\";\n\n// Original design (pattern inspired by bencho Tilt card; no code referenced).\nimport {\n  useCallback,\n  useEffect,\n  useRef,\n  type ComponentPropsWithRef,\n  type CSSProperties,\n  type PointerEvent,\n  type Ref,\n} from \"react\";\n\nimport { Card } from \"@/components/card\";\nimport { focusRing } from \"@/lib/styles\";\nimport { cn } from \"@/lib/utils\";\n\n/*\n * How it moves\n *\n * Pointer position is written straight to the element — its transform, and a\n * handful of custom properties the glare and the layers read — so a pointer\n * move costs no React render. CSS transitions do all the easing: a short\n * ease-out while following smooths the steps between pointer events, and an\n * overshooting ease on leave is the spring back to flat.\n *\n * Parallax layers are shifted with the `translate` property rather than\n * translateZ. A true 3D layer needs `preserve-3d`, which `overflow: hidden`\n * anywhere in the card silently flattens, and it changes size the moment the\n * perspective appears. A 2D shift proportional to the tilt reads the same and\n * cannot be broken by a consumer's class.\n *\n * Keyboard focus never tilts — a focused card has no pointer to lean toward —\n * it lifts, statically, using `translate` so it composes with any tilt a mouse\n * is applying at the same moment.\n */\n\nconst surface = cn(\n  \"group/tilt relative isolate\",\n  \"transition-[transform,translate,box-shadow]\",\n  \"duration-[var(--duration-slow),var(--duration-normal),var(--duration-normal)]\",\n  \"ease-[var(--ease-overshoot),var(--ease-out-quint),var(--ease-out-quint)]\",\n  \"data-[tilt=follow]:duration-[var(--duration-fast),var(--duration-normal),var(--duration-normal)]\",\n  \"data-[tilt=follow]:ease-[var(--ease-out-quint)]\",\n  \"data-[tilt=follow]:shadow-lg\",\n  focusRing,\n  \"focus-visible:-translate-y-1 focus-visible:shadow-md\",\n  \"has-focus-visible:-translate-y-1 has-focus-visible:shadow-md\",\n);\n\nconst glareLayer = cn(\n  \"pointer-events-none absolute inset-0 z-10 rounded-[inherit] opacity-0\",\n  \"transition-opacity duration-[var(--duration-normal)] ease-[var(--ease-out-quint)]\",\n  \"group-data-[tilt=follow]/tilt:opacity-100\",\n);\n\nconst glareStyle: CSSProperties = {\n  backgroundImage:\n    \"radial-gradient(circle at var(--tilt-glare-x, 50%) var(--tilt-glare-y, 50%), \" +\n    \"color-mix(in oklab, var(--color-background) 55%, transparent), transparent 65%)\",\n};\n\nconst layerDrift = cn(\n  \"relative transition-[translate] duration-[var(--duration-slow)] ease-[var(--ease-overshoot)]\",\n  \"group-data-[tilt=follow]/tilt:duration-[var(--duration-fast)] group-data-[tilt=follow]/tilt:ease-[var(--ease-out-quint)]\",\n);\n\n/** Whether the tilt may run: never for touch, coarse pointers or reduced motion. */\nfunction motionAllowed(pointerType: string): boolean {\n  if (pointerType === \"touch\") return false;\n  if (typeof window.matchMedia !== \"function\") return true;\n  return !(\n    window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches ||\n    window.matchMedia(\"(pointer: coarse)\").matches\n  );\n}\n\nfunction assignRef<T>(ref: Ref<T> | undefined, node: T | null) {\n  if (typeof ref === \"function\") ref(node);\n  else if (ref) ref.current = node;\n}\n\n/** Rounds away float noise so the written transform stays short and stable. */\nfunction round(value: number): number {\n  return Math.round(value * 100) / 100 || 0;\n}\n\nexport interface TiltCardProps extends ComponentPropsWithRef<\"div\"> {\n  /** The largest tilt, in degrees, reached with the pointer at an edge. 0 keeps the card flat. */\n  maxTilt?: number;\n  /** Distance, in pixels, of the viewer from the card. Smaller is more dramatic. */\n  perspective?: number;\n  /** How much the card grows while tilting. 1 keeps its size. */\n  scale?: number;\n  /** A soft highlight that follows the pointer across the surface. */\n  glare?: boolean;\n  /** Keeps the card flat, as if the pointer were elsewhere. */\n  disabled?: boolean;\n}\n\n/**\n * A card that tilts in 3D toward the pointer and springs back flat when it\n * leaves.\n *\n * Decoration on an ordinary Card: it never moves for touch, coarse pointers or\n * users who prefer reduced motion. Mark children with `TiltCardLayer` to have\n * them drift further than the surface, for depth.\n */\nexport function TiltCard({\n  className,\n  maxTilt = 10,\n  perspective = 800,\n  scale = 1.02,\n  glare = true,\n  disabled = false,\n  children,\n  ref,\n  onPointerMove,\n  onPointerLeave,\n  ...props\n}: TiltCardProps) {\n  const cardRef = useRef<HTMLDivElement | null>(null);\n  // The card's box, measured on the first move of a hover, while it is still\n  // flat. A tilted card's bounding box is its projection, so measuring on\n  // every move would have the card chase its own lean.\n  const box = useRef<DOMRect | null>(null);\n  const tilted = useRef(false);\n  const inert = disabled || maxTilt === 0;\n\n  const setRef = useCallback(\n    (node: HTMLDivElement | null) => {\n      cardRef.current = node;\n      assignRef(ref, node);\n    },\n    [ref],\n  );\n\n  const flatten = useCallback(() => {\n    box.current = null;\n    const element = cardRef.current;\n    if (!element || !tilted.current) return;\n    tilted.current = false;\n    element.dataset.tilt = \"rest\";\n    element.style.transform = \"\";\n    element.style.setProperty(\"--tilt-px\", \"0\");\n    element.style.setProperty(\"--tilt-py\", \"0\");\n  }, []);\n\n  const lean = useCallback(\n    (clientX: number, clientY: number, pointerType: string) => {\n      const element = cardRef.current;\n      if (!element || inert || !motionAllowed(pointerType)) {\n        flatten();\n        return;\n      }\n      box.current ??= element.getBoundingClientRect();\n      const { left, top, width, height } = box.current;\n      if (width === 0 || height === 0) return;\n\n      // -1 at the start edge, 1 at the end edge, clamped for pointers that\n      // slip past a rounded corner before `pointerleave` arrives.\n      const x = Math.min(1, Math.max(-1, ((clientX - left) / width) * 2 - 1));\n      const y = Math.min(1, Math.max(-1, ((clientY - top) / height) * 2 - 1));\n\n      // The side under the pointer presses away from the viewer: rotateY\n      // positive sends the right edge back, rotateX negative the bottom edge.\n      tilted.current = true;\n      element.dataset.tilt = \"follow\";\n      element.style.transform =\n        `perspective(${String(perspective)}px) ` +\n        `rotateX(${String(round(-y * maxTilt))}deg) ` +\n        `rotateY(${String(round(x * maxTilt))}deg) ` +\n        `scale3d(${String(scale)}, ${String(scale)}, 1)`;\n      element.style.setProperty(\"--tilt-px\", String(round(x)));\n      element.style.setProperty(\"--tilt-py\", String(round(y)));\n      element.style.setProperty(\"--tilt-glare-x\", `${String(round(((x + 1) / 2) * 100))}%`);\n      element.style.setProperty(\"--tilt-glare-y\", `${String(round(((y + 1) / 2) * 100))}%`);\n    },\n    [flatten, inert, maxTilt, perspective, scale],\n  );\n\n  // Scrolling moves the card under a still pointer; the cached box is stale.\n  useEffect(() => {\n    const forget = () => {\n      box.current = null;\n    };\n    window.addEventListener(\"scroll\", forget, { passive: true, capture: true });\n    window.addEventListener(\"resize\", forget, { passive: true });\n    return () => {\n      window.removeEventListener(\"scroll\", forget, { capture: true });\n      window.removeEventListener(\"resize\", forget);\n    };\n  }, []);\n\n  // Becoming disabled mid-tilt should not leave the card stranded at an angle.\n  useEffect(() => {\n    if (inert) flatten();\n  }, [inert, flatten]);\n\n  function handlePointerMove(event: PointerEvent<HTMLDivElement>) {\n    onPointerMove?.(event);\n    lean(event.clientX, event.clientY, event.pointerType);\n  }\n\n  function handlePointerLeave(event: PointerEvent<HTMLDivElement>) {\n    onPointerLeave?.(event);\n    flatten();\n  }\n\n  return (\n    <Card\n      ref={setRef}\n      data-slot=\"tilt-card\"\n      data-tilt=\"rest\"\n      className={cn(surface, className)}\n      onPointerMove={handlePointerMove}\n      onPointerLeave={handlePointerLeave}\n      {...props}\n    >\n      {children}\n      {glare ? (\n        <span\n          aria-hidden=\"true\"\n          data-slot=\"tilt-card-glare\"\n          className={glareLayer}\n          style={glareStyle}\n        />\n      ) : null}\n    </Card>\n  );\n}\n\nexport interface TiltCardLayerProps extends ComponentPropsWithRef<\"div\"> {\n  /**\n   * How far, in pixels, the layer drifts toward the pointer at full tilt —\n   * on top of the card's own lean. Larger reads as nearer the viewer; a\n   * negative depth sinks the layer behind the surface.\n   */\n  depth?: number;\n}\n\n/** Content inside a TiltCard that floats at its own depth. */\nexport function TiltCardLayer({ className, depth = 12, style, ...props }: TiltCardLayerProps) {\n  const d = String(depth);\n  return (\n    <div\n      data-slot=\"tilt-card-layer\"\n      className={cn(layerDrift, className)}\n      style={{\n        translate: `calc(var(--tilt-px, 0) * ${d}px) calc(var(--tilt-py, 0) * ${d}px)`,\n        ...style,\n      }}\n      {...props}\n    />\n  );\n}\n"],"mappings":"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"}

package/dist/components/time-range-picker/time-range-picker.js

@@ -208,7 +208,7 @@ function TimeRangePresets({ className, ...props }) {
 	}, [presets]);
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "time-range-presets",
-		className: cn("max-h-80 min-w-52 overflow-y-auto border-border p-1.5 sm:border-r", className),
+		className: cn("max-h-80 min-w-52 overflow-y-auto border-border p-1.5 sm:border-e", className),
 		...props,
 		children: groups.map(([group, items]) => /* @__PURE__ */ jsxs("div", {
 			role: "group",
@@ -224,7 +224,7 @@ function TimeRangePresets({ className, ...props }) {
 					setValue(preset.expression);
 					close();
 				},
-				className: cn("flex w-full items-center rounded-md px-2 py-1.5 text-left text-sm transition-colors", preset.expression === value ? "bg-accent font-medium text-accent-foreground" : "hover:bg-accent hover:text-accent-foreground", focusRing),
+				className: cn("flex w-full items-center rounded-md px-2 py-1.5 text-start text-sm transition-colors", preset.expression === value ? "bg-accent font-medium text-accent-foreground" : "hover:bg-accent hover:text-accent-foreground", focusRing),
 				children: preset.label
 			}, preset.expression))]
 		}, group))
@@ -339,7 +339,7 @@ function TimeRangeCalendar({ className, numberOfMonths = 1, ...props }) {
 	} : void 0);
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "time-range-calendar",
-		className: cn("border-t border-border p-1 sm:border-t-0 sm:border-l", className),
+		className: cn("border-t border-border p-1 sm:border-s sm:border-t-0", className),
 		...props,
 		children: /* @__PURE__ */ jsx(Calendar, {
 			mode: "range",

package/dist/components/time-range-picker/time-range-picker.js.map

@@ -1 +1 @@
-{"version":3,"file":"time-range-picker.js","names":[],"sources":["../../../src/components/time-range-picker/time-range-picker.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  createContext,\n  useCallback,\n  useContext,\n  useId,\n  useMemo,\n  useState,\n  useSyncExternalStore,\n  type ComponentPropsWithRef,\n  type ReactNode,\n} from \"react\";\nimport type { DateRange } from \"react-day-picker\";\n\nimport { Button } from \"@/components/button\";\nimport { Calendar } from \"@/components/calendar\";\nimport { Input } from \"@/components/input\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"@/components/popover\";\nimport { focusRing } from \"@/lib/styles\";\nimport { cn } from \"@/lib/utils\";\n\nimport {\n  DEFAULT_PRESETS,\n  TimeExpressionError,\n  absoluteExpression,\n  describeTimeRange,\n  formatResolvedRange,\n  resolveTimeRange,\n  type ResolvedRange,\n  type TimeRangePreset,\n} from \"./time-expression\";\n\n/**\n * The control every observability product builds for itself.\n *\n * Grafana, Datadog, Sentry, PostHog, Vercel, Honeycomb, Cloudflare and\n * Amplitude each maintain a bespoke one, and no React package ships it, because\n * it looks like a date picker and is not one — see `time-expression.ts` for the\n * value model that makes the difference.\n *\n * Composed rather than reimplemented: Popover supplies the dialog semantics,\n * Calendar the absolute path, Input the expression entry.\n *\n * Two omissions are deliberate. No timezone picker — that is a 400-entry\n * combobox and a decision an app makes once, so `timeZone` is a prop. And no\n * comparison range; a second window belongs to whatever renders the chart.\n */\n\ninterface TimeRangeContextValue {\n  value: string;\n  setValue: (expression: string) => void;\n  now: Date;\n  timeZone?: string;\n  locale?: string;\n  presets: TimeRangePreset[];\n  resolved: ResolvedRange | null;\n  error: string | null;\n  /** False until the clock is known, which on a server render is never. */\n  clockReady: boolean;\n  close: () => void;\n  labelId: string;\n}\n\n/** Stands in until the clock is known. Never shown; see `clockReady`. */\nconst EPOCH = new Date(0);\n\n/**\n * The clock, for callers who did not supply one.\n *\n * `useSyncExternalStore` rather than an effect, because this is the case it\n * exists for: a value the server cannot know. The server snapshot is null, so a\n * server render and the hydration render both commit to nothing clock-dependent\n * and cannot disagree; the real instant arrives in the re-render after.\n *\n * `getSnapshot` has to be referentially stable, so the instant is created once\n * for the page. That means every picker without a `now` prop shares it and none\n * of them advance — which is the whole reason the prop is there.\n */\nconst subscribeToNothing = () => () => undefined;\nlet sharedClock: Date | null = null;\nconst readSharedClock = () => (sharedClock ??= new Date());\nconst readNoClock = () => null;\n\nconst TimeRangeContext = createContext<TimeRangeContextValue | null>(null);\n\nfunction useTimeRange(component: string): TimeRangeContextValue {\n  const context = useContext(TimeRangeContext);\n  if (!context) {\n    throw new Error(`${component} must be used inside <TimeRange>.`);\n  }\n  return context;\n}\n\nexport interface TimeRangeProps {\n  /** The expression, e.g. `now-6h..now`. Controlled. */\n  value?: string;\n  defaultValue?: string;\n  onValueChange?: (expression: string) => void;\n  /**\n   * The instant relative expressions are measured from. Supplied by the\n   * consumer so nothing here reads the clock during render. Pass a value that\n   * changes when you refresh; a stable one holds the window still between them.\n   */\n  now?: Date;\n  /** IANA zone the snapping happens in. Defaults to the runtime zone. */\n  timeZone?: string;\n  locale?: string;\n  presets?: TimeRangePreset[];\n  open?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  children: ReactNode;\n}\n\nexport function TimeRange({\n  value: valueProp,\n  defaultValue = \"now-6h..now\",\n  onValueChange,\n  now,\n  timeZone,\n  locale,\n  presets = DEFAULT_PRESETS,\n  open: openProp,\n  onOpenChange,\n  children,\n}: TimeRangeProps) {\n  const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);\n  const value = valueProp ?? uncontrolledValue;\n\n  const [uncontrolledOpen, setUncontrolledOpen] = useState(false);\n  const open = openProp ?? uncontrolledOpen;\n\n  const labelId = useId();\n\n  // Reading the clock during render is what the `now` prop exists to avoid: the\n  // server would render one instant and hydration another, and React would\n  // throw out the tree. Until the fallback arrives, nothing clock-dependent is\n  // rendered — the relative label, \"Last 6 hours\", does not need one, which is\n  // why the trigger still says something useful in the meantime.\n  const fallbackClock = useSyncExternalStore(subscribeToNothing, readSharedClock, readNoClock);\n\n  const clock = now ?? fallbackClock;\n  // A placeholder only for expressions that never mention `now`; anything that\n  // does is gated on `clock` below rather than resolved against a fake instant.\n  const effectiveNow = clock ?? EPOCH;\n\n  const setOpen = useCallback(\n    (next: boolean) => {\n      if (openProp === undefined) setUncontrolledOpen(next);\n      onOpenChange?.(next);\n    },\n    [openProp, onOpenChange],\n  );\n\n  const setValue = useCallback(\n    (expression: string) => {\n      if (valueProp === undefined) setUncontrolledValue(expression);\n      onValueChange?.(expression);\n    },\n    [valueProp, onValueChange],\n  );\n\n  const { resolved, error } = useMemo(() => {\n    // Claiming neither a window nor an error before the clock is known: an\n    // expression cannot be judged against an instant nobody has read yet.\n    if (!clock) return { resolved: null, error: null };\n    try {\n      return { resolved: resolveTimeRange(value, { now: clock, timeZone }), error: null };\n    } catch (thrown) {\n      return {\n        resolved: null,\n        error: thrown instanceof TimeExpressionError ? thrown.message : \"Invalid time range.\",\n      };\n    }\n  }, [value, clock, timeZone]);\n\n  const context = useMemo<TimeRangeContextValue>(\n    () => ({\n      value,\n      setValue,\n      now: effectiveNow,\n      timeZone,\n      locale,\n      presets,\n      resolved,\n      error,\n      clockReady: clock !== null,\n      close: () => {\n        setOpen(false);\n      },\n      labelId,\n    }),\n    [\n      value,\n      setValue,\n      effectiveNow,\n      clock,\n      timeZone,\n      locale,\n      presets,\n      resolved,\n      error,\n      setOpen,\n      labelId,\n    ],\n  );\n\n  return (\n    <TimeRangeContext.Provider value={context}>\n      <Popover open={open} onOpenChange={setOpen}>\n        {children}\n      </Popover>\n    </TimeRangeContext.Provider>\n  );\n}\n\nfunction ClockIcon() {\n  return (\n    <svg viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\" className=\"size-4 opacity-70\">\n      <circle cx=\"12\" cy=\"12\" r=\"9\" stroke=\"currentColor\" strokeWidth=\"2\" />\n      <path d=\"M12 7v5l3 2\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" />\n    </svg>\n  );\n}\n\nexport interface TimeRangeTriggerProps extends ComponentPropsWithRef<\"button\"> {\n  /** Shows the resolved window under the label. Off by default; it is long. */\n  showResolved?: boolean;\n}\n\n/**\n * The button, named by the range it holds: \"Last 6 hours\", not two timestamps.\n * The resolved window stays reachable as the title, and as `showResolved`.\n */\nexport function TimeRangeTrigger({\n  className,\n  showResolved = false,\n  ...props\n}: TimeRangeTriggerProps) {\n  const { value, now, timeZone, locale, presets, resolved, error } =\n    useTimeRange(\"TimeRangeTrigger\");\n\n  const label = describeTimeRange(value, { now, timeZone, locale, presets });\n  const resolvedText = resolved ? formatResolvedRange(resolved, { locale, timeZone }) : null;\n\n  return (\n    <PopoverTrigger asChild>\n      <Button\n        data-slot=\"time-range-trigger\"\n        variant=\"outline\"\n        aria-invalid={error ? true : undefined}\n        title={resolvedText ?? undefined}\n        className={cn(\"justify-start gap-2 font-normal\", className)}\n        {...props}\n      >\n        <ClockIcon />\n        <span className=\"flex flex-col items-start leading-tight\">\n          <span>{label}</span>\n          {showResolved && resolvedText ? (\n            <span className=\"text-2xs font-normal text-muted-foreground\">{resolvedText}</span>\n          ) : null}\n        </span>\n        {/* The window the label stands for, for anyone who cannot see the\n            title attribute. Read after the label, not instead of it. */}\n        {resolvedText && !showResolved ? (\n          <span className=\"sr-only\">{`, ${resolvedText}`}</span>\n        ) : null}\n      </Button>\n    </PopoverTrigger>\n  );\n}\n\nexport interface TimeRangeContentProps extends ComponentPropsWithRef<typeof PopoverContent> {\n  /** Names the dialog. */\n  label?: string;\n}\n\nexport function TimeRangeContent({\n  className,\n  label = \"Choose a time range\",\n  children,\n  ...props\n}: TimeRangeContentProps) {\n  const { labelId } = useTimeRange(\"TimeRangeContent\");\n\n  return (\n    <PopoverContent\n      data-slot=\"time-range-content\"\n      aria-labelledby={labelId}\n      align=\"start\"\n      className={cn(\"w-auto max-w-[min(38rem,calc(100vw-2rem))] p-0\", className)}\n      {...props}\n    >\n      <h2 id={labelId} className=\"sr-only\">\n        {label}\n      </h2>\n      <div className=\"flex flex-col gap-0 sm:flex-row sm:items-stretch\">{children}</div>\n    </PopoverContent>\n  );\n}\n\n/**\n * The named ranges, which is how most of these are actually used. Buttons\n * rather than a radiogroup: choosing one both selects and dismisses, which is a\n * command, and `aria-pressed` still carries which one matches.\n */\nexport function TimeRangePresets({\n  className,\n  ...props\n}: Omit<ComponentPropsWithRef<\"div\">, \"children\">) {\n  const { presets, value, setValue, close } = useTimeRange(\"TimeRangePresets\");\n\n  const groups = useMemo(() => {\n    const collected = new Map<string, TimeRangePreset[]>();\n    for (const preset of presets) {\n      const existing = collected.get(preset.group);\n      if (existing) existing.push(preset);\n      else collected.set(preset.group, [preset]);\n    }\n    return [...collected];\n  }, [presets]);\n\n  return (\n    <div\n      data-slot=\"time-range-presets\"\n      className={cn(\n        \"max-h-80 min-w-52 overflow-y-auto border-border p-1.5 sm:border-r\",\n        className,\n      )}\n      {...props}\n    >\n      {groups.map(([group, items]) => (\n        <div key={group} role=\"group\" aria-label={group} className=\"pb-1 last:pb-0\">\n          <p className=\"px-2 py-1 text-2xs font-medium tracking-wide text-muted-foreground uppercase\">\n            {group}\n          </p>\n          {items.map((preset) => (\n            <button\n              key={preset.expression}\n              type=\"button\"\n              aria-pressed={preset.expression === value}\n              onClick={() => {\n                setValue(preset.expression);\n                close();\n              }}\n              className={cn(\n                \"flex w-full items-center rounded-md px-2 py-1.5 text-left text-sm transition-colors\",\n                preset.expression === value\n                  ? \"bg-accent font-medium text-accent-foreground\"\n                  : \"hover:bg-accent hover:text-accent-foreground\",\n                focusRing,\n              )}\n            >\n              {preset.label}\n            </button>\n          ))}\n        </div>\n      ))}\n    </div>\n  );\n}\n\n/**\n * Raw expression entry, with the resolved window shown as you type — the escape\n * hatch that keeps the presets from being a ceiling.\n *\n * An expression that does not parse says why and is not applied: a chart\n * quietly re-scoping itself to a window nobody asked for is worse than one that\n * refuses.\n */\nexport function TimeRangeExpression({\n  className,\n  ...props\n}: Omit<ComponentPropsWithRef<\"div\">, \"children\">) {\n  const { value, setValue, now, timeZone, locale, clockReady, close } =\n    useTimeRange(\"TimeRangeExpression\");\n\n  const [draft, setDraft] = useState(value);\n  // The expression can change under the input — a preset click, or the\n  // consumer setting it. Adjusting during render rather than in an effect keeps\n  // the field from showing a stale value for a frame.\n  const [lastValue, setLastValue] = useState(value);\n  if (value !== lastValue) {\n    setLastValue(value);\n    setDraft(value);\n  }\n\n  const feedbackId = useId();\n  const preview = useMemo(() => {\n    // Before the clock is known there is nothing to preview and nothing to\n    // reject — saying \"invalid\" here would be a verdict reached without a fact.\n    if (!clockReady) return { text: null, error: null as string | null };\n    try {\n      return {\n        text: formatResolvedRange(resolveTimeRange(draft, { now, timeZone }), {\n          locale,\n          timeZone,\n        }),\n        error: null as string | null,\n      };\n    } catch (thrown) {\n      return {\n        text: null,\n        error: thrown instanceof TimeExpressionError ? thrown.message : \"Invalid time range.\",\n      };\n    }\n  }, [draft, now, timeZone, locale, clockReady]);\n\n  const apply = () => {\n    if (preview.error || !clockReady) return;\n    setValue(draft.trim());\n    close();\n  };\n\n  return (\n    <div\n      data-slot=\"time-range-expression\"\n      className={cn(\n        \"flex flex-col gap-1.5 border-t border-border p-3 sm:border-t-0\",\n        className,\n      )}\n      {...props}\n    >\n      <label htmlFor={feedbackId + \"-input\"} className=\"text-xs font-medium\">\n        Expression\n      </label>\n      <div className=\"flex gap-2\">\n        <Input\n          id={feedbackId + \"-input\"}\n          inputSize=\"sm\"\n          value={draft}\n          spellCheck={false}\n          autoComplete=\"off\"\n          aria-invalid={preview.error ? true : undefined}\n          aria-describedby={feedbackId}\n          onChange={(event) => {\n            setDraft(event.target.value);\n          }}\n          onKeyDown={(event) => {\n            if (event.key === \"Enter\") {\n              event.preventDefault();\n              apply();\n            }\n          }}\n          className=\"font-mono\"\n        />\n        <Button size=\"sm\" onClick={apply} disabled={Boolean(preview.error) || !clockReady}>\n          Apply\n        </Button>\n      </div>\n      {/* One element for both outcomes, so a screen reader hears the error\n          replace the preview rather than accumulating two descriptions. */}\n      <p\n        id={feedbackId}\n        className={cn(\n          \"min-h-4 text-2xs\",\n          preview.error ? \"text-destructive\" : \"text-muted-foreground\",\n        )}\n      >\n        {preview.error ?? preview.text}\n      </p>\n    </div>\n  );\n}\n\n/**\n * The absolute path, for a window with no relative meaning. Picking dates\n * writes a concrete expression: \"1 to 7 March\" does not become relative just\n * because it was chosen here.\n */\nexport function TimeRangeCalendar({\n  className,\n  numberOfMonths = 1,\n  ...props\n}: Omit<ComponentPropsWithRef<\"div\">, \"children\"> & { numberOfMonths?: number }) {\n  const { setValue, resolved, close } = useTimeRange(\"TimeRangeCalendar\");\n\n  const [selection, setSelection] = useState<DateRange | undefined>(() =>\n    resolved ? { from: resolved.from, to: resolved.to } : undefined,\n  );\n\n  return (\n    <div\n      data-slot=\"time-range-calendar\"\n      className={cn(\"border-t border-border p-1 sm:border-t-0 sm:border-l\", className)}\n      {...props}\n    >\n      <Calendar\n        mode=\"range\"\n        selected={selection}\n        defaultMonth={selection?.from}\n        numberOfMonths={numberOfMonths}\n        onSelect={(next) => {\n          setSelection(next);\n          // Only once both ends exist. One click is half an answer, and\n          // applying it would show a zero-length range mid-gesture.\n          if (next?.from && next.to) {\n            setValue(absoluteExpression(startOfDay(next.from), endOfDay(next.to)));\n            close();\n          }\n        }}\n      />\n    </div>\n  );\n}\n\nfunction startOfDay(date: Date): Date {\n  const start = new Date(date);\n  start.setHours(0, 0, 0, 0);\n  return start;\n}\n\n/**\n * A day picked as the end of a range means the whole of that day. Taking\n * midnight instead silently drops the last day's data, which is the same\n * off-by-one that `now/d..now/d` has to avoid.\n */\nfunction endOfDay(date: Date): Date {\n  const end = new Date(date);\n  end.setHours(23, 59, 59, 999);\n  return end;\n}\n"],"mappings":"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"}
+{"version":3,"file":"time-range-picker.js","names":[],"sources":["../../../src/components/time-range-picker/time-range-picker.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  createContext,\n  useCallback,\n  useContext,\n  useId,\n  useMemo,\n  useState,\n  useSyncExternalStore,\n  type ComponentPropsWithRef,\n  type ReactNode,\n} from \"react\";\nimport type { DateRange } from \"react-day-picker\";\n\nimport { Button } from \"@/components/button\";\nimport { Calendar } from \"@/components/calendar\";\nimport { Input } from \"@/components/input\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"@/components/popover\";\nimport { focusRing } from \"@/lib/styles\";\nimport { cn } from \"@/lib/utils\";\n\nimport {\n  DEFAULT_PRESETS,\n  TimeExpressionError,\n  absoluteExpression,\n  describeTimeRange,\n  formatResolvedRange,\n  resolveTimeRange,\n  type ResolvedRange,\n  type TimeRangePreset,\n} from \"./time-expression\";\n\n/**\n * The control every observability product builds for itself.\n *\n * Grafana, Datadog, Sentry, PostHog, Vercel, Honeycomb, Cloudflare and\n * Amplitude each maintain a bespoke one, and no React package ships it, because\n * it looks like a date picker and is not one — see `time-expression.ts` for the\n * value model that makes the difference.\n *\n * Composed rather than reimplemented: Popover supplies the dialog semantics,\n * Calendar the absolute path, Input the expression entry.\n *\n * Two omissions are deliberate. No timezone picker — that is a 400-entry\n * combobox and a decision an app makes once, so `timeZone` is a prop. And no\n * comparison range; a second window belongs to whatever renders the chart.\n */\n\ninterface TimeRangeContextValue {\n  value: string;\n  setValue: (expression: string) => void;\n  now: Date;\n  timeZone?: string;\n  locale?: string;\n  presets: TimeRangePreset[];\n  resolved: ResolvedRange | null;\n  error: string | null;\n  /** False until the clock is known, which on a server render is never. */\n  clockReady: boolean;\n  close: () => void;\n  labelId: string;\n}\n\n/** Stands in until the clock is known. Never shown; see `clockReady`. */\nconst EPOCH = new Date(0);\n\n/**\n * The clock, for callers who did not supply one.\n *\n * `useSyncExternalStore` rather than an effect, because this is the case it\n * exists for: a value the server cannot know. The server snapshot is null, so a\n * server render and the hydration render both commit to nothing clock-dependent\n * and cannot disagree; the real instant arrives in the re-render after.\n *\n * `getSnapshot` has to be referentially stable, so the instant is created once\n * for the page. That means every picker without a `now` prop shares it and none\n * of them advance — which is the whole reason the prop is there.\n */\nconst subscribeToNothing = () => () => undefined;\nlet sharedClock: Date | null = null;\nconst readSharedClock = () => (sharedClock ??= new Date());\nconst readNoClock = () => null;\n\nconst TimeRangeContext = createContext<TimeRangeContextValue | null>(null);\n\nfunction useTimeRange(component: string): TimeRangeContextValue {\n  const context = useContext(TimeRangeContext);\n  if (!context) {\n    throw new Error(`${component} must be used inside <TimeRange>.`);\n  }\n  return context;\n}\n\nexport interface TimeRangeProps {\n  /** The expression, e.g. `now-6h..now`. Controlled. */\n  value?: string;\n  defaultValue?: string;\n  onValueChange?: (expression: string) => void;\n  /**\n   * The instant relative expressions are measured from. Supplied by the\n   * consumer so nothing here reads the clock during render. Pass a value that\n   * changes when you refresh; a stable one holds the window still between them.\n   */\n  now?: Date;\n  /** IANA zone the snapping happens in. Defaults to the runtime zone. */\n  timeZone?: string;\n  locale?: string;\n  presets?: TimeRangePreset[];\n  open?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  children: ReactNode;\n}\n\nexport function TimeRange({\n  value: valueProp,\n  defaultValue = \"now-6h..now\",\n  onValueChange,\n  now,\n  timeZone,\n  locale,\n  presets = DEFAULT_PRESETS,\n  open: openProp,\n  onOpenChange,\n  children,\n}: TimeRangeProps) {\n  const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);\n  const value = valueProp ?? uncontrolledValue;\n\n  const [uncontrolledOpen, setUncontrolledOpen] = useState(false);\n  const open = openProp ?? uncontrolledOpen;\n\n  const labelId = useId();\n\n  // Reading the clock during render is what the `now` prop exists to avoid: the\n  // server would render one instant and hydration another, and React would\n  // throw out the tree. Until the fallback arrives, nothing clock-dependent is\n  // rendered — the relative label, \"Last 6 hours\", does not need one, which is\n  // why the trigger still says something useful in the meantime.\n  const fallbackClock = useSyncExternalStore(subscribeToNothing, readSharedClock, readNoClock);\n\n  const clock = now ?? fallbackClock;\n  // A placeholder only for expressions that never mention `now`; anything that\n  // does is gated on `clock` below rather than resolved against a fake instant.\n  const effectiveNow = clock ?? EPOCH;\n\n  const setOpen = useCallback(\n    (next: boolean) => {\n      if (openProp === undefined) setUncontrolledOpen(next);\n      onOpenChange?.(next);\n    },\n    [openProp, onOpenChange],\n  );\n\n  const setValue = useCallback(\n    (expression: string) => {\n      if (valueProp === undefined) setUncontrolledValue(expression);\n      onValueChange?.(expression);\n    },\n    [valueProp, onValueChange],\n  );\n\n  const { resolved, error } = useMemo(() => {\n    // Claiming neither a window nor an error before the clock is known: an\n    // expression cannot be judged against an instant nobody has read yet.\n    if (!clock) return { resolved: null, error: null };\n    try {\n      return { resolved: resolveTimeRange(value, { now: clock, timeZone }), error: null };\n    } catch (thrown) {\n      return {\n        resolved: null,\n        error: thrown instanceof TimeExpressionError ? thrown.message : \"Invalid time range.\",\n      };\n    }\n  }, [value, clock, timeZone]);\n\n  const context = useMemo<TimeRangeContextValue>(\n    () => ({\n      value,\n      setValue,\n      now: effectiveNow,\n      timeZone,\n      locale,\n      presets,\n      resolved,\n      error,\n      clockReady: clock !== null,\n      close: () => {\n        setOpen(false);\n      },\n      labelId,\n    }),\n    [\n      value,\n      setValue,\n      effectiveNow,\n      clock,\n      timeZone,\n      locale,\n      presets,\n      resolved,\n      error,\n      setOpen,\n      labelId,\n    ],\n  );\n\n  return (\n    <TimeRangeContext.Provider value={context}>\n      <Popover open={open} onOpenChange={setOpen}>\n        {children}\n      </Popover>\n    </TimeRangeContext.Provider>\n  );\n}\n\nfunction ClockIcon() {\n  return (\n    <svg viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\" className=\"size-4 opacity-70\">\n      <circle cx=\"12\" cy=\"12\" r=\"9\" stroke=\"currentColor\" strokeWidth=\"2\" />\n      <path d=\"M12 7v5l3 2\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" />\n    </svg>\n  );\n}\n\nexport interface TimeRangeTriggerProps extends ComponentPropsWithRef<\"button\"> {\n  /** Shows the resolved window under the label. Off by default; it is long. */\n  showResolved?: boolean;\n}\n\n/**\n * The button, named by the range it holds: \"Last 6 hours\", not two timestamps.\n * The resolved window stays reachable as the title, and as `showResolved`.\n */\nexport function TimeRangeTrigger({\n  className,\n  showResolved = false,\n  ...props\n}: TimeRangeTriggerProps) {\n  const { value, now, timeZone, locale, presets, resolved, error } =\n    useTimeRange(\"TimeRangeTrigger\");\n\n  const label = describeTimeRange(value, { now, timeZone, locale, presets });\n  const resolvedText = resolved ? formatResolvedRange(resolved, { locale, timeZone }) : null;\n\n  return (\n    <PopoverTrigger asChild>\n      <Button\n        data-slot=\"time-range-trigger\"\n        variant=\"outline\"\n        aria-invalid={error ? true : undefined}\n        title={resolvedText ?? undefined}\n        className={cn(\"justify-start gap-2 font-normal\", className)}\n        {...props}\n      >\n        <ClockIcon />\n        <span className=\"flex flex-col items-start leading-tight\">\n          <span>{label}</span>\n          {showResolved && resolvedText ? (\n            <span className=\"text-2xs font-normal text-muted-foreground\">{resolvedText}</span>\n          ) : null}\n        </span>\n        {/* The window the label stands for, for anyone who cannot see the\n            title attribute. Read after the label, not instead of it. */}\n        {resolvedText && !showResolved ? (\n          <span className=\"sr-only\">{`, ${resolvedText}`}</span>\n        ) : null}\n      </Button>\n    </PopoverTrigger>\n  );\n}\n\nexport interface TimeRangeContentProps extends ComponentPropsWithRef<typeof PopoverContent> {\n  /** Names the dialog. */\n  label?: string;\n}\n\nexport function TimeRangeContent({\n  className,\n  label = \"Choose a time range\",\n  children,\n  ...props\n}: TimeRangeContentProps) {\n  const { labelId } = useTimeRange(\"TimeRangeContent\");\n\n  return (\n    <PopoverContent\n      data-slot=\"time-range-content\"\n      aria-labelledby={labelId}\n      align=\"start\"\n      className={cn(\"w-auto max-w-[min(38rem,calc(100vw-2rem))] p-0\", className)}\n      {...props}\n    >\n      <h2 id={labelId} className=\"sr-only\">\n        {label}\n      </h2>\n      <div className=\"flex flex-col gap-0 sm:flex-row sm:items-stretch\">{children}</div>\n    </PopoverContent>\n  );\n}\n\n/**\n * The named ranges, which is how most of these are actually used. Buttons\n * rather than a radiogroup: choosing one both selects and dismisses, which is a\n * command, and `aria-pressed` still carries which one matches.\n */\nexport function TimeRangePresets({\n  className,\n  ...props\n}: Omit<ComponentPropsWithRef<\"div\">, \"children\">) {\n  const { presets, value, setValue, close } = useTimeRange(\"TimeRangePresets\");\n\n  const groups = useMemo(() => {\n    const collected = new Map<string, TimeRangePreset[]>();\n    for (const preset of presets) {\n      const existing = collected.get(preset.group);\n      if (existing) existing.push(preset);\n      else collected.set(preset.group, [preset]);\n    }\n    return [...collected];\n  }, [presets]);\n\n  return (\n    <div\n      data-slot=\"time-range-presets\"\n      className={cn(\n        \"max-h-80 min-w-52 overflow-y-auto border-border p-1.5 sm:border-e\",\n        className,\n      )}\n      {...props}\n    >\n      {groups.map(([group, items]) => (\n        <div key={group} role=\"group\" aria-label={group} className=\"pb-1 last:pb-0\">\n          <p className=\"px-2 py-1 text-2xs font-medium tracking-wide text-muted-foreground uppercase\">\n            {group}\n          </p>\n          {items.map((preset) => (\n            <button\n              key={preset.expression}\n              type=\"button\"\n              aria-pressed={preset.expression === value}\n              onClick={() => {\n                setValue(preset.expression);\n                close();\n              }}\n              className={cn(\n                \"flex w-full items-center rounded-md px-2 py-1.5 text-start text-sm transition-colors\",\n                preset.expression === value\n                  ? \"bg-accent font-medium text-accent-foreground\"\n                  : \"hover:bg-accent hover:text-accent-foreground\",\n                focusRing,\n              )}\n            >\n              {preset.label}\n            </button>\n          ))}\n        </div>\n      ))}\n    </div>\n  );\n}\n\n/**\n * Raw expression entry, with the resolved window shown as you type — the escape\n * hatch that keeps the presets from being a ceiling.\n *\n * An expression that does not parse says why and is not applied: a chart\n * quietly re-scoping itself to a window nobody asked for is worse than one that\n * refuses.\n */\nexport function TimeRangeExpression({\n  className,\n  ...props\n}: Omit<ComponentPropsWithRef<\"div\">, \"children\">) {\n  const { value, setValue, now, timeZone, locale, clockReady, close } =\n    useTimeRange(\"TimeRangeExpression\");\n\n  const [draft, setDraft] = useState(value);\n  // The expression can change under the input — a preset click, or the\n  // consumer setting it. Adjusting during render rather than in an effect keeps\n  // the field from showing a stale value for a frame.\n  const [lastValue, setLastValue] = useState(value);\n  if (value !== lastValue) {\n    setLastValue(value);\n    setDraft(value);\n  }\n\n  const feedbackId = useId();\n  const preview = useMemo(() => {\n    // Before the clock is known there is nothing to preview and nothing to\n    // reject — saying \"invalid\" here would be a verdict reached without a fact.\n    if (!clockReady) return { text: null, error: null as string | null };\n    try {\n      return {\n        text: formatResolvedRange(resolveTimeRange(draft, { now, timeZone }), {\n          locale,\n          timeZone,\n        }),\n        error: null as string | null,\n      };\n    } catch (thrown) {\n      return {\n        text: null,\n        error: thrown instanceof TimeExpressionError ? thrown.message : \"Invalid time range.\",\n      };\n    }\n  }, [draft, now, timeZone, locale, clockReady]);\n\n  const apply = () => {\n    if (preview.error || !clockReady) return;\n    setValue(draft.trim());\n    close();\n  };\n\n  return (\n    <div\n      data-slot=\"time-range-expression\"\n      className={cn(\n        \"flex flex-col gap-1.5 border-t border-border p-3 sm:border-t-0\",\n        className,\n      )}\n      {...props}\n    >\n      <label htmlFor={feedbackId + \"-input\"} className=\"text-xs font-medium\">\n        Expression\n      </label>\n      <div className=\"flex gap-2\">\n        <Input\n          id={feedbackId + \"-input\"}\n          inputSize=\"sm\"\n          value={draft}\n          spellCheck={false}\n          autoComplete=\"off\"\n          aria-invalid={preview.error ? true : undefined}\n          aria-describedby={feedbackId}\n          onChange={(event) => {\n            setDraft(event.target.value);\n          }}\n          onKeyDown={(event) => {\n            if (event.key === \"Enter\") {\n              event.preventDefault();\n              apply();\n            }\n          }}\n          className=\"font-mono\"\n        />\n        <Button size=\"sm\" onClick={apply} disabled={Boolean(preview.error) || !clockReady}>\n          Apply\n        </Button>\n      </div>\n      {/* One element for both outcomes, so a screen reader hears the error\n          replace the preview rather than accumulating two descriptions. */}\n      <p\n        id={feedbackId}\n        className={cn(\n          \"min-h-4 text-2xs\",\n          preview.error ? \"text-destructive\" : \"text-muted-foreground\",\n        )}\n      >\n        {preview.error ?? preview.text}\n      </p>\n    </div>\n  );\n}\n\n/**\n * The absolute path, for a window with no relative meaning. Picking dates\n * writes a concrete expression: \"1 to 7 March\" does not become relative just\n * because it was chosen here.\n */\nexport function TimeRangeCalendar({\n  className,\n  numberOfMonths = 1,\n  ...props\n}: Omit<ComponentPropsWithRef<\"div\">, \"children\"> & { numberOfMonths?: number }) {\n  const { setValue, resolved, close } = useTimeRange(\"TimeRangeCalendar\");\n\n  const [selection, setSelection] = useState<DateRange | undefined>(() =>\n    resolved ? { from: resolved.from, to: resolved.to } : undefined,\n  );\n\n  return (\n    <div\n      data-slot=\"time-range-calendar\"\n      className={cn(\"border-t border-border p-1 sm:border-s sm:border-t-0\", className)}\n      {...props}\n    >\n      <Calendar\n        mode=\"range\"\n        selected={selection}\n        defaultMonth={selection?.from}\n        numberOfMonths={numberOfMonths}\n        onSelect={(next) => {\n          setSelection(next);\n          // Only once both ends exist. One click is half an answer, and\n          // applying it would show a zero-length range mid-gesture.\n          if (next?.from && next.to) {\n            setValue(absoluteExpression(startOfDay(next.from), endOfDay(next.to)));\n            close();\n          }\n        }}\n      />\n    </div>\n  );\n}\n\nfunction startOfDay(date: Date): Date {\n  const start = new Date(date);\n  start.setHours(0, 0, 0, 0);\n  return start;\n}\n\n/**\n * A day picked as the end of a range means the whole of that day. Taking\n * midnight instead silently drops the last day's data, which is the same\n * off-by-one that `now/d..now/d` has to avoid.\n */\nfunction endOfDay(date: Date): Date {\n  const end = new Date(date);\n  end.setHours(23, 59, 59, 999);\n  return end;\n}\n"],"mappings":"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"}

package/dist/components/time-stack/index.d.ts

@@ -0,0 +1,2 @@
+import { TimeStack, TimeStackItem, TimeStackProps, timeStackVariants } from "./time-stack.js";
+export { TimeStack, type TimeStackItem, type TimeStackProps, timeStackVariants };

package/dist/components/time-stack/index.js

@@ -0,0 +1,2 @@
+import { TimeStack, timeStackVariants } from "./time-stack.js";
+export { TimeStack, timeStackVariants };

package/dist/components/time-stack/meta.js

@@ -0,0 +1,17 @@
+import { defineMeta } from "../../registry/schema.js";
+//#region src/components/time-stack/meta.ts
+const meta = defineMeta({
+	name: "time-stack",
+	title: "Time Stack",
+	description: "Cards receding in depth, stepped through with a timeline scrubber, the mouse wheel or the arrow keys.",
+	category: "display",
+	status: "beta",
+	dependencies: ["class-variance-authority"],
+	registryDependencies: [],
+	files: ["time-stack.tsx"],
+	a11y: "The scrubber is a vertical role=\"slider\" whose aria-valuetext names the moment (\"1w ago: Forest Trail\"). Newest is at the bottom, so ArrowUp/ArrowRight go back in time as a vertical slider requires; ArrowDown/Left, Page Up/Down, Home and End work too. Only the current card is exposed (a labelled group); the cards behind and before it are inert. Wheel steps are announced through a polite status, and the wheel only captures scrolling while there is a card to step to. Motion stops under reduced motion."
+});
+//#endregion
+export { meta };
+
+//# sourceMappingURL=meta.js.map

package/dist/components/time-stack/meta.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/time-stack/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"time-stack\",\n  title: \"Time Stack\",\n  description:\n    \"Cards receding in depth, stepped through with a timeline scrubber, the mouse wheel or the arrow keys.\",\n  category: \"display\",\n  status: \"beta\",\n  dependencies: [\"class-variance-authority\"],\n  registryDependencies: [],\n  files: [\"time-stack.tsx\"],\n  a11y:\n    'The scrubber is a vertical role=\"slider\" whose aria-valuetext names the moment (\"1w ago: Forest Trail\"). ' +\n    \"Newest is at the bottom, so ArrowUp/ArrowRight go back in time as a vertical slider requires; ArrowDown/Left, \" +\n    \"Page Up/Down, Home and End work too. Only the current card is exposed (a labelled group); the cards behind \" +\n    \"and before it are inert. Wheel steps are announced through a polite status, and the wheel only captures \" +\n    \"scrolling while there is a card to step to. Motion stops under reduced motion.\",\n});\n"],"mappings":";;AAEA,MAAa,OAAO,WAAW;CAC7B,MAAM;CACN,OAAO;CACP,aACE;CACF,UAAU;CACV,QAAQ;CACR,cAAc,CAAC,0BAA0B;CACzC,sBAAsB,CAAC;CACvB,OAAO,CAAC,gBAAgB;CACxB,MACE;AAKJ,CAAC"}

package/dist/components/time-stack/time-stack.d.ts

@@ -0,0 +1,37 @@
+import { VariantProps } from "class-variance-authority";
+import { ComponentPropsWithRef, ReactNode } from "react";
+//#region src/components/time-stack/time-stack.d.ts
+declare const timeStackVariants: (props?: ({
+  size?: "sm" | "md" | "lg" | null | undefined;
+  tone?: "media" | "mono" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+interface TimeStackItem {
+  /** Names the card. */
+  title: string;
+  /** The moment on the timeline: "Today", "1w ago", a date. */
+  label: string;
+  /** Image URL for the card when `tone="media"` and no `content` is given. */
+  image?: string;
+  /** Alternative text for `image`. Defaults to empty: the title names the card. */
+  alt?: string;
+  /** Custom card content. Replaces the image or the numbered tile. */
+  content?: ReactNode;
+}
+interface TimeStackProps extends Omit<ComponentPropsWithRef<"section">, "children">, VariantProps<typeof timeStackVariants> {
+  /** Newest first: index 0 is the front of the stack and the bottom of the timeline. */
+  items: TimeStackItem[];
+  index?: number;
+  defaultIndex?: number;
+  onIndexChange?: (index: number) => void;
+  /** Step through with the mouse wheel over the stack. */
+  wheel?: boolean;
+  /** Select as the pointer moves over the timeline, as in the source, rather than on press. */
+  hoverScrub?: boolean;
+  /** Accessible name of the scrubber. */
+  scrubberLabel?: string;
+}
+/** A depth stack of moments with a timeline scrubber — amicro's Time Machine. */
+declare function TimeStack({ className, items, index: indexProp, defaultIndex, onIndexChange, wheel, hoverScrub, scrubberLabel, size, tone, ref, "aria-label": ariaLabel, ...props }: TimeStackProps): import("react").JSX.Element;
+//#endregion
+export { TimeStack, TimeStackItem, TimeStackProps, timeStackVariants };
+//# sourceMappingURL=time-stack.d.ts.map

package/dist/components/time-stack/time-stack.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"time-stack.d.ts","names":[],"sources":["../../../src/components/time-stack/time-stack.tsx"],"mappings":";;;cAkCM,oBAAiB;;;6CAoBtB;UAEgB;;EAEf;;EAEA;;EAEA;;EAEA;;EAEA,UAAU;;UAGK,uBAEb,KAAK,+CACL,oBAAoB;;EAEtB,OAAO;EACP;EACA;EACA,iBAAiB;;EAEjB;;EAEA;;EAEA;;;iBAsBc,YACd,WACA,OACA,OAAO,WACP,cACA,eACA,OACA,YACA,eACA,MACA,MACA,mBACc,cACX,SACF,iCAAc,IAAA"}

package/dist/components/time-stack/time-stack.js

@@ -0,0 +1,253 @@
+"use client";
+import { focusRing } from "../../lib/styles.js";
+import { cn } from "../../lib/utils.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { Fragment as Fragment$1, useEffect, useId, useRef, useState } from "react";
+//#region src/components/time-stack/time-stack.tsx
+const timeStackVariants = cva("relative flex w-full items-center justify-center gap-6 overflow-hidden rounded-2xl p-4", {
+	variants: {
+		/** Card width. The stack's depth and height derive from it. */
+		size: {
+			sm: "[--ts-card:10rem]",
+			md: "[--ts-card:13.75rem]",
+			lg: "[--ts-card:18rem]"
+		},
+		tone: {
+			media: "",
+			mono: ""
+		}
+	},
+	defaultVariants: {
+		size: "md",
+		tone: "media"
+	}
+});
+/** Placement of one card by its distance from the current one. */
+function cardStyle(offset, count, i) {
+	const past = offset < 0;
+	return {
+		zIndex: count - i,
+		opacity: past ? 0 : Math.max(0, 1 - offset * .2),
+		transform: past ? "translate3d(0, calc(var(--ts-card) * 1.35), calc(var(--ts-card) * 0.9)) rotateX(-20deg) scale(1.3)" : [
+			`translate3d(0, calc(var(--ts-card) * ${String(-offset * .055)}),`,
+			`calc(var(--ts-card) * ${String(-offset * .27)}))`,
+			`rotateX(${String(offset * 2)}deg)`
+		].join(" ")
+	};
+}
+const WHEEL_STEP = 60;
+/** A depth stack of moments with a timeline scrubber — amicro's Time Machine. */
+function TimeStack({ className, items, index: indexProp, defaultIndex = 0, onIndexChange, wheel = true, hoverScrub = false, scrubberLabel = "Timeline", size, tone, ref, "aria-label": ariaLabel, ...props }) {
+	const count = items.length;
+	const last = Math.max(0, count - 1);
+	const clamp = (value) => Math.min(last, Math.max(0, value));
+	const [uncontrolled, setUncontrolled] = useState(() => clamp(defaultIndex));
+	const index = clamp(indexProp ?? uncontrolled);
+	const [hovered, setHovered] = useState(null);
+	const [announcement, setAnnouncement] = useState("");
+	const id = useId();
+	const stackRef = useRef(null);
+	const tickRefs = useRef([]);
+	const pressing = useRef(null);
+	function goTo(next, announce = false) {
+		const target = clamp(next);
+		if (target === index) return;
+		if (indexProp === void 0) setUncontrolled(target);
+		onIndexChange?.(target);
+		const item = items[target];
+		if (announce && item) setAnnouncement(`${item.label}: ${item.title}`);
+	}
+	const goToRef = useRef(goTo);
+	const indexRef = useRef(index);
+	useEffect(() => {
+		goToRef.current = goTo;
+		indexRef.current = index;
+	});
+	useEffect(() => {
+		const stack = stackRef.current;
+		if (!stack || !wheel) return;
+		let accumulated = 0;
+		function onWheel(event) {
+			const direction = Math.sign(event.deltaY);
+			const next = indexRef.current + direction;
+			if (direction === 0 || next < 0 || next > last) return;
+			event.preventDefault();
+			accumulated += event.deltaY;
+			if (Math.abs(accumulated) < WHEEL_STEP) return;
+			accumulated = 0;
+			goToRef.current(next, true);
+		}
+		stack.addEventListener("wheel", onWheel, { passive: false });
+		return () => {
+			stack.removeEventListener("wheel", onWheel);
+		};
+	}, [wheel, last]);
+	function handleKeyDown(event) {
+		const next = {
+			ArrowUp: index + 1,
+			ArrowRight: index + 1,
+			ArrowDown: index - 1,
+			ArrowLeft: index - 1,
+			PageUp: index + 2,
+			PageDown: index - 2,
+			Home: 0,
+			End: last
+		}[event.key];
+		if (next === void 0) return;
+		event.preventDefault();
+		goTo(next);
+	}
+	/** The tick nearest the pointer, by measured geometry. */
+	function nearest(clientY) {
+		let best = null;
+		let distance = Infinity;
+		tickRefs.current.forEach((tick, i) => {
+			if (!tick) return;
+			const rect = tick.getBoundingClientRect();
+			const d = Math.abs(clientY - (rect.top + rect.height / 2));
+			if (d < distance) {
+				distance = d;
+				best = i;
+			}
+		});
+		return best;
+	}
+	function handlePointerDown(event) {
+		if (event.button !== 0) return;
+		pressing.current = event.pointerId;
+		event.currentTarget.setPointerCapture(event.pointerId);
+		const at = nearest(event.clientY);
+		if (at !== null) goTo(at);
+	}
+	function handlePointerMove(event) {
+		const at = nearest(event.clientY);
+		setHovered(at);
+		if (at !== null && (hoverScrub || pressing.current === event.pointerId)) goTo(at);
+	}
+	function release(event) {
+		if (pressing.current !== event.pointerId) return;
+		pressing.current = null;
+		event.currentTarget.releasePointerCapture(event.pointerId);
+	}
+	const current = items[index];
+	const card = cn("grid size-full place-items-center overflow-hidden rounded-2xl border border-border shadow-lg", tone === "mono" ? "bg-muted text-sm font-bold text-muted-foreground" : "bg-card text-card-foreground");
+	return /* @__PURE__ */ jsxs("section", {
+		ref,
+		"data-slot": "time-stack",
+		"aria-roledescription": "time stack",
+		"aria-label": ariaLabel ?? (props["aria-labelledby"] ? void 0 : "Time stack"),
+		className: cn(timeStackVariants({
+			size,
+			tone
+		}), className),
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				ref: stackRef,
+				id: `${id}-stack`,
+				"data-slot": "time-stack-stack",
+				className: "relative grid flex-1 place-items-center",
+				style: {
+					maxWidth: "calc(var(--ts-card) * 1.32)",
+					aspectRatio: "4 / 3",
+					perspective: "calc(var(--ts-card) * 3.6)",
+					transformStyle: "preserve-3d"
+				},
+				children: items.map((item, i) => {
+					const offset = i - index;
+					const isCurrent = offset === 0;
+					return /* @__PURE__ */ jsx("div", {
+						role: isCurrent ? "group" : void 0,
+						"aria-roledescription": isCurrent ? "slide" : void 0,
+						"aria-label": isCurrent ? `${item.label}: ${item.title}` : void 0,
+						"aria-hidden": isCurrent ? void 0 : true,
+						inert: !isCurrent,
+						"data-slot": "time-stack-card",
+						"data-state": offset < 0 ? "past" : isCurrent ? "current" : "future",
+						className: cn("col-start-1 row-start-1 origin-center will-change-transform", "transition-[transform,opacity] duration-[var(--duration-slower)] ease-[var(--ease-out-quint)]"),
+						style: {
+							width: "var(--ts-card)",
+							aspectRatio: "220 / 135",
+							...cardStyle(offset, count, i)
+						},
+						children: /* @__PURE__ */ jsx("div", {
+							className: card,
+							children: item.content ?? (tone !== "mono" && item.image ? /* @__PURE__ */ jsx("img", {
+								src: item.image,
+								alt: item.alt ?? "",
+								draggable: false,
+								className: "size-full object-cover"
+							}) : /* @__PURE__ */ jsx("span", {
+								"aria-hidden": "true",
+								children: i + 1
+							}))
+						})
+					}, i);
+				})
+			}),
+			/* @__PURE__ */ jsx("div", {
+				role: "slider",
+				tabIndex: 0,
+				"aria-label": scrubberLabel,
+				"aria-orientation": "vertical",
+				"aria-valuemin": 0,
+				"aria-valuemax": last,
+				"aria-valuenow": index,
+				"aria-valuetext": current ? `${current.label}: ${current.title}` : void 0,
+				"aria-controls": `${id}-stack`,
+				"data-slot": "time-stack-scrubber",
+				className: cn("group/scrub relative z-10 flex cursor-pointer touch-none flex-col-reverse items-end rounded-md px-1 py-2 select-none", "[--ts-origin:right] rtl:[--ts-origin:left]", focusRing),
+				onKeyDown: handleKeyDown,
+				onPointerDown: handlePointerDown,
+				onPointerMove: handlePointerMove,
+				onPointerUp: release,
+				onPointerCancel: release,
+				onPointerLeave: () => {
+					setHovered(null);
+				},
+				children: items.map((item, i) => {
+					const selected = i === index;
+					const showLabel = hovered === i || selected && hovered === null;
+					const near = hovered !== null && Math.abs(i - hovered) < 1;
+					return /* @__PURE__ */ jsxs(Fragment$1, { children: [i > 0 ? [0, 1].map((sub) => /* @__PURE__ */ jsx("span", {
+						"aria-hidden": "true",
+						"data-slot": "time-stack-subtick",
+						className: "flex w-20 justify-end py-px",
+						children: /* @__PURE__ */ jsx("span", {
+							className: cn("h-[3px] w-6 rounded-full bg-foreground/20 transition-[scale,opacity] duration-[var(--duration-fast)] ease-[var(--ease-out-quint)]", near ? "scale-x-115 opacity-50" : "opacity-30"),
+							style: { transformOrigin: "var(--ts-origin)" }
+						})
+					}, sub)) : null, /* @__PURE__ */ jsxs("span", {
+						ref: (node) => {
+							tickRefs.current[i] = node;
+						},
+						"aria-hidden": "true",
+						"data-slot": "time-stack-tick",
+						"data-state": selected ? "active" : "inactive",
+						className: "relative flex w-20 items-center justify-end py-px",
+						children: [/* @__PURE__ */ jsx("span", {
+							"data-slot": "time-stack-tick-label",
+							className: cn("absolute end-10 text-[10px] font-semibold whitespace-nowrap", "transition-[opacity,scale,filter] duration-[var(--duration-fast)] ease-[var(--ease-out-quint)]", selected ? "text-primary" : "text-foreground/90", !showLabel && "scale-80 opacity-0 blur-[2px]"),
+							children: item.label
+						}), /* @__PURE__ */ jsx("span", {
+							className: cn("h-[3px] w-6 rounded-full transition-[scale,background-color] duration-[var(--duration-fast)] ease-[var(--ease-overshoot)]", selected ? "bg-primary" : "bg-foreground/50", hovered !== null && (selected ? "scale-x-140" : near ? "scale-x-125" : "")),
+							style: { transformOrigin: "var(--ts-origin)" }
+						})]
+					})] }, i);
+				})
+			}),
+			/* @__PURE__ */ jsx("p", {
+				role: "status",
+				"aria-live": "polite",
+				"aria-atomic": "true",
+				className: "sr-only",
+				children: announcement
+			})
+		]
+	});
+}
+//#endregion
+export { TimeStack, timeStackVariants };
+
+//# sourceMappingURL=time-stack.js.map

package/dist/components/time-stack/time-stack.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"time-stack.js","names":["Fragment"],"sources":["../../../src/components/time-stack/time-stack.tsx"],"sourcesContent":["\"use client\";\n\n// Ported from amicro Time Machine Stack (MIT, © 2026 Syed Subhan Uddin). See THIRD_PARTY_NOTICES.md.\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport {\n  Fragment,\n  useEffect,\n  useId,\n  useRef,\n  useState,\n  type ComponentPropsWithRef,\n  type CSSProperties,\n  type KeyboardEvent,\n  type PointerEvent,\n  type ReactNode,\n} from \"react\";\n\nimport { focusRing } from \"@/lib/styles\";\nimport { cn } from \"@/lib/utils\";\n\n/*\n * Cards recede in depth behind the current one; the ones already passed fall\n * forward and fade. A timeline scrubber at the inline end picks the moment.\n *\n * The scrubber is a vertical role=\"slider\" with the newest entry at the bottom\n * and history rising above it, as in macOS Time Machine — so ArrowUp, which a\n * vertical slider must use to increase, goes back in time and moves the thumb\n * up. amicro stacks the newest at the top; that order would make the keys\n * contradict the picture.\n *\n * Motion is CSS transitions on transform and opacity. The source's gooey SVG\n * filter is dropped: it softened every card edge and could not be themed.\n */\n\nconst timeStackVariants = cva(\n  \"relative flex w-full items-center justify-center gap-6 overflow-hidden rounded-2xl p-4\",\n  {\n    variants: {\n      /** Card width. The stack's depth and height derive from it. */\n      size: {\n        sm: \"[--ts-card:10rem]\",\n        md: \"[--ts-card:13.75rem]\",\n        lg: \"[--ts-card:18rem]\",\n      },\n      tone: {\n        media: \"\",\n        mono: \"\",\n      },\n    },\n    defaultVariants: {\n      size: \"md\",\n      tone: \"media\",\n    },\n  },\n);\n\nexport interface TimeStackItem {\n  /** Names the card. */\n  title: string;\n  /** The moment on the timeline: \"Today\", \"1w ago\", a date. */\n  label: string;\n  /** Image URL for the card when `tone=\"media\"` and no `content` is given. */\n  image?: string;\n  /** Alternative text for `image`. Defaults to empty: the title names the card. */\n  alt?: string;\n  /** Custom card content. Replaces the image or the numbered tile. */\n  content?: ReactNode;\n}\n\nexport interface TimeStackProps\n  extends\n    Omit<ComponentPropsWithRef<\"section\">, \"children\">,\n    VariantProps<typeof timeStackVariants> {\n  /** Newest first: index 0 is the front of the stack and the bottom of the timeline. */\n  items: TimeStackItem[];\n  index?: number;\n  defaultIndex?: number;\n  onIndexChange?: (index: number) => void;\n  /** Step through with the mouse wheel over the stack. */\n  wheel?: boolean;\n  /** Select as the pointer moves over the timeline, as in the source, rather than on press. */\n  hoverScrub?: boolean;\n  /** Accessible name of the scrubber. */\n  scrubberLabel?: string;\n}\n\n/** Placement of one card by its distance from the current one. */\nfunction cardStyle(offset: number, count: number, i: number): CSSProperties {\n  const past = offset < 0;\n  return {\n    zIndex: count - i,\n    opacity: past ? 0 : Math.max(0, 1 - offset * 0.2),\n    transform: past\n      ? \"translate3d(0, calc(var(--ts-card) * 1.35), calc(var(--ts-card) * 0.9)) rotateX(-20deg) scale(1.3)\"\n      : [\n          `translate3d(0, calc(var(--ts-card) * ${String(-offset * 0.055)}),`,\n          `calc(var(--ts-card) * ${String(-offset * 0.27)}))`,\n          `rotateX(${String(offset * 2)}deg)`,\n        ].join(\" \"),\n  };\n}\n\nconst WHEEL_STEP = 60;\n\n/** A depth stack of moments with a timeline scrubber — amicro's Time Machine. */\nexport function TimeStack({\n  className,\n  items,\n  index: indexProp,\n  defaultIndex = 0,\n  onIndexChange,\n  wheel = true,\n  hoverScrub = false,\n  scrubberLabel = \"Timeline\",\n  size,\n  tone,\n  ref,\n  \"aria-label\": ariaLabel,\n  ...props\n}: TimeStackProps) {\n  const count = items.length;\n  const last = Math.max(0, count - 1);\n  const clamp = (value: number) => Math.min(last, Math.max(0, value));\n  const [uncontrolled, setUncontrolled] = useState(() => clamp(defaultIndex));\n  const index = clamp(indexProp ?? uncontrolled);\n  const [hovered, setHovered] = useState<number | null>(null);\n  const [announcement, setAnnouncement] = useState(\"\");\n  const id = useId();\n  const stackRef = useRef<HTMLDivElement>(null);\n  const tickRefs = useRef<(HTMLSpanElement | null)[]>([]);\n  const pressing = useRef<number | null>(null);\n\n  function goTo(next: number, announce = false) {\n    const target = clamp(next);\n    if (target === index) return;\n    if (indexProp === undefined) setUncontrolled(target);\n    onIndexChange?.(target);\n    const item = items[target];\n    if (announce && item) setAnnouncement(`${item.label}: ${item.title}`);\n  }\n\n  // The latest goTo for the native wheel listener, which is bound once.\n  const goToRef = useRef(goTo);\n  const indexRef = useRef(index);\n  useEffect(() => {\n    goToRef.current = goTo;\n    indexRef.current = index;\n  });\n\n  // React's wheel listener is passive and cannot stop the page scrolling, so\n  // bind natively. The page still scrolls once the stack is at either end.\n  useEffect(() => {\n    const stack = stackRef.current;\n    if (!stack || !wheel) return;\n    let accumulated = 0;\n    function onWheel(event: WheelEvent) {\n      const direction = Math.sign(event.deltaY);\n      const next = indexRef.current + direction;\n      if (direction === 0 || next < 0 || next > last) return;\n      event.preventDefault();\n      accumulated += event.deltaY;\n      if (Math.abs(accumulated) < WHEEL_STEP) return;\n      accumulated = 0;\n      goToRef.current(next, true);\n    }\n    stack.addEventListener(\"wheel\", onWheel, { passive: false });\n    return () => {\n      stack.removeEventListener(\"wheel\", onWheel);\n    };\n  }, [wheel, last]);\n\n  function handleKeyDown(event: KeyboardEvent<HTMLDivElement>) {\n    const steps: Record<string, number> = {\n      ArrowUp: index + 1,\n      ArrowRight: index + 1,\n      ArrowDown: index - 1,\n      ArrowLeft: index - 1,\n      PageUp: index + 2,\n      PageDown: index - 2,\n      Home: 0,\n      End: last,\n    };\n    const next = steps[event.key];\n    if (next === undefined) return;\n    event.preventDefault();\n    goTo(next);\n  }\n\n  /** The tick nearest the pointer, by measured geometry. */\n  function nearest(clientY: number) {\n    let best: number | null = null;\n    let distance = Infinity;\n    tickRefs.current.forEach((tick, i) => {\n      if (!tick) return;\n      const rect = tick.getBoundingClientRect();\n      const d = Math.abs(clientY - (rect.top + rect.height / 2));\n      if (d < distance) {\n        distance = d;\n        best = i;\n      }\n    });\n    return best;\n  }\n\n  function handlePointerDown(event: PointerEvent<HTMLDivElement>) {\n    if (event.button !== 0) return;\n    pressing.current = event.pointerId;\n    event.currentTarget.setPointerCapture(event.pointerId);\n    const at = nearest(event.clientY);\n    if (at !== null) goTo(at);\n  }\n\n  function handlePointerMove(event: PointerEvent<HTMLDivElement>) {\n    const at = nearest(event.clientY);\n    setHovered(at);\n    if (at !== null && (hoverScrub || pressing.current === event.pointerId)) goTo(at);\n  }\n\n  function release(event: PointerEvent<HTMLDivElement>) {\n    if (pressing.current !== event.pointerId) return;\n    pressing.current = null;\n    event.currentTarget.releasePointerCapture(event.pointerId);\n  }\n\n  const current = items[index];\n  const card = cn(\n    \"grid size-full place-items-center overflow-hidden rounded-2xl border border-border shadow-lg\",\n    tone === \"mono\"\n      ? \"bg-muted text-sm font-bold text-muted-foreground\"\n      : \"bg-card text-card-foreground\",\n  );\n\n  return (\n    <section\n      ref={ref}\n      data-slot=\"time-stack\"\n      aria-roledescription=\"time stack\"\n      aria-label={ariaLabel ?? (props[\"aria-labelledby\"] ? undefined : \"Time stack\")}\n      className={cn(timeStackVariants({ size, tone }), className)}\n      {...props}\n    >\n      <div\n        ref={stackRef}\n        id={`${id}-stack`}\n        data-slot=\"time-stack-stack\"\n        className=\"relative grid flex-1 place-items-center\"\n        style={{\n          maxWidth: \"calc(var(--ts-card) * 1.32)\",\n          aspectRatio: \"4 / 3\",\n          perspective: \"calc(var(--ts-card) * 3.6)\",\n          transformStyle: \"preserve-3d\",\n        }}\n      >\n        {items.map((item, i) => {\n          const offset = i - index;\n          const isCurrent = offset === 0;\n          return (\n            <div\n              key={i}\n              role={isCurrent ? \"group\" : undefined}\n              aria-roledescription={isCurrent ? \"slide\" : undefined}\n              aria-label={isCurrent ? `${item.label}: ${item.title}` : undefined}\n              aria-hidden={isCurrent ? undefined : true}\n              inert={!isCurrent}\n              data-slot=\"time-stack-card\"\n              data-state={offset < 0 ? \"past\" : isCurrent ? \"current\" : \"future\"}\n              className={cn(\n                \"col-start-1 row-start-1 origin-center will-change-transform\",\n                \"transition-[transform,opacity] duration-[var(--duration-slower)] ease-[var(--ease-out-quint)]\",\n              )}\n              style={{\n                width: \"var(--ts-card)\",\n                aspectRatio: \"220 / 135\",\n                ...cardStyle(offset, count, i),\n              }}\n            >\n              <div className={card}>\n                {item.content ??\n                  (tone !== \"mono\" && item.image ? (\n                    <img\n                      src={item.image}\n                      alt={item.alt ?? \"\"}\n                      draggable={false}\n                      className=\"size-full object-cover\"\n                    />\n                  ) : (\n                    <span aria-hidden=\"true\">{i + 1}</span>\n                  ))}\n              </div>\n            </div>\n          );\n        })}\n      </div>\n\n      <div\n        role=\"slider\"\n        tabIndex={0}\n        aria-label={scrubberLabel}\n        aria-orientation=\"vertical\"\n        aria-valuemin={0}\n        aria-valuemax={last}\n        aria-valuenow={index}\n        aria-valuetext={current ? `${current.label}: ${current.title}` : undefined}\n        aria-controls={`${id}-stack`}\n        data-slot=\"time-stack-scrubber\"\n        className={cn(\n          \"group/scrub relative z-10 flex cursor-pointer touch-none flex-col-reverse items-end rounded-md px-1 py-2 select-none\",\n          \"[--ts-origin:right] rtl:[--ts-origin:left]\",\n          focusRing,\n        )}\n        onKeyDown={handleKeyDown}\n        onPointerDown={handlePointerDown}\n        onPointerMove={handlePointerMove}\n        onPointerUp={release}\n        onPointerCancel={release}\n        onPointerLeave={() => {\n          setHovered(null);\n        }}\n      >\n        {items.map((item, i) => {\n          const selected = i === index;\n          const showLabel = hovered === i || (selected && hovered === null);\n          const near = hovered !== null && Math.abs(i - hovered) < 1;\n          return (\n            <Fragment key={i}>\n              {i > 0\n                ? [0, 1].map((sub) => (\n                    <span\n                      key={sub}\n                      aria-hidden=\"true\"\n                      data-slot=\"time-stack-subtick\"\n                      className=\"flex w-20 justify-end py-px\"\n                    >\n                      <span\n                        className={cn(\n                          \"h-[3px] w-6 rounded-full bg-foreground/20 transition-[scale,opacity] duration-[var(--duration-fast)] ease-[var(--ease-out-quint)]\",\n                          near ? \"scale-x-115 opacity-50\" : \"opacity-30\",\n                        )}\n                        style={{ transformOrigin: \"var(--ts-origin)\" }}\n                      />\n                    </span>\n                  ))\n                : null}\n              <span\n                ref={(node) => {\n                  tickRefs.current[i] = node;\n                }}\n                aria-hidden=\"true\"\n                data-slot=\"time-stack-tick\"\n                data-state={selected ? \"active\" : \"inactive\"}\n                className=\"relative flex w-20 items-center justify-end py-px\"\n              >\n                <span\n                  data-slot=\"time-stack-tick-label\"\n                  className={cn(\n                    \"absolute end-10 text-[10px] font-semibold whitespace-nowrap\",\n                    \"transition-[opacity,scale,filter] duration-[var(--duration-fast)] ease-[var(--ease-out-quint)]\",\n                    selected ? \"text-primary\" : \"text-foreground/90\",\n                    !showLabel && \"scale-80 opacity-0 blur-[2px]\",\n                  )}\n                >\n                  {item.label}\n                </span>\n                <span\n                  className={cn(\n                    \"h-[3px] w-6 rounded-full transition-[scale,background-color] duration-[var(--duration-fast)] ease-[var(--ease-overshoot)]\",\n                    selected ? \"bg-primary\" : \"bg-foreground/50\",\n                    hovered !== null && (selected ? \"scale-x-140\" : near ? \"scale-x-125\" : \"\"),\n                  )}\n                  style={{ transformOrigin: \"var(--ts-origin)\" }}\n                />\n              </span>\n            </Fragment>\n          );\n        })}\n      </div>\n\n      <p role=\"status\" aria-live=\"polite\" aria-atomic=\"true\" className=\"sr-only\">\n        {announcement}\n      </p>\n    </section>\n  );\n}\n\nexport { timeStackVariants };\n"],"mappings":"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"}

package/dist/components/toast/meta.js

@@ -9,7 +9,7 @@ const meta = defineMeta({
 	dependencies: ["class-variance-authority", "radix-ui"],
 	registryDependencies: [],
 	files: ["toast-store.ts", "toast.tsx"],
-	a11y: "Toasts are announced through a live region: destructive and warning variants interrupt (foreground), the rest wait for a pause (background). Auto-dismiss timers pause on hover, focus and window blur, and F8 moves focus into the toast list from anywhere. An action must carry altText describing how to do the same thing without the toast, since it may be gone before a screen reader user reaches it."
+	a11y: "Toasts are announced through a live region: destructive and warning variants interrupt (foreground), the rest wait for a pause (background). Auto-dismiss timers pause on hover, focus and window blur, and F8 moves focus into the toast list from anywhere. An action must carry altText describing how to do the same thing without the toast, since it may be gone before a screen reader user reaches it. The optional spring entrance stops under reduced motion."
 });
 //#endregion
 export { meta };

package/dist/components/toast/meta.js.map

@@ -1 +1 @@
-{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/toast/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"toast\",\n  title: \"Toast\",\n  description: \"Brief, non-blocking messages with an imperative API callable from anywhere.\",\n  category: \"feedback\",\n  status: \"stable\",\n  dependencies: [\"class-variance-authority\", \"radix-ui\"],\n  registryDependencies: [],\n  files: [\"toast-store.ts\", \"toast.tsx\"],\n  a11y:\n    \"Toasts are announced through a live region: destructive and warning variants interrupt \" +\n    \"(foreground), the rest wait for a pause (background). Auto-dismiss timers pause on hover, \" +\n    \"focus and window blur, and F8 moves focus into the toast list from anywhere. An action \" +\n    \"must carry altText describing how to do the same thing without the toast, since it may \" +\n    \"be gone before a screen reader user reaches it.\",\n});\n"],"mappings":";;AAEA,MAAa,OAAO,WAAW;CAC7B,MAAM;CACN,OAAO;CACP,aAAa;CACb,UAAU;CACV,QAAQ;CACR,cAAc,CAAC,4BAA4B,UAAU;CACrD,sBAAsB,CAAC;CACvB,OAAO,CAAC,kBAAkB,WAAW;CACrC,MACE;AAKJ,CAAC"}
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/toast/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"toast\",\n  title: \"Toast\",\n  description: \"Brief, non-blocking messages with an imperative API callable from anywhere.\",\n  category: \"feedback\",\n  status: \"stable\",\n  dependencies: [\"class-variance-authority\", \"radix-ui\"],\n  registryDependencies: [],\n  files: [\"toast-store.ts\", \"toast.tsx\"],\n  a11y:\n    \"Toasts are announced through a live region: destructive and warning variants interrupt \" +\n    \"(foreground), the rest wait for a pause (background). Auto-dismiss timers pause on hover, \" +\n    \"focus and window blur, and F8 moves focus into the toast list from anywhere. An action \" +\n    \"must carry altText describing how to do the same thing without the toast, since it may \" +\n    \"be gone before a screen reader user reaches it. The optional spring entrance stops under \" +\n    \"reduced motion.\",\n});\n"],"mappings":";;AAEA,MAAa,OAAO,WAAW;CAC7B,MAAM;CACN,OAAO;CACP,aAAa;CACb,UAAU;CACV,QAAQ;CACR,cAAc,CAAC,4BAA4B,UAAU;CACrD,sBAAsB,CAAC;CACvB,OAAO,CAAC,kBAAkB,WAAW;CACrC,MACE;AAMJ,CAAC"}

package/dist/components/toast/toast.d.ts

@@ -12,11 +12,18 @@ import { ComponentPropsWithRef } from "react";
  * toast list from anywhere on the page.
  */
 declare const toastVariants: (props?: ({
-  variant?: "success" | "warning" | "destructive" | "default" | "info" | null | undefined;
+  variant?: "default" | "success" | "warning" | "destructive" | "info" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare const ToastProvider: import("react").FC<Toast.ToastProviderProps>;
-interface ToastProps extends ComponentPropsWithRef<typeof Toast.Root>, VariantProps<typeof toastVariants> {}
-declare function Toast$1({ className, variant, ...props }: ToastProps): import("react").JSX.Element;
+interface ToastProps extends ComponentPropsWithRef<typeof Toast.Root>, VariantProps<typeof toastVariants> {
+  /**
+   * How the toast enters. `default` slides in from off-screen. `spring` hops a
+   * short way in from the docked edge with a scale pop and a slight overshoot.
+   * Both leave, and swipe away, the same way. Stops under reduced motion.
+   */
+  animation?: "default" | "spring";
+}
+declare function Toast$1({ className, variant, animation, ...props }: ToastProps): import("react").JSX.Element;
 declare function ToastTitle({ className, ...props }: ComponentPropsWithRef<typeof Toast.Title>): import("react").JSX.Element;
 declare function ToastDescription({ className, ...props }: ComponentPropsWithRef<typeof Toast.Description>): import("react").JSX.Element;
 declare function ToastAction({ className, ...props }: ComponentPropsWithRef<typeof Toast.Action>): import("react").JSX.Element;
@@ -29,11 +36,13 @@ interface ToasterProps {
   className?: string;
   /** Names the toast region for assistive technology. */
   label?: string;
+  /** How toasts enter. See `Toast`'s `animation`. */
+  animation?: "default" | "spring";
 }
 /**
  * Renders the toast queue. Mount once, near the root of the application.
  */
-declare function Toaster({ position, duration, className, label }: ToasterProps): import("react").JSX.Element;
+declare function Toaster({ position, duration, className, label, animation }: ToasterProps): import("react").JSX.Element;
 //#endregion
 export { Toast$1 as Toast, ToastAction, ToastClose, ToastDescription, ToastPosition, ToastProps, ToastProvider, ToastTitle, Toaster, ToasterProps, toastVariants };
 //# sourceMappingURL=toast.d.ts.map

package/dist/components/toast/toast.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"toast.d.ts","names":[],"sources":["../../../src/components/toast/toast.tsx"],"mappings":";;;;;;;;;;;;;cA2BM,gBAAa;;6CAyBlB;cAEY,+BAAa,GAAA,MAAA;UAET,mBAEb,6BAA6B,MAAe,OAC5C,oBAAoB;iBAER,UAAQ,WAAW,YAAY,SAAS,6BAAU,IAAA;iBAUlD,aACd,cACG,SACF,6BAA6B,MAAe,yBAAM,IAAA;iBAUrC,mBACd,cACG,SACF,6BAA6B,MAAe,+BAAY,IAAA;iBAU3C,cACd,cACG,SACF,6BAA6B,MAAe,0BAAO,IAAA;iBAetC,aACd,cACG,SACF,6BAA6B,MAAe,yBAAM,IAAA;KAyBzC;UAYK;EACf,WAAW;;EAEX;EACA;;EAEA;;;;;iBAMc,UACd,UACA,UACA,WACA,SACC,+BAAY,IAAA"}
+{"version":3,"file":"toast.d.ts","names":[],"sources":["../../../src/components/toast/toast.tsx"],"mappings":";;;;;;;;;;;;;cA4BM,gBAAa;;6CAyBlB;cAEY,+BAAa,GAAA,MAAA;UAYT,mBAEb,6BAA6B,MAAe,OAC5C,oBAAoB;;;;;;EAMtB;;iBAGc,UAAQ,WAAW,SAAS,cAA0B,SAAS,6BAAU,IAAA;iBA6BzE,aACd,cACG,SACF,6BAA6B,MAAe,yBAAM,IAAA;iBAUrC,mBACd,cACG,SACF,6BAA6B,MAAe,+BAAY,IAAA;iBAU3C,cACd,cACG,SACF,6BAA6B,MAAe,0BAAO,IAAA;iBAetC,aACd,cACG,SACF,6BAA6B,MAAe,yBAAM,IAAA;KAyBzC;UA8BK;EACf,WAAW;;EAEX;EACA;;EAEA;;EAEA;;;;;iBAMc,UACd,UACA,UACA,WACA,OACA,aACC,+BAAY,IAAA"}