import { j as jsxRuntimeExports } from '../../node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.js';
import { Root } from '../../node_modules/.pnpm/@radix-ui_react-collapsible@1.1.2_@types_react-dom@18.0.11_@types_react@18.2.12_react-dom@18._hjslo7xm5vmo3b4sx344jkbtcq/node_modules/@radix-ui/react-collapsible/dist/index.js';
import { cva } from '../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js';
import { TooltipProvider, Tooltip } from '../tooltip/tooltip.js';
import styles from './sidepanel.module.css.js';

const root = cva(styles.root);
const SidepanelRoot = ({ className, position = 'left', open, onOpenChange, children, profile, ref, ...props }) => (jsxRuntimeExports.jsx(TooltipProvider, { children: jsxRuntimeExports.jsxs(Root, { ref: ref, className: root({ className }), "data-position": position, "data-state": open ? 'expanded' : 'collapsed', open: open, onOpenChange: onOpenChange, "aria-label": "Navigation Sidebar", "aria-expanded": open, role: "navigation", ...props, children: [jsxRuntimeExports.jsx(Tooltip, { message: open ? "Click to collapse" : "Click to expand", side: position === 'left' ? 'right' : 'left', children: jsxRuntimeExports.jsx("div", { className: styles.resizeHandle, onClick: () => onOpenChange?.(!open), role: "button", tabIndex: 0, "aria-label": open ? "Collapse sidebar" : "Expand sidebar", onKeyDown: (e) => {
                        if (e.key === 'Enter' || e.key === ' ') {
                            e.preventDefault();
                            onOpenChange?.(!open);
                        }
                    } }) }), children, profile && (jsxRuntimeExports.jsxs("a", { href: profile.href, className: styles.account, role: "button", "aria-label": `Profile: ${profile.label}`, onClick: (e) => {
                    if (profile.onIconClick) {
                        e.preventDefault();
                        profile.onIconClick();
                    }
                }, children: [jsxRuntimeExports.jsx("span", { className: styles['nav-icon'], "aria-hidden": "true", style: { cursor: profile.onIconClick ? 'pointer' : undefined }, children: profile.icon }), jsxRuntimeExports.jsx("span", { className: styles['nav-text'], children: profile.label })] }))] }) }));
const SidepanelHeader = ({ className, logo, title, onLogoClick, ref, ...props }) => (jsxRuntimeExports.jsxs("div", { ref: ref, className: styles.header, role: "banner", ...props, children: [jsxRuntimeExports.jsx("div", { className: styles.logo, "aria-hidden": "true", onClick: onLogoClick, role: onLogoClick ? "button" : undefined, tabIndex: onLogoClick ? 0 : undefined, onKeyDown: (e) => {
                if (onLogoClick && (e.key === 'Enter' || e.key === ' ')) {
                    e.preventDefault();
                    onLogoClick();
                }
            }, style: { cursor: onLogoClick ? 'pointer' : undefined }, children: logo }), jsxRuntimeExports.jsx("div", { className: styles.title, role: "heading", "aria-level": 1, children: title })] }));
const SidepanelMain = ({ className, children, ref, ...props }) => (jsxRuntimeExports.jsx("div", { ref: ref, className: styles.main, role: "group", "aria-label": "Main navigation", ...props, children: children }));
const SidepanelFooter = ({ className, children, ref, ...props }) => (jsxRuntimeExports.jsx("div", { ref: ref, className: styles.footer, role: "group", "aria-label": "Footer navigation", ...props, children: children }));
const SidepanelItem = ({ className, icon, children, active, ref, ...props }) => (jsxRuntimeExports.jsxs("a", { ref: ref, className: styles['nav-item'], "data-active": active, role: "menuitem", "aria-current": active ? "page" : undefined, ...props, children: [jsxRuntimeExports.jsx("span", { className: styles['nav-icon'], "aria-hidden": "true", children: icon }), jsxRuntimeExports.jsx("span", { className: styles['nav-text'], children: children })] }));
SidepanelRoot.displayName = "Sidepanel.Root";
SidepanelHeader.displayName = "Sidepanel.Header";
SidepanelMain.displayName = "Sidepanel.Main";
SidepanelFooter.displayName = "Sidepanel.Footer";
SidepanelItem.displayName = "Sidepanel.Item";
const Sidepanel = {
    Root: SidepanelRoot,
    Header: SidepanelHeader,
    Main: SidepanelMain,
    Footer: SidepanelFooter,
    Item: SidepanelItem,
};

export { Sidepanel };
//# sourceMappingURL=sidepanel.js.map
