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

package/Dropdown/DropdownItemCard.js

@@ -33,11 +33,12 @@ function DropdownItemCard(props) {
     const isControlled = checked !== undefined;
     const [internalChecked, setInternalChecked] = useState(defaultChecked !== null && defaultChecked !== void 0 ? defaultChecked : false);
     const isChecked = isControlled ? checked : internalChecked;
-    const labelColor = useMemo(() => {
-        return validate === 'danger' ? 'text-error' : 'text-neutral-solid';
-    }, [validate]);
     const appendIconColor = useMemo(() => {
-        return disabled || validate === 'danger' ? 'neutral-light' : 'neutral';
+        if (disabled)
+            return 'neutral-light';
+        if (validate === 'danger')
+            return 'error';
+        return 'brand';
     }, [disabled, validate]);
     const iconColor = useMemo(() => {
         if (disabled)
@@ -55,10 +56,10 @@ function DropdownItemCard(props) {
             ];
     }, [cardLabel, followText]);
     const showPrependContent = useMemo(() => {
-        return prependIcon || (checkSite === 'prepend' && mode === 'multiple');
+        return prependIcon || (checkSite === 'prefix' && mode === 'multiple');
     }, [prependIcon, checkSite, mode]);
     const showAppendContent = useMemo(() => {
-        return appendContent || appendIcon || (checkSite === 'append' && isChecked);
+        return appendContent || appendIcon || (checkSite === 'suffix' && isChecked);
     }, [appendContent, appendIcon, checkSite, isChecked]);
     const subTitleParts = useMemo(() => {
         return followText && subTitle
@@ -72,8 +73,8 @@ function DropdownItemCard(props) {
                 ]
                 : [];
     }, [subTitle, followText]);
-    const renderHighlightedText = (parts, defaultColor, className, id) => {
-        return (jsx(Typography, { color: defaultColor, className: className, id: id, children: parts.map((part, index) => (jsx("span", { className: part.highlight && validate !== 'danger' ? dropdownClasses.cardHighlightedText : '', children: part.text }, index))) }));
+    const renderHighlightedText = (parts, className, id) => {
+        return (jsx(Typography, { className: className, id: id, children: parts.map((part, index) => (jsx("span", { className: part.highlight && validate !== 'danger' ? dropdownClasses.cardHighlightedText : '', children: part.text }, index))) }));
     };
     const toggleChecked = () => {
         if (disabled)
@@ -105,11 +106,11 @@ function DropdownItemCard(props) {
         }
     };
     return (jsxs(Fragment, { children: [jsx("li", { ...(labelId ? { 'aria-labelledby': labelId } : {}), ...(ariaLabel ? { 'aria-label': ariaLabel } : {}), "aria-selected": active, className: cx(dropdownClasses.card, dropdownClasses.cardLevel(level), {
-                    // Highlight: keyboard/mouse focused (active) or selected (isChecked)
                     [dropdownClasses.cardActive]: active || isChecked,
                     [dropdownClasses.cardDisabled]: disabled,
+                    [dropdownClasses.cardDanger]: validate === 'danger',
                 }, className), id: id, role: "option", tabIndex: -1, onMouseEnter: onMouseEnter, onClick: handleClick, onKeyDown: handleKeyDown, children: jsxs("div", { className: dropdownClasses.cardContainer, children: [showPrependContent && (jsxs("div", { className: dropdownClasses.cardPrependContent, children: [prependIcon
-                                    && jsx(Icon, { icon: prependIcon, color: iconColor }), checkSite === 'prepend' && mode === 'multiple' && (jsx(Checkbox, { checked: isChecked, disabled: disabled, onChange: handleCheckboxChange }))] })), jsxs("div", { className: dropdownClasses.cardBody, children: [cardLabel && renderHighlightedText(labelParts, labelColor, dropdownClasses.cardTitle, labelId), subTitleParts.length > 0 && renderHighlightedText(subTitleParts, 'text-neutral', dropdownClasses.cardDescription)] }), showAppendContent && (jsxs("div", { className: dropdownClasses.cardAppendContent, children: [appendContent && jsx(Typography, { color: "text-neutral-light", children: appendContent }), appendIcon && jsx(Icon, { icon: appendIcon, color: iconColor }), checkSite === 'append' && isChecked && jsx(Icon, { icon: CheckedIcon, color: appendIconColor, size: 16 })] }))] }) }), showUnderline && jsx("div", { className: dropdownClasses.cardUnderline })] }));
+                                    && jsx(Icon, { icon: prependIcon, color: iconColor }), checkSite === 'prefix' && mode === 'multiple' && (jsx(Checkbox, { checked: isChecked, disabled: disabled, onChange: handleCheckboxChange }))] })), jsxs("div", { className: dropdownClasses.cardBody, children: [cardLabel && renderHighlightedText(labelParts, dropdownClasses.cardTitle, labelId), subTitleParts.length > 0 && renderHighlightedText(subTitleParts, dropdownClasses.cardDescription)] }), showAppendContent && (jsxs("div", { className: dropdownClasses.cardAppendContent, children: [appendContent && jsx(Typography, { color: "text-neutral-light", children: appendContent }), appendIcon && jsx(Icon, { icon: appendIcon, color: iconColor }), checkSite === 'suffix' && isChecked && jsx(Icon, { icon: CheckedIcon, color: appendIconColor, size: 16 })] }))] }) }), showUnderline && jsx("div", { className: dropdownClasses.cardUnderline })] }));
 }
 
 export { DropdownItemCard as default };

package/Dropdown/DropdownStatus.d.ts

@@ -1,11 +1,11 @@
-import { dropdownStatus } from "@mezzanine-ui/core/dropdown/dropdown";
+import { DropdownStatus as DropdownStatusType } from "@mezzanine-ui/core/dropdown/dropdown";
 import { IconDefinition } from "@mezzanine-ui/icons";
 export interface DropdownStatusProps {
     /**
      * The status of the dropdown.
      * @default 'loading'
      */
-    status: dropdownStatus;
+    status: DropdownStatusType;
     /**
      * The text of the dropdown loading status.
      */

package/Dropdown/DropdownStatus.js

@@ -0,0 +1,29 @@
+'use client';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useMemo } from 'react';
+import { dropdownClasses } from '@mezzanine-ui/core/dropdown/dropdown';
+import { SpinnerIcon, FolderOpenIcon } from '@mezzanine-ui/icons';
+import Typography from '../Typography/Typography.js';
+import Icon from '../Icon/Icon.js';
+
+function DropdownStatus(props) {
+    const { status, loadingText, emptyText, emptyIcon } = props;
+    const defaultStatusText = useMemo(() => {
+        if (status === 'loading') {
+            return loadingText !== null && loadingText !== void 0 ? loadingText : 'Loading...';
+        }
+        if (status === 'empty') {
+            return emptyText !== null && emptyText !== void 0 ? emptyText : 'No matching options.';
+        }
+        return '';
+    }, [status, loadingText, emptyText]);
+    const IconElement = useMemo(() => {
+        if (status === 'loading') {
+            return jsx(Icon, { icon: SpinnerIcon, size: 16, spin: true, color: "brand" });
+        }
+        return jsx(Icon, { icon: emptyIcon !== null && emptyIcon !== void 0 ? emptyIcon : FolderOpenIcon, size: 16 });
+    }, [status, emptyIcon]);
+    return (jsxs("div", { className: dropdownClasses.status, children: [IconElement, jsx(Typography, { className: dropdownClasses.statusText, children: defaultStatusText })] }));
+}
+
+export { DropdownStatus as default };

package/Dropdown/dropdownKeydownHandler.d.ts

@@ -1,4 +1,5 @@
 import { DropdownOption } from '@mezzanine-ui/core/dropdown/dropdown';
+import { Dispatch, SetStateAction } from 'react';
 /**
  * Provides a keyboard navigation handler for dropdown lists, encapsulating Arrow keys, Enter, and Escape behaviors.
  * Keeps logic centralized in DropdownItem for easy reuse.
@@ -9,7 +10,7 @@ export declare function createDropdownKeydownHandler(params: {
     onEscape?: () => void;
     open: boolean;
     options: DropdownOption[];
-    setActiveIndex: (updater: (prev: number | null) => number | null) => void;
+    setActiveIndex: Dispatch<SetStateAction<number | null>>;
     setListboxHasVisualFocus: (focus: boolean) => void;
     setOpen: (open: boolean) => void;
 }): (e: React.KeyboardEvent<HTMLInputElement>) => void;

package/Dropdown/dropdownKeydownHandler.js

@@ -0,0 +1,73 @@
+/**
+ * Provides a keyboard navigation handler for dropdown lists, encapsulating Arrow keys, Enter, and Escape behaviors.
+ * Keeps logic centralized in DropdownItem for easy reuse.
+ */
+function createDropdownKeydownHandler(params) {
+    const { activeIndex, onEnterSelect, onEscape, open, options, setActiveIndex, setListboxHasVisualFocus, setOpen, } = params;
+    return (e) => {
+        if (options.length === 0)
+            return;
+        switch (e.key) {
+            case 'ArrowDown': {
+                e.preventDefault();
+                e.stopPropagation();
+                if (!open) {
+                    setOpen(true);
+                    setListboxHasVisualFocus(true);
+                    setActiveIndex(() => 0);
+                    return;
+                }
+                setListboxHasVisualFocus(true);
+                setActiveIndex((prev) => {
+                    if (prev === null)
+                        return 0;
+                    return prev >= options.length - 1 ? 0 : prev + 1;
+                });
+                break;
+            }
+            case 'ArrowUp': {
+                e.preventDefault();
+                e.stopPropagation();
+                if (!open) {
+                    setOpen(true);
+                    setListboxHasVisualFocus(true);
+                    setActiveIndex(() => options.length - 1);
+                    return;
+                }
+                setListboxHasVisualFocus(true);
+                setActiveIndex((prev) => {
+                    if (prev === null)
+                        return options.length - 1;
+                    return prev <= 0 ? options.length - 1 : prev - 1;
+                });
+                break;
+            }
+            case 'Enter': {
+                if (!open)
+                    return;
+                e.preventDefault();
+                e.stopPropagation();
+                if (activeIndex !== null && options[activeIndex]) {
+                    onEnterSelect === null || onEnterSelect === void 0 ? void 0 : onEnterSelect(options[activeIndex]);
+                }
+                break;
+            }
+            case 'Escape': {
+                e.preventDefault();
+                e.stopPropagation();
+                onEscape === null || onEscape === void 0 ? void 0 : onEscape();
+                break;
+            }
+            case 'Home':
+            case 'End':
+            case 'ArrowLeft':
+            case 'ArrowRight': {
+                setListboxHasVisualFocus(false);
+                setActiveIndex(() => null);
+                break;
+            }
+        }
+    };
+}
+
+export { createDropdownKeydownHandler };

package/Dropdown/highlightText.js

@@ -8,7 +8,11 @@ function highlightText(text, keyword) {
         return [];
     if (!keyword)
         return [{ text, highlight: false }];
-    const safeKeyword = keyword.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+    // Ensure keyword is a string
+    const keywordString = String(keyword);
+    if (!keywordString)
+        return [{ text, highlight: false }];
+    const safeKeyword = keywordString.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
     const regex = new RegExp(`(${safeKeyword})`, 'gi');
     const parts = [];
     let lastIndex = 0;

package/Dropdown/shortcutTextHandler.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Converts a shortcut key string into a formatted display string.
+ * @param shortcut - Shortcut key string (e.g., 'cmd+n', 'ctrl+n', 'k')
+ * @param isMac - Whether to format as Mac shortcut
+ * @returns Formatted display string
+ */
+export declare const formatShortcut: (shortcut: string | number, isMac: boolean) => string;
+/**
+ * Converts an array of shortcut keys into a display string.
+ * Format: {mac_shortcut} / {windows_shortcut} / {other_keys}
+ *
+ * @param shortcutKeys - Array of shortcut keys
+ * @returns Formatted display string
+ *
+ * @example
+ * shortcutTextHandler(['ctrl+n', 'cmd+n']) // '⌘N / Ctrl+N'
+ * shortcutTextHandler(['delete', 'backspace']) // 'Delete / Backspace'
+ * shortcutTextHandler(['k']) // 'K'
+ * shortcutTextHandler(['ctrl+r', 'cmd+r', 'f5']) // '⌘R / Ctrl+R / F5'
+ * shortcutTextHandler(['cmd+shift+n', 'ctrl+shift+n']) // '⌘⇧N / Ctrl+Shift+N'
+ * shortcutTextHandler(['cmd+option+n', 'ctrl+alt+n']) // '⌘⌥N / Ctrl+Alt+N'
+ */
+export declare const shortcutTextHandler: (shortcutKeys: Array<string | number>) => string;
+export default shortcutTextHandler;

package/Dropdown/shortcutTextHandler.js

@@ -0,0 +1,171 @@
+/**
+ * Parses a shortcut key string into modifiers and main key.
+ * @param shortcut - Shortcut key string (e.g., 'cmd+shift+n', 'ctrl+alt+delete')
+ * @returns Object with modifiers and main key
+ */
+const parseShortcut = (shortcut) => {
+    const str = String(shortcut).toLowerCase();
+    const tokens = str
+        .split('+')
+        .map((token) => token.trim())
+        .filter(Boolean);
+    const modifiers = [];
+    let mainKey = null;
+    tokens.forEach((token) => {
+        switch (token) {
+            case 'cmd':
+            case 'meta':
+            case 'command':
+                modifiers.push('cmd');
+                break;
+            case 'ctrl':
+            case 'control':
+                modifiers.push('ctrl');
+                break;
+            case 'alt':
+            case 'option':
+                modifiers.push(token === 'option' ? 'option' : 'alt');
+                break;
+            case 'shift':
+                modifiers.push('shift');
+                break;
+            default:
+                if (!mainKey) {
+                    mainKey = token;
+                }
+                break;
+        }
+    });
+    return { modifiers, mainKey: mainKey || str };
+};
+/**
+ * Formats a shortcut for Mac display.
+ * @param modifiers - Array of modifier keys
+ * @param mainKey - Main key
+ * @returns Formatted Mac shortcut string
+ */
+const formatMacShortcut = (modifiers, mainKey) => {
+    const symbols = [];
+    modifiers.forEach((mod) => {
+        switch (mod) {
+            case 'cmd':
+                symbols.push('⌘');
+                break;
+            case 'option':
+                symbols.push('⌥');
+                break;
+            case 'shift':
+                symbols.push('⇧');
+                break;
+            case 'ctrl':
+                symbols.push('⌃');
+                break;
+        }
+    });
+    const formattedKey = mainKey.toUpperCase();
+    if (symbols.length > 0) {
+        return `${symbols.join('')}${formattedKey}`;
+    }
+    return formattedKey;
+};
+/**
+ * Formats a shortcut for Windows display.
+ * @param modifiers - Array of modifier keys
+ * @param mainKey - Main key
+ * @returns Formatted Windows shortcut string
+ */
+const formatWindowsShortcut = (modifiers, mainKey) => {
+    const parts = [];
+    modifiers.forEach((mod) => {
+        switch (mod) {
+            case 'ctrl':
+                parts.push('Ctrl');
+                break;
+            case 'alt':
+                parts.push('Alt');
+                break;
+            case 'shift':
+                parts.push('Shift');
+                break;
+            case 'cmd':
+                // Windows doesn't have cmd, but if present, treat as Ctrl
+                parts.push('Ctrl');
+                break;
+            case 'option':
+                // Option on Mac is Alt on Windows
+                parts.push('Alt');
+                break;
+        }
+    });
+    const formattedKey = mainKey.charAt(0).toUpperCase() + mainKey.slice(1).toLowerCase();
+    if (parts.length > 0) {
+        return `${parts.join('+')}+${formattedKey}`;
+    }
+    return formattedKey;
+};
+/**
+ * Converts a shortcut key string into a formatted display string.
+ * @param shortcut - Shortcut key string (e.g., 'cmd+n', 'ctrl+n', 'k')
+ * @param isMac - Whether to format as Mac shortcut
+ * @returns Formatted display string
+ */
+const formatShortcut = (shortcut, isMac) => {
+    const { modifiers, mainKey } = parseShortcut(shortcut);
+    if (isMac) {
+        return formatMacShortcut(modifiers, mainKey);
+    }
+    return formatWindowsShortcut(modifiers, mainKey);
+};
+/**
+ * Converts an array of shortcut keys into a display string.
+ * Format: {mac_shortcut} / {windows_shortcut} / {other_keys}
+ *
+ * @param shortcutKeys - Array of shortcut keys
+ * @returns Formatted display string
+ *
+ * @example
+ * shortcutTextHandler(['ctrl+n', 'cmd+n']) // '⌘N / Ctrl+N'
+ * shortcutTextHandler(['delete', 'backspace']) // 'Delete / Backspace'
+ * shortcutTextHandler(['k']) // 'K'
+ * shortcutTextHandler(['ctrl+r', 'cmd+r', 'f5']) // '⌘R / Ctrl+R / F5'
+ * shortcutTextHandler(['cmd+shift+n', 'ctrl+shift+n']) // '⌘⇧N / Ctrl+Shift+N'
+ * shortcutTextHandler(['cmd+option+n', 'ctrl+alt+n']) // '⌘⌥N / Ctrl+Alt+N'
+ */
+const shortcutTextHandler = (shortcutKeys) => {
+    if (!shortcutKeys || shortcutKeys.length === 0) {
+        return '';
+    }
+    const mac = [];
+    const windows = [];
+    const others = [];
+    shortcutKeys.forEach((shortcut) => {
+        const { modifiers } = parseShortcut(shortcut);
+        const hasMacModifier = modifiers.includes('cmd') || modifiers.includes('option');
+        const hasWindowsModifier = modifiers.includes('ctrl') || modifiers.includes('alt');
+        if (hasMacModifier) {
+            mac.push(formatShortcut(shortcut, true));
+        }
+        else if (hasWindowsModifier) {
+            windows.push(formatShortcut(shortcut, false));
+        }
+        else {
+            // Single key or key with only shift
+            if (modifiers.includes('shift')) {
+                // Shift can be used on both platforms
+                mac.push(formatShortcut(shortcut, true));
+                windows.push(formatShortcut(shortcut, false));
+            }
+            else {
+                others.push(formatShortcut(shortcut, false));
+            }
+        }
+    });
+    // Remove duplicates and combine
+    const uniqueMac = Array.from(new Set(mac));
+    const uniqueWindows = Array.from(new Set(windows));
+    const uniqueOthers = Array.from(new Set(others));
+    const parts = [...uniqueMac, ...uniqueWindows, ...uniqueOthers];
+    return parts.join(' / ');
+};
+
+export { shortcutTextHandler as default, formatShortcut, shortcutTextHandler };

package/Form/FormControlContext.d.ts

@@ -1,8 +1,8 @@
-import { Severity } from '@mezzanine-ui/system/severity';
+import { SeverityWithInfo } from '@mezzanine-ui/system/severity';
 export interface FormControl {
     disabled: boolean;
     fullWidth: boolean;
     required: boolean;
-    severity?: Severity;
+    severity?: SeverityWithInfo;
 }
 export declare const FormControlContext: import("react").Context<FormControl | undefined>;

package/Form/FormField.d.ts

@@ -1,6 +1,18 @@
-import { Severity } from '@mezzanine-ui/system/severity';
+import { FormFieldCounterColor, FormFieldSize } from '@mezzanine-ui/core/form';
 import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
+import { IconDefinition } from '@mezzanine-ui/icons';
+import { SeverityWithInfo } from '@mezzanine-ui/system/severity';
 export interface FormFieldProps extends NativeElementPropsWithoutKeyAndRef<'div'> {
+    /**
+     * The counter text to display in the form field.
+     * Typically used to show character count or remaining characters.
+     */
+    counter?: string;
+    /**
+     * The color of the counter text.
+     * @default FormFieldCounterColor.INFO
+     */
+    counterColor?: FormFieldCounterColor;
     /**
      * To control the field passed from children whether should be disabled.
      * The form message won't appear if disabled.
@@ -10,17 +22,57 @@ export interface FormFieldProps extends NativeElementPropsWithoutKeyAndRef<'div'
      * To control the field passed from children whether should be fullWidth.
      */
     fullWidth?: boolean;
+    /**
+     * The hint text to display below the input field.
+     * Provides additional information or guidance to the user.
+     */
+    hintText?: string;
+    /**
+     * The icon to display alongside the hint text.
+     */
+    hintTextIcon?: IconDefinition;
+    /**
+     * The label text for the form field.
+     */
+    label: string;
+    /**
+     * The icon to display next to the label.
+     * When provided, displays an icon that shows a tooltip on hover.
+     */
+    labelInformationIcon?: IconDefinition;
+    /**
+     * The tooltip text to display when hovering over the label information icon.
+     * Only shown when labelInformationIcon is provided.
+     */
+    labelInformationText?: string;
+    /**
+     * Optional marker text to display after the label.
+     * Typically used to show "(optional)" or similar text.
+     */
+    labelOptionalMarker?: string;
+    /**
+     * The name attribute for the form field.
+     * Used to identify the field in form submissions and as htmlFor in the label.
+     */
+    name: string;
     /**
      * To control the field passed from children whether should be required.
      */
     required?: boolean;
     /**
-     * To control the severity of field passed from children and form message.
+     * The size variant of the form field.
+     * Controls the layout and spacing of label, input, and other elements.
+     */
+    size: FormFieldSize;
+    /**
+     * The severity level of the form field.
+     * Used to indicate the importance or urgency of the field.
+     * @default 'info'
      */
-    severity?: Severity;
+    severity?: SeverityWithInfo;
 }
 /**
- * The react component for `mezzanine` form field.
+ * The React component for `mezzanine` form field.
  */
 declare const FormField: import("react").ForwardRefExoticComponent<FormFieldProps & import("react").RefAttributes<HTMLDivElement>>;
 export default FormField;

package/Form/FormField.js

@@ -1,24 +1,28 @@
-import { jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
-import { formFieldClasses } from '@mezzanine-ui/core/form';
+import { formFieldClasses, FormFieldCounterColor } from '@mezzanine-ui/core/form';
 import { FormControlContext } from './FormControlContext.js';
+import FormHintText from './FormHintText.js';
+import FormLabel from './FormLabel.js';
 import cx from 'clsx';
 
 /**
- * The react component for `mezzanine` form field.
+ * The React component for `mezzanine` form field.
  */
 const FormField = forwardRef(function FormField(props, ref) {
-    const { children, className, disabled = false, fullWidth = false, required = false, severity, ...rest } = props;
+    const { children, className, counter, counterColor, disabled = false, fullWidth = false, hintText, hintTextIcon, label, labelInformationIcon, labelInformationText, labelOptionalMarker, name, required = false, size, severity = 'info', ...rest } = props;
     const formControl = {
         disabled,
         fullWidth,
         required,
         severity,
     };
-    return (jsx("div", { ...rest, ref: ref, className: cx(formFieldClasses.host, severity && formFieldClasses.severity(severity), {
+    return (jsx("div", { ...rest, ref: ref, className: cx(formFieldClasses.host, formFieldClasses.size(size), {
             [formFieldClasses.disabled]: disabled,
             [formFieldClasses.fullWidth]: fullWidth,
-        }, className), children: jsx(FormControlContext.Provider, { value: formControl, children: children }) }));
+        }, className), children: jsxs(FormControlContext.Provider, { value: formControl, children: [jsx(FormLabel, { className: formFieldClasses.labelArea, htmlFor: name, informationIcon: labelInformationIcon, informationText: labelInformationText, labelText: label, optionalMarker: labelOptionalMarker }), jsxs("div", { className: cx(formFieldClasses.dataEntry), children: [children, hintText || hintTextIcon || counter ? (jsxs("div", { className: cx(formFieldClasses.hintTextAndCounterArea, {
+                                [formFieldClasses.hintTextAndCounterArea + '--align-right']: !(hintText || hintTextIcon) && counter,
+                            }), children: [(hintText || hintTextIcon) && (jsx(FormHintText, { hintText: hintText, hintTextIcon: hintTextIcon, severity: severity })), counter && (jsx("span", { className: cx(formFieldClasses.counter, formFieldClasses.counterColor(counterColor || FormFieldCounterColor.INFO)), children: counter }))] })) : null] })] }) }));
 });
 
 export { FormField as default };

package/Form/FormHintText.d.ts

@@ -1,17 +1,40 @@
 import { formHintIcons } from '@mezzanine-ui/core/form';
 import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
+import { IconDefinition } from '@mezzanine-ui/icons';
 export type FormHintTextProps = NativeElementPropsWithoutKeyAndRef<'span'> & {
+    /**
+     * The hint text to display below the input field.
+     * Provides additional information or guidance to the user.
+     */
+    hintText?: string;
+    /**
+     * The icon to display alongside the hint text.
+     * If provided, this icon will override the default severity icon.
+     */
+    hintTextIcon?: IconDefinition;
     /**
      * The severity of form message.
+     * if not provided, no icon will be displayed.
      */
     severity?: keyof typeof formHintIcons | undefined;
 };
 /**
- * The react component for `mezzanine` form message.
+ * The React component for `mezzanine` form message.
  */
 declare const FormHintText: import("react").ForwardRefExoticComponent<NativeElementPropsWithoutKeyAndRef<"span"> & {
+    /**
+     * The hint text to display below the input field.
+     * Provides additional information or guidance to the user.
+     */
+    hintText?: string;
+    /**
+     * The icon to display alongside the hint text.
+     * If provided, this icon will override the default severity icon.
+     */
+    hintTextIcon?: IconDefinition;
     /**
      * The severity of form message.
+     * if not provided, no icon will be displayed.
      */
     severity?: keyof typeof formHintIcons | undefined;
 } & import("react").RefAttributes<HTMLSpanElement>>;

package/Form/FormHintText.js

@@ -6,12 +6,12 @@ import Icon from '../Icon/Icon.js';
 import cx from 'clsx';
 
 /**
- * The react component for `mezzanine` form message.
+ * The React component for `mezzanine` form message.
  */
 const FormHintText = forwardRef(function FormHintText(props, ref) {
-    const { children, className, severity, ...rest } = props;
-    const icon = severity ? formHintIcons[severity] : null;
-    return (jsxs("span", { ...rest, ref: ref, className: cx(formFieldClasses.hintText, severity ? formFieldClasses.hintTextSeverity(severity) : undefined, className), children: [icon && jsx(Icon, { className: formFieldClasses.hintTextIcon, icon: icon }), children] }));
+    const { className, hintText, hintTextIcon, severity = 'info', ...rest } = props;
+    const defaultIcon = severity ? formHintIcons[severity] : null;
+    return (jsxs("span", { ...rest, ref: ref, className: cx(formFieldClasses.hintText, severity ? formFieldClasses.hintTextSeverity(severity) : undefined, className), children: [hintTextIcon ? (jsx(Icon, { className: formFieldClasses.hintTextIcon, icon: hintTextIcon, color: severity })) : (defaultIcon && (jsx(Icon, { className: formFieldClasses.hintTextIcon, icon: defaultIcon, color: severity }))), hintText] }));
 });
 
 export { FormHintText as default };

package/Form/FormLabel.d.ts

@@ -1,11 +1,14 @@
 import { ReactNode } from 'react';
 import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
+import { IconDefinition } from '@mezzanine-ui/icons';
 export interface FormLabelProps extends NativeElementPropsWithoutKeyAndRef<'label'> {
-    remark?: ReactNode;
-    remarkIcon?: ReactNode;
+    informationIcon?: IconDefinition;
+    informationText?: string;
+    labelText: string;
+    optionalMarker?: ReactNode;
 }
 /**
- * The react component for `mezzanine` form label.
+ * The React component for `mezzanine` form label.
  */
 declare const FormLabel: import("react").ForwardRefExoticComponent<FormLabelProps & import("react").RefAttributes<HTMLLabelElement>>;
 export default FormLabel;

package/Form/FormLabel.js

@@ -3,15 +3,17 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { forwardRef, useContext } from 'react';
 import { formFieldClasses } from '@mezzanine-ui/core/form';
 import { FormControlContext } from './FormControlContext.js';
+import Tooltip from '../Tooltip/Tooltip.js';
+import Icon from '../Icon/Icon.js';
 import cx from 'clsx';
 
 /**
- * The react component for `mezzanine` form label.
+ * The React component for `mezzanine` form label.
  */
 const FormLabel = forwardRef(function FormLabel(props, ref) {
-    const { children, className, htmlFor, remark, remarkIcon, ...rest } = props;
+    const { className, htmlFor, informationIcon, informationText, labelText, optionalMarker, ...rest } = props;
     const { required } = useContext(FormControlContext) || {};
-    return (jsxs("label", { ...rest, ref: ref, className: cx(formFieldClasses.label, className), htmlFor: htmlFor, children: [jsxs("span", { children: [children, required && jsx("span", { className: formFieldClasses.asterisk, children: "*" })] }), (remark || remarkIcon) && (jsxs("span", { className: formFieldClasses.remark, children: [jsx("span", { children: remark }), remarkIcon] }))] }));
+    return (jsxs("label", { ...rest, ref: ref, className: cx(formFieldClasses.label, className), htmlFor: htmlFor, children: [required && jsx("span", { className: formFieldClasses.labelRequiredMarker, children: "*" }), labelText, optionalMarker && (jsx("span", { className: formFieldClasses.labelOptionalMarker, children: optionalMarker })), informationIcon && (jsx(Tooltip, { title: informationText, children: ({ onMouseEnter, onMouseLeave, ref: tooltipRef }) => (jsx(Icon, { ref: tooltipRef, className: cx(formFieldClasses.labelInformationIcon), color: "neutral-light", icon: informationIcon, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, size: 16 })) })), jsx("span", { className: formFieldClasses.labelColon, children: ":" })] }));
 });
 
 export { FormLabel as default };