61: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/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 62: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/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 63:T36ee,import { useEffect, useId, useRef, useState, type KeyboardEvent, type ReactNode } from "react"; import { motion, useReducedMotion } from "framer-motion"; /* ---------- Content: edit the tabs here ---------- */ const underlineTabs = [ { label: "Overview", body: "Fernleigh Ledger keeps every invoice, receipt and payout in one searchable place. Most teams finish setup in an afternoon." }, { label: "Integrations", body: "Connect your bank feeds, payroll and storefront. Transactions arrive overnight and are matched to open invoices automatically." }, { label: "Billing", body: "You are on the Team plan, billed yearly. Your next renewal is on 14 March for $1,140 across six seats." }, { label: "Activity", body: "Priya approved three expense reports and Tomasz exported the Q3 profit and loss statement this morning." }, ]; const segmentTabs = [ { label: "Day", value: "$2,480", note: "Revenue today, up from $2,110 yesterday" }, { label: "Week", value: "$16,920", note: "Revenue this week across 412 orders" }, { label: "Month", value: "$71,305", note: "Revenue in October so far, 18 days in" }, { label: "Year", value: "$604,770", note: "Revenue since January across all stores" }, ]; const verticalTabs = [ { label: "Profile", title: "Public profile", body: "Your name, photo and short bio appear on shared documents and in comment threads." }, { label: "Security", title: "Sign-in and security", body: "Two-step sign-in is on. You last changed your password 41 days ago from a laptop in Lisbon." }, { label: "Notifications", title: "Email notifications", body: "You get a daily summary at 8:00 and an instant email when someone mentions you." }, { label: "Team", title: "Team members", body: "Six people share this workspace. Two invitations are still waiting to be accepted." }, ]; type IconName = "inbox" | "flag" | "check" | "archive"; const iconTabs: { label: string; icon: IconName; count: number; rows: string[] }[] = [ { label: "Inbox", icon: "inbox", count: 12, rows: ["Refund request from Mara Okafor", "Shipping question on order 4471", "Invoice copy for Hollis & Reed"] }, { label: "Flagged", icon: "flag", count: 3, rows: ["Chargeback opened on order 4390", "Address mismatch on order 4462"] }, { label: "Solved", icon: "check", count: 128, rows: ["Password reset for Dev Kapoor", "Bulk discount for Linden School"] }, { label: "Archive", icon: "archive", count: 0, rows: [] }, ]; /** Preview only: the first two demos step through their tabs until someone touches them. Set to false in your app. */ const DEMO_AUTOPLAY = true; /* ---------- Shared keyboard behaviour (WAI-ARIA tabs pattern) ---------- */ function useTabs(count: number, orientation: "horizontal" | "vertical" = "horizontal", autoplay = false) { const [active, setActive] = useState(0); const [touched, setTouched] = useState(false); const refs = useRef<(HTMLButtonElement | null)[]>([]); const baseId = useId(); const reduce = useReducedMotion(); useEffect(() => { if (!DEMO_AUTOPLAY || !autoplay || touched || reduce) return; const t = window.setInterval(() => setActive((a) => (a + 1) % count), 1400); return () => window.clearInterval(t); }, [autoplay, touched, reduce, count]); const focusTab = (i: number) => { setTouched(true); setActive(i); refs.current[i]?.focus(); }; const onKeyDown = (e: KeyboardEvent) => { const next = orientation === "vertical" ? "ArrowDown" : "ArrowRight"; const prev = orientation === "vertical" ? "ArrowUp" : "ArrowLeft"; let target: number | null = null; if (e.key === next) target = (active + 1) % count; else if (e.key === prev) target = (active - 1 + count) % count; else if (e.key === "Home") target = 0; else if (e.key === "End") target = count - 1; if (target !== null) { e.preventDefault(); focusTab(target); } }; const tabProps = (i: number) => ({ ref: (el: HTMLButtonElement | null) => { refs.current[i] = el; }, id: `${baseId}-tab-${i}`, role: "tab" as const, type: "button" as const, "aria-selected": active === i, "aria-controls": `${baseId}-panel-${i}`, tabIndex: active === i ? 0 : -1, onClick: () => { setTouched(true); setActive(i); }, onFocus: () => setTouched(true), onKeyDown, }); const panelProps = (i: number) => ({ id: `${baseId}-panel-${i}`, role: "tabpanel" as const, "aria-labelledby": `${baseId}-tab-${i}`, tabIndex: 0, hidden: active !== i, }); return { active, tabProps, panelProps, layoutKey: baseId }; } function useSpring() { const reduce = useReducedMotion(); return reduce ? { duration: 0 } : { type: "spring" as const, stiffness: 520, damping: 40, mass: 0.9 }; } /* ---------- Variant 1: underline with sliding indicator ---------- */ function UnderlineTabs() { const { active, tabProps, panelProps, layoutKey } = useTabs(underlineTabs.length, "horizontal", true); const spring = useSpring(); return (

{underlineTabs.map((t, i) => ( ))}

{underlineTabs.map((t, i) => (

{t.body}

))}

); } /* ---------- Variant 2: pill / segmented control ---------- */ function SegmentedTabs() { const { active, tabProps, panelProps, layoutKey } = useTabs(segmentTabs.length, "horizontal", true); const spring = useSpring(); return (

{segmentTabs.map((t, i) => ( ))}

{segmentTabs.map((t, i) => (

{t.value}

{t.note}

))}

); } /* ---------- Variant 3: vertical ---------- */ function VerticalTabs() { const { active, tabProps, panelProps, layoutKey } = useTabs(verticalTabs.length, "vertical"); const spring = useSpring(); return (

{verticalTabs.map((t, i) => ( ))}

{verticalTabs.map((t, i) => (

{t.title}

{t.body}

))}

); } /* ---------- Variant 4: icons and counts ---------- */ function Icon({ name }: { name: IconName }) { const paths: Record = { inbox: , flag: , check: , archive: , }; return ( ); } function IconCountTabs() { const { active, tabProps, panelProps, layoutKey } = useTabs(iconTabs.length); const spring = useSpring(); return (

{iconTabs.map((t, i) => ( ))}

{iconTabs.map((t, i) => (

{t.rows.length ? (

) : (

Nothing archived yet. Closed conversations move here after 30 days.

)}

))}

); } /* ---------- Showcase ---------- */ function Card({ title, dark, children }: { title: string; dark?: boolean; children: ReactNode }) { return (

{title}

{children}

); } export default function ReactTabsVariants() { return (

); } 60:["$","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","framer-motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/framer-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":"framer-motion"}]]}]}]]}],["$","$L61",null,{"namespace":"@weinc","registryDependencies":[]}]]}],null]}],["$","$L62",null,{"files":[{"path":"components/we-inc/react-tabs-with-sliding-underline-segmented-pills-vertical-and-icon-count-variants.tsx","content":"$63","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]