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

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 { MagnifyingGlassIcon } from '@heroicons/react/24/outline';
+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(MagnifyingGlassIcon, { 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)]", "dark:placeholder:text-[var(--color-neutral-500)]") }) }, "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 { ChevronLeftIcon } from '@heroicons/react/24/outline';
 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;
     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: 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(ChevronLeftIcon, { className: "size-3", strokeWidth: 2.5 }) }) }));
 });
 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 { ChevronUpDownIcon } from '@heroicons/react/20/solid';
+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(ChevronUpDownIcon, { 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,5 +1,6 @@
-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 { cn } from '../../../utils/cn.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);

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

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

@@ -1,3 +1,5 @@
+import { semanticSpinnerColors } from '../../../utils/colorUtils.js';
+
 /**
  * Default theme for the Spinner component
  */
@@ -12,12 +14,8 @@ const spinnerTheme = {
     },
     // Color variants
     colors: {
-        neutral: "border-[var(--color-border)] border-t-transparent",
-        dark: "border-[var(--color-background-quinary)] border-t-transparent",
-        primary: "border-[var(--color-primary)] border-t-transparent",
-        success: "border-[var(--color-success)] border-t-transparent",
-        warning: "border-[var(--color-warning)] border-t-transparent",
-        danger: "border-[var(--color-danger)] border-t-transparent",
+        ...semanticSpinnerColors,
+        dark: "border-[var(--color-surface-sunken)] border-t-transparent",
     },
     // Animation class with drop shadow
     animation: "animate-[spin_1s_linear_infinite] rounded-full",

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

@@ -21,8 +21,9 @@ export interface SpinnerProps extends React.HTMLAttributes<HTMLDivElement> {
      */
     theme?: SpinnerThemeOverrides;
 }
+import { SemanticColor } from "../../../utils/colorUtils";
 export type SpinnerSize = "sm" | "md" | "lg";
-export type SpinnerColor = "neutral" | "dark" | "primary" | "success" | "warning" | "danger";
+export type SpinnerColor = SemanticColor | "dark";
 export interface SpinnerThemeOverrides {
     baseStyle?: string;
     sizes?: Partial<Record<SpinnerSize, string>>;

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

@@ -17,7 +17,7 @@ export interface UnderlinePosition {
  */
 export declare const getUnderlineTransition: (shouldReduceMotion: boolean | null) => Transition;
 /**
- * Get TabsContent animation variants for directional fade animations
+ * Get TabsBody animation variants for directional fade animations
  * Provides smooth fade-in from bottom and fade-out to top transitions
  */
-export declare const getTabsContentVariants: (shouldReduceMotion: boolean | null) => Variants | undefined;
+export declare const getTabsBodyVariants: (shouldReduceMotion: boolean | null) => Variants | undefined;

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
@@ -45,10 +46,10 @@ const getUnderlineTransition = (shouldReduceMotion) => {
     };
 };
 /**
- * Get TabsContent animation variants for directional fade animations
+ * Get TabsBody animation variants for directional fade animations
  * Provides smooth fade-in from bottom and fade-out to top transitions
  */
-const getTabsContentVariants = (shouldReduceMotion) => {
+const getTabsBodyVariants = (shouldReduceMotion) => {
     if (shouldReduceMotion !== null && shouldReduceMotion !== void 0 ? shouldReduceMotion : false) {
         // Reduced motion: no animation variants
         return undefined;
@@ -81,4 +82,4 @@ const getTabsContentVariants = (shouldReduceMotion) => {
     };
 };
 
-export { getTabsContentVariants, getTabsTriggerVariants, getUnderlineTransition };
+export { getTabsBodyVariants, getTabsTriggerVariants, getUnderlineTransition };

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

@@ -3,5 +3,5 @@ import { TabsProps } from "./Tabs.types";
 export declare const Tabs: React.ForwardRefExoticComponent<TabsProps & React.RefAttributes<HTMLDivElement>> & {
     List: React.ForwardRefExoticComponent<import("./Tabs.types").TabsListProps & React.RefAttributes<HTMLDivElement>>;
     Trigger: React.ForwardRefExoticComponent<import("./Tabs.types").TabsTriggerProps & React.RefAttributes<HTMLButtonElement>>;
-    Content: React.ForwardRefExoticComponent<import("./Tabs.types").TabsContentProps & React.RefAttributes<HTMLDivElement>>;
+    Body: React.ForwardRefExoticComponent<import("./Tabs.types").TabsBodyProps & React.RefAttributes<HTMLDivElement>>;
 };

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

@@ -1,19 +1,25 @@
+"use client";
 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';
 import { TabsList } from './TabsList.js';
 import { TabsTrigger } from './TabsTrigger.js';
-import { TabsContent } from './TabsContent.js';
+import { TabsBody } from './TabsBody.js';
 
 /**
  * Tabs component for organizing content into separate views
- * Uses compound component pattern with Tabs.List, Tabs.Trigger, and Tabs.Content
+ * Uses compound component pattern with Tabs.List, Tabs.Trigger, and Tabs.Body
  * Supports optional Framer Motion animations and comprehensive accessibility
  */
 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 || "");
+    // Track whether the user has switched tabs yet, so content only animates
+    // on an actual tab change and not on mount / page load.
+    const [hasSwitched, setHasSwitched] = useState(false);
+    // 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
@@ -40,6 +46,7 @@ const TabsComponent = React__default.forwardRef(({ value, defaultValue, onValueC
     // Safe value change handler with error handling
     const handleValueChange = useCallback((newValue) => {
         try {
+            setHasSwitched(true);
             if (!isControlled) {
                 setCurrentValue(newValue);
             }
@@ -68,15 +75,16 @@ const TabsComponent = React__default.forwardRef(({ value, defaultValue, onValueC
         disabled,
         registerTrigger,
         unregisterTrigger,
-    }), [activeValue, handleValueChange, orientation, size, disabled, registerTrigger, unregisterTrigger]);
+        instanceId,
+        hasSwitched,
+    }), [activeValue, handleValueChange, orientation, size, disabled, registerTrigger, unregisterTrigger, instanceId, hasSwitched]);
     // 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";
@@ -84,7 +92,7 @@ TabsComponent.displayName = "Tabs";
 const Tabs = Object.assign(TabsComponent, {
     List: TabsList,
     Trigger: TabsTrigger,
-    Content: TabsContent,
+    Body: TabsBody,
 });
 
 export { Tabs };

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

@@ -1,4 +1,4 @@
-import { TabsSize } from './Tabs.types';
+import { TabsSize } from "./Tabs.types";
 /**
  * Clean theme structure for Tabs components
  */
@@ -7,7 +7,7 @@ export interface TabsTheme {
     listStyle: string;
     triggerStyle: string;
     triggerSizes: Record<TabsSize, string>;
-    contentStyle: string;
+    bodyStyle: string;
     underlineStyle: string;
 }
 /**

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

@@ -5,16 +5,16 @@ 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-medium 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)]",
+    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 gap-1",
-        md: "px-2 py-2 text-sm gap-1",
+        sm: "px-0 py-1.5 text-sm",
+        md: "px-0 py-2 text-sm",
     },
-    // TabsContent styles with proper CSS variables
-    contentStyle: "focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)] focus-visible:ring-offset-2",
+    // 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",
     // Sliding underline styles
     underlineStyle: "absolute bottom-0 h-0.5 bg-[var(--color-primary)] transition-none",
 };