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

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

@@ -3,7 +3,7 @@
  */
 const buttonTheme = {
     // Base styles for the button element
-    baseStyle: "relative inline-flex items-center justify-center gap-2 font-semibold focus:outline-none rounded-[var(--button-radius)] overflow-hidden cursor-pointer transition-all duration-300 ease-in-out min-w-fit flex-shrink-0 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 cursor-pointer",
+    baseStyle: "relative inline-flex items-center justify-center gap-2 focus:outline-none rounded-[var(--button-radius)] overflow-hidden cursor-pointer transition-all duration-300 ease-in-out min-w-fit flex-shrink-0 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 cursor-pointer",
     // Visual style variants - STRUCTURE only (no colors)
     variantStyles: {
         filled: "border hover:brightness-[0.9] dark:hover:brightness-[1.15]",
@@ -124,19 +124,19 @@ const buttonTheme = {
     // Size variants
     sizes: {
         sm: {
-            default: "min-h-[var(--button-min-h-sm)] px-[var(--button-px-sm)] py-[var(--button-py-sm)] text-base",
+            default: "font-semibold min-h-[var(--button-min-h-sm)] px-[var(--button-px-sm)] py-[var(--button-py-sm)] text-base",
             iconOnly: "size-[var(--button-icon-size-sm)] p-[var(--button-icon-p-sm)]",
-            link: "p-0 text-base h-fit",
+            link: "font-semibold p-0 text-base h-fit",
         },
         md: {
-            default: "min-h-[var(--button-min-h-md)] px-[var(--button-px-md)] py-[var(--button-py-md)] text-base",
+            default: "font-semibold min-h-[var(--button-min-h-md)] px-[var(--button-px-md)] py-[var(--button-py-md)] text-base",
             iconOnly: "size-[var(--button-icon-size-md)] p-[var(--button-icon-p-md)]",
-            link: "p-0 text-base h-fit",
+            link: "font-semibold p-0 text-base h-fit",
         },
         lg: {
-            default: "min-h-[var(--button-min-h-lg)] px-[var(--button-px-lg)] py-[var(--button-py-lg)] text-lg",
+            default: "font-semibold min-h-[var(--button-min-h-lg)] px-[var(--button-px-lg)] py-[var(--button-py-lg)] text-lg",
             iconOnly: "size-[var(--button-icon-size-lg)] p-[var(--button-icon-p-lg)]",
-            link: "p-0 text-lg h-fit",
+            link: "font-semibold p-0 text-lg h-fit",
         },
     },
     // State styles

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

@@ -224,8 +224,8 @@ const Calendar = React__default.forwardRef(({ mode = 'single', value, defaultVal
     // Generate year options - filter based on minDate/maxDate
     const currentDate = new Date();
     const defaultYearRange = {
-        start: currentDate.getFullYear() - 50,
-        end: currentDate.getFullYear() + 50,
+        start: currentDate.getFullYear() - 100,
+        end: currentDate.getFullYear(),
     };
     const actualYearRange = yearRange || defaultYearRange;
     const yearOptions = useMemo(() => {
@@ -239,7 +239,7 @@ const Calendar = React__default.forwardRef(({ mode = 'single', value, defaultVal
             endYear = Math.min(endYear, maxDate.getFullYear());
         }
         const options = [];
-        for (let year = startYear; year <= endYear; year++) {
+        for (let year = endYear; year >= startYear; year--) {
             options.push({
                 id: year,
                 value: year.toString(),

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

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

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

@@ -5,7 +5,7 @@ import { cardTheme } from './Card.theme.js';
 import { CardHeader } from './CardHeader.js';
 import { CardTitle } from './CardTitle.js';
 import { CardSubtitle } from './CardSubtitle.js';
-import { CardContent } from './CardContent.js';
+import { CardBody } from './CardBody.js';
 import { CardFooter } from './CardFooter.js';
 
 const CardRoot = React__default.forwardRef(({ children, className, theme: customTheme = {}, darkMode = false, ...props }, ref) => {
@@ -21,8 +21,8 @@ const Card = Object.assign(CardRoot, {
     Header: CardHeader,
     Title: CardTitle,
     Subtitle: CardSubtitle,
-    Content: CardContent,
+    Body: CardBody,
     Footer: CardFooter,
 });
 
-export { Card, CardContent, CardFooter, CardHeader, CardSubtitle, CardTitle };
+export { Card, CardBody, CardFooter, CardHeader, CardSubtitle, CardTitle };

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

@@ -1,9 +1,9 @@
 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",
+    headerStyle: "flex flex-col p-6",
     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",
+    subtitleStyle: "text-base text-[var(--color-text-muted)] mt-1.5",
+    bodyStyle: "p-6 pt-0",
     footerStyle: "flex items-center p-6 pt-0",
 };
 

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

@@ -4,7 +4,7 @@ export interface CardTheme {
     headerStyle: string;
     titleStyle: string;
     subtitleStyle: string;
-    contentStyle: string;
+    bodyStyle: string;
     footerStyle: string;
 }
 export interface CardThemeOverrides {
@@ -12,7 +12,7 @@ export interface CardThemeOverrides {
     headerStyle?: string;
     titleStyle?: string;
     subtitleStyle?: string;
-    contentStyle?: string;
+    bodyStyle?: string;
     footerStyle?: string;
 }
 export interface CardProps extends HTMLAttributes<HTMLDivElement> {
@@ -41,13 +41,13 @@ export interface CardComponent extends ForwardRefExoticComponent<CardProps & Ref
     Header: ForwardRefExoticComponent<CardHeaderProps & RefAttributes<HTMLDivElement>>;
     Title: ForwardRefExoticComponent<CardTitleProps & RefAttributes<HTMLDivElement>>;
     Subtitle: ForwardRefExoticComponent<CardSubtitleProps & RefAttributes<HTMLDivElement>>;
-    Content: ForwardRefExoticComponent<CardContentProps & RefAttributes<HTMLDivElement>>;
+    Body: ForwardRefExoticComponent<CardBodyProps & RefAttributes<HTMLDivElement>>;
     Footer: ForwardRefExoticComponent<CardFooterProps & RefAttributes<HTMLDivElement>>;
 }
 export interface CardHeaderProps extends HTMLAttributes<HTMLDivElement> {
     className?: string;
 }
-export interface CardContentProps extends HTMLAttributes<HTMLDivElement> {
+export interface CardBodyProps extends HTMLAttributes<HTMLDivElement> {
     className?: string;
 }
 export interface CardFooterProps extends HTMLAttributes<HTMLDivElement> {

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

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

package/dist/components/core/Card/CardBody.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 CardBody = React__default.forwardRef(({ children, className, ...props }, ref) => {
+    return (jsx("div", { ref: ref, className: cn(cardTheme.bodyStyle, className), ...props, children: children }));
+});
+CardBody.displayName = 'Card.Body';
+
+export { CardBody };

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

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

package/dist/components/core/Carousel/Carousel.js

@@ -3,18 +3,18 @@ import React__default, { useState, useEffect, useCallback, useMemo } from 'react
 import { cn } from '../../../utils/cn.js';
 import { carouselTheme } from './Carousel.theme.js';
 import { CarouselContext } from './CarouselContext.js';
-import { CarouselContent } from './CarouselContent.js';
+import { CarouselBody } from './CarouselBody.js';
 import { CarouselItem } from './CarouselItem.js';
 import { CarouselPrevious } from './CarouselPrevious.js';
 import { CarouselNext } from './CarouselNext.js';
 
 const CarouselRoot = React__default.forwardRef(({ orientation = 'horizontal', opts = {}, showControls = false, defaultIndex = 0, onSlideChange, className, children, ...rest }, ref) => {
     const { align = 'start', loop = false, slidesToScroll = 1, draggable = true, dragThreshold = 0.1, } = opts;
-    // Count total slides by looking for CarouselContent and its CarouselItem children
+    // Count total slides by looking for CarouselBody and its CarouselItem children
     const totalSlides = React__default.useMemo(() => {
         let count = 0;
         React__default.Children.forEach(children, (child) => {
-            if (React__default.isValidElement(child) && child.type === CarouselContent) {
+            if (React__default.isValidElement(child) && child.type === CarouselBody) {
                 const contentProps = child.props;
                 count = React__default.Children.count(contentProps.children);
             }
@@ -73,7 +73,7 @@ const CarouselRoot = React__default.forwardRef(({ orientation = 'horizontal', op
 CarouselRoot.displayName = 'Carousel';
 // Create compound component with sub-components
 const Carousel = Object.assign(CarouselRoot, {
-    Content: CarouselContent,
+    Body: CarouselBody,
     Item: CarouselItem,
     Previous: CarouselPrevious,
     Next: CarouselNext,

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

@@ -67,13 +67,13 @@ export interface CarouselProps extends HTMLAttributes<HTMLDivElement> {
      */
     className?: string;
     /**
-     * Children components (CarouselContent, CarouselPrevious, CarouselNext)
+     * Children components (CarouselBody, CarouselPrevious, CarouselNext)
      */
     children?: ReactNode;
 }
-export interface CarouselContentProps extends HTMLAttributes<HTMLDivElement> {
+export interface CarouselBodyProps extends HTMLAttributes<HTMLDivElement> {
     /**
-     * Custom class name for the content container
+     * Custom class name for the body container
      */
     className?: string;
     /**
@@ -106,7 +106,7 @@ export interface CarouselControlProps extends HTMLAttributes<HTMLButtonElement>
     'aria-label'?: string;
 }
 export interface CarouselComponent extends ForwardRefExoticComponent<CarouselProps & RefAttributes<HTMLDivElement>> {
-    Content: ForwardRefExoticComponent<CarouselContentProps & RefAttributes<HTMLDivElement>>;
+    Body: ForwardRefExoticComponent<CarouselBodyProps & RefAttributes<HTMLDivElement>>;
     Item: ForwardRefExoticComponent<CarouselItemProps & RefAttributes<HTMLDivElement>>;
     Previous: ForwardRefExoticComponent<CarouselControlProps & RefAttributes<HTMLButtonElement>>;
     Next: ForwardRefExoticComponent<CarouselControlProps & RefAttributes<HTMLButtonElement>>;

package/dist/components/core/Carousel/CarouselBody.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { CarouselBodyProps } from './Carousel.types';
+declare const CarouselBody: React.ForwardRefExoticComponent<CarouselBodyProps & React.RefAttributes<HTMLDivElement>>;
+export { CarouselBody };

package/dist/components/core/Carousel/{CarouselContent.js → CarouselBody.js}

@@ -5,7 +5,7 @@ import { cn } from '../../../utils/cn.js';
 import { useCarouselContext } from './CarouselContext.js';
 import { carouselTheme } from './Carousel.theme.js';
 
-const CarouselContent = React__default.forwardRef(({ className, children, ...props }, ref) => {
+const CarouselBody = React__default.forwardRef(({ className, children, ...props }, ref) => {
     const { currentIndex, orientation, opts, scrollPrev, scrollNext } = useCarouselContext();
     const shouldReduceMotion = useReducedMotion();
     const internalRef = React__default.useRef(null);
@@ -47,6 +47,6 @@ const CarouselContent = React__default.forwardRef(({ className, children, ...pro
                 });
             }) }) }));
 });
-CarouselContent.displayName = 'Carousel.Content';
+CarouselBody.displayName = 'Carousel.Body';
 
-export { CarouselContent };
+export { CarouselBody };

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

@@ -1,2 +1,3 @@
 export { Carousel } from './Carousel';
-export type { CarouselProps, CarouselContentProps, CarouselItemProps, CarouselControlProps, CarouselOptions, CarouselOrientation, } from './Carousel.types';
+export { CarouselBody } from './CarouselBody';
+export type { CarouselProps, CarouselBodyProps, CarouselItemProps, CarouselControlProps, CarouselOptions, CarouselOrientation, } from './Carousel.types';

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

@@ -5,11 +5,11 @@ export declare const ContextMenu: {
     displayName: string;
 } & {
     Trigger: React.ForwardRefExoticComponent<import("./ContextMenu.types").ContextMenuTriggerProps & React.RefAttributes<HTMLElement>>;
-    Content: React.ForwardRefExoticComponent<import("./ContextMenu.types").ContextMenuContentProps & React.RefAttributes<HTMLDivElement>>;
+    Body: React.ForwardRefExoticComponent<import("./ContextMenu.types").ContextMenuBodyProps & React.RefAttributes<HTMLDivElement>>;
     Item: React.ForwardRefExoticComponent<import("./ContextMenu.types").ContextMenuItemProps & React.RefAttributes<HTMLDivElement>>;
     Sub: React.FC<import("./ContextMenu.types").ContextMenuSubProps>;
     SubTrigger: React.ForwardRefExoticComponent<import("./ContextMenu.types").ContextMenuSubTriggerProps & React.RefAttributes<HTMLDivElement>>;
-    SubContent: React.ForwardRefExoticComponent<import("./ContextMenu.types").ContextMenuSubContentProps & React.RefAttributes<HTMLDivElement>>;
+    SubBody: React.ForwardRefExoticComponent<import("./ContextMenu.types").ContextMenuSubBodyProps & React.RefAttributes<HTMLDivElement>>;
     Separator: React.ForwardRefExoticComponent<import("./ContextMenu.types").ContextMenuSeparatorProps & React.RefAttributes<HTMLDivElement>>;
     Label: React.ForwardRefExoticComponent<import("./ContextMenu.types").ContextMenuLabelProps & React.RefAttributes<HTMLDivElement>>;
 };

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

@@ -3,11 +3,11 @@ import { useState, useRef, useCallback, useEffect } from 'react';
 import { cn } from '../../../utils/cn.js';
 import { ContextMenuContext } from './ContextMenuContext.js';
 import { ContextMenuTrigger } from './ContextMenuTrigger.js';
-import { ContextMenuContent } from './ContextMenuContent.js';
+import { ContextMenuBody } from './ContextMenuBody.js';
 import { ContextMenuItem } from './ContextMenuItem.js';
 import { ContextMenuSub } from './ContextMenuSub.js';
 import { ContextMenuSubTrigger } from './ContextMenuSubTrigger.js';
-import { ContextMenuSubContent } from './ContextMenuSubContent.js';
+import { ContextMenuSubBody } from './ContextMenuSubBody.js';
 import { ContextMenuSeparator } from './ContextMenuSeparator.js';
 import { ContextMenuLabel } from './ContextMenuLabel.js';
 import { contextMenuTheme } from './ContextMenu.theme.js';
@@ -22,11 +22,11 @@ import { contextMenuTheme } from './ContextMenu.theme.js';
  *   <ContextMenu.Trigger>
  *     <div>Right click here</div>
  *   </ContextMenu.Trigger>
- *   <ContextMenu.Content>
+ *   <ContextMenu.Body>
  *     <ContextMenu.Item shortcut="⌘R">Reload</ContextMenu.Item>
  *     <ContextMenu.Separator />
  *     <ContextMenu.Item checked={true}>Show Bookmarks</ContextMenu.Item>
- *   </ContextMenu.Content>
+ *   </ContextMenu.Body>
  * </ContextMenu>
  * ```
  */
@@ -78,11 +78,11 @@ ContextMenuRoot.displayName = "ContextMenu";
 // Export as a unified component with sub-components
 const ContextMenu = Object.assign(ContextMenuRoot, {
     Trigger: ContextMenuTrigger,
-    Content: ContextMenuContent,
+    Body: ContextMenuBody,
     Item: ContextMenuItem,
     Sub: ContextMenuSub,
     SubTrigger: ContextMenuSubTrigger,
-    SubContent: ContextMenuSubContent,
+    SubBody: ContextMenuSubBody,
     Separator: ContextMenuSeparator,
     Label: ContextMenuLabel,
 });

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

@@ -26,7 +26,7 @@ export interface ContextMenuTriggerProps {
     className?: string;
     disabled?: boolean;
 }
-export interface ContextMenuContentProps extends React.HTMLAttributes<HTMLDivElement> {
+export interface ContextMenuBodyProps extends React.HTMLAttributes<HTMLDivElement> {
     children: ReactNode;
     className?: string;
     animation?: boolean;
@@ -53,7 +53,7 @@ export interface ContextMenuSubTriggerProps extends React.HTMLAttributes<HTMLDiv
     className?: string;
     disabled?: boolean;
 }
-export interface ContextMenuSubContentProps extends React.HTMLAttributes<HTMLDivElement> {
+export interface ContextMenuSubBodyProps extends React.HTMLAttributes<HTMLDivElement> {
     children: ReactNode;
     className?: string;
     animation?: boolean;

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/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/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

@@ -16,8 +16,8 @@ export declare const Drawer: {
         ({ 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;
+    Body: {
+        ({ children, className, ...props }: import("./Drawer.types").DrawerBodyProps): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
     Footer: {

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

@@ -8,7 +8,7 @@ import { drawerOverlayAnimations, getDrawerContentAnimations } from './Drawer.an
 import { DrawerHeader } from './DrawerHeader.js';
 import { DrawerTitle } from './DrawerTitle.js';
 import { DrawerSubtitle } from './DrawerSubtitle.js';
-import { DrawerContent } from './DrawerContent.js';
+import { DrawerBody } from './DrawerBody.js';
 import { DrawerFooter } from './DrawerFooter.js';
 
 // Create context for Drawer components
@@ -43,7 +43,18 @@ const DrawerRoot = ({ isOpen, onClose, title, subtitle, icon, position = "right"
         theme,
         titleId,
         subtitleId,
-    }), [isOpen, onClose, position, size, closeOnOverlayClick, closeOnEsc, showCloseButton, 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;
@@ -52,19 +63,27 @@ const DrawerRoot = ({ isOpen, onClose, title, subtitle, icon, position = "right"
     });
     // Auto-generate header when using prop shorthand (backward compat)
     const shouldAutoRenderHeader = !hasCompoundHeader && (title || showCloseButton);
-    // Get size variant based on position
+    // 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];
-    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: {
+    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.inner, children: [shouldAutoRenderHeader && (jsxs(DrawerHeader, { icon: icon, children: [title && jsx(DrawerTitle, { children: title }), subtitle && jsx(DrawerSubtitle, { children: subtitle })] })), 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
@@ -72,7 +91,7 @@ const Drawer = Object.assign(DrawerRoot, {
     Header: DrawerHeader,
     Title: DrawerTitle,
     Subtitle: DrawerSubtitle,
-    Content: DrawerContent,
+    Body: DrawerBody,
     Footer: DrawerFooter,
 });
 

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

@@ -10,7 +10,7 @@ const drawerTheme = {
     headerContent: "flex items-start gap-3 flex-1 min-w-0",
     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",
+    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-border)]",
 };

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

@@ -1,6 +1,8 @@
 import React from "react";
 export type DrawerPosition = "left" | "right" | "top" | "bottom";
-export type DrawerSize = "sm" | "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;
@@ -9,7 +11,7 @@ export interface DrawerTheme {
     headerContent: string;
     title: string;
     subtitle: string;
-    content: string;
+    body: string;
     footer: string;
 }
 export interface DrawerThemeOverrides {
@@ -20,7 +22,7 @@ export interface DrawerThemeOverrides {
     headerContent?: string;
     title?: string;
     subtitle?: string;
-    content?: string;
+    body?: string;
     footer?: string;
 }
 export interface DrawerContextValue {
@@ -39,9 +41,9 @@ export interface DrawerProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
     isOpen: boolean;
     onClose: () => void;
     /** Title text displayed in the drawer header */
-    title?: string;
+    title?: React.ReactNode;
     /** Subtitle text displayed below the title */
-    subtitle?: string;
+    subtitle?: React.ReactNode;
     /** Icon displayed to the left of the title/description */
     icon?: React.ReactNode;
     position?: DrawerPosition;
@@ -75,7 +77,7 @@ export interface DrawerSubtitleProps extends React.HTMLAttributes<HTMLParagraphE
     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/DrawerBody.js

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

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

@@ -1,2 +1,3 @@
 export { Drawer } from "./Drawer";
-export type { DrawerProps, DrawerPosition, DrawerSize, DrawerThemeOverrides, DrawerHeaderProps, DrawerTitleProps, DrawerSubtitleProps, DrawerContentProps, DrawerFooterProps, } 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.types.d.ts

@@ -59,16 +59,16 @@ export interface DropdownItemProps extends Omit<React.HTMLAttributes<HTMLDivElem
     className?: string;
     startContent?: ReactNode;
     endContent?: ReactNode;
-    subtitle?: 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> {

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

@@ -8,7 +8,9 @@ import { useDropdownContext } from './DropdownContext.js';
  */
 const DropdownSection = React__default.forwardRef(({ children, className, title, showDivider = false, ...props }, ref) => {
     const { theme } = useDropdownContext();
-    return (jsxs(Fragment, { children: [showDivider && jsx("div", { className: theme.separatorStyle, role: "separator" }), jsxs("div", { ref: ref, role: "group", "aria-label": title, className: cn(theme.sectionStyle, className), ...props, children: [title && (jsx("div", { className: theme.sectionTitleStyle, role: "presentation", children: title })), children] })] }));
+    return (jsxs(Fragment, { children: [showDivider && jsx("div", { className: theme.separatorStyle, role: "separator" }), jsxs("div", { ref: ref, role: "group", "aria-label": typeof title === 'string' ? title : undefined, className: cn(theme.sectionStyle, className), ...props, children: [title && (typeof title === 'string'
+                        ? jsx("div", { className: theme.sectionTitleStyle, role: "presentation", children: title })
+                        : title), children] })] }));
 });
 DropdownSection.displayName = "DropdownSection";
 

package/dist/components/core/MenuItem/MenuItem.js

@@ -26,7 +26,9 @@ const MenuItem = React__default.forwardRef(({ children, className, startContent,
             handleClick();
         }
     }, [handleClick]);
-    return (jsxs("div", { ref: ref, role: role, tabIndex: disabled ? undefined : -1, "aria-disabled": disabled, "data-focused": isFocused, "data-disabled": disabled, className: cn(theme.baseStyle, theme.focusStyle, isDanger && theme.dangerStyle, className), onClick: handleClick, onKeyDown: handleKeyDown, onFocus: () => setIsFocused(true), onBlur: () => setIsFocused(false), ...props, children: [startContent && (jsx("div", { className: "flex items-center justify-center flex-shrink-0", children: startContent })), jsxs("div", { className: "flex-1 min-w-0", children: [jsxs("div", { className: "flex items-center justify-between gap-2", children: [jsx("span", { className: "truncate", children: children }), shortcut && (jsx("span", { className: "ml-auto flex-shrink-0", children: shortcut }))] }), subtitle && jsx("div", { className: theme.subtitleStyle, children: subtitle })] }), endContent && (jsx("div", { className: "flex items-center justify-center ml-2", children: endContent }))] }));
+    return (jsxs("div", { ref: ref, role: role, tabIndex: disabled ? undefined : -1, "aria-disabled": disabled, "data-focused": isFocused, "data-disabled": disabled, className: cn(theme.baseStyle, theme.focusStyle, isDanger && theme.dangerStyle, className), onClick: handleClick, onKeyDown: handleKeyDown, onFocus: () => setIsFocused(true), onBlur: () => setIsFocused(false), ...props, children: [startContent && (jsx("div", { className: "flex items-center justify-center flex-shrink-0", children: startContent })), jsxs("div", { className: "flex-1 min-w-0", children: [jsxs("div", { className: "flex items-center justify-between gap-2", children: [jsx("span", { className: "truncate", children: children }), shortcut && (jsx("span", { className: "ml-auto flex-shrink-0", children: shortcut }))] }), subtitle && (typeof subtitle === 'string'
+                        ? jsx("div", { className: theme.subtitleStyle, children: subtitle })
+                        : subtitle)] }), endContent && (jsx("div", { className: "flex items-center justify-center ml-2", children: endContent }))] }));
 });
 MenuItem.displayName = "MenuItem";
 

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

@@ -10,7 +10,7 @@ export interface MenuItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>
     /** Icon or element at the end (right side) */
     endContent?: ReactNode;
     /** Secondary text below the label */
-    subtitle?: string;
+    subtitle?: ReactNode;
     /** Keyboard shortcut display */
     shortcut?: ReactNode;
     /** Whether the item is disabled */