Hover-Expand Icon Strip

1"use client";
2 
3// Hover-expand icon strip - a design-engineered fixed-width row.
4//
5// N icons (3–4) share one fixed-width box. Hovering a panel grows it while the
6// others squeeze to make room, so the row's outer width never changes. The
7// motion is a pure `flex-grow` tween (1 → 5) inside a `flex-basis: 0` row.
8// Keyboard parity: focus-visible expands a panel exactly like hover (motion's
9// whileFocus), so tabbing the strip feels the same as mousing it.
10//
11// The label reveal is deliberately asymmetric: it enters late (a ~90ms delay
12// gives the panel room to open before the text lands, so no crushed clipped word
13// mid-expansion) with opacity + rise + blur, and exits fast with no delay so it
14// ducks out before the shrinking panel squeezes it - each variant carries its
15// own transition. Inspect (blueprint) mode swaps the name for live math.
16//
17// Animation: motion/react (variants propagate hover/focus from the panel to its
18// icon and label). Requires the lab-theme tokens. Fully Tailwind, no CSS files.
19 
20import type { ReactNode } from "react";
21import { motion, MotionConfig, type Variants } from "motion/react";
22 
23const EASE = [0.22, 1, 0.36, 1] as const;
24 
25export interface IconStripItem {
26  label: string;
27  icon: ReactNode;
28}
29 
30const iconVariants: Variants = {
31  rest: { y: 0, transition: { duration: 0.35, ease: EASE } },
32  expanded: { y: "-0.5rem", transition: { duration: 0.35, ease: EASE } },
33};
34 
35const labelVariants: Variants = {
36  rest: {
37    opacity: 0,
38    y: "0.25rem",
39    filter: "blur(3px)",
40    transition: { duration: 0.15, ease: "easeIn" },
41  },
42  expanded: {
43    opacity: 1,
44    y: 0,
45    filter: "blur(0px)",
46    transition: { duration: 0.35, ease: EASE, delay: 0.09 },
47  },
48};
49 
50export default function ExpandingIconStrip({
51  items,
52  width = 320,
53  inspect = false,
54  onSelect,
55}: {
56  items: IconStripItem[];
57  width?: number;
58  inspect?: boolean;
59  onSelect?: (item: IconStripItem) => void;
60}) {
61  return (
62    <MotionConfig reducedMotion="user">
63      <div
64        className={
65          "relative flex gap-2 h-16" +
66          (inspect
67            ? " outline outline-[1.5px] outline-dashed outline-[#3b82f6] outline-offset-[0.375rem] rounded-[0.25rem]"
68            : "")
69        }
70        data-inspect={inspect ? "true" : "false"}
71        style={{ width: `${width}px`, maxWidth: "100%" }}
72      >
73        {items.map((item) => (
74          <motion.button
75            key={item.label}
76            type="button"
77            initial="rest"
78// … truncated