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

package/dist/components/ai/PromptInput/PromptInput.js

@@ -50,6 +50,7 @@ import '../../core/Dropdown/DropdownItem.js';
 import '../../core/Dropdown/DropdownSection.js';
 import '../../core/Dropdown/DropdownSeparator.js';
 import '../../core/Dropdown/Dropdown.theme.js';
+import '../../core/DotSeparator/DotSeparator.js';
 import '../../core/Kbd/Kbd.js';
 import '../../core/MenuItem/MenuItem.js';
 import '../../core/Link/Link.js';
@@ -100,6 +101,8 @@ import '../../core/Sidebar/SidebarToggle.js';
 import '../../core/Sidebar/SidebarMobileTrigger.js';
 import '../../core/Sidebar/SidebarUserProfile.js';
 import '../../core/Sidebar/SidebarLogo.js';
+import '../../core/Sidebar/SidebarSearch.js';
+import '../../core/Sidebar/SidebarCard.js';
 import '../../core/Sidebar/SidebarContext.js';
 import '../../core/OfflineIndicator/OfflineIndicator.js';
 import '../../core/ContextMenu/ContextMenu.js';

package/dist/components/ai/PromptInput/VoiceRecorder.js

@@ -32,6 +32,7 @@ import '../../core/Dropdown/DropdownItem.js';
 import '../../core/Dropdown/DropdownSection.js';
 import '../../core/Dropdown/DropdownSeparator.js';
 import '../../core/Dropdown/Dropdown.theme.js';
+import '../../core/DotSeparator/DotSeparator.js';
 import '../../core/Kbd/Kbd.js';
 import '../../core/MenuItem/MenuItem.js';
 import '../../core/Link/Link.js';
@@ -82,6 +83,8 @@ import '../../core/Sidebar/SidebarToggle.js';
 import '../../core/Sidebar/SidebarMobileTrigger.js';
 import '../../core/Sidebar/SidebarUserProfile.js';
 import '../../core/Sidebar/SidebarLogo.js';
+import '../../core/Sidebar/SidebarSearch.js';
+import '../../core/Sidebar/SidebarCard.js';
 import '../../core/Sidebar/SidebarContext.js';
 import '../../core/OfflineIndicator/OfflineIndicator.js';
 import '../../core/ContextMenu/ContextMenu.js';

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

@@ -3,7 +3,7 @@
  */
 const buttonTheme = {
     // Base styles for the button element
-    baseStyle: "relative inline-flex items-center justify-center gap-2 focus:outline-none rounded-[var(--button-radius)] overflow-hidden cursor-pointer transition-all duration-300 ease-in-out min-w-fit flex-shrink-0 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 cursor-pointer",
+    baseStyle: "relative inline-flex items-center justify-center gap-2 focus:outline-none rounded-[var(--button-radius)] overflow-hidden cursor-pointer transition-all duration-300 ease-in-out min-w-fit flex-shrink-0 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 cursor-pointer backdrop-blur-sm",
     // Visual style variants - STRUCTURE only (no colors)
     variantStyles: {
         filled: "border hover:brightness-[0.9] dark:hover:brightness-[1.15]",

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

@@ -3,7 +3,7 @@
  * Uses design tokens and data-[state=*] selectors
  */
 const calendarTheme = {
-    baseStyle: "select-none w-full bg-white dark:bg-[var(--color-neutral-900)]",
+    baseStyle: "select-none w-full bg-[var(--color-surface)]",
     headerStyle: "flex items-center justify-between mb-4",
     titleStyle: "text-sm font-semibold text-[var(--color-text-primary)] " + "",
     headerDropdownsStyle: "grid grid-cols-2 items-center gap-2 flex-1 justify-center mx-3",

package/dist/components/core/CommandPalette/CommandItem.js

@@ -1,8 +1,7 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx } from 'react/jsx-runtime';
 import React__default from 'react';
-import { cn } from '../../../utils/cn.js';
+import { MenuItem } from '../MenuItem/MenuItem.js';
 import { Kbd } from '../Kbd/Kbd.js';
-import { commandPaletteTheme } from './CommandPalette.theme.js';
 
 /**
  * Map string shortcuts to KbdKey types
@@ -100,7 +99,7 @@ const Shortcut = ({ keys }) => {
  * />
  * ```
  */
-const CommandItem = ({ command, index, isHighlighted, contentStart, contentEnd, className, onSelect, onMouseEnter, theme = commandPaletteTheme, }) => {
+const CommandItem = ({ command, index, isHighlighted, contentStart, contentEnd, className, onSelect, onMouseEnter, }) => {
     const handleClick = () => {
         if (!command.disabled) {
             onSelect(command);
@@ -126,7 +125,7 @@ const CommandItem = ({ command, index, isHighlighted, contentStart, contentEnd,
         }
         return null;
     };
-    return (jsxs("div", { "data-command-index": index, "data-highlighted": isHighlighted, "data-disabled": command.disabled || false, className: cn(theme.commandItem, className), role: "option", "aria-selected": isHighlighted, "aria-disabled": command.disabled || false, onClick: handleClick, onMouseEnter: handleMouseEnter, children: [finalContentStart && (jsx("div", { className: "flex-shrink-0", children: finalContentStart })), jsxs("div", { className: "flex-1 min-w-0", children: [jsx("div", { className: "text-base  truncate", children: command.label }), command.subtitle && (jsx("div", { className: "text-base opacity-70 truncate mt-0", children: command.subtitle }))] }), renderContentEnd()] }));
+    return (jsx(MenuItem, { role: "option", selected: isHighlighted, disabled: command.disabled, startContent: finalContentStart, subtitle: command.subtitle, endContent: renderContentEnd(), onActivate: handleClick, onMouseEnter: handleMouseEnter, "aria-selected": isHighlighted, "data-command-index": index, "data-highlighted": isHighlighted, className: className, children: command.label }));
 };
 
 export { CommandItem };

package/dist/components/core/CommandPalette/CommandPalette.js

@@ -211,7 +211,7 @@ const CommandPalette = React__default.forwardRef(({ isOpen, onClose, commands =
         // Otherwise render flat list
         return displayCommands.map((command, index) => (jsx(CommandItem, { command: command, index: index, isHighlighted: index === highlightedIndex, onSelect: handleSelectCommand, onMouseEnter: setHighlightedIndex, theme: theme }, command.id)));
     };
-    return (jsxs(Overlay, { ref: ref, isOpen: isOpen, onClose: onClose, closeOnOverlayClick: closeOnOverlayClick, closeOnEsc: closeOnEsc, position: "top", overlayClassName: overlayClassName, contentClassName: cn(theme.container, className), animations: {
+    return (jsxs(Overlay, { ref: ref, isOpen: isOpen, onClose: onClose, closeOnOverlayClick: closeOnOverlayClick, closeOnEsc: closeOnEsc, position: "top", overlayClassName: cn(theme.overlay, overlayClassName), contentClassName: cn(theme.container, className), animations: {
             overlay: overlayAnimations,
             content: containerAnimations,
         }, children: [jsx("div", { className: theme.searchWrapper, children: jsxs("div", { className: "flex items-center gap-3", children: [jsx(MagnifyingGlassIcon, { className: "w-5 h-5 text-[var(--color-text-muted)]", strokeWidth: 2 }), jsx("input", { ref: searchInputRef, type: "text", className: theme.searchInput, placeholder: placeholder, value: searchValue, onChange: handleSearchChange, autoComplete: "off", autoCorrect: "off", spellCheck: false, "aria-label": "Search commands" })] }) }), jsx(ScrollArea, { ref: listContainerRef, type: "hover", className: "overscroll-contain px-1", style: {

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

@@ -1,8 +1,12 @@
 const commandPaletteTheme = {
-    overlay: "fixed inset-0 bg-[var(--overlay-bg)] backdrop-blur-[var(--overlay-blur)] z-50 " +
-        "flex items-start justify-center pt-[min(10vh,4rem)] px-4",
+    // Applied to the Overlay backdrop (positioning/z-index come from Overlay).
+    // Overrides the shared 65%-black scrim (--overlay-bg) with a lighter dim so
+    // real page content sits behind the container — that's what the container's
+    // backdrop-blur frosts into the glass effect. A heavy scrim would leave only
+    // a flat dark layer to blur, making backdrop-blur look like it does nothing.
+    overlay: "bg-black/30",
     container: "relative w-full max-h-[calc(100vh-2rem)] max-w-lg " +
-        "bg-[var(--color-background)] rounded-[var(--modal-radius)] shadow-2xl shadow-black/30 " +
+        "bg-[var(--color-surface-overlay)] backdrop-blur-md rounded-[var(--modal-radius)] shadow-2xl shadow-black/30 " +
         "border border-[var(--color-border)] ring-4 ring-[var(--color-background)]/20 " +
         "flex flex-col my-4 min-h-0 overflow-hidden " +
         // Dark mode
@@ -11,18 +15,12 @@ const commandPaletteTheme = {
     searchInput: "w-full px-0 py-0 text-sm bg-transparent border-none outline-none " +
         "text-[var(--color-text-primary)] placeholder:text-[var(--color-text-placeholder)] " +
         "focus:outline-none focus:ring-0 " +
-        // Dark mode
-        "dark:text-[var(--color-neutral-200)] dark:placeholder:text-[var(--color-neutral-500)]",
+        // Dark mode — matches Input's controlBaseStyle text/placeholder tokens
+        "dark:text-[var(--color-text-primary)] dark:placeholder:text-[var(--color-neutral-500)]",
     groupLabel: "px-4 py-1 text-xs font-semibold text-[var(--color-text-muted)]/50 uppercase " +
         "dark:text-[var(--color-neutral-500)]",
-    commandItem: "flex items-center gap-3 px-4 py-2 rounded-[var(--radius-base)] cursor-pointer transition-colors " +
-        "hover:bg-[var(--color-primary)] " +
-        "data-[highlighted=true]:bg-[var(--color-primary)] data-[highlighted=true]:hover:bg-[var(--color-primary)] " +
-        "data-[highlighted=true]:text-[var(--color-primary-contrast)] " +
-        "data-[disabled=true]:opacity-50 data-[disabled=true]:cursor-not-allowed data-[disabled=true]:hover:bg-transparent " +
-        // Dark mode - adjust hover state
-        "dark:text-[var(--color-neutral-200)] dark:hover:bg-[var(--color-primary-600)] " +
-        "dark:data-[highlighted=true]:bg-[var(--color-primary-600)]",
+    // Command rows render via the shared MenuItem primitive and use its default
+    // styling (subtle highlight + standard padding) — no per-row theme here.
     emptyState: "px-4 py-12 text-center text-sm text-[var(--color-text-muted)] " +
         "dark:text-[var(--color-neutral-500)]",
     footer: "border-t border-[var(--color-border)] px-4 py-2 text-xs text-[var(--color-text-muted)]font-medium",

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

@@ -86,8 +86,6 @@ export interface CommandPaletteThemeOverrides {
     searchInput?: string;
     /** Style for group labels */
     groupLabel?: string;
-    /** Style for command items (uses data-[highlighted] and data-[disabled] selectors) */
-    commandItem?: string;
     /** Style for empty state */
     emptyState?: string;
     /** Style for the footer area */

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

@@ -5,21 +5,20 @@ const contextMenuTheme = {
     ...dropdownTheme,
     // Content uses the same styling as Dropdown menu
     contentStyle: dropdownTheme.menuStyle.replace("flex", "flex-col p-1"),
-    // Items use exact same styling as Dropdown items (with space for check icon)
-    itemStyle: `${dropdownTheme.itemBaseStyle} data-[checked=true]:pl-8`,
-    // Checked state - tick icon positioning (absolute left)
-    itemCheckedStyle: "absolute left-2.5 top-1/2 -translate-y-1/2 w-4 h-4 text-[var(--color-text-primary)] " +
-        "dark:text-[var(--color-neutral-200)]",
-    // Submenu trigger - based on Dropdown item style with chevron space
-    subTriggerStyle: `${dropdownTheme.itemBaseStyle} pr-8 data-[state=open]:bg-[var(--color-surface-hover)] ` +
-        "dark:data-[state=open]:bg-[var(--color-neutral-700)]",
-    // Submenu content - matches main dropdown menu style
+    // Items use exact same styling as Dropdown items. The left padding for the
+    // check icon is applied per-item in ContextMenuItem (className) when checked.
+    itemStyle: dropdownTheme.itemBaseStyle,
+    // Checked state - tick icon positioning (absolute left).
+    // --color-text-primary flips for dark mode on its own.
+    itemCheckedStyle: "absolute left-2.5 top-1/2 -translate-y-1/2 w-4 h-4 text-[var(--color-text-primary)]",
+    // Submenu trigger - based on Dropdown item style with chevron space.
+    // --color-surface-hover is a translucent tint that lightens in dark on its own.
+    subTriggerStyle: `${dropdownTheme.itemBaseStyle} pr-8 data-[state=open]:bg-[var(--color-surface-hover)]`,
+    // Submenu content - floating anchored overlay, matches main dropdown menu
     subContentStyle: "min-w-[180px] max-h-[400px] overflow-y-auto rounded-[var(--dropdown-radius)] border border-[var(--color-border)] " +
-        "bg-[var(--color-background)] shadow-real-xl flex flex-col p-1 focus:outline-none " +
-        "dark:bg-[var(--color-background-secondary)]",
-    // Separator - horizontal divider
-    separatorStyle: "h-px bg-[var(--color-border)] my-1 -mx-1 " +
-        "dark:bg-[var(--color-neutral-700)]",
+        "bg-[var(--color-surface-overlay)] shadow-real-xl flex flex-col p-1 focus:outline-none",
+    // Separator - horizontal divider (--color-border flips for dark on its own)
+    separatorStyle: "h-px bg-[var(--color-border)] my-1 -mx-1",
     // Label - section header (matches Dropdown section title)
     labelStyle: dropdownTheme.sectionTitleStyle,
 };

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

@@ -0,0 +1,3 @@
+import React from 'react';
+import { DotSeparatorProps } from './DotSeparator.types';
+export declare const DotSeparator: React.ForwardRefExoticComponent<DotSeparatorProps & React.RefAttributes<HTMLSpanElement>>;

package/dist/components/core/DotSeparator/DotSeparator.js

@@ -0,0 +1,19 @@
+import { jsx } from 'react/jsx-runtime';
+import React__default, { useMemo } from 'react';
+import { cn } from '../../../utils/cn.js';
+import { dotSeparatorTheme } from './DotSeparator.theme.js';
+
+const DotSeparator = React__default.forwardRef(({ size = 'md', className, theme: customTheme = {}, ...props }, ref) => {
+    const theme = useMemo(() => ({
+        ...dotSeparatorTheme,
+        ...customTheme,
+        sizes: {
+            ...dotSeparatorTheme.sizes,
+            ...customTheme.sizes,
+        },
+    }), [customTheme]);
+    return (jsx("span", { ref: ref, "aria-hidden": "true", className: cn(theme.baseStyle, theme.sizes[size], className), ...props }));
+});
+DotSeparator.displayName = 'DotSeparator';
+
+export { DotSeparator };

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

@@ -0,0 +1,2 @@
+import { DotSeparatorTheme } from './DotSeparator.types';
+export declare const dotSeparatorTheme: DotSeparatorTheme;

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

@@ -0,0 +1,10 @@
+const dotSeparatorTheme = {
+    baseStyle: 'inline-block shrink-0 rounded-full align-middle bg-[var(--color-text-muted)]',
+    sizes: {
+        sm: 'size-0.5 mx-1', // 2px dot
+        md: 'size-1 mx-1.5', // 4px dot
+        lg: 'size-1.5 mx-2', // 6px dot
+    },
+};
+
+export { dotSeparatorTheme };

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

@@ -0,0 +1,25 @@
+import { HTMLAttributes } from 'react';
+export type DotSeparatorSize = 'sm' | 'md' | 'lg';
+export interface DotSeparatorTheme {
+    baseStyle: string;
+    sizes: Record<DotSeparatorSize, string>;
+}
+export interface DotSeparatorThemeOverrides {
+    baseStyle?: string;
+    sizes?: Partial<Record<DotSeparatorSize, string>>;
+}
+export interface DotSeparatorProps extends HTMLAttributes<HTMLSpanElement> {
+    /**
+     * The size of the dot (also scales its horizontal spacing)
+     * @default 'md'
+     */
+    size?: DotSeparatorSize;
+    /**
+     * Custom class name for the dot
+     */
+    className?: string;
+    /**
+     * Component-level theme overrides
+     */
+    theme?: DotSeparatorThemeOverrides;
+}

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

@@ -0,0 +1,3 @@
+export { DotSeparator } from './DotSeparator';
+export type { DotSeparatorProps, DotSeparatorSize, DotSeparatorTheme, DotSeparatorThemeOverrides, } from './DotSeparator.types';
+export { dotSeparatorTheme } from './DotSeparator.theme';

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

@@ -12,9 +12,8 @@ const dropdownTheme = {
     sectionTitleStyle: "px-2 py-1.5 text-xs font-semibold text-[var(--color-text-muted)] uppercase tracking-tight",
     // Section container styling
     sectionStyle: "py-1",
-    // Separator between sections
-    separatorStyle: "my-1 h-px bg-[var(--color-border)] " +
-        "dark:bg-[var(--color-neutral-700)]",
+    // Separator between sections (--color-border flips for dark mode on its own)
+    separatorStyle: "my-1 h-px bg-[var(--color-border)]",
 };
 
 export { dropdownTheme };

package/dist/components/core/Dropdown/DropdownItem.js

@@ -63,7 +63,7 @@ const DropdownItem = React__default.forwardRef(({ itemKey, children, className,
     // Build end content: user's endContent OR selection checkmark
     const resolvedEndContent = endContent ||
         (selectionMode !== "none" ? (jsx("div", { className: cn("flex items-center justify-center flex-shrink-0 w-5 h-5"), children: isSelected && (jsx(CheckIcon, { className: "size-4 text-[var(--color-text-secondary)]" })) })) : undefined);
-    return (jsx(MenuItem, { ref: ref, role: itemRole, disabled: disabled, isDanger: isDanger, startContent: startContent, endContent: resolvedEndContent, subtitle: subtitle, shortcut: shortcut, onActivate: handleActivate, "data-selected": isSelected, ...(selectionMode !== "none" ? { "aria-checked": isSelected } : {}), className: className, theme: {
+    return (jsx(MenuItem, { ref: ref, role: itemRole, disabled: disabled, isDanger: isDanger, startContent: startContent, endContent: resolvedEndContent, subtitle: subtitle, shortcut: shortcut, onActivate: handleActivate, selected: isSelected, ...(selectionMode !== "none" ? { "aria-checked": isSelected } : {}), className: className, theme: {
             baseStyle: theme.itemBaseStyle,
             dangerStyle: theme.itemDangerStyle,
             focusStyle: theme.itemFocusStyle,

package/dist/components/core/Dropdown/DropdownMenu.js

@@ -189,7 +189,7 @@ const DropdownMenu = React__default.forwardRef(({ children, className, animation
                 }, "data-state": isOpen ? "open" : "closed", "data-placement": placement, ...domProps, children: children })) }));
     // Use portal if specified - wrap with dark class for dark mode support
     if (portal && isClient) {
-        return createPortal(jsx("div", { className: isDarkMode ? "dark" : undefined, children: menuContent }), document.body);
+        return createPortal(jsx("div", { "data-flikkui-portal": "", className: isDarkMode ? "dark" : undefined, children: menuContent }), document.body);
     }
     return menuContent;
 });

package/dist/components/core/MenuItem/MenuItem.js

@@ -9,12 +9,15 @@ import { menuItemTheme } from './MenuItem.theme.js';
  * Handles visual layout, base styling, keyboard activation, and focus tracking.
  * Context-specific behavior (selection, checked state) is handled by consumers.
  */
-const MenuItem = React__default.forwardRef(({ children, className, startContent, endContent, subtitle, shortcut, disabled = false, isDanger = false, onActivate, theme: themeOverrides, role = "menuitem", ...props }, ref) => {
+const MenuItem = React__default.forwardRef(({ children, className, startContent, endContent, subtitle, shortcut, disabled = false, isDanger = false, selected = false, onActivate, theme: themeOverrides, role = "menuitem", ...props }, ref) => {
     const [isFocused, setIsFocused] = useState(false);
     const theme = {
         ...menuItemTheme,
         ...themeOverrides,
     };
+    // Resolve state to plain utility classes (not data-[state] variants) so a
+    // consumer `className` always wins the cascade. See MenuItem.theme.ts.
+    const stateKey = disabled ? "disabled" : selected ? "selected" : "default";
     const handleClick = useCallback(() => {
         if (disabled)
             return;
@@ -26,7 +29,7 @@ const MenuItem = React__default.forwardRef(({ children, className, startContent,
             handleClick();
         }
     }, [handleClick]);
-    return (jsxs("div", { ref: ref, role: role, tabIndex: disabled ? undefined : -1, "aria-disabled": disabled, "data-focused": isFocused, "data-disabled": disabled, className: cn(theme.baseStyle, theme.focusStyle, isDanger && theme.dangerStyle, className), onClick: handleClick, onKeyDown: handleKeyDown, onFocus: () => setIsFocused(true), onBlur: () => setIsFocused(false), ...props, children: [startContent && (jsx("div", { className: "flex items-center justify-center flex-shrink-0", children: startContent })), jsxs("div", { className: "flex-1 min-w-0", children: [jsxs("div", { className: "flex items-center justify-between gap-2", children: [jsx("span", { className: "truncate", children: children }), shortcut && (jsx("span", { className: "ml-auto flex-shrink-0", children: shortcut }))] }), subtitle && (typeof subtitle === 'string'
+    return (jsxs("div", { ref: ref, role: role, tabIndex: disabled ? undefined : -1, "aria-disabled": disabled, "data-focused": isFocused, "data-disabled": disabled, "data-selected": selected, className: cn(theme.baseStyle, theme.states[stateKey], isFocused && !disabled && !selected && theme.focusedStyle, isDanger && theme.dangerStyle, theme.focusStyle, className), onClick: handleClick, onKeyDown: handleKeyDown, onFocus: () => setIsFocused(true), onBlur: () => setIsFocused(false), ...props, children: [startContent && (jsx("div", { className: "flex items-center justify-center flex-shrink-0", children: startContent })), jsxs("div", { className: "flex-1 min-w-0", children: [jsxs("div", { className: "flex items-center justify-between gap-2", children: [jsx("span", { className: "truncate", children: children }), shortcut && (jsx("span", { className: "ml-auto flex-shrink-0", children: shortcut }))] }), subtitle && (typeof subtitle === 'string'
                         ? jsx("div", { className: theme.subtitleStyle, children: subtitle })
                         : subtitle)] }), endContent && (jsx("div", { className: "flex items-center justify-center ml-2", children: endContent }))] }));
 });

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

@@ -1,5 +1,11 @@
 export interface MenuItemTheme {
     baseStyle: string;
+    states: {
+        default: string;
+        selected: string;
+        disabled: string;
+    };
+    focusedStyle: string;
     dangerStyle: string;
     focusStyle: string;
     subtitleStyle: string;

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

@@ -1,25 +1,28 @@
 const menuItemTheme = {
-    // Base item styling with hover, focus, and disabled states
-    baseStyle: "relative flex items-center gap-2 px-3 py-1.5 text-sm font-[500] text-[var(--color-text-primary)] cursor-pointer outline-none select-none rounded-[var(--radius-base)] transition-colors duration-300 " +
-        "hover:bg-[var(--color-background-secondary)] focus:bg-[var(--color-background-secondary)] " +
-        "data-[focused=true]:bg-[var(--color-background-secondary)] " +
-        "data-[selected=true]:bg-[var(--color-primary)]/5 data-[selected=true]:text-[var(--color-primary)] " +
-        "mb-px last-of-type:mb-0 " +
-        "data-[disabled=true]:opacity-60 data-[disabled=true]:cursor-not-allowed data-[disabled=true]:pointer-events-none " +
-        // Dark mode
-        " " +
-        " " +
-        "dark:data-[focused=true]:bg-[var(--color-background-secondary)] " +
-        "dark:hover:bg-[var(--color-neutral-700)] " +
-        "dark:data-[selected=true]:bg-[var(--color-neutral-600)]/50 dark:data-[selected=true]:text-[var(--color-text-primary)]",
+    // Structural base only — layout, spacing, radius, transition. No state colors:
+    // those are resolved in JS (see `states`) so a consumer `className` always wins.
+    baseStyle: "relative flex items-center gap-2 px-3 py-1.5 text-sm font-[500] cursor-pointer outline-none select-none rounded-[var(--radius-base)] transition-colors duration-300 mb-px last-of-type:mb-0",
+    // State styling resolved in JS to plain utility classes so `className` overrides
+    // win (data-[state] variants carry attribute-selector specificity and can't be
+    // overridden by a plain className — see Button.theme.ts / NavItem.theme.ts for
+    // the same rationale). data-* attributes are still emitted as hooks for
+    // consumer CSS + tests, just not used for styling here.
+    states: {
+        default: "text-[var(--color-text-primary)] hover:bg-[var(--color-surface-hover)]",
+        selected: "bg-[var(--color-primary)]/5 text-[var(--color-primary)] " +
+            "dark:bg-white/10 dark:text-[var(--color-text-primary)]",
+        disabled: "opacity-60 cursor-not-allowed pointer-events-none",
+    },
+    // Keyboard-focus highlight (item received roving focus) — same fill as hover.
+    focusedStyle: "bg-[var(--color-surface-hover)]",
     // Danger item styling (e.g., Delete actions)
     dangerStyle: "text-[var(--color-danger)] hover:bg-[var(--color-danger)] hover:text-[var(--color-danger-contrast)] " +
         "dark:text-[var(--color-danger-400)] dark:hover:bg-[var(--color-danger-600)] dark:hover:text-[var(--color-danger-contrast)]",
     // Focus visible styling for keyboard navigation
-    focusStyle: "focus-visible:ring-2 focus-visible:ring-[var(--color-primary)] focus-visible:ring-offset-2 " +
-        "dark:focus-visible:ring-[var(--color-primary-400)] dark:focus-visible:ring-offset-[var(--color-neutral-900)]",
+    focusStyle: "focus-visible:ring-2 focus-visible:ring-[var(--color-primary)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--color-background)] " +
+        "dark:focus-visible:ring-[var(--color-primary-400)]",
     // Description text below the label
-    subtitleStyle: "text-xs text-[var(--color-text-muted)] mt-0.5 truncate",
+    subtitleStyle: "text-sm text-[var(--color-text-secondary)]/80 mt-0.5 truncate",
 };
 
 export { menuItemTheme };

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

@@ -17,6 +17,8 @@ export interface MenuItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>
     disabled?: boolean;
     /** Whether the item has danger/destructive styling */
     isDanger?: boolean;
+    /** Whether the item is in a selected state (drives selected styling) */
+    selected?: boolean;
     /** Called on click or Enter/Space keyboard activation */
     onActivate?: () => void;
     /** Theme overrides for styling */

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

@@ -186,8 +186,15 @@ const NavItem = React__default.forwardRef(({ children, startContent, endContent,
     const textClasses = cn(theme.text);
     // Chevron for submenu
     const chevron = hasSubmenu && !isCollapsedView ? (jsx(ChevronDownIcon, { strokeWidth: 2, className: cn("size-4 transition-transform duration-200 text-[var(--color-text-muted)]", isExpanded && "text-[var(--color-text-primary)]", isExpanded && "rotate-180") })) : null;
-    // Strip drag/animation DOM handlers that collide with motion's prop types
-    const { onAnimationStart, onAnimationEnd, onDrag, onDragStart, onDragEnd, ...motionSafeProps } = props;
+    // Strip drag/animation DOM handlers that collide with motion's prop types.
+    // `onSubmit`/`onSubmitCapture` are stripped too: NavItem renders as either
+    // `motion.a` or `motion.button`, but `NavItemProps extends HTMLAttributes<HTMLElement>`
+    // types these as `SubmitEventHandler<HTMLElement>`. Under react@canary types
+    // (e.g. Next 16 consumers building from source), `SubmitEvent` gains a
+    // T-dependent field, so the generic-element handler is no longer assignable to
+    // motion's element-specific `HTMLMotionProps<"a">` — a build-time type error.
+    // A NavItem never submits a form, so dropping these is behaviour-neutral.
+    const { onAnimationStart, onAnimationEnd, onDrag, onDragStart, onDragEnd, onSubmit, onSubmitCapture, ...motionSafeProps } = props;
     const interactionProps = {
         className: cn("relative overflow-hidden", containerClasses),
         "aria-disabled": isDisabled || undefined,
@@ -199,15 +206,24 @@ const NavItem = React__default.forwardRef(({ children, startContent, endContent,
         whileHover: isDisabled ? undefined : (isCollapsedView ? { scale: 1.05 } : undefined),
         whileTap: isDisabled ? undefined : { scale: 0.98 },
         transition: { type: "spring", stiffness: 400, damping: 25 },
+        // Note: tried Framer Motion's canonical `layout` + `LayoutGroup` +
+        // `mode="popLayout"` pattern for the row's height shrink — transforms
+        // *do* fire (verified via getComputedStyle), but the parent Sidebar's
+        // concurrent `motion.aside` width animation re-triggers measurements
+        // every frame, which keeps resetting the layout animation before it
+        // settles. The row visibly freezes mid-transform. Animating the inner
+        // motion.div's height directly (see AnimatePresence below) sidesteps the
+        // concurrent-measurement problem and produces a smooth ~200ms shrink.
         ...motionSafeProps,
     };
     const innerContent = (jsxs(Fragment, { children: [startContent && (jsxs("div", { className: "flex items-center justify-center flex-shrink-0 relative", children: [React__default.isValidElement(startContent)
                         ? React__default.cloneElement(startContent, {
                             className: cn(iconClasses, startContent.props.className),
                         })
-                        : startContent, isCollapsedView && hasNotification && (jsx("span", { className: cn("absolute -top-0.5 -right-0.5 ring-2 ring-[var(--color-surface)]", navItemTheme.notificationDot, customTheme.notificationDot), "aria-hidden": "true" }))] })), jsx(AnimatePresence, { initial: false, children: !isCollapsedView && (jsxs(motion.span, { initial: { opacity: 0, x: -4 }, animate: { opacity: 1, x: 0 }, exit: { opacity: 0, x: -4 }, transition: {
+                        : startContent, isCollapsedView && hasNotification && (jsx("span", { className: cn("absolute -top-0.5 -right-0.5 ring-2 ring-[var(--color-surface)]", navItemTheme.notificationDot, customTheme.notificationDot), "aria-hidden": "true" }))] })), jsx(AnimatePresence, { initial: false, children: !isCollapsedView && (jsxs(motion.div, { initial: { opacity: 0, x: -4, height: 0 }, animate: { opacity: 1, x: 0, height: "auto" }, exit: { opacity: 0, x: -4, height: 0 }, transition: {
                         opacity: { duration: 0.15, ease: [0.4, 0, 0.2, 1] },
-                        x: { duration: 0.2, ease: [0.4, 0, 0.2, 1] }
+                        x: { duration: 0.2, ease: [0.4, 0, 0.2, 1] },
+                        height: { duration: 0.2, ease: [0.4, 0, 0.2, 1] },
                     }, className: "flex-1 min-w-0 flex flex-col overflow-hidden whitespace-nowrap", children: [jsxs("span", { className: "flex items-center justify-between gap-2 w-full min-w-0", children: [jsx("span", { className: cn("truncate flex-1 min-w-0", textClasses), children: children }), jsxs("span", { className: "flex items-center gap-1.5 flex-shrink-0 ml-2", children: [shortcut && (jsx("kbd", { className: "hidden group-hover:inline-flex h-[18px] items-center text-[10px] text-[var(--color-text-muted)] font-sans border border-[var(--color-border)] rounded px-1.5 leading-none flex-shrink-0", children: shortcut })), notificationElement, endContent, chevron] })] }), description && (jsx("span", { className: "block text-xs text-[var(--color-text-muted)] mt-0.5 truncate w-full", children: description }))] }, "expanded-content")) }), isCollapsedView && (jsxs("span", { className: "sr-only", children: [children, typeof notification === "number" && notification > 0
                         ? ` (${notification} unread)`
                         : notification === true

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

@@ -1,5 +1,5 @@
 const navItemTheme = {
-    baseStyle: "group relative flex items-center gap-3 px-2.5 py-2 text-sm font-medium cursor-pointer select-none w-full rounded-[var(--nav-item-radius)] outline-none overflow-hidden transition-[padding,gap,background-color,border-color,color,box-shadow] duration-200 ease-[cubic-bezier(0.4,0,0.2,1)] text-left",
+    baseStyle: "group relative flex items-center gap-3 px-2.5 py-2 text-sm font-medium cursor-pointer select-none w-full rounded-[var(--nav-item-radius)] outline-none overflow-hidden transition-[padding,gap,height,background-color,border-color,color,box-shadow] duration-200 ease-[cubic-bezier(0.4,0,0.2,1)] text-left",
     icon: "size-5",
     text: "flex-1 min-w-0 truncate",
     // State styling resolved in JS to plain utility classes so `className` overrides win
@@ -25,8 +25,19 @@ const navItemTheme = {
         1: "pl-11",
         2: "pl-10",
     },
+    // Collapsed override gives every nav row a uniform 36×36 square hit-area.
+    // CRITICAL: this uses PADDING-based centering, not `justify-center`, so the
+    // expanded↔collapsed transition is one continuous animation of the padding
+    // + gap properties (which are CSS-transitionable). Toggling `justify-*`
+    // would cause a frame-0 flex-layout snap — the label appears at its final
+    // position instead of sliding in via AnimatePresence.
+    //
+    // On a 60px rail (Sidebar.Content px-3 → 36px interior, NavItem w-full):
+    //   !px-2 (8 each) + size-5 icon (20) = 8 + 20 + 8 = 36 → centered icon.
+    //   baseStyle's py-2 (8 each) + icon 20 = 36 → square height.
+    // !py-2 is repeated explicitly so the compact density's py-1.5 doesn't win.
     collapsed: {
-        container: "!gap-0 !px-[14px] !py-2",
+        container: "!gap-0 !px-2 !py-2",
         icon: "size-5",
     },
     density: {

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

@@ -48,8 +48,12 @@ export interface PopoverBodyProps extends React.HTMLAttributes<HTMLDivElement> {
     children: ReactNode;
     animation?: boolean;
     portal?: boolean;
-    /** Enable scroll support with viewport-aware max-height. Uses available
-     *  space computed by the positioning hook, falling back to 400px. */
+    /** Cap the body to the viewport-available height (space below/above the
+     *  trigger, computed by the positioning hook; falls back to 400px) and add
+     *  `overflow-y-auto`, so tall content scrolls inside the popover instead of
+     *  extending past the viewport unreachably. `max-height` + `auto` means short
+     *  popovers show no scrollbar. Set `false` to opt out (uncapped, may overflow).
+     *  @default true */
     scrollable?: boolean;
     /** Custom max-height when scrollable is true (e.g. "300px", "20rem").
      *  Overrides the default viewport-aware height. */

package/dist/components/core/Popover/PopoverBody.js

@@ -26,7 +26,7 @@ const overlayContentAnimations = {
 /**
  * PopoverBody component displays the body/content of the popover
  */
-const PopoverBody = React__default.forwardRef(({ children, className, animation = true, portal = true, scrollable = false, maxHeight, ...props }, ref) => {
+const PopoverBody = React__default.forwardRef(({ children, className, animation = true, portal = true, scrollable = true, maxHeight, ...props }, ref) => {
     const { isOpen, onOpenChange, triggerRef, contentRef, placement, offset, triggerType, closeOnClickOutside, closeOnEsc, preventClose, hasBackdrop, theme, contentId, } = usePopoverContext();
     const shouldReduceMotion = useReducedMotion();
     const localRef = useRef(null);
@@ -45,13 +45,20 @@ const PopoverBody = React__default.forwardRef(({ children, className, animation
     });
     // Click outside detection (active when no backdrop — with backdrop, Overlay handles it)
     useClickOutside(localRef, (e) => {
-        var _a;
+        var _a, _b, _c;
         if (hasBackdrop)
             return; // Overlay handles click-outside via backdrop
         if (e.target === triggerRef.current ||
             ((_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.target))) {
             return;
         }
+        // Ignore clicks that land inside any FlikkUI overlay portal (a nested
+        // Select/Tooltip/Dropdown/Popover renders to document.body, outside our
+        // content ref — without this it would count as an outside click and
+        // dismiss the popover). See the `data-flikkui-portal` convention.
+        if ((_c = (_b = e.target) === null || _b === void 0 ? void 0 : _b.closest) === null || _c === void 0 ? void 0 : _c.call(_b, "[data-flikkui-portal]")) {
+            return;
+        }
         if (closeOnClickOutside && !preventClose) {
             onOpenChange(false);
         }
@@ -120,7 +127,7 @@ const PopoverBody = React__default.forwardRef(({ children, className, animation
                 ? { duration: 0 }
                 : popoverTransitions.content, "data-state": isOpen ? "open" : "closed", "data-placement": placement, "data-trigger": triggerType, onClick: (e) => e.stopPropagation(), ...domProps, children: children })) }));
     if (portal && isClient) {
-        return createPortal(jsx("div", { className: isDarkMode ? "dark" : undefined, children: popoverContent }), document.body);
+        return createPortal(jsx("div", { "data-flikkui-portal": "", className: isDarkMode ? "dark" : undefined, children: popoverContent }), document.body);
     }
     return popoverContent;
 });

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

@@ -3,7 +3,7 @@
  */
 const segmentedTheme = {
     // Base styles for the segmented container
-    baseStyle: "relative flex rounded-[var(--segmented-radius)] bg-[var(--color-surface-sunken)]/10 border border-[var(--color-border)]/60 p-[var(--segmented-padding)] shadow-inner dark:bg-[var(--color-surface-sunken)]",
+    baseStyle: "relative flex rounded-[var(--segmented-radius)] bg-[var(--color-surface)] border border-[var(--color-border)]/60 p-[var(--segmented-padding)] shadow-inner",
     // Size variants using CSS variables
     sizes: {
         sm: "min-h-[var(--segmented-min-h-sm)]",

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

@@ -11,4 +11,6 @@ export declare const Sidebar: React.ForwardRefExoticComponent<SidebarProps & Rea
     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>>;
+    Search: React.ForwardRefExoticComponent<import("./Sidebar.types").SidebarSearchProps & React.RefAttributes<HTMLInputElement>>;
+    Card: React.ForwardRefExoticComponent<import("./Sidebar.types").SidebarCardProps & React.RefAttributes<HTMLDivElement>>;
 };

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

@@ -14,21 +14,27 @@ import { SidebarToggle } from './SidebarToggle.js';
 import { SidebarMobileTrigger } from './SidebarMobileTrigger.js';
 import { SidebarUserProfile } from './SidebarUserProfile.js';
 import { SidebarLogo } from './SidebarLogo.js';
+import { SidebarSearch } from './SidebarSearch.js';
+import { SidebarCard } from './SidebarCard.js';
 
-// Matches the 200ms / cubic-bezier(0.4,0,0.2,1) timing used by Tailwind's
-// `duration-200` transitions on the content + footer, so width, padding and
-// icon animations stay in sync.
+// Subtle spring on the sidebar's width animation. Stiffness/damping picked so
+// the effective duration sits in the same ~200ms window as the internal CSS
+// transitions on padding/gap (Tailwind `duration-200`), but with a soft
+// organic settle instead of a linear cubic-bezier. Damping ratio ≈ 0.9 — a
+// hair under critical so there's a barely-perceptible easing-into-final
+// rather than an overshoot/bounce.
 const SIDEBAR_TRANSITION = {
-    type: "tween",
-    duration: 0.2,
-    ease: [0.4, 0, 0.2, 1],
+    type: "spring",
+    stiffness: 320,
+    damping: 34,
+    mass: 1,
 };
 const SidebarDesktop = React__default.forwardRef(({ side = "left", variant = "sidebar", density, width, children, className, theme: customTheme = {}, ...props }, ref) => {
     var _a, _b, _c, _d;
     const context = useSidebarContext();
     const collapsed = (_a = context === null || context === void 0 ? void 0 : context.collapsed) !== null && _a !== void 0 ? _a : false;
     const expandedWidth = (width === null || width === void 0 ? void 0 : width.expanded) || ((_b = context === null || context === void 0 ? void 0 : context.width) === null || _b === void 0 ? void 0 : _b.expanded) || 280;
-    const collapsedWidth = (width === null || width === void 0 ? void 0 : width.collapsed) || ((_c = context === null || context === void 0 ? void 0 : context.width) === null || _c === void 0 ? void 0 : _c.collapsed) || 64;
+    const collapsedWidth = (width === null || width === void 0 ? void 0 : width.collapsed) || ((_c = context === null || context === void 0 ? void 0 : context.width) === null || _c === void 0 ? void 0 : _c.collapsed) || 60;
     const theme = useMemo(() => ({
         ...sidebarTheme,
         ...customTheme,
@@ -104,6 +110,8 @@ const Sidebar = Object.assign(SidebarRoot, {
     MobileTrigger: SidebarMobileTrigger,
     UserProfile: SidebarUserProfile,
     Logo: SidebarLogo,
+    Search: SidebarSearch,
+    Card: SidebarCard,
 });
 
 export { Sidebar };