flikkui 0.1.0-beta.9 → 0.2.0-beta.1

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

@@ -0,0 +1,93 @@
+import React__default, { useState, useRef, useCallback } from 'react';
+import { cn } from '../../../utils/cn.js';
+import { DropdownContext } from './DropdownContext.js';
+import { DropdownTrigger } from './DropdownTrigger.js';
+import { DropdownMenu } from './DropdownMenu.js';
+import { DropdownItem } from './DropdownItem.js';
+import { DropdownSection } from './DropdownSection.js';
+import { DropdownSeparator } from './DropdownSeparator.js';
+import { dropdownTheme } from './Dropdown.theme.js';
+
+/**
+ * Dropdown component for displaying action menus
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <Dropdown>
+ *   <Dropdown.Trigger>
+ *     <Button>Actions</Button>
+ *   </Dropdown.Trigger>
+ *   <Dropdown.Menu>
+ *     <Dropdown.Item key="edit">Edit</Dropdown.Item>
+ *     <Dropdown.Item key="delete" isDanger>Delete</Dropdown.Item>
+ *   </Dropdown.Menu>
+ * </Dropdown>
+ * ```
+ */
+const DropdownRoot = ({ children, className, isOpen: controlledIsOpen, defaultIsOpen = false, onOpenChange, placement = "bottom-start", offset = 4, closeOnSelect = true, disabledKeys = [], selectedKeys: controlledSelectedKeys, defaultSelectedKeys = [], selectionMode = "none", onAction, onSelectionChange, theme: themeOverrides, ...props }) => {
+    // State for uncontrolled open
+    const [uncontrolledIsOpen, setUncontrolledIsOpen] = useState(defaultIsOpen);
+    // State for uncontrolled selection
+    const [uncontrolledSelectedKeys, setUncontrolledSelectedKeys] = useState(new Set(defaultSelectedKeys));
+    // Determine if controlled or uncontrolled
+    const isControlledOpen = controlledIsOpen !== undefined;
+    const isOpen = isControlledOpen ? controlledIsOpen : uncontrolledIsOpen;
+    const isControlledSelection = controlledSelectedKeys !== undefined;
+    const selectedKeys = isControlledSelection
+        ? new Set(controlledSelectedKeys)
+        : uncontrolledSelectedKeys;
+    // Refs for positioning
+    const triggerRef = useRef(null);
+    const menuRef = useRef(null);
+    // Handle open state changes
+    const handleOpenChange = useCallback((value) => {
+        if (!isControlledOpen) {
+            setUncontrolledIsOpen(value);
+        }
+        onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(value);
+    }, [isControlledOpen, onOpenChange]);
+    // Handle selection changes
+    const handleSelectionChange = useCallback((keys) => {
+        if (!isControlledSelection) {
+            setUncontrolledSelectedKeys(keys);
+        }
+        onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange(Array.from(keys));
+    }, [isControlledSelection, onSelectionChange]);
+    // Merge theme with overrides
+    const theme = {
+        ...dropdownTheme,
+        ...(themeOverrides || {}),
+    };
+    // Convert disabled keys array to Set
+    const disabledKeysSet = new Set(disabledKeys);
+    // Context value
+    const contextValue = {
+        isOpen,
+        onOpenChange: handleOpenChange,
+        triggerRef,
+        menuRef,
+        placement,
+        offset,
+        closeOnSelect,
+        disabledKeys: disabledKeysSet,
+        selectedKeys,
+        selectionMode,
+        onAction,
+        onSelectionChange: handleSelectionChange,
+        theme,
+    };
+    return (React__default.createElement(DropdownContext.Provider, { value: contextValue },
+        React__default.createElement("div", { className: cn("dropdown", className), "data-state": isOpen ? "open" : "closed", ...props }, children)));
+};
+DropdownRoot.displayName = "Dropdown";
+// Export as a unified component with sub-components
+const Dropdown = Object.assign(DropdownRoot, {
+    Trigger: DropdownTrigger,
+    Menu: DropdownMenu,
+    Item: DropdownItem,
+    Section: DropdownSection,
+    Separator: DropdownSeparator,
+});
+
+export { Dropdown };

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

@@ -0,0 +1,10 @@
+export interface DropdownTheme {
+    menuStyle: string;
+    itemBaseStyle: string;
+    itemDangerStyle: string;
+    itemFocusStyle: string;
+    sectionTitleStyle: string;
+    sectionStyle: string;
+    separatorStyle: string;
+}
+export declare const dropdownTheme: DropdownTheme;

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

@@ -0,0 +1,33 @@
+const 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-[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-[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 " +
+        "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 " +
+        "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/Dropdown.types.d.ts

@@ -0,0 +1,83 @@
+import React, { ReactNode } from "react";
+import { DropdownTheme } from "./Dropdown.theme";
+export type DropdownPlacement = "top" | "top-start" | "top-end" | "right" | "right-start" | "right-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end";
+export type SelectionMode = 'none' | 'single' | 'multiple';
+export interface DropdownContextValue {
+    isOpen: boolean;
+    onOpenChange: (isOpen: boolean) => void;
+    triggerRef: React.RefObject<HTMLElement | null>;
+    menuRef: React.RefObject<HTMLDivElement | null>;
+    placement: DropdownPlacement;
+    offset: number;
+    closeOnSelect: boolean;
+    disabledKeys: Set<string>;
+    selectedKeys: Set<string>;
+    selectionMode: SelectionMode;
+    onAction?: (key: string) => void;
+    onSelectionChange?: (keys: Set<string>) => void;
+    theme: DropdownTheme;
+}
+export interface DropdownProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+    isOpen?: boolean;
+    defaultIsOpen?: boolean;
+    onOpenChange?: (isOpen: boolean) => void;
+    placement?: DropdownPlacement;
+    offset?: number;
+    closeOnSelect?: boolean;
+    disabledKeys?: string[];
+    selectedKeys?: string[];
+    defaultSelectedKeys?: string[];
+    selectionMode?: SelectionMode;
+    onAction?: (key: string) => void;
+    onSelectionChange?: (keys: string[]) => void;
+    theme?: Partial<DropdownTheme>;
+}
+export interface DropdownTriggerProps {
+    children: React.ReactElement;
+    className?: string;
+}
+export interface DropdownMenuProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+    className?: string;
+    animation?: boolean;
+    portal?: boolean;
+    horizontal?: boolean;
+    "aria-label"?: string;
+}
+export interface DropdownItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color' | 'onSelect'> {
+    itemKey: string;
+    children: ReactNode;
+    className?: string;
+    startContent?: ReactNode;
+    endContent?: ReactNode;
+    description?: string;
+    shortcut?: string;
+    isDisabled?: boolean;
+    isDanger?: boolean;
+    onAction?: () => void;
+}
+export interface DropdownSectionProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+    className?: string;
+    title?: string;
+    showDivider?: boolean;
+}
+export interface DropdownSeparatorProps extends React.HTMLAttributes<HTMLDivElement> {
+    className?: string;
+}
+/**
+ * Theme overrides for the Dropdown component
+ */
+export interface DropdownThemeOverrides {
+    /** Menu container style */
+    menuStyle?: string;
+    /** Item base style */
+    itemBaseStyle?: string;
+    /** Danger item style */
+    itemDangerStyle?: string;
+    /** Section title style */
+    sectionTitleStyle?: string;
+    /** Section container style */
+    sectionStyle?: string;
+}

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

@@ -0,0 +1,3 @@
+import { DropdownContextValue } from "./Dropdown.types";
+export declare const DropdownContext: import("react").Context<DropdownContextValue | undefined>;
+export declare const useDropdownContext: () => DropdownContextValue;

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

@@ -0,0 +1,12 @@
+import { createContext, useContext } from 'react';
+
+const DropdownContext = createContext(undefined);
+const useDropdownContext = () => {
+    const context = useContext(DropdownContext);
+    if (!context) {
+        throw new Error("Dropdown compound components must be used within a Dropdown component");
+    }
+    return context;
+};
+
+export { DropdownContext, useDropdownContext };

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

@@ -0,0 +1,6 @@
+import React from "react";
+import { DropdownItemProps } from "./Dropdown.types";
+/**
+ * DropdownItem component - individual menu item for action menus
+ */
+export declare const DropdownItem: React.ForwardRefExoticComponent<DropdownItemProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,78 @@
+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';
+
+/**
+ * DropdownItem component - individual menu item for action menus
+ */
+const DropdownItem = React__default.forwardRef(({ itemKey, children, className, startContent, endContent, description, shortcut, isDisabled = false, isDanger = false, onAction, ...props }, ref) => {
+    const { closeOnSelect, onOpenChange, disabledKeys, selectedKeys, selectionMode, onAction: contextOnAction, onSelectionChange, theme, } = useDropdownContext();
+    const [isFocused, setIsFocused] = useState(false);
+    // Check if item is disabled
+    const disabled = isDisabled || disabledKeys.has(itemKey);
+    // Check if item is selected
+    const isSelected = selectedKeys.has(itemKey);
+    // Handle item click/activation
+    const handleClick = useCallback(() => {
+        if (disabled)
+            return;
+        // Handle selection if selection mode is enabled
+        if (selectionMode !== "none" && onSelectionChange) {
+            const newSelectedKeys = new Set(selectedKeys);
+            if (selectionMode === "single") {
+                // Single selection: replace with current item
+                newSelectedKeys.clear();
+                newSelectedKeys.add(itemKey);
+            }
+            else if (selectionMode === "multiple") {
+                // Multiple selection: toggle current item
+                if (newSelectedKeys.has(itemKey)) {
+                    newSelectedKeys.delete(itemKey);
+                }
+                else {
+                    newSelectedKeys.add(itemKey);
+                }
+            }
+            onSelectionChange(newSelectedKeys);
+        }
+        // Call action handlers
+        onAction === null || onAction === void 0 ? void 0 : onAction();
+        contextOnAction === null || contextOnAction === void 0 ? void 0 : contextOnAction(itemKey);
+        // Close menu if configured (and not in multiple selection mode)
+        if (closeOnSelect && selectionMode !== "multiple") {
+            onOpenChange(false);
+        }
+    }, [
+        disabled,
+        itemKey,
+        selectedKeys,
+        selectionMode,
+        onAction,
+        contextOnAction,
+        onSelectionChange,
+        closeOnSelect,
+        onOpenChange,
+    ]);
+    // Handle keyboard activation (Enter or Space)
+    const handleKeyDown = useCallback((e) => {
+        if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            handleClick();
+        }
+    }, [handleClick]);
+    return (React__default.createElement("div", { ref: ref, role: "menuitem", tabIndex: disabled ? undefined : -1, "aria-disabled": disabled, "data-focused": isFocused, "data-disabled": disabled, "data-selected": isSelected, className: cn(theme.itemBaseStyle, theme.itemFocusStyle, isDanger && theme.itemDangerStyle, className), onClick: handleClick, onKeyDown: handleKeyDown, onFocus: () => setIsFocused(true), onBlur: () => setIsFocused(false), ...props },
+        startContent && (React__default.createElement("div", { className: "flex items-center justify-center flex-shrink-0" }, startContent)),
+        React__default.createElement("div", { className: "flex-1 min-w-0" },
+            React__default.createElement("div", { className: "flex items-center justify-between gap-2" },
+                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: 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";
+
+export { DropdownItem };

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

@@ -0,0 +1,6 @@
+import React from "react";
+import { DropdownMenuProps } from "./Dropdown.types";
+/**
+ * DropdownMenu component - renders the menu with keyboard navigation
+ */
+export declare const DropdownMenu: React.ForwardRefExoticComponent<DropdownMenuProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,222 @@
+import React__default, { useRef, useState, useCallback, useEffect } from 'react';
+import { useReducedMotion, AnimatePresence, motion } from 'motion/react';
+import { createPortal } from 'react-dom';
+import { cn } from '../../../utils/cn.js';
+import { useDropdownContext } from './DropdownContext.js';
+import { useClickOutside } from '../../../utils/useClickOutside.js';
+import { useSelectPortal } from '../../../hooks/useSelectPortal.js';
+
+/**
+ * Hook to detect dark mode state from document
+ */
+const useDarkMode = () => {
+    const [isDark, setIsDark] = useState(false);
+    useEffect(() => {
+        if (typeof document === "undefined")
+            return;
+        const checkDarkMode = () => {
+            const hasDarkClass = document.documentElement.classList.contains("dark") ||
+                document.body.classList.contains("dark") ||
+                document.querySelector(".dark") !== null;
+            setIsDark(hasDarkClass);
+        };
+        checkDarkMode();
+        // Observe class changes on html and body
+        const observer = new MutationObserver(checkDarkMode);
+        observer.observe(document.documentElement, {
+            attributes: true,
+            attributeFilter: ["class"],
+        });
+        observer.observe(document.body, {
+            attributes: true,
+            attributeFilter: ["class"],
+        });
+        return () => observer.disconnect();
+    }, []);
+    return isDark;
+};
+/**
+ * DropdownMenu component - renders the menu with keyboard navigation
+ */
+const DropdownMenu = React__default.forwardRef(({ children, className, animation = true, portal = true, horizontal = false, "aria-label": ariaLabel, ...props }, ref) => {
+    const { isOpen, onOpenChange, triggerRef, menuRef, placement, offset, theme, } = useDropdownContext();
+    // Detect dark mode for portal content
+    const isDarkMode = useDarkMode();
+    const shouldReduceMotion = useReducedMotion();
+    const localRef = useRef(null);
+    const [focusedIndex, setFocusedIndex] = useState(-1);
+    const [typeaheadString, setTypeaheadString] = useState("");
+    const typeaheadTimeoutRef = useRef(null);
+    // Use the positioning hook from Popover/Select
+    const { position, cssVariables, contentRef: portalContentRef, } = useSelectPortal({
+        triggerRef,
+        isOpen: isOpen || false,
+        placement: placement,
+        offset: offset || 4,
+        autoWidth: false,
+    });
+    // Get all menu items (not separators or sections)
+    const getMenuItems = useCallback(() => {
+        if (!localRef.current)
+            return [];
+        return Array.from(localRef.current.querySelectorAll('[role="menuitem"]:not([aria-disabled="true"])'));
+    }, []);
+    // Focus a menu item by index
+    const focusItem = useCallback((index) => {
+        var _a;
+        const items = getMenuItems();
+        if (index >= 0 && index < items.length) {
+            (_a = items[index]) === null || _a === void 0 ? void 0 : _a.focus();
+            setFocusedIndex(index);
+        }
+    }, [getMenuItems]);
+    // Keyboard navigation handler
+    const handleKeyDown = useCallback((e) => {
+        var _a;
+        const items = getMenuItems();
+        const currentIndex = focusedIndex;
+        switch (e.key) {
+            case "ArrowDown":
+                e.preventDefault();
+                const nextIndex = currentIndex < items.length - 1 ? currentIndex + 1 : 0;
+                focusItem(nextIndex);
+                break;
+            case "ArrowUp":
+                e.preventDefault();
+                const prevIndex = currentIndex > 0 ? currentIndex - 1 : items.length - 1;
+                focusItem(prevIndex);
+                break;
+            case "Home":
+                e.preventDefault();
+                focusItem(0);
+                break;
+            case "End":
+                e.preventDefault();
+                focusItem(items.length - 1);
+                break;
+            case "Escape":
+                e.preventDefault();
+                onOpenChange(false);
+                // Return focus to trigger
+                (_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+                break;
+            case "Tab":
+                // Close menu on Tab
+                onOpenChange(false);
+                break;
+            default:
+                // Type-ahead functionality
+                if (e.key.length === 1 && !e.ctrlKey && !e.altKey && !e.metaKey) {
+                    e.preventDefault();
+                    // Clear previous timeout
+                    if (typeaheadTimeoutRef.current) {
+                        clearTimeout(typeaheadTimeoutRef.current);
+                    }
+                    // Add character to typeahead string
+                    const newString = typeaheadString + e.key.toLowerCase();
+                    setTypeaheadString(newString);
+                    // Find matching item
+                    const matchIndex = items.findIndex((item) => { var _a; return (_a = item.textContent) === null || _a === void 0 ? void 0 : _a.toLowerCase().startsWith(newString); });
+                    if (matchIndex !== -1) {
+                        focusItem(matchIndex);
+                    }
+                    // Clear typeahead string after 500ms
+                    typeaheadTimeoutRef.current = setTimeout(() => {
+                        setTypeaheadString("");
+                    }, 500);
+                }
+                break;
+        }
+    }, [
+        focusedIndex,
+        focusItem,
+        getMenuItems,
+        onOpenChange,
+        triggerRef,
+        typeaheadString,
+    ]);
+    // Click outside to close
+    useClickOutside(localRef, (e) => {
+        var _a;
+        // Skip if clicking on the trigger element
+        if (e.target === triggerRef.current ||
+            ((_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.target))) {
+            return;
+        }
+        onOpenChange(false);
+    });
+    // Focus first item when menu opens
+    useEffect(() => {
+        if (isOpen) {
+            // Focus first item after a small delay to allow render
+            requestAnimationFrame(() => {
+                const items = getMenuItems();
+                if (items.length > 0) {
+                    focusItem(0);
+                }
+            });
+        }
+        else {
+            setFocusedIndex(-1);
+            setTypeaheadString("");
+        }
+    }, [isOpen, getMenuItems, focusItem]);
+    // Combine refs
+    const handleRef = useCallback((el) => {
+        localRef.current = el;
+        if (typeof ref === "function") {
+            ref(el);
+        }
+        else if (ref) {
+            ref.current = el;
+        }
+        if (menuRef) {
+            menuRef.current = el;
+        }
+        if (portalContentRef &&
+            typeof portalContentRef === "object" &&
+            "current" in portalContentRef) {
+            portalContentRef.current =
+                el;
+        }
+    }, [ref, menuRef, portalContentRef]);
+    // Animation variants
+    const menuVariants = {
+        hidden: {
+            opacity: 0,
+            scale: 0.95,
+            y: -10,
+        },
+        visible: {
+            opacity: 1,
+            scale: 1,
+            y: 0,
+        },
+        exit: {
+            opacity: 0,
+            scale: 0.95,
+            y: -10,
+        },
+    };
+    // Extract DOM props to avoid type conflicts with Framer Motion
+    const { onAnimationStart, onAnimationEnd, onDrag, onDragStart, onDragEnd, ...domProps } = props;
+    const menuContent = (React__default.createElement(AnimatePresence, null, isOpen && (React__default.createElement(motion.div, { ref: handleRef, className: cn("fixed z-50", theme.menuStyle, horizontal ? "flex-row p-1" : "flex-col p-1", className), style: {
+            ...cssVariables,
+            top: `${position.top}px`,
+            left: `${position.left}px`,
+        }, role: "menu", "aria-label": ariaLabel || "Menu", "aria-orientation": horizontal ? "horizontal" : "vertical", tabIndex: -1, onKeyDown: handleKeyDown, variants: shouldReduceMotion || !animation ? {} : menuVariants, initial: shouldReduceMotion || !animation ? undefined : "hidden", animate: shouldReduceMotion || !animation ? undefined : "visible", exit: shouldReduceMotion || !animation ? undefined : "exit", transition: shouldReduceMotion || !animation
+            ? { duration: 0 }
+            : {
+                type: "spring",
+                stiffness: 500,
+                damping: 30,
+            }, "data-state": isOpen ? "open" : "closed", "data-placement": placement, ...domProps }, children))));
+    // Use portal if specified - wrap with dark class for dark mode support
+    if (portal && typeof document !== "undefined") {
+        return createPortal(React__default.createElement("div", { className: isDarkMode ? "dark" : undefined }, menuContent), document.body);
+    }
+    return menuContent;
+});
+DropdownMenu.displayName = "DropdownMenu";
+
+export { DropdownMenu };

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

@@ -0,0 +1,6 @@
+import React from "react";
+import { DropdownSectionProps } from "./Dropdown.types";
+/**
+ * DropdownSection component - groups related menu items
+ */
+export declare const DropdownSection: React.ForwardRefExoticComponent<DropdownSectionProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,18 @@
+import React__default from 'react';
+import { cn } from '../../../utils/cn.js';
+import { useDropdownContext } from './DropdownContext.js';
+
+/**
+ * DropdownSection component - groups related menu items
+ */
+const DropdownSection = React__default.forwardRef(({ children, className, title, showDivider = false, ...props }, ref) => {
+    const { theme } = useDropdownContext();
+    return (React__default.createElement(React__default.Fragment, null,
+        showDivider && React__default.createElement("div", { className: theme.separatorStyle, role: "separator" }),
+        React__default.createElement("div", { ref: ref, role: "group", "aria-label": title, className: cn(theme.sectionStyle, className), ...props },
+            title && (React__default.createElement("div", { className: theme.sectionTitleStyle, role: "presentation" }, title)),
+            children)));
+});
+DropdownSection.displayName = "DropdownSection";
+
+export { DropdownSection };

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

@@ -0,0 +1,6 @@
+import React from "react";
+import { DropdownSeparatorProps } from "./Dropdown.types";
+/**
+ * DropdownSeparator component - visual separator between menu items
+ */
+export declare const DropdownSeparator: React.ForwardRefExoticComponent<DropdownSeparatorProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,14 @@
+import React__default from 'react';
+import { cn } from '../../../utils/cn.js';
+import { useDropdownContext } from './DropdownContext.js';
+
+/**
+ * DropdownSeparator component - visual separator between menu items
+ */
+const DropdownSeparator = React__default.forwardRef(({ className, ...props }, ref) => {
+    const { theme } = useDropdownContext();
+    return (React__default.createElement("div", { ref: ref, role: "separator", className: cn(theme.separatorStyle, className), ...props }));
+});
+DropdownSeparator.displayName = "DropdownSeparator";
+
+export { DropdownSeparator };

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

@@ -0,0 +1,9 @@
+import React from "react";
+import { DropdownTriggerProps } from "./Dropdown.types";
+/**
+ * DropdownTrigger component - wraps the trigger element
+ */
+export declare const DropdownTrigger: {
+    ({ children, className }: DropdownTriggerProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+    displayName: string;
+};

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

@@ -0,0 +1,44 @@
+import React__default, { useCallback } from 'react';
+import { useDropdownContext } from './DropdownContext.js';
+
+/**
+ * DropdownTrigger component - wraps the trigger element
+ */
+const DropdownTrigger = ({ children, className }) => {
+    var _a;
+    const { isOpen, onOpenChange, triggerRef } = useDropdownContext();
+    const handleClick = useCallback(() => {
+        onOpenChange(!isOpen);
+    }, [isOpen, onOpenChange]);
+    // Clone the child element and add our props
+    const trigger = React__default.cloneElement(children, {
+        ref: (el) => {
+            triggerRef.current = el;
+            // Preserve any existing ref from the child
+            const childRef = children.ref;
+            if (typeof childRef === "function") {
+                childRef(el);
+            }
+            else if (childRef && typeof childRef === "object") {
+                childRef.current = el;
+            }
+        },
+        onClick: (e) => {
+            // Call our handler
+            handleClick();
+            // Preserve any existing onClick from the child
+            const childProps = children.props;
+            if (childProps === null || childProps === void 0 ? void 0 : childProps.onClick) {
+                childProps.onClick(e);
+            }
+        },
+        "aria-expanded": isOpen,
+        "aria-haspopup": "menu",
+        "data-state": isOpen ? "open" : "closed",
+        className: className || ((_a = children.props) === null || _a === void 0 ? void 0 : _a.className),
+    });
+    return trigger;
+};
+DropdownTrigger.displayName = "DropdownTrigger";
+
+export { DropdownTrigger };