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

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

@@ -0,0 +1,18 @@
+/**
+ * Default theme for `<Sidebar.Card>`. Small surface — the component itself
+ * only renders a single styled wrapper that disappears on collapse, so the
+ * theme just holds the default outer chrome. Set `unstyled` on the card to
+ * skip it entirely (e.g. for full-bleed images).
+ */
+const sidebarCardTheme = {
+    // Card chrome — surface bg, hairline border, sidebar-tuned padding (p-3 is
+    // tighter than core/Card's p-6 because the rail is narrow). `overflow-hidden`
+    // keeps any children clipped to the rounded corners.
+    baseStyle: "rounded-[var(--card-radius)] bg-[var(--color-surface)] border border-[var(--color-border)] p-3 overflow-hidden",
+    // Wrapper applied in both styled + unstyled modes. Empty by default —
+    // the slide/fade animation lives on motion.div itself, not on this layer,
+    // so no overflow trickery needed here.
+    wrapperStyle: "",
+};
+
+export { sidebarCardTheme };

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

@@ -8,7 +8,11 @@ import '../ScrollArea/smooth/SmoothScrollEngine.js';
 const SidebarContent = React__default.forwardRef(({ children, className, ...props }, ref) => {
     const { isCollapsedView } = useSidebarCollapsed();
     const density = useSidebarDensity();
-    return (jsx(ScrollArea, { ref: ref, type: "none", size: "thin", className: "flex-1 min-h-0", ...props, children: jsx("div", { className: cn("py-3 transition-[padding] duration-200 ease-[cubic-bezier(0.4,0,0.2,1)]", density === "compact" && "py-2", isCollapsedView ? "px-2" : "px-2.5", className), children: children }) }));
+    return (jsx(ScrollArea, { ref: ref, type: "none", size: "thin", className: "flex-1 min-h-0", ...props, children: jsx("div", { className: cn("py-3 transition-[padding] duration-200 ease-[cubic-bezier(0.4,0,0.2,1)]", density === "compact" && "py-2", 
+            // Collapsed px-3 (12) on a 60px rail leaves a 36px interior — every
+            // child row (NavItem, Sidebar.Search) is exactly 36px wide, matching
+            // the 36×36 hit-area target.
+            isCollapsedView ? "px-3" : "px-2.5", className), children: children }) }));
 });
 SidebarContent.displayName = "SidebarContent";
 

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

@@ -98,7 +98,7 @@ const SidebarProvider = ({ children, defaultCollapsed = false, collapsed: contro
         toggleCollapsed,
         width: {
             expanded: width.expanded || 280,
-            collapsed: width.collapsed || 64,
+            collapsed: width.collapsed || 60,
         },
         side,
         variant,

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

@@ -8,12 +8,20 @@ import { Button } from '../Button/Button.js';
 
 const SidebarHeader = React__default.forwardRef(({ logo, showToggle = true, customToggle, children, className, ...props }, ref) => {
     const sidebarContext = useSidebarContext();
-    const { isMobile, isMobileOpen, isCollapsedView: isCollapsedDesktop } = useSidebarCollapsed();
+    const { isMobile, isMobileOpen } = useSidebarCollapsed();
     // 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-[var(--color-border)]", className), ...props, children: children }));
     }
-    return (jsxs("div", { ref: ref, className: cn("flex items-center flex-shrink-0 h-14 border-b border-[var(--color-border)] overflow-visible relative transition-[padding,background-color,border-color] duration-200 ease-[cubic-bezier(0.4,0,0.2,1)]", isCollapsedDesktop ? "px-4" : "px-3", className), ...props, children: [jsx("div", { className: cn("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 && (customToggle || jsx(SidebarToggle, {}))] }));
+    return (jsxs("div", { ref: ref, className: cn("flex items-center flex-shrink-0 h-14 border-b border-[var(--color-border)] overflow-visible relative transition-[padding,background-color,border-color] duration-200 ease-[cubic-bezier(0.4,0,0.2,1)]", 
+        // Padding mirrors Sidebar.Content so the header logo sits on the
+        // same horizontal track as the NavItem rows below it. px-3 (12px)
+        // on the 60px collapsed rail leaves a 36px interior — a 32px logo
+        // (size-8) lands with 2px slack on each side; a 36px logo (size-9)
+        // fills the interior exactly. Left-pinned in both states (no
+        // `justify-*` toggle) so nothing jumps mid-animation. Same value
+        // for collapsed + expanded → no padding transition needed.
+        "px-3", className), ...props, 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 && (customToggle || jsx(SidebarToggle, {}))] }));
 });
 SidebarHeader.displayName = "SidebarHeader";
 

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

@@ -1,12 +1,47 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import React__default from 'react';
 import { cn } from '../../../utils/cn.js';
 import { AnimatePresence, motion } from 'motion/react';
 import { useSidebarCollapsed } from './SidebarContext.js';
 
-const SidebarLogo = React__default.forwardRef(({ icon, text, className, ...props }, ref) => {
+const SidebarLogo = React__default.forwardRef(({ expanded, collapsed, expandedSrc, collapsedSrc, expandedImageClassName, collapsedImageClassName, alt = "", icon, text, className, ...props }, ref) => {
+    var _a, _b;
     const { isCollapsedView } = useSidebarCollapsed();
-    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-base font-semibold tracking-tight text-[var(--color-text-primary)]", children: text })) : (text) }, "logo-text")) })] }));
+    // Auto-render <img> for the src convenience API. ReactNode props still win
+    // (full control); src is the easy path for plain image/SVG assets.
+    //
+    // Defaults:
+    //  - Collapsed: size-9 (36px) square, object-cover — matches the nav icon
+    //    track so the collapsed logo aligns visually with NavItem rows below.
+    //  - Expanded: h-8 w-auto object-contain — typical wordmark sizing.
+    // Override via `collapsedImageClassName` / `expandedImageClassName`
+    // (tailwind-merge resolves conflicts in favor of the user's classes).
+    const expandedNode = expanded !== null && expanded !== void 0 ? expanded : (expandedSrc ? (jsx("img", { src: expandedSrc, alt: alt, className: cn("h-8 w-auto object-contain", expandedImageClassName) })) : undefined);
+    const collapsedNode = collapsed !== null && collapsed !== void 0 ? collapsed : (collapsedSrc ? (jsx("img", { src: collapsedSrc, alt: alt, className: cn("size-9 object-cover", collapsedImageClassName) })) : undefined);
+    // New API takes precedence: if the user passed `expanded`/`collapsed`
+    // (ReactNode) OR their `*Src` shortcuts, render those (cross-faded).
+    // Otherwise fall back to the legacy icon-plus-animated-text rendering so
+    // existing consumers keep working.
+    const hasNewApi = expandedNode !== undefined || collapsedNode !== undefined;
+    if (hasNewApi) {
+        // Resolve the logo for the current state, falling all the way back to
+        // the legacy `icon` so a partial new-API usage still has something to
+        // show. Per-state fallback: collapsed → expanded → icon, and vice versa.
+        const currentLogo = isCollapsedView
+            ? (_a = collapsedNode !== null && collapsedNode !== void 0 ? collapsedNode : expandedNode) !== null && _a !== void 0 ? _a : icon
+            : (_b = expandedNode !== null && expandedNode !== void 0 ? expandedNode : collapsedNode) !== null && _b !== void 0 ? _b : icon;
+        return (jsx("div", { ref: ref, 
+            // No `overflow-hidden`: would clip wide logos in collapsed mode.
+            // Sidebar itself is `overflow-visible`.
+            className: cn("flex items-center", className), ...props, children: jsx(AnimatePresence, { mode: "wait", initial: false, children: jsx(motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.15, ease: [0.4, 0, 0.2, 1] }, className: "flex items-center", children: currentLogo }, isCollapsedView ? "collapsed" : "expanded") }) }));
+    }
+    // Legacy API: icon + animated text.
+    return (jsxs("div", { ref: ref, 
+        // No `overflow-hidden` here — that would clip the icon when the
+        // sidebar is collapsed and horizontal space is tight. The text
+        // collapse animation owns its own `overflow-hidden` on the motion.div
+        // below, which is the only place it's actually needed.
+        className: cn("flex items-center gap-2", 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-base font-semibold tracking-tight text-[var(--color-text-primary)]", children: text })) : (text) }, "logo-text")) })] }));
 });
 SidebarLogo.displayName = "SidebarLogo";
 

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

@@ -25,7 +25,7 @@ const SidebarToggle = React__default.forwardRef(({ expandIcon, collapseIcon, cla
     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-primary)] 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 }) }) }));
+    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

@@ -19,8 +19,8 @@ const SidebarUserProfile = React__default.forwardRef(({ name, email, avatar, sta
     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, size: isCollapsedView ? "sm" : "md", status: status !== null && status !== void 0 ? status : "none" }));
-    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 py-2" : "gap-2 ", className), role: "button", tabIndex: 0, onClick: onClick, onKeyDown: (e) => {
+    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();

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

@@ -8,5 +8,7 @@ export { SidebarToggle } from "./SidebarToggle";
 export { SidebarMobileTrigger } from "./SidebarMobileTrigger";
 export { SidebarUserProfile } from "./SidebarUserProfile";
 export { SidebarLogo } from "./SidebarLogo";
+export { SidebarSearch } from "./SidebarSearch";
+export { SidebarCard } from "./SidebarCard";
 export { SidebarProvider, useSidebarContext } from "./SidebarContext";
-export type { SidebarProps, SidebarHeaderProps, SidebarContentProps, SidebarFooterProps, SidebarNavProps, SidebarNavGroupProps, SidebarToggleProps, SidebarMobileTriggerProps, SidebarUserProfileProps, SidebarUserStatus, SidebarSide, SidebarVariant, SidebarDensity, SidebarContextValue, SidebarProviderProps, SidebarTheme, SidebarThemeOverrides, SidebarLogoProps, } from "./Sidebar.types";
+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/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,18 +1,23 @@
 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 " +

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)]/80 backdrop-blur-lg outline outline-[var(--color-border)] shadow-lg",
 };
 
 export { tooltipTheme };

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

@@ -10,11 +10,13 @@ export * from "./ButtonGroup";
 export * from "./Calendar";
 export * from "./Card";
 export * from "./CardStack";
+export * from "./HeroCard";
 export * from "./Carousel";
 export * from "./CommandPalette";
 export * from "./Separator";
 export * from "./Drawer";
 export * from "./Dropdown";
+export * from "./DotSeparator";
 export * from "./Kbd";
 export * from "./MenuItem";
 export * from "./Link";

package/dist/components/core/index.js

@@ -17,6 +17,8 @@ export { calendarAnimations } from './Calendar/Calendar.animations.js';
 export { CalendarMini } from './Calendar/CalendarMini/CalendarMini.js';
 export { Card } from './Card/Card.js';
 export { CardStack } from './CardStack/CardStack.js';
+export { HERO_CARD_DEFAULT_IMAGE, HeroCard } from './HeroCard/HeroCard.js';
+export { heroCardTheme } from './HeroCard/HeroCard.theme.js';
 export { Carousel } from './Carousel/Carousel.js';
 export { CarouselBody } from './Carousel/CarouselBody.js';
 export { CommandPalette } from './CommandPalette/CommandPalette.js';
@@ -32,6 +34,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';
@@ -100,6 +104,8 @@ 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 { 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';

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

@@ -17,19 +17,35 @@ function useDescriptionListContext() {
 // ──────────────────────────────────────────────
 // DescriptionList (container)
 // ──────────────────────────────────────────────
-const DescriptionListRoot = React__default.forwardRef(({ className, variant = "horizontal", theme: customTheme, children, ...props }, ref) => {
-    const theme = useMemo(() => ({ ...descriptionListTheme, ...customTheme }), [customTheme]);
-    const contextValue = useMemo(() => ({ variant, theme }), [variant, theme]);
-    return (jsx(DescriptionListContext.Provider, { value: contextValue, children: jsx("dl", { ref: ref, className: cn(theme.baseStyle, className), ...props, children: children }) }));
+const DescriptionListRoot = React__default.forwardRef(({ className, variant = "horizontal", padding = "flush", items, theme: customTheme, children, ...props }, ref) => {
+    const theme = useMemo(() => ({
+        ...descriptionListTheme,
+        ...customTheme,
+        paddingStyles: { ...descriptionListTheme.paddingStyles, ...customTheme === null || customTheme === void 0 ? void 0 : customTheme.paddingStyles },
+    }), [customTheme]);
+    const contextValue = useMemo(() => ({ variant, padding, theme }), [variant, padding, theme]);
+    if (process.env.NODE_ENV !== "production" &&
+        items &&
+        React__default.Children.count(children) > 0) {
+        console.warn("[DescriptionList]: both `items` and children were provided — `items` takes precedence and children are ignored.");
+    }
+    // Data-driven path maps to the same compound primitive as composition.
+    const content = items
+        ? items.map((item, i) => {
+            var _a;
+            return (jsx(DescriptionListItem, { label: item.label, value: item.value, className: item.className }, (_a = item.key) !== null && _a !== void 0 ? _a : i));
+        })
+        : children;
+    return (jsx(DescriptionListContext.Provider, { value: contextValue, children: jsx("dl", { ref: ref, className: cn(theme.baseStyle, className), ...props, children: content }) }));
 });
 DescriptionListRoot.displayName = "DescriptionList";
 // ──────────────────────────────────────────────
 // DescriptionList.Item
 // ──────────────────────────────────────────────
-const DescriptionListItem = React__default.forwardRef(({ term, detail, className, ...props }, ref) => {
-    const { variant, theme } = useDescriptionListContext();
+const DescriptionListItem = React__default.forwardRef(({ label, value, className, ...props }, ref) => {
+    const { variant, padding, theme } = useDescriptionListContext();
     const isHorizontal = variant === "horizontal";
-    return (jsxs("div", { ref: ref, className: cn(theme.itemStyle, isHorizontal && "sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0", className), ...props, children: [jsx("dt", { className: theme.termStyle, children: term }), jsx("dd", { className: cn(theme.detailStyle, isHorizontal && "sm:col-span-2 sm:mt-0"), children: detail })] }));
+    return (jsxs("div", { ref: ref, className: cn(theme.itemStyle, isHorizontal && "sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0", theme.paddingStyles[padding], className), ...props, children: [jsx("dt", { className: theme.labelStyle, children: label }), jsx("dd", { className: cn(theme.valueStyle, isHorizontal && "sm:col-span-2 sm:mt-0"), children: value })] }));
 });
 DescriptionListItem.displayName = "DescriptionList.Item";
 // ──────────────────────────────────────────────

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

@@ -1,8 +1,15 @@
 const descriptionListTheme = {
     baseStyle: "divide-y divide-[var(--color-border)] min-w-0",
-    itemStyle: "px-4 py-3",
-    termStyle: "text-sm/6 font-medium text-[var(--color-text-primary)]",
-    detailStyle: "mt-1 text-sm/6 text-[var(--color-text-secondary)]",
+    itemStyle: "py-2.5",
+    // Edge-padding modes (mirrors Table's `flush`): `flush` (default) zeroes the item
+    // side padding so values sit flush with the container edges (e.g. inside a Card);
+    // `default` adds horizontal padding for standalone use.
+    paddingStyles: {
+        default: "px-4",
+        flush: "px-0",
+    },
+    labelStyle: "text-sm font-medium text-[var(--color-text-primary)]",
+    valueStyle: "text-sm mt-0.5 text-[var(--color-text-secondary)]",
 };
 
 export { descriptionListTheme };