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

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

@@ -1,5 +1,6 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
-import { useId, useState, useRef, useCallback } from 'react';
+import { useId, useState, useRef, useCallback, useMemo } from 'react';
 import { cn } from '../../../utils/cn.js';
 import { PopoverContext } from './PopoverContext.js';
 import { PopoverTrigger } from './PopoverTrigger.js';
@@ -41,12 +42,12 @@ const PopoverRoot = ({ children, className, isOpen: controlledIsOpen, defaultIsO
         onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(value);
     }, [isControlled, onOpenChange]);
     // Merge theme with overrides
-    const theme = {
+    const theme = useMemo(() => ({
         ...popoverTheme,
         ...(themeOverrides || {}),
-    };
+    }), [themeOverrides]);
     // Context value
-    const contextValue = {
+    const contextValue = useMemo(() => ({
         isOpen,
         onOpenChange: handleOpenChange,
         triggerRef,
@@ -60,7 +61,7 @@ const PopoverRoot = ({ children, className, isOpen: controlledIsOpen, defaultIsO
         hasBackdrop,
         theme,
         contentId,
-    };
+    }), [isOpen, handleOpenChange, triggerRef, contentRef, placement, offset, triggerType, closeOnClickOutside, closeOnEsc, preventClose, hasBackdrop, theme, contentId]);
     return (jsx(PopoverContext.Provider, { value: contextValue, children: jsx("div", { className: cn("popover contents", darkMode && "dark", className), "data-state": isOpen ? "open" : "closed", "data-backdrop": hasBackdrop ? "true" : "false", ...props, children: children }) }));
 };
 // Export as a unified component

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

@@ -4,8 +4,10 @@
 const popoverTheme = {
     // Base styles for the popover
     baseStyle: "z-50 outline-none",
-    // Body styles
-    bodyStyle: "bg-[var(--color-surface-overlay)]/80 backdrop-blur-md border border-[var(--color-border)] rounded-[var(--popover-radius)] shadow-real-xl p-4 max-w-[min(24rem,calc(100vw-2rem))]",
+    // Body styles. bg + shadow come from the relative-elevation engine
+    // (surfaceClasses) at runtime so a nested popover lifts above its host; keep
+    // the frosted blur + border + radius + padding here.
+    bodyStyle: "backdrop-blur-md border border-[var(--color-border)] rounded-[var(--popover-radius)] p-4 max-w-[min(24rem,calc(100vw-2rem))]",
 };
 
 export { popoverTheme };

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

@@ -1,5 +1,6 @@
 import React, { ReactNode } from "react";
 import { PopoverTheme } from "./Popover.theme";
+import type { SurfaceElevation } from "../../../theme/SurfaceContext";
 export type PopoverPlacement = "top" | "top-start" | "top-end" | "right" | "right-start" | "right-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end";
 export type PopoverTriggerType = "click" | "hover";
 export interface PopoverContextValue {
@@ -58,6 +59,13 @@ export interface PopoverBodyProps extends React.HTMLAttributes<HTMLDivElement> {
     /** Custom max-height when scrollable is true (e.g. "300px", "20rem").
      *  Overrides the default viewport-aware height. */
     maxHeight?: string;
+    /**
+     * Pin the surface elevation rung (overrides the automatic relative lift).
+     * A rung number (1–8) or a semantic alias ("surface"/"raised"/"overlay"…).
+     */
+    elevation?: SurfaceElevation;
+    /** `false` opts out of the relative lift — paints at the popover's base rung. */
+    lift?: boolean;
 }
 /**
  * Theme overrides for the Popover component

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

@@ -1,3 +1,4 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import React__default, { useRef, useEffect, useCallback } from 'react';
 import { useReducedMotion, AnimatePresence, motion } from 'motion/react';
@@ -5,33 +6,25 @@ import { createPortal } from 'react-dom';
 import { cn } from '../../../utils/cn.js';
 import { usePopoverContext } from './PopoverContext.js';
 import { useClickOutside } from '../../../hooks/useClickOutside.js';
-import { popoverTransitions, popoverContentVariants } from './Popover.animations.js';
+import '../../../theme/ThemeContext.js';
+import { useSurfaceElevation, surfaceClasses, SurfaceProvider } from '../../../theme/SurfaceContext.js';
+import { getOverlayMenuVariants, overlayBackdropAnimations } from '../../../theme/animations.js';
 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 = {
-    initial: { opacity: 0 },
-    animate: { opacity: 1, transition: { duration: 0.15 } },
-    exit: { opacity: 0, transition: { duration: 0.1 } },
-};
-/** Overlay content animations (scale + fade) */
-const overlayContentAnimations = {
-    initial: { opacity: 0, scale: 0.95 },
-    animate: { opacity: 1, scale: 1, transition: { duration: 0.2 } },
-    exit: { opacity: 0, scale: 0.95, transition: { duration: 0.15 } },
-};
 /**
  * PopoverBody component displays the body/content of the popover
  */
-const PopoverBody = React__default.forwardRef(({ children, className, animation = true, portal = true, scrollable = true, maxHeight, ...props }, ref) => {
+const PopoverBody = React__default.forwardRef(({ children, className, animation = true, portal = true, scrollable = true, maxHeight, elevation, lift, ...props }, ref) => {
+    // Relative elevation: lift above the host surface (overlay base = 5).
+    const surfaceLevel = useSurfaceElevation({ baseRung: 5, offset: 2, elevation, lift });
     const { isOpen, onOpenChange, triggerRef, contentRef, placement, offset, triggerType, closeOnClickOutside, closeOnEsc, preventClose, hasBackdrop, theme, contentId, } = usePopoverContext();
     const shouldReduceMotion = useReducedMotion();
     const localRef = useRef(null);
     // Use the same positioning hook as Select/Tooltip (now supports all 12 placements)
-    const { position, cssVariables, contentRef: portalContentRef, isReady, } = useSelectPortal({
+    const { position, cssVariables, contentRef: portalContentRef, isReady, actualPlacement, } = useSelectPortal({
         triggerRef,
         isOpen: isOpen || false,
         placement,
@@ -100,16 +93,23 @@ const PopoverBody = React__default.forwardRef(({ children, className, animation
     const isClient = useIsClient();
     // Extract DOM props to avoid type conflicts with Framer Motion
     const { onDrag, onDragStart, onDragEnd, onAnimationStart, onAnimationEnd, ...domProps } = props;
-    const contentClasses = cn(theme.baseStyle, theme.bodyStyle, "popover-content", scrollable && "overflow-y-auto", className);
+    const side = (actualPlacement || placement || "bottom").split("-")[0];
+    const transformOrigin = side === "top" ? "bottom" : side === "left" ? "right" : side === "right" ? "left" : "top";
+    const contentClasses = cn(surfaceClasses(surfaceLevel, { translucent: true }), theme.baseStyle, theme.bodyStyle, "popover-content", scrollable && "overflow-y-auto", className);
     const contentPositionStyle = {
         ...cssVariables,
         position: "fixed",
         top: `${position.top}px`,
         left: `${position.left}px`,
+        transformOrigin,
         ...(scrollable && {
             maxHeight: maxHeight || "var(--select-content-available-height, 400px)",
         }),
     };
+    const popoverVariants = getOverlayMenuVariants(side, {
+        scale: 0.97,
+        shift: 6,
+    });
     // When hasBackdrop is true, delegate backdrop + escape + click-outside to Overlay
     if (hasBackdrop) {
         return (jsx(Overlay, { ref: handleRef, isOpen: isOpen, onClose: () => {
@@ -118,14 +118,12 @@ const PopoverBody = React__default.forwardRef(({ children, className, animation
             }, closeOnOverlayClick: closeOnClickOutside && !preventClose, closeOnEsc: closeOnEsc && !preventClose, enableScrollLock: false, enableFocusTrap: true, position: "none", role: "dialog", ariaModal: true, contentClassName: contentClasses, contentStyle: contentPositionStyle, animations: animation && !shouldReduceMotion && isReady
                 ? {
                     overlay: overlayBackdropAnimations,
-                    content: overlayContentAnimations,
+                    content: popoverVariants,
                 }
-                : undefined, children: jsx("div", { id: contentId, "data-state": isOpen ? "open" : "closed", "data-placement": placement, "data-trigger": triggerType, ...domProps, children: children }) }));
+                : undefined, children: jsx("div", { id: contentId, "data-state": isOpen ? "open" : "closed", "data-placement": placement, "data-trigger": triggerType, ...domProps, children: jsx(SurfaceProvider, { level: surfaceLevel, 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, 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 })) }));
+    const popoverContent = (jsx(AnimatePresence, { children: isOpen && (jsx(motion.div, { ref: handleRef, id: contentId, className: cn("fixed z-50", contentClasses), style: contentPositionStyle, variants: shouldReduceMotion || !animation ? {} : popoverVariants, initial: shouldReduceMotion || !animation ? undefined : "hidden", animate: shouldReduceMotion || !animation ? undefined : (isReady ? "visible" : "hidden"), exit: shouldReduceMotion || !animation ? undefined : "exit", transition: shouldReduceMotion || !animation ? { duration: 0 } : undefined, "data-state": isOpen ? "open" : "closed", "data-placement": placement, "data-trigger": triggerType, onClick: (e) => e.stopPropagation(), ...domProps, children: jsx(SurfaceProvider, { level: surfaceLevel, children: children }) })) }));
     if (portal && isClient) {
         return createPortal(jsx("div", { "data-flikkui-portal": "", className: isDarkMode ? "dark" : undefined, children: popoverContent }), document.body);
     }

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

@@ -1,3 +1,4 @@
+"use client";
 import { createContext, useContext } from 'react';
 
 // Create context

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

@@ -1,3 +1,4 @@
+"use client";
 import React__default from 'react';
 import { cn } from '../../../utils/cn.js';
 import { usePopoverContext } from './PopoverContext.js';

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

@@ -1,3 +1,4 @@
+"use client";
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import React__default, { useMemo } from 'react';
 import { useReducedMotion, motion } from 'motion/react';

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

@@ -1,3 +1,4 @@
+"use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
 import React__default, { useState, useMemo, useCallback } from 'react';
 import { StarIcon } from '@heroicons/react/24/solid';
@@ -156,15 +157,22 @@ const Rating = React__default.memo(React__default.forwardRef(({ value: controlle
             return iconEmpty ? (jsx("span", { className: cn(starSizeClass, emptyColorClass), "aria-hidden": "true", children: iconEmpty })) : (jsx(StarIcon$1, { className: cn(starSizeClass, emptyColorClass), "aria-hidden": "true" }));
         };
         if (!isInteractive) {
-            // Read-only or disabled: render as a span
-            return (jsx("span", { className: "inline-flex items-center justify-center", children: renderStarIcon() }, starIndex));
+            // Read-only or disabled: render as a non-interactive span
+            return (jsx("span", { "data-star-index": starIndex, 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, "aria-hidden": "true", children: renderStarIcon() }, starIndex));
+        // Interactive: pointer-only click target. The outer element already
+        // owns role="slider" plus its value and keyboard handling, so these
+        // per-star hit targets must NOT be separately-focusable/interactive
+        // elements (a <button> here would be a nested-interactive descendant
+        // of a widget role, which is an ARIA validity violation). A <span>
+        // with pointer handlers preserves the exact same click/hover
+        // behavior and visual hit target without introducing a second
+        // focusable control.
+        return (jsx("span", { "data-star-index": starIndex, className: cn(theme.starStyle, "hover:scale-110 active:scale-95"), onClick: (e) => handleStarClick(starIndex, e), onMouseMove: (e) => handleStarMouseMove(starIndex, e), "aria-hidden": "true", children: renderStarIcon() }, starIndex));
     };
     // Build array of star indices (1-based)
     const stars = useMemo(() => Array.from({ length: max }, (_, i) => i + 1), [max]);
-    return (jsx("div", { ref: ref, role: isInteractive ? "slider" : "img", "aria-label": `Rating: ${currentValue} out of ${max} stars`, "aria-valuenow": isInteractive ? currentValue : undefined, "aria-valuemin": isInteractive ? 0 : undefined, "aria-valuemax": isInteractive ? max : undefined, "aria-readonly": readOnly || undefined, "aria-disabled": disabled || undefined, tabIndex: isInteractive ? 0 : undefined, onKeyDown: isInteractive ? handleKeyDown : undefined, onMouseLeave: handleMouseLeave, "data-rating-value": currentValue, "data-state": disabled ? "disabled" : readOnly ? "readonly" : "interactive", ...props, className: cn(theme.baseStyle, (_a = theme.gapSizes) === null || _a === void 0 ? void 0 : _a[size], disabled && ((_b = theme.states) === null || _b === void 0 ? void 0 : _b.disabled), readOnly && ((_c = theme.states) === null || _c === void 0 ? void 0 : _c.readOnly), className), children: stars.map(renderStar) }));
+    return (jsx("div", { ref: ref, role: isInteractive ? "slider" : "img", "aria-label": `Rating: ${currentValue} out of ${max} stars`, "aria-valuenow": isInteractive ? currentValue : undefined, "aria-valuemin": isInteractive ? 0 : undefined, "aria-valuemax": isInteractive ? max : undefined, "aria-disabled": disabled || undefined, tabIndex: isInteractive ? 0 : undefined, onKeyDown: isInteractive ? handleKeyDown : undefined, onMouseLeave: handleMouseLeave, "data-rating-value": currentValue, "data-state": disabled ? "disabled" : readOnly ? "readonly" : "interactive", ...props, className: cn(theme.baseStyle, (_a = theme.gapSizes) === null || _a === void 0 ? void 0 : _a[size], disabled && ((_b = theme.states) === null || _b === void 0 ? void 0 : _b.disabled), readOnly && ((_c = theme.states) === null || _c === void 0 ? void 0 : _c.readOnly), className), children: stars.map(renderStar) }));
 }));
 Rating.displayName = "Rating";
 

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

@@ -1,3 +1,4 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import React__default, { useRef, useMemo, useImperativeHandle, useState, useEffect } from 'react';
 import { cn } from '../../../utils/cn.js';

package/dist/components/core/ScrollArea/smooth/SmoothScrollEngine.d.ts

@@ -16,6 +16,7 @@ export declare class SmoothScrollEngine {
     private previousPosition;
     private idleFrames;
     private static readonly IDLE_THRESHOLD;
+    private isAnimating;
     private animationStartTime;
     private animationDuration;
     private animationStartPosition;

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

@@ -1,3 +1,4 @@
+"use client";
 import { SnapPointDetector } from './SnapPointDetector.js';
 import { PerformanceMonitor } from '../../../../utils/performanceMonitor.js';
 import { normalizeWheelDelta, getMaxScroll, lerp, clampScroll, calculateVelocity, calculateScrollProgress, detectScrollDirection } from '../../../../utils/smoothScrollUtils.js';
@@ -36,6 +37,10 @@ class SmoothScrollEngine {
         this.previousPosition = 0;
         this.idleFrames = 0;
         // Programmatic scroll animation
+        // NOTE: this flag — NOT animationOnComplete — gates whether a programmatic
+        // animation is active. onComplete is optional, so keying off it meant
+        // scrollTo(pos) with no callback never animated (the Scroll-to-Top/Bottom bug).
+        this.isAnimating = false;
         this.animationStartTime = 0;
         this.animationDuration = 0;
         this.animationStartPosition = 0;
@@ -66,6 +71,7 @@ class SmoothScrollEngine {
                 this.state.targetSnapPoint = null;
             }
             // Cancel programmatic animation
+            this.isAnimating = false;
             this.animationOnComplete = null;
             this.wake();
         };
@@ -102,11 +108,13 @@ class SmoothScrollEngine {
             this.state.target += adjustedDelta;
             this.touchStartY = touchY;
             this.touchStartX = touchX;
-            // Cancel snap animation
+            // Cancel snap + programmatic animation on user input
             if (this.state.isSnapping) {
                 this.state.isSnapping = false;
                 this.state.targetSnapPoint = null;
             }
+            this.isAnimating = false;
+            this.animationOnComplete = null;
             this.wake();
         };
         /**
@@ -120,7 +128,7 @@ class SmoothScrollEngine {
             // Record frame for performance monitoring
             this.performanceMonitor.recordFrame(time);
             // Handle programmatic animation
-            if (this.animationOnComplete) {
+            if (this.isAnimating) {
                 this.animateProgrammaticScroll(time);
             }
             // Handle snap animation
@@ -140,7 +148,7 @@ class SmoothScrollEngine {
             const isSettled = Math.abs(this.state.current - this.state.target) < 0.5 &&
                 Math.abs(this.state.velocity.current) < 0.1 &&
                 !this.state.isSnapping &&
-                !this.animationOnComplete;
+                !this.isAnimating;
             if (isSettled) {
                 this.idleFrames++;
                 if (this.idleFrames >= SmoothScrollEngine.IDLE_THRESHOLD) {
@@ -267,6 +275,7 @@ class SmoothScrollEngine {
         this.state.target = this.state.current;
         if (progress >= 1) {
             // Animation complete
+            this.isAnimating = false;
             const callback = this.animationOnComplete;
             this.animationOnComplete = null;
             if (callback)
@@ -416,6 +425,7 @@ class SmoothScrollEngine {
         this.state.isSnapping = false;
         this.state.targetSnapPoint = null;
         // Setup animation
+        this.isAnimating = true;
         this.animationStartTime = performance.now();
         this.animationDuration = duration;
         this.animationStartPosition = this.state.current;
@@ -468,6 +478,7 @@ class SmoothScrollEngine {
         // Stop any ongoing programmatic scroll or snapping
         this.state.isSnapping = false;
         this.state.targetSnapPoint = null;
+        this.isAnimating = false;
         this.animationOnComplete = null;
     }
     /**

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

@@ -1,3 +1,4 @@
+"use client";
 /**
  * Detects and manages CSS scroll snap points
  * Reads snap-align values from DOM and calculates scroll positions

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

@@ -1,3 +1,4 @@
+"use client";
 import { useRef, useEffect, useMemo } from 'react';
 import { SmoothScrollEngine } from './SmoothScrollEngine.js';
 import { isReducedMotion } from '../../../../utils/smoothScrollUtils.js';

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

@@ -1,3 +1,4 @@
+"use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
 import React__default, { useRef, useState, useCallback, useEffect, useMemo } from 'react';
 import { cn } from '../../../utils/cn.js';
@@ -40,12 +41,12 @@ const SegmentedComponent = React__default.forwardRef(({ value, onChange, size =
         window.addEventListener("resize", debouncedUpdateActiveStyle);
         return () => window.removeEventListener("resize", debouncedUpdateActiveStyle);
     }, [debouncedUpdateActiveStyle]);
-    const contextValue = {
+    const contextValue = useMemo(() => ({
         selectedValue: value,
         onChange,
         size,
         disabled,
-    };
+    }), [value, onChange, size, disabled]);
     return (jsx(SegmentedContext.Provider, { value: contextValue, children: jsxs("div", { ref: (node) => {
                 containerRef.current = node;
                 if (typeof ref === "function") {

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

@@ -1,3 +1,4 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import React__default, { useContext } from 'react';
 import { cn } from '../../../utils/cn.js';
@@ -47,7 +48,7 @@ const SegmentedItem = React__default.forwardRef(({ value, disabled = false, chil
     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, onKeyDown: handleKeyDown, "data-value": value, "data-selected": isSelected, "data-disabled": isDisabled, ...props, children: children }));
+        ), onClick: handleClick, onKeyDown: handleKeyDown, "data-value": value, "data-selected": isSelected, "data-state": isSelected ? "active" : "inactive", "data-disabled": isDisabled, ...props, children: children }));
 });
 // Set display name for dev tools and Storybook
 SegmentedItem.displayName = "Segmented.Item";

package/dist/components/core/Separator/Separator.js

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

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

@@ -1,3 +1,4 @@
+"use client";
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import React__default, { useMemo, useRef, useEffect } from 'react';
 import { cn } from '../../../utils/cn.js';

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

@@ -1,3 +1,4 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import React__default, { useMemo, useState, useEffect } from 'react';
 import { AnimatePresence, motion } from 'motion/react';

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

@@ -1,3 +1,4 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import React__default from 'react';
 import { cn } from '../../../utils/cn.js';

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

@@ -1,3 +1,4 @@
+"use client";
 import { jsx, Fragment } from 'react/jsx-runtime';
 import { createContext, useContext, useState, useCallback, useMemo, useEffect } from 'react';
 import { useMediaQuery } from '../../../hooks/useMediaQuery.js';

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

@@ -1,3 +1,4 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import React__default from 'react';
 import { cn } from '../../../utils/cn.js';

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

@@ -1,3 +1,4 @@
+"use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
 import React__default from 'react';
 import { XMarkIcon } from '@heroicons/react/24/outline';

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

@@ -1,3 +1,4 @@
+"use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
 import React__default from 'react';
 import { cn } from '../../../utils/cn.js';

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

@@ -1,3 +1,4 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import React__default from 'react';
 import { Bars3Icon } from '@heroicons/react/24/outline';

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

@@ -1,10 +1,12 @@
+"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(({ accordion = false, density, children, className, ...props }, ref) => {
-    const resolvedDensity = density !== null && density !== void 0 ? density : useSidebarDensity();
+    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,3 +1,4 @@
+"use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import React__default from 'react';
 import { cn } from '../../../utils/cn.js';

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

@@ -1,3 +1,4 @@
+"use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import React__default, { useState, useRef, useEffect } from 'react';
 import { motion, AnimatePresence } from 'motion/react';

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

@@ -1,3 +1,4 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import React__default from 'react';
 import { ChevronLeftIcon } from '@heroicons/react/24/outline';

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

@@ -1,3 +1,4 @@
+"use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
 import React__default from 'react';
 import { ChevronUpDownIcon } from '@heroicons/react/20/solid';

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.js

@@ -1,3 +1,4 @@
+"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';

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';

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

@@ -1,3 +1,4 @@
+"use client";
 /**
  * Get Tabs trigger animation variants based on reduced motion preference
  * Provides subtle micro-interactions for enhanced UX while respecting accessibility

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

@@ -1,3 +1,4 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import React__default, { useState, useId, useRef, useCallback, useMemo } from 'react';
 import { cn } from '../../../utils/cn.js';

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

@@ -5,13 +5,13 @@ const tabsTheme = {
     // Container styles
     baseStyle: "flex flex-col",
     // TabsList styles with proper design tokens
-    listStyle: "relative inline-flex items-center flex-row border-b border-[var(--color-border)] gap-2",
+    listStyle: "relative inline-flex items-center flex-row border-b border-[var(--color-border)] gap-6",
     // TabsTrigger base styles - no individual borders, underline will be handled separately
     triggerStyle: "relative inline-flex items-center justify-center whitespace-nowrap font-semibold transition-all duration-300 cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)] focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] data-[state=active]:text-[var(--color-primary)]",
     // TabsTrigger size variants using CSS variables where applicable
     triggerSizes: {
-        sm: "px-2 py-1.5 text-sm",
-        md: "px-2 py-2 text-sm",
+        sm: "px-0 py-1.5 text-sm",
+        md: "px-0 py-2 text-sm",
     },
     // TabsBody styles with proper CSS variables
     bodyStyle: "focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)] focus-visible:ring-offset-2",

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

@@ -1,3 +1,4 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import React__default, { useMemo } from 'react';
 import { useReducedMotion, motion, AnimatePresence } from 'motion/react';

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

@@ -1,3 +1,4 @@
+"use client";
 import { createContext, useContext } from 'react';
 
 /**

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

@@ -1,3 +1,4 @@
+"use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import React__default, { useState, useRef, useCallback, useEffect, useMemo } from 'react';
 import { useReducedMotion, motion } from 'motion/react';

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

@@ -1,3 +1,4 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import React__default, { useRef, useEffect, useMemo, useCallback } from 'react';
 import { useReducedMotion, motion } from 'motion/react';
@@ -61,21 +62,44 @@ const TabsTrigger = React__default.forwardRef(({ value, disabled = false, childr
                     case "ArrowLeft":
                     case "ArrowUp":
                         event.preventDefault();
-                        // Move to previous tab - focus previous trigger
-                        const prevTrigger = event.currentTarget.previousElementSibling;
-                        if (prevTrigger && prevTrigger.tagName === 'BUTTON' && !prevTrigger.disabled) {
-                            prevTrigger.focus();
-                            prevTrigger.click();
+                        // Move to previous *enabled* tab, skipping over any number of
+                        // consecutive disabled triggers and wrapping around the start
+                        // (same enabled-only trigger list Home/End use below).
+                        {
+                            const tabList = event.currentTarget.parentElement;
+                            const allTabs = tabList
+                                ? Array.from(tabList.querySelectorAll('[role="tab"]:not([disabled])'))
+                                : [];
+                            const currentIndex = allTabs.indexOf(event.currentTarget);
+                            if (allTabs.length > 0 && currentIndex !== -1) {
+                                const prevIndex = (currentIndex - 1 + allTabs.length) % allTabs.length;
+                                const prevTrigger = allTabs[prevIndex];
+                                if (prevTrigger) {
+                                    prevTrigger.focus();
+                                    prevTrigger.click();
+                                }
+                            }
                         }
                         break;
                     case "ArrowRight":
                     case "ArrowDown":
                         event.preventDefault();
-                        // Move to next tab - focus next trigger
-                        const nextTrigger = event.currentTarget.nextElementSibling;
-                        if (nextTrigger && nextTrigger.tagName === 'BUTTON' && !nextTrigger.disabled) {
-                            nextTrigger.focus();
-                            nextTrigger.click();
+                        // Move to next *enabled* tab, skipping over any number of
+                        // consecutive disabled triggers and wrapping around the end.
+                        {
+                            const tabList = event.currentTarget.parentElement;
+                            const allTabs = tabList
+                                ? Array.from(tabList.querySelectorAll('[role="tab"]:not([disabled])'))
+                                : [];
+                            const currentIndex = allTabs.indexOf(event.currentTarget);
+                            if (allTabs.length > 0 && currentIndex !== -1) {
+                                const nextIndex = (currentIndex + 1) % allTabs.length;
+                                const nextTrigger = allTabs[nextIndex];
+                                if (nextTrigger) {
+                                    nextTrigger.focus();
+                                    nextTrigger.click();
+                                }
+                            }
                         }
                         break;
                     case "Home":

package/dist/components/core/Tag/Tag.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import React__default from 'react';
 import { motion } from 'motion/react';
@@ -53,7 +54,7 @@ const Tag = React__default.forwardRef(({ children, size = "md", removable = true
                 // descender space below it and pins the circle to the top of a
                 // taller line box — the visible photo then renders ~1.75px high.
                 // Zeroing the line-height makes the 16px circle define the box exactly.
-                className: cn("inline-flex items-center justify-center shrink-0 overflow-hidden rounded-full leading-[0]", theme.avatarSizes[size]), children: jsx(Avatar, { src: avatar.src, name: avatar.name, fallback: avatar.fallback, initialsCount: avatar.initialsCount, size: "xs", className: "bg-[var(--color-surface-hover)] border  border-[var(--color-border)]" }) }));
+                className: cn("inline-flex items-center justify-center shrink-0 overflow-hidden rounded-full leading-[0] -ml-0.5", theme.avatarSizes[size]), children: jsx(Avatar, { src: avatar.src, name: avatar.name, fallback: avatar.fallback, initialsCount: avatar.initialsCount, size: "xs", className: "bg-[var(--color-surface-hover)] border  border-[var(--color-border)]" }) }));
         }
         if (startContent) {
             return (jsx("span", {