@mezzanine-ui/react 1.0.0-beta.2 → 1.0.0-beta.4

package/Breadcrumb/BreadcrumbOverflowMenuItem.js

@@ -0,0 +1,27 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { breadcrumbOverflowMenuItemClasses } from '@mezzanine-ui/core/breadcrumb';
+import Typography from '../Typography/Typography.js';
+import BreadcrumbOverflowMenuDropdown from './BreadcrumbOverflowMenuDropdown.js';
+import cx from 'clsx';
+
+const BreadcrumbOverflowMenuItem = forwardRef(function BreadcrumbOverflowMenuItem(props, ref) {
+    if ('options' in props)
+        return jsx(BreadcrumbOverflowMenuDropdown, { ...props });
+    const { className, component, current, href, name, onClick, rel, target, ...rest } = props;
+    const TriggerComponent = (() => {
+        if (component)
+            return component;
+        if ((!current && 'href' in props && typeof props.href === 'string') ||
+            'onClick' in props) {
+            return 'a';
+        }
+        return 'span';
+    })();
+    const handleClick = () => {
+        onClick === null || onClick === void 0 ? void 0 : onClick();
+    };
+    return (jsx("span", { ...rest, className: cx(breadcrumbOverflowMenuItemClasses.host, className), ref: ref, children: jsx(TriggerComponent, { className: cx(breadcrumbOverflowMenuItemClasses.trigger), href: TriggerComponent === 'a' ? href : undefined, onClick: TriggerComponent === 'a' ? handleClick : undefined, rel: TriggerComponent === 'a' ? rel : undefined, target: TriggerComponent === 'a' ? target : undefined, children: jsx(Typography, { variant: 'label-primary', children: name }) }) }));
+});
+
+export { BreadcrumbOverflowMenuItem as default };

package/Breadcrumb/typings.d.ts

@@ -1,5 +1,6 @@
 import type { JSXElementConstructor, ReactElement } from 'react';
 import type { ComponentOverridableForwardRefComponentPropsFactory, NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
+import type { DropdownProps } from '../Dropdown';
 export type BreadcrumbProps = Omit<NativeElementPropsWithoutKeyAndRef<'nav'>, 'children'> & ({
     /**
      * Display only the last two items with an ellipsis dropdown for all previous items
@@ -12,64 +13,45 @@ export type BreadcrumbProps = Omit<NativeElementPropsWithoutKeyAndRef<'nav'>, 'c
     items?: never;
     children: ReactElement<BreadcrumbItemProps> | ReactElement<BreadcrumbItemProps>[];
 });
-export type BreadcrumbItemComponent = 'a' | 'button' | JSXElementConstructor<any>;
-export type BreadcrumbItemProps<C extends BreadcrumbItemComponent = 'button'> = ComponentOverridableForwardRefComponentPropsFactory<BreadcrumbItemComponent, C, BreadcrumbDropdownItemProps | BreadcrumbItemTextProps | BreadcrumbLinkItemProps>;
-export type BreadcrumbDropdownItemProps = Omit<NativeElementPropsWithoutKeyAndRef<'button'>, 'children'> & {
-    component?: 'button';
-    /**
-     * Whether is the current page item.
-     */
-    current?: boolean;
-    /**
-     * Whether to expand the dropdown item icon.
-     */
-    expand?: boolean;
-    href?: string;
-    label?: string;
-    /**
-     * The dropdown options.
-     */
-    options: Array<{
-        /**
-         * The href of dropdown item.
-         */
-        href?: string;
-        id?: string;
-        /**
-         * The content of dropdown item.
-         */
-        label?: string;
-        target?: '_blank' | '_parent' | '_self' | '_top' | string;
-    }>;
-    target?: '_blank' | '_parent' | '_self' | '_top' | string;
-};
+export type BreadcrumbItemComponent = 'a' | 'span' | JSXElementConstructor<any>;
+export type BreadcrumbItemProps<C extends BreadcrumbItemComponent = 'span'> = Omit<ComponentOverridableForwardRefComponentPropsFactory<BreadcrumbItemComponent, C, BreadcrumbItemTextProps | BreadcrumbLinkItemProps>, 'children' | 'onSelect'> | BreadcrumbDropdownProps;
 export type BreadcrumbItemTextProps = {
-    component?: 'div';
+    component?: 'span';
     /**
      * Whether is the current page item.
      */
     current?: boolean;
-    expand?: never;
     href?: never;
+    id?: string;
     /**
-     * The content of breadcrumb text.
+     * The content of breadcrumb item text.
      */
-    label: string;
-    options?: never;
+    name: string;
+    onClick?: never;
     target?: never;
 };
 export type BreadcrumbLinkItemProps = Omit<NativeElementPropsWithoutKeyAndRef<'a'>, 'children'> & {
     component?: 'a';
     current?: boolean;
-    expand?: never;
     /**
      * The href of breadcrumb link.
      */
     href: string;
-    label: string;
-    options?: never;
+    id?: string;
+    name: string;
+    onClick?: () => void;
     /**
      * The target attribute specifies where to open the linked document.
      */
     target?: '_blank' | '_parent' | '_self' | '_top' | string;
 };
+export type BreadcrumbDropdownProps = Omit<DropdownProps, 'children'> & {
+    className?: string;
+    current?: boolean;
+    href?: never;
+    id?: string;
+    name: string;
+    onClick?: () => void;
+    open?: boolean;
+    target?: never;
+};

package/Button/Button.js

@@ -4,18 +4,16 @@ import { forwardRef } from 'react';
 import { SpinnerIcon } from '@mezzanine-ui/icons';
 import { buttonClasses } from '@mezzanine-ui/core/button';
 import Icon from '../Icon/Icon.js';
+import Tooltip from '../Tooltip/Tooltip.js';
 import cx from 'clsx';
 
 /**
  * The react component for `mezzanine` button.
  */
 const Button = forwardRef(function Button(props, ref) {
-    const { children, className, component: Component = 'button', disabled = false, icon, loading = false, onClick, size = 'main', variant = 'base-primary', ...rest } = props;
-    // 判斷是否為 icon-only 模式
-    const isIconOnly = (icon === null || icon === void 0 ? void 0 : icon.position) === 'icon-only' || (!!icon && !children);
-    // 判斷 icon 位置
-    const hasLeadingIcon = (icon === null || icon === void 0 ? void 0 : icon.position) === 'leading' && !isIconOnly;
-    const hasTrailingIcon = (icon === null || icon === void 0 ? void 0 : icon.position) === 'trailing' && !isIconOnly;
+    const { children, className, component: Component = 'button', disabled = false, disabledTooltip = false, icon, iconType, loading = false, onClick, size = 'main', tooltipPosition = 'bottom', variant = 'base-primary', ...rest } = props;
+    const isIconOnly = iconType === 'icon-only';
+    const showTooltip = isIconOnly && !disabledTooltip && Boolean(children);
     // Loading 狀態下的 icon
     const loadingIcon = jsx(Icon, { icon: SpinnerIcon, spin: true, size: 16 });
     // 渲染 icon 內容
@@ -24,21 +22,25 @@ const Button = forwardRef(function Button(props, ref) {
             return loadingIcon;
         }
         if (icon) {
-            return jsx(Icon, { icon: icon.src, size: 16 });
+            return jsx(Icon, { icon: icon, size: 16 });
         }
         return null;
     };
-    return (jsx(Component, { ...rest, ref: ref, "aria-disabled": disabled, className: cx(buttonClasses.host, buttonClasses.variant(variant), buttonClasses.size(size), {
+    const buttonElement = (tooltipProps) => (jsx(Component, { ...rest, ref: (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.ref) || ref, "aria-disabled": disabled, className: cx(buttonClasses.host, buttonClasses.variant(variant), buttonClasses.size(size), {
             [buttonClasses.disabled]: disabled,
             [buttonClasses.loading]: loading,
-            [buttonClasses.iconLeading]: hasLeadingIcon,
-            [buttonClasses.iconTrailing]: hasTrailingIcon,
+            [buttonClasses.iconLeading]: iconType === 'leading',
+            [buttonClasses.iconTrailing]: iconType === 'trailing',
             [buttonClasses.iconOnly]: isIconOnly,
         }, className), disabled: disabled, onClick: (event) => {
             if (!disabled && !loading && onClick) {
                 onClick(event);
             }
-        }, children: loading ? (renderIcon()) : (jsxs(Fragment, { children: [(hasLeadingIcon || isIconOnly) && renderIcon(), !isIconOnly && children, hasTrailingIcon && renderIcon()] })) }));
+        }, onMouseEnter: tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.onMouseEnter, onMouseLeave: tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.onMouseLeave, children: loading ? (renderIcon()) : (jsxs(Fragment, { children: [(iconType === 'leading' || isIconOnly) && renderIcon(), !isIconOnly && children, iconType === 'trailing' && renderIcon()] })) }));
+    if (showTooltip) {
+        return (jsx(Tooltip, { options: { placement: tooltipPosition }, title: children, children: (tooltipProps) => buttonElement(tooltipProps) }));
+    }
+    return buttonElement();
 });
 
 export { Button as default };

package/Button/index.d.ts

@@ -1,7 +1,7 @@
 import { PropsWithoutRef, ReactElement, RefAttributes } from 'react';
 import { ButtonComponent, ButtonPropsBase } from './typings';
 import { ButtonProps } from './Button';
-export type { ButtonIcon, ButtonIconPosition, ButtonGroupOrientation, ButtonSize, ButtonVariant, } from '@mezzanine-ui/core/button';
+export type { ButtonIconType, ButtonGroupOrientation, ButtonSize, ButtonVariant, } from '@mezzanine-ui/core/button';
 export { default as ButtonGroup } from './ButtonGroup';
 export type { ButtonGroupChild, ButtonGroupProps } from './ButtonGroup';
 export type { ButtonComponent, ButtonProps, ButtonPropsBase };

package/Button/typings.d.ts

@@ -1,5 +1,7 @@
-import { JSXElementConstructor } from 'react';
-import { ButtonIcon, ButtonSize, ButtonVariant } from '@mezzanine-ui/core/button';
+import { JSXElementConstructor, ReactNode } from 'react';
+import { IconDefinition } from '@mezzanine-ui/icons';
+import { ButtonIconType, ButtonSize, ButtonVariant } from '@mezzanine-ui/core/button';
+import { PopperPlacement } from '../Popper';
 export type ButtonComponent = 'button' | 'a' | JSXElementConstructor<any>;
 export interface ButtonPropsBase {
     /**
@@ -23,7 +25,28 @@ export interface ButtonPropsBase {
      */
     loading?: boolean;
     /**
-     * Icon configuration with position and icon source.
+     * The icon to display.
      */
-    icon?: ButtonIcon;
+    icon?: IconDefinition;
+    /**
+     * The type of the icon relative to the text.
+     */
+    iconType?: ButtonIconType;
+    /**
+     * The button text content.
+     * When iconType is 'icon-only', children will be used as tooltip content.
+     */
+    children?: ReactNode;
+    /**
+     * If true, disable the tooltip for icon-only buttons.
+     * Only applies when iconType is 'icon-only'.
+     * @default false
+     */
+    disabledTooltip?: boolean;
+    /**
+     * The position of the tooltip.
+     * Only applies when iconType is 'icon-only'.
+     * @default 'bottom'
+     */
+    tooltipPosition?: PopperPlacement;
 }

package/Checkbox/index.d.ts

@@ -1,5 +1,5 @@
-import { PropsWithoutRef, ReactElement, RefAttributes } from 'react';
-import { CheckboxProps } from './Checkbox';
+import type { PropsWithoutRef, ReactElement, RefAttributes } from 'react';
+import type { CheckboxProps } from './Checkbox';
 export type { CheckboxGroupLayout, CheckboxGroupOption, } from '@mezzanine-ui/core/checkbox';
 export { default as CheckAll } from './CheckAll';
 export type { CheckAllProps } from './CheckAll';
@@ -11,6 +11,5 @@ export type { CheckboxComponent, CheckboxPropsBase } from './typings';
  * @remark
  * Add type alias here for parsable to react docgen typescript.
  */
-type GenericCheckbox = (props: PropsWithoutRef<CheckboxProps> & RefAttributes<HTMLLabelElement>) => ReactElement<any>;
-declare const _default: GenericCheckbox;
-export default _default;
+export type GenericCheckbox = (props: PropsWithoutRef<CheckboxProps> & RefAttributes<HTMLLabelElement>) => ReactElement<any>;
+export { default } from './Checkbox';

package/Checkbox/index.js

@@ -1,7 +1,3 @@
-import Checkbox from './Checkbox.js';
 export { default as CheckAll } from './CheckAll.js';
 export { default as CheckboxGroup } from './CheckboxGroup.js';
-
-
-
-export { Checkbox as default };
+export { default } from './Checkbox.js';

package/ContentHeader/ContentHeader.d.ts

@@ -0,0 +1,160 @@
+import { ReactElement } from 'react';
+import { ButtonProps } from '../Button';
+import { SearchInputProps } from '../Input';
+import { SelectProps } from '../Select';
+import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
+import { IconDefinition } from '@mezzanine-ui/icons';
+import { DropdownProps } from '../Dropdown';
+type SegmentedControlProps = {
+    mock: 'SegmentedControlProps';
+};
+type ContentHeaderChild = ReactElement<SearchInputProps> | ReactElement<SelectProps> | ReactElement<SegmentedControlProps> | ReactElement<ButtonProps> | ReactElement<DropdownProps> | ReactElement<{
+    href: string;
+}> | null | false | undefined;
+/**
+ * Props for the ContentHeader component.
+ *
+ * Defines a flexible header with title, description, filter, action buttons, and utility icons.
+ * Commonly used in page headers for primary user actions.
+ */
+export type ContentHeaderProps = Omit<NativeElementPropsWithoutKeyAndRef<'header'>, 'children'> & {
+    /**
+     * Button configuration for actions. <br />
+     * Automatically applies proper styling and order. <br />
+     * When conflicting with other props, props take priority over children. <br />
+     * Buttons with variants other than primary, secondary, and destructive will not be rendered. <br />
+     */
+    actions?: ButtonProps[];
+    /**
+     * Children elements: <br />
+     * - Back button which Component with href prop.
+     *     - example 1: `<a href="..." />` <br />
+     *     - example 2: `<Link href="..." />` <br />
+     *     - conflicting prop: `onBackClick` <br />
+     * - Filter component (SearchInput, Select, or SegmentedControl) <br />
+     * - Action buttons `<Button />` <br />
+     * - Icon-only utility buttons `<Button icon="..." />` <br />
+     * - Overflow icon utility dropdown `<Dropdown> <Button icon="..." /> </Dropdown>` <br />
+     * <br />
+     * Can mix and match the above children. <br />
+     * The order of children does not matter as they will be arranged properly. <br />
+     * When conflicting with other props, props take priority over children. <br />
+     */
+    children?: ContentHeaderChild[] | ContentHeaderChild;
+    /** Optional description text displayed below the title */
+    description?: string;
+    /** Filter component (SearchInput, Select, or SegmentedControl) */
+    filter?: {
+        variant: 'search' | 'select' | 'segmentedControl';
+    } & (SearchInputProps | SelectProps | SegmentedControlProps);
+    /**
+     * Optional back button properties. <br />
+     * When provided, a back button will be rendered on the left side of the title. <br />
+     * href prop from children will be ignored if onBackClick is provided. <br />
+     * */
+    onBackClick?: () => void;
+    /**
+     * Size variant of the toolbar. <br />
+     * Affects the size of buttons and filter component. <br />
+     */
+    size?: 'main' | 'sub';
+    /** Main title text for the content header */
+    title: string;
+    /**
+     * HTML element type for the title (defaults to 'h1' for main size and 'h2' for sub size)
+     */
+    titleComponent?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p';
+    /**
+     * Icon-only utility buttons `<Button icon="..." />`. <br />
+     * They usually appear as smaller buttons with only an icon and no text.
+     */
+    utilities?: ((ButtonProps & {
+        icon: IconDefinition;
+    }) | DropdownProps)[];
+};
+/**
+ * ContentHeader component. <br />
+ * A flexible header with title, description, filter, action buttons, and utility icons. <br />
+ * Commonly used in page headers for primary user actions. <br />
+ *
+ * @example
+ * ```tsx
+ *  <ContentHeader
+ *    size="main"
+ *    title={'ContentHeader Title'}
+ *    description="description."
+ *  >
+ *    <a href="" title="back" />  <-- Back button
+ *
+ *    <Input variant="search" placeholder="Search..." />  <-- Filter component
+ *    <Button variant="base-secondary">Secondary</Button>  <-- Action buttons
+ *    <Button>Primary</Button>
+ *
+ *    <Button icon={PlusIcon} />  <-- Utility icon button
+ *    <Dropdown
+ *      options={[
+ *        { id: '1', name: 'Option 1' },
+ *        { id: '2', name: 'Option 2' },
+ *      ]}
+ *    >
+ *      <Button icon={DotHorizontalIcon} />
+ *    </Dropdown>  <-- Utility dropdown
+ *  </ContentHeader>
+ * ```
+ */
+declare const ContentHeader: import("react").ForwardRefExoticComponent<Omit<NativeElementPropsWithoutKeyAndRef<"header">, "children"> & {
+    /**
+     * Button configuration for actions. <br />
+     * Automatically applies proper styling and order. <br />
+     * When conflicting with other props, props take priority over children. <br />
+     * Buttons with variants other than primary, secondary, and destructive will not be rendered. <br />
+     */
+    actions?: ButtonProps[];
+    /**
+     * Children elements: <br />
+     * - Back button which Component with href prop.
+     *     - example 1: `<a href="..." />` <br />
+     *     - example 2: `<Link href="..." />` <br />
+     *     - conflicting prop: `onBackClick` <br />
+     * - Filter component (SearchInput, Select, or SegmentedControl) <br />
+     * - Action buttons `<Button />` <br />
+     * - Icon-only utility buttons `<Button icon="..." />` <br />
+     * - Overflow icon utility dropdown `<Dropdown> <Button icon="..." /> </Dropdown>` <br />
+     * <br />
+     * Can mix and match the above children. <br />
+     * The order of children does not matter as they will be arranged properly. <br />
+     * When conflicting with other props, props take priority over children. <br />
+     */
+    children?: ContentHeaderChild[] | ContentHeaderChild;
+    /** Optional description text displayed below the title */
+    description?: string;
+    /** Filter component (SearchInput, Select, or SegmentedControl) */
+    filter?: {
+        variant: "search" | "select" | "segmentedControl";
+    } & (SearchInputProps | SelectProps | SegmentedControlProps);
+    /**
+     * Optional back button properties. <br />
+     * When provided, a back button will be rendered on the left side of the title. <br />
+     * href prop from children will be ignored if onBackClick is provided. <br />
+     * */
+    onBackClick?: () => void;
+    /**
+     * Size variant of the toolbar. <br />
+     * Affects the size of buttons and filter component. <br />
+     */
+    size?: "main" | "sub";
+    /** Main title text for the content header */
+    title: string;
+    /**
+     * HTML element type for the title (defaults to 'h1' for main size and 'h2' for sub size)
+     */
+    titleComponent?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p";
+    /**
+     * Icon-only utility buttons `<Button icon="..." />`. <br />
+     * They usually appear as smaller buttons with only an icon and no text.
+     */
+    utilities?: ((ButtonProps & {
+        icon: IconDefinition;
+    }) | DropdownProps)[];
+} & import("react").RefAttributes<HTMLElement>>;
+export default ContentHeader;

package/ContentHeader/ContentHeader.js

@@ -0,0 +1,54 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { contentHeaderClasses } from '@mezzanine-ui/core/content-header';
+import Button from '../Button/Button.js';
+import ButtonGroup from '../Button/ButtonGroup.js';
+import { ChevronLeftIcon } from '@mezzanine-ui/icons';
+import { renderFilterProp, renderActionsProp, renderIconButtonsProp, resolveContentHeaderChild } from './utils.js';
+import Typography from '../Typography/Typography.js';
+import cx from 'clsx';
+
+/**
+ * ContentHeader component. <br />
+ * A flexible header with title, description, filter, action buttons, and utility icons. <br />
+ * Commonly used in page headers for primary user actions. <br />
+ *
+ * @example
+ * ```tsx
+ *  <ContentHeader
+ *    size="main"
+ *    title={'ContentHeader Title'}
+ *    description="description."
+ *  >
+ *    <a href="" title="back" />  <-- Back button
+ *
+ *    <Input variant="search" placeholder="Search..." />  <-- Filter component
+ *    <Button variant="base-secondary">Secondary</Button>  <-- Action buttons
+ *    <Button>Primary</Button>
+ *
+ *    <Button icon={PlusIcon} />  <-- Utility icon button
+ *    <Dropdown
+ *      options={[
+ *        { id: '1', name: 'Option 1' },
+ *        { id: '2', name: 'Option 2' },
+ *      ]}
+ *    >
+ *      <Button icon={DotHorizontalIcon} />
+ *    </Dropdown>  <-- Utility dropdown
+ *  </ContentHeader>
+ * ```
+ */
+const ContentHeader = forwardRef(function ContentHeader(props, ref) {
+    const { actions, children, className, description, filter, onBackClick, size = 'main', title, titleComponent = size === 'main' ? 'h1' : 'h2', utilities, ...rest } = props;
+    const renderFilter = renderFilterProp(filter, size);
+    const renderActions = actions ? renderActionsProp(actions, size) : null;
+    const renderUtilities = utilities
+        ? renderIconButtonsProp(utilities, size)
+        : null;
+    const { backButton, filter: filterFromChildren, actions: actionsFromChildren, utilities: utilitiesFromChildren, } = resolveContentHeaderChild(children, size);
+    // prop onBack takes precedence over backButtonOrLink
+    const renderBackButton = onBackClick ? (jsx(Button, { iconType: "icon-only", icon: ChevronLeftIcon, onClick: onBackClick, "aria-label": "Back", type: "button", size: "sub", variant: "base-tertiary" })) : (backButton);
+    return (jsxs("header", { ...rest, className: cx(contentHeaderClasses.host, contentHeaderClasses.size(size), className), ref: ref, children: [jsxs("span", { className: contentHeaderClasses.titleArea, children: [renderBackButton && (jsx("span", { className: contentHeaderClasses.backButton, children: renderBackButton })), jsxs("span", { className: contentHeaderClasses.textGroup, children: [jsx(Typography, { component: titleComponent, align: "left", color: "text-neutral-solid", variant: size === 'main' ? 'h2' : 'h3', children: title }), description && (jsx(Typography, { align: "left", color: "text-neutral", variant: "caption", children: description }))] })] }), jsxs("span", { className: contentHeaderClasses.actionArea, children: [renderFilter || filterFromChildren, (renderActions || actionsFromChildren.length > 0) && (jsx(ButtonGroup, { children: renderActions || actionsFromChildren })), (renderUtilities || utilitiesFromChildren.length > 0) && (jsx("span", { className: contentHeaderClasses.utilities, children: renderUtilities || utilitiesFromChildren }))] })] }));
+});
+
+export { ContentHeader as default };

package/ContentHeader/index.d.ts

@@ -0,0 +1,2 @@
+export type { ContentHeaderProps } from './ContentHeader';
+export { default } from './ContentHeader';

package/ContentHeader/index.js

@@ -0,0 +1 @@
+export { default } from './ContentHeader.js';

package/ContentHeader/utils.d.ts

@@ -0,0 +1,23 @@
+import { ReactElement } from 'react';
+import { ButtonProps, ButtonGroupChild } from '../Button';
+import { ContentHeaderProps } from './ContentHeader';
+import { DropdownProps } from '../Dropdown';
+/**
+ * Renders a button from either ButtonProps or a React element.
+ * Applies the specified size and variant to the button.
+ */
+export declare const renderButton: (button: ButtonProps | ButtonGroupChild | undefined, size: ButtonProps["size"]) => ReactElement<ButtonProps> | null;
+export declare const renderFilterProp: (prop: ContentHeaderProps["filter"], size: "main" | "sub") => import("react/jsx-runtime").JSX.Element | null;
+export declare const renderIconButtonWithProps: (child: ReactElement<ButtonProps>, size: ButtonProps["size"]) => ReactElement<ButtonProps>;
+export declare const renderIconButtonsProp: (utilities: ContentHeaderProps["utilities"], size: ButtonProps["size"]) => ButtonGroupChild | ButtonGroupChild[];
+/**
+ * Renders action buttons based on the actions configuration.
+ * Supports both structured actions object and single button element/props.
+ */
+export declare const renderActionsProp: (actions: ContentHeaderProps["actions"], size: ButtonProps["size"]) => ButtonGroupChild | ButtonGroupChild[];
+export declare const resolveContentHeaderChild: (children: ContentHeaderProps["children"], size: "main" | "sub") => {
+    filter: null;
+    actions: ReactElement<ButtonProps, string | import("react").JSXElementConstructor<any>>[];
+    utilities: (ButtonGroupChild | ReactElement<DropdownProps, string | import("react").JSXElementConstructor<any>>)[];
+    backButton: null;
+};