@flikk/ui 1.0.0-beta.1

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

@@ -0,0 +1,47 @@
+const drawerTheme = {
+    // Note: overlay styling is now handled by the shared Overlay component
+    overlay: "",
+    container: "fixed bg-white shadow-2xl shadow-black/30 " +
+        "border border-[var(--color-border)] ring-4 ring-white/10 " +
+        "flex flex-col overflow-hidden rounded-[var(--drawer-radius)] " +
+        "dark:bg-[var(--color-background-secondary)] dark:ring-white/5",
+    content: "h-full flex flex-col",
+    header: "flex items-start justify-between p-4 border-b border-[var(--color-border)] shrink-0 text-[var(--color-text-primary)] gap-4",
+    headerContent: "flex items-start gap-3 flex-1 min-w-0",
+    title: "text-base font-semibold leading-6 text-[var(--color-text-primary)]",
+    description: "text-sm text-[var(--color-text-secondary)] mt-0.5",
+    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 " +
+        "dark:border-[var(--color-neutral-700)]",
+};
+// Position variants with margin support
+const 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
+const 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
+const 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,68 @@
+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;
+    headerContent: string;
+    title: string;
+    description: string;
+    body: string;
+    footer: string;
+}
+export interface DrawerThemeOverrides {
+    overlay?: string;
+    container?: string;
+    content?: string;
+    header?: string;
+    headerContent?: string;
+    title?: string;
+    description?: string;
+    body?: string;
+    footer?: string;
+}
+export interface DrawerContextValue {
+    isOpen: boolean;
+    onClose: () => void;
+    position: DrawerPosition;
+    size: DrawerSize;
+    closeOnOverlayClick: boolean;
+    closeOnEsc: boolean;
+    theme: DrawerTheme;
+}
+export interface DrawerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onClose" | "onAnimationStart" | "onDragStart" | "title"> {
+    isOpen: boolean;
+    onClose: () => void;
+    /** Title text displayed in the drawer header */
+    title?: string;
+    /** Description text displayed below the title */
+    description?: string;
+    /** Icon displayed to the left of the title/description */
+    icon?: React.ReactNode;
+    position?: DrawerPosition;
+    size?: DrawerSize;
+    closeOnOverlayClick?: boolean;
+    closeOnEsc?: boolean;
+    showCloseButton?: boolean;
+    children: React.ReactNode;
+    className?: string;
+    theme?: DrawerThemeOverrides;
+    /**
+     * Scale factor for the background content when the drawer is open.
+     * Creates an iOS-style modal presentation where the page scales down.
+     * Requires a wrapper element with `data-flik-drawer-wrapper` attribute.
+     * Set to `1` to disable scaling.
+     * @default 0.94
+     */
+    scale?: number;
+}
+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,5 @@
+import { DrawerContentProps } from "./Drawer.types";
+export declare const DrawerContent: {
+    ({ children, className, ...props }: DrawerContentProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

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

@@ -0,0 +1,11 @@
+import { jsx } from 'react/jsx-runtime';
+import { cn } from '../../../utils/cn.js';
+import { useDrawerContext } from './Drawer.js';
+
+const DrawerContent = ({ children, className, ...props }) => {
+    const { theme } = useDrawerContext();
+    return (jsx("div", { className: cn(theme.body, className), ...props, children: children }));
+};
+DrawerContent.displayName = "Drawer.Content";
+
+export { DrawerContent };

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

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

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

@@ -0,0 +1,11 @@
+import { jsx } from 'react/jsx-runtime';
+import { cn } from '../../../utils/cn.js';
+import { useDrawerContext } from './Drawer.js';
+
+const DrawerFooter = ({ children, className, ...props }) => {
+    const { theme } = useDrawerContext();
+    return (jsx("div", { className: cn(theme.footer, className), ...props, children: children }));
+};
+DrawerFooter.displayName = "Drawer.Footer";
+
+export { DrawerFooter };

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, darkMode, ...props }: DropdownProps): import("react/jsx-runtime").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,93 @@
+import { jsx } from 'react/jsx-runtime';
+import { 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, darkMode = false, ...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 (jsx(DropdownContext.Provider, { value: contextValue, children: jsx("div", { className: cn("dropdown", darkMode && "dark", className), "data-state": isOpen ? "open" : "closed", ...props, children: 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,20 @@
+import { menuItemTheme } from '../MenuItem/MenuItem.theme.js';
+
+const dropdownTheme = {
+    // Menu container - similar to Popover but with menu-specific styling
+    menuStyle: "min-w-[200px] max-h-[400px] overflow-y-auto rounded-[var(--dropdown-radius)] border border-[var(--color-border)] bg-white shadow-real-xl focus:outline-none flex disabled:cursor-not-allowed " +
+        "dark:bg-[var(--color-background-secondary)]",
+    // Delegate item styles to shared MenuItem theme
+    itemBaseStyle: menuItemTheme.baseStyle,
+    itemDangerStyle: menuItemTheme.dangerStyle,
+    itemFocusStyle: menuItemTheme.focusStyle,
+    // 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,91 @@
+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>;
+    /**
+     * Force dark mode styling for the component. Use when placing the component
+     * on a dark background while the page is in light mode. This applies the
+     * 'dark' class to the container, making text, borders, and other elements
+     * use light colors for visibility.
+     * @default false
+     */
+    darkMode?: boolean;
+}
+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,7 @@
+import React from "react";
+import { DropdownItemProps } from "./Dropdown.types";
+/**
+ * DropdownItem component - individual menu item for action menus.
+ * Built on shared MenuItem, adds selection mode and Dropdown context integration.
+ */
+export declare const DropdownItem: React.ForwardRefExoticComponent<DropdownItemProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,74 @@
+import { jsx } from 'react/jsx-runtime';
+import React__default, { useCallback } from 'react';
+import { CheckIcon } from '@heroicons/react/16/solid';
+import { cn } from '../../../utils/cn.js';
+import { useDropdownContext } from './DropdownContext.js';
+import { MenuItem } from '../MenuItem/MenuItem.js';
+
+/**
+ * DropdownItem component - individual menu item for action menus.
+ * Built on shared MenuItem, adds selection mode and Dropdown context integration.
+ */
+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();
+    // 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 handleActivate = useCallback(() => {
+        if (disabled)
+            return;
+        // Handle selection if selection mode is enabled
+        if (selectionMode !== "none" && onSelectionChange) {
+            const newSelectedKeys = new Set(selectedKeys);
+            if (selectionMode === "single") {
+                newSelectedKeys.clear();
+                newSelectedKeys.add(itemKey);
+            }
+            else if (selectionMode === "multiple") {
+                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,
+    ]);
+    // Determine the appropriate ARIA role based on selection mode
+    const itemRole = selectionMode === "single"
+        ? "menuitemradio"
+        : selectionMode === "multiple"
+            ? "menuitemcheckbox"
+            : "menuitem";
+    // Build end content: user's endContent OR selection checkmark
+    const resolvedEndContent = endContent ||
+        (selectionMode !== "none" ? (jsx("div", { className: cn("flex items-center justify-center flex-shrink-0 w-5 h-5"), children: isSelected && (jsx(CheckIcon, { className: "size-4 text-[var(--color-text-secondary)]" })) })) : undefined);
+    return (jsx(MenuItem, { ref: ref, role: itemRole, disabled: disabled, isDanger: isDanger, startContent: startContent, endContent: resolvedEndContent, description: description, shortcut: shortcut, onActivate: handleActivate, "data-selected": isSelected, ...(selectionMode !== "none" ? { "aria-checked": isSelected } : {}), className: className, theme: {
+            baseStyle: theme.itemBaseStyle,
+            dangerStyle: theme.itemDangerStyle,
+            focusStyle: theme.itemFocusStyle,
+        }, ...props, children: children }));
+});
+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>>;