@flikk/ui 1.0.0-beta.13 → 1.0.0-beta.15

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

@@ -1,5 +1,5 @@
-import { jsx } from 'react/jsx-runtime';
-import { createContext, useContext, useState, useCallback, useMemo } from 'react';
+import { jsx, Fragment } from 'react/jsx-runtime';
+import { createContext, useContext, useState, useCallback, useMemo, useEffect } from 'react';
 
 const SidebarContext = createContext(null);
 const useSidebarContext = () => {
@@ -7,32 +7,84 @@ const useSidebarContext = () => {
     // Return null if not in sidebar context (allows NavItem to work elsewhere)
     return context;
 };
-const SidebarProvider = ({ children, defaultCollapsed = false, collapsed: controlledCollapsed, onCollapsedChange, width = {}, side = 'left', variant = 'sidebar', }) => {
+const AccordionNavContext = createContext(null);
+const useAccordionNavContext = () => useContext(AccordionNavContext);
+const AccordionNavProvider = ({ children, accordion = false }) => {
+    const [openId, setOpenId] = useState(null);
+    const register = useCallback((id) => {
+        setOpenId(id);
+    }, []);
+    const unregister = useCallback((id) => {
+        setOpenId(prev => (prev === id ? null : prev));
+    }, []);
+    const value = useMemo(() => ({ openId, register, unregister }), [openId, register, unregister]);
+    if (!accordion)
+        return jsx(Fragment, { children: children });
+    return (jsx(AccordionNavContext.Provider, { value: value, children: children }));
+};
+const SidebarProvider = ({ children, defaultCollapsed = false, collapsed: controlledCollapsed, onCollapsedChange, mobileBreakpoint = 1024, mobileOpen: controlledMobileOpen, onMobileOpenChange, width = {}, side = 'left', variant = 'sidebar', }) => {
     const [internalCollapsed, setInternalCollapsed] = useState(defaultCollapsed);
-    // Determine if component is controlled
-    const isControlled = controlledCollapsed !== undefined;
-    const collapsed = isControlled ? controlledCollapsed : internalCollapsed;
+    const [internalMobileOpen, setInternalMobileOpen] = useState(false);
+    const [isMobile, setIsMobile] = useState(false);
+    // Detect mobile breakpoint
+    useEffect(() => {
+        if (typeof window === 'undefined')
+            return;
+        const mql = window.matchMedia(`(max-width: ${mobileBreakpoint - 1}px)`);
+        const handler = (e) => {
+            setIsMobile(e.matches);
+            if (!e.matches) {
+                setInternalMobileOpen(false);
+                onMobileOpenChange === null || onMobileOpenChange === void 0 ? void 0 : onMobileOpenChange(false);
+            }
+        };
+        handler(mql);
+        mql.addEventListener('change', handler);
+        return () => mql.removeEventListener('change', handler);
+    }, [mobileBreakpoint, onMobileOpenChange]);
+    // Collapsed state
+    const isCollapsedControlled = controlledCollapsed !== undefined;
+    const collapsed = isCollapsedControlled ? controlledCollapsed : internalCollapsed;
     const setCollapsed = useCallback((newCollapsed) => {
-        if (!isControlled) {
+        if (!isCollapsedControlled) {
             setInternalCollapsed(newCollapsed);
         }
         onCollapsedChange === null || onCollapsedChange === void 0 ? void 0 : onCollapsedChange(newCollapsed);
-    }, [isControlled, onCollapsedChange]);
+    }, [isCollapsedControlled, onCollapsedChange]);
     const toggleCollapsed = useCallback(() => {
         setCollapsed(!collapsed);
     }, [collapsed, setCollapsed]);
+    // Mobile open state
+    const isMobileOpenControlled = controlledMobileOpen !== undefined;
+    const isMobileOpen = isMobileOpenControlled ? controlledMobileOpen : internalMobileOpen;
+    const setMobileOpen = useCallback((open) => {
+        if (!isMobileOpenControlled) {
+            setInternalMobileOpen(open);
+        }
+        onMobileOpenChange === null || onMobileOpenChange === void 0 ? void 0 : onMobileOpenChange(open);
+    }, [isMobileOpenControlled, onMobileOpenChange]);
+    // Lock body scroll when mobile overlay is open
+    useEffect(() => {
+        if (isMobile && isMobileOpen) {
+            document.body.style.overflow = 'hidden';
+            return () => { document.body.style.overflow = ''; };
+        }
+    }, [isMobile, isMobileOpen]);
     const contextValue = useMemo(() => ({
         collapsed,
         setCollapsed,
         toggleCollapsed,
         width: {
             expanded: width.expanded || 280,
-            collapsed: width.collapsed || 80,
+            collapsed: width.collapsed || 64,
         },
         side,
         variant,
-    }), [collapsed, setCollapsed, toggleCollapsed, width.expanded, width.collapsed, side, variant]);
+        isMobileOpen,
+        setMobileOpen,
+        isMobile,
+    }), [collapsed, setCollapsed, toggleCollapsed, width.expanded, width.collapsed, side, variant, isMobileOpen, setMobileOpen, isMobile]);
     return (jsx(SidebarContext.Provider, { value: contextValue, children: children }));
 };
 
-export { SidebarProvider, useSidebarContext };
+export { AccordionNavProvider, SidebarProvider, useAccordionNavContext, useSidebarContext };

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

@@ -6,7 +6,9 @@ import { useSidebarContext } from './SidebarContext.js';
 const SidebarFooter = React__default.forwardRef(({ children, className, ...props }, ref) => {
     const sidebarContext = useSidebarContext();
     const collapsed = (sidebarContext === null || sidebarContext === void 0 ? void 0 : sidebarContext.collapsed) || false;
-    return (jsx("div", { ref: ref, className: cn("flex-shrink-0 border-t border-[var(--color-border)] bg-[var(--color-background)] transition-all duration-200", collapsed ? "p-2 flex justify-center" : "p-4", className), ...props, children: children }));
+    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 }));
 });
 SidebarFooter.displayName = "SidebarFooter";
 

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

@@ -1,17 +1,21 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import React__default from 'react';
+import { XMarkIcon } from '@heroicons/react/24/outline';
 import { cn } from '../../../utils/cn.js';
 import { useSidebarContext } from './SidebarContext.js';
 import { SidebarToggle } from './SidebarToggle.js';
+import { Button } from '../Button/Button.js';
 
 const SidebarHeader = React__default.forwardRef(({ logo, showToggle = true, customToggle, children, className, ...props }, ref) => {
     const sidebarContext = useSidebarContext();
     const collapsed = (sidebarContext === null || sidebarContext === void 0 ? void 0 : sidebarContext.collapsed) || false;
+    const isMobile = (sidebarContext === null || sidebarContext === void 0 ? void 0 : sidebarContext.isMobile) || false;
+    const isMobileOpen = (sidebarContext === null || sidebarContext === void 0 ? void 0 : sidebarContext.isMobileOpen) || false;
     // If children are provided, use them instead of default layout
     if (children) {
-        return (jsx("div", { ref: ref, className: cn("flex-shrink-0 border-b border-gray-200 bg-white", className), ...props, children: children }));
+        return (jsx("div", { ref: ref, className: cn("flex-shrink-0 border-b border-[var(--color-border)]", className), ...props, children: children }));
     }
-    return (jsxs("div", { ref: ref, className: cn("flex items-center justify-between flex-shrink-0 h-16 border-b border-[var(--color-border)] bg-[var(--color-background)] transition-all duration-200", collapsed ? "px-3" : "px-4", className), ...props, children: [jsx("div", { className: cn("flex items-center min-w-0 transition-all duration-200", collapsed ? "flex-shrink-0" : "flex-1"), children: logo }), showToggle && (jsx("div", { className: "flex-shrink-0", children: customToggle || jsx(SidebarToggle, {}) }))] }));
+    return (jsxs("div", { ref: ref, className: cn("flex items-center 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, {}) }))] }));
 });
 SidebarHeader.displayName = "SidebarHeader";
 

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

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

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

@@ -0,0 +1,29 @@
+import { jsx } from 'react/jsx-runtime';
+import React__default from 'react';
+import { Bars3Icon } from '@heroicons/react/24/outline';
+import { cn } from '../../../utils/cn.js';
+import { useSidebarContext } from './SidebarContext.js';
+import { Button } from '../Button/Button.js';
+
+const SidebarMobileTrigger = React__default.forwardRef(({ icon, className, onClick, ...props }, ref) => {
+    const sidebarContext = useSidebarContext();
+    if (!sidebarContext) {
+        if (process.env.NODE_ENV !== "production") {
+            console.warn("SidebarMobileTrigger must be used within a Sidebar component");
+        }
+        return null;
+    }
+    const { isMobile, setMobileOpen } = sidebarContext;
+    // Only render on mobile
+    if (!isMobile)
+        return null;
+    const handleClick = (e) => {
+        setMobileOpen(true);
+        onClick === null || onClick === void 0 ? void 0 : onClick(e);
+    };
+    const { onAnimationStart, onAnimationEnd, onDrag, onDragStart, onDragEnd, color: _color, ...buttonProps } = props;
+    return (jsx(Button, { ref: ref, variant: "soft", size: "sm", className: cn("size-9 p-0", className), onClick: handleClick, "aria-label": "Open navigation menu", ...buttonProps, children: icon || jsx(Bars3Icon, { className: "size-5" }) }));
+});
+SidebarMobileTrigger.displayName = "SidebarMobileTrigger";
+
+export { SidebarMobileTrigger };

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

@@ -1,9 +1,10 @@
 import { jsx } from 'react/jsx-runtime';
 import React__default from 'react';
 import { cn } from '../../../utils/cn.js';
+import { AccordionNavProvider } from './SidebarContext.js';
 
-const SidebarNav = React__default.forwardRef(({ children, className, ...props }, ref) => {
-    return (jsx("nav", { ref: ref, className: cn('flex-1 space-y-1 p-4', className), role: "navigation", ...props, children: children }));
+const SidebarNav = React__default.forwardRef(({ accordion = false, children, className, ...props }, ref) => {
+    return (jsx("nav", { ref: ref, className: cn('flex-1 space-y-1 p-4', className), role: "navigation", ...props, children: jsx(AccordionNavProvider, { accordion: accordion, children: children }) }));
 });
 SidebarNav.displayName = 'SidebarNav';
 

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

@@ -6,8 +6,10 @@ import { useSidebarContext } from './SidebarContext.js';
 const SidebarNavGroup = React__default.forwardRef(({ title, showTitleWhenCollapsed = false, children, className, ...props }, ref) => {
     const sidebarContext = useSidebarContext();
     const collapsed = (sidebarContext === null || sidebarContext === void 0 ? void 0 : sidebarContext.collapsed) || false;
-    const showTitle = title && (!collapsed || showTitleWhenCollapsed);
-    return (jsxs("div", { ref: ref, className: cn("space-y-1", className), ...props, children: [showTitle && (jsx("div", { className: "px-2 py-2", children: jsx("h3", { className: "text-sm font-semibold text-[var(--color-text-muted)] uppercase tracking-wider", children: title }) })), collapsed && !showTitleWhenCollapsed && (jsx("div", { className: "h-px bg-[var(--color-border)] mx-2 my-2" })), jsx("div", { className: "space-y-1", children: children })] }));
+    const 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 })] }));
 });
 SidebarNavGroup.displayName = "SidebarNavGroup";
 

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

@@ -19,7 +19,8 @@ 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
+    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" }) }) }));
 });

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,35 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React__default from 'react';
+import { cn } from '../../../utils/cn.js';
+import { useSidebarContext } from './SidebarContext.js';
+import { Avatar } from '../Avatar/Avatar.js';
+import { Tooltip } from '../Tooltip/Tooltip.js';
+import '../Tooltip/Tooltip.animations.js';
+
+const statusColors = {
+    online: "bg-[var(--color-success)]",
+    offline: "bg-[var(--color-background-quaternary)]",
+    away: "bg-[var(--color-warning)]",
+    busy: "bg-[var(--color-danger)]",
+};
+const SidebarUserProfile = React__default.forwardRef(({ name, email, avatar, status, dropdownContent, className, onClick, ...props }, ref) => {
+    const sidebarContext = useSidebarContext();
+    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;
+    const avatarElement = (jsxs("div", { className: "relative flex-shrink-0", children: [jsx(Avatar, { src: avatar, name: name, size: "sm" }), status && (jsx("span", { className: cn("absolute -bottom-0.5 -right-0.5 size-3 rounded-full ring-2 ring-[var(--color-background)]", statusColors[status]), "aria-label": `Status: ${status}` }))] }));
+    const content = (jsxs("div", { ref: ref, className: cn("flex items-center gap-3 rounded-[var(--radius-base)] cursor-pointer transition-colors duration-150 hover:bg-[var(--color-background-secondary)]", isCollapsedView ? "justify-center p-2" : "px-3 py-2", className), role: "button", tabIndex: 0, onClick: onClick, onKeyDown: (e) => {
+            if ((e.key === "Enter" || e.key === " ") && onClick) {
+                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;
+});
+SidebarUserProfile.displayName = "SidebarUserProfile";
+
+export { SidebarUserProfile };

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

@@ -6,5 +6,7 @@ export { SidebarNav } from "./SidebarNav";
 export { SidebarNavGroup } from "./SidebarNavGroup";
 export { SidebarSubmenu } from "./SidebarSubmenu";
 export { SidebarToggle } from "./SidebarToggle";
+export { SidebarMobileTrigger } from "./SidebarMobileTrigger";
+export { SidebarUserProfile } from "./SidebarUserProfile";
 export { useSidebarContext } from "./SidebarContext";
-export type { SidebarProps, SidebarHeaderProps, SidebarContentProps, SidebarFooterProps, SidebarNavProps, SidebarNavGroupProps, SidebarToggleProps, 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, } from "./Sidebar.types";

package/dist/components/core/SocialIcon/SocialIcon.js

@@ -22,7 +22,7 @@ const SocialIcon = React__default.forwardRef(({ icon, size = 'md', colorMode = '
     const fill = colorMode === 'brand' ? platform.brandColor : 'currentColor';
     return (jsx("svg", { ref: ref, xmlns: "http://www.w3.org/2000/svg", viewBox: platform.viewBox, width: resolvedSize, height: resolvedSize, fill: fill, role: "img", "aria-label": `${platform.label} icon`, "data-icon": icon, "data-color-mode": colorMode, "data-size": size, className: cn(theme.baseStyle, className), ...props, children: platform.shapes.map((shape, i) => {
             var _a;
-            return (jsx("path", { d: shape.d, fill: (_a = shape.fill) !== null && _a !== void 0 ? _a : undefined }, i));
+            return (jsx("path", { d: shape.d, fill: colorMode === 'brand' ? ((_a = shape.fill) !== null && _a !== void 0 ? _a : undefined) : undefined }, i));
         }) }));
 });
 SocialIcon.displayName = 'SocialIcon';

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

@@ -154,7 +154,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 +164,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) {

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: {

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
  */

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

@@ -7,11 +7,11 @@ const tabsTheme = {
     // TabsList styles with proper design tokens
     listStyle: "relative inline-flex items-center flex-row border-b border-[var(--color-border)] gap-2",
     // 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-base gap-1",
-        md: "px-2 py-2 text-base gap-1",
+        sm: "px-2 py-1.5 text-base",
+        md: "px-2 py-2 text-base",
     },
     // 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

@@ -14,7 +14,7 @@ const TabsBody = React__default.forwardRef(({ value, forceMount = false, childre
     const shouldReduceMotion = useReducedMotion();
     // Check if we're in Storybook and should disable animations
     const isInStorybook = typeof window !== 'undefined' && window.__STORYBOOK_DISABLE_ANIMATIONS__;
-    const shouldDisableAnimations = !!shouldReduceMotion || isInStorybook;
+    const shouldDisableAnimations = !!shouldReduceMotion || !!isInStorybook;
     const isSelected = value === selectedValue;
     const shouldRender = forceMount || isSelected;
     // Compute animation variants without a global cache (HMR-safe)

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

@@ -14,7 +14,7 @@ const TabsTrigger = React__default.forwardRef(({ value, disabled = false, childr
     const shouldReduceMotion = useReducedMotion();
     // Check if we're in Storybook and should disable animations
     const isInStorybook = typeof window !== 'undefined' && window.__STORYBOOK_DISABLE_ANIMATIONS__;
-    const shouldDisableAnimations = !!shouldReduceMotion || isInStorybook;
+    const shouldDisableAnimations = !!shouldReduceMotion || !!isInStorybook;
     // Memoize derived state flags for performance
     const derivedState = useMemo(() => ({
         isSelected: value === selectedValue,

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

@@ -47,10 +47,10 @@ const Tag = React__default.forwardRef(({ children, size = "md", removable = true
     // Avatar takes precedence over startContent
     const renderLeadingContent = () => {
         if (avatar) {
-            return (jsx(Avatar, { src: avatar.src, name: avatar.name, fallback: avatar.fallback, initialsCount: avatar.initialsCount, className: cn(theme.avatarSizes[size], "rounded-full border-0") }));
+            return (jsx("span", { className: cn("inline-flex items-center justify-center shrink-0 overflow-hidden rounded-full", theme.avatarSizes[size]), children: jsx(Avatar, { src: avatar.src, name: avatar.name, fallback: avatar.fallback, initialsCount: avatar.initialsCount, size: "xs", className: "!size-full border-0 rounded-full" }) }));
         }
         if (startContent) {
-            return (jsx("span", { className: cn("inline-flex items-center", theme.startContentSizes[size]), children: startContent }));
+            return (jsx("span", { className: cn("inline-flex items-center justify-center shrink-0", theme.startContentSizes[size]), children: startContent }));
         }
         return null;
     };

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

@@ -1,3 +1,3 @@
-import React from 'react';
-import { ToastProps } from './Toast.types';
+import React from "react";
+import { ToastProps } from "./Toast.types";
 export declare const Toast: React.ForwardRefExoticComponent<ToastProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/core/Toast/Toast.js

@@ -5,14 +5,18 @@ import { cn } from '../../../utils/cn.js';
 import { toastTheme } from './Toast.theme.js';
 import { toastAnimations, getToastStackingAnimation } from './Toast.animations.js';
 import { ArrowPathIcon, InformationCircleIcon, XMarkIcon } from '@heroicons/react/24/solid';
+import { Button } from '../Button/Button.js';
 
-const Toast = React__default.forwardRef(({ toast, className, theme: customTheme = {}, // Deprecated - kept for backward compatibility
-onDismiss, index = 0, isExpanded = false, totalToasts = 1, onMouseEnter, onMouseLeave, onHeightChange, expandedOffset, darkMode = false, ...props }, ref) => {
+const isToastAction = (action) => typeof action === "object" &&
+    action !== null &&
+    "label" in action &&
+    "onClick" in action;
+const Toast = React__default.forwardRef(({ toast, className, onDismiss, index = 0, isExpanded = false, totalToasts = 1, onMouseEnter, onMouseLeave, onHeightChange, expandedOffset, darkMode = false, ...props }, ref) => {
     var _a;
     const internalRef = useRef(null);
     const setRefs = useCallback((node) => {
         internalRef.current = node;
-        if (typeof ref === 'function') {
+        if (typeof ref === "function") {
             ref(node);
         }
         else if (ref) {
@@ -20,11 +24,9 @@ onDismiss, index = 0, isExpanded = false, totalToasts = 1, onMouseEnter, onMouse
         }
     }, [ref]);
     const shouldReduceMotion = useReducedMotion();
-    const { id, variant = 'default', state = 'default', title, subtitle, icon, action, duration = 5000, dismissible = true, } = toast;
-    const isTextOnly = !subtitle && !action;
-    const defaultIcon = state === 'loading'
-        ? (jsx(motion.div, { animate: { rotate: 360 }, transition: { repeat: Infinity, duration: 1, ease: "linear" }, children: jsx(ArrowPathIcon, { className: "w-5 h-5" }) }))
-        : jsx(InformationCircleIcon, { className: "w-5 h-5" });
+    const { id, variant = "default", state = "default", title, subtitle, icon, action, children, duration = 5000, dismissible = true, } = toast;
+    const isTextOnly = !subtitle && !action && !children;
+    const defaultIcon = state === "loading" ? (jsx(motion.div, { animate: { rotate: 360 }, transition: { repeat: Infinity, duration: 1, ease: "linear" }, children: jsx(ArrowPathIcon, { className: "w-5 h-5" }) })) : (jsx(InformationCircleIcon, { className: "w-5 h-5" }));
     const resolvedIcon = icon || defaultIcon;
     // Auto-dismiss after duration
     useEffect(() => {
@@ -46,9 +48,11 @@ onDismiss, index = 0, isExpanded = false, totalToasts = 1, onMouseEnter, onMouse
         onDismiss === null || onDismiss === void 0 ? void 0 : onDismiss(id);
     };
     const handleActionClick = () => {
-        action === null || action === void 0 ? void 0 : action.onClick();
-        if (dismissible) {
-            handleDismiss();
+        if (isToastAction(action)) {
+            action.onClick();
+            if (dismissible) {
+                handleDismiss();
+            }
         }
     };
     const stackingStyle = getToastStackingAnimation(index, totalToasts, isExpanded, expandedOffset);
@@ -58,31 +62,36 @@ onDismiss, index = 0, isExpanded = false, totalToasts = 1, onMouseEnter, onMouse
             opacity: (_a = stackingStyle.opacity) !== null && _a !== void 0 ? _a : 1,
             y: (_b = stackingStyle.y) !== null && _b !== void 0 ? _b : 0,
             scale: (_c = stackingStyle.scale) !== null && _c !== void 0 ? _c : 1,
-            zIndex: (_d = stackingStyle.zIndex) !== null && _d !== void 0 ? _d : 1
+            zIndex: (_d = stackingStyle.zIndex) !== null && _d !== void 0 ? _d : 1,
         });
-    }, [stackingStyle.opacity, stackingStyle.y, stackingStyle.scale, stackingStyle.zIndex]);
+    }, [
+        stackingStyle.opacity,
+        stackingStyle.y,
+        stackingStyle.scale,
+        stackingStyle.zIndex,
+    ]);
     const styleValue = useMemo(() => {
         var _a;
         return ({
             zIndex: (_a = stackingStyle.zIndex) !== null && _a !== void 0 ? _a : 1,
-            position: (index > 0 ? 'absolute' : 'relative'),
+            position: (index > 0
+                ? "absolute"
+                : "relative"),
             top: index > 0 ? 0 : undefined,
             left: index > 0 ? 0 : undefined,
-            width: index > 0 ? '100%' : undefined,
+            width: index > 0 ? "100%" : undefined,
         });
     }, [stackingStyle.zIndex, index]);
     const toastNode = (jsxs(motion.div, { ref: setRefs, layout: true, initial: shouldReduceMotion ? false : toastAnimations.initial, animate: animateValue, exit: shouldReduceMotion
             ? { ...toastAnimations.exit, transition: { duration: 0 } }
-            : toastAnimations.exit, transition: shouldReduceMotion ? { duration: 0 } : toastAnimations.transition, className: cn(toastTheme.baseStyle, isTextOnly && 'items-center', ((_a = toastTheme.variants) === null || _a === void 0 ? void 0 : _a[variant]) || "", 'pointer-events-auto', index > 0 && !isExpanded && 'absolute top-0 left-0', className), style: styleValue, role: "alert", "aria-live": "polite", children: [jsx("div", { className: isTextOnly ? toastTheme.iconCenteredStyle : toastTheme.iconStyle, children: resolvedIcon }), jsxs("div", { className: "flex-1 min-w-0", children: [title && (typeof title === 'string'
-                        ? jsx("div", { className: isTextOnly ? toastTheme.textOnlyStyle : toastTheme.titleStyle, children: title })
-                        : title), subtitle && (typeof subtitle === 'string'
-                        ? jsx("div", { className: toastTheme.subtitleStyle, children: subtitle })
-                        : subtitle), action && (jsx("div", { className: "mt-2", children: jsx("button", { type: "button", className: toastTheme.actionStyle, onClick: handleActionClick, children: action.label }) }))] }), dismissible && (jsx("button", { type: "button", className: isTextOnly ? toastTheme.closeButtonCenteredStyle : toastTheme.closeButtonStyle, onClick: handleDismiss, "aria-label": "Dismiss notification", children: jsx(XMarkIcon, { className: "w-4 h-4" }) }))] }));
+            : toastAnimations.exit, transition: shouldReduceMotion ? { duration: 0 } : toastAnimations.transition, className: cn(toastTheme.baseStyle, isTextOnly && "items-center", ((_a = toastTheme.variants) === null || _a === void 0 ? void 0 : _a[variant]) || "", "pointer-events-auto", index > 0 && !isExpanded && "absolute top-0 left-0", className), style: styleValue, role: "alert", "aria-live": "polite", children: [jsx("div", { className: cn(toastTheme.iconStyle, !isTextOnly && "mt-0.5"), children: resolvedIcon }), jsxs("div", { className: "flex-1 min-w-0", children: [title &&
+                        (typeof title === "string" ? (jsx("div", { className: cn(toastTheme.titleStyle, !isTextOnly && "font-semibold"), children: title })) : (title)), subtitle &&
+                        (typeof subtitle === "string" ? (jsx("div", { className: toastTheme.subtitleStyle, children: subtitle })) : (subtitle)), action && (jsx("div", { className: "mt-4", children: isToastAction(action) ? (jsx(Button, { variant: "link", color: "primary", onClick: handleActionClick, children: action.label })) : (action) })), children] }), dismissible && (jsx("button", { type: "button", className: cn(toastTheme.closeButtonStyle, !isTextOnly && "mt-0.5"), onClick: handleDismiss, "aria-label": "Dismiss notification", children: jsx(XMarkIcon, { className: "size-5" }) }))] }));
     if (darkMode) {
         return jsx("div", { className: "dark", children: toastNode });
     }
     return toastNode;
 });
-Toast.displayName = 'Toast';
+Toast.displayName = "Toast";
 
 export { Toast };

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

@@ -6,15 +6,10 @@ const toastTheme = {
         default: "border border-[var(--color-border)] dark:border-white/10",
         glass: "glass-effect",
     },
-    iconStyle: "flex-shrink-0 size-5 mt-0.5",
-    iconCenteredStyle: "flex-shrink-0 size-5",
-    titleStyle: "font-semibold text-base",
-    textOnlyStyle: "text-base",
-    subtitleStyle: "text-base mt-0.5 opacity-60",
-    actionStyle: "text-sm font-medium px-2 py-1 rounded border bg-white/80 hover:bg-white transition-colors cursor-pointer " +
-        "dark:bg-white/10 dark:border-white/20 dark:hover:bg-white/20 dark:text-white",
-    closeButtonStyle: "absolute top-2 right-2 flex-shrink-0 w-4 h-4 opacity-70 hover:opacity-100 transition-opacity cursor-pointer",
-    closeButtonCenteredStyle: "flex-shrink-0 w-4 h-4 opacity-70 hover:opacity-100 transition-opacity cursor-pointer",
+    iconStyle: "flex-shrink-0",
+    titleStyle: "text-base text-[var(--color-text-primary)]",
+    subtitleStyle: "text-base mt-1 text-[var(--color-text-secondary)]",
+    closeButtonStyle: "flex-shrink-0 size-5 opacity-70 hover:opacity-100 transition-opacity cursor-pointer",
     containerStyle: "fixed z-50 pointer-events-none",
 };
 

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

@@ -16,28 +16,11 @@ export interface ToastTheme {
     baseStyle: string;
     variants: Record<ToastVariant, string>;
     iconStyle: string;
-    iconCenteredStyle: string;
     titleStyle: string;
-    textOnlyStyle: string;
     subtitleStyle: string;
-    actionStyle: string;
     closeButtonStyle: string;
-    closeButtonCenteredStyle: string;
     containerStyle: string;
 }
-export interface ToastThemeOverrides {
-    baseStyle?: string;
-    variants?: Partial<Record<ToastVariant, string>>;
-    iconStyle?: string;
-    iconCenteredStyle?: string;
-    titleStyle?: string;
-    textOnlyStyle?: string;
-    subtitleStyle?: string;
-    actionStyle?: string;
-    closeButtonStyle?: string;
-    closeButtonCenteredStyle?: string;
-    containerStyle?: string;
-}
 export interface ToastData {
     id: string;
     variant?: ToastVariant;
@@ -45,7 +28,8 @@ export interface ToastData {
     title?: ReactNode;
     subtitle?: ReactNode;
     icon?: ReactNode;
-    action?: ToastAction;
+    action?: ToastAction | ReactNode;
+    children?: ReactNode;
     duration?: number;
     dismissible?: boolean;
     onDismiss?: () => void;
@@ -55,8 +39,6 @@ export interface ToastProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"
     toast: ToastData;
     /** Custom class name */
     className?: string;
-    /** Theme overrides (deprecated - use className for customization) */
-    theme?: ToastThemeOverrides;
     /** Callback when toast is dismissed */
     onDismiss?: (id: string) => void;
     /** Index of toast in the stack */
@@ -102,7 +84,8 @@ export interface UseToastOptions {
     state?: ToastState;
     duration?: number;
     dismissible?: boolean;
-    action?: ToastAction;
+    action?: ToastAction | ReactNode;
+    children?: ReactNode;
     icon?: ReactNode;
 }
 export interface UseToastReturn {

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

@@ -1,5 +1,5 @@
 export { Toast } from './Toast';
 export { ToastProvider, useToastContext } from './ToastProvider';
 export { useToast } from './useToast';
-export type { ToastProps, ToastData, ToastProviderProps, ToastTheme, ToastThemeOverrides, ToastVariant, UseToastReturn, UseToastOptions, } from './Toast.types';
+export type { ToastProps, ToastData, ToastProviderProps, ToastTheme, ToastVariant, UseToastReturn, UseToastOptions, } from './Toast.types';
 export { toastTheme } from './Toast.theme';

package/dist/components/core/Tooltip/Tooltip.js

@@ -55,7 +55,7 @@ const Tooltip = ({ content, children, placement = "top", delay = 300, disabled =
     const { position, cssVariables, contentRef: portalContentRef} = useSelectPortal({
         triggerRef,
         isOpen: isVisible,
-        placement: placement, // TooltipPlacement matches SelectPlacement subset
+        placement: placement,
         offset,
         autoWidth: true,
     });