"use client" import React from "react" import { AnimatePresence, HTMLMotionProps, motion } from "motion/react" import { cn } from "@/lib/utils" export interface ExpandableButtonProps { /** * Controls whether the button is in its expanded state. * When true, shows both icon and text. When false, shows only the icon. */ expanded?: boolean /** * Callback function called when the expanded state changes. * @param open - The new expanded state */ onExpandedChange?: (open: boolean) => void /** * The icon to display in the button. * Shows in both collapsed and expanded states. */ icon?: React.ReactNode } export function ExpandableButton({ expanded: expandedProp, onExpandedChange: setExpandedProp, icon, className, onClick, children, ...props }: HTMLMotionProps<"button"> & ExpandableButtonProps) { const [_expanded, _setExpanded] = React.useState(false) const expanded = expandedProp ?? _expanded const setExpanded = React.useCallback( (value: boolean | ((value: boolean) => boolean)) => { const expandedState = typeof value === "function" ? value(expanded) : value if (setExpandedProp) { setExpandedProp(expandedState) } else { _setExpanded(expandedState) } }, [setExpandedProp, expanded], ) const onClickHandler = (e: React.MouseEvent) => { setExpanded(!expanded) onClick?.(e) } return ( {expanded ? (

{icon} {children}

) : ( {icon} )} ) }