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

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

@@ -2,7 +2,7 @@ import { ReactNode, MouseEvent } from "react";
 import { HTMLMotionProps } from "motion/react";
 export type BadgeVariant = "filled" | "outline" | "ghost";
 export type BadgeColor = "neutral" | "primary" | "success" | "warning" | "danger";
-export type BadgeSize = "sm" | "md" | "lg";
+export type BadgeSize = "sm" | "md";
 /**
  * Theme configuration for Badge component
  */
@@ -28,6 +28,10 @@ export interface BadgeTheme {
      * Additional padding for pill-shaped badges
      */
     pillSizes: Record<BadgeSize, string>;
+    /**
+     * Border radius per badge size
+     */
+    radiusSizes: Record<BadgeSize, string>;
     /**
      * Icon sizes for each badge size
      */
@@ -65,6 +69,7 @@ export interface BadgeThemeOverrides {
     variantColors?: Partial<Record<BadgeVariant, Partial<Record<BadgeColor, string>>>>;
     sizes?: Partial<Record<BadgeSize, string>>;
     pillSizes?: Partial<Record<BadgeSize, string>>;
+    radiusSizes?: Partial<Record<BadgeSize, string>>;
     iconSizes?: Partial<Record<BadgeSize, string>>;
     avatarSizes?: Partial<Record<BadgeSize, string>>;
     dismissButtonSizes?: Partial<Record<BadgeSize, string>>;

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

@@ -15,15 +15,15 @@ const buttonTheme = {
     variantColors: {
         // Filled variant - solid backgrounds
         filled: {
-            neutral: "bg-[var(--color-neutral-100)] text-[var(--color-text-primary)] border-[var(--color-border)] " +
-                "hover:bg-[var(--color-neutral-200)] hover:ring-2 hover:ring-[var(--color-border)] " +
-                "focus-visible:outline-[var(--color-text-secondary)] " +
-                "dark:bg-[var(--color-neutral-700)] dark:text-[var(--color-text-primary)] dark:border-[var(--color-neutral-600)] " +
-                "dark:hover:bg-[var(--color-neutral-600)]",
+            neutral: "bg-[var(--color-neutral-900)] text-white border-[var(--color-border)] " +
+                "hover:bg-[var(--color-neutral-800)] hover:ring-2 hover:ring-[var(--color-neutral-900)]/20 " +
+                "focus-visible:outline-[var(--color-neutral-800)] " +
+                "dark:bg-[var(--color-neutral-200)] dark:text-[var(--color-neutral-900)] dark:border-[var(--color-neutral-200)] " +
+                "dark:hover:bg-[var(--color-neutral-300)]",
             primary: "bg-[var(--color-primary)] text-white border-[var(--color-primary)] " +
                 "hover:bg-[var(--color-primary-700)] hover:ring-2 hover:ring-[var(--color-primary)]/20 " +
                 "focus-visible:outline-[var(--color-primary-600)] " +
-                "dark:bg-[var(--color-primary-600)] dark:border-[var(--color-primary-600)] " +
+                "dark:text-white dark:bg-[var(--color-primary-600)] dark:border-[var(--color-primary-600)] " +
                 "dark:hover:bg-[var(--color-primary-500)]",
             success: "bg-[var(--color-success)] text-white border-[var(--color-success)] " +
                 "hover:bg-[var(--color-success-600)] hover:ring-2 hover:ring-[var(--color-success)]/20 " +
@@ -46,8 +46,7 @@ const buttonTheme = {
             neutral: "text-[var(--color-text-primary)] border-[var(--color-border)] " +
                 "hover:bg-[var(--color-neutral-100)] hover:ring-2 hover:ring-[var(--color-border)] " +
                 "focus-visible:outline-[var(--color-text-secondary)] " +
-                "dark:text-[var(--color-text-primary)] dark:border-[var(--color-neutral-600)] " +
-                "dark:hover:bg-[var(--color-neutral-800)]",
+                "dark:hover:bg-[var(--color-background-secondary)]",
             primary: "text-[var(--color-primary-600)] border-[var(--color-primary-600)] " +
                 "hover:bg-[var(--color-primary-50)] hover:ring-2 hover:ring-[var(--color-primary)]/30 " +
                 "focus-visible:outline-[var(--color-primary-600)] " +
@@ -99,7 +98,7 @@ const buttonTheme = {
         },
         // Link variant - text-only with per-color styles
         link: {
-            neutral: "text-[var(--color-text-primary)] underline-offset-4 hover:underline " +
+            neutral: "text-[var(--color-text-secondary)] underline-offset-4 hover:underline hover:text-[var(--color-text-primary)] " +
                 "focus-visible:outline-[var(--color-text-secondary)] " +
                 "dark:text-[var(--color-text-primary)]",
             primary: "text-[var(--color-primary-600)] underline-offset-4 hover:underline " +

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

@@ -3,7 +3,7 @@
  * Uses design tokens and data-[state=*] selectors
  */
 const calendarTheme = {
-    baseStyle: "select-none w-full max-w-fit bg-white dark:bg-[var(--color-neutral-900)]",
+    baseStyle: "select-none w-full bg-white dark:bg-[var(--color-neutral-900)]",
     headerStyle: "flex items-center justify-between mb-4",
     titleStyle: "text-base font-semibold text-[var(--color-text-primary)] cursor-pointer hover:text-[var(--color-primary)] transition-colors " +
         "dark:text-[var(--color-neutral-200)] dark:hover:text-[var(--color-primary-400)]",

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

@@ -1,8 +1,8 @@
 import { CardComponent } from './Card.types';
 import { CardHeader } from './CardHeader';
 import { CardTitle } from './CardTitle';
-import { CardDescription } from './CardDescription';
+import { CardSubtitle } from './CardSubtitle';
 import { CardContent } from './CardContent';
 import { CardFooter } from './CardFooter';
-export { CardHeader, CardTitle, CardDescription, CardContent, CardFooter };
+export { CardHeader, CardTitle, CardSubtitle, CardContent, CardFooter };
 export declare const Card: CardComponent;

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,10 +1,10 @@
 const cardTheme = {
-    baseStyle: "rounded-[var(--card-radius)] overflow-hidden bg-white border border-[var(--color-border)] shadow-xs dark:bg-[var(--color-background-secondary)]",
+    baseStyle: "rounded-[var(--card-radius)] overflow-hidden bg-white border border-[var(--color-border)] shadow-xs dark:bg-[var(--color-background-secondary)] [&>*+*]:pt-0",
     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)]",
-    contentStyle: "p-6 pt-0",
-    footerStyle: "flex items-center p-6 pt-0",
+    subtitleStyle: "text-sm text-[var(--color-text-muted)]",
+    contentStyle: "p-6",
+    footerStyle: "flex items-center p-6",
 };
 
 export { cardTheme };

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
@@ -55,7 +40,7 @@ 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>>;
+    Subtitle: ForwardRefExoticComponent<CardSubtitleProps & RefAttributes<HTMLParagraphElement>>;
     Content: ForwardRefExoticComponent<CardContentProps & RefAttributes<HTMLDivElement>>;
     Footer: ForwardRefExoticComponent<CardFooterProps & RefAttributes<HTMLDivElement>>;
 }
@@ -75,7 +60,7 @@ export interface CardTitleProps extends HTMLAttributes<HTMLHeadingElement> {
     children: ReactNode;
     className?: string;
 }
-export interface CardDescriptionProps extends HTMLAttributes<HTMLParagraphElement> {
+export interface CardSubtitleProps extends HTMLAttributes<HTMLParagraphElement> {
     children: ReactNode;
     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<HTMLParagraphElement>>;

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/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-sm  truncate", children: command.label }), command.subtitle && (jsx("div", { className: "text-sm 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,7 +1,7 @@
 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 " +

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.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)
@@ -23,7 +23,7 @@ const ContextMenuItem = React__default.forwardRef(({ children, className, checke
     // 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: {
+    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.content, 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.js

@@ -9,7 +9,7 @@ const drawerTheme = {
     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",
+    subtitle: "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)]",

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

@@ -8,7 +8,7 @@ export interface DrawerTheme {
     header: string;
     headerContent: string;
     title: string;
-    description: string;
+    subtitle: string;
     body: string;
     footer: string;
 }
@@ -19,7 +19,7 @@ export interface DrawerThemeOverrides {
     header?: string;
     headerContent?: string;
     title?: string;
-    description?: string;
+    subtitle?: string;
     body?: string;
     footer?: string;
 }
@@ -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/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,14 @@
+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 { 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("div", { 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,2 @@
 export { Drawer } from "./Drawer";
-export type { DrawerProps, DrawerPosition, DrawerSize, DrawerThemeOverrides } from "./Drawer.types";
+export type { DrawerProps, DrawerPosition, DrawerSize, DrawerThemeOverrides, DrawerHeaderProps, DrawerTitleProps, DrawerSubtitleProps, } from "./Drawer.types";

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

@@ -1,7 +1,7 @@
 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;
@@ -53,14 +53,14 @@ 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?: string;
+    shortcut?: ReactNode;
     isDisabled?: boolean;
     isDanger?: boolean;
     onAction?: () => void;

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

@@ -9,7 +9,7 @@ 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 DropdownItem = React__default.forwardRef(({ itemKey, children, className, startContent, endContent, subtitle, 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);
@@ -63,7 +63,7 @@ const DropdownItem = React__default.forwardRef(({ itemKey, children, className,
     // 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: {
+    return (jsx(MenuItem, { ref: ref, role: itemRole, disabled: disabled, isDanger: isDanger, startContent: startContent, endContent: resolvedEndContent, subtitle: subtitle, shortcut: shortcut, onActivate: handleActivate, "data-selected": isSelected, ...(selectionMode !== "none" ? { "aria-checked": isSelected } : {}), className: className, theme: {
             baseStyle: theme.itemBaseStyle,
             dangerStyle: theme.itemDangerStyle,
             focusStyle: theme.itemFocusStyle,