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

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

@@ -2,7 +2,7 @@ import React from "react";
 import { MessageProps } from "./Message.types";
 export declare const Message: React.ForwardRefExoticComponent<MessageProps & React.RefAttributes<HTMLDivElement>> & {
     Avatar: React.ForwardRefExoticComponent<import("./MessageAvatar").MessageAvatarComponentProps & React.RefAttributes<HTMLDivElement>>;
-    Content: React.ForwardRefExoticComponent<import("./MessageContent").MessageContentProps & React.RefAttributes<HTMLDivElement>>;
+    Body: React.ForwardRefExoticComponent<import("./MessageBody").MessageBodyProps & React.RefAttributes<HTMLDivElement>>;
     Actions: React.ForwardRefExoticComponent<import("./MessageActions").MessageActionsProps & React.RefAttributes<HTMLDivElement>>;
     Timestamp: React.ForwardRefExoticComponent<import("./MessageTimestamp").MessageTimestampProps & React.RefAttributes<HTMLDivElement>>;
     List: React.ForwardRefExoticComponent<import("./MessageList.types").MessageListProps & React.RefAttributes<import("..").ScrollAreaRef>>;

package/dist/components/core/Message/Message.js

@@ -9,7 +9,7 @@ import { motion } from 'motion/react';
 import { DocumentDuplicateIcon, ArrowPathIcon } from '@heroicons/react/24/outline';
 import { MessageContext } from './MessageContext.js';
 import { MessageAvatar } from './MessageAvatar.js';
-import { MessageContent } from './MessageContent.js';
+import { MessageBody } from './MessageBody.js';
 import { MessageActions } from './MessageActions.js';
 import { MessageTimestamp } from './MessageTimestamp.js';
 import { MessageList } from './MessageList.js';
@@ -106,7 +106,7 @@ MessageRoot.displayName = "Message";
 // Attach compound components
 const Message = Object.assign(MessageRoot, {
     Avatar: MessageAvatar,
-    Content: MessageContent,
+    Body: MessageBody,
     Actions: MessageActions,
     Timestamp: MessageTimestamp,
     List: MessageList,

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

@@ -47,7 +47,7 @@ export interface MessageProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
     variant?: MessageVariant;
     /**
      * The message content (supports rich content, markdown, etc.)
-     * Note: Optional when using compound API with Message.Content
+     * Note: Optional when using compound API with Message.Body
      */
     content?: ReactNode;
     /**

package/dist/components/core/Message/MessageBody.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export interface MessageBodyProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * The message content
+     */
+    children: React.ReactNode;
+}
+export declare const MessageBody: React.ForwardRefExoticComponent<MessageBodyProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/core/Message/{MessageContent.js → MessageBody.js}

@@ -5,7 +5,7 @@ import { useMessageContext } from './MessageContext.js';
 import { messageTheme } from './Message.theme.js';
 import { TypeWriter } from './TypeWriter.js';
 
-const MessageContent = React__default.forwardRef(({ children, className, ...props }, ref) => {
+const MessageBody = React__default.forwardRef(({ children, className, ...props }, ref) => {
     const { variant, role, isStreaming, typingSpeed } = useMessageContext();
     // Get variant-specific theme
     const variantTheme = messageTheme.variants[variant];
@@ -17,6 +17,6 @@ const MessageContent = React__default.forwardRef(({ children, className, ...prop
         typeof children === 'string';
     return (jsx("div", { ref: ref, className: bubbleStyle, ...props, children: shouldAnimate ? (jsx(TypeWriter, { text: children, speed: typingSpeed, enabled: true, className: "break-words" })) : typeof children === 'string' ? (jsx("p", { className: "break-words", children: children })) : (children) }));
 });
-MessageContent.displayName = 'Message.Content';
+MessageBody.displayName = 'Message.Body';
 
-export { MessageContent };
+export { MessageBody };

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

@@ -5,3 +5,5 @@ export { messageListTheme } from './MessageList.theme';
 export type { MessageListProps, MessageListTheme, MessageListThemeOverrides, } from './MessageList.types';
 export { TypeWriter } from './TypeWriter';
 export type { TypeWriterProps } from './TypeWriter';
+export { MessageBody } from './MessageBody';
+export type { MessageBodyProps } from './MessageBody';

package/dist/components/core/Modal/Modal.js

@@ -32,6 +32,9 @@ const ModalRoot = ({ isOpen, onClose, size = "md", variant = "default", closeOnO
             setIsBodyScrollable(false);
         }
     }, [isOpen]);
+    // Detect whether size is a preset token or an arbitrary Tailwind class
+    const SIZE_TOKENS = ["sm", "md", "lg", "xl", "full"];
+    const isSizeToken = SIZE_TOKENS.includes(size);
     // Merge theme with overrides
     const theme = {
         ...modalTheme,
@@ -46,6 +49,7 @@ const ModalRoot = ({ isOpen, onClose, size = "md", variant = "default", closeOnO
         isOpen,
         onClose,
         size,
+        isSizeToken,
         closeOnOverlayClick,
         closeOnEsc,
         showCloseButton,
@@ -55,7 +59,7 @@ const ModalRoot = ({ isOpen, onClose, size = "md", variant = "default", closeOnO
         titleId,
         subtitleId,
     };
-    return (jsx(Overlay, { isOpen: isOpen, onClose: onClose, closeOnOverlayClick: closeOnOverlayClick, closeOnEsc: closeOnEsc, position: "center", role: role, ariaModal: true, ariaLabelledBy: titleId, ariaDescribedBy: subtitleId, contentClassName: cn(theme.container, (_a = theme.containerVariants) === null || _a === void 0 ? void 0 : _a[variant], modalSizeVariants[size], className), animations: {
+    return (jsx(Overlay, { isOpen: isOpen, onClose: onClose, closeOnOverlayClick: closeOnOverlayClick, closeOnEsc: closeOnEsc, position: "center", role: role, ariaModal: true, ariaLabelledBy: titleId, ariaDescribedBy: subtitleId, contentClassName: cn(theme.container, (_a = theme.containerVariants) === null || _a === void 0 ? void 0 : _a[variant], isSizeToken ? modalSizeVariants[size] : size, className), animations: {
             overlay: modalOverlayAnimations,
             content: modalContentAnimations,
         }, ...props, children: jsx(ModalContext.Provider, { value: contextValue, children: children }) }));

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

@@ -9,7 +9,7 @@ const modalTheme = {
     header: "flex items-start justify-between p-6 pb-0 shrink-0 border-b border-transparent gap-6 relative",
     headerContent: "flex flex-col items-start gap-2 flex-1",
     title: "text-lg leading-6 font-semibold text-[var(--color-text-primary)]",
-    subtitle: "text-base text-[var(--color-text-secondary)] mt-0.5",
+    subtitle: "text-base text-[var(--color-text-muted)] mt-0.5",
     body: "flex-1 overflow-y-auto p-6 pb-3",
     footer: "flex items-center justify-end gap-2 p-6 py-3 border-t border-transparent",
 };

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

@@ -1,5 +1,7 @@
 import React from "react";
-export type ModalSize = "sm" | "md" | "lg" | "xl" | "full";
+export type ModalSizeToken = "sm" | "md" | "lg" | "xl" | "full";
+/** Preset size token or any arbitrary Tailwind width class, e.g. `"w-80"`, `"w-[50vw]"` */
+export type ModalSize = ModalSizeToken | (string & {});
 export type ModalVariant = "default" | "translucent";
 export interface ModalTheme {
     overlay: string;
@@ -27,6 +29,7 @@ export interface ModalContextValue {
     isOpen: boolean;
     onClose: () => void;
     size: ModalSize;
+    isSizeToken: boolean;
     closeOnOverlayClick: boolean;
     closeOnEsc: boolean;
     showCloseButton: boolean;
@@ -56,7 +59,7 @@ export interface ModalProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "
      * - `alertdialog`: Alert dialog requiring user acknowledgment
      * @default "dialog"
      */
-    role?: 'dialog' | 'alertdialog';
+    role?: "dialog" | "alertdialog";
     children: React.ReactNode;
     className?: string;
     theme?: ModalThemeOverrides;

package/dist/components/core/ModalStack/ModalStackModal.js

@@ -34,6 +34,7 @@ const ModalStackModal = ({ size = "md", variant = "default", showCloseButton = t
         isOpen: true,
         onClose: closeHandler,
         size,
+        isSizeToken: ["sm", "md", "lg", "xl", "full"].includes(size),
         closeOnOverlayClick: true,
         closeOnEsc: true,
         showCloseButton,

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

@@ -42,7 +42,7 @@ export interface PageHeadingIconProps extends HTMLAttributes<HTMLDivElement> {
 }
 export interface PageHeadingBackButtonProps {
     /** Text label next to the back arrow. @default "Back" */
-    label?: string;
+    label?: ReactNode;
     onClick?: () => void;
     className?: string;
 }

package/dist/components/core/PageHeading/PageHeadingBackButton.js

@@ -5,7 +5,9 @@ import { ArrowLeftIcon } from '@heroicons/react/20/solid';
 import { Button } from '../Button/Button.js';
 
 const PageHeadingBackButton = React__default.forwardRef(({ label = "Back", onClick, className, ...props }, ref) => {
-    return (jsxs(Button, { ref: ref, variant: "link", color: "neutral", size: "sm", onClick: onClick, className: cn("mb-2 w-fit", className), ...props, children: [jsx(ArrowLeftIcon, { className: "size-4" }), label] }));
+    return (jsxs(Button, { ref: ref, variant: "link", color: "neutral", size: "sm", onClick: onClick, className: cn("mb-2 w-fit", className), ...props, children: [jsx(ArrowLeftIcon, { className: "size-4" }), typeof label === 'string'
+                ? jsx("span", { children: label })
+                : label] }));
 });
 PageHeadingBackButton.displayName = "PageHeadingBackButton";
 

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

@@ -2,5 +2,5 @@ import React from "react";
 import { PopoverRootProps as PopoverProps } from "./Popover.types";
 export declare const Popover: (({ children, className, isOpen: controlledIsOpen, defaultIsOpen, onOpenChange, placement, offset, triggerType, closeOnClickOutside, closeOnEsc, preventClose, hasBackdrop, theme: themeOverrides, darkMode, ...props }: PopoverProps) => import("react/jsx-runtime").JSX.Element) & {
     Trigger: React.ForwardRefExoticComponent<Omit<import("./Popover.types").PopoverTriggerProps, "ref"> & React.RefAttributes<any>>;
-    Content: React.ForwardRefExoticComponent<import("./Popover.types").PopoverContentProps & React.RefAttributes<HTMLDivElement>>;
+    Body: React.ForwardRefExoticComponent<import("./Popover.types").PopoverBodyProps & React.RefAttributes<HTMLDivElement>>;
 };

package/dist/components/core/Popover/Popover.js

@@ -3,7 +3,7 @@ import { useId, useState, useRef, useCallback } from 'react';
 import { cn } from '../../../utils/cn.js';
 import { PopoverContext } from './PopoverContext.js';
 import { PopoverTrigger } from './PopoverTrigger.js';
-import { PopoverContent } from './PopoverContent.js';
+import { PopoverBody } from './PopoverBody.js';
 import { popoverTheme } from './Popover.theme.js';
 
 /**
@@ -16,9 +16,9 @@ import { popoverTheme } from './Popover.theme.js';
  *   <Popover.Trigger>
  *     <Button>Open Popover</Button>
  *   </Popover.Trigger>
- *   <Popover.Content>
+ *   <Popover.Body>
  *     <div>Popover content</div>
- *   </Popover.Content>
+ *   </Popover.Body>
  * </Popover>
  * ```
  */
@@ -66,7 +66,7 @@ const PopoverRoot = ({ children, className, isOpen: controlledIsOpen, defaultIsO
 // Export as a unified component
 const Popover = Object.assign(PopoverRoot, {
     Trigger: PopoverTrigger,
-    Content: PopoverContent,
+    Body: PopoverBody,
 });
 
 export { Popover };

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

@@ -3,7 +3,7 @@
  */
 export interface PopoverTheme {
     baseStyle: string;
-    contentStyle: string;
+    bodyStyle: string;
 }
 /**
  * Default theme for the Popover component

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

@@ -4,8 +4,8 @@
 const popoverTheme = {
     // Base styles for the popover
     baseStyle: "z-50 outline-none",
-    // Content styles
-    contentStyle: "bg-[var(--color-surface)] border border-[var(--color-border)] rounded-[var(--popover-radius)] shadow-real-xl p-4 max-w-[min(24rem,calc(100vw-2rem))] dark:bg-[var(--color-background-secondary)] ",
+    // Body styles
+    bodyStyle: "bg-[var(--color-surface)] border border-[var(--color-border)] rounded-[var(--popover-radius)] shadow-real-xl p-4 max-w-[min(24rem,calc(100vw-2rem))] dark:bg-[var(--color-background-secondary)] ",
 };
 
 export { popoverTheme };

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

@@ -44,7 +44,7 @@ export interface PopoverTriggerProps {
     className?: string;
     [key: string]: unknown;
 }
-export interface PopoverContentProps extends React.HTMLAttributes<HTMLDivElement> {
+export interface PopoverBodyProps extends React.HTMLAttributes<HTMLDivElement> {
     children: ReactNode;
     animation?: boolean;
     portal?: boolean;
@@ -61,6 +61,6 @@ export interface PopoverContentProps extends React.HTMLAttributes<HTMLDivElement
 export interface PopoverThemeOverrides {
     /** Base style for the popover */
     baseStyle?: string;
-    /** Content style for the popover */
-    contentStyle?: string;
+    /** Body style for the popover */
+    bodyStyle?: string;
 }

package/dist/components/core/Popover/PopoverBody.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import { PopoverBodyProps } from "./Popover.types";
+/**
+ * PopoverBody component displays the body/content of the popover
+ */
+declare const PopoverBody: React.ForwardRefExoticComponent<PopoverBodyProps & React.RefAttributes<HTMLDivElement>>;
+export { PopoverBody };

package/dist/components/core/Popover/{PopoverContent.js → PopoverBody.js}

@@ -48,9 +48,9 @@ const useDarkMode = () => {
     return isDark;
 };
 /**
- * PopoverContent component displays the content of the popover
+ * PopoverBody component displays the body/content of the popover
  */
-const PopoverContent = React__default.forwardRef(({ children, className, animation = true, portal = true, scrollable = false, maxHeight, ...props }, ref) => {
+const PopoverBody = React__default.forwardRef(({ children, className, animation = true, portal = true, scrollable = false, maxHeight, ...props }, ref) => {
     const { isOpen, onOpenChange, triggerRef, contentRef, placement, offset, triggerType, closeOnClickOutside, closeOnEsc, preventClose, hasBackdrop, theme, contentId, } = usePopoverContext();
     const shouldReduceMotion = useReducedMotion();
     const localRef = useRef(null);
@@ -111,7 +111,7 @@ const PopoverContent = React__default.forwardRef(({ children, className, animati
     const isClient = useIsClient();
     // Extract DOM props to avoid type conflicts with Framer Motion
     const { onDrag, onDragStart, onDragEnd, onAnimationStart, onAnimationEnd, ...domProps } = props;
-    const contentClasses = cn(theme.baseStyle, theme.contentStyle, "popover-content", scrollable && "overflow-y-auto", className);
+    const contentClasses = cn(theme.baseStyle, theme.bodyStyle, "popover-content", scrollable && "overflow-y-auto", className);
     const contentPositionStyle = {
         ...cssVariables,
         position: "fixed",
@@ -137,6 +137,6 @@ const PopoverContent = React__default.forwardRef(({ children, className, animati
     }
     return popoverContent;
 });
-PopoverContent.displayName = "PopoverContent";
+PopoverBody.displayName = "Popover.Body";
 
-export { PopoverContent };
+export { PopoverBody };

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

@@ -1,5 +1,6 @@
 import { Popover } from './Popover';
 import { PopoverContext, usePopoverContext } from './PopoverContext';
-import { PopoverRootProps as PopoverProps, PopoverContentProps, PopoverTriggerProps, PopoverContextValue, PopoverPlacement, PopoverTriggerType, PopoverThemeOverrides } from './Popover.types';
-export { Popover, PopoverContext, usePopoverContext };
-export type { PopoverProps, PopoverContentProps, PopoverTriggerProps, PopoverContextValue, PopoverPlacement, PopoverTriggerType, PopoverThemeOverrides };
+import { PopoverRootProps as PopoverProps, PopoverBodyProps, PopoverTriggerProps, PopoverContextValue, PopoverPlacement, PopoverTriggerType, PopoverThemeOverrides } from './Popover.types';
+import { PopoverBody } from './PopoverBody';
+export { Popover, PopoverBody, PopoverContext, usePopoverContext };
+export type { PopoverProps, PopoverBodyProps, PopoverTriggerProps, PopoverContextValue, PopoverPlacement, PopoverTriggerType, PopoverThemeOverrides };

package/dist/components/core/Tabs/Tabs.animations.d.ts

@@ -17,7 +17,7 @@ export interface UnderlinePosition {
  */
 export declare const getUnderlineTransition: (shouldReduceMotion: boolean | null) => Transition;
 /**
- * Get TabsContent animation variants for directional fade animations
+ * Get TabsBody animation variants for directional fade animations
  * Provides smooth fade-in from bottom and fade-out to top transitions
  */
-export declare const getTabsContentVariants: (shouldReduceMotion: boolean | null) => Variants | undefined;
+export declare const getTabsBodyVariants: (shouldReduceMotion: boolean | null) => Variants | undefined;

package/dist/components/core/Tabs/Tabs.animations.js

@@ -45,10 +45,10 @@ const getUnderlineTransition = (shouldReduceMotion) => {
     };
 };
 /**
- * Get TabsContent animation variants for directional fade animations
+ * Get TabsBody animation variants for directional fade animations
  * Provides smooth fade-in from bottom and fade-out to top transitions
  */
-const getTabsContentVariants = (shouldReduceMotion) => {
+const getTabsBodyVariants = (shouldReduceMotion) => {
     if (shouldReduceMotion !== null && shouldReduceMotion !== void 0 ? shouldReduceMotion : false) {
         // Reduced motion: no animation variants
         return undefined;
@@ -81,4 +81,4 @@ const getTabsContentVariants = (shouldReduceMotion) => {
     };
 };
 
-export { getTabsContentVariants, getTabsTriggerVariants, getUnderlineTransition };
+export { getTabsBodyVariants, getTabsTriggerVariants, getUnderlineTransition };

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

@@ -3,5 +3,5 @@ import { TabsProps } from "./Tabs.types";
 export declare const Tabs: React.ForwardRefExoticComponent<TabsProps & React.RefAttributes<HTMLDivElement>> & {
     List: React.ForwardRefExoticComponent<import("./Tabs.types").TabsListProps & React.RefAttributes<HTMLDivElement>>;
     Trigger: React.ForwardRefExoticComponent<import("./Tabs.types").TabsTriggerProps & React.RefAttributes<HTMLButtonElement>>;
-    Content: React.ForwardRefExoticComponent<import("./Tabs.types").TabsContentProps & React.RefAttributes<HTMLDivElement>>;
+    Body: React.ForwardRefExoticComponent<import("./Tabs.types").TabsBodyProps & React.RefAttributes<HTMLDivElement>>;
 };

package/dist/components/core/Tabs/Tabs.js

@@ -5,11 +5,11 @@ import { tabsTheme } from './Tabs.theme.js';
 import { TabsContext } from './TabsContext.js';
 import { TabsList } from './TabsList.js';
 import { TabsTrigger } from './TabsTrigger.js';
-import { TabsContent } from './TabsContent.js';
+import { TabsBody } from './TabsBody.js';
 
 /**
  * Tabs component for organizing content into separate views
- * Uses compound component pattern with Tabs.List, Tabs.Trigger, and Tabs.Content
+ * Uses compound component pattern with Tabs.List, Tabs.Trigger, and Tabs.Body
  * Supports optional Framer Motion animations and comprehensive accessibility
  */
 const TabsComponent = React__default.forwardRef(({ value, defaultValue, onValueChange, orientation = "horizontal", size = "md", disabled = false, children, className, darkMode = false, ...props }, ref) => {
@@ -84,7 +84,7 @@ TabsComponent.displayName = "Tabs";
 const Tabs = Object.assign(TabsComponent, {
     List: TabsList,
     Trigger: TabsTrigger,
-    Content: TabsContent,
+    Body: TabsBody,
 });
 
 export { Tabs };

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

@@ -7,7 +7,7 @@ export interface TabsTheme {
     listStyle: string;
     triggerStyle: string;
     triggerSizes: Record<TabsSize, string>;
-    contentStyle: string;
+    bodyStyle: string;
     underlineStyle: string;
 }
 /**

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

@@ -13,8 +13,8 @@ const tabsTheme = {
         sm: "px-2 py-1.5 text-base gap-1",
         md: "px-2 py-2 text-base gap-1",
     },
-    // TabsContent styles with proper CSS variables
-    contentStyle: "focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)] focus-visible:ring-offset-2",
+    // TabsBody styles with proper CSS variables
+    bodyStyle: "focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)] focus-visible:ring-offset-2",
     // Sliding underline styles
     underlineStyle: "absolute bottom-0 h-0.5 bg-[var(--color-primary)] transition-none",
 };

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

@@ -23,8 +23,8 @@ export type TabsOrientation = "horizontal";
  *     <Tabs.Trigger value="tab1">Tab 1</Tabs.Trigger>
  *     <Tabs.Trigger value="tab2">Tab 2</Tabs.Trigger>
  *   </Tabs.List>
- *   <Tabs.Content value="tab1">Content 1</Tabs.Content>
- *   <Tabs.Content value="tab2">Content 2</Tabs.Content>
+ *   <Tabs.Body value="tab1">Content 1</Tabs.Body>
+ *   <Tabs.Body value="tab2">Content 2</Tabs.Body>
  * </Tabs>
  *
  * // Uncontrolled mode
@@ -46,7 +46,7 @@ export interface TabsProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'o
     size?: TabsSize;
     /** Whether all tabs are disabled - individual triggers can also be disabled */
     disabled?: boolean;
-    /** Children components - typically Tabs.List and Tabs.Content components */
+    /** Children components - typically Tabs.List and Tabs.Body components */
     children?: React.ReactNode;
     /**
      * Force dark mode styling for the component. Use when placing the component
@@ -98,20 +98,20 @@ export interface TabsTriggerProps extends React.HTMLAttributes<HTMLButtonElement
     'aria-label'?: string;
 }
 /**
- * TabsContent component props - content panel for each tab
+ * TabsBody component props - content panel for each tab
  * @example
  * ```tsx
- * <Tabs.Content value="profile">
+ * <Tabs.Body value="profile">
  *   <UserProfile data={profileData} />
- * </Tabs.Content>
+ * </Tabs.Body>
  *
  * // Force mount content for performance or state preservation
- * <Tabs.Content value="settings" forceMount>
+ * <Tabs.Body value="settings" forceMount>
  *   <SettingsForm /> // Form state preserved when tab is inactive
- * </Tabs.Content>
+ * </Tabs.Body>
  * ```
  */
-export interface TabsContentProps extends React.HTMLAttributes<HTMLDivElement> {
+export interface TabsBodyProps extends React.HTMLAttributes<HTMLDivElement> {
     /** The value that corresponds to a TabsTrigger value - determines when content is shown */
     value: string;
     /** Whether to keep content mounted in DOM when inactive (useful for preserving form state) */

package/dist/components/core/Tabs/TabsBody.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+import { TabsBodyProps } from "./Tabs.types";
+/**
+ * TabsBody component displays content panels for tabs with directional fade animations
+ */
+export declare const TabsBody: React.ForwardRefExoticComponent<TabsBodyProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/core/Tabs/{TabsContent.js → TabsBody.js}

@@ -4,12 +4,12 @@ import { useReducedMotion, motion, AnimatePresence } from 'motion/react';
 import { cn } from '../../../utils/cn.js';
 import { tabsTheme } from './Tabs.theme.js';
 import { useTabsContext } from './TabsContext.js';
-import { getTabsContentVariants } from './Tabs.animations.js';
+import { getTabsBodyVariants } from './Tabs.animations.js';
 
 /**
- * TabsContent component displays content panels for tabs with directional fade animations
+ * TabsBody component displays content panels for tabs with directional fade animations
  */
-const TabsContent = React__default.forwardRef(({ value, forceMount = false, children, className, ...props }, ref) => {
+const TabsBody = React__default.forwardRef(({ value, forceMount = false, children, className, ...props }, ref) => {
     const { value: selectedValue, orientation } = useTabsContext();
     const shouldReduceMotion = useReducedMotion();
     // Check if we're in Storybook and should disable animations
@@ -18,10 +18,10 @@ const TabsContent = React__default.forwardRef(({ value, forceMount = false, chil
     const isSelected = value === selectedValue;
     const shouldRender = forceMount || isSelected;
     // Compute animation variants without a global cache (HMR-safe)
-    const contentVariants = useMemo(() => getTabsContentVariants(shouldDisableAnimations), [shouldDisableAnimations]);
+    const contentVariants = useMemo(() => getTabsBodyVariants(shouldDisableAnimations), [shouldDisableAnimations]);
     // For forceMount, we handle visibility differently to preserve DOM
     if (forceMount) {
-        return (jsx(motion.div, { ref: ref, role: "tabpanel", "aria-labelledby": `${value}-tab`, id: `${value}-content`, tabIndex: 0, className: cn(tabsTheme.contentStyle, !isSelected && "hidden", // Hide when not selected but force mounted
+        return (jsx(motion.div, { ref: ref, role: "tabpanel", "aria-labelledby": `${value}-tab`, id: `${value}-content`, tabIndex: 0, className: cn(tabsTheme.bodyStyle, !isSelected && "hidden", // Hide when not selected but force mounted
             className // User overrides take precedence
             ), "data-state": isSelected ? "active" : "inactive", "data-orientation": orientation, style: {
                 // Ensure proper stacking context for animations
@@ -39,12 +39,12 @@ const TabsContent = React__default.forwardRef(({ value, forceMount = false, chil
         exit: "exit",
         variants: contentVariants,
     };
-    return (jsx(AnimatePresence, { mode: "wait", children: isSelected && (jsx(motion.div, { ref: ref, role: "tabpanel", "aria-labelledby": `${value}-tab`, id: `${value}-content`, tabIndex: 0, className: cn(tabsTheme.contentStyle, className // User overrides take precedence
+    return (jsx(AnimatePresence, { mode: "wait", children: isSelected && (jsx(motion.div, { ref: ref, role: "tabpanel", "aria-labelledby": `${value}-tab`, id: `${value}-content`, tabIndex: 0, className: cn(tabsTheme.bodyStyle, className // User overrides take precedence
             ), "data-state": "active", "data-orientation": orientation, style: {
                 // Ensure proper stacking context for animations
                 position: "relative",
             }, ...animationProps, ...props, children: children }, `content-${value}`)) }));
 });
-TabsContent.displayName = "TabsContent";
+TabsBody.displayName = "Tabs.Body";
 
-export { TabsContent };
+export { TabsBody };

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

@@ -1,6 +1,6 @@
 export { Tabs } from './Tabs';
 export { TabsList } from './TabsList';
 export { TabsTrigger } from './TabsTrigger';
-export { TabsContent } from './TabsContent';
+export { TabsBody } from './TabsBody';
 export { TabsContext, useTabsContext } from './TabsContext';
-export type { TabsProps, TabsListProps, TabsTriggerProps, TabsContentProps, TabsSize, TabsOrientation, TabsContextValue } from './Tabs.types';
+export type { TabsProps, TabsListProps, TabsTriggerProps, TabsBodyProps, TabsSize, TabsOrientation, TabsContextValue } from './Tabs.types';

package/dist/components/core/Toast/Toast.js

@@ -73,7 +73,11 @@ onDismiss, index = 0, isExpanded = false, totalToasts = 1, onMouseEnter, onMouse
     }, [stackingStyle.zIndex, index]);
     const toastNode = (jsxs(motion.div, { ref: setRefs, layout: true, initial: shouldReduceMotion ? false : toastAnimations.initial, animate: animateValue, exit: shouldReduceMotion
             ? { ...toastAnimations.exit, transition: { duration: 0 } }
-            : toastAnimations.exit, transition: shouldReduceMotion ? { duration: 0 } : toastAnimations.transition, className: cn(toastTheme.baseStyle, isTextOnly && 'items-center', ((_a = toastTheme.variants) === null || _a === void 0 ? void 0 : _a[variant]) || "", 'pointer-events-auto', index > 0 && !isExpanded && 'absolute top-0 left-0', className), style: styleValue, role: "alert", "aria-live": "polite", children: [jsx("div", { className: isTextOnly ? toastTheme.iconCenteredStyle : toastTheme.iconStyle, children: resolvedIcon }), jsxs("div", { className: "flex-1 min-w-0", children: [title && (jsx("div", { className: isTextOnly ? toastTheme.textOnlyStyle : toastTheme.titleStyle, children: title })), subtitle && (jsx("div", { className: toastTheme.subtitleStyle, children: subtitle })), action && (jsx("div", { className: "mt-2", children: jsx("button", { type: "button", className: toastTheme.actionStyle, onClick: handleActionClick, children: action.label }) }))] }), dismissible && (jsx("button", { type: "button", className: isTextOnly ? toastTheme.closeButtonCenteredStyle : toastTheme.closeButtonStyle, onClick: handleDismiss, "aria-label": "Dismiss notification", children: jsx(XMarkIcon, { className: "w-4 h-4" }) }))] }));
+            : toastAnimations.exit, transition: shouldReduceMotion ? { duration: 0 } : toastAnimations.transition, className: cn(toastTheme.baseStyle, isTextOnly && 'items-center', ((_a = toastTheme.variants) === null || _a === void 0 ? void 0 : _a[variant]) || "", 'pointer-events-auto', index > 0 && !isExpanded && 'absolute top-0 left-0', className), style: styleValue, role: "alert", "aria-live": "polite", children: [jsx("div", { className: isTextOnly ? toastTheme.iconCenteredStyle : toastTheme.iconStyle, children: resolvedIcon }), jsxs("div", { className: "flex-1 min-w-0", children: [title && (typeof title === 'string'
+                        ? jsx("div", { className: isTextOnly ? toastTheme.textOnlyStyle : toastTheme.titleStyle, children: title })
+                        : title), subtitle && (typeof subtitle === 'string'
+                        ? jsx("div", { className: toastTheme.subtitleStyle, children: subtitle })
+                        : subtitle), action && (jsx("div", { className: "mt-2", children: jsx("button", { type: "button", className: toastTheme.actionStyle, onClick: handleActionClick, children: action.label }) }))] }), dismissible && (jsx("button", { type: "button", className: isTextOnly ? toastTheme.closeButtonCenteredStyle : toastTheme.closeButtonStyle, onClick: handleDismiss, "aria-label": "Dismiss notification", children: jsx(XMarkIcon, { className: "w-4 h-4" }) }))] }));
     if (darkMode) {
         return jsx("div", { className: "dark", children: toastNode });
     }

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

@@ -1,13 +1,13 @@
-import { HTMLAttributes, ReactNode } from 'react';
+import { HTMLAttributes, ReactNode } from "react";
 /**
  * Toast visual variant
  */
-export type ToastVariant = 'default' | 'glass';
+export type ToastVariant = "default" | "glass";
 /**
  * Toast state (e.g., loading indicator)
  */
-export type ToastState = 'default' | 'loading';
-export type ToastPosition = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
+export type ToastState = "default" | "loading";
+export type ToastPosition = "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right";
 export interface ToastAction {
     label: string;
     onClick: () => void;
@@ -42,15 +42,15 @@ export interface ToastData {
     id: string;
     variant?: ToastVariant;
     state?: ToastState;
-    title?: string;
-    subtitle?: string;
+    title?: ReactNode;
+    subtitle?: ReactNode;
     icon?: ReactNode;
     action?: ToastAction;
     duration?: number;
     dismissible?: boolean;
     onDismiss?: () => void;
 }
-export interface ToastProps extends HTMLAttributes<HTMLDivElement> {
+export interface ToastProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
     /** Toast data */
     toast: ToastData;
     /** Custom class name */
@@ -93,7 +93,7 @@ export interface ToastProviderProps {
 }
 export interface ToastContextValue {
     toasts: ToastData[];
-    addToast: (toast: Omit<ToastData, 'id'>) => string;
+    addToast: (toast: Omit<ToastData, "id">) => string;
     removeToast: (id: string) => void;
     removeAllToasts: () => void;
 }
@@ -121,7 +121,7 @@ export interface UseToastReturn {
     info: (title: string, options?: UseToastOptions & {
         subtitle?: string;
     }) => string;
-    loading: (title: string, options?: Omit<UseToastOptions, 'state'> & {
+    loading: (title: string, options?: Omit<UseToastOptions, "state"> & {
         subtitle?: string;
     }) => string;
     dismiss: (id: string) => void;

package/dist/components/core/index.js

@@ -18,11 +18,13 @@ export { CalendarMini } from './Calendar/CalendarMini/CalendarMini.js';
 export { Card } from './Card/Card.js';
 export { CardStack } from './CardStack/CardStack.js';
 export { Carousel } from './Carousel/Carousel.js';
+export { CarouselBody } from './Carousel/CarouselBody.js';
 export { CommandPalette } from './CommandPalette/CommandPalette.js';
 export { commandPaletteTheme } from './CommandPalette/CommandPalette.theme.js';
 export { Separator } from './Separator/Separator.js';
 export { separatorTheme } from './Separator/Separator.theme.js';
 export { Drawer } from './Drawer/Drawer.js';
+export { DrawerBody } from './Drawer/DrawerBody.js';
 export { Dropdown } from './Dropdown/Dropdown.js';
 export { DropdownTrigger } from './Dropdown/DropdownTrigger.js';
 export { DropdownMenu } from './Dropdown/DropdownMenu.js';
@@ -41,6 +43,7 @@ export { PageHeading } from './PageHeading/PageHeading.js';
 export { Pagination } from './Pagination/Pagination.js';
 export { Popover } from './Popover/Popover.js';
 export { PopoverContext, usePopoverContext } from './Popover/PopoverContext.js';
+export { PopoverBody } from './Popover/PopoverBody.js';
 export { Progress } from './Progress/Progress.js';
 export { Rating } from './Rating/Rating.js';
 export { ScrollArea } from './ScrollArea/ScrollArea.js';
@@ -52,7 +55,7 @@ export { SlidingNumber } from './SlidingNumber/SlidingNumber.js';
 export { Tabs } from './Tabs/Tabs.js';
 export { TabsList } from './Tabs/TabsList.js';
 export { TabsTrigger } from './Tabs/TabsTrigger.js';
-export { TabsContent } from './Tabs/TabsContent.js';
+export { TabsBody } from './Tabs/TabsBody.js';
 export { TabsContext, useTabsContext } from './Tabs/TabsContext.js';
 export { Tooltip } from './Tooltip/Tooltip.js';
 export { baseTooltipVariants, getTooltipVariants, tooltipSpringConfig } from './Tooltip/Tooltip.animations.js';
@@ -71,6 +74,7 @@ export { Message } from './Message/Message.js';
 export { messageTheme } from './Message/Message.theme.js';
 export { messageListTheme } from './Message/MessageList.theme.js';
 export { TypeWriter } from './Message/TypeWriter.js';
+export { MessageBody } from './Message/MessageBody.js';
 export { Empty } from './Empty/Empty.js';
 export { emptyTheme } from './Empty/Empty.theme.js';
 export { Masonry } from './Masonry/Masonry.js';
@@ -95,7 +99,7 @@ export { Pill } from './Pill/Pill.js';
 export { pillTheme } from './Pill/Pill.theme.js';
 export { SocialIcon } from './SocialIcon/SocialIcon.js';
 export { AnimatePresence } from 'motion/react';
-export { CardContent } from './Card/CardContent.js';
+export { CardBody } from './Card/CardBody.js';
 export { CardFooter } from './Card/CardFooter.js';
 export { CardHeader } from './Card/CardHeader.js';
 export { CardSubtitle } from './Card/CardSubtitle.js';