Fluid components used exclusively in service of functional clarity. Proximity hover, spring animations, font-weight transitions, and animated focus rings.
React context provider for the two-step size ladder (36px default, 28px compact). Controls control heights, text, icon, and padding scale across all Fluid Functionalism components, and exports the role-based typography scale.
Animated slider with spring-snapped thumb, step dots, range mode, and click-to-edit value display. Built on Radix UI Slider.
Animated slider with spring-snapped thumb, step dots, range mode, and click-to-edit value display. Base UI flavor.
Spring animation token presets for Framer Motion (fast, moderate, slow).
Static lookup tables for bg-surface-N and shadow-surface-N utilities. Required because Tailwind v4 cannot detect template-literal class names.
React context that tracks the current substrate elevation level. Elevated components (Dropdown, Select, etc.) read it via useSurface() and render at substrate + offset, then re-provide a new substrate so further nesting elevates further.
Eight-level surface and shadow ladder for elevation. Light: two color steps then flat white, differentiated by shadow. Dark: additive white-opacity ladder with layered inset highlights and drops.
Animated toggle switch with spring-based thumb animation and fluid font-weight label transitions. Built on Radix UI Switch.
Animated toggle switch with spring-based thumb animation and fluid font-weight label transitions. Base UI flavor.
Animated table with fluid hover row highlighting and fluid border transitions. Includes TableHeader, TableBody, TableRow, TableHead, and TableCell sub-components.
Segmented control tabs with sliding active indicator, fluid hover, and spring animations. Built on Radix UI Tabs.
Segmented control tabs with sliding active indicator, fluid hover, and spring animations. Base UI flavor.
Horizontal tab navigation with fluid hover, animated pill selection indicator, and fluid font-weight transitions. Radix flavor.
Horizontal tab navigation with fluid hover, animated pill selection indicator, and fluid font-weight transitions. Base UI flavor.
Animated loading indicator with morphing SVG path (circle to infinity loop) and shimmer text rotation. Cycles through customizable status words.
Collapsible AI reasoning steps with animated expand/collapse, per-step icons, sources, and nested details. Radix flavor.
Collapsible AI reasoning steps with animated expand/collapse, per-step icons, sources, and nested details. Base UI flavor.
Floating tooltip with spring-based animations, configurable placement, and rich content support.
Floating tooltip with spring-based animations, configurable placement, and rich content support. Base UI flavor.
Fluid hover: the hook that tracks the item nearest the cursor within a container, and the one highlight component that springs between the rects it measures.
Gates a popup's keyboard focus ring on keyboard use: seeded at open from the focused element's :focus-visible state, then earned by navigation keys inside the popup.
React hook + renderer for the selected-background merge/split animation. When one row bridges or splits two contiguous selected runs, their inner edges glide together (or apart) and swap to a single block, instead of one block spring-growing over the union.
Detects touch-primary devices (coarse pointer + touch points), updating live on pointer-mode and media-query changes. Adapted from Lina (https://lina.sameer.sh).
Utility function for merging Tailwind CSS classes with clsx and tailwind-merge.