@mezzanine-ui/react 1.0.0-beta.6 → 1.0.0-beta.7

package/Card/typings.d.ts

@@ -0,0 +1,442 @@
+import { ChangeEventHandler, JSXElementConstructor, MouseEvent, ReactNode } from 'react';
+import { IconDefinition } from '@mezzanine-ui/icons';
+import { DropdownOption } from '@mezzanine-ui/core/dropdown/dropdown';
+import { ToggleSize } from '@mezzanine-ui/core/toggle';
+/**
+ * Allowed component types for BaseCard
+ */
+export type BaseCardComponent = 'div' | 'a' | JSXElementConstructor<any>;
+/**
+ * Action button variant options (limited to text-link variants)
+ */
+export type BaseCardActionVariant = 'base-text-link' | 'destructive-text-link';
+/**
+ * BaseCard type discriminator
+ */
+export type BaseCardType = 'default' | 'action' | 'overflow' | 'toggle';
+/**
+ * Common props shared across all BaseCard types
+ */
+export interface BaseCardPropsCommon {
+    /**
+     * Custom class name for the card
+     */
+    className?: string;
+    /**
+     * Content to render in the card content area
+     */
+    children?: ReactNode;
+    /**
+     * Whether the card is disabled
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Whether the card is read-only (non-interactive)
+     * @default false
+     */
+    readOnly?: boolean;
+    /**
+     * Card header title
+     */
+    title?: string;
+    /**
+     * Card header description
+     */
+    description?: string;
+}
+/**
+ * Props for BaseCard with type="default" (no action in header)
+ */
+export interface BaseCardDefaultProps extends BaseCardPropsCommon {
+    type?: 'default';
+    actionName?: never;
+    actionVariant?: never;
+    onActionClick?: never;
+    options?: never;
+    onOptionSelect?: never;
+    checked?: never;
+    defaultChecked?: never;
+    onToggleChange?: never;
+    toggleSize?: never;
+    toggleLabel?: never;
+    toggleSupportingText?: never;
+}
+/**
+ * Props for BaseCard with type="action" (Button in header action area)
+ */
+export interface BaseCardActionProps extends BaseCardPropsCommon {
+    type: 'action';
+    /**
+     * Label text for the action button
+     */
+    actionName: string;
+    /**
+     * Variant for the action button (limited to text-link variants)
+     * @default 'base-text-link'
+     */
+    actionVariant?: BaseCardActionVariant;
+    /**
+     * Click handler for the action button
+     */
+    onActionClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    options?: never;
+    onOptionSelect?: never;
+    checked?: never;
+    defaultChecked?: never;
+    onToggleChange?: never;
+    toggleSize?: never;
+    toggleLabel?: never;
+    toggleSupportingText?: never;
+}
+/**
+ * Props for BaseCard with type="overflow" (Dropdown in header action area)
+ */
+export interface BaseCardOverflowProps extends BaseCardPropsCommon {
+    type: 'overflow';
+    /**
+     * Dropdown options
+     */
+    options: DropdownOption[];
+    /**
+     * Callback when an option is selected
+     */
+    onOptionSelect?: (option: DropdownOption) => void;
+    actionName?: never;
+    actionVariant?: never;
+    onActionClick?: never;
+    checked?: never;
+    defaultChecked?: never;
+    onToggleChange?: never;
+    toggleSize?: never;
+    toggleLabel?: never;
+    toggleSupportingText?: never;
+}
+/**
+ * Props for BaseCard with type="toggle" (Toggle in header action area)
+ */
+export interface BaseCardToggleProps extends BaseCardPropsCommon {
+    type: 'toggle';
+    /**
+     * Whether the toggle is checked (controlled)
+     */
+    checked?: boolean;
+    /**
+     * Default checked state (uncontrolled)
+     */
+    defaultChecked?: boolean;
+    /**
+     * Callback when toggle state changes
+     */
+    onToggleChange?: ChangeEventHandler<HTMLInputElement>;
+    /**
+     * Size of the toggle
+     */
+    toggleSize?: ToggleSize;
+    /**
+     * Label for the toggle
+     */
+    toggleLabel?: string;
+    /**
+     * Supporting text for the toggle
+     */
+    toggleSupportingText?: string;
+    actionName?: never;
+    actionVariant?: never;
+    onActionClick?: never;
+    options?: never;
+    onOptionSelect?: never;
+}
+/**
+ * Union type for all BaseCard props variants
+ */
+export type BaseCardProps = BaseCardDefaultProps | BaseCardActionProps | BaseCardOverflowProps | BaseCardToggleProps;
+/**
+ * Allowed component types for QuickActionCard
+ */
+export type QuickActionCardComponent = 'button' | 'a' | JSXElementConstructor<any>;
+/**
+ * QuickActionCard layout mode
+ */
+export type QuickActionCardMode = 'horizontal' | 'vertical';
+/**
+ * Common props shared across all QuickActionCard variants
+ */
+export interface QuickActionCardPropsCommon {
+    /**
+     * Custom class name for the card
+     */
+    className?: string;
+    /**
+     * Whether the card is disabled
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Whether the card is read-only (non-interactive)
+     * @default false
+     */
+    readOnly?: boolean;
+    /**
+     * Card subtitle (optional)
+     */
+    subtitle?: string;
+    /**
+     * Layout mode
+     * @default 'horizontal'
+     */
+    mode?: QuickActionCardMode;
+}
+/**
+ * Props for QuickActionCard with icon only (no title)
+ */
+export interface QuickActionCardWithIconProps extends QuickActionCardPropsCommon {
+    /**
+     * Icon to display (required when no title)
+     */
+    icon: IconDefinition;
+    /**
+     * Card title (optional when icon is provided)
+     */
+    title?: string;
+}
+/**
+ * Props for QuickActionCard with title only (no icon)
+ */
+export interface QuickActionCardWithTitleProps extends QuickActionCardPropsCommon {
+    /**
+     * Icon to display (optional when title is provided)
+     */
+    icon?: IconDefinition;
+    /**
+     * Card title (required when no icon)
+     */
+    title: string;
+}
+/**
+ * Union type for QuickActionCard props - requires either icon or title (or both)
+ */
+export type QuickActionCardProps = QuickActionCardWithIconProps | QuickActionCardWithTitleProps;
+/**
+ * SingleThumbnailCard type discriminator
+ */
+export type SingleThumbnailCardType = 'default' | 'action' | 'overflow';
+/**
+ * Allowed component types for SingleThumbnailCard
+ */
+export type SingleThumbnailCardComponent = 'div' | 'a' | JSXElementConstructor<any>;
+/**
+ * Common props shared across all SingleThumbnailCard types
+ */
+export interface SingleThumbnailCardPropsCommon {
+    /**
+     * Custom class name for the card
+     */
+    className?: string;
+    /**
+     * Single image element (img, Next.js Image, etc.)
+     * Must be exactly one child element
+     */
+    children: ReactNode;
+    /**
+     * File extension string for the filetype icon (e.g., 'pdf', 'jpg', 'zip')
+     * Used to determine the filetype badge color
+     */
+    filetype?: string;
+    /**
+     * Icon for the personal action button (e.g., favorite, bookmark)
+     */
+    personalActionIcon?: IconDefinition;
+    /**
+     * Icon shown when personal action is active
+     */
+    personalActionActiveIcon?: IconDefinition;
+    /**
+     * Whether the personal action is in active state
+     */
+    personalActionActive?: boolean;
+    /**
+     * Click handler for the personal action button
+     */
+    personalActionOnClick?: (event: MouseEvent<HTMLButtonElement>, active: boolean) => void;
+    /**
+     * Subtitle text shown in the info section
+     */
+    subtitle?: string;
+    /**
+     * Optional tag label shown on top of the thumbnail
+     */
+    tag?: string;
+    /**
+     * Title text shown in the info section
+     */
+    title: string;
+}
+/**
+ * Props for SingleThumbnailCard with type="default" (no action in info)
+ */
+export interface SingleThumbnailCardDefaultProps extends SingleThumbnailCardPropsCommon {
+    type?: 'default';
+    actionName?: never;
+    onActionClick?: never;
+    onOptionSelect?: never;
+    options?: never;
+}
+/**
+ * Props for SingleThumbnailCard with type="action" (Button in info action area)
+ */
+export interface SingleThumbnailCardActionProps extends SingleThumbnailCardPropsCommon {
+    type: 'action';
+    /**
+     * Label text for the action button
+     */
+    actionName: string;
+    /**
+     * Click handler for the action button
+     */
+    onActionClick?: (event: MouseEvent<HTMLButtonElement>) => void;
+    onOptionSelect?: never;
+    options?: never;
+}
+/**
+ * Props for SingleThumbnailCard with type="overflow" (Dropdown in info action area)
+ */
+export interface SingleThumbnailCardOverflowProps extends SingleThumbnailCardPropsCommon {
+    type: 'overflow';
+    /**
+     * Callback when an option is selected
+     */
+    onOptionSelect?: (option: DropdownOption) => void;
+    /**
+     * Dropdown options
+     */
+    options: DropdownOption[];
+    actionName?: never;
+    onActionClick?: never;
+}
+/**
+ * Union type for all SingleThumbnailCard props variants
+ */
+export type SingleThumbnailCardProps = SingleThumbnailCardActionProps | SingleThumbnailCardDefaultProps | SingleThumbnailCardOverflowProps;
+/**
+ * Allowed component types for Thumbnail (child of FourThumbnailCard)
+ */
+export type ThumbnailComponent = 'a' | 'button' | 'div' | JSXElementConstructor<any>;
+/**
+ * Base props for Thumbnail component
+ */
+export interface ThumbnailPropsBase {
+    /**
+     * Custom class name for the thumbnail
+     */
+    className?: string;
+    /**
+     * Image element (img, Next.js Image, etc.)
+     */
+    children: ReactNode;
+    /**
+     * Title text shown on hover overlay
+     */
+    title?: string;
+}
+/**
+ * FourThumbnailCard type discriminator
+ */
+export type FourThumbnailCardType = 'default' | 'action' | 'overflow';
+/**
+ * Allowed component types for FourThumbnailCard
+ */
+export type FourThumbnailCardComponent = 'div' | 'a' | JSXElementConstructor<any>;
+/**
+ * Common props shared across all FourThumbnailCard types
+ */
+export interface FourThumbnailCardPropsCommon {
+    /**
+     * Custom class name for the card
+     */
+    className?: string;
+    /**
+     * Thumbnail elements (1-4 Thumbnail components)
+     * If less than 4, empty slots will be rendered
+     */
+    children: ReactNode;
+    /**
+     * File extension string for the filetype icon (e.g., 'pdf', 'jpg', 'zip')
+     * Used to determine the filetype badge color
+     */
+    filetype?: string;
+    /**
+     * Icon for the personal action button (e.g., favorite, bookmark)
+     */
+    personalActionIcon?: IconDefinition;
+    /**
+     * Icon shown when personal action is active
+     */
+    personalActionActiveIcon?: IconDefinition;
+    /**
+     * Whether the personal action is in active state
+     */
+    personalActionActive?: boolean;
+    /**
+     * Click handler for the personal action button
+     */
+    personalActionOnClick?: (event: MouseEvent<HTMLButtonElement>, active: boolean) => void;
+    /**
+     * Subtitle text shown in the info section
+     */
+    subtitle?: string;
+    /**
+     * Optional tag label shown on top of the thumbnail grid
+     */
+    tag?: string;
+    /**
+     * Title text shown in the info section
+     */
+    title: string;
+}
+/**
+ * Props for FourThumbnailCard with type="default" (no action in info)
+ */
+export interface FourThumbnailCardDefaultProps extends FourThumbnailCardPropsCommon {
+    type?: 'default';
+    actionName?: never;
+    onActionClick?: never;
+    onOptionSelect?: never;
+    options?: never;
+}
+/**
+ * Props for FourThumbnailCard with type="action" (Button in info action area)
+ */
+export interface FourThumbnailCardActionProps extends FourThumbnailCardPropsCommon {
+    type: 'action';
+    /**
+     * Label text for the action button
+     */
+    actionName: string;
+    /**
+     * Click handler for the action button
+     */
+    onActionClick?: (event: MouseEvent<HTMLButtonElement>) => void;
+    onOptionSelect?: never;
+    options?: never;
+}
+/**
+ * Props for FourThumbnailCard with type="overflow" (Dropdown in info action area)
+ */
+export interface FourThumbnailCardOverflowProps extends FourThumbnailCardPropsCommon {
+    type: 'overflow';
+    /**
+     * Callback when an option is selected
+     */
+    onOptionSelect?: (option: DropdownOption) => void;
+    /**
+     * Dropdown options
+     */
+    options: DropdownOption[];
+    actionName?: never;
+    onActionClick?: never;
+}
+/**
+ * Union type for all FourThumbnailCard props variants
+ */
+export type FourThumbnailCardProps = FourThumbnailCardActionProps | FourThumbnailCardDefaultProps | FourThumbnailCardOverflowProps;

package/Checkbox/Checkbox.d.ts

@@ -1,4 +1,5 @@
 import { ChangeEventHandler, Ref } from 'react';
+import { CheckboxSize } from '@mezzanine-ui/core/checkbox';
 import { BaseInputProps } from '../Input';
 import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
 import { CheckboxPropsBase } from './typings';
@@ -116,6 +117,13 @@ export interface CheckboxProps extends Omit<NativeElementPropsWithoutKeyAndRef<'
      * It is also recommended when integrating with react-hook-form.
      */
     value?: string;
+    /**
+     * The size of checkbox.
+     * When mode is 'chip', size can be 'main' | 'sub' | 'minor'.
+     * When mode is 'default', size can be 'main' | 'sub'.
+     * @default 'main'
+     */
+    size?: CheckboxSize<NonNullable<CheckboxPropsBase['mode']>>;
 }
 /**
  * The react component for `mezzanine` checkbox.

package/Checkbox/Checkbox.js

@@ -17,7 +17,7 @@ import cx from 'clsx';
 const Checkbox = forwardRef(function Checkbox(props, ref) {
     const checkboxGroup = useContext(CheckboxGroupContext);
     const { disabled: disabledFromGroup, name: nameFromGroup, } = checkboxGroup || {};
-    const { checked: checkedProp, className, defaultChecked, description, disabled = disabledFromGroup, editableInput, id, indeterminate = false, inputProps, inputRef: inputRefProp, label, mode = 'main', name = nameFromGroup, onChange: onChangeProp, value, withEditInput = false, ...rest } = props;
+    const { checked: checkedProp, className, defaultChecked, description, disabled = disabledFromGroup, editableInput, id, indeterminate = false, inputProps, inputRef: inputRefProp, label, mode = 'default', size = 'main', name = nameFromGroup, onChange: onChangeProp, value, withEditInput = false, ...rest } = props;
     const { name: nameFromInputProps, ...restInputProps } = inputProps || {};
     // Generate unique id if not provided
     const generatedId = useId();
@@ -83,7 +83,8 @@ const Checkbox = forwardRef(function Checkbox(props, ref) {
             [checkboxClasses.checked]: isChecked,
             [checkboxClasses.indeterminate]: isIndeterminate,
             [checkboxClasses.disabled]: disabled,
-        }, checkboxClasses.mode(mode)), children: [jsxs("label", { ref: ref, ...rest, className: checkboxClasses.labelContainer, children: [jsx("div", { className: checkboxClasses.inputContainer, children: jsxs("div", { className: checkboxClasses.inputContent, children: [jsx("input", { ...restInputProps, "aria-checked": isIndeterminate ? 'mixed' : checked, "aria-disabled": disabled, checked: isChecked, className: checkboxClasses.input, disabled: disabled, id: finalInputId, name: resolvedName, onChange: onChange, ref: composedInputRef, type: "checkbox", value: value }), mode === 'chip' && isChecked && (jsx(Icon, { "aria-hidden": "true", className: checkboxClasses.icon, color: "brand", icon: CheckedIcon, size: 16 })), mode !== 'chip' && isChecked && (jsx(Icon, { "aria-hidden": "true", className: checkboxClasses.icon, color: "fixed-light", icon: CheckedIcon, size: 7 })), mode !== 'chip' && isIndeterminate && (jsx("span", { "aria-hidden": "true", className: checkboxClasses.indeterminateLine }))] }) }), (label || description) && (jsxs("span", { className: checkboxClasses.textContainer, children: [label && (jsx(Typography, { className: checkboxClasses.label, color: labelColor, variant: "label-primary", children: label })), description && mode !== 'chip' && !shouldShowEditableInput && (jsx(Typography, { className: checkboxClasses.description, color: "text-neutral", variant: "caption", children: description }))] }))] }), shouldShowEditableInput && defaultEditableInput && mode !== 'chip' && !indeterminate && (jsx("div", { className: checkboxClasses.editableInputContainer, children: jsx(Input, { ...defaultEditableInput, ...((!isChecked || disabled) && defaultEditableInput.disabled !== true ? { disabled: true } : {}), inputRef: composeRefs([
+            [checkboxClasses.mode(mode)]: mode !== 'default',
+        }, checkboxClasses.size(size)), children: [jsxs("label", { ref: ref, ...rest, className: checkboxClasses.labelContainer, children: [jsx("div", { className: checkboxClasses.inputContainer, children: jsxs("div", { className: checkboxClasses.inputContent, children: [jsx("input", { ...restInputProps, "aria-checked": isIndeterminate ? 'mixed' : checked, "aria-disabled": disabled, checked: isChecked, className: checkboxClasses.input, disabled: disabled, id: finalInputId, name: resolvedName, onChange: onChange, ref: composedInputRef, type: "checkbox", value: value }), mode === 'chip' && isChecked && (jsx(Icon, { "aria-hidden": "true", className: checkboxClasses.icon, color: "brand", icon: CheckedIcon, size: 16 })), mode !== 'chip' && isChecked && (jsx(Icon, { "aria-hidden": "true", className: checkboxClasses.icon, color: "fixed-light", icon: CheckedIcon, size: 7 })), mode !== 'chip' && isIndeterminate && (jsx("span", { "aria-hidden": "true", className: checkboxClasses.indeterminateLine }))] }) }), (label || description) && (jsxs("span", { className: checkboxClasses.textContainer, children: [label && (jsx(Typography, { className: checkboxClasses.label, color: labelColor, variant: "label-primary", children: label })), description && mode !== 'chip' && !shouldShowEditableInput && (jsx(Typography, { className: checkboxClasses.description, color: "text-neutral", variant: "caption", children: description }))] }))] }), shouldShowEditableInput && defaultEditableInput && mode !== 'chip' && !indeterminate && (jsx("div", { className: checkboxClasses.editableInputContainer, children: jsx(Input, { ...defaultEditableInput, ...((!isChecked || disabled) && defaultEditableInput.disabled !== true ? { disabled: true } : {}), inputRef: composeRefs([
                         defaultEditableInput.inputRef,
                         editableInputRef,
                     ]), variant: "base" }) }))] }));

package/Checkbox/CheckboxGroup.js

@@ -177,7 +177,7 @@ const CheckboxGroup = forwardRef(function CheckboxGroup(props, ref) {
     }, [canRenderLevelControl, level, onChangeProp, normalizedOptions, resolvedName, setValue, value]);
     return (jsxs("div", { ...rest, ref: ref, "aria-orientation": ariaOrientation, className: cx(checkboxGroupClasses.host, {
             [checkboxGroupClasses.nested]: isLevelActive,
-        }, className), role: role, children: [canRenderLevelControl && !shouldRenderLevelInsideContent && (jsx(Checkbox, { checked: levelChecked, disabled: disabled || (level === null || level === void 0 ? void 0 : level.disabled), id: `${resolvedName}-level-control`, indeterminate: levelIndeterminate, label: (_b = level === null || level === void 0 ? void 0 : level.label) !== null && _b !== void 0 ? _b : '', mode: (_c = level === null || level === void 0 ? void 0 : level.mode) !== null && _c !== void 0 ? _c : 'main', name: `${resolvedName}-level-control`, onChange: handleLevelControlChange })), jsxs("div", { className: cx(checkboxGroupClasses.contentWrapper, checkboxGroupClasses.layout(layout), mode && checkboxGroupClasses.mode(mode)), children: [canRenderLevelControl && shouldRenderLevelInsideContent && (jsxs(Fragment, { children: [jsx(Checkbox, { checked: levelChecked, disabled: disabled || (level === null || level === void 0 ? void 0 : level.disabled), id: `${resolvedName}-level-control`, indeterminate: levelIndeterminate, label: (_d = level === null || level === void 0 ? void 0 : level.label) !== null && _d !== void 0 ? _d : '', mode: (_e = level === null || level === void 0 ? void 0 : level.mode) !== null && _e !== void 0 ? _e : 'main', name: `${resolvedName}-level-control`, onChange: handleLevelControlChange }), isHorizontalLayout && jsx("i", { className: checkboxGroupClasses.levelControlSeparator })] })), jsx(CheckboxGroupContext.Provider, { value: context, children: children })] })] }));
+        }, className), role: role, children: [canRenderLevelControl && !shouldRenderLevelInsideContent && (jsx(Checkbox, { checked: levelChecked, disabled: disabled || (level === null || level === void 0 ? void 0 : level.disabled), id: `${resolvedName}-level-control`, indeterminate: levelIndeterminate, label: (_b = level === null || level === void 0 ? void 0 : level.label) !== null && _b !== void 0 ? _b : '', mode: (_c = level === null || level === void 0 ? void 0 : level.mode) !== null && _c !== void 0 ? _c : 'default', name: `${resolvedName}-level-control`, onChange: handleLevelControlChange })), jsxs("div", { className: cx(checkboxGroupClasses.contentWrapper, checkboxGroupClasses.layout(layout), mode && checkboxGroupClasses.mode(mode)), children: [canRenderLevelControl && shouldRenderLevelInsideContent && (jsxs(Fragment, { children: [jsx(Checkbox, { checked: levelChecked, disabled: disabled || (level === null || level === void 0 ? void 0 : level.disabled), id: `${resolvedName}-level-control`, indeterminate: levelIndeterminate, label: (_d = level === null || level === void 0 ? void 0 : level.label) !== null && _d !== void 0 ? _d : '', mode: (_e = level === null || level === void 0 ? void 0 : level.mode) !== null && _e !== void 0 ? _e : 'default', name: `${resolvedName}-level-control`, onChange: handleLevelControlChange }), isHorizontalLayout && jsx("i", { className: checkboxGroupClasses.levelControlSeparator })] })), jsx(CheckboxGroupContext.Provider, { value: context, children: children })] })] }));
 });
 
 export { assignCheckboxGroupValuesToEvent, CheckboxGroup as default };

package/ContentHeader/ContentHeader.d.ts

@@ -5,10 +5,12 @@ import { SelectProps } from '../Select';
 import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
 import { IconDefinition } from '@mezzanine-ui/icons';
 import { DropdownProps } from '../Dropdown';
+import { ToggleProps } from '../Toggle';
+import { CheckboxProps } from '../Checkbox';
 type SegmentedControlProps = {
     mock: 'SegmentedControlProps';
 };
-type ContentHeaderChild = ReactElement<SearchInputProps> | ReactElement<SelectProps> | ReactElement<SegmentedControlProps> | ReactElement<ButtonProps> | ReactElement<DropdownProps> | ReactElement<{
+type ContentHeaderChild = ReactElement<SearchInputProps> | ReactElement<SelectProps> | ReactElement<SegmentedControlProps> | ReactElement<ToggleProps> | ReactElement<CheckboxProps> | ReactElement<ButtonProps> | ReactElement<DropdownProps> | ReactElement<{
     href: string;
 }> | null | false | undefined;
 /**
@@ -45,19 +47,8 @@ export type ContentHeaderProps = Omit<NativeElementPropsWithoutKeyAndRef<'header
     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';
+        variant: 'search' | 'select' | 'segmentedControl' | 'toggle' | 'checkbox';
+    } & (SearchInputProps | SelectProps | SegmentedControlProps | ToggleProps | CheckboxProps);
     /** Main title text for the content header */
     title: string;
     /**
@@ -71,7 +62,22 @@ export type ContentHeaderProps = Omit<NativeElementPropsWithoutKeyAndRef<'header
     utilities?: ((ButtonProps & {
         icon: IconDefinition;
     }) | DropdownProps)[];
-};
+} & ({
+    /**
+     * 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';
+} | {
+    onBackClick?: never;
+    size?: 'sub';
+});
 /**
  * ContentHeader component. <br />
  * A flexible header with title, description, filter, action buttons, and utility icons. <br />
@@ -102,59 +108,5 @@ export type ContentHeaderProps = Omit<NativeElementPropsWithoutKeyAndRef<'header
  *  </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>>;
+declare const ContentHeader: import("react").ForwardRefExoticComponent<ContentHeaderProps & import("react").RefAttributes<HTMLElement>>;
 export default ContentHeader;

package/ContentHeader/ContentHeader.js

@@ -48,7 +48,7 @@ const ContentHeader = forwardRef(function ContentHeader(props, ref) {
     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 }))] })] }));
+    return (jsxs("header", { ...rest, className: cx(contentHeaderClasses.host, contentHeaderClasses.size(size), className), ref: ref, children: [jsxs("span", { className: contentHeaderClasses.titleArea, children: [renderBackButton && size !== 'sub' && (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/ContentHeaderResponsive.d.ts

@@ -0,0 +1,9 @@
+import { ResponsiveBreakpoint } from '@mezzanine-ui/core/content-header';
+import { FC, ReactNode } from 'react';
+export interface ContentHeaderResponsiveProps {
+    breakpoint: ResponsiveBreakpoint;
+    children?: ReactNode;
+}
+/** @experimental This component is still in testing and the API may change frequently */
+declare const ContentHeaderResponsive: FC<ContentHeaderResponsiveProps>;
+export default ContentHeaderResponsive;

package/ContentHeader/ContentHeaderResponsive.js

@@ -0,0 +1,7 @@
+/** @experimental This component is still in testing and the API may change frequently */
+const ContentHeaderResponsive = (props) => {
+    const { children } = props;
+    return children;
+};
+
+export { ContentHeaderResponsive as default };

package/ContentHeader/utils.d.ts

@@ -6,9 +6,9 @@ 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 renderButton: (button: ButtonProps | ButtonGroupChild | undefined, size: ButtonProps["size"], key?: string) => ReactElement<ButtonProps> | null;
+export declare const renderFilterProp: (props: ContentHeaderProps["filter"], size: "main" | "sub") => import("react/jsx-runtime").JSX.Element | null;
+export declare const renderIconButtonWithProps: (child: ReactElement<ButtonProps>, size: ButtonProps["size"], key?: string) => ReactElement<ButtonProps>;
 export declare const renderIconButtonsProp: (utilities: ContentHeaderProps["utilities"], size: ButtonProps["size"]) => ButtonGroupChild | ButtonGroupChild[];
 /**
  * Renders action buttons based on the actions configuration.