4d:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"RegistryDependencies"] 4e:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"FilesView"] 4f:T23a9,"use client"; import { Archive, type LucideIcon, Megaphone, MessageSquareText, ShoppingCart, UserRound, } from "lucide-react"; import { motion, useReducedMotion } from "motion/react"; import { type ComponentPropsWithoutRef, type KeyboardEvent, useLayoutEffect, useRef, useState, } from "react"; import { cn } from "@/lib/utils"; export type AppleMailTab = { activeClassName?: string; disabled?: boolean; icon: LucideIcon; label: string; value: T; }; export type AppleMailTabsProps = Omit< ComponentPropsWithoutRef<"div">, "defaultValue" | "onChange" > & { activeTabClassName?: string; "aria-label"?: string; defaultValue?: T; onValueChange?: (value: T) => void; tabClassName?: string; tabs?: readonly AppleMailTab[]; value?: T; }; export const appleMailTabs = [ { activeClassName: "bg-[#0a84ff] text-white", icon: UserRound, label: "Primary", value: "primary", }, { activeClassName: "bg-[#30d158] text-[#09280f]", icon: ShoppingCart, label: "Transactions", value: "transactions", }, { activeClassName: "bg-[#bf5af2] text-white", icon: MessageSquareText, label: "Updates", value: "updates", }, { activeClassName: "bg-[#ff9f0a] text-[#2b1900]", icon: Megaphone, label: "Promotions", value: "promotions", }, { activeClassName: "bg-[#ff375f] text-white", icon: Archive, label: "All Mail", value: "all-mail", }, ] as const satisfies readonly AppleMailTab[]; export type AppleMailTabValue = (typeof appleMailTabs)[number]["value"]; const CLOSED_WIDTH = 102; const ICON_SIZE = 28; const CONTENT_GAP = 14; const ICON_CENTER = CLOSED_WIDTH / 2; const LABEL_LEFT = ICON_CENTER + ICON_SIZE / 2 + CONTENT_GAP; const PILL_TRANSITION = { type: "spring", stiffness: 420, damping: 36, mass: 0.8, } as const; const LABEL_TRANSITION = { duration: 0.22, ease: [0.23, 1, 0.32, 1], } as const; function getInitialValue(tabs: readonly AppleMailTab[], defaultValue?: T) { if (defaultValue && tabs.some((tab) => tab.value === defaultValue && !tab.disabled)) { return defaultValue; } return tabs.find((tab) => !tab.disabled)?.value; } export function AppleMailTabs({ "aria-label": ariaLabel = "Mail categories", activeTabClassName, className, defaultValue, onValueChange, tabClassName, tabs = appleMailTabs as unknown as readonly AppleMailTab[], value, ...props }: AppleMailTabsProps) { const reduceMotion = useReducedMotion(); const [uncontrolledValue, setUncontrolledValue] = useState(() => getInitialValue(tabs, defaultValue ?? ("updates" as T)), ); const labelRefs = useRef(new Map()); const [labelWidths, setLabelWidths] = useState>(() => new Map()); // Re-measure labels when callers replace the tab definitions. // biome-ignore lint/correctness/useExhaustiveDependencies: The rendered labels change with tabs. useLayoutEffect(() => { const widths = new Map(); labelRefs.current.forEach((element, key) => { widths.set(key, element.getBoundingClientRect().width); }); setLabelWidths(widths); }, [tabs]); const selectedValue = value ?? uncontrolledValue; const selectedTab = tabs.find((tab) => tab.value === selectedValue && !tab.disabled) ?? tabs.find((tab) => !tab.disabled); if (!tabs.length) { return null; } function selectTab(tab: AppleMailTab) { if (tab.disabled || tab.value === selectedTab?.value) { return; } if (value === undefined) { setUncontrolledValue(tab.value); } onValueChange?.(tab.value); } function handleKeyDown(event: KeyboardEvent, tabIndex: number) { if (!["ArrowLeft", "ArrowRight", "Home", "End"].includes(event.key)) { return; } event.preventDefault(); const enabledIndexes = tabs.reduce((indexes, tab, index) => { if (!tab.disabled) { indexes.push(index); } return indexes; }, []); if (!enabledIndexes.length) { return; } const currentPosition = enabledIndexes.indexOf(tabIndex); let nextIndex = enabledIndexes[0]; if (event.key === "Home") { nextIndex = enabledIndexes[0]; } if (event.key === "End") { nextIndex = enabledIndexes.at(-1) ?? enabledIndexes[0]; } if (event.key === "ArrowLeft") { nextIndex = enabledIndexes[(currentPosition - 1 + enabledIndexes.length) % enabledIndexes.length]; } if (event.key === "ArrowRight") { nextIndex = enabledIndexes[(currentPosition + 1) % enabledIndexes.length]; } const nextTab = tabs[nextIndex]; const nextButton = event.currentTarget.parentElement?.children.item(nextIndex); if (nextTab && nextButton instanceof HTMLButtonElement) { nextButton.focus(); selectTab(nextTab); } } return (

{tabs.map((tab, tabIndex) => { const Icon = tab.icon; const isActive = tab.value === selectedTab?.value; const labelWidth = labelWidths.get(tab.value) ?? 0; const activeWidth = CLOSED_WIDTH + CONTENT_GAP + labelWidth; return ( selectTab(tab)} onKeyDown={(event) => handleKeyDown(event, tabIndex)} className={cn( "relative h-[60px] shrink-0 overflow-hidden rounded-full outline-none", "transition-[background-color,color] duration-200 ease-out", "focus-visible:ring-2", "focus-visible:ring-white/90", "focus-visible:ring-offset-2", "focus-visible:ring-offset-[#1d1d1f]", "disabled:cursor-not-allowed", "disabled:opacity-40", isActive ? "bg-[#817bc5] text-white" : [ "bg-[#28282a] text-[#9b9b9f]", "hover:bg-[#303033]", "hover:text-[#b8b8bc]", "active:bg-[#343437]", ], tabClassName, isActive && tab.activeClassName, isActive && activeTabClassName, )} > { if (element) { labelRefs.current.set(tab.value, element); } else { labelRefs.current.delete(tab.value); } }} aria-hidden={!isActive} initial={false} animate={{ opacity: isActive ? 1 : 0, x: isActive ? 0 : 18, filter: isActive ? "blur(0px)" : "blur(7px)", }} transition={ reduceMotion ? { duration: 0, } : { ...LABEL_TRANSITION, delay: isActive ? 0.04 : 0, } } style={{ left: LABEL_LEFT, }} className=" pointer-events-none absolute inset-y-0 flex items-center whitespace-nowrap text-[26px] font-semibold tracking-[-0.02em] " > {tab.label} ); })}

); } 4c:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}],["$","li","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"motion"}]]}]}]]}],["$","$L4d",null,{"namespace":"@skecher-ui","registryDependencies":[]}]]}],null]}],["$","$L4e",null,{"files":[{"path":"components/ui-components/apple-mail-tabs.tsx","content":"$4f","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]