Spool

1"use client"
2 
3import * as React from "react"
4 
5import { cn } from "@/lib/utils"
6import { useSpring, type SpringOptions } from "@/registry/lib/use-spring"
7 
8export interface SpoolProps extends Omit<
9  React.ComponentProps<"div">,
10  "children"
11> {
12  /** Which state is showing. */
13  value: string
14  /** One entry per state. Whatever is not `value` is not in the DOM. */
15  children: React.ReactNode
16  /** How the shape travels between states. */
17  spring?: SpringOptions
18  /** Corner radius in pixels. Kept circular through the morph. */
19  radius?: number
20  /** Milliseconds the outgoing state stays mounted for. */
21  fade?: number
22}
23 
24export interface SpoolItemProps extends React.ComponentProps<"div"> {
25  /** Matches the `value` on the parent. */
26  value: string
27}
28 
29/** Milliseconds the outgoing state takes to leave. */
30const EXIT_MS = 120
31/** Milliseconds a piece takes to arrive once the old state has gone. */
32const ENTER_MS = 170
33/** Milliseconds between one piece landing and the next. */
34const STAGGER_MS = 45
35 
36/**
37 * One state's contents. Sized by whatever is inside it: the shape follows the
38 * content rather than the content being poured into a shape.
39 */
40export function SpoolItem({
41  value: _value,
42  className,
43  ...props
44}: SpoolItemProps) {
45  return (
46    <div
47      data-slot="spool-item"
48      className={cn("flex items-center gap-2.5 px-4 py-2.5", className)}
49      {...props}
50    />
51  )
52}
53 
54function findItem(children: React.ReactNode, value: string) {
55  let found: React.ReactElement<SpoolItemProps> | null = null
56 
57  React.Children.forEach(children, (child) => {
58    if (
59      !found &&
60      React.isValidElement<SpoolItemProps>(child) &&
61      child.props.value === value
62    ) {
63      found = child
64    }
65  })
66 
67  return found as React.ReactElement<SpoolItemProps> | null
68}
69 
70/**
71 * A shape that changes to fit what it holds.
72 *
73 * The size is never animated. The box is set once, in the commit that swaps the
74 * contents, and the difference replays as a transform: start at the ratio
75 * between old and new, spring to 1. Layout runs once per change.
76 */
77export function Spool({
78  value,
79  children,
80  spring,
81  radius = 999,
82  fade = 200,
83  className,
84  style,
85  ...props
86}: SpoolProps) {
87  const rootRef = React.useRef<HTMLDivElement>(null)
88  const wrapRef = React.useRef<HTMLDivElement>(null)
89  // The root is never laid out at its animated size, so its own offset box is
90  // always the natural size of the contents. That is what makes a remeasure
91// … truncated