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

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

@@ -0,0 +1,78 @@
+import { jsx } from 'react/jsx-runtime';
+import React__default, { useRef, useCallback, useEffect } from 'react';
+import { useReducedMotion, motion, AnimatePresence } from 'motion/react';
+import { cn } from '../../../utils/cn.js';
+import { ScrollArea } from '../ScrollArea/ScrollArea.js';
+import '../ScrollArea/smooth/SmoothScrollEngine.js';
+import { messageListTheme } from './MessageList.theme.js';
+import { getMessageItemVariants } from './MessageList.animations.js';
+
+const MessageList = React__default.forwardRef(({ children, autoScroll = true, scrollThreshold = 100, shouldAnimate = true, className, theme: customTheme, ...props }, ref) => {
+    var _a, _b;
+    const shouldReduceMotion = useReducedMotion();
+    const itemVariants = getMessageItemVariants(shouldReduceMotion, shouldAnimate);
+    const scrollAreaRef = useRef(null);
+    const userHasScrolledRef = useRef(false);
+    const childCountRef = useRef(0);
+    const scrollToBottom = useCallback(() => {
+        const el = scrollAreaRef.current;
+        if (!el)
+            return;
+        el.scrollTop = el.scrollHeight;
+    }, []);
+    const handleScroll = useCallback(() => {
+        const el = scrollAreaRef.current;
+        if (!el)
+            return;
+        const { scrollTop, scrollHeight, clientHeight } = el;
+        const isAtBottom = scrollHeight - scrollTop - clientHeight < scrollThreshold;
+        userHasScrolledRef.current = !isAtBottom;
+    }, [scrollThreshold]);
+    const childCount = React__default.Children.count(children);
+    // Auto-scroll when new children are added
+    useEffect(() => {
+        if (!autoScroll)
+            return;
+        if (childCount > childCountRef.current && !userHasScrolledRef.current) {
+            // rAF ensures AnimatePresence has mounted the new child before measuring
+            requestAnimationFrame(scrollToBottom);
+        }
+        childCountRef.current = childCount;
+    }, [childCount, autoScroll, scrollToBottom]);
+    // Scroll to bottom on initial mount
+    useEffect(() => {
+        scrollToBottom();
+    }, [scrollToBottom]);
+    // Dev warning for missing keys
+    if (process.env.NODE_ENV !== 'production') {
+        React__default.Children.forEach(children, (child) => {
+            if (React__default.isValidElement(child) && child.key === null) {
+                console.warn('[Message.List]: Each child must have a stable key prop for animations to work correctly.');
+            }
+        });
+    }
+    const baseStyle = (_a = customTheme === null || customTheme === void 0 ? void 0 : customTheme.baseStyle) !== null && _a !== void 0 ? _a : messageListTheme.baseStyle;
+    const innerStyle = (_b = customTheme === null || customTheme === void 0 ? void 0 : customTheme.innerStyle) !== null && _b !== void 0 ? _b : messageListTheme.innerStyle;
+    const wrappedChildren = React__default.Children.map(children, (child) => {
+        if (!React__default.isValidElement(child))
+            return child;
+        if (itemVariants) {
+            return (jsx(motion.div, { layout: true, variants: itemVariants, initial: "initial", animate: "animate", exit: "exit", children: child }, child.key));
+        }
+        return jsx("div", { children: child }, child.key);
+    });
+    // Merge internal ref with forwarded ref
+    const setRefs = useCallback((node) => {
+        scrollAreaRef.current = node;
+        if (typeof ref === 'function') {
+            ref(node);
+        }
+        else if (ref) {
+            ref.current = node;
+        }
+    }, [ref]);
+    return (jsx(ScrollArea, { ref: setRefs, type: "hover", orientation: "vertical", className: cn(baseStyle, className), onScroll: handleScroll, role: "log", "aria-live": "polite", ...props, children: jsx("div", { className: innerStyle, children: jsx(AnimatePresence, { mode: "popLayout", initial: false, children: wrappedChildren }) }) }));
+});
+MessageList.displayName = 'Message.List';
+
+export { MessageList };

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

@@ -0,0 +1,2 @@
+import type { MessageListTheme } from './MessageList.types';
+export declare const messageListTheme: MessageListTheme;

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

@@ -0,0 +1,6 @@
+const messageListTheme = {
+    baseStyle: 'w-full',
+    innerStyle: 'flex flex-col gap-2 p-4',
+};
+
+export { messageListTheme };

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

@@ -0,0 +1,32 @@
+import { ReactNode, HTMLAttributes } from 'react';
+export interface MessageListTheme {
+    baseStyle: string;
+    innerStyle: string;
+}
+export interface MessageListThemeOverrides {
+    baseStyle?: string;
+    innerStyle?: string;
+}
+export interface MessageListProps extends HTMLAttributes<HTMLDivElement> {
+    /** Message children to render. Each child must have a stable `key` for animations. */
+    children?: ReactNode;
+    /**
+     * Auto-scroll to bottom when new children are added,
+     * unless the user has manually scrolled up.
+     * @default true
+     */
+    autoScroll?: boolean;
+    /**
+     * Pixels from the bottom to consider "at bottom" for auto-scroll detection.
+     * @default 100
+     */
+    scrollThreshold?: number;
+    /**
+     * Enable enter/exit animations for messages.
+     * Automatically disabled when the OS prefers reduced motion.
+     * @default true
+     */
+    shouldAnimate?: boolean;
+    /** Theme overrides for the list container and inner wrapper. */
+    theme?: MessageListThemeOverrides;
+}

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

@@ -1,5 +1,7 @@
 export { Message } from './Message';
 export type { MessageProps, MessageRole, MessageVariant, MessageAvatarProps, MessageTheme, MessageThemeOverrides, MessageVariantTheme, } from './Message.types';
 export { messageTheme } from './Message.theme';
+export { messageListTheme } from './MessageList.theme';
+export type { MessageListProps, MessageListTheme, MessageListThemeOverrides, } from './MessageList.types';
 export { TypeWriter } from './TypeWriter';
 export type { TypeWriterProps } from './TypeWriter';

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

@@ -14,8 +14,8 @@ export declare const Modal: {
         ({ children, className, ...props }: import("./Modal.types").ModalTitleProps): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
-    Description: {
-        ({ children, className, ...props }: import("./Modal.types").ModalDescriptionProps): import("react/jsx-runtime").JSX.Element;
+    Subtitle: {
+        ({ children, className, ...props }: import("./Modal.types").ModalSubtitleProps): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
     Body: {

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

@@ -6,7 +6,7 @@ import { modalTheme, modalSizeVariants } from './Modal.theme.js';
 import { modalContentAnimations, modalOverlayAnimations } from './Modal.animations.js';
 import { ModalHeader } from './ModalHeader.js';
 import { ModalTitle } from './ModalTitle.js';
-import { ModalDescription } from './ModalDescription.js';
+import { ModalSubtitle } from './ModalSubtitle.js';
 import { ModalBody } from './ModalBody.js';
 import { ModalFooter } from './ModalFooter.js';
 
@@ -23,7 +23,7 @@ const ModalRoot = ({ isOpen, onClose, size = "md", variant = "default", closeOnO
     // Generate unique IDs for ARIA linkage
     const id = useId();
     const titleId = `${id}-title`;
-    const descriptionId = `${id}-description`;
+    const subtitleId = `${id}-subtitle`;
     // State for tracking if modal body is scrollable
     const [isBodyScrollable, setIsBodyScrollable] = useState(false);
     // Reset scroll state when modal closes
@@ -53,9 +53,9 @@ const ModalRoot = ({ isOpen, onClose, size = "md", variant = "default", closeOnO
         isBodyScrollable,
         setIsBodyScrollable,
         titleId,
-        descriptionId,
+        subtitleId,
     };
-    return (jsx(Overlay, { isOpen: isOpen, onClose: onClose, closeOnOverlayClick: closeOnOverlayClick, closeOnEsc: closeOnEsc, position: "center", role: role, ariaModal: true, ariaLabelledBy: titleId, ariaDescribedBy: descriptionId, 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], modalSizeVariants[size], className), animations: {
             overlay: modalOverlayAnimations,
             content: modalContentAnimations,
         }, ...props, children: jsx(ModalContext.Provider, { value: contextValue, children: children }) }));
@@ -65,7 +65,7 @@ ModalRoot.displayName = "Modal";
 const Modal = Object.assign(ModalRoot, {
     Header: ModalHeader,
     Title: ModalTitle,
-    Description: ModalDescription,
+    Subtitle: ModalSubtitle,
     Body: ModalBody,
     Footer: ModalFooter,
 });

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

@@ -8,17 +8,17 @@ 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-base leading-6 font-semibold text-[var(--color-text-primary)]",
-    description: "text-sm text-[var(--color-text-secondary)] mt-0.5",
+    title: "text-lg leading-6 font-semibold text-[var(--color-text-primary)]",
+    subtitle: "text-base text-[var(--color-text-secondary)] 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",
 };
 // Size variants for the modal container
 const modalSizeVariants = {
-    sm: "max-w-sm",
-    md: "max-w-md",
-    lg: "max-w-lg",
-    xl: "max-w-xl",
+    sm: "max-w-sm mx-4 sm:mx-0",
+    md: "max-w-md mx-4 sm:mx-0",
+    lg: "max-w-lg mx-4 sm:mx-0",
+    xl: "max-w-xl mx-4 sm:mx-0",
     full: "max-w-full mx-4",
 };
 

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

@@ -8,7 +8,7 @@ export interface ModalTheme {
     header: string;
     headerContent: string;
     title: string;
-    description: string;
+    subtitle: string;
     body: string;
     footer: string;
 }
@@ -19,7 +19,7 @@ export interface ModalThemeOverrides {
     header?: string;
     headerContent?: string;
     title?: string;
-    description?: string;
+    subtitle?: string;
     body?: string;
     footer?: string;
 }
@@ -34,7 +34,7 @@ export interface ModalContextValue {
     isBodyScrollable: boolean;
     setIsBodyScrollable: (scrollable: boolean) => void;
     titleId: string;
-    descriptionId: string;
+    subtitleId: string;
 }
 export interface ModalProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onClose" | "onAnimationStart" | "onDragStart" | "onDrag" | "onDragEnd"> {
     isOpen: boolean;
@@ -87,7 +87,7 @@ export interface ModalTitleProps extends React.HTMLAttributes<HTMLHeadingElement
     children: React.ReactNode;
     className?: string;
 }
-export interface ModalDescriptionProps extends React.HTMLAttributes<HTMLParagraphElement> {
+export interface ModalSubtitleProps extends React.HTMLAttributes<HTMLParagraphElement> {
     children: React.ReactNode;
     className?: string;
 }

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

@@ -0,0 +1,5 @@
+import { ModalSubtitleProps } from "./Modal.types";
+export declare const ModalSubtitle: {
+    ({ children, className, ...props }: ModalSubtitleProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

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

@@ -0,0 +1,11 @@
+import { jsx } from 'react/jsx-runtime';
+import { cn } from '../../../utils/cn.js';
+import { useModalContext } from './Modal.js';
+
+const ModalSubtitle = ({ children, className, ...props }) => {
+    const { theme, subtitleId } = useModalContext();
+    return (jsx("p", { id: subtitleId, className: cn(theme.subtitle, className), ...props, children: children }));
+};
+ModalSubtitle.displayName = "Modal.Subtitle";
+
+export { ModalSubtitle };

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

@@ -17,11 +17,11 @@ const backModalAnimations = {
         transition: { type: "spring", damping: 28, stiffness: 280 },
     },
     stacked: {
-        opacity: 1,
+        opacity: 0.5,
         scale: 0.9,
-        y: -4,
+        y: 4,
         borderRadius: "var(--modal-radius)",
-        filter: "brightness(0.94) blur(2px)",
+        filter: "brightness(0.94) blur(0px)",
         clipPath: "inset(0% 0% 88% 0%)",
         transition: { type: "spring", damping: 28, stiffness: 280 },
     },

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

@@ -11,7 +11,7 @@ const ModalStackModal = ({ size = "md", variant = "default", showCloseButton = t
     var _a;
     const id = useId();
     const titleId = `${id}-title`;
-    const descriptionId = `${id}-description`;
+    const subtitleId = `${id}-subtitle`;
     const [isBodyScrollable, setIsBodyScrollable] = useState(false);
     const closeHandler = onClose || _stackOnClose || (() => { });
     const backHandler = onBack || onClose || (() => { });
@@ -41,9 +41,9 @@ const ModalStackModal = ({ size = "md", variant = "default", showCloseButton = t
         isBodyScrollable,
         setIsBodyScrollable,
         titleId,
-        descriptionId,
+        subtitleId,
     };
-    return (jsx(ModalContext.Provider, { value: contextValue, children: jsxs("div", { className: cn(theme.container, (_a = theme.containerVariants) === null || _a === void 0 ? void 0 : _a[variant], modalSizeVariants[size], className), role: "dialog", "aria-modal": "true", "aria-labelledby": titleId, "aria-describedby": descriptionId, children: [showBackButton && (jsx("div", { className: cn(modalStackTheme.backButton), children: jsxs(Button, { onClick: backHandler, "aria-label": "Go back", variant: "link", size: "sm", children: [jsx(ArrowLeftIcon, { className: "size-4" }), "Back"] }) })), children] }) }));
+    return (jsx(ModalContext.Provider, { value: contextValue, children: jsxs("div", { className: cn(theme.container, (_a = theme.containerVariants) === null || _a === void 0 ? void 0 : _a[variant], modalSizeVariants[size], className), role: "dialog", "aria-modal": "true", "aria-labelledby": titleId, "aria-describedby": subtitleId, children: [showBackButton && (jsx("div", { className: cn(modalStackTheme.backButton), children: jsxs(Button, { onClick: backHandler, "aria-label": "Go back", variant: "link", size: "sm", children: [jsx(ArrowLeftIcon, { className: "size-4" }), "Back"] }) })), children] }) }));
 };
 ModalStackModal.displayName = "ModalStack.Modal";
 

package/dist/components/core/NavItem/NavItem.js

@@ -104,7 +104,7 @@ description, shortcut, href, onClick, active = false, disabled = false, isDisabl
                     ? React__default.cloneElement(startContent, {
                         className: cn(iconClasses, startContent.props.className),
                     })
-                    : startContent })), (!isInSidebar || !collapsed) && (jsxs("div", { className: "flex-1 min-w-0", children: [jsxs("div", { className: "flex items-center justify-between gap-2", children: [jsx("span", { className: cn("truncate", textClasses), children: children }), shortcut && (jsx("kbd", { className: "hidden group-hover:inline-block text-xs text-[var(--color-text-muted)] font-sans border border-[var(--color-border)] rounded px-1.5 py-0.5", children: shortcut }))] }), description && (jsx("div", { className: "text-xs text-[var(--color-text-muted)] mt-0.5 truncate", children: description }))] })), endContent && (!isInSidebar || !collapsed) && (jsx("div", { className: "flex items-center justify-center flex-shrink-0", children: endContent })), isInSidebar && collapsed && (jsx("span", { className: "sr-only", children: children }))] }));
+                    : startContent })), (!isInSidebar || !collapsed) && (jsxs("div", { className: "flex-1 min-w-0", children: [jsxs("div", { className: "flex items-center justify-between gap-2", children: [jsx("span", { className: cn("truncate", textClasses), children: children }), shortcut && (jsx("kbd", { className: "hidden group-hover:inline-block text-sm text-[var(--color-text-muted)] font-sans border border-[var(--color-border)] rounded px-1.5 py-0.5", children: shortcut }))] }), description && (jsx("div", { className: "text-sm text-[var(--color-text-muted)] mt-0.5 truncate", children: description }))] })), endContent && (!isInSidebar || !collapsed) && (jsx("div", { className: "flex items-center justify-center flex-shrink-0", children: endContent })), isInSidebar && collapsed && (jsx("span", { className: "sr-only", children: children }))] }));
     // Wrap with link if href is provided
     if (href && !actualIsDisabled) {
         const LinkContent = (jsx("a", { href: href, className: "block group", children: content }));

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

@@ -1,5 +1,5 @@
 const navItemTheme = {
-    baseStyle: "relative flex items-center gap-2 px-2 py-1.5 text-sm font-medium cursor-pointer select-none transition-all duration-300 w-full rounded-[var(--nav-item-radius)] outline-none group",
+    baseStyle: "relative flex items-center gap-2 px-2 py-1.5 text-base font-medium cursor-pointer select-none transition-all duration-300 w-full rounded-[var(--nav-item-radius)] outline-none group",
     icon: "size-4 text-[var(--color-text-secondary)]",
     text: "flex-1 min-w-0 truncate",
     states: {

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

@@ -13,10 +13,10 @@ const offlineIndicatorTheme = {
         toast: "px-3 py-2 rounded-[var(--radius-base)] shadow-real-lg",
     },
     offline: "bg-[var(--color-neutral-900)]/90 backdrop-blur-sm text-white",
-    online: "bg-[var(--color-success)]/90 backdrop-blur-sm text-white",
+    online: "bg-[var(--color-success)]/90 backdrop-blur-sm text-[var(--color-success-contrast)]",
     icon: "size-4 flex-shrink-0",
-    message: "text-xs font-medium",
-    queueCount: "text-xs opacity-80 ml-1",
+    message: "text-sm font-medium",
+    queueCount: "text-sm opacity-80 ml-1",
 };
 
 export { offlineIndicatorTheme };

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

@@ -0,0 +1,8 @@
+import { PageHeadingComponent } from "./PageHeading.types";
+import { PageHeadingBackButton } from "./PageHeadingBackButton";
+import { PageHeadingIcon } from "./PageHeadingIcon";
+import { PageHeadingTitle } from "./PageHeadingTitle";
+import { PageHeadingSubtitle } from "./PageHeadingSubtitle";
+import { PageHeadingActions } from "./PageHeadingActions";
+export { PageHeadingBackButton, PageHeadingIcon, PageHeadingTitle, PageHeadingSubtitle, PageHeadingActions, };
+export declare const PageHeading: PageHeadingComponent;

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

@@ -0,0 +1,28 @@
+import { jsx } from 'react/jsx-runtime';
+import React__default, { useMemo } from 'react';
+import { cn } from '../../../utils/cn.js';
+import { pageHeadingTheme } from './PageHeading.theme.js';
+import { PageHeadingBackButton } from './PageHeadingBackButton.js';
+import { PageHeadingIcon } from './PageHeadingIcon.js';
+import { PageHeadingTitle } from './PageHeadingTitle.js';
+import { PageHeadingSubtitle } from './PageHeadingSubtitle.js';
+import { PageHeadingActions } from './PageHeadingActions.js';
+
+const PageHeadingRoot = React__default.forwardRef(({ children, className, separator = true, theme: customTheme = {}, ...props }, ref) => {
+    const theme = useMemo(() => ({
+        ...pageHeadingTheme,
+        ...customTheme,
+    }), [customTheme]);
+    return (jsx("div", { ref: ref, className: cn(theme.baseStyle, separator && theme.separatorStyle, className), ...props, children: children }));
+});
+PageHeadingRoot.displayName = "PageHeading";
+// Create compound component with proper typing
+const PageHeading = Object.assign(PageHeadingRoot, {
+    BackButton: PageHeadingBackButton,
+    Icon: PageHeadingIcon,
+    Title: PageHeadingTitle,
+    Subtitle: PageHeadingSubtitle,
+    Actions: PageHeadingActions,
+});
+
+export { PageHeading, PageHeadingActions, PageHeadingBackButton, PageHeadingIcon, PageHeadingSubtitle, PageHeadingTitle };

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

@@ -0,0 +1,2 @@
+import { PageHeadingTheme } from "./PageHeading.types";
+export declare const pageHeadingTheme: PageHeadingTheme;

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

@@ -0,0 +1,11 @@
+const pageHeadingTheme = {
+    baseStyle: "flex flex-col pb-6 mb-6",
+    headerStyle: "flex items-center gap-4",
+    titleStyle: "text-2xl font-semibold tracking-tight text-[var(--color-text-primary)]",
+    subtitleStyle: "text-base text-[var(--color-text-muted)] mt-1",
+    actionsStyle: "sm:ml-auto flex items-center gap-2 shrink-0",
+    iconStyle: "flex items-center justify-center shrink-0 text-[var(--color-text-muted)]",
+    separatorStyle: "border-b border-[var(--color-border)] mt-4",
+};
+
+export { pageHeadingTheme };

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

@@ -0,0 +1,55 @@
+import { HTMLAttributes, ReactNode, ForwardRefExoticComponent, RefAttributes } from "react";
+export interface PageHeadingTheme {
+    baseStyle: string;
+    headerStyle: string;
+    titleStyle: string;
+    subtitleStyle: string;
+    actionsStyle: string;
+    iconStyle: string;
+    separatorStyle: string;
+}
+export interface PageHeadingThemeOverrides {
+    baseStyle?: string;
+    headerStyle?: string;
+    titleStyle?: string;
+    subtitleStyle?: string;
+    actionsStyle?: string;
+    iconStyle?: string;
+    separatorStyle?: string;
+}
+export interface PageHeadingProps extends HTMLAttributes<HTMLDivElement> {
+    children?: ReactNode;
+    className?: string;
+    /** Show bottom separator. @default true */
+    separator?: boolean;
+    theme?: PageHeadingThemeOverrides;
+}
+export interface PageHeadingTitleProps extends HTMLAttributes<HTMLHeadingElement> {
+    children: ReactNode;
+    className?: string;
+}
+export interface PageHeadingSubtitleProps extends HTMLAttributes<HTMLParagraphElement> {
+    children: ReactNode;
+    className?: string;
+}
+export interface PageHeadingActionsProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+    className?: string;
+}
+export interface PageHeadingIconProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+    className?: string;
+}
+export interface PageHeadingBackButtonProps {
+    /** Text label next to the back arrow. @default "Back" */
+    label?: string;
+    onClick?: () => void;
+    className?: string;
+}
+export interface PageHeadingComponent extends ForwardRefExoticComponent<PageHeadingProps & RefAttributes<HTMLDivElement>> {
+    Title: ForwardRefExoticComponent<PageHeadingTitleProps & RefAttributes<HTMLHeadingElement>>;
+    Subtitle: ForwardRefExoticComponent<PageHeadingSubtitleProps & RefAttributes<HTMLParagraphElement>>;
+    Actions: ForwardRefExoticComponent<PageHeadingActionsProps & RefAttributes<HTMLDivElement>>;
+    Icon: ForwardRefExoticComponent<PageHeadingIconProps & RefAttributes<HTMLDivElement>>;
+    BackButton: ForwardRefExoticComponent<PageHeadingBackButtonProps & RefAttributes<HTMLButtonElement>>;
+}

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

@@ -0,0 +1,3 @@
+import React from "react";
+import { PageHeadingActionsProps } from "./PageHeading.types";
+export declare const PageHeadingActions: React.ForwardRefExoticComponent<PageHeadingActionsProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,11 @@
+import { jsx } from 'react/jsx-runtime';
+import React__default from 'react';
+import { cn } from '../../../utils/cn.js';
+import { pageHeadingTheme } from './PageHeading.theme.js';
+
+const PageHeadingActions = React__default.forwardRef(({ children, className, ...props }, ref) => {
+    return (jsx("div", { ref: ref, className: cn(pageHeadingTheme.actionsStyle, className), ...props, children: children }));
+});
+PageHeadingActions.displayName = "PageHeadingActions";
+
+export { PageHeadingActions };

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

@@ -0,0 +1,3 @@
+import React from "react";
+import { PageHeadingBackButtonProps } from "./PageHeading.types";
+export declare const PageHeadingBackButton: React.ForwardRefExoticComponent<PageHeadingBackButtonProps & React.RefAttributes<HTMLButtonElement>>;

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

@@ -0,0 +1,12 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React__default from 'react';
+import { cn } from '../../../utils/cn.js';
+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] }));
+});
+PageHeadingBackButton.displayName = "PageHeadingBackButton";
+
+export { PageHeadingBackButton };

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

@@ -0,0 +1,3 @@
+import React from "react";
+import { PageHeadingIconProps } from "./PageHeading.types";
+export declare const PageHeadingIcon: React.ForwardRefExoticComponent<PageHeadingIconProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,11 @@
+import { jsx } from 'react/jsx-runtime';
+import React__default from 'react';
+import { cn } from '../../../utils/cn.js';
+import { pageHeadingTheme } from './PageHeading.theme.js';
+
+const PageHeadingIcon = React__default.forwardRef(({ children, className, ...props }, ref) => {
+    return (jsx("div", { ref: ref, className: cn(pageHeadingTheme.iconStyle, className), ...props, children: children }));
+});
+PageHeadingIcon.displayName = "PageHeadingIcon";
+
+export { PageHeadingIcon };

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

@@ -0,0 +1,3 @@
+import React from "react";
+import { PageHeadingSubtitleProps } from "./PageHeading.types";
+export declare const PageHeadingSubtitle: React.ForwardRefExoticComponent<PageHeadingSubtitleProps & React.RefAttributes<HTMLParagraphElement>>;

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

@@ -0,0 +1,11 @@
+import { jsx } from 'react/jsx-runtime';
+import React__default from 'react';
+import { cn } from '../../../utils/cn.js';
+import { pageHeadingTheme } from './PageHeading.theme.js';
+
+const PageHeadingSubtitle = React__default.forwardRef(({ children, className, ...props }, ref) => {
+    return (jsx("p", { ref: ref, className: cn(pageHeadingTheme.subtitleStyle, className), ...props, children: children }));
+});
+PageHeadingSubtitle.displayName = "PageHeadingSubtitle";
+
+export { PageHeadingSubtitle };

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

@@ -0,0 +1,3 @@
+import React from "react";
+import { PageHeadingTitleProps } from "./PageHeading.types";
+export declare const PageHeadingTitle: React.ForwardRefExoticComponent<PageHeadingTitleProps & React.RefAttributes<HTMLHeadingElement>>;

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

@@ -0,0 +1,11 @@
+import { jsx } from 'react/jsx-runtime';
+import React__default from 'react';
+import { cn } from '../../../utils/cn.js';
+import { pageHeadingTheme } from './PageHeading.theme.js';
+
+const PageHeadingTitle = React__default.forwardRef(({ children, className, ...props }, ref) => {
+    return (jsx("h1", { ref: ref, className: cn(pageHeadingTheme.titleStyle, className), ...props, children: children }));
+});
+PageHeadingTitle.displayName = "PageHeadingTitle";
+
+export { PageHeadingTitle };

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

@@ -0,0 +1,2 @@
+export { PageHeading, PageHeadingBackButton, PageHeadingIcon, PageHeadingTitle, PageHeadingSubtitle, PageHeadingActions, } from "./PageHeading";
+export type { PageHeadingProps, PageHeadingTitleProps, PageHeadingSubtitleProps, PageHeadingActionsProps, PageHeadingIconProps, PageHeadingBackButtonProps, PageHeadingTheme, PageHeadingThemeOverrides, PageHeadingComponent, } from "./PageHeading.types";

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

@@ -26,8 +26,8 @@ const paginationTheme = {
         "data-[disabled=true]:opacity-50 data-[disabled=true]:cursor-not-allowed data-[disabled=true]:pointer-events-none",
     // Unified item sizes
     itemSizes: {
-        sm: "size-8 min-w-[2rem] text-sm",
-        md: "size-10 min-w-[2.5rem] text-sm",
+        sm: "size-8 min-w-[2rem] text-base",
+        md: "size-10 min-w-[2.5rem] text-base",
     },
     // Ellipsis styles
     ellipsisStyle: "inline-flex items-center justify-center font-medium text-[var(--color-text-muted)] dark:text-[var(--color-neutral-500)] cursor-default pointer-events-none",

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

@@ -27,9 +27,9 @@ const pillTheme = {
      * Size variants
      */
     sizes: {
-        sm: "text-xs px-2 py-0.5 gap-0.5",
-        md: "text-sm px-2.5 py-1 gap-1",
-        lg: "text-sm px-3 py-1 gap-1.5",
+        sm: "text-sm px-2 py-0.5 gap-0.5",
+        md: "text-base px-2.5 py-1 gap-1",
+        lg: "text-base px-3 py-1 gap-1.5",
     },
     /**
      * Icon sizes for iconStart and CheckIcon

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

@@ -5,7 +5,7 @@ const popoverTheme = {
     // Base styles for the popover
     baseStyle: "z-50 outline-none",
     // Content styles
-    contentStyle: "bg-[var(--color-white)] border border-[var(--color-border)] rounded-[var(--popover-radius)] shadow-real-xl p-4 max-w-sm dark:bg-[var(--color-background-secondary)] ",
+    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)] ",
 };
 
 export { popoverTheme };

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

@@ -48,6 +48,12 @@ export interface PopoverContentProps extends React.HTMLAttributes<HTMLDivElement
     children: ReactNode;
     animation?: boolean;
     portal?: boolean;
+    /** Enable scroll support with viewport-aware max-height. Uses available
+     *  space computed by the positioning hook, falling back to 400px. */
+    scrollable?: boolean;
+    /** Custom max-height when scrollable is true (e.g. "300px", "20rem").
+     *  Overrides the default viewport-aware height. */
+    maxHeight?: string;
 }
 /**
  * Theme overrides for the Popover component