flikkui 0.1.0-beta.11 → 0.1.0-beta.12

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

@@ -0,0 +1,236 @@
+import { __assign } from '/Users/ggn/Development/ui-flik/node_modules/tslib/tslib.es6.js';
+import React__default, { useState, useRef, useMemo, useEffect } from 'react';
+import { commandPaletteTheme } from './CommandPalette.theme.js';
+import { containerAnimations, overlayAnimations } from './CommandPalette.animations.js';
+import { cn } from '../../../utils/cn.js';
+import '../../../utils/streamingErrors.js';
+import '../../../utils/optimisticErrors.js';
+import '../../../utils/actionQueue.js';
+import { MagnifyingGlassIcon } from '@heroicons/react/24/outline';
+import { CommandItem } from './CommandItem.js';
+import { Overlay } from '../../effects/Overlay/Overlay.js';
+
+/**
+ * Default filter function for commands
+ */
+var defaultFilterFunction = function (command, searchValue) {
+    var _a, _b;
+    var search = searchValue.toLowerCase();
+    var labelMatch = command.label.toLowerCase().includes(search);
+    var descriptionMatch = (_a = command.description) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes(search);
+    var keywordsMatch = (_b = command.keywords) === null || _b === void 0 ? void 0 : _b.some(function (keyword) {
+        return keyword.toLowerCase().includes(search);
+    });
+    return labelMatch || descriptionMatch || keywordsMatch || false;
+};
+/**
+ * Check if commands array is grouped
+ */
+var isGroupedCommands = function (commands) {
+    return commands.length > 0 && "commands" in commands[0];
+};
+/**
+ * Flatten grouped commands into a single array
+ */
+var flattenCommands = function (commands) {
+    if (isGroupedCommands(commands)) {
+        return commands.flatMap(function (group) { return group.commands; });
+    }
+    return commands;
+};
+/**
+ * Group commands by their group property
+ */
+var groupCommandsByCategory = function (commands) {
+    var grouped = {};
+    commands.forEach(function (command) {
+        var groupKey = command.group || "Other";
+        if (!grouped[groupKey]) {
+            grouped[groupKey] = [];
+        }
+        grouped[groupKey].push(command);
+    });
+    return Object.entries(grouped).map(function (_a) {
+        var label = _a[0], groupCommands = _a[1];
+        return ({
+            id: label.toLowerCase().replace(/\s+/g, "-"),
+            label: label,
+            commands: groupCommands,
+        });
+    });
+};
+/**
+ * CommandPalette Component
+ *
+ * A ⌘K style command palette for quick navigation and actions.
+ *
+ * @example
+ * ```tsx
+ * const [isOpen, setIsOpen] = useState(false);
+ *
+ * const commands = [
+ *   {
+ *     id: 'new-file',
+ *     label: 'New File',
+ *     contentStart: <DocumentPlusIcon />,
+ *     shortcut: ['⌘', 'N'],
+ *     onSelect: () => console.log('New file'),
+ *   },
+ * ];
+ *
+ * <CommandPalette
+ *   isOpen={isOpen}
+ *   onClose={() => setIsOpen(false)}
+ *   commands={commands}
+ * />
+ * ```
+ */
+var CommandPalette = function (_a) {
+    var isOpen = _a.isOpen, onClose = _a.onClose, _b = _a.commands, commands = _b === void 0 ? [] : _b, _c = _a.placeholder, placeholder = _c === void 0 ? "Type a command or search..." : _c, _d = _a.emptyMessage, emptyMessage = _d === void 0 ? "No results found." : _d, _e = _a.maxHeight, maxHeight = _e === void 0 ? "400px" : _e, _f = _a.className, className = _f === void 0 ? "" : _f, _g = _a.overlayClassName, overlayClassName = _g === void 0 ? "" : _g, themeOverrides = _a.theme, _h = _a.grouped, grouped = _h === void 0 ? false : _h, onSearchChange = _a.onSearchChange, _j = _a.filterFunction, filterFunction = _j === void 0 ? defaultFilterFunction : _j, _k = _a.closeOnOverlayClick, closeOnOverlayClick = _k === void 0 ? true : _k, _l = _a.closeOnEsc, closeOnEsc = _l === void 0 ? true : _l;
+    // Merge theme with overrides
+    var theme = __assign(__assign({}, commandPaletteTheme), (themeOverrides || {}));
+    // State
+    var _m = useState(""), searchValue = _m[0], setSearchValue = _m[1];
+    var _o = useState(0), highlightedIndex = _o[0], setHighlightedIndex = _o[1];
+    // Refs
+    var searchInputRef = useRef(null);
+    var listContainerRef = useRef(null);
+    // Flatten all commands for filtering
+    var allCommands = useMemo(function () { return flattenCommands(commands); }, [commands]);
+    // Filter commands based on search
+    var filteredCommands = useMemo(function () {
+        if (!searchValue.trim()) {
+            return allCommands;
+        }
+        return allCommands.filter(function (command) {
+            return filterFunction(command, searchValue);
+        });
+    }, [allCommands, searchValue, filterFunction]);
+    // Group filtered commands if needed
+    var displayCommands = useMemo(function () {
+        if (grouped || isGroupedCommands(commands)) {
+            return groupCommandsByCategory(filteredCommands);
+        }
+        return filteredCommands;
+    }, [grouped, commands, filteredCommands]);
+    // Get flat list of filtered commands for keyboard navigation
+    var flatFilteredCommands = useMemo(function () {
+        if (isGroupedCommands(displayCommands)) {
+            return displayCommands.flatMap(function (group) { return group.commands; });
+        }
+        return displayCommands;
+    }, [displayCommands]);
+    // Reset highlighted index when search changes
+    useEffect(function () {
+        setHighlightedIndex(0);
+    }, [searchValue]);
+    // Focus search input when opened
+    // Focus search input when opened
+    useEffect(function () {
+        if (isOpen && searchInputRef.current) {
+            // Delay focus slightly to allow animation to start smoothly
+            // This prevents layout thrashing during the initial composite frame
+            var timer_1 = setTimeout(function () {
+                var _a;
+                (_a = searchInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            }, 50);
+            return function () { return clearTimeout(timer_1); };
+        }
+    }, [isOpen]);
+    // Reset search when closed
+    useEffect(function () {
+        if (!isOpen) {
+            setSearchValue("");
+            setHighlightedIndex(0);
+        }
+    }, [isOpen]);
+    // Handle search change
+    var handleSearchChange = function (e) {
+        var value = e.target.value;
+        setSearchValue(value);
+        onSearchChange === null || onSearchChange === void 0 ? void 0 : onSearchChange(value);
+    };
+    // Handle command selection
+    var handleSelectCommand = function (command) {
+        if (command.disabled)
+            return;
+        command.onSelect();
+        onClose();
+    };
+    // Handle keyboard navigation (Arrow keys and Enter)
+    // Note: Escape key is handled by Overlay component
+    useEffect(function () {
+        if (!isOpen)
+            return;
+        var handleKeyDown = function (event) {
+            // Arrow keys navigation
+            if (event.key === "ArrowDown") {
+                event.preventDefault();
+                setHighlightedIndex(function (prev) {
+                    return prev >= flatFilteredCommands.length - 1 ? 0 : prev + 1;
+                });
+            }
+            else if (event.key === "ArrowUp") {
+                event.preventDefault();
+                setHighlightedIndex(function (prev) {
+                    return prev <= 0 ? flatFilteredCommands.length - 1 : prev - 1;
+                });
+            }
+            else if (event.key === "Enter") {
+                event.preventDefault();
+                var highlightedCommand = flatFilteredCommands[highlightedIndex];
+                if (highlightedCommand) {
+                    handleSelectCommand(highlightedCommand);
+                }
+            }
+        };
+        document.addEventListener("keydown", handleKeyDown);
+        return function () {
+            document.removeEventListener("keydown", handleKeyDown);
+        };
+    }, [isOpen, highlightedIndex, flatFilteredCommands]);
+    // Scroll highlighted command into view
+    useEffect(function () {
+        if (listContainerRef.current) {
+            var highlightedElement = listContainerRef.current.querySelector("[data-command-index=\"".concat(highlightedIndex, "\"]"));
+            if (highlightedElement) {
+                highlightedElement.scrollIntoView({
+                    block: "nearest",
+                    behavior: "smooth",
+                });
+            }
+        }
+    }, [highlightedIndex]);
+    // Render commands list
+    var renderCommandsList = function () {
+        if (flatFilteredCommands.length === 0) {
+            return React__default.createElement("div", { className: theme.emptyState }, emptyMessage);
+        }
+        // If grouped, render with group labels
+        if (isGroupedCommands(displayCommands)) {
+            var commandIndex_1 = 0;
+            return displayCommands.map(function (group) { return (React__default.createElement("div", { key: group.id, className: "py-2" },
+                React__default.createElement("div", { className: theme.groupLabel }, group.label),
+                group.commands.map(function (command) {
+                    var element = (React__default.createElement(CommandItem, { key: command.id, command: command, index: commandIndex_1, isHighlighted: commandIndex_1 === highlightedIndex, onSelect: handleSelectCommand, onMouseEnter: setHighlightedIndex, theme: theme }));
+                    commandIndex_1++;
+                    return element;
+                }))); });
+        }
+        // Otherwise render flat list
+        return displayCommands.map(function (command, index) { return (React__default.createElement(CommandItem, { key: command.id, command: command, index: index, isHighlighted: index === highlightedIndex, onSelect: handleSelectCommand, onMouseEnter: setHighlightedIndex, theme: theme })); });
+    };
+    return (React__default.createElement(Overlay, { isOpen: isOpen, onClose: onClose, closeOnOverlayClick: closeOnOverlayClick, closeOnEsc: closeOnEsc, position: "top", overlayClassName: overlayClassName, contentClassName: cn(theme.container, className), animations: {
+            overlay: overlayAnimations,
+            content: containerAnimations,
+        } },
+        React__default.createElement("div", { className: theme.searchWrapper },
+            React__default.createElement("div", { className: "flex items-center gap-3" },
+                React__default.createElement(MagnifyingGlassIcon, { className: "w-5 h-5 text-[var(--color-text-muted)]", strokeWidth: 2 }),
+                React__default.createElement("input", { ref: searchInputRef, type: "text", className: theme.searchInput, placeholder: placeholder, value: searchValue, onChange: handleSearchChange, autoComplete: "off", autoCorrect: "off", spellCheck: false }))),
+        React__default.createElement("div", { ref: listContainerRef, className: "overflow-y-auto overscroll-contain px-1", style: {
+                maxHeight: typeof maxHeight === "number" ? "".concat(maxHeight, "px") : maxHeight,
+            } }, renderCommandsList())));
+};
+
+export { CommandPalette };

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

@@ -1,2 +1,2 @@
-import type { CommandPaletteThemeOverrides } from './CommandPalette.types';
+import type { CommandPaletteThemeOverrides } from "./CommandPalette.types";
 export declare const commandPaletteTheme: Required<CommandPaletteThemeOverrides>;

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

@@ -0,0 +1,30 @@
+var commandPaletteTheme = {
+    overlay: "fixed inset-0 bg-[var(--overlay-bg)] backdrop-blur-[var(--overlay-blur)] z-50 " +
+        "flex items-start justify-center pt-[10vh] px-4",
+    container: "relative w-full max-h-[calc(100vh-2rem)] w-full max-w-lg " +
+        "bg-[var(--color-background)] rounded-[var(--modal-rounded)] 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
+        "dark:ring-black/30",
+    searchWrapper: "border-b border-[var(--color-border)] px-4 py-3 " + "",
+    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)]",
+    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-lg 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-white " +
+        "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)]",
+    emptyState: "px-4 py-12 text-center text-sm text-[var(--color-text-muted)] " +
+        "dark:text-[var(--color-neutral-500)]",
+};
+
+export { commandPaletteTheme };

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

@@ -32,7 +32,7 @@ export interface ContextMenuContentProps extends React.HTMLAttributes<HTMLDivEle
     animation?: boolean;
     "aria-label"?: string;
 }
-export interface ContextMenuItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect'> {
+export interface ContextMenuItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onSelect"> {
     children: ReactNode;
     className?: string;
     checked?: boolean;
@@ -40,6 +40,9 @@ export interface ContextMenuItemProps extends Omit<React.HTMLAttributes<HTMLDivE
     isDanger?: boolean;
     shortcut?: ReactNode;
     onSelect?: () => void;
+    startContent?: ReactNode;
+    endContent?: ReactNode;
+    description?: string;
 }
 export interface ContextMenuSubProps {
     children: ReactNode;

package/dist/components/core/ContextMenu/ContextMenuItem.d.ts

@@ -2,5 +2,6 @@ import React from "react";
 import { ContextMenuItemProps } from "./ContextMenu.types";
 /**
  * ContextMenuItem - Individual menu item with optional check indicator
+ * Refactored to match DropdownItem API pattern
  */
 export declare const ContextMenuItem: React.ForwardRefExoticComponent<ContextMenuItemProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/core/Divider/Divider.js

@@ -1,4 +1,4 @@
-import { __rest, __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import { __rest, __assign } from '/Users/ggn/Development/ui-flik/node_modules/tslib/tslib.es6.js';
 import React__default from 'react';
 import { cn } from '../../../utils/cn.js';
 import { dividerTheme } from './Divider.theme.js';

package/dist/components/core/DragDrop/DragDrop.js

@@ -1,10 +1,37 @@
-import { __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import { __assign } from '/Users/ggn/Development/ui-flik/node_modules/tslib/tslib.es6.js';
 import React__default, { createContext, useRef, useCallback, useState, useEffect, useContext } from 'react';
+import { motion } from 'motion/react';
+export { AnimatePresence } from 'motion/react';
 import { cn } from '../../../utils/cn.js';
 import { dragDropTheme } from './DragDrop.theme.js';
-import { motion } from '../../../node_modules/framer-motion/dist/es/render/components/motion/proxy.js';
 
 var DragDropContext = createContext(null);
+var DragDropProvider = function (_a) {
+    var children = _a.children;
+    var _b = useState(null), activeDrag = _b[0], setActiveDrag = _b[1];
+    var pointerRef = useRef(null);
+    var dropZones = useRef(new Map());
+    var groupIdRef = useRef("dd-".concat(Math.random().toString(36).slice(2)));
+    var registerDropZone = useCallback(function (id, element) {
+        dropZones.current.set(id, element);
+    }, []);
+    var unregisterDropZone = useCallback(function (id) {
+        dropZones.current.delete(id);
+    }, []);
+    var setPointer = useCallback(function (point) {
+        pointerRef.current = point;
+    }, []);
+    return (React__default.createElement(DragDropContext.Provider, { value: {
+            activeDrag: activeDrag,
+            setActiveDrag: setActiveDrag,
+            pointerRef: pointerRef,
+            setPointer: setPointer,
+            groupId: groupIdRef.current,
+            registerDropZone: registerDropZone,
+            unregisterDropZone: unregisterDropZone,
+            dropZones: dropZones.current
+        } }, children));
+};
 var useDragDropContext = function () {
     var context = useContext(DragDropContext);
     if (!context) {
@@ -175,4 +202,4 @@ var Droppable = React__default.forwardRef(function (_a, ref) {
 });
 Droppable.displayName = 'Droppable';
 
-export { Draggable, Droppable };
+export { DragDropProvider, Draggable, Droppable };

package/dist/components/core/Drawer/Drawer.js

@@ -1,14 +1,13 @@
-import { __rest, __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import { __rest, __assign } from '/Users/ggn/Development/ui-flik/node_modules/tslib/tslib.es6.js';
 import React__default, { createContext, useCallback, useEffect, useContext } from 'react';
 import { createPortal } from 'react-dom';
+import { AnimatePresence, motion } from 'motion/react';
 import { cn } from '../../../utils/cn.js';
 import { drawerTheme, drawerPositionVariantsFullWidth, drawerPositionVariantsWithMargin, drawerSizeVariants } from './Drawer.theme.js';
 import { drawerOverlayAnimations, getDrawerContentAnimations } from './Drawer.animations.js';
 import { DrawerHeader } from './DrawerHeader.js';
 import { DrawerContent } from './DrawerContent.js';
 import { DrawerFooter } from './DrawerFooter.js';
-import { AnimatePresence } from '../../../node_modules/framer-motion/dist/es/components/AnimatePresence/index.js';
-import { motion } from '../../../node_modules/framer-motion/dist/es/render/components/motion/proxy.js';
 
 // Create context for Drawer components
 var DrawerContext = createContext(undefined);
@@ -66,8 +65,13 @@ var DrawerRoot = function (_a) {
     var positionVariant = size === "full"
         ? drawerPositionVariantsFullWidth[position]
         : drawerPositionVariantsWithMargin[position];
+    // Detect dark mode from document
+    var isDarkMode = typeof document !== "undefined" &&
+        (document.documentElement.classList.contains("dark") ||
+            document.body.classList.contains("dark") ||
+            document.querySelector(".dark") !== null);
     var drawerContent = (React__default.createElement(DrawerContext.Provider, { value: contextValue },
-        React__default.createElement(AnimatePresence, null, isOpen && (React__default.createElement(motion.div, { className: cn(theme.overlay), onClick: handleOverlayClick, variants: drawerOverlayAnimations, initial: "initial", animate: "animate", exit: "exit" },
+        React__default.createElement(AnimatePresence, null, isOpen && (React__default.createElement(motion.div, { className: cn(isDarkMode && "dark", theme.overlay), onClick: handleOverlayClick, variants: drawerOverlayAnimations, initial: "initial", animate: "animate", exit: "exit" },
             React__default.createElement(motion.div, __assign({ className: cn(theme.container, positionVariant, size !== "full" && sizeVariant, className), variants: getDrawerContentAnimations(position), initial: "initial", animate: "animate", exit: "exit", onClick: function (e) { return e.stopPropagation(); } }, props),
                 React__default.createElement("div", { className: cn(theme.content) }, children)))))));
     // Render in portal

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

@@ -1,11 +1,19 @@
 var drawerTheme = {
     overlay: "fixed inset-0 bg-[var(--overlay-bg)] backdrop-blur-[var(--overlay-blur)] z-50",
-    container: "fixed bg-white shadow-2xl shadow-black/30 border border-[var(--color-border)] ring-6 ring-white/20 flex flex-col overflow-hidden rounded-2xl",
+    container: "fixed bg-[var(--color-background)] shadow-2xl shadow-black/30 " +
+        "border border-[var(--color-border)] ring-6 ring-white/20 " +
+        "flex flex-col overflow-hidden rounded-2xl " +
+        "dark:bg-[var(--color-neutral-900)] dark:border-[var(--color-neutral-700)] dark:ring-black/30",
     content: "h-full flex flex-col",
-    header: "flex items-center justify-between p-4 border-b border-[var(--color-border)] shrink-0",
+    header: "flex items-center justify-between p-4 border-b border-[var(--color-border)] shrink-0 " +
+        "dark:border-[var(--color-neutral-700)]",
     body: "flex-1 overflow-y-auto p-4",
-    footer: "flex items-center justify-end gap-3 p-4 border-t border-[var(--color-border)] shrink-0",
-    closeButton: "p-2 rounded-md hover:bg-neutral-100 transition-colors text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] cursor-pointer",
+    footer: "flex items-center justify-end gap-3 p-4 border-t border-[var(--color-border)] shrink-0 " +
+        "dark:border-[var(--color-neutral-700)]",
+    closeButton: "p-2 rounded-md hover:bg-[var(--color-background-tertiary)] transition-colors " +
+        "text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] cursor-pointer " +
+        "dark:hover:bg-[var(--color-neutral-800)] dark:text-[var(--color-neutral-400)] " +
+        "dark:hover:text-[var(--color-neutral-200)]",
 };
 // Position variants with margin support
 var drawerPositionVariantsWithMargin = {

package/dist/components/core/Drawer/DrawerContent.js

@@ -1,4 +1,4 @@
-import { __rest, __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import { __rest, __assign } from '/Users/ggn/Development/ui-flik/node_modules/tslib/tslib.es6.js';
 import React__default from 'react';
 import { cn } from '../../../utils/cn.js';
 import { useDrawerContext } from './Drawer.js';

package/dist/components/core/Drawer/DrawerFooter.js

@@ -1,4 +1,4 @@
-import { __rest, __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import { __rest, __assign } from '/Users/ggn/Development/ui-flik/node_modules/tslib/tslib.es6.js';
 import React__default from 'react';
 import { cn } from '../../../utils/cn.js';
 import { useDrawerContext } from './Drawer.js';

package/dist/components/core/Drawer/DrawerHeader.js

@@ -1,8 +1,8 @@
-import { __rest, __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import { __rest, __assign } from '/Users/ggn/Development/ui-flik/node_modules/tslib/tslib.es6.js';
 import React__default from 'react';
+import { XMarkIcon } from '@heroicons/react/24/outline';
 import { cn } from '../../../utils/cn.js';
 import { useDrawerContext } from './Drawer.js';
-import ForwardRef from '../../../node_modules/@heroicons/react/24/outline/esm/XMarkIcon.js';
 
 var DrawerHeader = function (_a) {
     var children = _a.children, showCloseButton = _a.showCloseButton, className = _a.className, props = __rest(_a, ["children", "showCloseButton", "className"]);
@@ -11,7 +11,7 @@ var DrawerHeader = function (_a) {
     return (React__default.createElement("div", __assign({ className: cn(theme.header, className) }, props),
         React__default.createElement("div", { className: "flex-1" }, children),
         shouldShowCloseButton && (React__default.createElement("button", { type: "button", onClick: onClose, className: cn(theme.closeButton), "aria-label": "Close drawer" },
-            React__default.createElement(ForwardRef, { className: "w-4 h-4" })))));
+            React__default.createElement(XMarkIcon, { className: "w-4 h-4" })))));
 };
 DrawerHeader.displayName = "Drawer.Header";
 

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

@@ -1,4 +1,4 @@
-import { __rest, __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import { __rest, __assign } from '/Users/ggn/Development/ui-flik/node_modules/tslib/tslib.es6.js';
 import React__default, { useState, useRef, useCallback } from 'react';
 import { cn } from '../../../utils/cn.js';
 import { DropdownContext } from './DropdownContext.js';
@@ -27,7 +27,7 @@ import { dropdownTheme } from './Dropdown.theme.js';
  * ```
  */
 var DropdownRoot = function (_a) {
-    var children = _a.children, className = _a.className, controlledIsOpen = _a.isOpen, _b = _a.defaultIsOpen, defaultIsOpen = _b === void 0 ? false : _b, onOpenChange = _a.onOpenChange, _c = _a.placement, placement = _c === void 0 ? "bottom-start" : _c, _d = _a.offset, offset = _d === void 0 ? 4 : _d, _e = _a.closeOnSelect, closeOnSelect = _e === void 0 ? true : _e, _f = _a.disabledKeys, disabledKeys = _f === void 0 ? [] : _f, controlledSelectedKeys = _a.selectedKeys, _g = _a.defaultSelectedKeys, defaultSelectedKeys = _g === void 0 ? [] : _g, _h = _a.selectionMode, selectionMode = _h === void 0 ? 'none' : _h, onAction = _a.onAction, onSelectionChange = _a.onSelectionChange, themeOverrides = _a.theme, props = __rest(_a, ["children", "className", "isOpen", "defaultIsOpen", "onOpenChange", "placement", "offset", "closeOnSelect", "disabledKeys", "selectedKeys", "defaultSelectedKeys", "selectionMode", "onAction", "onSelectionChange", "theme"]);
+    var children = _a.children, className = _a.className, controlledIsOpen = _a.isOpen, _b = _a.defaultIsOpen, defaultIsOpen = _b === void 0 ? false : _b, onOpenChange = _a.onOpenChange, _c = _a.placement, placement = _c === void 0 ? "bottom-start" : _c, _d = _a.offset, offset = _d === void 0 ? 4 : _d, _e = _a.closeOnSelect, closeOnSelect = _e === void 0 ? true : _e, _f = _a.disabledKeys, disabledKeys = _f === void 0 ? [] : _f, controlledSelectedKeys = _a.selectedKeys, _g = _a.defaultSelectedKeys, defaultSelectedKeys = _g === void 0 ? [] : _g, _h = _a.selectionMode, selectionMode = _h === void 0 ? "none" : _h, onAction = _a.onAction, onSelectionChange = _a.onSelectionChange, themeOverrides = _a.theme, props = __rest(_a, ["children", "className", "isOpen", "defaultIsOpen", "onOpenChange", "placement", "offset", "closeOnSelect", "disabledKeys", "selectedKeys", "defaultSelectedKeys", "selectionMode", "onAction", "onSelectionChange", "theme"]);
     // State for uncontrolled open
     var _j = useState(defaultIsOpen), uncontrolledIsOpen = _j[0], setUncontrolledIsOpen = _j[1];
     // State for uncontrolled selection

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

@@ -5,5 +5,6 @@ export interface DropdownTheme {
     itemFocusStyle: string;
     sectionTitleStyle: string;
     sectionStyle: string;
+    separatorStyle: string;
 }
 export declare const dropdownTheme: DropdownTheme;

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

@@ -1,16 +1,33 @@
 var dropdownTheme = {
     // Menu container - similar to Popover but with menu-specific styling
-    menuStyle: "min-w-[200px] max-h-[400px] overflow-y-auto rounded-xl  border border-[var(--color-border)] bg-white shadow-real-xl focus:outline-none flex",
+    menuStyle: "min-w-[200px] max-h-[400px] overflow-y-auto rounded-xl border border-[var(--color-border)] bg-[var(--color-background-secondary)] shadow-real-xl focus:outline-none flex disabled:cursor-not-allowed " +
+        "dark:bg-[var(--color-neutral-800)] dark:border-[var(--color-neutral-700)]",
     // Base item styling with simple hover and focus states
-    itemBaseStyle: "relative flex items-center gap-2 px-2 py-1.5 text-sm font-[500] text-[var(--color-text-primary)] cursor-pointer outline-none select-none rounded-lg transition-colors duration-300 hover:bg-neutral-100 focus:bg-neutral-50 data-[focused=true]:bg-neutral-100 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",
+    itemBaseStyle: "relative flex items-center gap-2 px-2 py-1.5 text-sm font-[500] text-[var(--color-text-primary)] cursor-pointer outline-none select-none rounded-lg transition-colors duration-300 " +
+        "hover:bg-[var(--color-background-tertiary)] focus:bg-[var(--color-background-secondary)] " +
+        "data-[focused=true]:bg-[var(--color-background-tertiary)] " +
+        "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:text-[var(--color-text-primary)] " +
+        "dark:hover:bg-[var(--color-neutral-800)]/80 dark:focus:bg-[var(--color-neutral-800)] " +
+        "dark:data-[focused=true]:bg-[var(--color-neutral-800)] " +
+        "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)]",
     // Danger item styling (e.g., Delete actions)
-    itemDangerStyle: "text-[var(--color-danger)] hover:bg-[var(--color-danger)] hover:text-white",
+    itemDangerStyle: "text-[var(--color-danger)] hover:bg-[var(--color-danger)] hover:text-white " +
+        "dark:text-[var(--color-danger-400)] dark:hover:bg-[var(--color-danger-600)] dark:hover:text-white",
     // Focus visible styling for keyboard navigation
-    itemFocusStyle: "focus-visible:ring-2 focus-visible:ring-[var(--color-primary)] focus-visible:ring-offset-2",
+    itemFocusStyle: "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)]",
     // Section title styling
     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)]",
 };
 
 export { dropdownTheme };

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

@@ -1,8 +1,8 @@
-import { __rest, __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import { __rest, __assign } from '/Users/ggn/Development/ui-flik/node_modules/tslib/tslib.es6.js';
 import React__default, { useState, useCallback } from 'react';
+import { CheckIcon } from '@heroicons/react/16/solid';
 import { cn } from '../../../utils/cn.js';
 import { useDropdownContext } from './DropdownContext.js';
-import ForwardRef from '../../../node_modules/@heroicons/react/16/solid/esm/CheckIcon.js';
 
 /**
  * DropdownItem component - individual menu item for action menus
@@ -70,7 +70,10 @@ var DropdownItem = React__default.forwardRef(function (_a, ref) {
                 React__default.createElement("span", { className: "truncate" }, children),
                 shortcut && (React__default.createElement("kbd", { className: "text-xs text-[var(--color-text-muted)] font-sans border border-[var(--color-border)] rounded px-1.5 py-0.5" }, shortcut))),
             description && (React__default.createElement("div", { className: "text-xs text-[var(--color-text-muted)] mt-0.5 truncate" }, description))),
-        (endContent || selectionMode !== "none") && (React__default.createElement("div", { className: "flex items-center justify-center flex-shrink-0 w-5 h-5" }, endContent || (isSelected && (React__default.createElement(ForwardRef, { className: "size-4 text-[var(--color-text-secondary)]" })))))));
+        (endContent || selectionMode !== "none") && (React__default.createElement("div", { className: cn("flex items-center justify-center", 
+            // Only apply fixed size and shrink constraint for selection indicator
+            !endContent ? "flex-shrink-0 w-5 h-5" : "ml-2") }, endContent ||
+            (isSelected && (React__default.createElement(CheckIcon, { className: "size-4 text-[var(--color-text-secondary)]" })))))));
 });
 DropdownItem.displayName = "DropdownItem";