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

package/Select/useSelectTriggerTags.js

@@ -1,6 +1,6 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { useState, useRef, useCallback, useLayoutEffect, useEffect } from 'react';
 import { selectClasses } from '@mezzanine-ui/core/select';
+import { useState, useRef, useCallback, useLayoutEffect, useEffect } from 'react';
 import Tag from '../Tag/Tag.js';
 
 const fakeTagClassName = 'mzn-select-trigger__fake-tag';
@@ -16,22 +16,25 @@ function useSelectTriggerTags(props) {
     const { containerRef, tagsRef, value = [], size, enabled = false } = props;
     const [takeCount, setTakeCount] = useState(value.length);
     const fakeContainerRef = useRef(null);
+    const updateTakeCount = useCallback((nextCount) => {
+        setTakeCount((prevCount) => prevCount === nextCount ? prevCount : nextCount);
+    }, []);
     const measure = useCallback(() => {
         var _a, _b;
         if (!enabled) {
-            setTakeCount(value.length);
+            updateTakeCount(value.length);
             return;
         }
         const container = (_a = containerRef.current) !== null && _a !== void 0 ? _a : tagsRef.current;
         const fakeContainer = fakeContainerRef.current;
         if (!container || !fakeContainer) {
-            setTakeCount(value.length);
+            // Keep current takeCount when refs are temporarily unavailable to avoid flicker.
             return;
         }
         const fakeTags = Array.from(fakeContainer.getElementsByClassName(fakeTagClassName));
         const fakeEllipsis = fakeContainer.getElementsByClassName(fakeEllipsisClassName)[0];
         if (!fakeTags.length) {
-            setTakeCount(0);
+            // Keep current takeCount until fake tags are ready in DOM.
             return;
         }
         const computedStyleTarget = (_b = tagsRef.current) !== null && _b !== void 0 ? _b : container;
@@ -56,8 +59,8 @@ function useSelectTriggerTags(props) {
             consumedWidth += tagWidth;
             nextCount = i + 1;
         }
-        setTakeCount(nextCount);
-    }, [containerRef, enabled, tagsRef, value.length]);
+        updateTakeCount(nextCount);
+    }, [containerRef, enabled, tagsRef, updateTakeCount, value.length]);
     useLayoutEffect(() => {
         measure();
     }, [value, size, enabled, measure]);

package/Separator/Separator.d.ts

@@ -0,0 +1,14 @@
+import { SeparatorOrientation } from '@mezzanine-ui/core/separator';
+import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
+export interface SeparatorProps extends NativeElementPropsWithoutKeyAndRef<'hr'> {
+    /**
+     * The orientation of the separator.
+     * @default 'horizontal'
+     */
+    orientation?: SeparatorOrientation;
+}
+/**
+ * The react component for `mezzanine` separator.
+ */
+declare const Separator: import("react").ForwardRefExoticComponent<SeparatorProps & import("react").RefAttributes<HTMLHRElement>>;
+export default Separator;

package/Separator/Separator.js

@@ -0,0 +1,17 @@
+import { jsx } from 'react/jsx-runtime';
+import { separatorClasses } from '@mezzanine-ui/core/separator';
+import { forwardRef } from 'react';
+import cx from 'clsx';
+
+/**
+ * The react component for `mezzanine` separator.
+ */
+const Separator = forwardRef(function Separator(props, ref) {
+    const { className, orientation = 'horizontal', ...rest } = props;
+    return (jsx("hr", { ...rest, "aria-orientation": orientation === 'vertical' ? 'vertical' : undefined, ref: ref, className: cx(separatorClasses.host, {
+            [separatorClasses.horizontal]: orientation === 'horizontal',
+            [separatorClasses.vertical]: orientation === 'vertical',
+        }, className) }));
+});
+
+export { Separator as default };

package/Separator/index.d.ts

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

package/Separator/index.js

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

package/Table/utils/useTableRowSelection.js

@@ -20,6 +20,12 @@ function useTableRowSelection(props) {
                         ? subData.map((subRow) => getRowKey(subRow))
                         : undefined;
                 }
+                if (!selectedRow) {
+                    // trigger select all or deselect all, need to find subKeys for all selected rows
+                    return (subData === null || subData === void 0 ? void 0 : subData.length)
+                        ? subData.map((subRow) => getRowKey(subRow))
+                        : undefined;
+                }
                 return (_a = prev.find((item) => item.key === pk)) === null || _a === void 0 ? void 0 : _a.subKeys;
             })();
             return {

package/Tag/TagGroup.d.ts

@@ -1,15 +1,17 @@
 import { ReactElement } from 'react';
-import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
-import Tag, { TagProps } from '../Tag';
 import OverflowCounterTag, { OverflowCounterTagProps } from '../OverflowTooltip/OverflowCounterTag';
+import Tag, { TagProps } from '../Tag';
+import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
 import { TransitionImplementationChildProps } from '../Transition';
 type TagElement = ReactElement<TagProps & TransitionImplementationChildProps, typeof Tag>;
 type OverflowCounterTagElement = ReactElement<OverflowCounterTagProps & TransitionImplementationChildProps, typeof OverflowCounterTag>;
 type TagGroupChild = TagElement | OverflowCounterTagElement;
 export type TagGroupProps = Omit<NativeElementPropsWithoutKeyAndRef<'div'>, 'children'> & {
     children: TagGroupChild | TagGroupChild[];
+    transition?: 'fade' | 'none';
 };
 declare const TagGroup: import("react").ForwardRefExoticComponent<Omit<NativeElementPropsWithoutKeyAndRef<"div">, "children"> & {
     children: TagGroupChild | TagGroupChild[];
+    transition?: "fade" | "none";
 } & import("react").RefAttributes<HTMLDivElement>>;
 export default TagGroup;

package/Tag/TagGroup.js

@@ -2,8 +2,8 @@ import { jsx } from 'react/jsx-runtime';
 import { forwardRef, Children, isValidElement, createElement } from 'react';
 import OverflowCounterTag from '../OverflowTooltip/OverflowCounterTag.js';
 import { tagClasses } from '@mezzanine-ui/core/tag';
-import { TransitionGroup } from 'react-transition-group';
 import { MOTION_EASING, MOTION_DURATION } from '@mezzanine-ui/system/motion';
+import { TransitionGroup } from 'react-transition-group';
 import Fade from '../Transition/Fade.js';
 import Tag from './Tag.js';
 import cx from 'clsx';
@@ -20,7 +20,7 @@ const fadeProps = {
         exit: MOTION_EASING.standard,
     },
 };
-const TagGroup = forwardRef(function TagGroup({ className, children, ...rest }, ref) {
+const TagGroup = forwardRef(function TagGroup({ className, children, transition = 'none', ...rest }, ref) {
     const hasInvalidChild = Children.toArray(children).some((child) => {
         if (!isTagElement(child) && !isOverflowCounterElement(child)) {
             console.error('<TagGroup> only accepts <Tag> or <OverflowCounterTag>');
@@ -31,11 +31,14 @@ const TagGroup = forwardRef(function TagGroup({ className, children, ...rest },
     if (hasInvalidChild) {
         return null;
     }
-    return (jsx("div", { ...rest, ref: ref, className: cx(tagClasses.group, className), children: jsx(TransitionGroup, { component: null, children: Children.map(children, (child, index) => {
+    return (jsx("div", { ...rest, ref: ref, className: cx(tagClasses.group, className), children: transition === 'fade' ? (jsx(TransitionGroup, { component: null, children: Children.map(children, (child, index) => {
                 var _a;
                 return (createElement(Fade, { ...fadeProps, key: (_a = child.key) !== null && _a !== void 0 ? _a : index },
                     jsx("span", { children: child })));
-            }) }) }));
+            }) })) : (Children.map(children, (child, index) => {
+            var _a;
+            return (jsx("span", { children: child }, (_a = child.key) !== null && _a !== void 0 ? _a : index));
+        })) }));
 });
 
 export { TagGroup as default };

package/TextField/TextField.d.ts

@@ -1,5 +1,5 @@
-import { MouseEventHandler, ReactNode } from 'react';
 import { TextFieldSize } from '@mezzanine-ui/core/text-field';
+import { MouseEventHandler, ReactNode } from 'react';
 import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
 /**
  * Padding info provided to children function

package/TextField/TextField.js

@@ -1,10 +1,10 @@
 'use client';
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { forwardRef, useState, useRef, useEffect } from 'react';
 import { textFieldClasses } from '@mezzanine-ui/core/text-field';
-import { useTextFieldControl } from './useTextFieldControl.js';
+import { forwardRef, useState, useRef, useEffect } from 'react';
 import ClearActions from '../ClearActions/ClearActions.js';
 import { useComposeRefs } from '../hooks/useComposeRefs.js';
+import { useTextFieldControl } from './useTextFieldControl.js';
 import cx from 'clsx';
 
 /**
@@ -13,7 +13,11 @@ import cx from 'clsx';
 const TextField = forwardRef(function TextField(props, ref) {
     const { active = false, children, className, clearable = false, disabled, error = false, fullWidth = true, onClear, onClick: onClickProps, onKeyDown: onKeyDownProps, prefix, readonly, role: roleProp, size = 'main', suffix, typing: typingProp, warning, ...rest } = props;
     const [isTyping, setIsTyping] = useState(false);
+    const [isHovered, setIsHovered] = useState(false);
+    const [isFocused, setIsFocused] = useState(false);
+    const [hasValue, setHasValue] = useState(false);
     const containerRef = useRef(null);
+    const checkValueRef = useRef(null);
     const hostRef = useComposeRefs([ref, containerRef]);
     const typing = disabled || readonly
         ? false
@@ -21,27 +25,67 @@ const TextField = forwardRef(function TextField(props, ref) {
             ? typingProp
             : isTyping;
     useEffect(() => {
-        if (typingProp !== undefined || disabled || readonly)
-            return;
         const container = containerRef.current;
         if (!container)
             return;
         const input = container.querySelector('input, textarea');
         if (!input)
             return;
+        const checkValue = () => {
+            // 檢查值是否為空（包括空字符串和只有空白字符）
+            const value = (input.value || '').trim();
+            setHasValue(value.length > 0);
+        };
+        // 保存 checkValue 函數到 ref，以便在 onClear 後可以立即調用
+        checkValueRef.current = checkValue;
         const handleInput = () => {
             setIsTyping(true);
+            checkValue();
+        };
+        const handleFocus = () => {
+            setIsFocused(true);
+            checkValue();
         };
         const handleBlur = () => {
             setIsTyping(false);
+            setIsFocused(false);
+            checkValue();
+        };
+        const handleMouseEnter = () => {
+            checkValue(); // 在 hover 時也檢查值，確保狀態正確
+            setIsHovered(true);
+        };
+        const handleMouseLeave = () => {
+            setIsHovered(false);
         };
-        input.addEventListener('input', handleInput, false);
-        input.addEventListener('mousedown', handleInput, false);
+        // 初始化檢查值
+        checkValue();
+        // 監聽輸入框事件（用於 typing 狀態）
+        if (typingProp === undefined && !disabled && !readonly) {
+            input.addEventListener('input', handleInput, false);
+            input.addEventListener('mousedown', handleInput, false);
+        }
+        // 監聽 focus/blur 事件
+        input.addEventListener('focus', handleFocus, false);
         input.addEventListener('blur', handleBlur, false);
+        // 監聽 hover 事件（在容器上）
+        container.addEventListener('mouseenter', handleMouseEnter, false);
+        container.addEventListener('mouseleave', handleMouseLeave, false);
+        // 監聽值變化（適用於受控組件）
+        input.addEventListener('input', checkValue, false);
+        input.addEventListener('change', checkValue, false);
         return () => {
-            input.removeEventListener('input', handleInput, false);
-            input.removeEventListener('mousedown', handleInput, false);
+            if (typingProp === undefined && !disabled && !readonly) {
+                input.removeEventListener('input', handleInput, false);
+                input.removeEventListener('mousedown', handleInput, false);
+            }
+            input.removeEventListener('focus', handleFocus, false);
             input.removeEventListener('blur', handleBlur, false);
+            container.removeEventListener('mouseenter', handleMouseEnter, false);
+            container.removeEventListener('mouseleave', handleMouseLeave, false);
+            input.removeEventListener('input', checkValue, false);
+            input.removeEventListener('change', checkValue, false);
+            checkValueRef.current = null;
         };
     }, [typingProp, disabled, readonly]);
     const { role, onClick, onKeyDown } = useTextFieldControl({
@@ -49,6 +93,9 @@ const TextField = forwardRef(function TextField(props, ref) {
         onKeyDown: onKeyDownProps,
     });
     const isChildrenFunction = typeof children === 'function';
+    const shouldShowClearable = clearable &&
+        hasValue &&
+        (isHovered || typing || isFocused);
     const paddingInfo = {
         paddingClassName: cx(textFieldClasses.inputPadding, size === 'main' ? textFieldClasses.inputPaddingMain : textFieldClasses.inputPaddingSub),
     };
@@ -71,9 +118,16 @@ const TextField = forwardRef(function TextField(props, ref) {
             [textFieldClasses.typing]: typing,
             [textFieldClasses.active]: active,
             [textFieldClasses.warning]: warning,
-        }, className), children: [prefix && jsx("div", { className: textFieldClasses.prefix, children: prefix }), renderedChildren, clearable && (jsx(ClearActions, { type: "clearable", className: textFieldClasses.clearIcon, onClick: (event) => {
+        }, className), children: [prefix && jsx("div", { className: textFieldClasses.prefix, children: prefix }), renderedChildren, clearable && (jsx(ClearActions, { type: "clearable", className: textFieldClasses.clearIcon, style: {
+                    opacity: shouldShowClearable ? 1 : 0,
+                    pointerEvents: shouldShowClearable ? 'auto' : 'none',
+                }, onClick: (event) => {
                     if (!disabled && !readonly && onClear) {
                         onClear(event);
+                        requestAnimationFrame(() => {
+                            var _a;
+                            (_a = checkValueRef.current) === null || _a === void 0 ? void 0 : _a.call(checkValueRef);
+                        });
                     }
                 }, onMouseDown: (event) => event.preventDefault(), tabIndex: -1 })), suffix && jsx("div", { className: textFieldClasses.suffix, children: suffix })] }));
 });

package/TimePanel/TimePanelColumn.js

@@ -1,35 +1,44 @@
-import { jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { timePanelClasses } from '@mezzanine-ui/core/time-panel';
-import { forwardRef, useRef, useEffect } from 'react';
+import { forwardRef, useRef, useCallback, useEffect } from 'react';
+import { getNumericCSSVariablePixelValue } from '../utils/get-css-variable-value.js';
+import Scrollbar from '../Scrollbar/Scrollbar.js';
 import cx from 'clsx';
 
 /**
  * The react component for `mezzanine` time panel column.
  */
 const TimePanelColumn = forwardRef(function TimePanelColumn(props, ref) {
-    const { activeUnit, cellHeight = 32, onChange, units } = props;
-    const cellsRef = useRef(null);
-    const getChangeHandler = (unit) => {
-        if (!onChange)
-            return undefined;
-        return () => {
-            onChange(unit);
-        };
-    };
+    const { activeUnit, cellHeight: cellHeightProp, onChange, units } = props;
+    const cellHeight = cellHeightProp !== null && cellHeightProp !== void 0 ? cellHeightProp : getNumericCSSVariablePixelValue('--mzn-spacing-size-element-loose');
+    const viewportRef = useRef(null);
+    const getChangeHandler = useCallback((unit) => () => {
+        onChange === null || onChange === void 0 ? void 0 : onChange(unit);
+    }, [onChange]);
     const preferSmoothScrollRef = useRef(true);
-    useEffect(() => {
+    const onScrollToTarget = useCallback((element) => {
         const activeIndex = units.findIndex(({ value }) => value === activeUnit);
-        if (cellsRef.current) {
-            cellsRef.current.scrollTo({
-                top: activeIndex * cellHeight, // (activeIndex - 3) * cellHeight, (center)
-                behavior: preferSmoothScrollRef.current ? 'auto' : 'smooth',
-            });
-        }
+        element.scrollTo({
+            behavior: preferSmoothScrollRef.current ? 'auto' : 'smooth',
+            top: activeIndex * cellHeight,
+        });
         preferSmoothScrollRef.current = false;
     }, [activeUnit, cellHeight, units]);
-    return (jsx("div", { ref: ref, className: timePanelClasses.column, children: jsx("div", { ref: cellsRef, className: timePanelClasses.columnCells, children: units.map((unit) => (jsx("button", { type: "button", className: cx(timePanelClasses.button, timePanelClasses.columnButton, {
-                    [timePanelClasses.buttonActive]: unit.value === activeUnit,
-                }), onClick: getChangeHandler(unit), children: unit.label }, unit.value))) }) }));
+    useEffect(() => {
+        if (viewportRef.current) {
+            onScrollToTarget(viewportRef.current);
+        }
+    }, [onScrollToTarget]);
+    const handleViewportReady = useCallback((viewport) => {
+        viewportRef.current = viewport;
+        onScrollToTarget(viewport);
+    }, [onScrollToTarget]);
+    // Number of padding cells needed for centering (3 cells above and below the center position)
+    const paddingCellCount = 3;
+    const placeholders = Array.from({ length: paddingCellCount }, (_, i) => (jsx("div", { className: timePanelClasses.columnPlaceholder, style: { height: cellHeight }, "aria-hidden": true }, `placeholder-${i}`)));
+    return (jsx("div", { ref: ref, className: timePanelClasses.column, children: jsxs(Scrollbar, { maxHeight: cellHeight * 7, onViewportReady: handleViewportReady, children: [placeholders, units.map((unit) => (jsx("button", { type: "button", className: cx(timePanelClasses.button, timePanelClasses.columnButton, {
+                        [timePanelClasses.buttonActive]: unit.value === activeUnit,
+                    }), onClick: getChangeHandler(unit), children: unit.label }, unit.value))), placeholders] }) }));
 });
 
 export { TimePanelColumn as default };

package/TimeRangePicker/TimeRangePicker.d.ts

@@ -0,0 +1,29 @@
+import { RangePickerTriggerProps } from '../Picker';
+import { TimeRangePickerValue } from './useTimeRangePickerValue';
+import { TimePickerPanelProps } from '../TimePicker/TimePickerPanel';
+export interface TimeRangePickerProps extends Pick<TimePickerPanelProps, 'fadeProps' | 'hideHour' | 'hideMinute' | 'hideSecond' | 'hourStep' | 'minuteStep' | 'popperProps' | 'secondStep'>, Pick<RangePickerTriggerProps, 'className' | 'clearable' | 'disabled' | 'error' | 'errorMessagesFrom' | 'errorMessagesTo' | 'fullWidth' | 'inputFromPlaceholder' | 'inputFromProps' | 'inputToPlaceholder' | 'inputToProps' | 'prefix' | 'readOnly' | 'required' | 'size' | 'validateFrom' | 'validateTo'> {
+    /**
+     * The format for displaying time.
+     * @default 'HH:mm:ss' or 'HH:mm' based on hideSecond
+     */
+    format?: string;
+    /**
+     * A function that fires when panel toggle. Receive open status in boolean format as props.
+     */
+    onPanelToggle?: (open: boolean) => void;
+    /**
+     * Change handler. Takes an array of your declared `DateType` which represents from and to in order.
+     */
+    onChange?: (target?: TimeRangePickerValue) => void;
+    /**
+     * Value of the range picker.
+     * It is an array of your declared `DateType` which represents from and to in order.
+     */
+    value?: TimeRangePickerValue;
+}
+/**
+ * The react component for `mezzanine` time range picker.
+ * Notice that any component related to time-range-picker should be used along with `CalendarContext`.
+ */
+declare const TimeRangePicker: import("react").ForwardRefExoticComponent<TimeRangePickerProps & import("react").RefAttributes<HTMLDivElement>>;
+export default TimeRangePicker;

package/TimeRangePicker/TimeRangePicker.js

@@ -0,0 +1,96 @@
+'use client';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { forwardRef, useState, useCallback, useRef, useMemo } from 'react';
+import { ClockIcon } from '@mezzanine-ui/icons';
+import { useComposeRefs } from '../hooks/useComposeRefs.js';
+import { useTimeRangePickerValue } from './useTimeRangePickerValue.js';
+import TimePickerPanel from '../TimePicker/TimePickerPanel.js';
+import { useCalendarContext } from '../Calendar/CalendarContext.js';
+import { usePickerDocumentEventClose } from '../Picker/usePickerDocumentEventClose.js';
+import Icon from '../Icon/Icon.js';
+import RangePickerTrigger from '../Picker/RangePickerTrigger.js';
+
+/**
+ * The react component for `mezzanine` time range picker.
+ * Notice that any component related to time-range-picker should be used along with `CalendarContext`.
+ */
+const TimeRangePicker = forwardRef(function TimeRangePicker(props, ref) {
+    const { defaultTimeFormat } = useCalendarContext();
+    const { className, clearable = true, disabled = false, error = false, errorMessagesFrom, errorMessagesTo, fadeProps, format: formatProp, fullWidth = false, hideHour, hideMinute, hideSecond, hourStep, inputFromPlaceholder, inputFromProps, inputToPlaceholder, inputToProps, minuteStep, onChange: onChangeProp, onPanelToggle: onPanelToggleProp, popperProps, prefix, readOnly, required = false, secondStep, size, validateFrom, validateTo, value: valueProp, } = props;
+    // Determine default format based on hideSecond
+    const resolvedFormat = formatProp !== null && formatProp !== void 0 ? formatProp : (hideSecond ? 'HH:mm' : defaultTimeFormat);
+    /** Panel open control */
+    const [open, setOpen] = useState(false);
+    const preventOpen = readOnly;
+    const onPanelToggle = useCallback((nextOpen) => {
+        if (!preventOpen) {
+            setOpen(nextOpen);
+            onPanelToggleProp === null || onPanelToggleProp === void 0 ? void 0 : onPanelToggleProp(nextOpen);
+        }
+    }, [onPanelToggleProp, preventOpen]);
+    /** Values and onChange */
+    const inputToRef = useRef(null);
+    const inputFromRef = useRef(null);
+    const { focusedInput, inputFromValue, inputToValue, onChange, onClear, onFromFocus, onInputFromChange, onInputToChange, onPanelChange, onToFocus, panelValue, value: internalValue, } = useTimeRangePickerValue({
+        format: resolvedFormat,
+        onChange: onChangeProp,
+        value: valueProp,
+    });
+    /** Popper settings */
+    const anchorRef = useRef(null);
+    const panelRef = useRef(null);
+    const triggerComposedRef = useComposeRefs([anchorRef, ref]);
+    /** Dynamic anchor for panel - follows the focused input */
+    const panelAnchor = useMemo(() => {
+        if (focusedInput === 'from') {
+            return inputFromRef;
+        }
+        if (focusedInput === 'to') {
+            return inputToRef;
+        }
+        return inputFromRef;
+    }, [focusedInput]);
+    /** Input focus handlers */
+    const onFromFocusHandler = useCallback((_event) => {
+        onFromFocus();
+        onPanelToggle(true);
+    }, [onPanelToggle, onFromFocus]);
+    const onToFocusHandler = useCallback((_event) => {
+        onToFocus();
+        onPanelToggle(true);
+    }, [onPanelToggle, onToFocus]);
+    /** Icon click handler */
+    const onIconClick = useCallback((e) => {
+        e.stopPropagation();
+        if (open) {
+            onChange(valueProp);
+        }
+        onPanelToggle(!open);
+    }, [open, onChange, onPanelToggle, valueProp]);
+    /** Clear handler */
+    const onClearHandler = useCallback(() => {
+        onClear();
+    }, [onClear]);
+    /** Close handlers */
+    const onClose = useCallback(() => {
+        onChange(valueProp);
+        onPanelToggle(false);
+    }, [onChange, onPanelToggle, valueProp]);
+    const onChangeClose = useCallback(() => {
+        onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp(internalValue);
+        onPanelToggle(false);
+    }, [internalValue, onChangeProp, onPanelToggle]);
+    usePickerDocumentEventClose({
+        anchorRef,
+        lastElementRefInFlow: inputToRef,
+        onChangeClose,
+        onClose,
+        open,
+        popperRef: panelRef,
+    });
+    /** Suffix icon */
+    const suffixIcon = (jsx(Icon, { "aria-label": "Open time picker", icon: ClockIcon, onClick: readOnly ? undefined : onIconClick }));
+    return (jsxs(Fragment, { children: [jsx(RangePickerTrigger, { className: className, clearable: clearable, disabled: disabled, error: error, errorMessagesFrom: errorMessagesFrom, errorMessagesTo: errorMessagesTo, format: resolvedFormat, fullWidth: fullWidth, inputFromPlaceholder: inputFromPlaceholder, inputFromProps: inputFromProps, inputFromRef: inputFromRef, inputFromValue: inputFromValue, inputToPlaceholder: inputToPlaceholder, inputToProps: inputToProps, inputToRef: inputToRef, inputToValue: inputToValue, onClear: onClearHandler, onFromFocus: onFromFocusHandler, onIconClick: onIconClick, onInputFromChange: onInputFromChange, onInputToChange: onInputToChange, onToFocus: onToFocusHandler, prefix: prefix, readOnly: readOnly, ref: triggerComposedRef, required: required, size: size, suffixActionIcon: suffixIcon, validateFrom: validateFrom, validateTo: validateTo }), focusedInput && (jsx(TimePickerPanel, { anchor: panelAnchor, fadeProps: fadeProps, hideHour: hideHour, hideMinute: hideMinute, hideSecond: hideSecond, hourStep: hourStep, minuteStep: minuteStep, onChange: onPanelChange, open: open, popperProps: popperProps, ref: panelRef, secondStep: secondStep, value: panelValue }))] }));
+});
+
+export { TimeRangePicker as default };

package/TimeRangePicker/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from './TimeRangePicker';
+export { type TimeRangePickerProps } from './TimeRangePicker';
+export { type TimeRangePickerValue, type UseTimeRangePickerValueProps, useTimeRangePickerValue, } from './useTimeRangePickerValue';

package/TimeRangePicker/index.js

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

package/TimeRangePicker/useTimeRangePickerValue.d.ts

@@ -0,0 +1,30 @@
+import { DateType } from '@mezzanine-ui/core/calendar';
+export type TimeRangePickerValue = [DateType | undefined, DateType | undefined];
+export interface UseTimeRangePickerValueProps {
+    /**
+     * The format pattern for the inputs (e.g., "HH:mm:ss")
+     */
+    format: string;
+    /**
+     * Change handler called when value changes
+     */
+    onChange?: (value?: TimeRangePickerValue) => void;
+    /**
+     * Controlled value
+     */
+    value?: TimeRangePickerValue;
+}
+export declare function useTimeRangePickerValue({ format, onChange: onChangeProp, value: valueProp, }: UseTimeRangePickerValueProps): {
+    focusedInput: "from" | "to" | null;
+    inputFromValue: string;
+    inputToValue: string;
+    onChange: (target?: TimeRangePickerValue) => TimeRangePickerValue | undefined;
+    onClear: () => void;
+    onFromFocus: () => void;
+    onInputFromChange: (formattedValue: string | undefined) => void;
+    onInputToChange: (formattedValue: string | undefined) => void;
+    onPanelChange: (newTime: DateType | undefined) => void;
+    onToFocus: () => void;
+    panelValue: string | undefined;
+    value: TimeRangePickerValue;
+};

package/TimeRangePicker/useTimeRangePickerValue.js

@@ -0,0 +1,92 @@
+'use client';
+import { useState, useCallback } from 'react';
+import { useCalendarContext } from '../Calendar/CalendarContext.js';
+
+function useTimeRangePickerValue({ format, onChange: onChangeProp, value: valueProp, }) {
+    var _a, _b;
+    const { formatToString, locale } = useCalendarContext();
+    const [internalFrom, setInternalFrom] = useState(valueProp === null || valueProp === void 0 ? void 0 : valueProp[0]);
+    const [internalTo, setInternalTo] = useState(valueProp === null || valueProp === void 0 ? void 0 : valueProp[1]);
+    // Track which input is focused: 'from' | 'to' | null
+    const [focusedInput, setFocusedInput] = useState(null);
+    const from = (_a = valueProp === null || valueProp === void 0 ? void 0 : valueProp[0]) !== null && _a !== void 0 ? _a : internalFrom;
+    const to = (_b = valueProp === null || valueProp === void 0 ? void 0 : valueProp[1]) !== null && _b !== void 0 ? _b : internalTo;
+    const value = [from, to];
+    const formatTime = useCallback((time) => {
+        if (!time)
+            return '';
+        return formatToString(locale, time, format);
+    }, [formatToString, locale, format]);
+    const inputFromValue = formatTime(from);
+    const inputToValue = formatTime(to);
+    const onInputFromChange = useCallback((formattedValue) => {
+        if (formattedValue) {
+            setInternalFrom(formattedValue);
+            onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp([formattedValue, to]);
+        }
+        else {
+            setInternalFrom(undefined);
+            onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp([undefined, to]);
+        }
+    }, [to, onChangeProp]);
+    const onInputToChange = useCallback((formattedValue) => {
+        if (formattedValue) {
+            setInternalTo(formattedValue);
+            onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp([from, formattedValue]);
+        }
+        else {
+            setInternalTo(undefined);
+            onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp([from, undefined]);
+        }
+    }, [from, onChangeProp]);
+    const onPanelChange = useCallback((newTime) => {
+        if (focusedInput === 'from') {
+            setInternalFrom(newTime);
+            onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp([newTime, to]);
+        }
+        else if (focusedInput === 'to') {
+            setInternalTo(newTime);
+            onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp([from, newTime]);
+        }
+    }, [focusedInput, from, to, onChangeProp]);
+    const onChange = useCallback((target) => {
+        if (!target) {
+            setInternalFrom(undefined);
+            setInternalTo(undefined);
+            return undefined;
+        }
+        const [newFrom, newTo] = target;
+        setInternalFrom(newFrom);
+        setInternalTo(newTo);
+        return target;
+    }, []);
+    const onClear = useCallback(() => {
+        setInternalFrom(undefined);
+        setInternalTo(undefined);
+        onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp(undefined);
+    }, [onChangeProp]);
+    const onFromFocus = useCallback(() => {
+        setFocusedInput('from');
+    }, []);
+    const onToFocus = useCallback(() => {
+        setFocusedInput('to');
+    }, []);
+    // Get the currently focused value for the panel
+    const panelValue = focusedInput === 'from' ? from : focusedInput === 'to' ? to : undefined;
+    return {
+        focusedInput,
+        inputFromValue,
+        inputToValue,
+        onChange,
+        onClear,
+        onFromFocus,
+        onInputFromChange,
+        onInputToChange,
+        onPanelChange,
+        onToFocus,
+        panelValue,
+        value,
+    };
+}
+
+export { useTimeRangePickerValue };

package/Transition/Rotate.js

@@ -1,6 +1,5 @@
 import { MOTION_DURATION, MOTION_EASING } from '@mezzanine-ui/system/motion';
 import { forwardRef, cloneElement } from 'react';
-import { useComposeRefs } from '../hooks/useComposeRefs.js';
 
 /**
  * The react component for `mezzanine` transition rotate.
@@ -11,18 +10,16 @@ import { useComposeRefs } from '../hooks/useComposeRefs.js';
  */
 const Rotate = forwardRef(function Rotate(props, ref) {
     const { children, degrees = 180, duration = MOTION_DURATION.fast, easing = MOTION_EASING.standard, in: inProp = false, transformOrigin = 'center', } = props;
-    const childRef = 'ref' in children ? children.ref : undefined;
-    const composedRef = useComposeRefs([ref, childRef]);
     const childProps = children.props;
     const style = {
         transform: inProp ? `rotate(${degrees}deg)` : 'rotate(0deg)',
         transformOrigin,
         transition: `transform ${duration}ms ${easing}`,
-        ...(childProps.style || {}),
+        ...((childProps === null || childProps === void 0 ? void 0 : childProps.style) || {}),
     };
     return cloneElement(children, {
         ...childProps,
-        ref: composedRef,
+        ref,
         style,
     });
 });