Floating Select

1"use client";
2 
3import * as React from "react";
4import {
5  AnimatePresence,
6  LayoutGroup,
7  motion,
8  useReducedMotion,
9} from "motion/react";
10 
11import { cn } from "@/lib/utils";
12 
13type FloatingSelectOptionBase = {
14  /** What renders for this option. Can be text or any node. */
15  label: React.ReactNode;
16  /** Optional leading node (icon, swatch, etc.) shown before the label. */
17  icon?: React.ReactNode;
18};
19 
20export type FloatingSelectOption = FloatingSelectOptionBase &
21  (
22    | {
23        /** Stable value passed back in callbacks. */
24        value: string;
25        /** @deprecated Use `value`. Kept for compatibility with earlier versions. */
26        id?: string;
27      }
28    | {
29        /** @deprecated Use `value`. Kept for compatibility with earlier versions. */
30        id: string;
31        /** Stable value passed back in callbacks. */
32        value?: string;
33      }
34  );
35 
36export interface FloatingSelectProps {
37  /** The choices revealed when the button is opened. */
38  options: FloatingSelectOption[];
39  /** Trigger label shown before the selected value. */
40  label?: React.ReactNode;
41  /** Optional leading icon for the trigger. */
42  icon?: React.ReactNode;
43  /** Uncontrolled initial selected option value. */
44  defaultValue?: string;
45  /** Controlled selected option value. */
46  value?: string;
47  /** Fires with the selected option whenever it changes. */
48  onValueChange?: (value: string, option: FloatingSelectOption) => void;
49  /** @deprecated Use `onValueChange`. Kept for compatibility with earlier versions. */
50  onChange?: (value: string, option: FloatingSelectOption) => void;
51  /** Close the panel after selecting an option. */
52  closeOnSelect?: boolean;
53  /** Show the selected value next to the trigger label. */
54  showSelectedValue?: boolean;
55  /** Pin the select to the viewport, or render it in normal document flow. */
56  placement?: "fixed" | "inline";
57  /** Pin the select to the top or bottom of the viewport. */
58  position?: "top" | "bottom";
59  /** Horizontal alignment of the floating select. */
60  align?: "start" | "center" | "end";
61  /** Distance from the pinned edge, in pixels. */
62  offset?: number;
63  /** Play the entrance animation on mount. */
64  reveal?: boolean;
65  /** Classes applied to the floating shell. */
66  className?: string;
67  /** Classes applied to the trigger button. */
68  triggerClassName?: string;
69  /** Classes applied to the options panel. */
70  panelClassName?: string;
71}
72 
73const EASE_OUT = [0.22, 1, 0.36, 1] as const;
74// … truncated