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

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.content, 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.d.ts

@@ -20,11 +20,13 @@ export declare const drawerPositionVariantsFullWidth: {
 };
 export declare const drawerSizeVariants: {
     horizontal: {
+        sm: string;
         md: string;
         lg: string;
         full: string;
     };
     vertical: {
+        sm: string;
         md: string;
         lg: string;
         full: string;

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

@@ -5,39 +5,41 @@ const drawerTheme = {
         "border border-[var(--color-border)] ring-4 ring-white/10 " +
         "flex flex-col overflow-hidden rounded-[var(--drawer-radius)] " +
         "dark:bg-[var(--color-background-secondary)] dark:ring-white/5",
-    content: "h-full flex flex-col",
+    inner: "h-full flex flex-col",
     header: "flex items-start justify-between p-4 border-b border-[var(--color-border)] shrink-0 text-[var(--color-text-primary)] gap-4",
     headerContent: "flex items-start gap-3 flex-1 min-w-0",
     title: "text-lg font-semibold leading-6 text-[var(--color-text-primary)]",
     subtitle: "text-base text-[var(--color-text-secondary)] mt-0.5",
     body: "flex-1 overflow-y-auto p-4",
     footer: "flex items-center justify-end gap-3 p-4 border-t border-[var(--color-border)] shrink-0 " +
-        "dark:border-[var(--color-neutral-700)]",
+        "dark:border-[var(--color-border)]",
 };
 // Position variants with margin support
 const drawerPositionVariantsWithMargin = {
-    left: "left-6 top-6 h-[calc(100vh-3rem)]", // 100vh - 1.5rem top - 1.5rem bottom
-    right: "right-6 top-6 h-[calc(100vh-3rem)]",
-    top: "top-6 left-6 w-[calc(100vw-3rem)]",
-    bottom: "bottom-6 left-6 w-[calc(100vw-3rem)]",
+    left: "left-0 top-0 h-full", // 100vh - 1.5rem top - 1.5rem bottom
+    right: "right-0 top-0 h-full",
+    top: "top-0 left-0 w-full",
+    bottom: "bottom-0 left-0 w-full",
 };
 // Position variants for full-width/height drawers with consistent margins
 const drawerPositionVariantsFullWidth = {
-    left: "left-6 top-6 right-6 bottom-6", // Consistent margins on all sides
-    right: "right-6 top-6 left-6 bottom-6",
-    top: "top-6 left-6 right-6 bottom-6",
-    bottom: "bottom-6 left-6 right-6 top-6",
+    left: "left-0 top-0 right-0 bottom-0", // Consistent margins on all sides
+    right: "right-0 top-0 left-0 bottom-0",
+    top: "top-0 left-0 right-0 bottom-0",
+    bottom: "bottom-0 left-0 right-0 top-0",
 };
 // Size variants based on position
 const drawerSizeVariants = {
     // Horizontal drawers (left/right)
     horizontal: {
+        sm: "w-[min(320px,90vw)]", // 320px on large screens, max 90% on small
         md: "w-[min(420px,90vw)]", // 420px on large screens, max 90% on small
         lg: "w-[min(560px,85vw)]", // 560px on large screens, max 85% on small
         full: "w-full", // Full width - positioning handles margins
     },
     // Vertical drawers (top/bottom)
     vertical: {
+        sm: "h-[min(240px,90vh)]", // 240px on large screens, max 90% on small
         md: "h-[min(320px,90vh)]", // 320px on large screens, max 90% on small
         lg: "h-[min(448px,85vh)]", // 448px on large screens, max 85% on small
         full: "h-full", // Full height - positioning handles margins

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

@@ -1,10 +1,12 @@
 import React from "react";
 export type DrawerPosition = "left" | "right" | "top" | "bottom";
-export type DrawerSize = "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;
-    content: string;
+    inner: string;
     header: string;
     headerContent: string;
     title: string;
@@ -15,7 +17,7 @@ export interface DrawerTheme {
 export interface DrawerThemeOverrides {
     overlay?: string;
     container?: string;
-    content?: string;
+    inner?: string;
     header?: string;
     headerContent?: string;
     title?: string;
@@ -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/{DrawerContent.js → DrawerBody.js}

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

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

@@ -2,6 +2,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { cn } from '../../../utils/cn.js';
 import { useDrawerContext } from './Drawer.js';
 import { Button } from '../Button/Button.js';
+import 'react';
 import { XMarkIcon } from '@heroicons/react/24/outline';
 
 const DrawerHeader = ({ children, icon, showCloseButton, className, ...props }) => {

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

@@ -4,7 +4,7 @@ import { useDrawerContext } from './Drawer.js';
 
 const DrawerTitle = ({ children, className, ...props }) => {
     const { theme, titleId } = useDrawerContext();
-    return (jsx("div", { id: titleId, className: cn(theme.title, className), ...props, children: children }));
+    return (jsx("h2", { id: titleId, className: cn(theme.title, className), ...props, children: children }));
 };
 DrawerTitle.displayName = "Drawer.Title";
 

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, } 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 */

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/Modal/ModalHeader.js

@@ -2,6 +2,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { cn } from '../../../utils/cn.js';
 import { useModalContext } from './Modal.js';
 import { Button } from '../Button/Button.js';
+import 'react';
 import { XMarkIcon } from '@heroicons/react/24/outline';
 
 const ModalHeader = ({ children, icon, showCloseButton, className, ...props }) => {

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;