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

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

@@ -1,4 +1,4 @@
-import { useState, useRef, useCallback } from 'react';
+import { useState, useRef, useEffect, useCallback } from 'react';
 
 /**
  * Custom hook for managing ripple effects on button clicks
@@ -21,6 +21,13 @@ function useRipple(config = {}) {
     const { scale = 10, duration = 600, effect = 'default' } = config;
     const [ripples, setRipples] = useState([]);
     const buttonRef = useRef(null);
+    const timeoutsRef = useRef([]);
+    // Cleanup all pending timeouts on unmount
+    useEffect(() => {
+        return () => {
+            timeoutsRef.current.forEach(clearTimeout);
+        };
+    }, []);
     const createRipple = useCallback((event) => {
         const button = buttonRef.current;
         if (!button)
@@ -44,12 +51,14 @@ function useRipple(config = {}) {
                 maxDuration = 800; // Longest layer duration
                 break;
             case 'particle':
-                // Multiple small ripples at random offsets
+                // Multiple small ripples at random offsets (random values stored for stable renders)
                 newRipples = Array.from({ length: 6 }, (_, i) => ({
                     id: baseId + i,
                     x: x + (Math.random() - 0.5) * 20,
                     y: y + (Math.random() - 0.5) * 20,
                     layer: i + 1,
+                    randomScale: Math.random(),
+                    randomDuration: Math.random(),
                 }));
                 maxDuration = 700;
                 break;
@@ -75,12 +84,11 @@ function useRipple(config = {}) {
                 newRipples = [{ id: baseId, x, y, layer: 1 }];
                 maxDuration = 800;
                 // Spawn echo ripples with delays
-                setTimeout(() => {
+                timeoutsRef.current.push(setTimeout(() => {
                     setRipples((prev) => [...prev, { id: baseId + 10, x, y, layer: 2 }]);
-                }, 100);
-                setTimeout(() => {
+                }, 100), setTimeout(() => {
                     setRipples((prev) => [...prev, { id: baseId + 20, x, y, layer: 3 }]);
-                }, 200);
+                }, 200));
                 break;
             case 'default':
             default:
@@ -91,9 +99,9 @@ function useRipple(config = {}) {
         }
         setRipples((prev) => [...prev, ...newRipples]);
         // Auto-remove all ripples after longest animation completes
-        setTimeout(() => {
+        timeoutsRef.current.push(setTimeout(() => {
             setRipples((prev) => prev.filter((r) => r.id < baseId || r.id > baseId + 30));
-        }, maxDuration);
+        }, maxDuration));
     }, [duration, effect]);
     return {
         ripples,
@@ -124,8 +132,6 @@ function getRippleColorClass(variant, color) {
             return "bg-[var(--color-danger)]/20";
         case "neutral":
             return "bg-[var(--color-neutral-500)]/20";
-        case "muted":
-            return "bg-[var(--color-text-muted)]/20";
         default:
             return "bg-[var(--color-primary)]/20";
     }
@@ -133,7 +139,9 @@ function getRippleColorClass(variant, color) {
 /**
  * Get animation properties for specific ripple effect and layer
  */
-function getRippleAnimation(effect, layer, baseScale) {
+function getRippleAnimation(effect, ripple, baseScale) {
+    var _a, _b, _c;
+    const layer = (_a = ripple.layer) !== null && _a !== void 0 ? _a : 1;
     switch (effect) {
         case 'aurora':
             // Triple layer with different speeds and opacities
@@ -158,15 +166,17 @@ function getRippleAnimation(effect, layer, baseScale) {
                     transition: { duration: 0.8, ease: "easeOut" },
                 };
             }
-        case 'particle':
-            // Random scales and staggered delays
-            const randomScale = baseScale * (0.7 + Math.random() * 0.6);
-            const randomDelay = layer * 0.025;
+        case 'particle': {
+            // Use pre-computed random values from ripple creation for stable renders
+            const particleScale = baseScale * (0.7 + ((_b = ripple.randomScale) !== null && _b !== void 0 ? _b : 0.5) * 0.6);
+            const particleDelay = layer * 0.025;
+            const particleDuration = 0.5 + ((_c = ripple.randomDuration) !== null && _c !== void 0 ? _c : 0.5) * 0.2;
             return {
                 initial: { scale: 0, opacity: 0.6 },
-                animate: { scale: randomScale, opacity: 0 },
-                transition: { duration: 0.5 + Math.random() * 0.2, ease: "easeOut", delay: randomDelay },
+                animate: { scale: particleScale, opacity: 0 },
+                transition: { duration: particleDuration, ease: "easeOut", delay: particleDelay },
             };
+        }
         case 'glass':
             if (layer === 1) {
                 // Outer expanding ring

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

@@ -3,7 +3,7 @@ import { ButtonColor, ButtonVariant, ButtonSize, ButtonState } from "./Button.ty
  * Theme structure for the Button component using variant-first organization
  * This structure enables reliable dark: variants and className overrides
  */
-interface ButtonTheme {
+export interface ButtonTheme {
     baseStyle: string;
     variantStyles: Record<ButtonVariant, string>;
     variantColors: {
@@ -24,4 +24,3 @@ interface ButtonTheme {
  * Default theme for the Button component
  */
 export declare const buttonTheme: ButtonTheme;
-export {};

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-sm md: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-sm md: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-sm 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-sm md: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-base md: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-base md:text-lg h-fit",
+            link: "font-semibold p-0 text-lg h-fit",
         },
     },
     // State styles

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

@@ -1,2 +1,4 @@
 export { Button } from './Button';
 export * from './Button.types';
+export { useRipple, getRippleColorClass, getRippleAnimation } from './Button.ripple';
+export type { RippleEffectType, RippleConfig, Ripple } from './Button.ripple';

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,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)] [&>*+*]:pt-0",
-    headerStyle: "flex flex-col space-y-1.5 p-4 md:p-6",
-    titleStyle: "text-base md:text-lg font-semibold leading-none text-[var(--color-text-primary)]",
-    subtitleStyle: "text-sm md:text-base text-[var(--color-text-muted)]",
-    contentStyle: "p-4 md:p-6",
-    footerStyle: "flex items-center p-4 md:p-6",
+    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 p-6",
+    titleStyle: "text-lg font-semibold leading-none text-[var(--color-text-primary)]",
+    subtitleStyle: "text-base text-[var(--color-text-muted)] mt-1.5",
+    bodyStyle: "p-6 pt-0",
+    footerStyle: "flex items-center p-6 pt-0",
 };
 
 export { cardTheme };

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> {
@@ -39,28 +39,23 @@ export interface CardProps extends HTMLAttributes<HTMLDivElement> {
 }
 export interface CardComponent extends ForwardRefExoticComponent<CardProps & RefAttributes<HTMLDivElement>> {
     Header: ForwardRefExoticComponent<CardHeaderProps & RefAttributes<HTMLDivElement>>;
-    Title: ForwardRefExoticComponent<CardTitleProps & RefAttributes<HTMLHeadingElement>>;
-    Subtitle: ForwardRefExoticComponent<CardSubtitleProps & RefAttributes<HTMLParagraphElement>>;
-    Content: ForwardRefExoticComponent<CardContentProps & RefAttributes<HTMLDivElement>>;
+    Title: ForwardRefExoticComponent<CardTitleProps & RefAttributes<HTMLDivElement>>;
+    Subtitle: ForwardRefExoticComponent<CardSubtitleProps & RefAttributes<HTMLDivElement>>;
+    Body: ForwardRefExoticComponent<CardBodyProps & 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;
+export interface CardBodyProps extends HTMLAttributes<HTMLDivElement> {
     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 CardSubtitleProps extends HTMLAttributes<HTMLParagraphElement> {
-    children: ReactNode;
+export interface CardSubtitleProps extends HTMLAttributes<HTMLDivElement> {
     className?: string;
 }

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

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

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, 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: {