@flikk/ui 1.0.0-beta.2 → 1.0.0-beta.21

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 || (() => { });
@@ -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,
@@ -41,9 +42,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

@@ -1,53 +1,85 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import React__default, { useMemo } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import React__default, { useId, useState, useCallback, useMemo } from 'react';
 import { cn } from '../../../utils/cn.js';
 import { navItemTheme } from './NavItem.theme.js';
-import { useSidebarContext } from '../Sidebar/SidebarContext.js';
+import { useSidebarContext, useAccordionNavContext } from '../Sidebar/SidebarContext.js';
 import { Tooltip } from '../Tooltip/Tooltip.js';
 import '../Tooltip/Tooltip.animations.js';
 import { Badge } from '../Badge/Badge.js';
 import { ChevronDownIcon } from '@heroicons/react/20/solid';
+import { AnimatePresence, motion } from 'motion/react';
 
 const NavItem = React__default.forwardRef(({ children, startContent: propStartContent, endContent: propEndContent, icon, // Legacy
 badge, // Legacy
-description, shortcut, href, onClick, active = false, disabled = false, isDisabled: propIsDisabled, isDanger = false, hasSubmenu = false, expanded = false, onToggleExpanded, level = 0, showTooltipWhenCollapsed = true, className, theme: customTheme = {}, ...props }, ref) => {
+notification, description, shortcut, href, onClick, active = false, disabled = false, isDisabled: propIsDisabled, isDanger = false, hasSubmenu: propHasSubmenu = false, expanded: controlledExpanded, onToggleExpanded, items, defaultExpanded = false, level = 0, showTooltipWhenCollapsed = true, className, theme: customTheme = {}, ...props }, ref) => {
     var _a, _b;
     const sidebarContext = useSidebarContext();
+    const accordionNav = useAccordionNavContext();
+    const stableId = useId();
     const collapsed = (sidebarContext === null || sidebarContext === void 0 ? void 0 : sidebarContext.collapsed) || false;
     const isInSidebar = !!sidebarContext;
+    const isMobile = (sidebarContext === null || sidebarContext === void 0 ? void 0 : sidebarContext.isMobile) || false;
+    // Self-managed submenu state
+    const [internalExpanded, setInternalExpanded] = useState(defaultExpanded);
+    // Determine if this item has a submenu
+    const hasSubmenu = propHasSubmenu || (items && items.length > 0);
+    // Determine expanded state: controlled vs accordion vs internal
+    const isAccordionManaged = !!accordionNav;
+    const isControlled = controlledExpanded !== undefined;
+    let isExpanded;
+    if (isControlled) {
+        isExpanded = controlledExpanded;
+    }
+    else if (isAccordionManaged && hasSubmenu) {
+        isExpanded = accordionNav.openId === stableId;
+    }
+    else {
+        isExpanded = internalExpanded;
+    }
+    const handleToggleExpanded = useCallback(() => {
+        if (isControlled) {
+            onToggleExpanded === null || onToggleExpanded === void 0 ? void 0 : onToggleExpanded();
+        }
+        else if (isAccordionManaged) {
+            if (isExpanded) {
+                accordionNav.unregister(stableId);
+            }
+            else {
+                accordionNav.register(stableId);
+            }
+        }
+        else {
+            setInternalExpanded(prev => !prev);
+        }
+    }, [isControlled, isAccordionManaged, isExpanded, onToggleExpanded, accordionNav, stableId]);
     // Map legacy props
     const startContent = propStartContent || icon;
     const actualIsDisabled = propIsDisabled || disabled;
-    // Construct end content
+    // Build end content
     let endContent = propEndContent;
     if (!endContent && badge) {
-        endContent = (jsx(Badge, { color: "neutral", variant: "ghost", size: "sm", children: badge }));
-    }
-    if (!endContent && hasSubmenu) {
-        endContent = (jsx(ChevronDownIcon, { className: cn("size-4 transition-transform duration-300", expanded && "rotate-180") }));
+        endContent = (jsx(Badge, { color: "neutral", variant: "soft", size: "sm", children: badge }));
     }
+    // Notification element
+    const notificationElement = useMemo(() => {
+        if (notification === undefined || notification === false)
+            return null;
+        if (notification === true) {
+            return (jsx("span", { className: cn(navItemTheme.notificationDot, customTheme.notificationDot) }));
+        }
+        if (typeof notification === "number" && notification > 0) {
+            return (jsx("span", { className: cn(navItemTheme.notificationBadge, customTheme.notificationBadge), children: notification > 99 ? "99+" : notification }));
+        }
+        return null;
+    }, [notification, customTheme.notificationDot, customTheme.notificationBadge]);
     const theme = useMemo(() => ({
         ...navItemTheme,
         ...customTheme,
-        states: {
-            ...navItemTheme.states,
-            ...customTheme.states,
-        },
-        iconStates: {
-            ...navItemTheme.iconStates,
-            ...customTheme.iconStates,
-        },
-        levels: {
-            ...navItemTheme.levels,
-            ...customTheme.levels,
-        },
-        collapsed: {
-            ...navItemTheme.collapsed,
-            ...customTheme.collapsed,
-        },
-        danger: customTheme.danger ||
-            navItemTheme.danger ||
-            "text-[var(--color-danger)] hover:bg-[var(--color-danger-50)]",
+        states: { ...navItemTheme.states, ...customTheme.states },
+        iconStates: { ...navItemTheme.iconStates, ...customTheme.iconStates },
+        levels: { ...navItemTheme.levels, ...customTheme.levels },
+        collapsed: { ...navItemTheme.collapsed, ...customTheme.collapsed },
+        danger: customTheme.danger || navItemTheme.danger || "text-[var(--color-danger)] hover:bg-[var(--color-danger-50)]",
     }), [customTheme]);
     // Handle click events
     const handleClick = (e) => {
@@ -55,19 +87,27 @@ description, shortcut, href, onClick, active = false, disabled = false, isDisabl
             e.preventDefault();
             return;
         }
-        if (hasSubmenu && onToggleExpanded) {
+        if (hasSubmenu) {
             e.preventDefault();
-            onToggleExpanded();
+            handleToggleExpanded();
             return;
         }
         if (onClick) {
             e.preventDefault();
             onClick();
+            // Close mobile sidebar after clicking a nav item
+            if (isMobile && sidebarContext) {
+                sidebarContext.setMobileOpen(false);
+            }
             return;
         }
-        // If href is provided, let the default navigation happen
+        // Close mobile sidebar after navigation
+        if (href && isMobile && sidebarContext) {
+            sidebarContext.setMobileOpen(false);
+        }
     };
     const isActive = active;
+    const isCollapsedView = isInSidebar && collapsed && !isMobile;
     // Get state classes
     const getStateClasses = () => {
         if (actualIsDisabled)
@@ -78,8 +118,10 @@ description, shortcut, href, onClick, active = false, disabled = false, isDisabl
     };
     // Danger overrides
     const dangerClasses = isDanger ? theme.danger : "";
+    // Active indicator
+    const activeIndicatorClasses = isActive && level === 0 ? theme.activeIndicator : "";
     // Build container classes
-    const containerClasses = cn(theme.baseStyle, getStateClasses(), theme.levels[level], isInSidebar && collapsed && ((_a = theme.collapsed) === null || _a === void 0 ? void 0 : _a.container), dangerClasses, className);
+    const containerClasses = cn(theme.baseStyle, getStateClasses(), theme.levels[level], isCollapsedView && ((_a = theme.collapsed) === null || _a === void 0 ? void 0 : _a.container), dangerClasses, activeIndicatorClasses, className);
     // Get icon state classes
     const getIconStateClasses = () => {
         var _a, _b, _c;
@@ -90,35 +132,41 @@ description, shortcut, href, onClick, active = false, disabled = false, isDisabl
         return (_c = theme.iconStates) === null || _c === void 0 ? void 0 : _c.default;
     };
     // Build icon classes
-    const iconClasses = cn(isInSidebar && collapsed ? (_b = theme.collapsed) === null || _b === void 0 ? void 0 : _b.icon : theme.icon, getIconStateClasses());
+    const iconClasses = cn(isCollapsedView ? (_b = theme.collapsed) === null || _b === void 0 ? void 0 : _b.icon : theme.icon, getIconStateClasses());
     const textClasses = cn(theme.text);
+    // Chevron for submenu
+    const chevron = hasSubmenu && !isCollapsedView ? (jsx(ChevronDownIcon, { className: cn("size-4 transition-transform duration-200 text-[var(--color-text-muted)]", isExpanded && "rotate-180") })) : null;
     // Content component
-    const content = (jsxs("div", { ref: ref, className: containerClasses, role: href ? "link" : "button", tabIndex: actualIsDisabled ? -1 : 0, "aria-disabled": actualIsDisabled, "aria-expanded": hasSubmenu ? expanded : undefined, "data-active": isActive, "data-disabled": actualIsDisabled, "data-level": level, onClick: handleClick, onKeyDown: (e) => {
+    const content = (jsxs("div", { ref: ref, className: containerClasses, role: href ? "link" : "button", tabIndex: actualIsDisabled ? -1 : 0, "aria-disabled": actualIsDisabled, "aria-expanded": hasSubmenu ? isExpanded : undefined, "data-active": isActive, "data-disabled": actualIsDisabled, "data-level": level, onClick: handleClick, onKeyDown: (e) => {
             if (e.key === "Enter" || e.key === " ") {
                 e.preventDefault();
                 handleClick(e);
             }
-        }, ...props, children: [startContent && (jsx("div", { className: cn("flex items-center justify-center flex-shrink-0"
-                // Icon size is handled by icon classes
-                ), children: React__default.isValidElement(startContent)
-                    ? 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 }))] }));
+        }, ...props, children: [startContent && (jsxs("div", { className: "flex items-center justify-center flex-shrink-0 relative", children: [React__default.isValidElement(startContent)
+                        ? React__default.cloneElement(startContent, {
+                            className: cn(iconClasses, startContent.props.className),
+                        })
+                        : startContent, isCollapsedView && notificationElement && (jsx("span", { className: "absolute -top-1 -right-1", children: notificationElement }))] })), !isCollapsedView && (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 }))] })), !isCollapsedView && (jsxs("div", { className: "flex items-center gap-1.5 flex-shrink-0", children: [notificationElement, endContent, chevron] })), isCollapsedView && (jsx("span", { className: "sr-only", children: children }))] }));
+    // Self-contained submenu
+    const submenu = hasSubmenu && items && items.length > 0 && !isCollapsedView ? (jsx(AnimatePresence, { initial: false, children: isExpanded && (jsx(motion.div, { initial: "collapsed", animate: "open", exit: "collapsed", variants: {
+                open: { opacity: 1, height: "auto" },
+                collapsed: { opacity: 0, height: 0 },
+            }, transition: { duration: 0.2, ease: "easeInOut" }, className: "overflow-hidden", children: items.map((item, idx) => (jsx(NavItem, { level: Math.min((level + 1), 2), startContent: item.startContent, active: item.active, isDisabled: item.isDisabled, badge: item.badge, notification: item.notification, href: item.href, onClick: item.onClick, children: item.children }, idx))) })) })) : null;
     // Wrap with link if href is provided
-    if (href && !actualIsDisabled) {
-        const LinkContent = (jsx("a", { href: href, className: "block group", children: content }));
-        // Show tooltip in collapsed sidebar mode
-        if (isInSidebar && collapsed && showTooltipWhenCollapsed) {
-            return (jsx(Tooltip, { content: children, placement: "right", children: LinkContent }));
+    const renderWrapped = (node) => {
+        if (href && !actualIsDisabled) {
+            return (jsx("a", { href: href, className: "block group", children: node }));
         }
-        return LinkContent;
-    }
+        return node;
+    };
     // Show tooltip in collapsed sidebar mode
-    if (isInSidebar && collapsed && showTooltipWhenCollapsed) {
-        return (jsx(Tooltip, { content: children, placement: "right", children: content }));
-    }
-    return content;
+    const renderWithTooltip = (node) => {
+        if (isCollapsedView && showTooltipWhenCollapsed) {
+            return (jsx(Tooltip, { content: children, placement: "right", children: node }));
+        }
+        return node;
+    };
+    return (jsxs(Fragment, { children: [renderWithTooltip(renderWrapped(content)), submenu] }));
 });
 NavItem.displayName = "NavItem";
 

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

@@ -1,12 +1,12 @@
 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-150 w-full rounded-[var(--nav-item-radius)] outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)] group",
     icon: "size-4 text-[var(--color-text-secondary)]",
     text: "flex-1 min-w-0 truncate",
     states: {
-        default: "text-[var(--color-text-primary)] hover:bg-neutral-100",
+        default: "text-[var(--color-text-primary)] hover:bg-[var(--color-background-secondary)]",
         active: "bg-[var(--color-primary)]/10 text-[var(--color-primary)] font-semibold",
         disabled: "opacity-60 cursor-not-allowed pointer-events-none text-[var(--color-text-placeholder)]",
-        hover: "hover:bg-neutral-100",
+        hover: "hover:bg-[var(--color-background-secondary)]",
     },
     iconStates: {
         default: "text-[var(--color-text-secondary)] group-hover:text-[var(--color-text-primary)]",
@@ -22,6 +22,9 @@ const navItemTheme = {
         container: "!gap-0 justify-center p-2 aspect-square",
         icon: "size-5",
     },
+    activeIndicator: "before:absolute before:left-0 before:top-1/2 before:-translate-y-1/2 before:h-5 before:w-[3px] before:rounded-full before:bg-[var(--color-primary)]",
+    notificationDot: "size-2 rounded-full bg-[var(--color-danger)]",
+    notificationBadge: "min-w-[18px] h-[18px] px-1 text-[10px] font-semibold rounded-full bg-[var(--color-danger)] text-[var(--color-danger-contrast)] flex items-center justify-center leading-none",
 };
 
 export { navItemTheme };

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

@@ -1,4 +1,22 @@
 import { ReactNode } from "react";
+export interface NavItemSubmenuItem {
+    /** Label text */
+    children: ReactNode;
+    /** Link href */
+    href?: string;
+    /** Click handler */
+    onClick?: () => void;
+    /** Whether this sub-item is active */
+    active?: boolean;
+    /** Whether this sub-item is disabled */
+    isDisabled?: boolean;
+    /** Badge text/number on the sub-item */
+    badge?: string | number;
+    /** Notification count/dot on the sub-item */
+    notification?: number | boolean;
+    /** Start content (icon) for the sub-item */
+    startContent?: ReactNode;
+}
 export interface NavItemProps extends React.HTMLAttributes<HTMLDivElement> {
     /**
      * Content of the navigation item
@@ -30,6 +48,10 @@ export interface NavItemProps extends React.HTMLAttributes<HTMLDivElement> {
      * @deprecated Use endContent instead
      */
     badge?: string | number;
+    /**
+     * Notification indicator. Pass a number for a count badge, or true for a dot.
+     */
+    notification?: number | boolean;
     /**
      * Link href (for navigation)
      */
@@ -58,19 +80,31 @@ export interface NavItemProps extends React.HTMLAttributes<HTMLDivElement> {
      */
     isDanger?: boolean;
     /**
-     * Whether the item has a submenu
+     * Whether the item has a submenu (manual mode).
+     * If `items` is provided, this is set automatically.
      * @default false
      */
     hasSubmenu?: boolean;
     /**
-     * Whether the submenu is expanded (for multi-level navigation)
+     * Whether the submenu is expanded (controlled mode for manual submenus).
      * @default false
      */
     expanded?: boolean;
     /**
-     * Callback when submenu is toggled
+     * Callback when submenu is toggled (manual mode)
      */
     onToggleExpanded?: () => void;
+    /**
+     * Self-contained submenu items. When provided, NavItem manages its own
+     * expand/collapse state internally. Children items automatically get
+     * level={parentLevel + 1}.
+     */
+    items?: NavItemSubmenuItem[];
+    /**
+     * Whether the self-contained submenu is expanded by default
+     * @default false
+     */
+    defaultExpanded?: boolean;
     /**
      * Nesting level for indentation (0, 1, 2)
      * @default 0
@@ -111,6 +145,10 @@ export interface NavItemTheme {
         container: string;
         icon: string;
     };
+    activeIndicator?: string;
+    notificationDot?: string;
+    notificationBadge?: string;
+    danger?: string;
 }
 export interface NavItemThemeOverrides {
     baseStyle?: string;
@@ -137,32 +175,8 @@ export interface NavItemThemeOverrides {
         container: string;
         icon: string;
     }>;
-    danger?: string;
-}
-export interface NavItemTheme {
-    baseStyle: string;
-    icon: string;
-    text: string;
-    states: {
-        default: string;
-        active: string;
-        disabled: string;
-        hover: string;
-    };
-    iconStates?: {
-        default?: string;
-        active?: string;
-        disabled?: string;
-        hover?: string;
-    };
-    levels: {
-        0: string;
-        1: string;
-        2: string;
-    };
-    collapsed: {
-        container: string;
-        icon: string;
-    };
+    activeIndicator?: string;
+    notificationDot?: string;
+    notificationBadge?: string;
     danger?: string;
 }

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

@@ -1,2 +1,2 @@
 export { NavItem } from './NavItem';
-export type { NavItemProps, NavItemTheme, NavItemThemeOverrides } from './NavItem.types';
+export type { NavItemProps, NavItemSubmenuItem, NavItemTheme, NavItemThemeOverrides } from './NavItem.types';

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?: ReactNode;
+    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,14 @@
+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" }), typeof label === 'string'
+                ? jsx("span", { children: label })
+                : 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";