@flikk/ui 1.0.0-beta.25 → 1.0.0-beta.27

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

@@ -2,15 +2,12 @@ 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 { useSidebarCollapsed } 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 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: [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 })] }));
+    const { isCollapsedView } = useSidebarCollapsed();
+    const showTitleText = title && (!isCollapsedView || showTitleWhenCollapsed);
+    return (jsxs("div", { ref: ref, className: cn("space-y-1", className), ...props, children: [title && (jsx("div", { className: "h-6 flex items-center relative overflow-hidden", children: jsx(AnimatePresence, { initial: false, children: showTitleText ? (jsx(motion.div, { initial: { opacity: 0, x: -4 }, animate: { opacity: 1, x: 0 }, exit: { opacity: 0, x: -4 }, transition: { duration: 0.2, ease: [0.4, 0, 0.2, 1] }, className: "w-full px-2 py-1 absolute left-0", children: jsx("h3", { className: "text-[10px] font-bold text-[var(--color-text-muted)]/70 uppercase", children: title }) }, "title-text")) : (jsx(motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.2, ease: [0.4, 0, 0.2, 1] }, className: "w-full px-2 absolute left-0", children: jsx("div", { className: "h-px bg-[var(--color-border)] w-full" }) }, "title-separator")) }) })), jsx("div", { className: "space-y-1", children: children })] }));
 });
 SidebarNavGroup.displayName = "SidebarNavGroup";
 

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

@@ -0,0 +1,22 @@
+import React from "react";
+import { SidebarSearchProps } from "./Sidebar.types";
+/**
+ * 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.
+ */
+export declare const SidebarSearch: React.ForwardRefExoticComponent<SidebarSearchProps & React.RefAttributes<HTMLInputElement>>;

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

@@ -0,0 +1,135 @@
+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

@@ -7,6 +7,7 @@ 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") {
@@ -20,7 +21,11 @@ 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: "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]" }) }) }));
+    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.js

@@ -1,30 +1,46 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+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 { AnimatePresence, motion } from 'motion/react';
-import { useSidebarContext } from './SidebarContext.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 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) => {
+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();
             }
-        }, ...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")) })] }));
+        }, 
+        // 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";

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

@@ -4,10 +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 { 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, SidebarLogoProps, } from "./Sidebar.types";
+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.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/Spinner/Spinner.theme.js

@@ -15,7 +15,7 @@ const spinnerTheme = {
     // Color variants
     colors: {
         ...semanticSpinnerColors,
-        dark: "border-[var(--color-background-quinary)] border-t-transparent",
+        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/Tabs/Tabs.js

@@ -14,6 +14,9 @@ import { TabsBody } from './TabsBody.js';
  */
 const TabsComponent = React__default.forwardRef(({ value, defaultValue, onValueChange, orientation = "horizontal", size = "md", disabled = false, children, className, darkMode = false, ...props }, ref) => {
     const [currentValue, setCurrentValue] = useState(value || defaultValue || "");
+    // 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
@@ -42,6 +45,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);
             }
@@ -71,7 +75,8 @@ const TabsComponent = React__default.forwardRef(({ value, defaultValue, onValueC
         registerTrigger,
         unregisterTrigger,
         instanceId,
-    }), [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,

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

@@ -141,4 +141,6 @@ export interface TabsContextValue {
     unregisterTrigger: (value: string) => void;
     /** Unique prefix scoping DOM IDs to this Tabs instance */
     instanceId: string;
+    /** Whether the user has switched tabs yet (false until the first change). Used to suppress content animation on mount. */
+    hasSwitched: boolean;
 }

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

@@ -10,7 +10,7 @@ import { getTabsBodyVariants } from './Tabs.animations.js';
  * TabsBody component displays content panels for tabs with directional fade animations
  */
 const TabsBody = React__default.forwardRef(({ value, forceMount = false, children, className, ...props }, ref) => {
-    const { value: selectedValue, orientation, instanceId } = useTabsContext();
+    const { value: selectedValue, orientation, instanceId, hasSwitched } = useTabsContext();
     const shouldReduceMotion = useReducedMotion();
     // Check if we're in Storybook and should disable animations
     const isInStorybook = typeof window !== 'undefined' && window.__STORYBOOK_DISABLE_ANIMATIONS__;
@@ -32,9 +32,11 @@ const TabsBody = React__default.forwardRef(({ value, forceMount = false, childre
     if (!shouldRender) {
         return null;
     }
-    // Determine animation props (user props will override due to spread order)
+    // Determine animation props (user props will override due to spread order).
+    // Until the user switches tabs, the panel snaps in (initial=false) so it does
+    // not animate on mount / page load — only actual tab changes animate.
     const animationProps = shouldDisableAnimations ? {} : {
-        initial: "initial",
+        initial: hasSwitched ? "initial" : false,
         animate: "animate",
         exit: "exit",
         variants: contentVariants,

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

@@ -1,4 +1,4 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import React__default from 'react';
 import { motion } from 'motion/react';
 import { XMarkIcon } from '@heroicons/react/24/outline';
@@ -18,7 +18,7 @@ import { tagVariants, tagLayoutTransition } from './Tag.animations.js';
  * <Tag startContent={<CodeIcon className="size-4" />} onRemove={() => {}}>React</Tag>
  * ```
  */
-const Tag = React__default.forwardRef(({ children, size = "md", removable = true, onRemove, avatar, startContent, disabled = false, className, theme: customTheme, ...props }, ref) => {
+const Tag = React__default.forwardRef(({ children, size = "md", removable = true, onRemove, avatar, startContent, disabled = false, animated = true, className, theme: customTheme, ...props }, ref) => {
     var _a, _b, _c;
     // Merge default theme with custom theme overrides
     const theme = {
@@ -47,14 +47,38 @@ const Tag = React__default.forwardRef(({ children, size = "md", removable = true
     // Avatar takes precedence over startContent
     const renderLeadingContent = () => {
         if (avatar) {
-            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" }) }));
+            return (jsx("span", { 
+                // leading-[0] collapses the inline line-box strut: the Avatar's
+                // inner circle is inline-flex, so a non-zero line-height adds
+                // descender space below it and pins the circle to the top of a
+                // taller line box — the visible photo then renders ~1.75px high.
+                // Zeroing the line-height makes the 16px circle define the box exactly.
+                className: cn("inline-flex items-center justify-center shrink-0 overflow-hidden rounded-full leading-[0]", theme.avatarSizes[size]), children: jsx(Avatar, { src: avatar.src, name: avatar.name, fallback: avatar.fallback, initialsCount: avatar.initialsCount, size: "xs", className: "bg-[var(--color-surface-hover)] border  border-[var(--color-border)]" }) }));
         }
         if (startContent) {
-            return (jsx("span", { className: cn("inline-flex items-center justify-center shrink-0", theme.startContentSizes[size]), children: startContent }));
+            return (jsx("span", { 
+                // leading-[0]: same line-box collapse as the avatar wrapper above,
+                // so inline startContent (icons/emoji) stays vertically centered.
+                className: cn("inline-flex items-center justify-center shrink-0 leading-[0]", theme.startContentSizes[size]), children: startContent }));
         }
         return null;
     };
-    return (jsxs(motion.span, { ref: ref, className: cn(theme.baseStyle, theme.sizes[size], hasLeadingContent && "pl-0.5", showRemoveButton && "pr-0.5", disabled && theme.disabledStyle, className), layout: true, transition: tagLayoutTransition, variants: tagVariants, exit: "exit", "data-size": size, "data-disabled": disabled ? "true" : "false", "data-removable": removable ? "true" : "false", "data-has-avatar": avatar ? "true" : "false", ...props, children: [renderLeadingContent(), children, showRemoveButton && (jsx("button", { type: "button", onClick: handleRemove, className: theme.removeButtonStyle, "aria-label": `Remove ${typeof children === "string" ? children : "tag"}`, children: jsx(XMarkIcon, { className: theme.removeIconSizes[size] }) }))] }));
+    const content = (jsxs(Fragment, { children: [renderLeadingContent(), children, showRemoveButton && (jsx("button", { type: "button", onClick: handleRemove, className: theme.removeButtonStyle, "aria-label": `Remove ${typeof children === "string" ? children : "tag"}`, children: jsx(XMarkIcon, { className: theme.removeIconSizes[size] }) }))] }));
+    const sharedProps = {
+        ref,
+        className: cn(theme.baseStyle, theme.sizes[size], hasLeadingContent && "pl-1", showRemoveButton && "pr-0.5", disabled && theme.disabledStyle, className),
+        "data-size": size,
+        "data-disabled": disabled ? "true" : "false",
+        "data-removable": removable ? "true" : "false",
+        "data-has-avatar": avatar ? "true" : "false",
+        ...props,
+    };
+    // Plain span when animation is opted out (e.g. inside a contentEditable host,
+    // where Framer-Motion's layout FLIP fights the caret on every keystroke).
+    if (!animated) {
+        return jsx("span", { ...sharedProps, children: content });
+    }
+    return (jsx(motion.span, { ...sharedProps, layout: true, transition: tagLayoutTransition, variants: tagVariants, exit: "exit", children: content }));
 });
 Tag.displayName = "Tag";
 

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

@@ -1,22 +1,27 @@
 const tagTheme = {
-    baseStyle: "inline-flex items-center gap-1 font-medium rounded-full " +
-        "bg-[var(--color-background-surface)] dark:bg-[var(--color-background-secondary)] border border-[var(--color-border)] " +
+    baseStyle: "inline-flex items-center gap-1.5 font-medium rounded-full " +
+        "bg-[var(--color-surface-raised)] border border-[var(--color-border)] " +
         "text-[var(--color-text-primary)]",
     sizes: {
-        sm: "text-xs px-2.5 py-0.5",
-        md: "text-sm px-2.5 py-0.5",
+        sm: "text-xs px-2 py-0.5",
+        md: "text-sm px-2 py-0.5",
     },
+    // No left margin here: the avatar/icon's left inset is owned by the tag's
+    // `pl-1` (applied when there's leading content), not by a per-size `ml-*`.
+    // Stacking `ml-*` on top of that padding pushed the avatar too far from the
+    // left edge and produced a lopsided pill. The avatar-to-text gap is handled
+    // by the base `gap-1`, not by this margin.
     avatarSizes: {
-        sm: "size-4 ml-0.5",
-        md: "size-5 ml-1",
+        sm: "size-4",
+        md: "size-5",
     },
     startContentSizes: {
-        sm: "ml-0.5",
-        md: "ml-1",
+        sm: "",
+        md: "",
     },
     disabledStyle: "opacity-50 cursor-not-allowed",
     removeButtonStyle: "inline-flex items-center justify-center rounded-full p-1 " +
-        "hover:bg-[var(--color-background-quaternary)] " +
+        "hover:bg-[var(--color-surface-hover)] " +
         "text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] " +
         "transition-all duration-300 cursor-pointer focus:outline-none " +
         "focus-visible:ring-2 focus-visible:ring-[var(--color-primary)]",

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

@@ -30,6 +30,13 @@ export interface TagProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "o
     startContent?: ReactNode;
     /** Whether the tag is disabled */
     disabled?: boolean;
+    /**
+     * Whether to render with motion (layout + enter/exit animation). Default true.
+     * Set `false` to render a plain `<span>` — required when a Tag lives inside a
+     * contentEditable host (e.g. Mention chips), where Framer-Motion's `layout`
+     * FLIP re-measurement fights the browser's caret/selection on every keystroke.
+     */
+    animated?: boolean;
     /** Additional class name for the tag */
     className?: string;
     /** Theme overrides */

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

@@ -115,7 +115,7 @@ const Tooltip = ({ content, children, placement = "top", delay = 300, disabled =
         })
         : children;
     return (jsxs("div", { className: cn("relative inline-block", triggerClassName), ref: triggerRef, ...triggerHandlers, "aria-describedby": isVisible && id ? id : undefined, children: [childWithFocusHandlers, isClient &&
-                createPortal(jsx("div", { className: darkMode || isDarkMode ? "dark" : undefined, children: tooltipContent }), document.body)] }));
+                createPortal(jsx("div", { "data-flikkui-portal": "", className: darkMode || isDarkMode ? "dark" : undefined, children: tooltipContent }), document.body)] }));
 };
 // Set display name for dev tools and Storybook
 Tooltip.displayName = "Tooltip";

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

@@ -1,7 +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-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)]",
+    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-[var(--color-surface-overlay)]/90 backdrop-blur-md outline outline-[var(--color-border)] shadow-lg",
 };
 
 export { tooltipTheme };

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

@@ -15,6 +15,7 @@ export * from "./CommandPalette";
 export * from "./Separator";
 export * from "./Drawer";
 export * from "./Dropdown";
+export * from "./DotSeparator";
 export * from "./Kbd";
 export * from "./MenuItem";
 export * from "./Link";
@@ -47,3 +48,4 @@ export * from "./OfflineIndicator";
 export * from "./ContextMenu";
 export * from "./Pill";
 export * from "./Icon";
+export * from "./ImagePlaceholder";

package/dist/components/core/index.js

@@ -32,6 +32,8 @@ export { DropdownItem } from './Dropdown/DropdownItem.js';
 export { DropdownSection } from './Dropdown/DropdownSection.js';
 export { DropdownSeparator } from './Dropdown/DropdownSeparator.js';
 export { dropdownTheme } from './Dropdown/Dropdown.theme.js';
+export { DotSeparator } from './DotSeparator/DotSeparator.js';
+export { dotSeparatorTheme } from './DotSeparator/DotSeparator.theme.js';
 export { Kbd } from './Kbd/Kbd.js';
 export { MenuItem } from './MenuItem/MenuItem.js';
 export { menuItemTheme } from './MenuItem/MenuItem.theme.js';
@@ -96,12 +98,13 @@ export { SidebarContent } from './Sidebar/SidebarContent.js';
 export { SidebarFooter } from './Sidebar/SidebarFooter.js';
 export { SidebarNav } from './Sidebar/SidebarNav.js';
 export { SidebarNavGroup } from './Sidebar/SidebarNavGroup.js';
-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 { SidebarSearch } from './Sidebar/SidebarSearch.js';
+export { SidebarCard } from './Sidebar/SidebarCard.js';
+export { SidebarProvider, useSidebarContext } from './Sidebar/SidebarContext.js';
 export { OfflineIndicator } from './OfflineIndicator/OfflineIndicator.js';
 export { offlineIndicatorTheme } from './OfflineIndicator/OfflineIndicator.theme.js';
 export { ContextMenu } from './ContextMenu/ContextMenu.js';
@@ -110,6 +113,7 @@ export { Pill } from './Pill/Pill.js';
 export { pillTheme } from './Pill/Pill.theme.js';
 export { Icon } from './Icon/Icon.js';
 export { fileTypes } from './Icon/data/fileTypes.js';
+export { ImagePlaceholder } from './ImagePlaceholder/ImagePlaceholder.js';
 export { AnimatePresence } from 'motion/react';
 export { CardBody } from './Card/CardBody.js';
 export { CardFooter } from './Card/CardFooter.js';

package/dist/components/data-display/GanttChart/GanttChart.d.ts

@@ -1,7 +1,7 @@
 import type { GanttChartProps, GanttContextValue, GanttInteractionValue } from "./GanttChart.types";
 export declare function useGanttContext(): GanttContextValue;
 export declare function useGanttInteraction(): GanttInteractionValue;
-declare function GanttChartComponent({ data, groups, columns, startDate, endDate, todayMarker, scrollToToday, readonly: readonlyProp, readonlyDates: readonlyDatesProp, readonlyProgress: readonlyProgressProp, zoom: zoomProp, defaultZoom, onZoomChange, collapsedGroups: collapsedProp, defaultCollapsedGroups, onCollapsedGroupsChange, hideCompleted: hideCompletedProp, defaultHideCompleted, onHideCompletedChange, tablePanelWidth: tablePanelWidthProp, defaultTablePanelWidth, onTablePanelWidthChange, onTaskUpdate, onTaskDelete, onTaskDuplicate, onTaskAdd, onGroupAdd, onTaskClick, holidays: holidaysProp, gridLines, className, theme: themeOverrides, rowHeight, }: GanttChartProps): import("react/jsx-runtime").JSX.Element;
+declare function GanttChartComponent({ data, groups, columns, startDate, endDate, todayMarker, scrollToToday, toolbar, showTable, showDependencies, showTaskLabels, emptyState, readonly: readonlyProp, readonlyDates: readonlyDatesProp, readonlyProgress: readonlyProgressProp, zoom: zoomProp, defaultZoom, onZoomChange, collapsedGroups: collapsedProp, defaultCollapsedGroups, onCollapsedGroupsChange, hideCompleted: hideCompletedProp, defaultHideCompleted, onHideCompletedChange, tablePanelWidth: tablePanelWidthProp, defaultTablePanelWidth, onTablePanelWidthChange, onTaskUpdate, onTaskDelete, onTaskDuplicate, onTaskAdd, onGroupAdd, onTaskClick, holidays: holidaysProp, gridLines, className, theme: themeOverrides, rowHeight, }: GanttChartProps): import("react/jsx-runtime").JSX.Element;
 declare namespace GanttChartComponent {
     var displayName: string;
 }