51:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"RegistryDependencies"] 52:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"Installation"] 53:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"FilesView"] 54:T2b9b,"use client"; import * as React from "react"; import { AnimatePresence, motion, useReducedMotion, type Transition, } from "motion/react"; import { cn } from "@/lib/utils"; export type ExpandableSegmentedTabsItem = { value: string; label: React.ReactNode; icon: React.ReactNode; disabled?: boolean; ariaLabel?: string; }; export type ExpandableSegmentedTabsProps = Omit< React.ComponentProps<"div">, "defaultValue" | "onChange" > & { items: ExpandableSegmentedTabsItem[]; value?: string; defaultValue?: string; onValueChange?: ( value: string, item: ExpandableSegmentedTabsItem, ) => void; onValueIntent?: ( value: string, item: ExpandableSegmentedTabsItem, ) => void; /** * Preserves the last selected value across unmount/remount for this key, so * route-driven mode switches can still animate from the previous tab. */ transitionKey?: string | null; listClassName?: string; itemClassName?: string; activeItemClassName?: string; iconClassName?: string; labelClassName?: string; indicatorClassName?: string; "aria-label"?: string; }; type FlexTarget = { flexGrow: number; flexShrink: number; flexBasis: string; }; const EXPAND_TRANSITION: Transition = { duration: 0.28, ease: [0.77, 0, 0.175, 1], }; const ACTIVE_FLEX: FlexTarget = { flexGrow: 1, flexShrink: 1, flexBasis: "0px", }; const INACTIVE_FLEX: FlexTarget = { flexGrow: 0, flexShrink: 0, flexBasis: "2.25rem", }; const selectedValueByTransitionKey = new Map(); function getEnabledItems(items: ExpandableSegmentedTabsItem[]) { return items.filter((item) => !item.disabled); } function getSelectableValue( items: ExpandableSegmentedTabsItem[], value: string | undefined, ) { const enabledItems = getEnabledItems(items); return enabledItems.some((item) => item.value === value) ? value : enabledItems[0]?.value; } function getItemByValue( items: ExpandableSegmentedTabsItem[], value: string, ) { return items.find((item) => item.value === value); } export function ExpandableSegmentedTabs({ items, value, defaultValue, onValueChange, onValueIntent, transitionKey, className, listClassName, itemClassName, activeItemClassName, iconClassName, labelClassName, indicatorClassName, "aria-label": ariaLabel = "Options", ...props }: ExpandableSegmentedTabsProps) { const shouldReduceMotion = useReducedMotion(); const isControlled = value !== undefined; const itemRefs = React.useRef(new Map()); const [uncontrolledValue, setUncontrolledValue] = React.useState( () => getSelectableValue(items, defaultValue) ?? "", ); const enabledItems = React.useMemo(() => getEnabledItems(items), [items]); // A controlled `value` is authoritative: it renders as-is, even when it // matches no enabled item (then nothing is active). Silently remapping it to // the first enabled item would show a selection the parent never set, with // no `onValueChange` to tell it. The fallback applies to uncontrolled state // only, where this component owns the value. const selectedValue = isControlled ? (value ?? "") : (getSelectableValue(items, uncontrolledValue) ?? ""); // Roving tabindex still needs exactly one tabbable item, or a controlled // value that matches nothing would make the tablist keyboard-unreachable. const focusableValue = enabledItems.some( (item) => item.value === selectedValue, ) ? selectedValue : enabledItems[0]?.value; const [transitionFromValue] = React.useState(() => { if (!transitionKey) return null; const previousValue = selectedValueByTransitionKey.get(transitionKey); return previousValue && previousValue !== selectedValue && items.some((item) => item.value === previousValue) ? previousValue : null; }); const [exitIndicatorDone, setExitIndicatorDone] = React.useState( transitionFromValue === null, ); React.useEffect(() => { if (!transitionKey || !selectedValue) return; selectedValueByTransitionKey.set(transitionKey, selectedValue); }, [selectedValue, transitionKey]); const setSelectedValue = React.useCallback( (nextValue: string) => { const nextItem = getItemByValue(items, nextValue); if (!nextItem || nextItem.disabled || nextValue === selectedValue) { return; } if (!isControlled) { setUncontrolledValue(nextValue); } onValueChange?.(nextValue, nextItem); }, [isControlled, items, onValueChange, selectedValue], ); const focusItem = React.useCallback((nextValue: string) => { itemRefs.current.get(nextValue)?.focus(); }, []); const handleIntent = React.useCallback( (item: ExpandableSegmentedTabsItem) => { if (item.disabled || item.value === selectedValue) return; onValueIntent?.(item.value, item); }, [onValueIntent, selectedValue], ); const handleKeyDown = React.useCallback( ( event: React.KeyboardEvent, currentValue: string, ) => { if (enabledItems.length === 0) return; const currentIndex = Math.max( enabledItems.findIndex((item) => item.value === currentValue), 0, ); const lastIndex = enabledItems.length - 1; let nextIndex = currentIndex; if (event.key === "ArrowRight" || event.key === "ArrowDown") { nextIndex = currentIndex >= lastIndex ? 0 : currentIndex + 1; } else if (event.key === "ArrowLeft" || event.key === "ArrowUp") { nextIndex = currentIndex <= 0 ? lastIndex : currentIndex - 1; } else if (event.key === "Home") { nextIndex = 0; } else if (event.key === "End") { nextIndex = lastIndex; } else { return; } event.preventDefault(); const nextItem = enabledItems[nextIndex]; if (!nextItem) return; setSelectedValue(nextItem.value); focusItem(nextItem.value); }, [enabledItems, focusItem, setSelectedValue], ); const isMountTransition = transitionFromValue !== null && !exitIndicatorDone && !shouldReduceMotion; const transition = shouldReduceMotion ? { duration: 0 } : EXPAND_TRANSITION; return (

{items.map((item) => { const isActive = item.value === selectedValue; const isFromValue = item.value === transitionFromValue; const animateStyles = isActive ? ACTIVE_FLEX : INACTIVE_FLEX; let initialStyles: FlexTarget | false = false; if (isMountTransition) { if (isActive) { initialStyles = INACTIVE_FLEX; } else if (isFromValue) { initialStyles = ACTIVE_FLEX; } } return ( { if (node) { itemRefs.current.set(item.value, node); } else { itemRefs.current.delete(item.value); } }} type="button" role="tab" aria-selected={isActive} aria-label={item.ariaLabel} disabled={item.disabled} tabIndex={item.value === focusableValue ? 0 : -1} data-slot="expandable-segmented-tabs-item" data-active={isActive ? "" : undefined} initial={initialStyles} animate={animateStyles} transition={transition} whileTap={ item.disabled || shouldReduceMotion ? undefined : { scale: 0.97, transition: { duration: 0.1 } } } onClick={() => setSelectedValue(item.value)} onFocus={() => handleIntent(item)} onPointerEnter={() => handleIntent(item)} onKeyDown={(event) => handleKeyDown(event, item.value)} className={cn( "relative flex h-full min-w-0 items-center justify-start overflow-hidden rounded-lg px-2.5 text-sm font-medium text-muted-foreground outline-none transition-colors hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-45 data-active:text-foreground", itemClassName, isActive && activeItemClassName, )} > {isActive ? ( {isMountTransition && isFromValue ? ( ); })}

); } 4d:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[["$","li","motion",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","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":"text-xs font-medium","children":"motion"}]]}]}]]}],["$","$L51",null,{"registryDependencies":[]}]]}],["$","$L52",null,{"sourceUrl":"https://ui.ericts.com/r/expandable-segmented-tabs.json","proxyUrl":"https://shadcnregistry.com/r/ericts/expandable-segmented-tabs","itemId":"@ericts/expandable-segmented-tabs"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L53",null,{"files":[{"path":"registry/base/ui/expandable-segmented-tabs.tsx","content":"$54","type":"registry:ui","target":"components/ui/expandable-segmented-tabs.tsx"}]}]]}],"$L55"]}]

Expandable Segmented Tabs

Installation

Files

components

Styles