@flikk/ui 1.0.0-beta.3 → 1.0.0-beta.30

package/dist/components/core/Sidebar/SidebarCard.js

@@ -0,0 +1,69 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import React__default, { useMemo, useState, useEffect } from 'react';
+import { AnimatePresence, motion } from 'motion/react';
+import { cn } from '../../../utils/cn.js';
+import { sidebarCardTheme } from './SidebarCard.theme.js';
+import { useSidebarCollapsed } from './SidebarContext.js';
+
+// Sidebar.Card mount is sequenced relative to the sidebar's collapse/expand
+// animation. On collapse → the card exits immediately (popLayout + slide/fade
+// in parallel with the rail narrowing). On expand → the card mount is delayed
+// until the sidebar's spring has settled, so the card lays out at its FINAL
+// expanded width on first render and the text never reflows mid-animation.
+// 260ms ≈ the spring's 99% settle time (stiffness 320, damping 34) — see
+// Sidebar.tsx's SIDEBAR_TRANSITION comment for the underlying math.
+const MOUNT_DELAY_MS = 260;
+/**
+ * A collapse-aware container for arbitrary sidebar content — promo CTAs,
+ * storage meters, tip-of-the-day, banner images, anything. Renders its
+ * children when the sidebar is expanded and **disappears entirely** when
+ * the sidebar collapses (smooth height + opacity exit via AnimatePresence).
+ *
+ * Composition is open: drop in raw text, an `<img>`, a `<Button>`,
+ * `<Progress>`, or any custom JSX. There are intentionally no sub-parts
+ * (`Sidebar.Card.Header`/`.Body`/…) because the whole card vanishes
+ * together — granular slots add ceremony with no payoff.
+ *
+ * @example
+ * <Sidebar.Card>
+ *   <p className="text-sm">Upgrade for unlimited projects.</p>
+ *   <Button size="sm" className="mt-2 w-full">Upgrade</Button>
+ * </Sidebar.Card>
+ *
+ * @example Edge-to-edge image (no default container chrome):
+ * <Sidebar.Card unstyled>
+ *   <img src="/promo.jpg" alt="" className="w-full rounded-[var(--card-radius)]" />
+ * </Sidebar.Card>
+ */
+const SidebarCard = React__default.forwardRef(({ children, className, unstyled = false, theme: customTheme, ...props }, ref) => {
+    const { isCollapsedView } = useSidebarCollapsed();
+    const theme = useMemo(() => ({ ...sidebarCardTheme, ...customTheme }), [customTheme]);
+    // Card is visible when expanded. Hide immediately on collapse (so the
+    // AnimatePresence exit + popLayout reflow happens in parallel with the
+    // rail narrowing). On expand, wait for the sidebar spring to settle
+    // before mounting — see `MOUNT_DELAY_MS` rationale.
+    const [shouldShow, setShouldShow] = useState(!isCollapsedView);
+    useEffect(() => {
+        if (isCollapsedView) {
+            setShouldShow(false);
+            return;
+        }
+        const id = setTimeout(() => setShouldShow(true), MOUNT_DELAY_MS);
+        return () => clearTimeout(id);
+    }, [isCollapsedView]);
+    // Strip drag/animation DOM handlers that collide with motion's prop types
+    // (same pattern the other Sidebar pieces use, e.g. Sidebar.tsx:54-61).
+    const { onAnimationStart, onAnimationEnd, onDrag, onDragStart, onDragEnd, ...motionSafeProps } = props;
+    return (
+    // `mode="popLayout"` removes the exiting card from the layout flow
+    // immediately so siblings (footer, nav rows below) snap into their new
+    // positions without waiting on the card's exit animation.
+    jsx(AnimatePresence, { initial: false, mode: "popLayout", children: shouldShow && (jsx(motion.div, { ref: ref, initial: { opacity: 0, x: -16 }, animate: { opacity: 1, x: 0 }, exit: { opacity: 0, x: -16 }, transition: { duration: 0.2, ease: [0.4, 0, 0.2, 1] }, className: cn(theme.wrapperStyle, 
+            // Default card chrome (rounded / bg / border / p-3) unless the
+            // consumer opts out. className wins per shadcn rules.
+            !unstyled && theme.baseStyle, className), ...motionSafeProps, children: children }, "sidebar-card")) }));
+});
+SidebarCard.displayName = "SidebarCard";
+
+export { SidebarCard };

package/dist/components/core/Sidebar/SidebarCard.theme.d.ts

@@ -0,0 +1,8 @@
+import { SidebarCardTheme } from "./Sidebar.types";
+/**
+ * Default theme for `<Sidebar.Card>`. Small surface — the component itself
+ * only renders a single styled wrapper that disappears on collapse, so the
+ * theme just holds the default outer chrome. Set `unstyled` on the card to
+ * skip it entirely (e.g. for full-bleed images).
+ */
+export declare const sidebarCardTheme: SidebarCardTheme;

package/dist/components/core/Sidebar/SidebarCard.theme.js

@@ -0,0 +1,18 @@
+/**
+ * Default theme for `<Sidebar.Card>`. Small surface — the component itself
+ * only renders a single styled wrapper that disappears on collapse, so the
+ * theme just holds the default outer chrome. Set `unstyled` on the card to
+ * skip it entirely (e.g. for full-bleed images).
+ */
+const sidebarCardTheme = {
+    // Card chrome — surface bg, hairline border, sidebar-tuned padding (p-3 is
+    // tighter than core/Card's p-6 because the rail is narrow). `overflow-hidden`
+    // keeps any children clipped to the rounded corners.
+    baseStyle: "rounded-[var(--card-radius)] bg-[var(--color-surface)] border border-[var(--color-border)] p-3 overflow-hidden",
+    // Wrapper applied in both styled + unstyled modes. Empty by default —
+    // the slide/fade animation lives on motion.div itself, not on this layer,
+    // so no overflow trickery needed here.
+    wrapperStyle: "",
+};
+
+export { sidebarCardTheme };

package/dist/components/core/Sidebar/SidebarContent.js

@@ -1,12 +1,19 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import React__default from 'react';
 import { cn } from '../../../utils/cn.js';
-import { useSidebarContext } from './SidebarContext.js';
+import { useSidebarCollapsed, useSidebarDensity } from './SidebarContext.js';
+import { ScrollArea } from '../ScrollArea/ScrollArea.js';
+import '../ScrollArea/smooth/SmoothScrollEngine.js';
 
 const SidebarContent = React__default.forwardRef(({ children, className, ...props }, ref) => {
-    const sidebarContext = useSidebarContext();
-    const collapsed = (sidebarContext === null || sidebarContext === void 0 ? void 0 : sidebarContext.collapsed) || false;
-    return (jsx("div", { ref: ref, className: cn("flex-1 overflow-y-auto overflow-x-hidden py-2 transition-all duration-200", collapsed ? "px-2" : "px-3", className), ...props, children: children }));
+    const { isCollapsedView } = useSidebarCollapsed();
+    const density = useSidebarDensity();
+    return (jsx(ScrollArea, { ref: ref, type: "none", size: "thin", className: "flex-1 min-h-0", ...props, children: jsx("div", { className: cn("py-3 transition-[padding] duration-200 ease-[cubic-bezier(0.4,0,0.2,1)]", density === "compact" && "py-2", 
+            // Collapsed px-3 (12) on a 60px rail leaves a 36px interior — every
+            // child row (NavItem, Sidebar.Search) is exactly 36px wide, matching
+            // the 36×36 hit-area target.
+            isCollapsedView ? "px-3" : "px-2.5", className), children: children }) }));
 });
 SidebarContent.displayName = "SidebarContent";
 

package/dist/components/core/Sidebar/SidebarContext.d.ts

@@ -1,17 +1,32 @@
 import React from 'react';
-import { SidebarContextValue } from './Sidebar.types';
+import { SidebarContextValue, SidebarDensity, SidebarProviderProps } from './Sidebar.types';
 export declare const useSidebarContext: () => SidebarContextValue | null;
-interface SidebarProviderProps {
+export declare const useSidebarDensity: () => SidebarDensity;
+export declare const SidebarDensityProvider: React.FC<{
     children: React.ReactNode;
-    defaultCollapsed?: boolean;
-    collapsed?: boolean;
-    onCollapsedChange?: (collapsed: boolean) => void;
-    width?: {
-        expanded?: number;
-        collapsed?: number;
-    };
-    side?: 'left' | 'right';
-    variant?: 'sidebar' | 'floating' | 'inset';
+    density?: SidebarDensity;
+}>;
+/**
+ * Derived collapsed-view state, shared by all Sidebar sub-components.
+ * Returns falsy defaults outside a Sidebar so it can be called unconditionally.
+ */
+export declare const useSidebarCollapsed: () => {
+    collapsed: boolean;
+    isMobile: boolean;
+    isMobileOpen: boolean;
+    /** Collapsed desktop rail — true only when collapsed AND not the mobile overlay */
+    isCollapsedView: boolean;
+};
+/** Accordion nav context: allows SidebarNav to coordinate which submenu is open */
+interface AccordionNavContextValue {
+    openId: string | null;
+    register: (id: string) => void;
+    unregister: (id: string) => void;
 }
+export declare const useAccordionNavContext: () => AccordionNavContextValue | null;
+export declare const AccordionNavProvider: React.FC<{
+    children: React.ReactNode;
+    accordion?: boolean;
+}>;
 export declare const SidebarProvider: React.FC<SidebarProviderProps>;
 export {};

package/dist/components/core/Sidebar/SidebarContext.js

@@ -1,38 +1,114 @@
-import { jsx } from 'react/jsx-runtime';
-import { createContext, useContext, useState, useCallback, useMemo } from 'react';
+"use client";
+import { jsx, Fragment } from 'react/jsx-runtime';
+import { createContext, useContext, useState, useCallback, useMemo, useEffect } from 'react';
+import { useMediaQuery } from '../../../hooks/useMediaQuery.js';
 
 const SidebarContext = createContext(null);
+const SidebarDensityContext = createContext(null);
 const useSidebarContext = () => {
     const context = useContext(SidebarContext);
     // Return null if not in sidebar context (allows NavItem to work elsewhere)
     return context;
 };
-const SidebarProvider = ({ children, defaultCollapsed = false, collapsed: controlledCollapsed, onCollapsedChange, width = {}, side = 'left', variant = 'sidebar', }) => {
+const useSidebarDensity = () => {
+    var _a;
+    const navDensity = useContext(SidebarDensityContext);
+    const sidebarContext = useContext(SidebarContext);
+    return (_a = navDensity !== null && navDensity !== void 0 ? navDensity : sidebarContext === null || sidebarContext === void 0 ? void 0 : sidebarContext.density) !== null && _a !== void 0 ? _a : 'comfortable';
+};
+const SidebarDensityProvider = ({ children, density }) => {
+    if (!density)
+        return jsx(Fragment, { children: children });
+    return (jsx(SidebarDensityContext.Provider, { value: density, children: children }));
+};
+/**
+ * Derived collapsed-view state, shared by all Sidebar sub-components.
+ * Returns falsy defaults outside a Sidebar so it can be called unconditionally.
+ */
+const useSidebarCollapsed = () => {
+    var _a, _b, _c;
+    const context = useContext(SidebarContext);
+    const collapsed = (_a = context === null || context === void 0 ? void 0 : context.collapsed) !== null && _a !== void 0 ? _a : false;
+    const isMobile = (_b = context === null || context === void 0 ? void 0 : context.isMobile) !== null && _b !== void 0 ? _b : false;
+    return {
+        collapsed,
+        isMobile,
+        isMobileOpen: (_c = context === null || context === void 0 ? void 0 : context.isMobileOpen) !== null && _c !== void 0 ? _c : false,
+        /** Collapsed desktop rail — true only when collapsed AND not the mobile overlay */
+        isCollapsedView: collapsed && !isMobile,
+    };
+};
+const AccordionNavContext = createContext(null);
+const useAccordionNavContext = () => useContext(AccordionNavContext);
+const AccordionNavProvider = ({ children, accordion = false }) => {
+    const [openId, setOpenId] = useState(null);
+    const register = useCallback((id) => {
+        setOpenId(id);
+    }, []);
+    const unregister = useCallback((id) => {
+        setOpenId(prev => (prev === id ? null : prev));
+    }, []);
+    const value = useMemo(() => ({ openId, register, unregister }), [openId, register, unregister]);
+    if (!accordion)
+        return jsx(Fragment, { children: children });
+    return (jsx(AccordionNavContext.Provider, { value: value, children: children }));
+};
+const SidebarProvider = ({ children, defaultCollapsed = false, collapsed: controlledCollapsed, onCollapsedChange, mobileBreakpoint = 1024, mobileOpen: controlledMobileOpen, onMobileOpenChange, width = {}, side = 'left', variant = 'sidebar', density = 'comfortable', }) => {
     const [internalCollapsed, setInternalCollapsed] = useState(defaultCollapsed);
-    // Determine if component is controlled
-    const isControlled = controlledCollapsed !== undefined;
-    const collapsed = isControlled ? controlledCollapsed : internalCollapsed;
+    const [internalMobileOpen, setInternalMobileOpen] = useState(false);
+    // Detect mobile breakpoint via the shared (SSR-safe) media-query hook
+    const isMobile = useMediaQuery(`(max-width: ${mobileBreakpoint - 1}px)`);
+    // Close the mobile drawer when leaving the mobile breakpoint
+    useEffect(() => {
+        if (!isMobile) {
+            setInternalMobileOpen(false);
+            onMobileOpenChange === null || onMobileOpenChange === void 0 ? void 0 : onMobileOpenChange(false);
+        }
+    }, [isMobile, onMobileOpenChange]);
+    // Collapsed state
+    const isCollapsedControlled = controlledCollapsed !== undefined;
+    const collapsed = isCollapsedControlled ? controlledCollapsed : internalCollapsed;
     const setCollapsed = useCallback((newCollapsed) => {
-        if (!isControlled) {
+        if (!isCollapsedControlled) {
             setInternalCollapsed(newCollapsed);
         }
         onCollapsedChange === null || onCollapsedChange === void 0 ? void 0 : onCollapsedChange(newCollapsed);
-    }, [isControlled, onCollapsedChange]);
+    }, [isCollapsedControlled, onCollapsedChange]);
     const toggleCollapsed = useCallback(() => {
         setCollapsed(!collapsed);
     }, [collapsed, setCollapsed]);
+    // Mobile open state
+    const isMobileOpenControlled = controlledMobileOpen !== undefined;
+    const isMobileOpen = isMobileOpenControlled ? controlledMobileOpen : internalMobileOpen;
+    const setMobileOpen = useCallback((open) => {
+        if (!isMobileOpenControlled) {
+            setInternalMobileOpen(open);
+        }
+        onMobileOpenChange === null || onMobileOpenChange === void 0 ? void 0 : onMobileOpenChange(open);
+    }, [isMobileOpenControlled, onMobileOpenChange]);
+    // Lock body scroll when mobile overlay is open
+    useEffect(() => {
+        if (isMobile && isMobileOpen) {
+            document.body.style.overflow = 'hidden';
+            return () => { document.body.style.overflow = ''; };
+        }
+    }, [isMobile, isMobileOpen]);
     const contextValue = useMemo(() => ({
         collapsed,
         setCollapsed,
         toggleCollapsed,
         width: {
             expanded: width.expanded || 280,
-            collapsed: width.collapsed || 80,
+            collapsed: width.collapsed || 60,
         },
         side,
         variant,
-    }), [collapsed, setCollapsed, toggleCollapsed, width.expanded, width.collapsed, side, variant]);
+        density,
+        isMobileOpen,
+        setMobileOpen,
+        isMobile,
+    }), [collapsed, setCollapsed, toggleCollapsed, width.expanded, width.collapsed, side, variant, density, isMobileOpen, setMobileOpen, isMobile]);
     return (jsx(SidebarContext.Provider, { value: contextValue, children: children }));
 };
 
-export { SidebarProvider, useSidebarContext };
+export { AccordionNavProvider, SidebarDensityProvider, SidebarProvider, useAccordionNavContext, useSidebarCollapsed, useSidebarContext, useSidebarDensity };

package/dist/components/core/Sidebar/SidebarFooter.js

@@ -1,12 +1,13 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import React__default from 'react';
 import { cn } from '../../../utils/cn.js';
-import { useSidebarContext } from './SidebarContext.js';
+import { useSidebarCollapsed, useSidebarDensity } from './SidebarContext.js';
 
 const SidebarFooter = React__default.forwardRef(({ children, className, ...props }, ref) => {
-    const sidebarContext = useSidebarContext();
-    const collapsed = (sidebarContext === null || sidebarContext === void 0 ? void 0 : sidebarContext.collapsed) || false;
-    return (jsx("div", { ref: ref, className: cn("flex-shrink-0 border-t border-[var(--color-border)] bg-[var(--color-background)] transition-all duration-200", collapsed ? "p-2 flex justify-center" : "p-4", className), ...props, children: children }));
+    useSidebarCollapsed();
+    useSidebarDensity();
+    return (jsx("div", { ref: ref, className: cn("flex-shrink-0 border-t border-[var(--color-border)] p-2", className), ...props, children: children }));
 });
 SidebarFooter.displayName = "SidebarFooter";
 

package/dist/components/core/Sidebar/SidebarHeader.js

@@ -1,17 +1,28 @@
+"use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
 import React__default from 'react';
+import { XMarkIcon } from '@heroicons/react/24/outline';
 import { cn } from '../../../utils/cn.js';
-import { useSidebarContext } from './SidebarContext.js';
+import { useSidebarContext, useSidebarCollapsed } from './SidebarContext.js';
 import { SidebarToggle } from './SidebarToggle.js';
+import { Button } from '../Button/Button.js';
 
 const SidebarHeader = React__default.forwardRef(({ logo, showToggle = true, customToggle, children, className, ...props }, ref) => {
     const sidebarContext = useSidebarContext();
-    const collapsed = (sidebarContext === null || sidebarContext === void 0 ? void 0 : sidebarContext.collapsed) || false;
+    const { isMobile, isMobileOpen } = useSidebarCollapsed();
     // If children are provided, use them instead of default layout
     if (children) {
-        return (jsx("div", { ref: ref, className: cn("flex-shrink-0 border-b border-gray-200 bg-white", className), ...props, children: children }));
+        return (jsx("div", { ref: ref, className: cn("flex-shrink-0 border-b border-[var(--color-border)]", className), ...props, children: children }));
     }
-    return (jsxs("div", { ref: ref, className: cn("flex items-center justify-between flex-shrink-0 h-16 border-b border-[var(--color-border)] bg-[var(--color-background)] transition-all duration-200", collapsed ? "px-3" : "px-4", className), ...props, children: [jsx("div", { className: cn("flex items-center min-w-0 transition-all duration-200", collapsed ? "flex-shrink-0" : "flex-1"), children: logo }), showToggle && (jsx("div", { className: "flex-shrink-0", children: customToggle || jsx(SidebarToggle, {}) }))] }));
+    return (jsxs("div", { ref: ref, className: cn("flex items-center flex-shrink-0 h-14 border-b border-[var(--color-border)] overflow-visible relative transition-[padding,background-color,border-color] duration-200 ease-[cubic-bezier(0.4,0,0.2,1)]", 
+        // Padding mirrors Sidebar.Content so the header logo sits on the
+        // same horizontal track as the NavItem rows below it. px-3 (12px)
+        // on the 60px collapsed rail leaves a 36px interior — a 32px logo
+        // (size-8) lands with 2px slack on each side; a 36px logo (size-9)
+        // fills the interior exactly. Left-pinned in both states (no
+        // `justify-*` toggle) so nothing jumps mid-animation. Same value
+        // for collapsed + expanded → no padding transition needed.
+        "px-3", className), ...props, children: [jsx("div", { className: "flex items-center min-w-0 flex-1", children: logo }), isMobile && isMobileOpen && (jsx(Button, { variant: "ghost", size: "sm", className: "size-7 p-0 text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)]", onClick: () => sidebarContext === null || sidebarContext === void 0 ? void 0 : sidebarContext.setMobileOpen(false), "aria-label": "Close navigation", children: jsx(XMarkIcon, { className: "size-4" }) })), !isMobile && showToggle && (customToggle || jsx(SidebarToggle, {}))] }));
 });
 SidebarHeader.displayName = "SidebarHeader";
 

package/dist/components/core/Sidebar/SidebarLogo.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { SidebarLogoProps } from "./Sidebar.types";
+export declare const SidebarLogo: React.ForwardRefExoticComponent<SidebarLogoProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/core/Sidebar/SidebarLogo.js

@@ -0,0 +1,49 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import React__default from 'react';
+import { cn } from '../../../utils/cn.js';
+import { AnimatePresence, motion } from 'motion/react';
+import { useSidebarCollapsed } from './SidebarContext.js';
+
+const SidebarLogo = React__default.forwardRef(({ expanded, collapsed, expandedSrc, collapsedSrc, expandedImageClassName, collapsedImageClassName, alt = "", icon, text, className, ...props }, ref) => {
+    var _a, _b;
+    const { isCollapsedView } = useSidebarCollapsed();
+    // Auto-render <img> for the src convenience API. ReactNode props still win
+    // (full control); src is the easy path for plain image/SVG assets.
+    //
+    // Defaults:
+    //  - Collapsed: size-9 (36px) square, object-cover — matches the nav icon
+    //    track so the collapsed logo aligns visually with NavItem rows below.
+    //  - Expanded: h-8 w-auto object-contain — typical wordmark sizing.
+    // Override via `collapsedImageClassName` / `expandedImageClassName`
+    // (tailwind-merge resolves conflicts in favor of the user's classes).
+    const expandedNode = expanded !== null && expanded !== void 0 ? expanded : (expandedSrc ? (jsx("img", { src: expandedSrc, alt: alt, className: cn("h-8 w-auto object-contain", expandedImageClassName) })) : undefined);
+    const collapsedNode = collapsed !== null && collapsed !== void 0 ? collapsed : (collapsedSrc ? (jsx("img", { src: collapsedSrc, alt: alt, className: cn("size-9 object-cover", collapsedImageClassName) })) : undefined);
+    // New API takes precedence: if the user passed `expanded`/`collapsed`
+    // (ReactNode) OR their `*Src` shortcuts, render those (cross-faded).
+    // Otherwise fall back to the legacy icon-plus-animated-text rendering so
+    // existing consumers keep working.
+    const hasNewApi = expandedNode !== undefined || collapsedNode !== undefined;
+    if (hasNewApi) {
+        // Resolve the logo for the current state, falling all the way back to
+        // the legacy `icon` so a partial new-API usage still has something to
+        // show. Per-state fallback: collapsed → expanded → icon, and vice versa.
+        const currentLogo = isCollapsedView
+            ? (_a = collapsedNode !== null && collapsedNode !== void 0 ? collapsedNode : expandedNode) !== null && _a !== void 0 ? _a : icon
+            : (_b = expandedNode !== null && expandedNode !== void 0 ? expandedNode : collapsedNode) !== null && _b !== void 0 ? _b : icon;
+        return (jsx("div", { ref: ref, 
+            // No `overflow-hidden`: would clip wide logos in collapsed mode.
+            // Sidebar itself is `overflow-visible`.
+            className: cn("flex items-center", className), ...props, children: jsx(AnimatePresence, { mode: "wait", initial: false, children: jsx(motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.15, ease: [0.4, 0, 0.2, 1] }, className: "flex items-center", children: currentLogo }, isCollapsedView ? "collapsed" : "expanded") }) }));
+    }
+    // Legacy API: icon + animated text.
+    return (jsxs("div", { ref: ref, 
+        // No `overflow-hidden` here — that would clip the icon when the
+        // sidebar is collapsed and horizontal space is tight. The text
+        // collapse animation owns its own `overflow-hidden` on the motion.div
+        // below, which is the only place it's actually needed.
+        className: cn("flex items-center gap-2", className), ...props, children: [jsx("div", { className: "flex-shrink-0", children: icon }), jsx(AnimatePresence, { initial: false, children: !isCollapsedView && text && (jsx(motion.div, { className: "overflow-hidden whitespace-nowrap", initial: { opacity: 0, x: -8 }, animate: { opacity: 1, x: 0 }, exit: { opacity: 0, x: -8 }, transition: { duration: 0.15, ease: [0.4, 0, 0.2, 1] }, children: typeof text === "string" ? (jsx("span", { className: "text-base font-semibold tracking-tight text-[var(--color-text-primary)]", children: text })) : (text) }, "logo-text")) })] }));
+});
+SidebarLogo.displayName = "SidebarLogo";
+
+export { SidebarLogo };

package/dist/components/core/Sidebar/SidebarMobileTrigger.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { SidebarMobileTriggerProps } from "./Sidebar.types";
+export declare const SidebarMobileTrigger: React.ForwardRefExoticComponent<SidebarMobileTriggerProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/core/Sidebar/SidebarMobileTrigger.js

@@ -0,0 +1,30 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import React__default from 'react';
+import { Bars3Icon } from '@heroicons/react/24/outline';
+import { cn } from '../../../utils/cn.js';
+import { useSidebarContext } from './SidebarContext.js';
+import { Button } from '../Button/Button.js';
+
+const SidebarMobileTrigger = React__default.forwardRef(({ icon, className, onClick, ...props }, ref) => {
+    const sidebarContext = useSidebarContext();
+    if (!sidebarContext) {
+        if (process.env.NODE_ENV !== "production") {
+            console.warn("SidebarMobileTrigger must be used within a Sidebar component");
+        }
+        return null;
+    }
+    const { isMobile, setMobileOpen } = sidebarContext;
+    // Only render on mobile
+    if (!isMobile)
+        return null;
+    const handleClick = (e) => {
+        setMobileOpen(true);
+        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-9 p-0", className), onClick: handleClick, "aria-label": "Open navigation menu", ...buttonProps, children: icon || jsx(Bars3Icon, { className: "size-5" }) }));
+});
+SidebarMobileTrigger.displayName = "SidebarMobileTrigger";
+
+export { SidebarMobileTrigger };

package/dist/components/core/Sidebar/SidebarNav.js

@@ -1,9 +1,13 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import React__default from 'react';
 import { cn } from '../../../utils/cn.js';
+import { useSidebarDensity, SidebarDensityProvider, AccordionNavProvider } from './SidebarContext.js';
 
-const SidebarNav = React__default.forwardRef(({ children, className, ...props }, ref) => {
-    return (jsx("nav", { ref: ref, className: cn('flex-1 space-y-1 p-4', className), role: "navigation", ...props, children: children }));
+const SidebarNav = React__default.forwardRef(({ accordion = false, density, children, className, ...props }, ref) => {
+    const contextDensity = useSidebarDensity();
+    const resolvedDensity = density !== null && density !== void 0 ? density : contextDensity;
+    return (jsx("nav", { ref: ref, className: cn('flex-1', resolvedDensity === 'compact' ? 'space-y-0.5' : 'space-y-1', className), "aria-label": "Sidebar", "data-density": resolvedDensity, ...props, children: jsx(SidebarDensityProvider, { density: density, children: jsx(AccordionNavProvider, { accordion: accordion, children: children }) }) }));
 });
 SidebarNav.displayName = 'SidebarNav';
 

package/dist/components/core/Sidebar/SidebarNavGroup.js

@@ -1,13 +1,14 @@
+"use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import React__default from 'react';
 import { cn } from '../../../utils/cn.js';
-import { useSidebarContext } from './SidebarContext.js';
+import { AnimatePresence, motion } from 'motion/react';
+import { useSidebarCollapsed } from './SidebarContext.js';
 
 const SidebarNavGroup = React__default.forwardRef(({ title, showTitleWhenCollapsed = false, children, className, ...props }, ref) => {
-    const sidebarContext = useSidebarContext();
-    const collapsed = (sidebarContext === null || sidebarContext === void 0 ? void 0 : sidebarContext.collapsed) || false;
-    const showTitle = title && (!collapsed || showTitleWhenCollapsed);
-    return (jsxs("div", { ref: ref, className: cn("space-y-1", className), ...props, children: [showTitle && (jsx("div", { className: "px-2 py-2", children: jsx("h3", { className: "text-xs font-semibold text-[var(--color-text-muted)] uppercase tracking-wider", children: title }) })), collapsed && !showTitleWhenCollapsed && (jsx("div", { className: "h-px bg-[var(--color-border)] mx-2 my-2" })), jsx("div", { className: "space-y-1", children: children })] }));
+    const { isCollapsedView } = useSidebarCollapsed();
+    const showTitleText = title && (!isCollapsedView || showTitleWhenCollapsed);
+    return (jsxs("div", { ref: ref, className: cn("space-y-1", className), ...props, children: [title && (jsx("div", { className: "h-6 flex items-center relative overflow-hidden", children: jsx(AnimatePresence, { initial: false, children: showTitleText ? (jsx(motion.div, { initial: { opacity: 0, x: -4 }, animate: { opacity: 1, x: 0 }, exit: { opacity: 0, x: -4 }, transition: { duration: 0.2, ease: [0.4, 0, 0.2, 1] }, className: "w-full px-2 py-1 absolute left-0", children: jsx("h3", { className: "text-[10px] font-bold text-[var(--color-text-muted)]/70 uppercase", children: title }) }, "title-text")) : (jsx(motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.2, ease: [0.4, 0, 0.2, 1] }, className: "w-full px-2 absolute left-0", children: jsx("div", { className: "h-px bg-[var(--color-border)] w-full" }) }, "title-separator")) }) })), jsx("div", { className: "space-y-1", children: children })] }));
 });
 SidebarNavGroup.displayName = "SidebarNavGroup";
 

package/dist/components/core/Sidebar/SidebarSearch.d.ts

@@ -0,0 +1,22 @@
+import React from "react";
+import { SidebarSearchProps } from "./Sidebar.types";
+/**
+ * Optional search field for the Sidebar. Emits the typed query via `onChange`
+ * (or via the controlled `value` prop) — does NOT filter the Sidebar tree itself.
+ * Consumers wire `onChange` to whatever surfaces results (popover, command palette,
+ * side panel, route, …) so the Sidebar stays visually clean.
+ *
+ * The collapse animation mirrors NavItem (single rendered structure across both
+ * states, icon always present in a fixed flex slot, the expanded content
+ * animates in/out via AnimatePresence). The field's border + surface fill fade
+ * out via a CSS transition so the collapsed rail just shows the icon — same
+ * look as the NavItem rows above it. Click the icon to expand the sidebar and
+ * focus the input. Opt out of the collapsed affordance with `hideWhenCollapsed`.
+ *
+ * Implementation note: this uses a small inline field instead of the shared
+ * `<Input>` so the icon + animated input can be siblings under one wrapper
+ * (Input's internal layout wouldn't permit the NavItem-style animation). The
+ * border/focus styling matches `formsBaseTheme.inputGroupBaseStyle` (inset
+ * box-shadow + ring) so it reads as a normal form control when expanded.
+ */
+export declare const SidebarSearch: React.ForwardRefExoticComponent<SidebarSearchProps & React.RefAttributes<HTMLInputElement>>;