flikkui 0.1.0-beta.11

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

@@ -0,0 +1,84 @@
+import { __rest, __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import React__default, { createContext, useCallback, useEffect, useContext } from 'react';
+import { createPortal } from 'react-dom';
+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);
+var useDrawerContext = function () {
+    var ctx = useContext(DrawerContext);
+    if (!ctx)
+        throw new Error("Drawer compound components must be used within <Drawer>");
+    return ctx;
+};
+var DrawerRoot = function (_a) {
+    var isOpen = _a.isOpen, onClose = _a.onClose, _b = _a.position, position = _b === void 0 ? "right" : _b, _c = _a.size, size = _c === void 0 ? "md" : _c, _d = _a.closeOnOverlayClick, closeOnOverlayClick = _d === void 0 ? true : _d, _e = _a.closeOnEsc, closeOnEsc = _e === void 0 ? true : _e, _f = _a.showCloseButton, showCloseButton = _f === void 0 ? true : _f, children = _a.children, className = _a.className, themeOverrides = _a.theme, props = __rest(_a, ["isOpen", "onClose", "position", "size", "closeOnOverlayClick", "closeOnEsc", "showCloseButton", "children", "className", "theme"]);
+    // Handle ESC key
+    var handleEscKey = useCallback(function (event) {
+        if (event.key === "Escape" && closeOnEsc) {
+            onClose();
+        }
+    }, [closeOnEsc, onClose]);
+    // Handle overlay click
+    var handleOverlayClick = useCallback(function (event) {
+        if (event.target === event.currentTarget && closeOnOverlayClick) {
+            onClose();
+        }
+    }, [closeOnOverlayClick, onClose]);
+    // Setup event listeners
+    useEffect(function () {
+        if (isOpen) {
+            document.addEventListener("keydown", handleEscKey);
+            // Prevent body scroll
+            document.body.style.overflow = "hidden";
+            return function () {
+                document.removeEventListener("keydown", handleEscKey);
+                document.body.style.overflow = "unset";
+            };
+        }
+    }, [isOpen, handleEscKey]);
+    // Merge theme with overrides
+    var theme = __assign(__assign({}, drawerTheme), (themeOverrides || {}));
+    // Context value
+    var contextValue = {
+        isOpen: isOpen,
+        onClose: onClose,
+        position: position,
+        size: size,
+        closeOnOverlayClick: closeOnOverlayClick,
+        closeOnEsc: closeOnEsc,
+        showCloseButton: showCloseButton,
+        theme: theme,
+    };
+    // Get size variant based on position
+    var isHorizontal = position === "left" || position === "right";
+    var sizeVariant = isHorizontal
+        ? drawerSizeVariants.horizontal[size]
+        : drawerSizeVariants.vertical[size];
+    // Use different positioning for full-width/height drawers
+    var positionVariant = size === "full"
+        ? drawerPositionVariantsFullWidth[position]
+        : drawerPositionVariantsWithMargin[position];
+    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(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
+    return createPortal(drawerContent, document.body);
+};
+DrawerRoot.displayName = "Drawer";
+// Attach compound subcomponents
+var Drawer = Object.assign(DrawerRoot, {
+    Header: DrawerHeader,
+    Content: DrawerContent,
+    Footer: DrawerFooter,
+});
+
+export { Drawer, useDrawerContext };

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

@@ -0,0 +1,32 @@
+import { DrawerTheme } from "./Drawer.types";
+export declare const drawerTheme: DrawerTheme;
+export declare const drawerPositionVariants: {
+    left: string;
+    right: string;
+    top: string;
+    bottom: string;
+};
+export declare const drawerPositionVariantsWithMargin: {
+    left: string;
+    right: string;
+    top: string;
+    bottom: string;
+};
+export declare const drawerPositionVariantsFullWidth: {
+    left: string;
+    right: string;
+    top: string;
+    bottom: string;
+};
+export declare const drawerSizeVariants: {
+    horizontal: {
+        md: string;
+        lg: string;
+        full: string;
+    };
+    vertical: {
+        md: string;
+        lg: string;
+        full: string;
+    };
+};

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

@@ -0,0 +1,40 @@
+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",
+    content: "h-full flex flex-col",
+    header: "flex items-center justify-between p-4 border-b border-[var(--color-border)] shrink-0",
+    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",
+};
+// Position variants with margin support
+var drawerPositionVariantsWithMargin = {
+    left: "left-6 top-6 h-[calc(100vh-3rem)]", // 100vh - 1.5rem top - 1.5rem bottom
+    right: "right-6 top-6 h-[calc(100vh-3rem)]",
+    top: "top-6 left-6 w-[calc(100vw-3rem)]",
+    bottom: "bottom-6 left-6 w-[calc(100vw-3rem)]",
+};
+// Position variants for full-width/height drawers with consistent margins
+var drawerPositionVariantsFullWidth = {
+    left: "left-6 top-6 right-6 bottom-6", // Consistent margins on all sides
+    right: "right-6 top-6 left-6 bottom-6",
+    top: "top-6 left-6 right-6 bottom-6",
+    bottom: "bottom-6 left-6 right-6 top-6",
+};
+// Size variants based on position
+var drawerSizeVariants = {
+    // Horizontal drawers (left/right)
+    horizontal: {
+        md: "w-[min(420px,90vw)]", // 420px on large screens, max 90% on small
+        lg: "w-[min(560px,85vw)]", // 560px on large screens, max 85% on small
+        full: "w-full", // Full width - positioning handles margins
+    },
+    // Vertical drawers (top/bottom)
+    vertical: {
+        md: "h-[min(320px,90vh)]", // 320px on large screens, max 90% on small
+        lg: "h-[min(448px,85vh)]", // 448px on large screens, max 85% on small
+        full: "h-full", // Full height - positioning handles margins
+    },
+};
+
+export { drawerPositionVariantsFullWidth, drawerPositionVariantsWithMargin, drawerSizeVariants, drawerTheme };

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

@@ -0,0 +1,56 @@
+import React from "react";
+export type DrawerPosition = "left" | "right" | "top" | "bottom";
+export type DrawerSize = "md" | "lg" | "full";
+export interface DrawerTheme {
+    overlay: string;
+    container: string;
+    content: string;
+    header: string;
+    body: string;
+    footer: string;
+    closeButton: string;
+}
+export interface DrawerThemeOverrides {
+    overlay?: string;
+    container?: string;
+    content?: string;
+    header?: string;
+    body?: string;
+    footer?: string;
+    closeButton?: string;
+}
+export interface DrawerContextValue {
+    isOpen: boolean;
+    onClose: () => void;
+    position: DrawerPosition;
+    size: DrawerSize;
+    closeOnOverlayClick: boolean;
+    closeOnEsc: boolean;
+    showCloseButton: boolean;
+    theme: DrawerTheme;
+}
+export interface DrawerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onClose' | 'onAnimationStart' | 'onDragStart'> {
+    isOpen: boolean;
+    onClose: () => void;
+    position?: DrawerPosition;
+    size?: DrawerSize;
+    closeOnOverlayClick?: boolean;
+    closeOnEsc?: boolean;
+    showCloseButton?: boolean;
+    children: React.ReactNode;
+    className?: string;
+    theme?: DrawerThemeOverrides;
+}
+export interface DrawerHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+    showCloseButton?: boolean;
+    className?: string;
+}
+export interface DrawerContentProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+    className?: string;
+}
+export interface DrawerFooterProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+    className?: string;
+}

package/dist/components/core/Drawer/DrawerContent.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+import { DrawerContentProps } from "./Drawer.types";
+export declare const DrawerContent: {
+    ({ children, className, ...props }: DrawerContentProps): React.JSX.Element;
+    displayName: string;
+};

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

@@ -0,0 +1,13 @@
+import { __rest, __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import React__default from 'react';
+import { cn } from '../../../utils/cn.js';
+import { useDrawerContext } from './Drawer.js';
+
+var DrawerContent = function (_a) {
+    var children = _a.children, className = _a.className, props = __rest(_a, ["children", "className"]);
+    var theme = useDrawerContext().theme;
+    return (React__default.createElement("div", __assign({ className: cn(theme.body, className) }, props), children));
+};
+DrawerContent.displayName = "Drawer.Content";
+
+export { DrawerContent };

package/dist/components/core/Drawer/DrawerFooter.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+import { DrawerFooterProps } from "./Drawer.types";
+export declare const DrawerFooter: {
+    ({ children, className, ...props }: DrawerFooterProps): React.JSX.Element;
+    displayName: string;
+};

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

@@ -0,0 +1,13 @@
+import { __rest, __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import React__default from 'react';
+import { cn } from '../../../utils/cn.js';
+import { useDrawerContext } from './Drawer.js';
+
+var DrawerFooter = function (_a) {
+    var children = _a.children, className = _a.className, props = __rest(_a, ["children", "className"]);
+    var theme = useDrawerContext().theme;
+    return (React__default.createElement("div", __assign({ className: cn(theme.footer, className) }, props), children));
+};
+DrawerFooter.displayName = "Drawer.Footer";
+
+export { DrawerFooter };

package/dist/components/core/Drawer/DrawerHeader.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+import { DrawerHeaderProps } from "./Drawer.types";
+export declare const DrawerHeader: {
+    ({ children, showCloseButton, className, ...props }: DrawerHeaderProps): React.JSX.Element;
+    displayName: string;
+};

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

@@ -0,0 +1,18 @@
+import { __rest, __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import React__default from 'react';
+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"]);
+    var _b = useDrawerContext(), onClose = _b.onClose, contextShowCloseButton = _b.showCloseButton, theme = _b.theme;
+    var shouldShowCloseButton = showCloseButton !== null && showCloseButton !== void 0 ? showCloseButton : contextShowCloseButton;
+    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" })))));
+};
+DrawerHeader.displayName = "Drawer.Header";
+
+export { DrawerHeader };

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

@@ -0,0 +1,2 @@
+export { Drawer } from "./Drawer";
+export type { DrawerProps, DrawerPosition, DrawerSize, DrawerThemeOverrides } from "./Drawer.types";

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

@@ -0,0 +1,15 @@
+import React from "react";
+import { DropdownProps } from "./Dropdown.types";
+export declare const Dropdown: {
+    ({ children, className, isOpen: controlledIsOpen, defaultIsOpen, onOpenChange, placement, offset, closeOnSelect, disabledKeys, selectedKeys: controlledSelectedKeys, defaultSelectedKeys, selectionMode, onAction, onSelectionChange, theme: themeOverrides, ...props }: DropdownProps): React.JSX.Element;
+    displayName: string;
+} & {
+    Trigger: {
+        ({ children, className }: import("./Dropdown.types").DropdownTriggerProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+        displayName: string;
+    };
+    Menu: React.ForwardRefExoticComponent<import("./Dropdown.types").DropdownMenuProps & React.RefAttributes<HTMLDivElement>>;
+    Item: React.ForwardRefExoticComponent<import("./Dropdown.types").DropdownItemProps & React.RefAttributes<HTMLDivElement>>;
+    Section: React.ForwardRefExoticComponent<import("./Dropdown.types").DropdownSectionProps & React.RefAttributes<HTMLDivElement>>;
+    Separator: React.ForwardRefExoticComponent<import("./Dropdown.types").DropdownSeparatorProps & React.RefAttributes<HTMLDivElement>>;
+};

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

@@ -0,0 +1,92 @@
+import { __rest, __assign } from '../../../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';
+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>
+ * ```
+ */
+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"]);
+    // State for uncontrolled open
+    var _j = useState(defaultIsOpen), uncontrolledIsOpen = _j[0], setUncontrolledIsOpen = _j[1];
+    // State for uncontrolled selection
+    var _k = useState(new Set(defaultSelectedKeys)), uncontrolledSelectedKeys = _k[0], setUncontrolledSelectedKeys = _k[1];
+    // Determine if controlled or uncontrolled
+    var isControlledOpen = controlledIsOpen !== undefined;
+    var isOpen = isControlledOpen ? controlledIsOpen : uncontrolledIsOpen;
+    var isControlledSelection = controlledSelectedKeys !== undefined;
+    var selectedKeys = isControlledSelection
+        ? new Set(controlledSelectedKeys)
+        : uncontrolledSelectedKeys;
+    // Refs for positioning
+    var triggerRef = useRef(null);
+    var menuRef = useRef(null);
+    // Handle open state changes
+    var handleOpenChange = useCallback(function (value) {
+        if (!isControlledOpen) {
+            setUncontrolledIsOpen(value);
+        }
+        onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(value);
+    }, [isControlledOpen, onOpenChange]);
+    // Handle selection changes
+    var handleSelectionChange = useCallback(function (keys) {
+        if (!isControlledSelection) {
+            setUncontrolledSelectedKeys(keys);
+        }
+        onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange(Array.from(keys));
+    }, [isControlledSelection, onSelectionChange]);
+    // Merge theme with overrides
+    var theme = __assign(__assign({}, dropdownTheme), (themeOverrides || {}));
+    // Convert disabled keys array to Set
+    var disabledKeysSet = new Set(disabledKeys);
+    // Context value
+    var contextValue = {
+        isOpen: isOpen,
+        onOpenChange: handleOpenChange,
+        triggerRef: triggerRef,
+        menuRef: menuRef,
+        placement: placement,
+        offset: offset,
+        closeOnSelect: closeOnSelect,
+        disabledKeys: disabledKeysSet,
+        selectedKeys: selectedKeys,
+        selectionMode: selectionMode,
+        onAction: onAction,
+        onSelectionChange: handleSelectionChange,
+        theme: theme,
+    };
+    return (React__default.createElement(DropdownContext.Provider, { value: contextValue },
+        React__default.createElement("div", __assign({ className: cn("dropdown", className), "data-state": isOpen ? "open" : "closed" }, props), children)));
+};
+DropdownRoot.displayName = "Dropdown";
+// Export as a unified component with sub-components
+var 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,9 @@
+export interface DropdownTheme {
+    menuStyle: string;
+    itemBaseStyle: string;
+    itemDangerStyle: string;
+    itemFocusStyle: string;
+    sectionTitleStyle: string;
+    sectionStyle: string;
+}
+export declare const dropdownTheme: DropdownTheme;

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

@@ -0,0 +1,16 @@
+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",
+    // 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",
+    // Danger item styling (e.g., Delete actions)
+    itemDangerStyle: "text-[var(--color-danger)] hover:bg-[var(--color-danger)] 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",
+    // 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",
+};
+
+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';
+
+var DropdownContext = createContext(undefined);
+var useDropdownContext = function () {
+    var 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,77 @@
+import { __rest, __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import React__default, { useState, useCallback } from 'react';
+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
+ */
+var DropdownItem = React__default.forwardRef(function (_a, ref) {
+    var itemKey = _a.itemKey, children = _a.children, className = _a.className, startContent = _a.startContent, endContent = _a.endContent, description = _a.description, shortcut = _a.shortcut, _b = _a.isDisabled, isDisabled = _b === void 0 ? false : _b, _c = _a.isDanger, isDanger = _c === void 0 ? false : _c, onAction = _a.onAction, props = __rest(_a, ["itemKey", "children", "className", "startContent", "endContent", "description", "shortcut", "isDisabled", "isDanger", "onAction"]);
+    var _d = useDropdownContext(), closeOnSelect = _d.closeOnSelect, onOpenChange = _d.onOpenChange, disabledKeys = _d.disabledKeys, selectedKeys = _d.selectedKeys, selectionMode = _d.selectionMode, contextOnAction = _d.onAction, onSelectionChange = _d.onSelectionChange, theme = _d.theme;
+    var _e = useState(false), isFocused = _e[0], setIsFocused = _e[1];
+    // Check if item is disabled
+    var disabled = isDisabled || disabledKeys.has(itemKey);
+    // Check if item is selected
+    var isSelected = selectedKeys.has(itemKey);
+    // Handle item click/activation
+    var handleClick = useCallback(function () {
+        if (disabled)
+            return;
+        // Handle selection if selection mode is enabled
+        if (selectionMode !== "none" && onSelectionChange) {
+            var 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)
+    var handleKeyDown = useCallback(function (e) {
+        if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            handleClick();
+        }
+    }, [handleClick]);
+    return (React__default.createElement("div", __assign({ 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: function () { return setIsFocused(true); }, onBlur: function () { return 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: "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)]" })))))));
+});
+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>>;