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

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 { List } from '@phosphor-icons/react';
+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(List, { 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>>;

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

@@ -0,0 +1,136 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React__default, { useState, useRef, useEffect } from 'react';
+import { motion, AnimatePresence } from 'motion/react';
+import { MagnifyingGlass } from '@phosphor-icons/react';
+import { cn } from '../../../utils/cn.js';
+import { Tooltip } from '../Tooltip/Tooltip.js';
+import '../Tooltip/Tooltip.animations.js';
+import { useSidebarContext, useSidebarCollapsed } from './SidebarContext.js';
+
+/**
+ * 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.
+ */
+const SidebarSearch = React__default.forwardRef(({ value: controlledValue, defaultValue = "", onChange, placeholder = "Search…", size = "md", iconStart, collapsedLabel = "Search", hideWhenCollapsed = false, className, inputGroupClassName, ...props }, ref) => {
+    const context = useSidebarContext();
+    const { isCollapsedView } = useSidebarCollapsed();
+    const isControlled = controlledValue !== undefined;
+    const [internalValue, setInternalValue] = useState(defaultValue);
+    const value = isControlled ? controlledValue : internalValue;
+    // Compose the user's forwarded ref with our local ref so we can focus
+    // the input after the rail expands.
+    const inputRef = useRef(null);
+    const setInputRef = (el) => {
+        inputRef.current = el;
+        if (typeof ref === "function")
+            ref(el);
+        else if (ref)
+            ref.current = el;
+    };
+    // Focus the input on the frame *after* collapse→expand transitions, but only
+    // when the user triggered it from the icon click (not e.g. via Sidebar.Toggle,
+    // where stealing focus would be surprising).
+    const pendingFocusRef = useRef(false);
+    const wasCollapsedRef = useRef(isCollapsedView);
+    useEffect(() => {
+        if (wasCollapsedRef.current && !isCollapsedView && pendingFocusRef.current) {
+            const id = requestAnimationFrame(() => { var _a; return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus(); });
+            pendingFocusRef.current = false;
+            wasCollapsedRef.current = isCollapsedView;
+            return () => cancelAnimationFrame(id);
+        }
+        wasCollapsedRef.current = isCollapsedView;
+    }, [isCollapsedView]);
+    const handleChange = (e) => {
+        const next = e.target.value;
+        if (!isControlled)
+            setInternalValue(next);
+        onChange === null || onChange === void 0 ? void 0 : onChange(next);
+    };
+    const handleExpand = () => {
+        if (!isCollapsedView)
+            return;
+        pendingFocusRef.current = true;
+        context === null || context === void 0 ? void 0 : context.setCollapsed(false);
+    };
+    const handleKeyDown = (e) => {
+        if (!isCollapsedView)
+            return;
+        if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            handleExpand();
+        }
+    };
+    if (isCollapsedView && hideWhenCollapsed)
+        return null;
+    // Form-field shell — same inset-shadow border + focus ring as the shared
+    // forms.theme.ts (inputGroupBaseStyle), kept in sync intentionally. CSS
+    // transitions on background + box-shadow let the field fade out cleanly
+    // as the rail collapses; AnimatePresence handles the input itself.
+    const shellExpanded = "bg-[var(--color-surface)] shadow-[inset_0_0_0_1px_var(--color-border)] " +
+        "focus-within:shadow-[inset_0_0_0_1px_var(--color-primary-600)] " +
+        "focus-within:ring-4 focus-within:ring-[var(--color-primary)]/10 " +
+        "not-focus-within:hover:shadow-[inset_0_0_0_1px_var(--color-border-secondary)] " +
+        "dark:focus-within:shadow-[inset_0_0_0_1px_var(--color-primary-500)] dark:focus-within:ring-[var(--color-primary-500)]/20";
+    // Collapsed: keep the surface fill so the icon reads as a search "button"
+    // (not a transparent row). Hover lifts to surface-hover.
+    const shellCollapsed = "bg-[var(--color-surface)] shadow-[inset_0_0_0_0_transparent] " +
+        "hover:bg-[var(--color-surface-hover)] cursor-pointer";
+    const tooltipPlacement = (context === null || context === void 0 ? void 0 : context.side) === "right" ? "left" : "right";
+    const field = (jsxs(motion.div, { role: isCollapsedView ? "button" : undefined, tabIndex: isCollapsedView ? 0 : undefined, "aria-label": isCollapsedView ? collapsedLabel : undefined, onClick: isCollapsedView ? handleExpand : undefined, onKeyDown: handleKeyDown, className: cn("relative flex items-center rounded-[var(--form-radius)]", 
+        // 36px (h-9) in BOTH states so the search row sits at the exact
+        // same height as the NavItem rows below it — same look expanded,
+        // same 36×36 square collapsed. `size` prop is currently a no-op
+        // for height; kept on the API surface for forward compatibility.
+        "h-9", 
+        // NOTE: do NOT toggle `justify-center` between states. Combined
+        // with the icon span's constant `pl-2`, the icon sits at the same
+        // field-x (8) in both states, so the *only* thing that animates
+        // on collapse/expand is the field width (via sidebar's motion
+        // width) and the input fading in/out via AnimatePresence. Adding
+        // a justify-* toggle here would snap the icon by 4px on frame 0
+        // of every transition.
+        "transition-[background-color,box-shadow] duration-200 ease-[cubic-bezier(0.4,0,0.2,1)]", "overflow-hidden", isCollapsedView ? shellCollapsed : shellExpanded, inputGroupClassName), children: [jsx("span", { className: cn("flex items-center justify-center flex-shrink-0 pl-2", "text-[var(--color-text-muted)] transition-colors duration-200"), "aria-hidden": !isCollapsedView || undefined, children: iconStart !== null && iconStart !== void 0 ? iconStart : jsx(MagnifyingGlass, { className: "size-5" }) }), jsx(AnimatePresence, { initial: false, children: !isCollapsedView && (jsx(motion.div, { initial: { opacity: 0, x: -4 }, animate: { opacity: 1, x: 0 }, exit: { opacity: 0, x: -4 }, transition: {
+                        opacity: { duration: 0.15, ease: [0.4, 0, 0.2, 1] },
+                        x: { duration: 0.2, ease: [0.4, 0, 0.2, 1] },
+                    }, className: "flex-1 min-w-0 flex items-center overflow-hidden", children: jsx("input", { ref: setInputRef, type: "search", value: value, onChange: handleChange, placeholder: placeholder, "aria-label": collapsedLabel, className: cn(
+                        // Icon span pl-2 (8) + icon size-5 (20) = field-x 8-28.
+                        // Input pl-3 (12) → text starts at field-x = 28 + 12 = 40,
+                        // giving a 12px icon→text gap (matches <Input iconStart>'s
+                        // pl-3 + pl-10 = 12px convention).
+                        "w-full bg-transparent border-0 outline-none text-sm py-2 pl-3 pr-3", "text-[var(--color-text-primary)] placeholder:text-[var(--color-text-placeholder)]") }) }, "search-input")) })] }));
+    return (
+    // Outer horizontal padding mirrors Sidebar.Content (px-3 collapsed,
+    // px-2.5 expanded) so the search row sits on the exact same horizontal
+    // track as the NavItem rows below it — both have a 36px interior on
+    // the 60px collapsed rail, producing identical 36×36 hit-areas.
+    jsx("div", { className: cn(
+        // py-1 keeps the search row in the same vertical rhythm as the
+        // NavGroup's `space-y-1` between nav rows.
+        "py-1 transition-[padding] duration-200 ease-[cubic-bezier(0.4,0,0.2,1)]", isCollapsedView ? "px-3" : "px-2.5", className), ...props, children: isCollapsedView ? (
+        // `triggerClassName="block w-full"` makes the Tooltip's wrapping div
+        // a full-width block instead of its default `inline-block` — without
+        // this, the field collapses to icon-width and sits left-aligned,
+        // leaving empty space on the right of the rail. Same fix NavItem
+        // uses for its collapsed-mode tooltip wrapper.
+        jsx(Tooltip, { content: collapsedLabel, placement: tooltipPlacement, triggerClassName: "block w-full", children: field })) : (field) }));
+});
+SidebarSearch.displayName = "SidebarSearch";
+
+export { SidebarSearch };

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

@@ -1,12 +1,14 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import React__default from 'react';
-import { ChevronRightIcon, ChevronLeftIcon } from '@heroicons/react/24/outline';
+import { CaretLeft } from '@phosphor-icons/react';
 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) => {
+    var _a, _b;
     const sidebarContext = useSidebarContext();
     if (!sidebarContext) {
         if (process.env.NODE_ENV !== "production") {
@@ -19,9 +21,12 @@ const SidebarToggle = React__default.forwardRef(({ expandIcon, collapseIcon, cla
         toggleCollapsed();
         onClick === null || onClick === void 0 ? void 0 : onClick(e);
     };
-    return (jsx(Button, { ref: ref, variant: "ghost", size: "sm", className: cn("size-8 p-0", className), onClick: handleClick, "aria-label": collapsed ? "Expand sidebar" : "Collapse sidebar", title: collapsed ? "Expand sidebar" : "Collapse sidebar", ...props, 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" }) }) }));
+    const { onAnimationStart, onAnimationEnd, onDrag, onDragStart, onDragEnd, color: _color, ...buttonProps } = props;
+    const side = (_a = sidebarContext.side) !== null && _a !== void 0 ? _a : "left";
+    const positionClasses = side === "left"
+        ? "absolute right-0 translate-x-1/2 top-4 z-50"
+        : "absolute left-0 -translate-x-1/2 top-4 z-50";
+    return (jsx(Button, { ref: ref, iconOnly: true, variant: "ghost", className: cn("size-6 p-0 rounded-full border border-[var(--color-border)] bg-[var(--color-background)]/50 backdrop-blur-sm text-[var(--color-text-muted)] hover:text-[var(--color-text-secondary)] hover:shadow-md hover:bg-[var(--color-surface-hover)] opacity-100 transition-all duration-400", positionClasses, className), onClick: handleClick, "aria-label": collapsed ? "Expand sidebar" : "Collapse sidebar", title: collapsed ? "Expand sidebar" : "Collapse sidebar", ...buttonProps, children: (_b = (collapsed ? expandIcon : collapseIcon)) !== null && _b !== void 0 ? _b : (jsx(motion.div, { initial: false, animate: { rotate: collapsed ? 180 : 0 }, transition: { duration: 0.2, ease: [0.4, 0, 0.2, 1] }, className: "flex items-center justify-center", children: jsx(CaretLeft, { className: "size-3", weight: "bold" }) })) }));
 });
 SidebarToggle.displayName = "SidebarToggle";
 

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

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

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

@@ -0,0 +1,49 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import React__default from 'react';
+import { CaretUpDown } from '@phosphor-icons/react';
+import { cn } from '../../../utils/cn.js';
+import { motion, AnimatePresence } from 'motion/react';
+import { useSidebarCollapsed } from './SidebarContext.js';
+import { Avatar } from '../Avatar/Avatar.js';
+import { Tooltip } from '../Tooltip/Tooltip.js';
+import '../Tooltip/Tooltip.animations.js';
+import { Dropdown } from '../Dropdown/Dropdown.js';
+import '../Dropdown/DropdownTrigger.js';
+import '../Dropdown/DropdownMenu.js';
+import '../Dropdown/DropdownItem.js';
+import '../Dropdown/DropdownSection.js';
+import '../Dropdown/DropdownSeparator.js';
+import '../Dropdown/Dropdown.theme.js';
+
+const SidebarUserProfile = React__default.forwardRef(({ name, email, avatar, status, dropdownContent, children, className, onClick, ...props }, ref) => {
+    const { isCollapsedView } = useSidebarCollapsed();
+    // Strip drag/animation DOM handlers that collide with motion's prop types
+    const { onAnimationStart, onAnimationEnd, onDrag, onDragStart, onDragEnd, ...motionSafeProps } = props;
+    const avatarElement = (jsx(Avatar, { src: avatar, name: name, status: status !== null && status !== void 0 ? status : "none", className: "size-9" }));
+    const content = (jsxs(motion.div, { ref: ref, className: cn("flex w-full items-center rounded-[var(--radius-base)] cursor-pointer border border-transparent transition-[padding,gap,background-color,border-color,color,box-shadow] duration-200 ease-[cubic-bezier(0.4,0,0.2,1)] ", isCollapsedView ? "justify-center gap-0 px-1" : "gap-2 ", className), role: "button", tabIndex: 0, onClick: onClick, onKeyDown: (e) => {
+            if ((e.key === "Enter" || e.key === " ") && onClick) {
+                e.preventDefault();
+                e.currentTarget.click();
+            }
+        }, 
+        // whileHover={{ scale: 1.01, x: isCollapsedView ? 0 : 2 }}
+        whileTap: { scale: 0.98 }, transition: { type: "spring", stiffness: 400, damping: 25 }, ...motionSafeProps, children: [jsx(motion.div
+            // whileHover={{ scale: 1.05 }}
+            // transition={{ type: "spring", stiffness: 400, damping: 20 }}
+            , { 
+                // whileHover={{ scale: 1.05 }}
+                // transition={{ type: "spring", stiffness: 400, damping: 20 }}
+                className: "flex-shrink-0", children: avatarElement }), jsx(AnimatePresence, { initial: false, children: !isCollapsedView && (jsxs(motion.div, { className: "flex flex-row items-center gap-2 flex-1 min-w-0 overflow-hidden whitespace-nowrap", initial: { opacity: 0, x: -4 }, animate: { opacity: 1, x: 0 }, exit: { opacity: 0, x: -4 }, transition: {
+                        opacity: { duration: 0.15, ease: [0.4, 0, 0.2, 1] },
+                        x: { duration: 0.2, ease: [0.4, 0, 0.2, 1] }
+                    }, children: [children !== null && children !== void 0 ? children : (jsxs("div", { className: "flex-1 min-w-0", children: [jsx("div", { className: "text-sm font-medium text-[var(--color-text-primary)] truncate", children: name }), email && (jsx("div", { className: "text-xs text-[var(--color-text-secondary)]/80 truncate", children: email }))] })), dropdownContent && (jsx(CaretUpDown, { className: "size-4 flex-shrink-0  text-[var(--color-text-muted)]" }))] }, "profile-text")) })] }));
+    // When dropdownContent is provided, the profile acts as a menu trigger.
+    if (dropdownContent) {
+        return (jsxs(Dropdown, { placement: "right-end", offset: 8, children: [jsx(Dropdown.Trigger, { children: content }), jsx(Dropdown.Menu, { "aria-label": `${name} menu`, children: dropdownContent })] }));
+    }
+    return (jsx(Tooltip, { content: name, placement: "right", disabled: !isCollapsedView, triggerClassName: "block", children: content }));
+});
+SidebarUserProfile.displayName = "SidebarUserProfile";
+
+export { SidebarUserProfile };

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

@@ -4,7 +4,11 @@ export { SidebarContent } from "./SidebarContent";
 export { SidebarFooter } from "./SidebarFooter";
 export { SidebarNav } from "./SidebarNav";
 export { SidebarNavGroup } from "./SidebarNavGroup";
-export { SidebarSubmenu } from "./SidebarSubmenu";
 export { SidebarToggle } from "./SidebarToggle";
-export { useSidebarContext } from "./SidebarContext";
-export type { SidebarProps, SidebarHeaderProps, SidebarContentProps, SidebarFooterProps, SidebarNavProps, SidebarNavGroupProps, SidebarToggleProps, SidebarSide, SidebarVariant, SidebarContextValue, SidebarTheme, SidebarThemeOverrides, } from "./Sidebar.types";
+export { SidebarMobileTrigger } from "./SidebarMobileTrigger";
+export { SidebarUserProfile } from "./SidebarUserProfile";
+export { SidebarLogo } from "./SidebarLogo";
+export { SidebarSearch } from "./SidebarSearch";
+export { SidebarCard } from "./SidebarCard";
+export { SidebarProvider, useSidebarContext } from "./SidebarContext";
+export type { SidebarProps, SidebarHeaderProps, SidebarContentProps, SidebarFooterProps, SidebarNavProps, SidebarNavGroupProps, SidebarToggleProps, SidebarMobileTriggerProps, SidebarUserProfileProps, SidebarUserStatus, SidebarSide, SidebarVariant, SidebarDensity, SidebarContextValue, SidebarProviderProps, SidebarTheme, SidebarThemeOverrides, SidebarLogoProps, SidebarSearchProps, SidebarCardProps, SidebarCardTheme, SidebarCardThemeOverrides, } from "./Sidebar.types";

package/dist/components/core/Skeleton/Skeleton.js

@@ -50,11 +50,11 @@ const Skeleton = React__default.forwardRef(({ variant = 'rectangle', width, heig
                 // Make last line 75% width for more natural look
                 const isLastLine = index === lines - 1;
                 const lineWidth = isLastLine && !width ? '75%' : computedWidth;
-                return (jsx("div", { className: baseClasses, style: { ...computedStyle, width: lineWidth } }, index));
+                return (jsx("div", { className: baseClasses, style: { ...computedStyle, width: lineWidth }, "aria-hidden": "true" }, index));
             }) }));
     }
     // Single skeleton
-    return (jsx("div", { ref: ref, className: baseClasses, style: computedStyle, "aria-busy": "true", "aria-live": "polite", ...props }));
+    return (jsx("div", { ref: ref, className: baseClasses, style: computedStyle, "aria-hidden": "true", ...props }));
 });
 Skeleton.displayName = 'Skeleton';
 

package/dist/components/core/Skeleton/Skeleton.theme.js

@@ -4,7 +4,7 @@
  */
 const skeletonTheme = {
     // Base styles with background color and animation
-    baseStyle: "bg-[var(--color-background-tertiary)] overflow-hidden",
+    baseStyle: "bg-[var(--color-surface-sunken)] overflow-hidden",
     // Shape variants
     variants: {
         text: "h-4 rounded",

package/dist/components/core/SlidingNumber/SlidingNumber.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import React__default, { useMemo } from 'react';
 import { motion, useReducedMotion } from 'motion/react';
@@ -60,7 +61,8 @@ const SlidingNumber = React__default.forwardRef(({ value, decimalPlaces = 0, pad
     const characters = useMemo(() => {
         return formattedNumber.split("");
     }, [formattedNumber]);
-    return (jsx("div", { ref: ref, className: cn("inline-flex items-center justify-center tabular-nums", className), style: ROOT_STYLE, "aria-label": formattedNumber, ...props, children: characters.map((char, index) => {
+    return (jsx("div", { ref: ref, className: cn("inline-flex items-center justify-center tabular-nums", className), style: ROOT_STYLE, role: "img" // Each digit is aria-hidden; role="img" + aria-label makes this a valid accessible-name host
+        , "aria-label": formattedNumber, ...props, children: characters.map((char, index) => {
             const isNumber = /\d/.test(char);
             if (!isNumber) {
                 return (jsx(StaticChar, { char: char, className: digitClassName }, `${char}-${index}`));

package/dist/components/core/Sortable/Sortable.animations.js

@@ -1,3 +1,4 @@
+"use client";
 // Spring configuration for smooth, natural animations
 const springConfig = {
     type: 'spring',

package/dist/components/core/Sortable/Sortable.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { SortableProps, SortableItemProps } from './Sortable.types';
 export declare const Sortable: React.ForwardRefExoticComponent<SortableProps & React.RefAttributes<HTMLUListElement>>;
-export declare const SortableItem: React.ForwardRefExoticComponent<SortableItemProps & React.RefAttributes<HTMLDivElement>>;
+export declare const SortableItem: React.ForwardRefExoticComponent<SortableItemProps & React.RefAttributes<HTMLLIElement>>;

package/dist/components/core/Sortable/Sortable.js

@@ -1,7 +1,8 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import React__default, { createContext, useState, useRef, useMemo, useCallback, useEffect, useContext } from 'react';
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React__default, { createContext, useState, useRef, useId, useMemo, useCallback, useEffect, useContext } from 'react';
 import { Reorder, useDragControls, motion } from 'motion/react';
-import { LockClosedIcon, Bars3Icon } from '@heroicons/react/24/outline';
+import { Lock, List } from '@phosphor-icons/react';
 import { cn } from '../../../utils/cn.js';
 import { sortableTheme } from './Sortable.theme.js';
 import { sortableAnimations } from './Sortable.animations.js';
@@ -19,6 +20,8 @@ const Sortable = React__default.forwardRef(({ children, onReorder, className, th
     const [dropPosition, setDropPosition] = useState(null);
     const itemRefs = useRef(new Map());
     const [draggedItemContent, setDraggedItemContent] = useState(null);
+    const [liveMessage, setLiveMessage] = useState('');
+    const liveRegionId = useId();
     const theme = {
         ...sortableTheme,
         ...customTheme,
@@ -63,8 +66,19 @@ const Sortable = React__default.forwardRef(({ children, onReorder, className, th
         itemRefs,
         draggedItemContent,
         setDraggedItemContent,
+        setLiveMessage,
     }), [direction, showDragHandle, theme, onReorder, onSortDragStart, onSortDragEnd, draggedItem, dropPosition, draggedItemContent]);
-    return (jsx(SortableContext.Provider, { value: contextValue, children: jsx(Reorder.Group, { ref: ref, axis: direction === 'horizontal' ? 'x' : 'y', values: internalValues, onReorder: handleReorder, className: cn(theme.containerStyle, direction === 'horizontal' ? 'flex flex-row' : 'flex flex-col', className), as: "div", children: children }) }));
+    return (jsxs(SortableContext.Provider, { value: contextValue, children: [jsx("div", { id: liveRegionId, "aria-live": "assertive", "aria-atomic": "true", style: {
+                    position: 'absolute',
+                    width: '1px',
+                    height: '1px',
+                    padding: 0,
+                    margin: '-1px',
+                    overflow: 'hidden',
+                    clip: 'rect(0, 0, 0, 0)',
+                    whiteSpace: 'nowrap',
+                    border: 0,
+                }, children: liveMessage }), jsx(Reorder.Group, { ref: ref, axis: direction === 'horizontal' ? 'x' : 'y', values: internalValues, onReorder: handleReorder, className: cn(theme.containerStyle, direction === 'horizontal' ? 'flex flex-row' : 'flex flex-col', className), as: "ul", children: children })] }));
 });
 Sortable.displayName = 'Sortable';
 const SortableItem = React__default.forwardRef(({ id, children, className, theme: customTheme = {}, disabled = false, value, }, forwardedRef) => {
@@ -136,6 +150,9 @@ const SortableItem = React__default.forwardRef(({ id, children, className, theme
         }
         if (targetIndex !== currentIndex) {
             context.onReorder(currentIndex, targetIndex);
+            // Announce the reorder to screen readers via the live region
+            const itemLabel = typeof value === 'string' ? value : id;
+            context.setLiveMessage(`${itemLabel} moved to position ${targetIndex + 1} of ${items.length}`);
             // Focus the item at new position after reorder
             setTimeout(() => {
                 const targetItem = items[targetIndex];
@@ -154,7 +171,7 @@ const SortableItem = React__default.forwardRef(({ id, children, className, theme
         context.setDraggedItemContent(children);
         const items = Array.from(context.itemRefs.current.entries());
         const currentIndex = items.findIndex(([itemId]) => itemId === id);
-        (_a = context.onSortDragStart) === null || _a === void 0 ? void 0 : _a.call(context, { id, index: currentIndex, data: value }, {});
+        (_a = context.onSortDragStart) === null || _a === void 0 ? void 0 : _a.call(context, { id, index: currentIndex, data: value });
     }, [disabled, id, children, context, value]);
     const handleDragEnd = useCallback(() => {
         var _a;
@@ -164,7 +181,7 @@ const SortableItem = React__default.forwardRef(({ id, children, className, theme
         context.setDropPosition(null);
         const items = Array.from(context.itemRefs.current.entries());
         const currentIndex = items.findIndex(([itemId]) => itemId === id);
-        (_a = context.onSortDragEnd) === null || _a === void 0 ? void 0 : _a.call(context, { id, index: currentIndex, data: value }, {});
+        (_a = context.onSortDragEnd) === null || _a === void 0 ? void 0 : _a.call(context, { id, index: currentIndex, data: value });
     }, [id, context, value]);
     const handlePointerDown = useCallback((event) => {
         if (disabled) {
@@ -185,7 +202,7 @@ const SortableItem = React__default.forwardRef(({ id, children, className, theme
         dragControls.start(event);
     }, [disabled, dragControls]);
     const isBeingDragged = context.draggedItem === id;
-    return (jsxs(Reorder.Item, { ref: (node) => {
+    return (jsxs(Reorder.Item, { as: "li", ref: (node) => {
             itemRef.current = node;
             if (typeof forwardedRef === 'function') {
                 forwardedRef(node);
@@ -195,7 +212,7 @@ const SortableItem = React__default.forwardRef(({ id, children, className, theme
             }
         }, value: value || id, id: id, dragListener: !context.showDragHandle && !disabled, dragControls: context.showDragHandle ? dragControls : undefined, onDragStart: handleDragStart, onDragEnd: handleDragEnd, onPointerDown: handlePointerDown, tabIndex: disabled ? -1 : 0, onKeyDown: handleKeyDown, onFocus: () => setIsFocused(true), onBlur: () => setIsFocused(false), className: cn(theme.itemStyle, context.showDragHandle && 'flex items-center gap-2', disabled && 'opacity-50 cursor-not-allowed', !disabled && !context.showDragHandle && 'cursor-grab active:cursor-grabbing', isBeingDragged && 'shadow-lg z-50', isFocused && !disabled && 'ring-2 ring-blue-500 ring-offset-2', className), style: {
             position: 'relative',
-        }, variants: sortableAnimations.variants, animate: isBeingDragged ? 'dragging' : 'idle', transition: sortableAnimations.layout.layout, children: [context.showDragHandle && (jsx(motion.div, { onPointerDown: handleDragHandlePointerDown, className: cn(theme.dragHandleStyle, disabled && 'cursor-not-allowed opacity-60', !disabled && 'cursor-grab active:cursor-grabbing'), whileHover: !disabled ? sortableAnimations.dragHandle.hover : undefined, whileTap: !disabled ? sortableAnimations.dragHandle.tap : undefined, children: disabled ? (jsx(LockClosedIcon, { className: "w-4 h-4 text-gray-500" })) : (jsx(Bars3Icon, { className: "w-4 h-4" })) })), jsx("div", { className: "flex-1", children: children })] }));
+        }, variants: sortableAnimations.variants, animate: isBeingDragged ? 'dragging' : 'idle', transition: sortableAnimations.layout.layout, children: [context.showDragHandle && (jsx(motion.div, { onPointerDown: handleDragHandlePointerDown, className: cn(theme.dragHandleStyle, disabled && 'cursor-not-allowed opacity-60', !disabled && 'cursor-grab active:cursor-grabbing'), whileHover: !disabled ? sortableAnimations.dragHandle.hover : undefined, whileTap: !disabled ? sortableAnimations.dragHandle.tap : undefined, children: disabled ? (jsx(Lock, { className: "w-4 h-4 text-gray-500" })) : (jsx(List, { className: "w-4 h-4" })) })), jsx("div", { className: "flex-1", children: children })] }));
 });
 SortableItem.displayName = 'SortableItem';
 

package/dist/components/core/Sortable/Sortable.theme.js

@@ -1,7 +1,7 @@
 const sortableTheme = {
     containerStyle: "relative list-none",
     itemStyle: "relative cursor-move select-none relative focus-within:z-10 list-none",
-    dragHandleStyle: "cursor-grab active:cursor-grabbing p-1 text-gray-400 hover:text-gray-600 flex items-center justify-center rounded transition-colors duration-200",
+    dragHandleStyle: "cursor-grab active:cursor-grabbing p-1 text-[var(--color-text-muted)] hover:text-[var(--color-text-secondary)] flex items-center justify-center rounded transition-colors duration-200",
 };
 
 export { sortableTheme };

package/dist/components/core/Sortable/Sortable.types.d.ts

@@ -1,9 +1,11 @@
-import { HTMLAttributes, ReactNode, DragEvent } from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
 export interface SortableData {
     id: string;
     index: number;
     data?: string | number | Record<string, unknown>;
 }
+/** Event type for sort drag callbacks - may be a native event, React event, or absent (keyboard-initiated) */
+export type SortableEvent = React.KeyboardEvent<HTMLDivElement> | Event | undefined;
 export interface SortableTheme {
     containerStyle: string;
     itemStyle: string;
@@ -28,9 +30,9 @@ export interface SortableProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onD
     /** Show drag handles */
     showDragHandle?: boolean;
     /** Called when drag starts */
-    onSortDragStart?: (data: SortableData, event: DragEvent<HTMLDivElement>) => void;
+    onSortDragStart?: (data: SortableData, event?: SortableEvent) => void;
     /** Called when drag ends */
-    onSortDragEnd?: (data: SortableData, event: DragEvent<HTMLDivElement>) => void;
+    onSortDragEnd?: (data: SortableData, event?: SortableEvent) => void;
     /** Optional array of values for Reorder.Group - auto-extracted from children if not provided */
     values?: (string | number)[];
 }
@@ -53,8 +55,8 @@ export interface SortableContextValue {
     showDragHandle: boolean;
     theme: SortableTheme;
     onReorder: (fromIndex: number, toIndex: number) => void;
-    onSortDragStart?: (data: SortableData, event: DragEvent<HTMLDivElement>) => void;
-    onSortDragEnd?: (data: SortableData, event: DragEvent<HTMLDivElement>) => void;
+    onSortDragStart?: (data: SortableData, event?: SortableEvent) => void;
+    onSortDragEnd?: (data: SortableData, event?: SortableEvent) => void;
     draggedItem: string | null;
     setDraggedItem: (id: string | null) => void;
     dropPosition: {
@@ -68,4 +70,6 @@ export interface SortableContextValue {
     itemRefs: React.MutableRefObject<Map<string, HTMLDivElement>>;
     draggedItemContent: React.ReactNode | null;
     setDraggedItemContent: (content: React.ReactNode | null) => void;
+    /** Update the visually-hidden live region with a reorder announcement */
+    setLiveMessage: (message: string) => void;
 }

package/dist/components/core/Spinner/Spinner.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import React__default, { useMemo } from 'react';
 import { spinnerTheme } from './Spinner.theme.js';