import { jsx } from 'react/jsx-runtime';
import React__default from 'react';
import { ChevronRightIcon, ChevronLeftIcon } from '@heroicons/react/24/outline';
import { motion } from 'motion/react';
import { cn } from '../../../utils/cn.js';
import { useSidebarContext } from './SidebarContext.js';
import { Button } from '../Button/Button.js';

const SidebarToggle = React__default.forwardRef(({ expandIcon, collapseIcon, className, onClick, ...props }, ref) => {
    const sidebarContext = useSidebarContext();
    if (!sidebarContext) {
        if (process.env.NODE_ENV !== "production") {
            console.warn("SidebarToggle must be used within a Sidebar component");
        }
        return null;
    }
    const { collapsed, toggleCollapsed } = sidebarContext;
    const handleClick = (e) => {
        toggleCollapsed();
        onClick === null || onClick === void 0 ? void 0 : onClick(e);
    };
    const { onAnimationStart, onAnimationEnd, onDrag, onDragStart, onDragEnd, color: _color, ...buttonProps } = props;
    return (jsx(Button, { ref: ref, variant: "soft", size: "sm", className: cn("size-8 p-0", className), onClick: handleClick, "aria-label": collapsed ? "Expand sidebar" : "Collapse sidebar", title: collapsed ? "Expand sidebar" : "Collapse sidebar", ...buttonProps, children: jsx(motion.div, { initial: false, animate: { rotate: collapsed ? 180 : 0 }, transition: { duration: 0.2 }, children: collapsed
                ? expandIcon || jsx(ChevronRightIcon, { className: "size-4" })
                : collapseIcon || jsx(ChevronLeftIcon, { className: "size-4" }) }) }));
});
SidebarToggle.displayName = "SidebarToggle";

export { SidebarToggle };
