@flikk/ui 1.0.0-beta.22 → 1.0.0-beta.24

package/dist/components/core/Popover/PopoverBody.js

@@ -1,5 +1,5 @@
 import { jsx } from 'react/jsx-runtime';
-import React__default, { useRef, useEffect, useCallback, useState } from 'react';
+import React__default, { useRef, useEffect, useCallback } from 'react';
 import { useReducedMotion, AnimatePresence, motion } from 'motion/react';
 import { createPortal } from 'react-dom';
 import { cn } from '../../../utils/cn.js';
@@ -9,6 +9,7 @@ import { popoverTransitions, popoverContentVariants } from './Popover.animations
 import { useSelectPortal } from '../../../hooks/useSelectPortal.js';
 import { Overlay } from '../../effects/Overlay/Overlay.js';
 import { useIsClient } from '../../../hooks/useIsClient.js';
+import { useDarkMode } from '../../../hooks/useDarkMode.js';
 
 /** Overlay backdrop animations (fade in/out) */
 const overlayBackdropAnimations = {
@@ -22,31 +23,6 @@ const overlayContentAnimations = {
     animate: { opacity: 1, scale: 1, transition: { duration: 0.2 } },
     exit: { opacity: 0, scale: 0.95, transition: { duration: 0.15 } },
 };
-const useDarkMode = () => {
-    const [isDark, setIsDark] = useState(false);
-    useEffect(() => {
-        if (typeof document === "undefined")
-            return;
-        const checkDarkMode = () => {
-            const hasDarkClass = document.documentElement.classList.contains("dark") ||
-                document.body.classList.contains("dark") ||
-                document.querySelector(".dark") !== null;
-            setIsDark(hasDarkClass);
-        };
-        checkDarkMode();
-        const observer = new MutationObserver(checkDarkMode);
-        observer.observe(document.documentElement, {
-            attributes: true,
-            attributeFilter: ["class"],
-        });
-        observer.observe(document.body, {
-            attributes: true,
-            attributeFilter: ["class"],
-        });
-        return () => observer.disconnect();
-    }, []);
-    return isDark;
-};
 /**
  * PopoverBody component displays the body/content of the popover
  */
@@ -140,7 +116,7 @@ const PopoverBody = React__default.forwardRef(({ children, className, animation
                 : undefined, children: jsx("div", { id: contentId, "data-state": isOpen ? "open" : "closed", "data-placement": placement, "data-trigger": triggerType, ...domProps, children: children }) }));
     }
     // Without backdrop: manual portal + positioning + escape + click-outside
-    const popoverContent = (jsx(AnimatePresence, { children: isOpen && (jsx(motion.div, { ref: handleRef, id: contentId, className: cn("fixed z-50", contentClasses), style: contentPositionStyle, role: "dialog", "aria-modal": "true", variants: shouldReduceMotion || !animation ? {} : popoverContentVariants, initial: shouldReduceMotion || !animation ? undefined : "hidden", animate: shouldReduceMotion || !animation ? undefined : (isReady ? "visible" : "hidden"), exit: shouldReduceMotion || !animation ? undefined : "exit", transition: shouldReduceMotion || !animation
+    const popoverContent = (jsx(AnimatePresence, { children: isOpen && (jsx(motion.div, { ref: handleRef, id: contentId, className: cn("fixed z-50", contentClasses), style: contentPositionStyle, variants: shouldReduceMotion || !animation ? {} : popoverContentVariants, initial: shouldReduceMotion || !animation ? undefined : "hidden", animate: shouldReduceMotion || !animation ? undefined : (isReady ? "visible" : "hidden"), exit: shouldReduceMotion || !animation ? undefined : "exit", transition: shouldReduceMotion || !animation
                 ? { duration: 0 }
                 : popoverTransitions.content, "data-state": isOpen ? "open" : "closed", "data-placement": placement, "data-trigger": triggerType, onClick: (e) => e.stopPropagation(), ...domProps, children: children })) }));
     if (portal && isClient) {

package/dist/components/core/Popover/PopoverTrigger.js

@@ -60,7 +60,7 @@ const PopoverTrigger = React__default.forwardRef(({ children, className, ...prop
     return React__default.cloneElement(childElement, {
         ref: mergeRefs,
         "aria-expanded": context.isOpen,
-        "aria-haspopup": true,
+        ...(context.hasBackdrop ? { "aria-haspopup": "dialog" } : {}),
         "aria-controls": context.contentId,
         className: cn("popover-trigger", (_a = childElement.props) === null || _a === void 0 ? void 0 : _a.className, className),
         "data-state": context.isOpen ? "open" : "closed",

package/dist/components/core/Progress/Progress.js

@@ -35,7 +35,7 @@ const PROGRESS_SPRING_TRANSITION = {
  * // Indeterminate (loading)
  * <Progress />
  */
-const Progress = React__default.forwardRef(({ value, size = "md", showLabel = false, labelPosition = "right", formatLabel, animated = true, wrapperClassName, className, theme: customTheme, ...props }, ref) => {
+const Progress = React__default.forwardRef(({ value, size = "md", showLabel = false, labelPosition = "right", formatLabel, animated = true, wrapperClassName, className, theme: customTheme, 'aria-label': consumerAriaLabel, ...props }, ref) => {
     const shouldReduceMotion = useReducedMotion();
     // Merge custom theme with default theme
     const theme = useMemo(() => {
@@ -98,11 +98,11 @@ const Progress = React__default.forwardRef(({ value, size = "md", showLabel = fa
     const renderTrack = () => (jsxs("div", { className: cn(theme.trackStyle, theme.sizes[size], "relative", wrapperClassName), children: [isIndeterminate ? (
             // Indeterminate animation
             jsx("div", { className: cn(theme.fillStyle, "absolute", theme.indeterminateStyle, className) })) : shouldAnimate ? (
-            // Animated determinate progress with spring animation
-            jsx(motion.div, { className: cn(theme.fillStyle, className), initial: { width: 0 }, animate: { width: `${percentage}%` }, transition: PROGRESS_SPRING_TRANSITION })) : (
+            // Animated determinate progress with spring animation (scaleX avoids layout recalculation)
+            jsx(motion.div, { className: cn(theme.fillStyle, className), style: { width: '100%', transformOrigin: 'left' }, initial: { scaleX: 0 }, animate: { scaleX: percentage / 100 }, transition: PROGRESS_SPRING_TRANSITION })) : (
             // Static determinate progress
             jsx("div", { className: cn(theme.fillStyle, className), style: { width: `${percentage}%` } })), showLabel && labelPosition === "inside" && size === "lg" && !isIndeterminate && (jsx("span", { className: theme.insideLabelStyle, children: label }))] }));
-    return (jsxs("div", { ref: ref, className: cn(theme.containerStyle, containerLayoutClass), role: "progressbar", "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": isIndeterminate ? undefined : percentage, "aria-label": isIndeterminate ? "Loading" : `${percentage}% complete`, ...props, children: [labelPosition === "top" && renderLabel(), labelPosition === "right" ? (jsxs(Fragment, { children: [jsx("div", { className: "flex-1", children: renderTrack() }), renderLabel()] })) : (renderTrack()), labelPosition === "bottom" && renderLabel()] }));
+    return (jsxs("div", { ref: ref, className: cn(theme.containerStyle, containerLayoutClass), role: "progressbar", "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": isIndeterminate ? undefined : percentage, "aria-label": consumerAriaLabel !== null && consumerAriaLabel !== void 0 ? consumerAriaLabel : (isIndeterminate ? "Loading" : `${percentage}% complete`), ...props, children: [labelPosition === "top" && renderLabel(), labelPosition === "right" ? (jsxs(Fragment, { children: [jsx("div", { className: "flex-1", children: renderTrack() }), renderLabel()] })) : (renderTrack()), labelPosition === "bottom" && renderLabel()] }));
 });
 Progress.displayName = "Progress";
 

package/dist/components/core/Rating/Rating.js

@@ -160,7 +160,7 @@ const Rating = React__default.memo(React__default.forwardRef(({ value: controlle
             return (jsx("span", { className: "inline-flex items-center justify-center", children: renderStarIcon() }, starIndex));
         }
         // Interactive: render as a button
-        return (jsx("button", { type: "button", className: cn(theme.starStyle, "hover:scale-110 active:scale-95"), onClick: (e) => handleStarClick(starIndex, e), onMouseMove: (e) => handleStarMouseMove(starIndex, e), "aria-label": `Rate ${starIndex} out of ${max}`, tabIndex: -1, children: renderStarIcon() }, starIndex));
+        return (jsx("button", { type: "button", className: cn(theme.starStyle, "hover:scale-110 active:scale-95"), onClick: (e) => handleStarClick(starIndex, e), onMouseMove: (e) => handleStarMouseMove(starIndex, e), "aria-label": `Rate ${starIndex} out of ${max}`, tabIndex: -1, "aria-hidden": "true", children: renderStarIcon() }, starIndex));
     };
     // Build array of star indices (1-based)
     const stars = useMemo(() => Array.from({ length: max }, (_, i) => i + 1), [max]);

package/dist/components/core/ScrollArea/ScrollArea.js

@@ -50,8 +50,9 @@ const ScrollArea = React__default.forwardRef(({ children, type = 'hover', size =
     const smoothAPI = useSmoothScroll(smooth ? internalRef : null, smoothScrollConfig, smoothOrientation);
     // Expose extended API via ref
     useImperativeHandle(ref, () => {
-        if (!internalRef.current)
-            return null;
+        // internalRef.current is always set by the time the imperative handle is
+        // accessed (refs are resolved after mount). The non-null assertion avoids
+        // the unsafe `null as unknown as ScrollAreaRef` double-cast.
         const element = internalRef.current;
         // Create extended ref object
         const extendedRef = element;

package/dist/components/core/Segmented/Segmented.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import React__default, { useRef, useState, useEffect, useMemo } from 'react';
+import React__default, { useRef, useState, useCallback, useEffect, useMemo } from 'react';
 import { cn } from '../../../utils/cn.js';
 import { debounce } from '../../../utils/debounce.js';
 import { segmentedTheme } from './Segmented.theme.js';
@@ -10,11 +10,11 @@ import { SegmentedItem } from './SegmentedItem.js';
  * Segmented component for selecting one option from a set of segments
  * Uses compound component pattern with Segmented.Item
  */
-const SegmentedComponent = React__default.forwardRef(({ value, onChange, size = "md", disabled = false, block = false, children, className, slidingBackgroundClassName, theme, ...props }, ref) => {
+const SegmentedComponent = React__default.forwardRef(({ value, onChange, size = "md", disabled = false, block = false, children, className, slidingBackgroundClassName, theme, "aria-label": ariaLabel, ...props }, ref) => {
     var _a;
     const containerRef = useRef(null);
     const [activeStyle, setActiveStyle] = useState({});
-    const updateActiveStyle = () => {
+    const updateActiveStyle = useCallback(() => {
         if (!containerRef.current || !value)
             return;
         const activeButton = containerRef.current.querySelector(`[data-value="${value}"]`);
@@ -28,10 +28,10 @@ const SegmentedComponent = React__default.forwardRef(({ value, onChange, size =
                 transform: `translateX(${buttonRect.left - containerRect.left}px)`,
             });
         }
-    };
+    }, [value]);
     useEffect(() => {
         updateActiveStyle();
-    }, [value]);
+    }, [value, updateActiveStyle]);
     // Debounced resize handler for better performance
     const debouncedUpdateActiveStyle = useMemo(() => debounce(updateActiveStyle, 100), [updateActiveStyle]);
     useEffect(() => {
@@ -52,7 +52,7 @@ const SegmentedComponent = React__default.forwardRef(({ value, onChange, size =
                 else if (ref) {
                     ref.current = node;
                 }
-            }, role: "tablist", "aria-orientation": "horizontal", className: cn((theme === null || theme === void 0 ? void 0 : theme.baseStyle) || segmentedTheme.baseStyle, ((_a = theme === null || theme === void 0 ? void 0 : theme.sizes) === null || _a === void 0 ? void 0 : _a[size]) || segmentedTheme.sizes[size], block && ((theme === null || theme === void 0 ? void 0 : theme.blockStyle) || segmentedTheme.blockStyle), disabled && ((theme === null || theme === void 0 ? void 0 : theme.disabledStyle) || segmentedTheme.disabledStyle), className), "data-size": size, "data-disabled": disabled, "data-block": block, ...props, children: [value && (jsx("div", { className: cn((theme === null || theme === void 0 ? void 0 : theme.slidingBackgroundStyle) ||
+            }, role: "radiogroup", "aria-label": ariaLabel, className: cn((theme === null || theme === void 0 ? void 0 : theme.baseStyle) || segmentedTheme.baseStyle, ((_a = theme === null || theme === void 0 ? void 0 : theme.sizes) === null || _a === void 0 ? void 0 : _a[size]) || segmentedTheme.sizes[size], block && ((theme === null || theme === void 0 ? void 0 : theme.blockStyle) || segmentedTheme.blockStyle), disabled && ((theme === null || theme === void 0 ? void 0 : theme.disabledStyle) || segmentedTheme.disabledStyle), className), "data-size": size, "data-disabled": disabled, "data-block": block, ...props, children: [value && (jsx("div", { className: cn((theme === null || theme === void 0 ? void 0 : theme.slidingBackgroundStyle) ||
                         segmentedTheme.slidingBackgroundStyle, slidingBackgroundClassName), style: activeStyle })), children] }) }));
 });
 // Set display name for dev tools and Storybook

package/dist/components/core/Segmented/SegmentedItem.js

@@ -18,10 +18,36 @@ const SegmentedItem = React__default.forwardRef(({ value, disabled = false, chil
         onChange === null || onChange === void 0 ? void 0 : onChange(value);
         onClick === null || onClick === void 0 ? void 0 : onClick(event);
     };
-    return (jsx("button", { ref: ref, type: "button", role: "tab", "aria-selected": isSelected, disabled: isDisabled, className: cn(segmentedItemTheme.baseStyle, segmentedItemTheme.sizes[size], isSelected
+    const handleKeyDown = (event) => {
+        if (isDisabled)
+            return;
+        const radioGroup = event.currentTarget.parentElement;
+        if (!radioGroup)
+            return;
+        const radios = Array.from(radioGroup.querySelectorAll('[role="radio"]:not([disabled])'));
+        const currentIndex = radios.indexOf(event.currentTarget);
+        let targetRadio;
+        if (event.key === 'ArrowRight' || event.key === 'ArrowDown') {
+            event.preventDefault();
+            targetRadio = radios[(currentIndex + 1) % radios.length];
+        }
+        else if (event.key === 'ArrowLeft' || event.key === 'ArrowUp') {
+            event.preventDefault();
+            targetRadio = radios[(currentIndex - 1 + radios.length) % radios.length];
+        }
+        if (targetRadio) {
+            targetRadio.focus();
+            // Read the value from the data attribute and trigger selection
+            const targetValue = targetRadio.getAttribute('data-value');
+            if (targetValue) {
+                onChange === null || onChange === void 0 ? void 0 : onChange(targetValue);
+            }
+        }
+    };
+    return (jsx("button", { ref: ref, type: "button", role: "radio", "aria-checked": isSelected, tabIndex: isSelected ? 0 : -1, disabled: isDisabled, className: cn(segmentedItemTheme.baseStyle, segmentedItemTheme.sizes[size], isSelected
             ? segmentedItemTheme.selectedStyle
             : segmentedItemTheme.unselectedStyle, isDisabled && segmentedItemTheme.disabledStyle, className // User overrides take precedence
-        ), onClick: handleClick, "data-value": value, "data-selected": isSelected, "data-disabled": isDisabled, ...props, children: children }));
+        ), onClick: handleClick, onKeyDown: handleKeyDown, "data-value": value, "data-selected": isSelected, "data-disabled": isDisabled, ...props, children: children }));
 });
 // Set display name for dev tools and Storybook
 SegmentedItem.displayName = "Segmented.Item";

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

@@ -10,4 +10,5 @@ export declare const Sidebar: React.ForwardRefExoticComponent<SidebarProps & Rea
     Toggle: React.ForwardRefExoticComponent<import("./Sidebar.types").SidebarToggleProps & React.RefAttributes<HTMLButtonElement>>;
     MobileTrigger: React.ForwardRefExoticComponent<import("./Sidebar.types").SidebarMobileTriggerProps & React.RefAttributes<HTMLButtonElement>>;
     UserProfile: React.ForwardRefExoticComponent<import("./Sidebar.types").SidebarUserProfileProps & React.RefAttributes<HTMLDivElement>>;
+    Logo: React.ForwardRefExoticComponent<import("./Sidebar.types").SidebarLogoProps & React.RefAttributes<HTMLDivElement>>;
 };

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

@@ -13,11 +13,12 @@ import { SidebarSubmenu } from './SidebarSubmenu.js';
 import { SidebarToggle } from './SidebarToggle.js';
 import { SidebarMobileTrigger } from './SidebarMobileTrigger.js';
 import { SidebarUserProfile } from './SidebarUserProfile.js';
+import { SidebarLogo } from './SidebarLogo.js';
 
 const SIDEBAR_TRANSITION = {
-    type: "spring",
-    stiffness: 300,
-    damping: 30,
+    type: "tween",
+    duration: 0.22,
+    ease: [0.4, 0, 0.2, 1],
 };
 const SidebarDesktop = React__default.forwardRef(({ side = "left", variant = "sidebar", width, children, className, theme: customTheme = {}, ...props }, ref) => {
     var _a, _b, _c;
@@ -73,6 +74,7 @@ const Sidebar = Object.assign(SidebarRoot, {
     Toggle: SidebarToggle,
     MobileTrigger: SidebarMobileTrigger,
     UserProfile: SidebarUserProfile,
+    Logo: SidebarLogo,
 });
 
 export { Sidebar };

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

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import { ReactNode, HTMLAttributes } from 'react';
 export type SidebarSide = 'left' | 'right';
 export type SidebarVariant = 'sidebar' | 'floating' | 'inset';
 export type SidebarUserStatus = 'online' | 'offline' | 'away' | 'busy';
@@ -158,6 +158,12 @@ export interface SidebarUserProfileProps extends React.HTMLAttributes<HTMLDivEle
      */
     dropdownContent?: ReactNode;
 }
+export interface SidebarLogoProps extends HTMLAttributes<HTMLDivElement> {
+    /** Always-visible icon/mark (shown in both expanded and collapsed states) */
+    icon: ReactNode;
+    /** Text shown only when expanded — animates in/out automatically */
+    text?: ReactNode;
+}
 export interface SidebarTheme {
     baseStyle: string;
     variants: {

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

@@ -8,7 +8,7 @@ const SidebarContent = React__default.forwardRef(({ children, className, ...prop
     const collapsed = (sidebarContext === null || sidebarContext === void 0 ? void 0 : sidebarContext.collapsed) || false;
     const isMobile = (sidebarContext === null || sidebarContext === void 0 ? void 0 : sidebarContext.isMobile) || false;
     const isCollapsedView = collapsed && !isMobile;
-    return (jsx("div", { ref: ref, className: cn("flex-1 overflow-y-auto overflow-x-hidden py-2 transition-all duration-200", isCollapsedView ? "px-2" : "px-3", className), ...props, children: children }));
+    return (jsx("div", { ref: ref, className: cn("flex-1 overflow-y-auto overflow-x-hidden py-3 transition-all duration-200", isCollapsedView ? "px-2" : "px-2.5", className), ...props, children: children }));
 });
 SidebarContent.displayName = "SidebarContent";
 

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

@@ -8,7 +8,7 @@ const SidebarFooter = React__default.forwardRef(({ children, className, ...props
     const collapsed = (sidebarContext === null || sidebarContext === void 0 ? void 0 : sidebarContext.collapsed) || false;
     const isMobile = (sidebarContext === null || sidebarContext === void 0 ? void 0 : sidebarContext.isMobile) || false;
     const isCollapsedView = collapsed && !isMobile;
-    return (jsx("div", { ref: ref, className: cn("flex-shrink-0 border-t border-[var(--color-border)] transition-all duration-200", isCollapsedView ? "p-2 flex justify-center" : "p-4", className), ...props, children: children }));
+    return (jsx("div", { ref: ref, className: cn("flex-shrink-0 border-t border-[var(--color-border)] transition-all duration-200", isCollapsedView ? "p-2 flex justify-center" : "p-3", className), ...props, children: children }));
 });
 SidebarFooter.displayName = "SidebarFooter";
 

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

@@ -1,4 +1,4 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import React__default from 'react';
 import { XMarkIcon } from '@heroicons/react/24/outline';
 import { cn } from '../../../utils/cn.js';
@@ -15,7 +15,10 @@ const SidebarHeader = React__default.forwardRef(({ logo, showToggle = true, cust
     if (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)] transition-all duration-200", collapsed && !isMobile ? "px-3" : "px-4", className), ...props, children: [jsx("div", { className: cn("flex items-center min-w-0 transition-all duration-200", collapsed && !isMobile ? "flex-shrink-0" : "flex-1"), children: logo }), isMobile && isMobileOpen && (jsx(Button, { variant: "soft", size: "sm", className: "size-8 p-0", onClick: () => sidebarContext === null || sidebarContext === void 0 ? void 0 : sidebarContext.setMobileOpen(false), "aria-label": "Close navigation", children: jsx(XMarkIcon, { className: "size-5" }) })), !isMobile && showToggle && (jsx("div", { className: "flex-shrink-0", children: customToggle || jsx(SidebarToggle, {}) }))] }));
+    const isCollapsedDesktop = collapsed && !isMobile;
+    return (jsx("div", { ref: ref, className: cn("flex items-center flex-shrink-0 h-14 border-b border-[var(--color-border)] overflow-hidden", isCollapsedDesktop ? "justify-center px-2" : "justify-between px-3", className), ...props, children: isCollapsedDesktop ? (
+        /* Collapsed: only show the toggle (expand) button centered */
+        showToggle && (customToggle || jsx(SidebarToggle, {}))) : (jsxs(Fragment, { 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 && (jsx("div", { className: "flex-shrink-0", children: 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,17 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React__default from 'react';
+import { cn } from '../../../utils/cn.js';
+import { AnimatePresence, motion } from 'motion/react';
+import { useSidebarContext } from './SidebarContext.js';
+
+const SidebarLogo = React__default.forwardRef(({ icon, text, className, ...props }, ref) => {
+    var _a, _b;
+    const context = useSidebarContext();
+    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;
+    const isCollapsedView = collapsed && !isMobile;
+    return (jsxs("div", { ref: ref, className: cn("flex items-center gap-2 overflow-hidden", 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-lg font-bold text-[var(--color-text-primary)]", children: text })) : (text) }, "logo-text")) })] }));
+});
+SidebarLogo.displayName = "SidebarLogo";
+
+export { SidebarLogo };

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

@@ -1,6 +1,7 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import React__default from 'react';
 import { cn } from '../../../utils/cn.js';
+import { AnimatePresence, motion } from 'motion/react';
 import { useSidebarContext } from './SidebarContext.js';
 
 const SidebarNavGroup = React__default.forwardRef(({ title, showTitleWhenCollapsed = false, children, className, ...props }, ref) => {
@@ -9,7 +10,7 @@ const SidebarNavGroup = React__default.forwardRef(({ title, showTitleWhenCollaps
     const isMobile = (sidebarContext === null || sidebarContext === void 0 ? void 0 : sidebarContext.isMobile) || false;
     const isCollapsedView = collapsed && !isMobile;
     const showTitle = title && (!isCollapsedView || 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-sm font-semibold text-[var(--color-text-muted)] uppercase tracking-wider", children: title }) })), isCollapsedView && !showTitleWhenCollapsed && (jsx("div", { className: "h-px bg-[var(--color-border)] mx-2 my-2" })), jsx("div", { className: "space-y-1", children: children })] }));
+    return (jsxs("div", { ref: ref, className: cn("space-y-1", className), ...props, children: [jsx(AnimatePresence, { initial: false, children: showTitle && (jsx(motion.div, { initial: { opacity: 0, height: 0 }, animate: { opacity: 1, height: "auto" }, exit: { opacity: 0, height: 0 }, transition: { duration: 0.15, ease: "easeInOut" }, className: "overflow-hidden", children: jsx("div", { className: "px-2 py-1", children: jsx("h3", { className: "text-xs font-semibold text-[var(--color-text-muted)] uppercase tracking-wider", children: title }) }) }, "title")) }), jsx(AnimatePresence, { initial: false, children: isCollapsedView && !showTitleWhenCollapsed && (jsx(motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.15 }, className: "h-px bg-[var(--color-border)] mx-2 my-1" }, "sep")) }), jsx("div", { className: "space-y-1", children: children })] }));
 });
 SidebarNavGroup.displayName = "SidebarNavGroup";
 

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

@@ -1,6 +1,6 @@
 import { jsx } from 'react/jsx-runtime';
 import React__default from 'react';
-import { ChevronRightIcon, ChevronLeftIcon } from '@heroicons/react/24/outline';
+import { ChevronLeftIcon } from '@heroicons/react/24/outline';
 import { motion } from 'motion/react';
 import { cn } from '../../../utils/cn.js';
 import { useSidebarContext } from './SidebarContext.js';
@@ -20,9 +20,7 @@ const SidebarToggle = React__default.forwardRef(({ expandIcon, collapseIcon, cla
         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" }) }) }));
+    return (jsx(Button, { ref: ref, variant: "ghost", size: "sm", className: cn("size-7 p-0 text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] hover:bg-[var(--color-background-secondary)]", 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.22, ease: [0.4, 0, 0.2, 1] }, children: jsx(ChevronLeftIcon, { className: "size-[15px]" }) }) }));
 });
 SidebarToggle.displayName = "SidebarToggle";
 

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

@@ -1,6 +1,7 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import React__default from 'react';
 import { cn } from '../../../utils/cn.js';
+import { AnimatePresence, motion } from 'motion/react';
 import { useSidebarContext } from './SidebarContext.js';
 import { Avatar } from '../Avatar/Avatar.js';
 import { Tooltip } from '../Tooltip/Tooltip.js';
@@ -23,12 +24,8 @@ const SidebarUserProfile = React__default.forwardRef(({ name, email, avatar, sta
                 e.preventDefault();
                 e.currentTarget.click();
             }
-        }, ...props, children: [avatarElement, !isCollapsedView && (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-muted)] truncate", children: email }))] }))] }));
-    // Tooltip when collapsed
-    if (isCollapsedView) {
-        return (jsx(Tooltip, { content: name, placement: "right", children: content }));
-    }
-    return content;
+        }, ...props, children: [avatarElement, jsx(AnimatePresence, { initial: false, children: !isCollapsedView && (jsxs(motion.div, { className: "flex-1 min-w-0", initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.12, ease: "easeOut" }, 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-muted)] truncate", children: email }))] }, "profile-text")) })] }));
+    return (jsx(Tooltip, { content: name, placement: "right", disabled: !isCollapsedView, triggerClassName: "block", children: content }));
 });
 SidebarUserProfile.displayName = "SidebarUserProfile";
 

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

@@ -8,5 +8,6 @@ export { SidebarSubmenu } from "./SidebarSubmenu";
 export { SidebarToggle } from "./SidebarToggle";
 export { SidebarMobileTrigger } from "./SidebarMobileTrigger";
 export { SidebarUserProfile } from "./SidebarUserProfile";
+export { SidebarLogo } from "./SidebarLogo";
 export { useSidebarContext } from "./SidebarContext";
-export type { SidebarProps, SidebarHeaderProps, SidebarContentProps, SidebarFooterProps, SidebarNavProps, SidebarNavGroupProps, SidebarToggleProps, SidebarMobileTriggerProps, SidebarUserProfileProps, SidebarUserStatus, SidebarSide, SidebarVariant, SidebarContextValue, SidebarTheme, SidebarThemeOverrides, } from "./Sidebar.types";
+export type { SidebarProps, SidebarHeaderProps, SidebarContentProps, SidebarFooterProps, SidebarNavProps, SidebarNavGroupProps, SidebarToggleProps, SidebarMobileTriggerProps, SidebarUserProfileProps, SidebarUserStatus, SidebarSide, SidebarVariant, SidebarContextValue, SidebarTheme, SidebarThemeOverrides, SidebarLogoProps, } 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/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,5 +1,5 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import React__default, { createContext, useState, useRef, useMemo, useCallback, useEffect, useContext } from 'react';
+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 { cn } from '../../../utils/cn.js';
@@ -19,6 +19,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 +65,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 +149,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];
@@ -185,7 +201,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);

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

@@ -70,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/Tabs/Tabs.js

@@ -1,5 +1,5 @@
 import { jsx } from 'react/jsx-runtime';
-import React__default, { useState, useRef, useCallback, useMemo } from 'react';
+import React__default, { useState, useId, useRef, useCallback, useMemo } from 'react';
 import { cn } from '../../../utils/cn.js';
 import { tabsTheme } from './Tabs.theme.js';
 import { TabsContext } from './TabsContext.js';
@@ -14,6 +14,8 @@ import { TabsBody } from './TabsBody.js';
  */
 const TabsComponent = React__default.forwardRef(({ value, defaultValue, onValueChange, orientation = "horizontal", size = "md", disabled = false, children, className, darkMode = false, ...props }, ref) => {
     const [currentValue, setCurrentValue] = useState(value || defaultValue || "");
+    // Unique instance prefix to scope all DOM IDs to this Tabs instance
+    const instanceId = useId();
     // Track trigger elements for underline positioning
     const triggerRefs = useRef(new Map());
     // Handle controlled vs uncontrolled
@@ -68,15 +70,15 @@ const TabsComponent = React__default.forwardRef(({ value, defaultValue, onValueC
         disabled,
         registerTrigger,
         unregisterTrigger,
-    }), [activeValue, handleValueChange, orientation, size, disabled, registerTrigger, unregisterTrigger]);
+        instanceId,
+    }), [activeValue, handleValueChange, orientation, size, disabled, registerTrigger, unregisterTrigger, instanceId]);
     // Memoize theme classes for performance
     const themeClasses = useMemo(() => ({
         baseStyle: tabsTheme.baseStyle,
         disabledStyle: disabled ? "opacity-50 cursor-not-allowed pointer-events-none" : "",
     }), [disabled]);
     return (jsx(TabsContext.Provider, { value: contextValue, children: jsx("div", { ref: ref, className: cn(themeClasses.baseStyle, themeClasses.disabledStyle, darkMode && "dark", className // User overrides take precedence
-            ), "data-orientation": orientation, "data-size": size, "data-disabled": disabled, role: "tablist" // Add semantic role for screen readers
-            , "aria-orientation": orientation, ...props, children: children }) }));
+            ), "data-orientation": orientation, "data-size": size, "data-disabled": disabled, ...props, children: children }) }));
 });
 // Set display name for dev tools and Storybook
 TabsComponent.displayName = "Tabs";

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

@@ -139,4 +139,6 @@ export interface TabsContextValue {
     registerTrigger: (value: string, element: HTMLButtonElement) => void;
     /** Unregister a tab trigger when it unmounts */
     unregisterTrigger: (value: string) => void;
+    /** Unique prefix scoping DOM IDs to this Tabs instance */
+    instanceId: string;
 }

package/dist/components/core/Tabs/TabsBody.js

@@ -10,7 +10,7 @@ import { getTabsBodyVariants } from './Tabs.animations.js';
  * TabsBody component displays content panels for tabs with directional fade animations
  */
 const TabsBody = React__default.forwardRef(({ value, forceMount = false, children, className, ...props }, ref) => {
-    const { value: selectedValue, orientation } = useTabsContext();
+    const { value: selectedValue, orientation, instanceId } = useTabsContext();
     const shouldReduceMotion = useReducedMotion();
     // Check if we're in Storybook and should disable animations
     const isInStorybook = typeof window !== 'undefined' && window.__STORYBOOK_DISABLE_ANIMATIONS__;
@@ -21,7 +21,7 @@ const TabsBody = React__default.forwardRef(({ value, forceMount = false, childre
     const contentVariants = useMemo(() => getTabsBodyVariants(shouldDisableAnimations), [shouldDisableAnimations]);
     // For forceMount, we handle visibility differently to preserve DOM
     if (forceMount) {
-        return (jsx(motion.div, { ref: ref, role: "tabpanel", "aria-labelledby": `${value}-tab`, id: `${value}-content`, tabIndex: 0, className: cn(tabsTheme.bodyStyle, !isSelected && "hidden", // Hide when not selected but force mounted
+        return (jsx(motion.div, { ref: ref, role: "tabpanel", "aria-labelledby": `${instanceId}-${value}-tab`, id: `${instanceId}-${value}-content`, tabIndex: 0, className: cn(tabsTheme.bodyStyle, !isSelected && "hidden", // Hide when not selected but force mounted
             className // User overrides take precedence
             ), "data-state": isSelected ? "active" : "inactive", "data-orientation": orientation, style: {
                 // Ensure proper stacking context for animations
@@ -39,7 +39,7 @@ const TabsBody = React__default.forwardRef(({ value, forceMount = false, childre
         exit: "exit",
         variants: contentVariants,
     };
-    return (jsx(AnimatePresence, { mode: "wait", children: isSelected && (jsx(motion.div, { ref: ref, role: "tabpanel", "aria-labelledby": `${value}-tab`, id: `${value}-content`, tabIndex: 0, className: cn(tabsTheme.bodyStyle, className // User overrides take precedence
+    return (jsx(AnimatePresence, { mode: "wait", children: isSelected && (jsx(motion.div, { ref: ref, role: "tabpanel", "aria-labelledby": `${instanceId}-${value}-tab`, id: `${instanceId}-${value}-content`, tabIndex: 0, className: cn(tabsTheme.bodyStyle, className // User overrides take precedence
             ), "data-state": "active", "data-orientation": orientation, style: {
                 // Ensure proper stacking context for animations
                 position: "relative",