@mezzanine-ui/react 1.0.0-beta.1 → 1.0.0-beta.3

package/AutoComplete/useAutoCompleteKeyboard.d.ts

@@ -0,0 +1,31 @@
+import { Dispatch, KeyboardEvent, KeyboardEventHandler, Ref, SetStateAction } from 'react';
+import { DropdownOption } from '@mezzanine-ui/core/dropdown/dropdown';
+import { SelectValue } from '../Select/typings';
+type UseAutoCompleteKeyboardParams = {
+    activeIndex: number | null;
+    addable: boolean;
+    createSeparators: string[];
+    dropdownOptions: DropdownOption[];
+    handleBulkCreate: (texts: string[]) => void;
+    handleDropdownSelect: (option: DropdownOption) => void;
+    inputRef?: Ref<HTMLInputElement>;
+    inputPropsOnKeyDown?: KeyboardEventHandler<HTMLInputElement>;
+    isMultiple: boolean;
+    mode: 'single' | 'multiple';
+    onFocus: (focus: boolean) => void;
+    open: boolean;
+    processBulkCreate: (text: string) => string[];
+    searchText: string;
+    searchTextExistWithoutOption: boolean;
+    setActiveIndex: Dispatch<SetStateAction<number | null>>;
+    setListboxHasVisualFocus: (focus: boolean) => void;
+    setInsertText: (value: string) => void;
+    setSearchText: (value: string) => void;
+    toggleOpen: (newOpen: boolean | ((prev: boolean) => boolean)) => void;
+    value: SelectValue[] | SelectValue | null | undefined;
+    wrappedOnChange: (chooseOption: SelectValue | null) => SelectValue[] | SelectValue | null;
+};
+export declare function useAutoCompleteKeyboard({ activeIndex, addable, createSeparators, dropdownOptions, handleBulkCreate, handleDropdownSelect, inputPropsOnKeyDown, inputRef, mode, onFocus, open, processBulkCreate, searchText, searchTextExistWithoutOption, setActiveIndex, setInsertText, setListboxHasVisualFocus, setSearchText, toggleOpen, value, wrappedOnChange, }: UseAutoCompleteKeyboardParams): {
+    handleInputKeyDown: (e: KeyboardEvent<HTMLInputElement>) => void;
+};
+export {};

package/AutoComplete/useAutoCompleteKeyboard.js

@@ -0,0 +1,149 @@
+import { useCallback } from 'react';
+import { createDropdownKeydownHandler } from '../Dropdown/dropdownKeydownHandler.js';
+
+function isMultipleValue(value) {
+    return Array.isArray(value);
+}
+function useAutoCompleteKeyboard({ activeIndex, addable, createSeparators, dropdownOptions, handleBulkCreate, handleDropdownSelect, inputPropsOnKeyDown, inputRef, mode, onFocus, open, processBulkCreate, searchText, searchTextExistWithoutOption, setActiveIndex, setInsertText, setListboxHasVisualFocus, setSearchText, toggleOpen, value, wrappedOnChange, }) {
+    const handleKeyDown = useCallback((e) => createDropdownKeydownHandler({
+        activeIndex,
+        onEnterSelect: (option) => {
+            handleDropdownSelect(option);
+            if (mode === 'single') {
+                toggleOpen(false);
+                onFocus(false);
+            }
+        },
+        onEscape: () => {
+            var _a;
+            toggleOpen(false);
+            setActiveIndex(null);
+            setListboxHasVisualFocus(false);
+            if (inputRef && typeof inputRef !== 'function') {
+                (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.blur();
+            }
+        },
+        open,
+        options: dropdownOptions,
+        setActiveIndex,
+        setListboxHasVisualFocus,
+        setOpen: (newOpen) => {
+            if (newOpen && !open) {
+                toggleOpen(true);
+            }
+            else if (!newOpen && open) {
+                toggleOpen(false);
+            }
+        },
+    })(e), [
+        activeIndex,
+        dropdownOptions,
+        handleDropdownSelect,
+        inputRef,
+        mode,
+        onFocus,
+        open,
+        setActiveIndex,
+        setListboxHasVisualFocus,
+        toggleOpen,
+    ]);
+    const handleEnterKey = useCallback((e) => {
+        if (e.key === 'Enter' && open) {
+            if (addable && searchText) {
+                const hasSeparator = createSeparators.some((sep) => searchText.includes(sep));
+                if (hasSeparator && mode === 'multiple') {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    const textsToCreate = processBulkCreate(searchText);
+                    if (textsToCreate.length > 0) {
+                        handleBulkCreate(textsToCreate);
+                        setSearchText('');
+                        setInsertText('');
+                        return true;
+                    }
+                }
+                if (!hasSeparator && searchTextExistWithoutOption) {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    const textsToCreate = processBulkCreate(searchText);
+                    if (textsToCreate.length > 0) {
+                        handleBulkCreate(textsToCreate);
+                        setSearchText('');
+                        setInsertText('');
+                    }
+                    return true;
+                }
+            }
+            if (activeIndex === null && dropdownOptions.length > 0) {
+                e.preventDefault();
+                e.stopPropagation();
+                const optionToSelect = dropdownOptions[0];
+                if (optionToSelect) {
+                    handleDropdownSelect(optionToSelect);
+                    if (mode === 'single') {
+                        toggleOpen(false);
+                        onFocus(false);
+                    }
+                }
+                return true;
+            }
+        }
+        return false;
+    }, [
+        activeIndex,
+        addable,
+        createSeparators,
+        dropdownOptions,
+        handleBulkCreate,
+        handleDropdownSelect,
+        mode,
+        onFocus,
+        open,
+        processBulkCreate,
+        searchText,
+        searchTextExistWithoutOption,
+        setInsertText,
+        setSearchText,
+        toggleOpen,
+    ]);
+    const handleInputKeyDown = useCallback((e) => {
+        if (handleEnterKey(e))
+            return;
+        if (mode === 'multiple' &&
+            isMultipleValue(value) &&
+            value.length > 0 &&
+            !searchText) {
+            if (e.key === 'Backspace') {
+                e.preventDefault();
+                const lastValue = value[value.length - 1];
+                if (lastValue) {
+                    wrappedOnChange(lastValue);
+                }
+                return;
+            }
+            if (e.key === 'Delete') {
+                e.preventDefault();
+                const firstValue = value[0];
+                if (firstValue) {
+                    wrappedOnChange(firstValue);
+                }
+                return;
+            }
+        }
+        handleKeyDown(e);
+        inputPropsOnKeyDown === null || inputPropsOnKeyDown === void 0 ? void 0 : inputPropsOnKeyDown(e);
+    }, [
+        handleEnterKey,
+        handleKeyDown,
+        inputPropsOnKeyDown,
+        mode,
+        searchText,
+        value,
+        wrappedOnChange,
+    ]);
+    return {
+        handleInputKeyDown,
+    };
+}
+
+export { useAutoCompleteKeyboard };

package/AutoComplete/useAutoCompleteSearch.d.ts

@@ -0,0 +1,16 @@
+type UseAutoCompleteSearchParams = {
+    asyncData: boolean;
+    loading: boolean;
+    onSearch?: (input: string) => void | Promise<void>;
+    searchDebounceTime: number;
+};
+type RunSearchOptions = {
+    immediate?: boolean;
+};
+export declare function useAutoCompleteSearch({ asyncData, loading, onSearch, searchDebounceTime, }: UseAutoCompleteSearchParams): {
+    cancelSearch: () => void;
+    internalLoading: boolean;
+    isLoading: boolean;
+    runSearch: (searchValue: string, options?: RunSearchOptions) => void;
+};
+export {};

package/AutoComplete/useAutoCompleteSearch.js

@@ -0,0 +1,69 @@
+import debounce from 'lodash/debounce';
+import { useState, useRef, useCallback, useMemo, useEffect } from 'react';
+
+function useAutoCompleteSearch({ asyncData, loading, onSearch, searchDebounceTime, }) {
+    const [internalLoading, setInternalLoading] = useState(false);
+    const requestSeqRef = useRef(0);
+    const executeSearch = useCallback((searchValue) => {
+        if (!onSearch) {
+            if (asyncData)
+                setInternalLoading(false);
+            return;
+        }
+        if (!asyncData) {
+            onSearch(searchValue);
+            return;
+        }
+        const currentSeq = requestSeqRef.current + 1;
+        requestSeqRef.current = currentSeq;
+        setInternalLoading(true);
+        try {
+            const result = onSearch(searchValue);
+            const finalize = () => {
+                if (requestSeqRef.current === currentSeq) {
+                    setInternalLoading(false);
+                }
+            };
+            if (result instanceof Promise) {
+                result.finally(finalize);
+            }
+            else {
+                finalize();
+            }
+        }
+        catch (error) {
+            // Handle synchronous errors that occur before Promise creation
+            // Reset loading state to prevent UI from being stuck in loading state
+            if (requestSeqRef.current === currentSeq) {
+                setInternalLoading(false);
+            }
+            // Re-throw error to allow calling code to handle it
+            // This is necessary because the error occurred synchronously and the caller
+            // should be aware of it (e.g., for error logging or user notification)
+            throw error;
+        }
+    }, [asyncData, onSearch]);
+    const debouncedSearch = useMemo(() => debounce((value) => executeSearch(value), searchDebounceTime), [executeSearch, searchDebounceTime]);
+    useEffect(() => () => debouncedSearch.cancel(), [debouncedSearch]);
+    const runSearch = useCallback((searchValue, options) => {
+        if (options === null || options === void 0 ? void 0 : options.immediate) {
+            debouncedSearch.cancel();
+            executeSearch(searchValue);
+            return;
+        }
+        if (!searchValue) {
+            debouncedSearch.cancel();
+            executeSearch(searchValue);
+            return;
+        }
+        debouncedSearch(searchValue);
+    }, [debouncedSearch, executeSearch]);
+    return {
+        cancelSearch: debouncedSearch.cancel,
+        internalLoading,
+        isLoading: asyncData ? internalLoading || loading : loading,
+        runSearch,
+    };
+}
+
+export { useAutoCompleteSearch };

package/AutoComplete/useCreationTracker.d.ts

@@ -0,0 +1,17 @@
+import { SelectValue } from '../Select/typings';
+type CreationTracker = {
+    newlyCreatedIds: Set<string>;
+    unselectedCreatedIds: Set<string>;
+    allCreatedIds: Set<string>;
+};
+export declare function useCreationTracker(): {
+    creationTrackerRef: import("react").RefObject<CreationTracker>;
+    filterUnselected: (options: SelectValue[]) => SelectValue<string>[];
+    clearUnselected: () => void;
+    markCreated: (id: string) => void;
+    clearNewlyCreated: (ids?: string[]) => void;
+    markUnselected: (ids: string[]) => void;
+    isNewlyCreated: (id: string) => boolean;
+    isCreated: (id: string) => boolean;
+};
+export {};

package/AutoComplete/useCreationTracker.js

@@ -0,0 +1,47 @@
+import { useRef, useCallback } from 'react';
+
+function useCreationTracker() {
+    const creationTrackerRef = useRef({
+        newlyCreatedIds: new Set(),
+        unselectedCreatedIds: new Set(),
+        allCreatedIds: new Set(),
+    });
+    const filterUnselected = useCallback((options) => options.filter((opt) => !creationTrackerRef.current.unselectedCreatedIds.has(opt.id)), [creationTrackerRef]);
+    const clearUnselected = useCallback(() => {
+        creationTrackerRef.current.unselectedCreatedIds.clear();
+    }, []);
+    const clearNewlyCreated = useCallback((ids) => {
+        if (!ids) {
+            creationTrackerRef.current.newlyCreatedIds.clear();
+            return;
+        }
+        ids.forEach((id) => {
+            creationTrackerRef.current.newlyCreatedIds.delete(id);
+        });
+    }, []);
+    const markCreated = useCallback((id) => {
+        creationTrackerRef.current.newlyCreatedIds.add(id);
+        creationTrackerRef.current.allCreatedIds.add(id);
+    }, []);
+    const markUnselected = useCallback((ids) => {
+        ids.forEach((id) => {
+            if (creationTrackerRef.current.allCreatedIds.has(id)) {
+                creationTrackerRef.current.unselectedCreatedIds.add(id);
+            }
+        });
+    }, []);
+    const isNewlyCreated = useCallback((id) => creationTrackerRef.current.newlyCreatedIds.has(id), []);
+    const isCreated = useCallback((id) => creationTrackerRef.current.allCreatedIds.has(id), []);
+    return {
+        creationTrackerRef,
+        filterUnselected,
+        clearUnselected,
+        markCreated,
+        clearNewlyCreated,
+        markUnselected,
+        isNewlyCreated,
+        isCreated,
+    };
+}
+
+export { useCreationTracker };

package/Badge/Badge.js

@@ -15,11 +15,11 @@ const isCountVariant = (variant) => [
  */
 const Badge = forwardRef(function Badge(props, ref) {
     const { children, count, className, overflowCount, text, variant, ...rest } = props;
-    return (jsxs("div", { className: badgeClasses.container(!!children), children: [jsx("span", { ...rest, ref: ref, className: cx(badgeClasses.host, badgeClasses.variant(variant), { [badgeClasses.hide]: isCountVariant(variant) && count === 0 }, className), children: isCountVariant(variant)
+    return (jsxs("div", { className: badgeClasses.container(!!children), children: [children, jsx("span", { ...rest, ref: ref, className: cx(badgeClasses.host, badgeClasses.variant(variant), { [badgeClasses.hide]: isCountVariant(variant) && count === 0 }, className), children: isCountVariant(variant)
                     ? overflowCount && count > overflowCount
                         ? `${overflowCount}+`
                         : count
-                    : text }), children] }));
+                    : text })] }));
 });
 
 export { Badge as default };

package/Breadcrumb/BreadcrumbItem.d.ts

@@ -1,4 +1,4 @@
-declare const BreadcrumbItem: import("react").ForwardRefExoticComponent<Omit<Omit<import("..").ComponentPropsWithoutKeyAndRef<"button">, "label" | "component" | "current" | "options" | "href" | "target" | "expand"> & (import("./typings").BreadcrumbDropdownItemProps | import("./typings").BreadcrumbItemTextProps | import("./typings").BreadcrumbLinkItemProps), "component"> & {
+declare const BreadcrumbItem: import("react").ForwardRefExoticComponent<Omit<Omit<import("..").ComponentPropsWithoutKeyAndRef<"button">, "expand" | "label" | "component" | "current" | "options" | "href" | "target"> & (import("./typings").BreadcrumbDropdownItemProps | import("./typings").BreadcrumbItemTextProps | import("./typings").BreadcrumbLinkItemProps), "component"> & {
     component?: import("./typings").BreadcrumbItemComponent | undefined;
 } & import("react").RefAttributes<HTMLElement>>;
 export default BreadcrumbItem;

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

@@ -0,0 +1,30 @@
+import { ReactElement } from 'react';
+import { DescriptionOrientation } from '@mezzanine-ui/core/description';
+import { DescriptionTitleProps } from './DescriptionTitle';
+import { DescriptionContentProps } from './DescriptionContent';
+import { BadgeProps } from '../Badge/typings';
+import { ButtonProps } from '../Button';
+import { ProgressProps } from '../Progress';
+import { TagGroupProps } from '../Tag/TagGroup';
+type DistributiveOmit<T, K extends PropertyKey> = T extends any ? Omit<T, K> : never;
+export type DescriptionProps = DistributiveOmit<DescriptionTitleProps, 'className' | 'children'> & {
+    /**
+     * Defines what is rendered as the description content
+     */
+    children: ReactElement<DescriptionContentProps> | ReactElement<BadgeProps> | ReactElement<ButtonProps> | ReactElement<ProgressProps> | ReactElement<TagGroupProps>;
+    /**
+     * Custom class name for description
+     */
+    className?: string;
+    /**
+     * Define the layout direction between the title and the content
+     * @default 'horizontal'
+     */
+    orientation?: DescriptionOrientation;
+    /**
+     * title text for description
+     */
+    title: string;
+};
+declare const Description: import("react").ForwardRefExoticComponent<DescriptionProps & import("react").RefAttributes<HTMLDivElement>>;
+export default Description;

package/Description/Description.js

@@ -0,0 +1,13 @@
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { descriptionClasses } from '@mezzanine-ui/core/description';
+import DescriptionTitle from './DescriptionTitle.js';
+import cx from 'clsx';
+
+const Description = forwardRef(function Description(props, ref) {
+    const { children, className, orientation = 'horizontal', title, ...rest } = props;
+    return (jsxs("div", { className: cx(descriptionClasses.host, descriptionClasses.orientation(orientation), className), ref: ref, children: [jsx(DescriptionTitle, { ...rest, children: title }), children] }));
+});
+
+export { Description as default };

package/Description/DescriptionContent.d.ts

@@ -0,0 +1,41 @@
+import { IconDefinition } from '@mezzanine-ui/icons';
+import { DescriptionSize, DescriptionContentVariant } from '@mezzanine-ui/core/description';
+interface DescriptionContentBaseProps {
+    /**
+     * Custom class name for content
+     */
+    className?: string;
+    /**
+     * Content text
+     */
+    children: string;
+    /**
+     * Control the text size of the content
+     * @default 'main'
+     */
+    size?: DescriptionSize;
+    /**
+     * Define the style and behavior of the content
+     * @default 'normal'
+     */
+    variant?: Extract<DescriptionContentVariant, 'normal' | 'statistic' | 'trend-up' | 'trend-down'>;
+    /**
+     * Custom icon rendered after the content text
+     */
+    icon?: never;
+    /**
+     * Click handler for the icon.
+     */
+    onClickIcon?: never;
+}
+interface DescriptionContentWithClickableIcon {
+    className?: string;
+    children: string;
+    size?: DescriptionSize;
+    variant: Extract<DescriptionContentVariant, 'with-icon'>;
+    icon: IconDefinition;
+    onClickIcon?: VoidFunction;
+}
+export type DescriptionContentProps = DescriptionContentBaseProps | DescriptionContentWithClickableIcon;
+declare const DescriptionContent: import("react").ForwardRefExoticComponent<DescriptionContentProps & import("react").RefAttributes<HTMLSpanElement>>;
+export default DescriptionContent;

package/Description/DescriptionContent.js

@@ -0,0 +1,14 @@
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { CaretUpIcon, CaretDownIcon } from '@mezzanine-ui/icons';
+import { descriptionClasses } from '@mezzanine-ui/core/description';
+import Icon from '../Icon/Icon.js';
+import cx from 'clsx';
+
+const DescriptionContent = forwardRef(function DescriptionContent(props, ref) {
+    const { className, children, icon, onClickIcon, size = 'main', variant = 'normal', } = props;
+    return (jsxs("span", { className: cx(descriptionClasses.contentHost, descriptionClasses.contentVariant(variant), descriptionClasses.contentSize(size), className), ref: ref, children: [variant === 'trend-up' && (jsx(Icon, { className: descriptionClasses.contentTrendUp, icon: CaretUpIcon, size: 16 })), variant === 'trend-down' && (jsx(Icon, { className: descriptionClasses.contentTrendDown, icon: CaretDownIcon, size: 16 })), children, variant === 'with-icon' && icon && (jsx(Icon, { className: descriptionClasses.contentIcon, icon: icon, size: 16, onClick: onClickIcon }))] }));
+});
+
+export { DescriptionContent as default };

package/Description/DescriptionGroup.d.ts

@@ -0,0 +1,13 @@
+import { ReactElement } from 'react';
+export interface DescriptionGroupProps {
+    /**
+     * Custom class name for group
+     */
+    className?: string;
+    /**
+     * Description elements to be grouped and displayed together
+     */
+    children: ReactElement[];
+}
+declare const DescriptionGroup: import("react").ForwardRefExoticComponent<DescriptionGroupProps & import("react").RefAttributes<HTMLDivElement>>;
+export default DescriptionGroup;

package/Description/DescriptionGroup.js

@@ -0,0 +1,12 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { descriptionClasses } from '@mezzanine-ui/core/description';
+import cx from 'clsx';
+
+const DescriptionGroup = forwardRef(function DescriptionGroup(props, ref) {
+    const { className, children } = props;
+    return (jsx("div", { className: cx(descriptionClasses.groupHost, className), ref: ref, children: children }));
+});
+
+export { DescriptionGroup as default };

package/Description/DescriptionTitle.d.ts

@@ -0,0 +1,45 @@
+import { IconDefinition } from '@mezzanine-ui/icons';
+import { DescriptionWidthType } from '@mezzanine-ui/core/description';
+import { BadgeDotVariant } from '@mezzanine-ui/core/badge';
+import { Placement } from '@floating-ui/react-dom';
+interface DescriptionTitleBaseProps {
+    /**
+     * Displays a badge dot alongside the title text
+     */
+    badge?: BadgeDotVariant;
+    /**
+     * Custom class name for title
+     */
+    className?: string;
+    /**
+     * Title text
+     */
+    children: string;
+    /**
+     * Controls the layout width behavior of the title
+     * @default 'stretch'
+     */
+    widthType?: DescriptionWidthType;
+}
+interface DescriptionTitleWithTooltip {
+    /**
+     * An icon displayed after the title text
+     */
+    icon: IconDefinition;
+    /**
+     * Text content displayed in a tooltip when hovering over the icon
+     */
+    tooltip: string;
+    /**
+     * Defines the placement of the tooltip relative to the icon
+     */
+    tooltipPlacement?: Placement;
+}
+interface DescriptionTitleWithoutTooltip {
+    icon?: IconDefinition;
+    tooltip?: undefined;
+    tooltipPlacement?: undefined;
+}
+export type DescriptionTitleProps = (DescriptionTitleBaseProps & DescriptionTitleWithTooltip) | (DescriptionTitleBaseProps & DescriptionTitleWithoutTooltip);
+declare const DescriptionTitle: import("react").ForwardRefExoticComponent<DescriptionTitleProps & import("react").RefAttributes<HTMLDivElement>>;
+export default DescriptionTitle;

package/Description/DescriptionTitle.js

@@ -0,0 +1,17 @@
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { descriptionClasses } from '@mezzanine-ui/core/description';
+import Badge from '../Badge/Badge.js';
+import Tooltip from '../Tooltip/Tooltip.js';
+import Icon from '../Icon/Icon.js';
+import cx from 'clsx';
+
+const DescriptionTitle = forwardRef(function DescriptionTitle(props, ref) {
+    const { badge, className, children, icon, tooltip, tooltipPlacement, widthType = 'stretch', } = props;
+    return (jsxs("div", { className: cx(descriptionClasses.titleHost, descriptionClasses.titleWidth(widthType), className), ref: ref, children: [badge ? (jsx(Badge, { variant: badge, text: children, className: descriptionClasses.titleText })) : (jsx("span", { className: descriptionClasses.titleText, children: children })), icon ? (tooltip ? (jsx(Tooltip, { title: tooltip, options: {
+                    placement: tooltipPlacement !== null && tooltipPlacement !== void 0 ? tooltipPlacement : 'top',
+                }, children: ({ onMouseEnter, onMouseLeave, ref }) => (jsx(Icon, { ref: ref, icon: icon, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, size: 16 })) })) : (jsx(Icon, { icon: icon, size: 16 }))) : null] }));
+});
+
+export { DescriptionTitle as default };