@flikk/ui 1.0.0-beta.2 → 1.0.0-beta.21

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

@@ -0,0 +1,6 @@
+import React from "react";
+import { ContextMenuBodyProps } from "./ContextMenu.types";
+/**
+ * ContextMenuBody - Renders the menu at cursor position with keyboard navigation
+ */
+export declare const ContextMenuBody: React.ForwardRefExoticComponent<ContextMenuBodyProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/core/ContextMenu/{ContextMenuContent.js → ContextMenuBody.js}

@@ -7,9 +7,9 @@ import { useContextMenuContext } from './ContextMenuContext.js';
 import { useIsClient } from '../../../hooks/useIsClient.js';
 
 /**
- * ContextMenuContent - Renders the menu at cursor position with keyboard navigation
+ * ContextMenuBody - Renders the menu at cursor position with keyboard navigation
  */
-const ContextMenuContent = React__default.forwardRef(({ children, className, animation = true, "aria-label": ariaLabel, ...props }, ref) => {
+const ContextMenuBody = React__default.forwardRef(({ children, className, animation = true, "aria-label": ariaLabel, ...props }, ref) => {
     const { isOpen, onOpenChange, cursorPosition, contentRef, triggerRef, theme, } = useContextMenuContext();
     const shouldReduceMotion = useReducedMotion();
     const isClient = useIsClient();
@@ -192,6 +192,6 @@ const ContextMenuContent = React__default.forwardRef(({ children, className, ani
         ? createPortal(menuContent, document.body)
         : null;
 });
-ContextMenuContent.displayName = "ContextMenuContent";
+ContextMenuBody.displayName = "ContextMenu.Body";
 
-export { ContextMenuContent };
+export { ContextMenuBody };

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

@@ -9,7 +9,7 @@ import { MenuItem } from '../MenuItem/MenuItem.js';
  * ContextMenuItem - Individual menu item with optional check indicator.
  * Built on shared MenuItem, adds checked state and ContextMenu context integration.
  */
-const ContextMenuItem = React__default.forwardRef(({ children, className, checked = false, disabled = false, isDanger = false, shortcut, onSelect, startContent, endContent, description, ...props }, ref) => {
+const ContextMenuItem = React__default.forwardRef(({ children, className, checked = false, disabled = false, isDanger = false, shortcut, onSelect, startContent, endContent, subtitle, ...props }, ref) => {
     const { onOpenChange, theme } = useContextMenuContext();
     const handleActivate = useCallback(() => {
         if (disabled)
@@ -22,8 +22,8 @@ const ContextMenuItem = React__default.forwardRef(({ children, className, checke
     const resolvedStartContent = hasPrefix ? (jsxs(Fragment, { children: [checked && (jsx(CheckIcon, { className: theme.itemCheckedStyle, "aria-hidden": "true" })), startContent] })) : undefined;
     // Build end content: user's endContent OR shortcut display
     const resolvedEndContent = endContent ||
-        (shortcut ? (jsx("span", { className: "text-xs text-[var(--color-text-muted)] font-mono", children: shortcut })) : undefined);
-    return (jsx(MenuItem, { ref: ref, role: "menuitem", disabled: disabled, isDanger: isDanger, startContent: resolvedStartContent, endContent: resolvedEndContent, description: description, onActivate: handleActivate, "data-checked": checked, "aria-checked": checked ? "true" : undefined, className: cn(checked && "pl-8", className), theme: {
+        (shortcut ? (jsx("span", { className: "text-sm text-[var(--color-text-muted)] font-mono", children: shortcut })) : undefined);
+    return (jsx(MenuItem, { ref: ref, role: "menuitem", disabled: disabled, isDanger: isDanger, startContent: resolvedStartContent, endContent: resolvedEndContent, subtitle: subtitle, onActivate: handleActivate, "data-checked": checked, "aria-checked": checked ? "true" : undefined, className: cn(checked && "pl-8", className), theme: {
             baseStyle: theme.itemStyle,
             dangerStyle: theme.itemDangerStyle,
             focusStyle: theme.itemFocusStyle,

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

@@ -0,0 +1,6 @@
+import React from "react";
+import { ContextMenuSubBodyProps } from "./ContextMenu.types";
+/**
+ * ContextMenuSubBody - Submenu content positioned to the right of trigger
+ */
+export declare const ContextMenuSubBody: React.ForwardRefExoticComponent<ContextMenuSubBodyProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/core/ContextMenu/{ContextMenuSubContent.js → ContextMenuSubBody.js}

@@ -7,9 +7,9 @@ import { useContextMenuContext, useSubMenuContext } from './ContextMenuContext.j
 import { useIsClient } from '../../../hooks/useIsClient.js';
 
 /**
- * ContextMenuSubContent - Submenu content positioned to the right of trigger
+ * ContextMenuSubBody - Submenu content positioned to the right of trigger
  */
-const ContextMenuSubContent = React__default.forwardRef(({ children, className, animation = true, ...props }, ref) => {
+const ContextMenuSubBody = React__default.forwardRef(({ children, className, animation = true, ...props }, ref) => {
     const { theme } = useContextMenuContext();
     const { isOpen, triggerRef, onOpenChange } = useSubMenuContext();
     const shouldReduceMotion = useReducedMotion();
@@ -101,6 +101,6 @@ const ContextMenuSubContent = React__default.forwardRef(({ children, className,
         ? createPortal(submenuContent, document.body)
         : null;
 });
-ContextMenuSubContent.displayName = "ContextMenuSubContent";
+ContextMenuSubBody.displayName = "ContextMenu.SubBody";
 
-export { ContextMenuSubContent };
+export { ContextMenuSubBody };

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

@@ -14,11 +14,10 @@ const ContextMenuTrigger = React__default.forwardRef(({ children, className, dis
         // Prevent default browser context menu
         e.preventDefault();
         e.stopPropagation();
-        // Store cursor position BEFORE opening menu
-        e.currentTarget.__cursorPosition = {
-            x: e.clientX,
-            y: e.clientY,
-        };
+        // Store cursor position on trigger element via data attributes
+        const target = e.currentTarget;
+        target.dataset.cursorX = String(e.clientX);
+        target.dataset.cursorY = String(e.clientY);
         // Now open the menu with position available
         onOpenChange(true);
     }, [disabled, onOpenChange]);
@@ -44,6 +43,6 @@ const ContextMenuTrigger = React__default.forwardRef(({ children, className, dis
         "data-disabled": disabled,
     });
 });
-ContextMenuTrigger.displayName = "ContextMenuTrigger";
+ContextMenuTrigger.displayName = "ContextMenu.Trigger";
 
 export { ContextMenuTrigger };

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

@@ -1,4 +1,4 @@
 export { ContextMenu } from "./ContextMenu";
-export type { ContextMenuProps, ContextMenuTriggerProps, ContextMenuContentProps, ContextMenuItemProps, ContextMenuSubProps, ContextMenuSubTriggerProps, ContextMenuSubContentProps, ContextMenuSeparatorProps, ContextMenuLabelProps, ContextMenuThemeOverrides, } from "./ContextMenu.types";
+export type { ContextMenuProps, ContextMenuTriggerProps, ContextMenuBodyProps, ContextMenuItemProps, ContextMenuSubProps, ContextMenuSubTriggerProps, ContextMenuSubBodyProps, ContextMenuSeparatorProps, ContextMenuLabelProps, ContextMenuThemeOverrides, } from "./ContextMenu.types";
 export type { ContextMenuTheme } from "./ContextMenu.theme";
 export { contextMenuTheme } from "./ContextMenu.theme";

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

@@ -1,11 +1,23 @@
 import { DrawerProps, DrawerContextValue } from "./Drawer.types";
 export declare const useDrawerContext: () => DrawerContextValue;
 export declare const Drawer: {
-    ({ isOpen, onClose, title, description, icon, position, size, closeOnOverlayClick, closeOnEsc, showCloseButton, children, className, theme: themeOverrides, scale, ...props }: DrawerProps): import("react/jsx-runtime").JSX.Element;
+    ({ isOpen, onClose, title, subtitle, icon, position, size, closeOnOverlayClick, closeOnEsc, showCloseButton, children, className, theme: themeOverrides, scale, closeOnBack, ...props }: DrawerProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 } & {
-    Content: {
-        ({ children, className, ...props }: import("./Drawer.types").DrawerContentProps): import("react/jsx-runtime").JSX.Element;
+    Header: {
+        ({ children, icon, showCloseButton, className, ...props }: import("./Drawer.types").DrawerHeaderProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Title: {
+        ({ children, className, ...props }: import("./Drawer.types").DrawerTitleProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Subtitle: {
+        ({ children, className, ...props }: import("./Drawer.types").DrawerSubtitleProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Body: {
+        ({ children, className, ...props }: import("./Drawer.types").DrawerBodyProps): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
     Footer: {

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

@@ -1,15 +1,37 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { createContext, useId, useMemo, useContext } from 'react';
+import React__default, { createContext, useId, useMemo, useRef, useEffect, useContext } from 'react';
 import { cn } from '../../../utils/cn.js';
 import { useScaleBackground } from '../../../hooks/useScaleBackground.js';
-import { XMarkIcon } from '@heroicons/react/24/outline';
 import { Overlay } from '../../effects/Overlay/Overlay.js';
 import { drawerTheme, drawerSizeVariants, drawerPositionVariantsFullWidth, drawerPositionVariantsWithMargin } from './Drawer.theme.js';
 import { drawerOverlayAnimations, getDrawerContentAnimations } from './Drawer.animations.js';
-import { DrawerContent } from './DrawerContent.js';
+import { DrawerHeader } from './DrawerHeader.js';
+import { DrawerTitle } from './DrawerTitle.js';
+import { DrawerSubtitle } from './DrawerSubtitle.js';
+import { DrawerBody } from './DrawerBody.js';
 import { DrawerFooter } from './DrawerFooter.js';
-import { Button } from '../Button/Button.js';
 
+/** Manages browser history so the back button closes the drawer instead of navigating. */
+function useCloseOnBack(isOpen, onClose, enabled) {
+    const closedByPopstate = useRef(false);
+    useEffect(() => {
+        if (!enabled || !isOpen)
+            return;
+        closedByPopstate.current = false;
+        history.pushState({ flikDrawer: true }, "");
+        const handlePopstate = () => {
+            closedByPopstate.current = true;
+            onClose();
+        };
+        window.addEventListener("popstate", handlePopstate);
+        return () => {
+            window.removeEventListener("popstate", handlePopstate);
+            if (!closedByPopstate.current) {
+                history.back();
+            }
+        };
+    }, [isOpen, onClose, enabled]);
+}
 // Create context for Drawer components
 const DrawerContext = createContext(undefined);
 const useDrawerContext = () => {
@@ -18,13 +40,15 @@ const useDrawerContext = () => {
         throw new Error("Drawer compound components must be used within <Drawer>");
     return ctx;
 };
-const DrawerRoot = ({ isOpen, onClose, title, description, icon, position = "right", size = "md", closeOnOverlayClick = true, closeOnEsc = true, showCloseButton = true, children, className, theme: themeOverrides, scale = 0.94, ...props }) => {
+const DrawerRoot = ({ isOpen, onClose, title, subtitle, icon, position = "right", size = "md", closeOnOverlayClick = true, closeOnEsc = true, showCloseButton = true, children, className, theme: themeOverrides, scale = 0.94, closeOnBack = false, ...props }) => {
+    // Close drawer on browser back button
+    useCloseOnBack(isOpen, onClose, closeOnBack);
     // iOS-style scale background effect
     useScaleBackground({ isOpen, scale, position });
     // Generate unique IDs for ARIA linkage
     const id = useId();
     const titleId = `${id}-title`;
-    const descriptionId = `${id}-description`;
+    const subtitleId = `${id}-subtitle`;
     // Merge theme with overrides
     const theme = useMemo(() => ({
         ...drawerTheme,
@@ -38,28 +62,59 @@ const DrawerRoot = ({ isOpen, onClose, title, description, icon, position = "rig
         size,
         closeOnOverlayClick,
         closeOnEsc,
+        showCloseButton,
         theme,
-    }), [isOpen, onClose, position, size, closeOnOverlayClick, closeOnEsc, theme]);
-    // Get size variant based on position
+        titleId,
+        subtitleId,
+    }), [
+        isOpen,
+        onClose,
+        position,
+        size,
+        closeOnOverlayClick,
+        closeOnEsc,
+        showCloseButton,
+        theme,
+        titleId,
+        subtitleId,
+    ]);
+    // Detect if children contain a compound Drawer.Header
+    const hasCompoundHeader = React__default.Children.toArray(children).some((child) => {
+        var _a;
+        return React__default.isValidElement(child) &&
+            ((_a = child.type) === null || _a === void 0 ? void 0 : _a.displayName) === "Drawer.Header";
+    });
+    // Auto-generate header when using prop shorthand (backward compat)
+    const shouldAutoRenderHeader = !hasCompoundHeader && (title || showCloseButton);
+    // Detect whether size is a preset token or an arbitrary Tailwind class
+    const SIZE_TOKENS = ["sm", "md", "lg", "full"];
+    const isSizeToken = SIZE_TOKENS.includes(size);
+    // Get size variant based on position (only for preset tokens)
     const isHorizontal = position === "left" || position === "right";
-    const sizeVariant = isHorizontal
-        ? drawerSizeVariants.horizontal[size]
-        : drawerSizeVariants.vertical[size];
+    const sizeVariant = isSizeToken
+        ? isHorizontal
+            ? drawerSizeVariants.horizontal[size]
+            : drawerSizeVariants.vertical[size]
+        : size; // treat arbitrary string as a raw Tailwind class
     // Use different positioning for full-width/height drawers
     const positionVariant = size === "full"
         ? drawerPositionVariantsFullWidth[position]
         : drawerPositionVariantsWithMargin[position];
-    // Header renders when title exists or close button is shown
-    const shouldRenderHeader = title || showCloseButton;
-    return (jsx(Overlay, { isOpen: isOpen, onClose: onClose, closeOnOverlayClick: closeOnOverlayClick, closeOnEsc: closeOnEsc, position: "none", role: "dialog", ariaModal: true, ariaLabelledBy: title ? titleId : undefined, ariaDescribedBy: description ? descriptionId : undefined, contentClassName: cn(theme.container, positionVariant, size !== "full" && sizeVariant, className), animations: {
+    return (jsx(Overlay, { isOpen: isOpen, onClose: onClose, closeOnOverlayClick: closeOnOverlayClick, closeOnEsc: closeOnEsc, position: "none", role: "dialog", ariaModal: true, ariaLabelledBy: titleId, ariaDescribedBy: subtitleId, contentClassName: cn(theme.container, positionVariant, isSizeToken && size !== "full" && sizeVariant, !isSizeToken && sizeVariant, // raw Tailwind class
+        className), animations: {
             overlay: drawerOverlayAnimations,
             content: getDrawerContentAnimations(position),
-        }, ...props, children: jsx(DrawerContext.Provider, { value: contextValue, children: jsxs("div", { className: theme.content, children: [shouldRenderHeader && (jsxs("div", { className: cn(theme.header), children: [jsxs("div", { className: cn(theme.headerContent), children: [icon && title && (jsx("div", { className: "flex-shrink-0 text-[var(--color-text-secondary)]", children: icon })), title && (jsxs("div", { className: "flex-1 min-w-0", children: [jsx("div", { id: titleId, className: cn(theme.title), children: title }), description && (jsx("p", { id: descriptionId, className: cn(theme.description), children: description }))] }))] }), showCloseButton && (jsx(Button, { color: "neutral", variant: "ghost", iconOnly: true, size: "sm", onClick: onClose, "aria-label": "Close drawer", className: "rounded-full shrink-0", children: jsx(XMarkIcon, { className: "size-5" }) }))] })), children] }) }) }));
+        }, ...props, children: jsx(DrawerContext.Provider, { value: contextValue, children: jsxs("div", { className: theme.inner, children: [shouldAutoRenderHeader && (jsxs(DrawerHeader, { icon: icon, children: [title &&
+                                (typeof title === "string" ? (jsx(DrawerTitle, { children: title })) : (title)), subtitle &&
+                                (typeof subtitle === "string" ? (jsx(DrawerSubtitle, { children: subtitle })) : (subtitle))] })), children] }) }) }));
 };
 DrawerRoot.displayName = "Drawer";
 // Attach compound subcomponents
 const Drawer = Object.assign(DrawerRoot, {
-    Content: DrawerContent,
+    Header: DrawerHeader,
+    Title: DrawerTitle,
+    Subtitle: DrawerSubtitle,
+    Body: DrawerBody,
     Footer: DrawerFooter,
 });
 

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

@@ -20,11 +20,13 @@ export declare const drawerPositionVariantsFullWidth: {
 };
 export declare const drawerSizeVariants: {
     horizontal: {
+        sm: string;
         md: string;
         lg: string;
         full: string;
     };
     vertical: {
+        sm: string;
         md: string;
         lg: string;
         full: string;

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

@@ -5,39 +5,41 @@ const drawerTheme = {
         "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",
+    inner: "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",
+    title: "text-lg font-semibold leading-6 text-[var(--color-text-primary)]",
+    subtitle: "text-base 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)]",
+    footer: "flex items-center justify-end gap-3 p-4 py-3 border-t border-[var(--color-border)] shrink-0 " +
+        "",
 };
 // 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)]",
+    left: "left-0 top-0 h-full", // 100vh - 1.5rem top - 1.5rem bottom
+    right: "right-0 top-0 h-full",
+    top: "top-0 left-0 w-full",
+    bottom: "bottom-0 left-0 w-full",
 };
 // 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",
+    left: "left-0 top-0 right-0 bottom-0", // Consistent margins on all sides
+    right: "right-0 top-0 left-0 bottom-0",
+    top: "top-0 left-0 right-0 bottom-0",
+    bottom: "bottom-0 left-0 right-0 top-0",
 };
 // Size variants based on position
 const drawerSizeVariants = {
     // Horizontal drawers (left/right)
     horizontal: {
+        sm: "w-[min(320px,90vw)]", // 320px on large screens, max 90% on small
         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: {
+        sm: "h-[min(240px,90vh)]", // 240px on large screens, max 90% on small
         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

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

@@ -1,25 +1,27 @@
 import React from "react";
 export type DrawerPosition = "left" | "right" | "top" | "bottom";
-export type DrawerSize = "md" | "lg" | "full";
+export type DrawerSizeToken = "sm" | "md" | "lg" | "full";
+/** Preset size token or any arbitrary Tailwind width/height class, e.g. `"w-80"`, `"w-[50vw]"` */
+export type DrawerSize = DrawerSizeToken | (string & {});
 export interface DrawerTheme {
     overlay: string;
     container: string;
-    content: string;
+    inner: string;
     header: string;
     headerContent: string;
     title: string;
-    description: string;
+    subtitle: string;
     body: string;
     footer: string;
 }
 export interface DrawerThemeOverrides {
     overlay?: string;
     container?: string;
-    content?: string;
+    inner?: string;
     header?: string;
     headerContent?: string;
     title?: string;
-    description?: string;
+    subtitle?: string;
     body?: string;
     footer?: string;
 }
@@ -30,15 +32,18 @@ export interface DrawerContextValue {
     size: DrawerSize;
     closeOnOverlayClick: boolean;
     closeOnEsc: boolean;
+    showCloseButton: boolean;
     theme: DrawerTheme;
+    titleId: string;
+    subtitleId: string;
 }
 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;
+    title?: React.ReactNode;
+    /** Subtitle text displayed below the title */
+    subtitle?: React.ReactNode;
     /** Icon displayed to the left of the title/description */
     icon?: React.ReactNode;
     position?: DrawerPosition;
@@ -57,8 +62,28 @@ export interface DrawerProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
      * @default 0.94
      */
     scale?: number;
+    /**
+     * When enabled, pressing the browser back button closes the drawer
+     * instead of navigating away. Useful for mobile-like UX.
+     * @default false
+     */
+    closeOnBack?: boolean;
+}
+export interface DrawerHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+    icon?: React.ReactNode;
+    showCloseButton?: boolean;
+    className?: string;
+}
+export interface DrawerTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {
+    children: React.ReactNode;
+    className?: string;
+}
+export interface DrawerSubtitleProps extends React.HTMLAttributes<HTMLParagraphElement> {
+    children: React.ReactNode;
+    className?: string;
 }
-export interface DrawerContentProps extends React.HTMLAttributes<HTMLDivElement> {
+export interface DrawerBodyProps extends React.HTMLAttributes<HTMLDivElement> {
     children: React.ReactNode;
     className?: string;
 }

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

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

package/dist/components/core/Drawer/{DrawerContent.js → DrawerBody.js}

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

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

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

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

@@ -0,0 +1,15 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { cn } from '../../../utils/cn.js';
+import { useDrawerContext } from './Drawer.js';
+import { Button } from '../Button/Button.js';
+import 'react';
+import { XMarkIcon } from '@heroicons/react/24/outline';
+
+const DrawerHeader = ({ children, icon, showCloseButton, className, ...props }) => {
+    const { onClose, showCloseButton: contextShowCloseButton, theme, } = useDrawerContext();
+    const shouldShowCloseButton = showCloseButton !== null && showCloseButton !== void 0 ? showCloseButton : contextShowCloseButton;
+    return (jsxs("div", { className: cn(theme.header, className), ...props, children: [jsxs("div", { className: cn(theme.headerContent), children: [icon && (jsx("div", { className: "flex-shrink-0 text-[var(--color-text-secondary)]", children: icon })), jsx("div", { className: "flex-1 min-w-0", children: children })] }), shouldShowCloseButton && (jsx(Button, { color: "neutral", variant: "soft", iconOnly: true, size: "sm", onClick: onClose, "aria-label": "Close drawer", className: "rounded-full shrink-0", children: jsx(XMarkIcon, { className: "size-5" }) }))] }));
+};
+DrawerHeader.displayName = "Drawer.Header";
+
+export { DrawerHeader };

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

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

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

@@ -0,0 +1,11 @@
+import { jsx } from 'react/jsx-runtime';
+import { cn } from '../../../utils/cn.js';
+import { useDrawerContext } from './Drawer.js';
+
+const DrawerSubtitle = ({ children, className, ...props }) => {
+    const { theme, subtitleId } = useDrawerContext();
+    return (jsx("p", { id: subtitleId, className: cn(theme.subtitle, className), ...props, children: children }));
+};
+DrawerSubtitle.displayName = "Drawer.Subtitle";
+
+export { DrawerSubtitle };

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

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

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

@@ -0,0 +1,11 @@
+import { jsx } from 'react/jsx-runtime';
+import { cn } from '../../../utils/cn.js';
+import { useDrawerContext } from './Drawer.js';
+
+const DrawerTitle = ({ children, className, ...props }) => {
+    const { theme, titleId } = useDrawerContext();
+    return (jsx("h2", { id: titleId, className: cn(theme.title, className), ...props, children: children }));
+};
+DrawerTitle.displayName = "Drawer.Title";
+
+export { DrawerTitle };

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

@@ -1,2 +1,3 @@
 export { Drawer } from "./Drawer";
-export type { DrawerProps, DrawerPosition, DrawerSize, DrawerThemeOverrides } from "./Drawer.types";
+export { DrawerBody } from "./DrawerBody";
+export type { DrawerProps, DrawerPosition, DrawerSize, DrawerThemeOverrides, DrawerHeaderProps, DrawerTitleProps, DrawerSubtitleProps, DrawerBodyProps, DrawerFooterProps, } from "./Drawer.types";

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

@@ -5,7 +5,7 @@ export declare const Dropdown: {
     displayName: string;
 } & {
     Trigger: {
-        ({ children, className }: import("./Dropdown.types").DropdownTriggerProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+        ({ children, className }: import("./Dropdown.types").DropdownTriggerProps): React.ReactElement<import("./DropdownTrigger").TriggerChildProps, string | React.JSXElementConstructor<any>>;
         displayName: string;
     };
     Menu: React.ForwardRefExoticComponent<import("./Dropdown.types").DropdownMenuProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -1,5 +1,5 @@
 import { jsx } from 'react/jsx-runtime';
-import { useState, useRef, useCallback } from 'react';
+import { useState, useRef, useId, useCallback } from 'react';
 import { cn } from '../../../utils/cn.js';
 import { DropdownContext } from './DropdownContext.js';
 import { DropdownTrigger } from './DropdownTrigger.js';
@@ -41,6 +41,9 @@ const DropdownRoot = ({ children, className, isOpen: controlledIsOpen, defaultIs
     // Refs for positioning
     const triggerRef = useRef(null);
     const menuRef = useRef(null);
+    // Generate a stable menu ID for aria-controls
+    const generatedMenuId = useId();
+    const menuId = `dropdown-menu-${generatedMenuId}`;
     // Handle open state changes
     const handleOpenChange = useCallback((value) => {
         if (!isControlledOpen) {
@@ -68,6 +71,7 @@ const DropdownRoot = ({ children, className, isOpen: controlledIsOpen, defaultIs
         onOpenChange: handleOpenChange,
         triggerRef,
         menuRef,
+        menuId,
         placement,
         offset,
         closeOnSelect,
@@ -78,7 +82,7 @@ const DropdownRoot = ({ children, className, isOpen: controlledIsOpen, defaultIs
         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 }) }));
+    return (jsx(DropdownContext.Provider, { value: contextValue, children: jsx("div", { className: cn("dropdown contents", darkMode && "dark", className), "data-state": isOpen ? "open" : "closed", ...props, children: children }) }));
 };
 DropdownRoot.displayName = "Dropdown";
 // Export as a unified component with sub-components

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

@@ -9,7 +9,7 @@ const dropdownTheme = {
     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",
+    sectionTitleStyle: "px-2 py-1.5 text-sm font-semibold text-[var(--color-text-muted)] uppercase tracking-tight",
     // Section container styling
     sectionStyle: "py-1",
     // Separator between sections

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

@@ -1,12 +1,13 @@
 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 type SelectionMode = "none" | "single" | "multiple";
 export interface DropdownContextValue {
     isOpen: boolean;
     onOpenChange: (isOpen: boolean) => void;
     triggerRef: React.RefObject<HTMLElement | null>;
     menuRef: React.RefObject<HTMLDivElement | null>;
+    menuId: string;
     placement: DropdownPlacement;
     offset: number;
     closeOnSelect: boolean;
@@ -53,22 +54,22 @@ export interface DropdownMenuProps extends React.HTMLAttributes<HTMLDivElement>
     horizontal?: boolean;
     "aria-label"?: string;
 }
-export interface DropdownItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color' | 'onSelect'> {
+export interface DropdownItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "color" | "onSelect"> {
     itemKey: string;
     children: ReactNode;
     className?: string;
     startContent?: ReactNode;
     endContent?: ReactNode;
-    description?: string;
-    shortcut?: string;
+    subtitle?: ReactNode;
+    shortcut?: ReactNode;
     isDisabled?: boolean;
     isDanger?: boolean;
     onAction?: () => void;
 }
-export interface DropdownSectionProps extends React.HTMLAttributes<HTMLDivElement> {
+export interface DropdownSectionProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
     children: ReactNode;
     className?: string;
-    title?: string;
+    title?: ReactNode;
     showDivider?: boolean;
 }
 export interface DropdownSeparatorProps extends React.HTMLAttributes<HTMLDivElement> {