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:T1fae,"use client"; import * as React from "react"; import { animate, motion, useReducedMotion, type Transition, } from "motion/react"; import { Button } from "@/components/ui/button"; import { cn } from "@/lib/utils"; type ButtonProps = React.ComponentPropsWithoutRef; type ButtonClickEvent = Parameters>[0]; type ExpandableToggleButtonSize = "default" | "xs" | "sm" | "lg"; const COLLAPSED_WIDTH: Record = { default: 32, xs: 24, sm: 28, lg: 36, }; const ICON_SIZE: Record = { default: 16, xs: 12, sm: 14, lg: 18, }; const LABEL_OUTER_PADDING: Record = { default: 10, xs: 8, sm: 10, lg: 10, }; const LABEL_ICON_GAP = 6; const MORPH_TRANSITION: Transition = { duration: 0.2, ease: [0.22, 1, 0.36, 1], }; const REDUCED_TRANSITION: Transition = { duration: 0 }; const useIsomorphicLayoutEffect = typeof window === "undefined" ? React.useEffect : React.useLayoutEffect; export type ExpandableToggleButtonProps = Omit< ButtonProps, | "aria-label" | "aria-pressed" | "children" | "onClick" | "size" > & { /** Controlled active state. */ active?: boolean; /** Initial active state for uncontrolled usage. */ defaultActive?: boolean; /** Called after the button requests an active-state change. */ onActiveChange?: (active: boolean) => void; /** Icon shown while the button is inactive. */ icon: React.ReactNode; /** Optional icon shown while the button is active. */ activeIcon?: React.ReactNode; /** Content revealed while the button is active. */ label: React.ReactNode; /** Accessible name used while the button is inactive. */ inactiveLabel: string; /** Accessible name used while the button is active. */ activeLabel: string; /** Direction the label grows toward while the icon stays anchored. */ expandFrom?: "start" | "end"; /** Text-button size; the inactive width matches its icon-only counterpart. */ size?: ExpandableToggleButtonSize; onClick?: (event: ButtonClickEvent) => void; }; export const ExpandableToggleButton = React.forwardRef< HTMLButtonElement, ExpandableToggleButtonProps >(function ExpandableToggleButton( { active, defaultActive = false, onActiveChange, icon, activeIcon, label, inactiveLabel, activeLabel, expandFrom = "end", variant = "outline", size = "lg", disabled, className, style, onClick, type = "button", ...props }, ref, ) { const [internalActive, setInternalActive] = React.useState(defaultActive); const buttonRef = React.useRef(null); const contentRef = React.useRef(null); const hasMeasuredRef = React.useRef(false); const shouldReduceMotion = useReducedMotion(); const controlled = active !== undefined; const isActive = controlled ? active : internalActive; const transition = shouldReduceMotion ? REDUCED_TRANSITION : MORPH_TRANSITION; const resolvedSize = size ?? "lg"; const collapsedWidth = COLLAPSED_WIDTH[resolvedSize]; const iconSize = ICON_SIZE[resolvedSize]; const labelOuterPadding = LABEL_OUTER_PADDING[resolvedSize]; const iconReserve = collapsedWidth / 2 + iconSize / 2 + LABEL_ICON_GAP; const setButtonRef = React.useCallback( (node: HTMLButtonElement | null) => { buttonRef.current = node; if (typeof ref === "function") { ref(node); } else if (ref) { ref.current = node; } }, [ref], ); useIsomorphicLayoutEffect(() => { const button = buttonRef.current; const content = contentRef.current; if (!button || !content) return; const styles = getComputedStyle(button); const expandedWidth = Math.ceil( content.getBoundingClientRect().width + Number.parseFloat(styles.paddingLeft) + Number.parseFloat(styles.paddingRight) + Number.parseFloat(styles.borderLeftWidth) + Number.parseFloat(styles.borderRightWidth), ); const targetWidth = isActive ? expandedWidth : collapsedWidth; if (!hasMeasuredRef.current || shouldReduceMotion) { button.style.width = `${targetWidth}px`; hasMeasuredRef.current = true; return; } const controls = animate(button, { width: targetWidth }, MORPH_TRANSITION); return () => controls.stop(); }, [collapsedWidth, isActive, label, shouldReduceMotion]); const handleClick = React.useCallback( (event: ButtonClickEvent) => { onClick?.(event); if (event.defaultPrevented || disabled) return; const nextActive = !isActive; if (!controlled) { setInternalActive(nextActive); } onActiveChange?.(nextActive); }, [controlled, disabled, isActive, onActiveChange, onClick], ); const labelSlot = ( {label} ); const iconSpacer = ( ); return ( ); }); 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":["button"]}]]}],["$","$L52",null,{"sourceUrl":"https://ui.ericts.com/r/expandable-toggle-button.json","proxyUrl":"https://shadcnregistry.com/r/ericts/expandable-toggle-button","itemId":"@ericts/expandable-toggle-button"}],["$","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-toggle-button.tsx","content":"$54","type":"registry:ui","target":"components/ui/expandable-toggle-button.tsx"}]}]]}],"$L55"]}]

Expandable Toggle Button

Installation

Files

components

Styles