@flikk/ui 1.0.0-beta.1 → 1.0.0-beta.11

package/dist/components/core/Card/Card.js

@@ -1,29 +1,28 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx } from 'react/jsx-runtime';
 import React__default, { useMemo } from 'react';
 import { cn } from '../../../utils/cn.js';
 import { cardTheme } from './Card.theme.js';
 import { CardHeader } from './CardHeader.js';
 import { CardTitle } from './CardTitle.js';
-import { CardDescription } from './CardDescription.js';
+import { CardSubtitle } from './CardSubtitle.js';
 import { CardContent } from './CardContent.js';
 import { CardFooter } from './CardFooter.js';
 
-const CardRoot = React__default.forwardRef(({ children, className, theme: customTheme = {}, title, description, footer, darkMode = false, ...props }, ref) => {
+const CardRoot = React__default.forwardRef(({ children, className, theme: customTheme = {}, darkMode = false, ...props }, ref) => {
     const theme = useMemo(() => ({
         ...cardTheme,
         ...customTheme,
     }), [customTheme]);
-    const hasHeader = title || description;
-    return (jsxs("div", { ref: ref, className: cn(theme.baseStyle, darkMode && "dark", className), ...props, children: [hasHeader && (jsxs("div", { className: theme.headerStyle, children: [title && jsx("div", { className: theme.titleStyle, children: title }), description && jsx("div", { className: theme.descriptionStyle, children: description })] })), hasHeader ? (jsx("div", { className: theme.contentStyle, children: children })) : (children), footer && jsx("div", { className: theme.footerStyle, children: footer })] }));
+    return (jsx("div", { ref: ref, className: cn(theme.baseStyle, darkMode && "dark", className), ...props, children: children }));
 });
 CardRoot.displayName = 'Card';
 // Create compound component with proper typing
 const Card = Object.assign(CardRoot, {
     Header: CardHeader,
     Title: CardTitle,
-    Description: CardDescription,
+    Subtitle: CardSubtitle,
     Content: CardContent,
     Footer: CardFooter,
 });
 
-export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle };
+export { Card, CardContent, CardFooter, CardHeader, CardSubtitle, CardTitle };

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

@@ -1,8 +1,8 @@
 const cardTheme = {
     baseStyle: "rounded-[var(--card-radius)] overflow-hidden bg-white border border-[var(--color-border)] shadow-xs dark:bg-[var(--color-background-secondary)]",
     headerStyle: "flex flex-col space-y-1.5 p-6",
-    titleStyle: "text-base font-semibold leading-none text-[var(--color-text-primary)]",
-    descriptionStyle: "text-sm text-[var(--color-text-muted)]",
+    titleStyle: "text-lg font-semibold leading-none text-[var(--color-text-primary)]",
+    subtitleStyle: "text-sm text-[var(--color-text-muted)]",
     contentStyle: "p-6 pt-0",
     footerStyle: "flex items-center p-6 pt-0",
 };

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

@@ -3,7 +3,7 @@ export interface CardTheme {
     baseStyle: string;
     headerStyle: string;
     titleStyle: string;
-    descriptionStyle: string;
+    subtitleStyle: string;
     contentStyle: string;
     footerStyle: string;
 }
@@ -11,11 +11,11 @@ export interface CardThemeOverrides {
     baseStyle?: string;
     headerStyle?: string;
     titleStyle?: string;
-    descriptionStyle?: string;
+    subtitleStyle?: string;
     contentStyle?: string;
     footerStyle?: string;
 }
-export interface CardProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+export interface CardProps extends HTMLAttributes<HTMLDivElement> {
     /**
      * The content to be displayed inside the card
      */
@@ -28,21 +28,6 @@ export interface CardProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'>
      * Component-level theme overrides
      */
     theme?: CardThemeOverrides;
-    /**
-     * Card title - auto-generates header when provided
-     * Use this for simple cards instead of Card.Header/Card.Title
-     */
-    title?: ReactNode;
-    /**
-     * Card description - displayed below title in auto-generated header
-     * Use this for simple cards instead of Card.Header/Card.Description
-     */
-    description?: ReactNode;
-    /**
-     * Card footer content - auto-generates footer when provided
-     * Use this for simple cards instead of Card.Footer
-     */
-    footer?: ReactNode;
     /**
      * 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
@@ -54,28 +39,23 @@ export interface CardProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'>
 }
 export interface CardComponent extends ForwardRefExoticComponent<CardProps & RefAttributes<HTMLDivElement>> {
     Header: ForwardRefExoticComponent<CardHeaderProps & RefAttributes<HTMLDivElement>>;
-    Title: ForwardRefExoticComponent<CardTitleProps & RefAttributes<HTMLHeadingElement>>;
-    Description: ForwardRefExoticComponent<CardDescriptionProps & RefAttributes<HTMLParagraphElement>>;
+    Title: ForwardRefExoticComponent<CardTitleProps & RefAttributes<HTMLDivElement>>;
+    Subtitle: ForwardRefExoticComponent<CardSubtitleProps & RefAttributes<HTMLDivElement>>;
     Content: ForwardRefExoticComponent<CardContentProps & RefAttributes<HTMLDivElement>>;
     Footer: ForwardRefExoticComponent<CardFooterProps & RefAttributes<HTMLDivElement>>;
 }
 export interface CardHeaderProps extends HTMLAttributes<HTMLDivElement> {
-    children: ReactNode;
     className?: string;
 }
 export interface CardContentProps extends HTMLAttributes<HTMLDivElement> {
-    children: ReactNode;
     className?: string;
 }
 export interface CardFooterProps extends HTMLAttributes<HTMLDivElement> {
-    children: ReactNode;
     className?: string;
 }
-export interface CardTitleProps extends HTMLAttributes<HTMLHeadingElement> {
-    children: ReactNode;
+export interface CardTitleProps extends HTMLAttributes<HTMLDivElement> {
     className?: string;
 }
-export interface CardDescriptionProps extends HTMLAttributes<HTMLParagraphElement> {
-    children: ReactNode;
+export interface CardSubtitleProps extends HTMLAttributes<HTMLDivElement> {
     className?: string;
 }

package/dist/components/core/Card/CardSubtitle.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { CardSubtitleProps } from './Card.types';
+export declare const CardSubtitle: React.ForwardRefExoticComponent<CardSubtitleProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/core/Card/CardSubtitle.js

@@ -0,0 +1,11 @@
+import { jsx } from 'react/jsx-runtime';
+import React__default from 'react';
+import { cn } from '../../../utils/cn.js';
+import { cardTheme } from './Card.theme.js';
+
+const CardSubtitle = React__default.forwardRef(({ children, className, ...props }, ref) => {
+    return (jsx("div", { ref: ref, className: cn(cardTheme.subtitleStyle, className), ...props, children: children }));
+});
+CardSubtitle.displayName = 'CardSubtitle';
+
+export { CardSubtitle };

package/dist/components/core/Card/CardTitle.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
 import { CardTitleProps } from './Card.types';
-export declare const CardTitle: React.ForwardRefExoticComponent<CardTitleProps & React.RefAttributes<HTMLHeadingElement>>;
+export declare const CardTitle: React.ForwardRefExoticComponent<CardTitleProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -1,2 +1,2 @@
-export { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from './Card';
-export type { CardProps, CardHeaderProps, CardTitleProps, CardDescriptionProps, CardContentProps, CardFooterProps, CardTheme, CardThemeOverrides } from './Card.types';
+export { Card, CardHeader, CardTitle, CardSubtitle, CardContent, CardFooter } from './Card';
+export type { CardProps, CardHeaderProps, CardTitleProps, CardSubtitleProps, CardContentProps, CardFooterProps, CardTheme, CardThemeOverrides } from './Card.types';

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

@@ -36,7 +36,7 @@ export interface CommandItemProps {
  *   command={{
  *     id: 'user-profile',
  *     label: 'John Doe',
- *     description: 'View profile',
+ *     subtitle: 'View profile',
  *     contentStart: <Avatar src="..." />,
  *     contentEnd: <Badge>Admin</Badge>,
  *     onSelect: () => navigate('/profile')

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

@@ -88,7 +88,7 @@ const Shortcut = ({ keys }) => {
  *   command={{
  *     id: 'user-profile',
  *     label: 'John Doe',
- *     description: 'View profile',
+ *     subtitle: 'View profile',
  *     contentStart: <Avatar src="..." />,
  *     contentEnd: <Badge>Admin</Badge>,
  *     onSelect: () => navigate('/profile')
@@ -126,7 +126,7 @@ const CommandItem = ({ command, index, isHighlighted, contentStart, contentEnd,
         }
         return null;
     };
-    return (jsxs("div", { "data-command-index": index, "data-highlighted": isHighlighted, "data-disabled": command.disabled || false, className: cn(theme.commandItem, className), onClick: handleClick, onMouseEnter: handleMouseEnter, children: [finalContentStart && (jsx("div", { className: "flex-shrink-0", children: finalContentStart })), jsxs("div", { className: "flex-1 min-w-0", children: [jsx("div", { className: "text-sm  truncate", children: command.label }), command.description && (jsx("div", { className: "text-sm opacity-70 truncate mt-0", children: command.description }))] }), renderContentEnd()] }));
+    return (jsxs("div", { "data-command-index": index, "data-highlighted": isHighlighted, "data-disabled": command.disabled || false, className: cn(theme.commandItem, className), onClick: handleClick, onMouseEnter: handleMouseEnter, children: [finalContentStart && (jsx("div", { className: "flex-shrink-0", children: finalContentStart })), jsxs("div", { className: "flex-1 min-w-0", children: [jsx("div", { className: "text-base  truncate", children: command.label }), command.subtitle && (jsx("div", { className: "text-base opacity-70 truncate mt-0", children: command.subtitle }))] }), renderContentEnd()] }));
 };
 
 export { CommandItem };

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

@@ -14,9 +14,9 @@ const defaultFilterFunction = (command, searchValue) => {
     var _a, _b;
     const search = searchValue.toLowerCase();
     const labelMatch = command.label.toLowerCase().includes(search);
-    const descriptionMatch = (_a = command.description) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes(search);
+    const subtitleMatch = (_a = command.subtitle) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes(search);
     const keywordsMatch = (_b = command.keywords) === null || _b === void 0 ? void 0 : _b.some((keyword) => keyword.toLowerCase().includes(search));
-    return labelMatch || descriptionMatch || keywordsMatch || false;
+    return labelMatch || subtitleMatch || keywordsMatch || false;
 };
 /**
  * Check if commands array is grouped

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

@@ -1,29 +1,29 @@
 const commandPaletteTheme = {
     overlay: "fixed inset-0 bg-[var(--overlay-bg)] backdrop-blur-[var(--overlay-blur)] z-50 " +
-        "flex items-start justify-center pt-[10vh] px-4",
-    container: "relative w-full max-h-[calc(100vh-2rem)] w-full max-w-lg " +
+        "flex items-start justify-center pt-[min(10vh,4rem)] px-4",
+    container: "relative w-full max-h-[calc(100vh-2rem)] max-w-lg " +
         "bg-[var(--color-background)] rounded-[var(--modal-radius)] shadow-2xl shadow-black/30 " +
         "border border-[var(--color-border)] ring-4 ring-[var(--color-background)]/20 " +
         "flex flex-col my-4 min-h-0 overflow-hidden " +
         // Dark mode
         "dark:ring-black/30",
     searchWrapper: "border-b border-[var(--color-border)] px-4 py-3 " + "",
-    searchInput: "w-full px-0 py-0 text-sm bg-transparent border-none outline-none " +
+    searchInput: "w-full px-0 py-0 text-base bg-transparent border-none outline-none " +
         "text-[var(--color-text-primary)] placeholder:text-[var(--color-text-placeholder)] " +
         "focus:outline-none focus:ring-0 " +
         // Dark mode
         "dark:text-[var(--color-neutral-200)] dark:placeholder:text-[var(--color-neutral-500)]",
-    groupLabel: "px-4 py-1 text-xs font-semibold text-[var(--color-text-muted)]/50 uppercase " +
+    groupLabel: "px-4 py-1 text-sm font-semibold text-[var(--color-text-muted)]/50 uppercase " +
         "dark:text-[var(--color-neutral-500)]",
     commandItem: "flex items-center gap-3 px-4 py-2 rounded-[var(--radius-base)] cursor-pointer transition-colors " +
         "hover:bg-[var(--color-primary)] " +
         "data-[highlighted=true]:bg-[var(--color-primary)] data-[highlighted=true]:hover:bg-[var(--color-primary)] " +
-        "data-[highlighted=true]:text-white " +
+        "data-[highlighted=true]:text-[var(--color-primary-contrast)] " +
         "data-[disabled=true]:opacity-50 data-[disabled=true]:cursor-not-allowed data-[disabled=true]:hover:bg-transparent " +
         // Dark mode - adjust hover state
         "dark:text-[var(--color-neutral-200)] dark:hover:bg-[var(--color-primary-600)] " +
         "dark:data-[highlighted=true]:bg-[var(--color-primary-600)]",
-    emptyState: "px-4 py-12 text-center text-sm text-[var(--color-text-muted)] " +
+    emptyState: "px-4 py-12 text-center text-base text-[var(--color-text-muted)] " +
         "dark:text-[var(--color-neutral-500)]",
 };
 

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

@@ -7,8 +7,8 @@ export interface CommandItem {
     id: string;
     /** Display label for the command */
     label: string;
-    /** Description or subtitle for the command */
-    description?: string;
+    /** Subtitle for the command */
+    subtitle?: string;
     /** Content to display at the start (icon, avatar, etc.) */
     contentStart?: React.ReactNode;
     /** Content to display at the end (keyboard shortcuts, badges, etc.) */

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

@@ -13,10 +13,10 @@ const contextMenuTheme = {
     // Submenu trigger - based on Dropdown item style with chevron space
     subTriggerStyle: `${dropdownTheme.itemBaseStyle} pr-8 data-[state=open]:bg-[var(--color-background-tertiary)] ` +
         "dark:data-[state=open]:bg-[var(--color-neutral-700)]",
-    // Submenu content - similar to main menu but slightly smaller
+    // Submenu content - matches main dropdown menu style
     subContentStyle: "min-w-[180px] max-h-[400px] overflow-y-auto rounded-[var(--dropdown-radius)] border border-[var(--color-border)] " +
-        "bg-[var(--color-background-secondary)] shadow-xl flex flex-col p-1 focus:outline-none " +
-        "dark:bg-[var(--color-neutral-800)] dark:border-[var(--color-neutral-700)]",
+        "bg-[var(--color-background)] shadow-real-xl flex flex-col p-1 focus:outline-none " +
+        "dark:bg-[var(--color-background-secondary)]",
     // Separator - horizontal divider
     separatorStyle: "h-px bg-[var(--color-border)] my-1 -mx-1 " +
         "dark:bg-[var(--color-neutral-700)]",

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

@@ -42,7 +42,7 @@ export interface ContextMenuItemProps extends Omit<React.HTMLAttributes<HTMLDivE
     onSelect?: () => void;
     startContent?: ReactNode;
     endContent?: ReactNode;
-    description?: string;
+    subtitle?: string;
 }
 export interface ContextMenuSubProps {
     children: ReactNode;

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/Drawer/Drawer.d.ts

@@ -1,9 +1,21 @@
 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, ...props }: DrawerProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 } & {
+    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;
+    };
     Content: {
         ({ children, className, ...props }: import("./Drawer.types").DrawerContentProps): import("react/jsx-runtime").JSX.Element;
         displayName: string;

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

@@ -1,14 +1,15 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { createContext, useId, useMemo, useContext } from 'react';
+import React__default, { createContext, useId, useMemo, 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 { DrawerHeader } from './DrawerHeader.js';
+import { DrawerTitle } from './DrawerTitle.js';
+import { DrawerSubtitle } from './DrawerSubtitle.js';
 import { DrawerContent } from './DrawerContent.js';
 import { DrawerFooter } from './DrawerFooter.js';
-import { Button } from '../Button/Button.js';
 
 // Create context for Drawer components
 const DrawerContext = createContext(undefined);
@@ -18,13 +19,13 @@ 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, ...props }) => {
     // 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,8 +39,19 @@ const DrawerRoot = ({ isOpen, onClose, title, description, icon, position = "rig
         size,
         closeOnOverlayClick,
         closeOnEsc,
+        showCloseButton,
         theme,
-    }), [isOpen, onClose, position, size, closeOnOverlayClick, closeOnEsc, theme]);
+        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);
     // Get size variant based on position
     const isHorizontal = position === "left" || position === "right";
     const sizeVariant = isHorizontal
@@ -49,16 +61,17 @@ const DrawerRoot = ({ isOpen, onClose, title, description, icon, position = "rig
     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, size !== "full" && sizeVariant, 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 && jsx(DrawerTitle, { children: title }), subtitle && jsx(DrawerSubtitle, { children: subtitle })] })), children] }) }) }));
 };
 DrawerRoot.displayName = "Drawer";
 // Attach compound subcomponents
 const Drawer = Object.assign(DrawerRoot, {
+    Header: DrawerHeader,
+    Title: DrawerTitle,
+    Subtitle: DrawerSubtitle,
     Content: DrawerContent,
     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",
-    body: "flex-1 overflow-y-auto p-4",
+    title: "text-lg font-semibold leading-6 text-[var(--color-text-primary)]",
+    subtitle: "text-base text-[var(--color-text-secondary)] mt-0.5",
+    content: "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)]",
+        "dark:border-[var(--color-border)]",
 };
 // 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,26 +1,26 @@
 import React from "react";
 export type DrawerPosition = "left" | "right" | "top" | "bottom";
-export type DrawerSize = "md" | "lg" | "full";
+export type DrawerSize = "sm" | "md" | "lg" | "full";
 export interface DrawerTheme {
     overlay: string;
     container: string;
-    content: string;
+    inner: string;
     header: string;
     headerContent: string;
     title: string;
-    description: string;
-    body: string;
+    subtitle: string;
+    content: string;
     footer: string;
 }
 export interface DrawerThemeOverrides {
     overlay?: string;
     container?: string;
-    content?: string;
+    inner?: string;
     header?: string;
     headerContent?: string;
     title?: string;
-    description?: string;
-    body?: string;
+    subtitle?: string;
+    content?: string;
     footer?: string;
 }
 export interface DrawerContextValue {
@@ -30,15 +30,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;
+    /** Subtitle text displayed below the title */
+    subtitle?: string;
     /** Icon displayed to the left of the title/description */
     icon?: React.ReactNode;
     position?: DrawerPosition;
@@ -58,6 +61,20 @@ export interface DrawerProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
      */
     scale?: number;
 }
+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> {
     children: React.ReactNode;
     className?: string;

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

@@ -4,7 +4,7 @@ import { useDrawerContext } from './Drawer.js';
 
 const DrawerContent = ({ children, className, ...props }) => {
     const { theme } = useDrawerContext();
-    return (jsx("div", { className: cn(theme.body, className), ...props, children: children }));
+    return (jsx("div", { className: cn(theme.content, className), ...props, children: children }));
 };
 DrawerContent.displayName = "Drawer.Content";
 

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: "ghost", 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 };