@flikk/ui 1.0.0-beta.21 → 1.0.0-beta.23

package/dist/components/core/NavItem/NavItem.js

@@ -120,7 +120,6 @@ notification, description, shortcut, href, onClick, active = false, disabled = f
     const dangerClasses = isDanger ? theme.danger : "";
     // Active indicator
     const activeIndicatorClasses = isActive && level === 0 ? theme.activeIndicator : "";
-    // Build container classes
     const containerClasses = cn(theme.baseStyle, getStateClasses(), theme.levels[level], isCollapsedView && ((_a = theme.collapsed) === null || _a === void 0 ? void 0 : _a.container), dangerClasses, activeIndicatorClasses, className);
     // Get icon state classes
     const getIconStateClasses = () => {
@@ -146,7 +145,16 @@ notification, description, shortcut, href, onClick, active = false, disabled = f
                         ? React__default.cloneElement(startContent, {
                             className: cn(iconClasses, startContent.props.className),
                         })
-                        : startContent, isCollapsedView && notificationElement && (jsx("span", { className: "absolute -top-1 -right-1", children: notificationElement }))] })), !isCollapsedView && (jsxs("div", { className: "flex-1 min-w-0", children: [jsxs("div", { className: "flex items-center justify-between gap-2", children: [jsx("span", { className: cn("truncate", textClasses), children: children }), shortcut && (jsx("kbd", { className: "hidden group-hover:inline-block text-sm text-[var(--color-text-muted)] font-sans border border-[var(--color-border)] rounded px-1.5 py-0.5", children: shortcut }))] }), description && (jsx("div", { className: "text-sm text-[var(--color-text-muted)] mt-0.5 truncate", children: description }))] })), !isCollapsedView && (jsxs("div", { className: "flex items-center gap-1.5 flex-shrink-0", children: [notificationElement, endContent, chevron] })), isCollapsedView && (jsx("span", { className: "sr-only", children: children }))] }));
+                        : startContent, isCollapsedView && notificationElement && (jsx("span", { className: "absolute -top-1 -right-1", children: notificationElement }))] })), jsxs("div", { className: "min-w-0 overflow-hidden", "aria-hidden": isCollapsedView || undefined, style: {
+                    flex: "1 1 auto",
+                    maxWidth: isCollapsedView ? 0 : 9999,
+                    opacity: isCollapsedView ? 0 : 1,
+                    transition: "max-width 0.18s cubic-bezier(0.4,0,0.2,1), opacity 0.12s ease-out",
+                }, children: [jsxs("div", { className: "flex items-center justify-between gap-2", children: [jsx("span", { className: cn("truncate", textClasses), children: children }), shortcut && (jsx("kbd", { className: "hidden group-hover:inline-block text-sm text-[var(--color-text-muted)] font-sans border border-[var(--color-border)] rounded px-1.5 py-0.5", children: shortcut }))] }), description && (jsx("div", { className: "text-sm text-[var(--color-text-muted)] mt-0.5 truncate", children: description }))] }), jsxs("div", { className: "flex items-center gap-1.5 flex-shrink-0 overflow-hidden", style: {
+                    maxWidth: isCollapsedView ? 0 : 120,
+                    opacity: isCollapsedView ? 0 : 1,
+                    transition: "max-width 0.18s cubic-bezier(0.4,0,0.2,1), opacity 0.12s ease-out",
+                }, children: [notificationElement, endContent, chevron] }), isCollapsedView && (jsx("span", { className: "sr-only", children: children }))] }));
     // Self-contained submenu
     const submenu = hasSubmenu && items && items.length > 0 && !isCollapsedView ? (jsx(AnimatePresence, { initial: false, children: isExpanded && (jsx(motion.div, { initial: "collapsed", animate: "open", exit: "collapsed", variants: {
                 open: { opacity: 1, height: "auto" },
@@ -159,12 +167,14 @@ notification, description, shortcut, href, onClick, active = false, disabled = f
         }
         return node;
     };
-    // Show tooltip in collapsed sidebar mode
+    // Always render Tooltip when in a sidebar (keeps tree structure stable across
+    // collapse/expand so CSS transitions aren't interrupted by DOM remounts).
+    // The tooltip is disabled when not in collapsed view.
     const renderWithTooltip = (node) => {
-        if (isCollapsedView && showTooltipWhenCollapsed) {
-            return (jsx(Tooltip, { content: children, placement: "right", children: node }));
+        if (!isInSidebar || !showTooltipWhenCollapsed) {
+            return node;
         }
-        return node;
+        return (jsx(Tooltip, { content: children, placement: "right", disabled: !isCollapsedView, triggerClassName: "block w-full", children: node }));
     };
     return (jsxs(Fragment, { children: [renderWithTooltip(renderWrapped(content)), submenu] }));
 });

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

@@ -1,5 +1,5 @@
 const navItemTheme = {
-    baseStyle: "relative flex items-center gap-2 px-2 py-1.5 text-base font-medium cursor-pointer select-none transition-all duration-150 w-full rounded-[var(--nav-item-radius)] outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)] group",
+    baseStyle: "relative flex items-center gap-2 px-2 py-1.5 text-sm font-medium cursor-pointer select-none transition-colors duration-150 w-full rounded-[var(--nav-item-radius)] outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)] group overflow-hidden",
     icon: "size-4 text-[var(--color-text-secondary)]",
     text: "flex-1 min-w-0 truncate",
     states: {
@@ -19,7 +19,7 @@ const navItemTheme = {
         2: "pl-10",
     },
     collapsed: {
-        container: "!gap-0 justify-center p-2 aspect-square",
+        container: "!gap-0 justify-center !p-2",
         icon: "size-5",
     },
     activeIndicator: "before:absolute before:left-0 before:top-1/2 before:-translate-y-1/2 before:h-5 before:w-[3px] before:rounded-full before:bg-[var(--color-primary)]",

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

@@ -15,8 +15,8 @@ const offlineIndicatorTheme = {
     offline: "bg-[var(--color-neutral-900)]/90 backdrop-blur-sm text-white",
     online: "bg-[var(--color-success)]/90 backdrop-blur-sm text-[var(--color-success-contrast)]",
     icon: "size-4 flex-shrink-0",
-    message: "text-sm font-medium",
-    queueCount: "text-sm opacity-80 ml-1",
+    message: "text-xs font-medium",
+    queueCount: "text-xs opacity-80 ml-1",
 };
 
 export { offlineIndicatorTheme };

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

@@ -1,8 +1,8 @@
 const pageHeadingTheme = {
     baseStyle: "flex flex-col pb-6 mb-6",
     headerStyle: "flex items-center gap-4",
-    titleStyle: "text-2xl font-semibold tracking-tight text-[var(--color-text-primary)]",
-    subtitleStyle: "text-base text-[var(--color-text-muted)] mt-1",
+    titleStyle: "text-xl font-semibold tracking-tight text-[var(--color-text-primary)]",
+    subtitleStyle: "text-sm text-[var(--color-text-muted)] mt-1",
     actionsStyle: "sm:ml-auto flex items-center gap-2 shrink-0",
     iconStyle: "flex items-center justify-center shrink-0 text-[var(--color-text-muted)]",
     separatorStyle: "border-b border-[var(--color-border)] mt-4",

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

@@ -26,8 +26,8 @@ const paginationTheme = {
         "data-[disabled=true]:opacity-50 data-[disabled=true]:cursor-not-allowed data-[disabled=true]:pointer-events-none",
     // Unified item sizes
     itemSizes: {
-        sm: "size-8 min-w-[2rem] text-base",
-        md: "size-10 min-w-[2.5rem] text-base",
+        sm: "size-8 min-w-[2rem] text-sm",
+        md: "size-10 min-w-[2.5rem] text-sm",
     },
     // Ellipsis styles
     ellipsisStyle: "inline-flex items-center justify-center font-medium text-[var(--color-text-muted)] dark:text-[var(--color-neutral-500)] cursor-default pointer-events-none",

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

@@ -27,9 +27,9 @@ const pillTheme = {
      * Size variants
      */
     sizes: {
-        sm: "text-sm px-2 py-0.5 gap-0.5",
-        md: "text-base px-2 py-0.5 gap-1",
-        lg: "text-base px-3 py-1 gap-1.5",
+        sm: "text-xs px-2.5 py-0.5 gap-0.5",
+        md: "text-sm px-2.5 py-0.5 gap-1",
+        lg: "text-sm px-3 py-1 gap-1.5",
     },
     /**
      * Icon sizes for iconStart and CheckIcon

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

@@ -9,9 +9,9 @@ const progressTheme = {
     // Fill (progress bar) styles — includes default primary color
     fillStyle: "h-full rounded-full bg-[var(--color-primary)]",
     // Label text styles
-    labelStyle: "text-base font-semibold text-[var(--color-text-secondary)] tabular-nums min-w-[2.5rem] text-right",
+    labelStyle: "text-sm font-semibold text-[var(--color-text-secondary)] tabular-nums min-w-[2.5rem] text-right",
     // Inside label styles (when label is positioned inside the bar)
-    insideLabelStyle: "absolute inset-0 flex items-center justify-center text-sm font-medium text-[var(--color-primary-contrast)] tabular-nums",
+    insideLabelStyle: "absolute inset-0 flex items-center justify-center text-xs font-medium text-[var(--color-primary-contrast)] tabular-nums",
     // Size variants for track height
     sizes: {
         sm: "h-1.5",

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

@@ -25,9 +25,9 @@ const segmentedItemTheme = {
     baseStyle: "relative flex min-w-fit flex-1 items-center justify-center transition-all duration-200 rounded-[calc(var(--segmented-radius)-4px)] font-medium cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary-500)] focus-visible:ring-offset-1",
     // Size variants using CSS variables
     sizes: {
-        sm: "text-base px-[var(--segmented-px-sm)]",
-        md: "text-base px-[var(--segmented-px-md)]",
-        lg: "text-base px-[var(--segmented-px-lg)]",
+        sm: "text-sm px-[var(--segmented-px-sm)]",
+        md: "text-sm px-[var(--segmented-px-md)]",
+        lg: "text-sm px-[var(--segmented-px-lg)]",
     },
     // Selected state
     selectedStyle: "text-[var(--color-text-primary)] z-10",

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,17 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React__default from 'react';
+import { cn } from '../../../utils/cn.js';
+import { AnimatePresence, motion } from 'motion/react';
+import { useSidebarContext } from './SidebarContext.js';
+
+const SidebarLogo = React__default.forwardRef(({ icon, text, className, ...props }, ref) => {
+    var _a, _b;
+    const context = useSidebarContext();
+    const collapsed = (_a = context === null || context === void 0 ? void 0 : context.collapsed) !== null && _a !== void 0 ? _a : false;
+    const isMobile = (_b = context === null || context === void 0 ? void 0 : context.isMobile) !== null && _b !== void 0 ? _b : false;
+    const isCollapsedView = collapsed && !isMobile;
+    return (jsxs("div", { ref: ref, className: cn("flex items-center gap-2 overflow-hidden", className), ...props, children: [jsx("div", { className: "flex-shrink-0", children: icon }), jsx(AnimatePresence, { initial: false, children: !isCollapsedView && text && (jsx(motion.div, { className: "overflow-hidden whitespace-nowrap", initial: { opacity: 0, x: -8 }, animate: { opacity: 1, x: 0 }, exit: { opacity: 0, x: -8 }, transition: { duration: 0.15, ease: [0.4, 0, 0.2, 1] }, children: typeof text === "string" ? (jsx("span", { className: "text-lg font-bold text-[var(--color-text-primary)]", children: text })) : (text) }, "logo-text")) })] }));
+});
+SidebarLogo.displayName = "SidebarLogo";
+
+export { SidebarLogo };

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

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

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

@@ -1,6 +1,6 @@
 import { jsx } from 'react/jsx-runtime';
 import React__default from 'react';
-import { ChevronRightIcon, ChevronLeftIcon } from '@heroicons/react/24/outline';
+import { ChevronLeftIcon } from '@heroicons/react/24/outline';
 import { motion } from 'motion/react';
 import { cn } from '../../../utils/cn.js';
 import { useSidebarContext } from './SidebarContext.js';
@@ -20,9 +20,7 @@ const SidebarToggle = React__default.forwardRef(({ expandIcon, collapseIcon, cla
         onClick === null || onClick === void 0 ? void 0 : onClick(e);
     };
     const { onAnimationStart, onAnimationEnd, onDrag, onDragStart, onDragEnd, color: _color, ...buttonProps } = props;
-    return (jsx(Button, { ref: ref, variant: "soft", size: "sm", className: cn("size-8 p-0", className), onClick: handleClick, "aria-label": collapsed ? "Expand sidebar" : "Collapse sidebar", title: collapsed ? "Expand sidebar" : "Collapse sidebar", ...buttonProps, children: jsx(motion.div, { initial: false, animate: { rotate: collapsed ? 180 : 0 }, transition: { duration: 0.2 }, children: collapsed
-                ? expandIcon || jsx(ChevronRightIcon, { className: "size-4" })
-                : collapseIcon || jsx(ChevronLeftIcon, { className: "size-4" }) }) }));
+    return (jsx(Button, { ref: ref, variant: "ghost", size: "sm", className: cn("size-7 p-0 text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] hover:bg-[var(--color-background-secondary)]", className), onClick: handleClick, "aria-label": collapsed ? "Expand sidebar" : "Collapse sidebar", title: collapsed ? "Expand sidebar" : "Collapse sidebar", ...buttonProps, children: jsx(motion.div, { initial: false, animate: { rotate: collapsed ? 180 : 0 }, transition: { duration: 0.22, ease: [0.4, 0, 0.2, 1] }, children: jsx(ChevronLeftIcon, { className: "size-[15px]" }) }) }));
 });
 SidebarToggle.displayName = "SidebarToggle";
 

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

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

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

@@ -8,5 +8,6 @@ export { SidebarSubmenu } from "./SidebarSubmenu";
 export { SidebarToggle } from "./SidebarToggle";
 export { SidebarMobileTrigger } from "./SidebarMobileTrigger";
 export { SidebarUserProfile } from "./SidebarUserProfile";
+export { SidebarLogo } from "./SidebarLogo";
 export { useSidebarContext } from "./SidebarContext";
-export type { SidebarProps, SidebarHeaderProps, SidebarContentProps, SidebarFooterProps, SidebarNavProps, SidebarNavGroupProps, SidebarToggleProps, SidebarMobileTriggerProps, SidebarUserProfileProps, SidebarUserStatus, SidebarSide, SidebarVariant, SidebarContextValue, SidebarTheme, SidebarThemeOverrides, } from "./Sidebar.types";
+export type { SidebarProps, SidebarHeaderProps, SidebarContentProps, SidebarFooterProps, SidebarNavProps, SidebarNavGroupProps, SidebarToggleProps, SidebarMobileTriggerProps, SidebarUserProfileProps, SidebarUserStatus, SidebarSide, SidebarVariant, SidebarContextValue, SidebarTheme, SidebarThemeOverrides, SidebarLogoProps, } from "./Sidebar.types";

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

@@ -10,8 +10,8 @@ const tabsTheme = {
     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",
-        md: "px-2 py-2 text-base",
+        sm: "px-2 py-1.5 text-sm",
+        md: "px-2 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/Tag/Tag.theme.js

@@ -3,8 +3,8 @@ const tagTheme = {
         "bg-[var(--color-background-surface)] dark:bg-[var(--color-background-secondary)] border border-[var(--color-border)] " +
         "text-[var(--color-text-primary)]",
     sizes: {
-        sm: "text-sm px-2.5 py-0.5",
-        md: "text-base px-2.5 py-0.5",
+        sm: "text-xs px-2.5 py-0.5",
+        md: "text-sm px-2.5 py-0.5",
     },
     avatarSizes: {
         sm: "size-4 ml-0.5",

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

@@ -7,8 +7,8 @@ const toastTheme = {
         glass: "glass-effect",
     },
     iconStyle: "flex-shrink-0",
-    titleStyle: "text-base text-[var(--color-text-primary)]",
-    subtitleStyle: "text-base mt-1 text-[var(--color-text-secondary)]",
+    titleStyle: "text-sm text-[var(--color-text-primary)]",
+    subtitleStyle: "text-sm 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/Tooltip/Tooltip.d.ts

@@ -1,6 +1,6 @@
 import { TooltipProps } from "./Tooltip.types";
 declare const Tooltip: {
-    ({ content, children, placement, delay, disabled, className, maxWidth, minWidth, showOnFocus, wrapText, id, theme: themeOverrides, "aria-label": ariaLabel, role, offset, darkMode, }: TooltipProps): import("react/jsx-runtime").JSX.Element;
+    ({ content, children, placement, delay, disabled, className, triggerClassName, maxWidth, minWidth, showOnFocus, wrapText, id, theme: themeOverrides, "aria-label": ariaLabel, role, offset, darkMode, }: TooltipProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export { Tooltip };

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

@@ -37,7 +37,7 @@ const useDarkMode = () => {
     }, []);
     return isDark;
 };
-const Tooltip = ({ content, children, placement = "top", delay = 300, disabled = false, className, maxWidth = "360px", minWidth = "fit-content", showOnFocus = true, wrapText = false, id, theme: themeOverrides, "aria-label": ariaLabel, role = "tooltip", offset = 8, darkMode = false, }) => {
+const Tooltip = ({ content, children, placement = "top", delay = 300, disabled = false, className, triggerClassName, maxWidth = "360px", minWidth = "fit-content", showOnFocus = true, wrapText = false, id, theme: themeOverrides, "aria-label": ariaLabel, role = "tooltip", offset = 8, darkMode = false, }) => {
     const [isVisible, setIsVisible] = useState(false);
     const tooltipRef = useRef(null);
     const triggerRef = useRef(null);
@@ -123,7 +123,7 @@ const Tooltip = ({ content, children, placement = "top", delay = 300, disabled =
                 top: `${position.top}px`,
                 left: `${position.left}px`,
             }, className: cn(theme.baseStyle, widthClasses, className), "aria-hidden": !isVisible, "aria-label": ariaLabel, "aria-live": role === "tooltip" ? "polite" : undefined, variants: shouldReduceMotion ? {} : getTooltipVariants(placement), initial: shouldReduceMotion ? undefined : "initial", animate: shouldReduceMotion ? undefined : "animate", exit: shouldReduceMotion ? undefined : "exit", children: content })) }));
-    return (jsxs("div", { className: "relative inline-block", ref: triggerRef, ...triggerHandlers, tabIndex: showOnFocus ? 0 : undefined, "aria-describedby": isVisible && id ? id : undefined, children: [children, isClient &&
+    return (jsxs("div", { className: cn("relative inline-block", triggerClassName), ref: triggerRef, ...triggerHandlers, tabIndex: showOnFocus ? 0 : undefined, "aria-describedby": isVisible && id ? id : undefined, children: [children, isClient &&
                 createPortal(jsx("div", { className: darkMode || isDarkMode ? "dark" : undefined, children: tooltipContent }), document.body)] }));
 };
 // Set display name for dev tools and Storybook

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

@@ -1,6 +1,6 @@
 const tooltipTheme = {
     // Base style for the tooltip - using fixed positioning for portal rendering
-    baseStyle: "fixed z-[99] rounded-[var(--tooltip-radius)] py-1 px-2 text-sm text-[var(--color-text-primary)] focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)] focus-visible:ring-offset-2 pointer-events-none bg-white/90 backdrop-blur-md outline outline-[var(--color-border)] shadow-lg " +
+    baseStyle: "fixed z-[99] rounded-[var(--tooltip-radius)] py-1 px-2 text-xs text-[var(--color-text-primary)] focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)] focus-visible:ring-offset-2 pointer-events-none bg-white/90 backdrop-blur-md outline outline-[var(--color-border)] shadow-lg " +
         "dark:bg-[var(--color-neutral-800)]/90 dark:outline-[var(--color-border)]/80 dark:border-[var(--color-border)]",
 };
 

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

@@ -38,9 +38,13 @@ export interface TooltipProps {
      */
     disabled?: boolean;
     /**
-     * Additional classes for the tooltip container
+     * Additional classes for the tooltip container (the tooltip bubble)
      */
     className?: string;
+    /**
+     * Additional classes for the trigger wrapper element
+     */
+    triggerClassName?: string;
     /**
      * Max width for the tooltip content
      * @default "360px"

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

@@ -1,7 +1,7 @@
 const treeTheme = {
     baseStyle: 'flex flex-col w-full',
     nodeStyle: 'flex items-center py-1 pr-1 rounded-[calc(var(--radius-base)*0.75)] hover:bg-[var(--color-background-secondary)] cursor-pointer transition-colors select-none gap-2',
-    labelStyle: 'flex-1 text-lg text-[var(--color-text-primary)] truncate',
+    labelStyle: 'flex-1 text-base text-[var(--color-text-primary)] truncate',
     iconStyle: 'flex-shrink-0 text-[var(--color-text-muted)]',
     expandIconStyle: 'flex-shrink-0 mr-1 text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] transition-colors cursor-pointer size-4 flex items-center justify-center',
     indentSize: '1rem',

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

@@ -46,5 +46,4 @@ export * from "./Sidebar";
 export * from "./OfflineIndicator";
 export * from "./ContextMenu";
 export * from "./Pill";
-export * from "./SocialIcon";
-export * from "./FileTypeIcon";
+export * from "./Icon";

package/dist/components/core/index.js

@@ -100,6 +100,7 @@ export { SidebarSubmenu } from './Sidebar/SidebarSubmenu.js';
 export { SidebarToggle } from './Sidebar/SidebarToggle.js';
 export { SidebarMobileTrigger } from './Sidebar/SidebarMobileTrigger.js';
 export { SidebarUserProfile } from './Sidebar/SidebarUserProfile.js';
+export { SidebarLogo } from './Sidebar/SidebarLogo.js';
 export { useSidebarContext } from './Sidebar/SidebarContext.js';
 export { OfflineIndicator } from './OfflineIndicator/OfflineIndicator.js';
 export { offlineIndicatorTheme } from './OfflineIndicator/OfflineIndicator.theme.js';
@@ -107,8 +108,8 @@ export { ContextMenu } from './ContextMenu/ContextMenu.js';
 export { contextMenuTheme } from './ContextMenu/ContextMenu.theme.js';
 export { Pill } from './Pill/Pill.js';
 export { pillTheme } from './Pill/Pill.theme.js';
-export { SocialIcon } from './SocialIcon/SocialIcon.js';
-export { FileTypeIcon } from './FileTypeIcon/FileTypeIcon.js';
+export { Icon } from './Icon/Icon.js';
+export { fileTypes } from './Icon/data/fileTypes.js';
 export { AnimatePresence } from 'motion/react';
 export { CardBody } from './Card/CardBody.js';
 export { CardFooter } from './Card/CardFooter.js';

package/dist/components/data-display/DescriptionList/DescriptionList.theme.js

@@ -1,8 +1,8 @@
 const descriptionListTheme = {
     baseStyle: "divide-y divide-[var(--color-border)] min-w-0",
     itemStyle: "px-4 py-3",
-    termStyle: "text-base/6 font-medium text-[var(--color-text-primary)]",
-    detailStyle: "mt-1 text-base/6 text-[var(--color-text-secondary)]",
+    termStyle: "text-sm/6 font-medium text-[var(--color-text-primary)]",
+    detailStyle: "mt-1 text-sm/6 text-[var(--color-text-secondary)]",
 };
 
 export { descriptionListTheme };

package/dist/components/data-display/Feed/Feed.theme.js

@@ -13,7 +13,7 @@ const feedTheme = {
     timestampStyle: "mt-1 text-xs text-[var(--color-text-muted)]/80 whitespace-nowrap",
     // Collapse
     collapseStyle: "relative",
-    collapseButtonStyle: "flex items-center gap-1.5 text-sm font-medium text-[var(--color-primary)] hover:text-[var(--color-primary-700)] transition-colors cursor-pointer bg-transparent border-none p-0",
+    collapseButtonStyle: "flex items-center gap-1.5 text-xs font-medium text-[var(--color-primary)] hover:text-[var(--color-primary-700)] transition-colors cursor-pointer bg-transparent border-none p-0",
     collapseSvgStyle: "absolute top-0",
 };
 

package/dist/components/data-display/GanttChart/GanttChart.theme.js

@@ -1,5 +1,5 @@
 const ganttChartTheme = {
-    baseStyle: "flex flex-col w-full overflow-hidden text-base",
+    baseStyle: "flex flex-col w-full overflow-hidden text-sm",
     toolbarStyle: "flex flex-wrap items-center justify-between gap-3 px-3 py-2 border-b border-[var(--color-border)] bg-[var(--color-background-secondary)]",
     tablePanelStyle: "hidden sm:flex flex-col shrink-0 overflow-hidden",
     chartPanelStyle: "flex flex-col flex-1 min-w-0 overflow-hidden",
@@ -9,7 +9,7 @@ const ganttChartTheme = {
     tableTaskRowStyle: "flex items-center hover:bg-[var(--color-background-secondary)] transition-colors",
     tableCellStyle: "px-3 truncate text-[var(--color-text-primary)]",
     timelineHeaderStyle: "bg-[var(--color-background)] border-b border-[var(--color-border)]",
-    timelineMonthStyle: "text-sm font-medium text-[var(--color-text-secondary)] px-2 border-b border-[var(--color-border)] flex items-center",
+    timelineMonthStyle: "text-xs font-medium text-[var(--color-text-secondary)] px-2 border-b border-[var(--color-border)] flex items-center",
     timelineDayStyle: "text-[10px] text-[var(--color-text-muted)] flex items-center justify-center",
     gridLineStyle: "border-r border-[var(--color-border)]/30",
     weekendStyle: "bg-[var(--color-background-secondary)]/50",

package/dist/components/data-display/KPI/KPI.theme.js

@@ -3,23 +3,23 @@ import { semanticBgColors } from '../../../utils/colorUtils.js';
 const kpiTheme = {
     baseStyle: "flex flex-col gap-3",
     valueSizes: {
-        sm: "text-2xl font-bold text-[var(--color-text-primary)]",
-        md: "text-3xl font-bold text-[var(--color-text-primary)]",
-        lg: "text-4xl font-bold text-[var(--color-text-primary)]",
+        sm: "text-xl font-bold text-[var(--color-text-primary)]",
+        md: "text-2xl font-bold text-[var(--color-text-primary)]",
+        lg: "text-3xl font-bold text-[var(--color-text-primary)]",
     },
     labelStyle: "text-[var(--color-text-muted)]",
     labelSizes: {
-        sm: "text-sm",
-        md: "text-base",
-        lg: "text-lg",
+        sm: "text-xs",
+        md: "text-sm",
+        lg: "text-base",
     },
     trendPositive: "text-[var(--color-success)]",
     trendNegative: "text-[var(--color-danger)]",
     trendNeutral: "text-[var(--color-text-muted)]",
     trendSizes: {
-        sm: "text-sm",
-        md: "text-base",
-        lg: "text-lg",
+        sm: "text-xs",
+        md: "text-sm",
+        lg: "text-base",
     },
     barFilledColors: {
         ...semanticBgColors,

package/dist/components/data-display/Metric/Metric.theme.js

@@ -51,25 +51,25 @@ const metricTheme = {
             container: "", // Padding moved to content section
             contentPadding: "p-3",
             iconContainer: "size-10",
-            label: "text-sm",
-            value: "text-2xl",
-            subtitle: "text-sm mt-1",
+            label: "text-xs",
+            value: "text-xl",
+            subtitle: "text-xs mt-1",
         },
         md: {
             container: "", // Padding moved to content section
             contentPadding: "p-4",
             iconContainer: "size-14",
-            label: "text-base",
-            value: "text-2xl",
-            subtitle: "text-sm mt-0.5",
+            label: "text-sm",
+            value: "text-xl",
+            subtitle: "text-xs mt-0.5",
         },
         lg: {
             container: "", // Padding moved to content section
             contentPadding: "p-5",
             iconContainer: "size-16",
-            label: "text-lg",
-            value: "text-3xl",
-            subtitle: "text-base mt-1",
+            label: "text-base",
+            value: "text-2xl",
+            subtitle: "text-sm mt-1",
         },
     },
     // Common element styles