iOS Mail Tabs

1import { cn } from "@/lib/utils";
2import { LucideIcon } from "lucide-react";
3import { AnimatePresence, motion } from "motion/react";
4import * as React from "react";
5 
6// Context for managing selected tab
7interface IosMailTabsContextProps {
8  value: string;
9  setValue: (value: string) => void;
10}
11const IosMailTabsContext = React.createContext<
12  IosMailTabsContextProps | undefined
13>(undefined);
14 
15/**
16 * Custom hook to access IosMailTabs context.
17 * Throws if used outside of <IosMailTabs>.
18 * @example
19 * const { value, setValue } = useIosMailTabs();
20 */
21export function useIosMailTabs(): IosMailTabsContextProps {
22  const ctx = React.useContext(IosMailTabsContext);
23  if (!ctx) throw new Error("useIosMailTabs must be used within <IosMailTabs>");
24  return ctx;
25}
26 
27/**
28 * Root component for iOS-style tabs.
29 * @example
30 * <IosMailTabs defaultValue="primary">
31 *   <IosMailTabsList>
32 *     <IosMailTabsTrigger value="primary" icon={UserRoundIcon} className="bg-sky-600 text-white">
33 *       Primary
34 *     </IosMailTabsTrigger>
35 *   </IosMailTabsList>
36 *   <IosMailTabsContent value="primary">Primary content</IosMailTabsContent>
37 * </IosMailTabs>
38 */
39export function IosMailTabs({
40  defaultValue,
41  value: controlledValue,
42  onValueChange,
43  children,
44  className,
45}: {
46  defaultValue?: string;
47  value?: string;
48  onValueChange?: (value: string) => void;
49  children: React.ReactNode;
50  className?: string;
51}) {
52  const [uncontrolledValue, setUncontrolledValue] = React.useState(
53    defaultValue ?? "",
54  );
55  const isControlled = controlledValue !== undefined;
56  const value = isControlled ? controlledValue : uncontrolledValue;
57  const setValue = React.useCallback(
58    (v: string) => {
59      if (!isControlled) setUncontrolledValue(v);
60      onValueChange?.(v);
61    },
62    [isControlled, onValueChange],
63  );
64 
65  return (
66    <IosMailTabsContext.Provider value={{ value, setValue }}>
67      <div className={cn("flex flex-col gap-2", className)}>{children}</div>
68    </IosMailTabsContext.Provider>
69  );
70}
71 
72/**
73 * List container for iOS-style tab triggers.
74 * @example
75 * <IosMailTabsList>
76 *   <IosMailTabsTrigger value="primary" icon={UserRoundIcon} className="bg-sky-600 text-white">
77 *     Primary
78 *   </IosMailTabsTrigger>
79 * </IosMailTabsList>
80 */
81export function IosMailTabsList({
82  children,
83  className,
84}: {
85  children: React.ReactNode;
86  className?: string;
87}) {
88  return (
89    <div
90      className={cn(
91        "flex flex-row items-center justify-center gap-1.5",
92        className,
93// … truncated