xmlui 0.10.7 → 0.10.10

package/dist/scripts/src/components/Slider/SliderNative.js

@@ -57,6 +57,7 @@ const constants_1 = require("../../components-core/constants");
 const misc_1 = require("../../components-core/utils/misc");
 const ItemWithLabel_1 = require("../FormItem/ItemWithLabel");
 const classnames_1 = __importDefault(require("classnames"));
+const TooltipNative_1 = require("../Tooltip/TooltipNative");
 exports.defaultProps = {
     step: 1,
     min: 0,
@@ -86,8 +87,13 @@ exports.Slider = (0, react_2.forwardRef)((_a, forwardedRef) => {
     const _id = (0, react_1.useId)();
     id = id || _id;
     const inputRef = (0, react_1.useRef)(null);
+    const tooltipRef = (0, react_1.useRef)(null);
+    const thumbRef = (0, react_1.useRef)(null);
     // Initialize localValue properly
     const [localValue, setLocalValue] = react_1.default.useState([]);
+    const [showTooltip, setShowTooltip] = react_1.default.useState(false);
+    const onShowTooltip = (0, react_1.useCallback)(() => setShowTooltip(true), []);
+    const onHideTooltip = (0, react_1.useCallback)(() => setShowTooltip(false), []);
     // Process initialValue on mount
     (0, react_1.useEffect)(() => {
         let initialVal = min;
@@ -104,8 +110,13 @@ exports.Slider = (0, react_2.forwardRef)((_a, forwardedRef) => {
                 }
             }
         }
+        else if (typeof initialValue === "number") {
+            if (initialValue >= min && initialValue <= max) {
+                initialVal = initialValue;
+            }
+        }
         else {
-            initialVal = initialValue;
+            initialVal = formatValue(initialValue, min);
         }
         // Format the value properly
         const formattedValue = formatValue(initialVal, min);
@@ -113,10 +124,10 @@ exports.Slider = (0, react_2.forwardRef)((_a, forwardedRef) => {
         // Notify parent component
         if (updateState) {
             updateState({
-                value: formattedValue.length === 1 ? formattedValue[0] : formattedValue
+                value: formattedValue.length === 1 ? formattedValue[0] : formattedValue,
             }, { initial: true });
         }
-    }, [initialValue, min, updateState]);
+    }, [initialValue, min, max, updateState]);
     // Sync with external value changes
     (0, react_1.useEffect)(() => {
         if (value !== undefined) {
@@ -145,12 +156,8 @@ exports.Slider = (0, react_2.forwardRef)((_a, forwardedRef) => {
         }
     }, [updateValue]);
     // Component APIs
-    const handleOnFocus = (0, react_1.useCallback)((ev) => {
-        onFocus === null || onFocus === void 0 ? void 0 : onFocus(ev);
-    }, [onFocus]);
-    const handleOnBlur = (0, react_1.useCallback)((ev) => {
-        onBlur === null || onBlur === void 0 ? void 0 : onBlur(ev);
-    }, [onBlur]);
+    const handleOnFocus = (0, react_1.useCallback)((ev) => onFocus === null || onFocus === void 0 ? void 0 : onFocus(ev), [onFocus]);
+    const handleOnBlur = (0, react_1.useCallback)((ev) => onBlur === null || onBlur === void 0 ? void 0 : onBlur(ev), [onBlur]);
     const focus = (0, react_1.useCallback)(() => {
         var _a;
         (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
@@ -166,23 +173,19 @@ exports.Slider = (0, react_2.forwardRef)((_a, forwardedRef) => {
     }, [focus, registerComponentApi, setValue]);
     // Ensure we always have at least one thumb
     const displayValue = localValue.length > 0 ? localValue : [min];
-    // Format the current values as a string
-    const valuesText = displayValue.map(v => valueFormat(v)).join(', ');
-    // Create a custom label that includes the current values
-    const displayLabel = label ? (showValues ? `${label} ${valuesText}` : label) : (showValues ? valuesText : '');
-    return ((0, jsx_runtime_1.jsx)(ItemWithLabel_1.ItemWithLabel, Object.assign({}, rest, { labelPosition: labelPosition, label: displayLabel, labelWidth: labelWidth, labelBreak: labelBreak, required: required, enabled: enabled, onFocus: onFocus, onBlur: onBlur, style: style, className: className, ref: forwardedRef, id: id, isInputTemplateUsed: true, children: (0, jsx_runtime_1.jsx)("div", { className: Slider_module_scss_1.default.sliderContainer, children: (0, jsx_runtime_1.jsxs)(react_slider_1.Root, { minStepsBetweenThumbs: minStepsBetweenThumbs, ref: inputRef, tabIndex: tabIndex, "aria-readonly": readOnly, className: (0, classnames_1.default)(className, Slider_module_scss_1.default.sliderRoot, {
+    return ((0, jsx_runtime_1.jsx)(ItemWithLabel_1.ItemWithLabel, Object.assign({}, rest, { labelPosition: labelPosition, label: label, labelWidth: labelWidth, labelBreak: labelBreak, required: required, enabled: enabled, onFocus: onFocus, onBlur: onBlur, style: style, className: className, ref: forwardedRef, id: id, isInputTemplateUsed: true, children: (0, jsx_runtime_1.jsx)("div", { className: Slider_module_scss_1.default.sliderContainer, "data-slider-container": true, children: (0, jsx_runtime_1.jsxs)(react_slider_1.Root, { minStepsBetweenThumbs: minStepsBetweenThumbs, ref: inputRef, tabIndex: tabIndex, "aria-readonly": readOnly, className: (0, classnames_1.default)(className, Slider_module_scss_1.default.sliderRoot, {
                     [Slider_module_scss_1.default.disabled]: !enabled,
-                    [Slider_module_scss_1.default.readOnly]: readOnly
-                }), style: style, max: max, min: min, inverted: inverted, step: step, disabled: !enabled, onFocus: handleOnFocus, onBlur: handleOnBlur, onValueChange: onInputChange, "aria-required": required, value: displayValue, autoFocus: autoFocus, children: [(0, jsx_runtime_1.jsx)(react_slider_1.Track, { className: (0, classnames_1.default)(Slider_module_scss_1.default.sliderTrack, {
+                    [Slider_module_scss_1.default.readOnly]: readOnly,
+                }), style: style, max: max, min: min, inverted: inverted, step: step, disabled: !enabled, onFocus: handleOnFocus, onBlur: handleOnBlur, onValueChange: onInputChange, onMouseOver: onShowTooltip, onMouseLeave: onHideTooltip, onPointerDown: onShowTooltip, "aria-required": required, value: displayValue, autoFocus: autoFocus, children: [(0, jsx_runtime_1.jsx)(react_slider_1.Track, { className: (0, classnames_1.default)(Slider_module_scss_1.default.sliderTrack, {
                             [Slider_module_scss_1.default.disabled]: !enabled,
                             [Slider_module_scss_1.default.readOnly]: readOnly,
                             [Slider_module_scss_1.default.error]: validationStatus === "error",
                             [Slider_module_scss_1.default.warning]: validationStatus === "warning",
                             [Slider_module_scss_1.default.valid]: validationStatus === "valid",
                         }), style: rangeStyle ? Object.assign({}, rangeStyle) : undefined, children: (0, jsx_runtime_1.jsx)(react_slider_1.Range, { className: (0, classnames_1.default)(Slider_module_scss_1.default.sliderRange, {
-                                [Slider_module_scss_1.default.disabled]: !enabled
-                            }) }) }), displayValue.map((_, index) => ((0, jsx_runtime_1.jsx)(react_slider_1.Thumb, { className: (0, classnames_1.default)(Slider_module_scss_1.default.sliderThumb, {
-                            [Slider_module_scss_1.default.disabled]: !enabled
-                        }), style: thumbStyle ? Object.assign({}, thumbStyle) : undefined, id: id }, index)))] }) }) })));
+                                [Slider_module_scss_1.default.disabled]: !enabled,
+                            }) }) }), displayValue.map((_, index) => ((0, jsx_runtime_1.jsx)(TooltipNative_1.Tooltip, { ref: tooltipRef, text: valueFormat(displayValue[index]), delayDuration: 100, open: showValues && showTooltip, children: (0, jsx_runtime_1.jsx)(react_slider_1.Thumb, { ref: index === 0 ? thumbRef : null, className: (0, classnames_1.default)(Slider_module_scss_1.default.sliderThumb, {
+                                [Slider_module_scss_1.default.disabled]: !enabled,
+                            }), style: thumbStyle ? Object.assign({}, thumbStyle) : undefined, id: id, "data-thumb-index": index }) }, index)))] }) }) })));
 });
-exports.Slider.displayName = react_slider_1.Root.displayName;
+exports.Slider.displayName = "Slider";

package/dist/scripts/src/components/Table/Table.js

@@ -42,22 +42,25 @@ exports.TableMd = (0, metadata_helpers_1.createMetadata)({
             description: "This property holds an array of page sizes (numbers) the user can select for " +
                 "pagination. If this property is not defined, the component allows only a page size of 10 items.",
         },
-        showPageInfo: (0, metadata_helpers_1.d)("Whether to show page information", undefined, "boolean", TableNative_1.defaultProps.showPageInfo),
-        showPageSizeSelector: (0, metadata_helpers_1.d)("Whether to show the page size selector", undefined, "boolean", TableNative_1.defaultProps.showPageSizeSelector),
-        showCurrentPage: (0, metadata_helpers_1.d)("Whether to show the current page indicator", undefined, "boolean", TableNative_1.defaultProps.showCurrentPage),
+        showPageInfo: (0, metadata_helpers_1.d)("Whether to show page information. It works the same as the [Pagination component property](./Pagination#showpageinfo).", undefined, "boolean", TableNative_1.defaultProps.showPageInfo),
+        showPageSizeSelector: (0, metadata_helpers_1.d)("Whether to show the page size selector. It works the same as the [Pagination component property](./Pagination#showpagesizeselector).", undefined, "boolean", TableNative_1.defaultProps.showPageSizeSelector),
+        showCurrentPage: (0, metadata_helpers_1.d)("Whether to show the current page indicator. It works the same as the [Pagination component property](./Pagination#showcurrentpage).", undefined, "boolean", TableNative_1.defaultProps.showCurrentPage),
         pageSizeSelectorPosition: {
-            description: "Determines where to place the page size selector in the layout.",
+            description: "Determines where to place the page size selector in the layout. " +
+                "It works the same as the [Pagination component property](./Pagination#pagesizeselectorposition).",
             options: PaginationNative_1.PositionValues,
             type: "string",
             default: TableNative_1.defaultProps.pageSizeSelectorPosition,
         },
         pageInfoPosition: {
-            description: "Determines where to place the page information in the layout.",
+            description: "Determines where to place the page information in the layout. " +
+                "It works the same as the [Pagination component property](./Pagination#pageinfoposition).",
             options: PaginationNative_1.PositionValues,
             type: "string",
             default: TableNative_1.defaultProps.pageInfoPosition,
         },
-        buttonRowPosition: (0, metadata_helpers_1.d)("Determines where to place the pagination button row in the layout.", PaginationNative_1.PositionValues, "string", TableNative_1.defaultProps.buttonRowPosition),
+        buttonRowPosition: (0, metadata_helpers_1.d)("Determines where to place the pagination button row in the layout. " +
+            "It works the same as the [Pagination component property](./Pagination#buttonrowposition).", PaginationNative_1.PositionValues, "string", TableNative_1.defaultProps.buttonRowPosition),
         rowDisabledPredicate: (0, metadata_helpers_1.d)(`This property defines a predicate function with a return value that determines if the ` +
             `row should be disabled. The function retrieves the item to display and should return ` +
             `a Boolean-like value.`),

package/dist/scripts/src/components/Table/TableNative.js

@@ -35,7 +35,6 @@ const classnames_1 = __importDefault(require("classnames"));
 const Table_module_scss_1 = __importDefault(require("./Table.module.scss"));
 require("./react-table-config.d.ts");
 const constants_1 = require("../../components-core/constants");
-const ScrollContext_1 = require("../../components-core/ScrollContext");
 const misc_1 = require("../../components-core/utils/misc");
 const hooks_1 = require("../../components-core/utils/hooks");
 const ThemeContext_1 = require("../../components-core/theming/ThemeContext");
@@ -74,7 +73,7 @@ const getCommonPinningStyles = (column) => {
 };
 // eslint-disable-next-line react/display-name
 exports.Table = (0, react_1.forwardRef)((_a, forwardedRef) => {
-    var _b, _c, _d, _e;
+    var _b, _c, _d, _e, _f;
     var { data = exports.defaultProps.data, columns = exports.defaultProps.columns, isPaginated = exports.defaultProps.isPaginated, loading = exports.defaultProps.loading, headerHeight, rowsSelectable = exports.defaultProps.rowsSelectable, enableMultiRowSelection = exports.defaultProps.enableMultiRowSelection, pageSizeOptions = exports.defaultProps.pageSizeOptions, pageSize = (pageSizeOptions === null || pageSizeOptions === void 0 ? void 0 : pageSizeOptions[0]) || DEFAULT_PAGE_SIZES[0], currentPageIndex = 0, rowDisabledPredicate = defaultIsRowDisabled, sortBy, sortingDirection = exports.defaultProps.sortingDirection, iconSortAsc, iconSortDesc, iconNoSort, sortingDidChange, willSort, style, className, noDataRenderer, autoFocus = exports.defaultProps.autoFocus, hideHeader = exports.defaultProps.hideHeader, hideNoDataView = exports.defaultProps.hideNoDataView, alwaysShowSelectionHeader = exports.defaultProps.alwaysShowSelectionHeader, registerComponentApi, onSelectionDidChange, noBottomBorder = exports.defaultProps.noBottomBorder, paginationControlsLocation = exports.defaultProps.paginationControlsLocation, cellVerticalAlign = exports.defaultProps.cellVerticalAlign, buttonRowPosition = exports.defaultProps.buttonRowPosition, pageSizeSelectorPosition = exports.defaultProps.pageSizeSelectorPosition, pageInfoPosition = exports.defaultProps.pageInfoPosition, showCurrentPage = exports.defaultProps.showCurrentPage, showPageInfo = exports.defaultProps.showPageInfo, showPageSizeSelector = exports.defaultProps.showPageSizeSelector } = _a, rest = __rest(_a, ["data", "columns", "isPaginated", "loading", "headerHeight", "rowsSelectable", "enableMultiRowSelection", "pageSizeOptions", "pageSize", "currentPageIndex", "rowDisabledPredicate", "sortBy", "sortingDirection", "iconSortAsc", "iconSortDesc", "iconNoSort", "sortingDidChange", "willSort", "style", "className", "noDataRenderer", "autoFocus", "hideHeader", "hideNoDataView", "alwaysShowSelectionHeader", "registerComponentApi", "onSelectionDidChange", "noBottomBorder", "paginationControlsLocation", "cellVerticalAlign", "buttonRowPosition", "pageSizeSelectorPosition", "pageInfoPosition", "showCurrentPage", "showPageInfo", "showPageSizeSelector"])
     // cols
     ;
@@ -312,9 +311,11 @@ exports.Table = (0, react_1.forwardRef)((_a, forwardedRef) => {
     (0, react_1.useEffect)(() => {
         setVisibleItems(rows.map((row) => row.original));
     }, [rows]);
-    const scrollRef = (0, react_1.useContext)(ScrollContext_1.ScrollContext);
+    const scrollParent = (0, hooks_1.useScrollParent)((_b = wrapperRef.current) === null || _b === void 0 ? void 0 : _b.parentElement);
+    const scrollRef = (0, react_1.useRef)(scrollParent);
+    scrollRef.current = scrollParent;
     const hasHeight = (0, hooks_1.useHasExplicitHeight)(wrapperRef);
-    const hasOutsideScroll = scrollRef && !hasHeight;
+    const hasOutsideScroll = scrollRef.current && !hasHeight;
     const startMargin = (0, hooks_1.useStartMargin)(hasOutsideScroll, wrapperRef, scrollRef);
     const rowVirtualizer = (0, react_virtual_1.useVirtualizer)({
         count: rows.length,
@@ -328,11 +329,11 @@ exports.Table = (0, react_1.forwardRef)((_a, forwardedRef) => {
         overscan: 5,
     });
     const paddingTop = rowVirtualizer.getVirtualItems().length > 0
-        ? ((_c = (_b = rowVirtualizer.getVirtualItems()) === null || _b === void 0 ? void 0 : _b[0]) === null || _c === void 0 ? void 0 : _c.start) - startMargin || 0
+        ? ((_d = (_c = rowVirtualizer.getVirtualItems()) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d.start) - startMargin || 0
         : 0;
     const paddingBottom = rowVirtualizer.getVirtualItems().length > 0
         ? rowVirtualizer.getTotalSize() -
-            (((_e = (_d = rowVirtualizer.getVirtualItems()) === null || _d === void 0 ? void 0 : _d[rowVirtualizer.getVirtualItems().length - 1]) === null || _e === void 0 ? void 0 : _e.end) -
+            (((_f = (_e = rowVirtualizer.getVirtualItems()) === null || _e === void 0 ? void 0 : _e[rowVirtualizer.getVirtualItems().length - 1]) === null || _f === void 0 ? void 0 : _f.end) -
                 startMargin || 0)
         : 0;
     const hasData = safeData.length !== 0;
@@ -397,9 +398,11 @@ exports.Table = (0, react_1.forwardRef)((_a, forwardedRef) => {
                                 var _a, _b, _c;
                                 const _d = ((_a = header.column.columnDef.meta) === null || _a === void 0 ? void 0 : _a.style) || {}, { width } = _d, style = __rest(_d, ["width"]);
                                 const size = header.getSize();
-                                const alignmentClass = cellVerticalAlign === "top" ? Table_module_scss_1.default.alignTop :
-                                    cellVerticalAlign === "bottom" ? Table_module_scss_1.default.alignBottom :
-                                        Table_module_scss_1.default.alignCenter;
+                                const alignmentClass = cellVerticalAlign === "top"
+                                    ? Table_module_scss_1.default.alignTop
+                                    : cellVerticalAlign === "bottom"
+                                        ? Table_module_scss_1.default.alignBottom
+                                        : Table_module_scss_1.default.alignCenter;
                                 return ((0, jsx_runtime_1.jsxs)("th", { className: (0, classnames_1.default)(Table_module_scss_1.default.columnCell, alignmentClass), colSpan: header.colSpan, style: Object.assign({ position: "relative", width: size }, getCommonPinningStyles(header.column)), children: [(0, jsx_runtime_1.jsx)(ClickableHeader, { hasSorting: header.column.columnDef.enableSorting &&
                                                 !!((_b = header.column.columnDef.meta) === null || _b === void 0 ? void 0 : _b.accessorKey), updateSorting: () => { var _a; return _updateSorting((_a = header.column.columnDef.meta) === null || _a === void 0 ? void 0 : _a.accessorKey); }, children: (0, jsx_runtime_1.jsxs)("div", { className: Table_module_scss_1.default.headerContent, style: style, children: [(0, react_table_1.flexRender)(header.column.columnDef.header, header.getContext()), header.column.columnDef.enableSorting && ((0, jsx_runtime_1.jsx)("span", { style: { display: "inline-flex", maxWidth: 16 }, children: (0, jsx_runtime_1.jsx)(ColumnOrderingIndicator, { iconSortAsc: iconSortAsc, iconSortDesc: iconSortDesc, iconNoSort: iconNoSort, direction: ((_c = header.column.columnDef.meta) === null || _c === void 0 ? void 0 : _c.accessorKey) === _sortBy
                                                                 ? _sortingDirection
@@ -449,9 +452,11 @@ exports.Table = (0, react_1.forwardRef)((_a, forwardedRef) => {
                                         var _a, _b;
                                         const cellRenderer = (_b = (_a = cell.column.columnDef) === null || _a === void 0 ? void 0 : _a.meta) === null || _b === void 0 ? void 0 : _b.cellRenderer;
                                         const size = cell.column.getSize();
-                                        const alignmentClass = cellVerticalAlign === "top" ? Table_module_scss_1.default.alignTop :
-                                            cellVerticalAlign === "bottom" ? Table_module_scss_1.default.alignBottom :
-                                                Table_module_scss_1.default.alignCenter;
+                                        const alignmentClass = cellVerticalAlign === "top"
+                                            ? Table_module_scss_1.default.alignTop
+                                            : cellVerticalAlign === "bottom"
+                                                ? Table_module_scss_1.default.alignBottom
+                                                : Table_module_scss_1.default.alignCenter;
                                         return ((0, jsx_runtime_1.jsx)("td", { className: (0, classnames_1.default)(Table_module_scss_1.default.cell, alignmentClass), style: Object.assign({ 
                                                 // width: size,
                                                 width: size }, getCommonPinningStyles(cell.column)), children: (0, jsx_runtime_1.jsx)("div", { className: Table_module_scss_1.default.cellContent, children: cellRenderer
@@ -469,7 +474,7 @@ exports.Table = (0, react_1.forwardRef)((_a, forwardedRef) => {
                 paginationControls] })));
 });
 function ClickableHeader({ hasSorting, updateSorting, children }) {
-    return hasSorting ? ((0, jsx_runtime_1.jsx)("button", { className: Table_module_scss_1.default.clickableHeader, onClick: updateSorting, children: children })) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children }));
+    return hasSorting ? ((0, jsx_runtime_1.jsx)("button", { type: "button", className: Table_module_scss_1.default.clickableHeader, onClick: updateSorting, children: children })) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children }));
 }
 function ColumnOrderingIndicator({ direction, iconSortAsc = "sortasc:Table", iconSortDesc = "sortdesc:Table", iconNoSort = "nosort:Table", }) {
     if (direction === "ascending") {

package/dist/scripts/src/components/TextArea/TextAreaNative.js

@@ -201,10 +201,10 @@ exports.TextArea = (0, react_1.forwardRef)(function TextArea(_a, forwardedRef) {
         autoComplete: "off",
     };
     if (resize === "both" || resize === "horizontal" || resize === "vertical") {
-        return ((0, jsx_runtime_1.jsx)(ItemWithLabel_1.ItemWithLabel, Object.assign({}, rest, { ref: forwardedRef, labelPosition: labelPosition, label: label, labelWidth: labelWidth, labelBreak: labelBreak, required: required, enabled: enabled, onFocus: onFocus, onBlur: onBlur, style: style, children: (0, jsx_runtime_1.jsx)(TextAreaResizable_1.default, Object.assign({}, textareaProps, { ref: inputRef, style: style, className: (0, classnames_1.default)((0, parts_1.partClassName)(parts_1.PART_INPUT), classes), maxRows: maxRows, minRows: minRows, rows: rows })) })));
+        return ((0, jsx_runtime_1.jsx)(ItemWithLabel_1.ItemWithLabel, Object.assign({}, rest, { ref: forwardedRef, labelPosition: labelPosition, label: label, labelWidth: labelWidth, labelBreak: labelBreak, required: required, enabled: enabled, onFocus: onFocus, onBlur: onBlur, style: style, children: (0, jsx_runtime_1.jsx)(TextAreaResizable_1.default, Object.assign({}, textareaProps, { "data-part-id": parts_1.PART_INPUT, ref: inputRef, style: style, className: (0, classnames_1.default)(classes), maxRows: maxRows, minRows: minRows, rows: rows })) })));
     }
     if (autoSize || !(0, lodash_es_1.isNil)(maxRows) || !(0, lodash_es_1.isNil)(minRows)) {
-        return ((0, jsx_runtime_1.jsx)(ItemWithLabel_1.ItemWithLabel, Object.assign({}, rest, { ref: forwardedRef, labelPosition: labelPosition, label: label, labelWidth: labelWidth, labelBreak: labelBreak, required: required, enabled: enabled, onFocus: onFocus, onBlur: onBlur, style: style, children: (0, jsx_runtime_1.jsx)(react_textarea_autosize_1.default, Object.assign({}, textareaProps, { ref: inputRef, style: style, className: (0, classnames_1.default)((0, parts_1.partClassName)(parts_1.PART_INPUT), classes), maxRows: maxRows, minRows: minRows, rows: rows })) })));
+        return ((0, jsx_runtime_1.jsx)(ItemWithLabel_1.ItemWithLabel, Object.assign({}, rest, { ref: forwardedRef, labelPosition: labelPosition, label: label, labelWidth: labelWidth, labelBreak: labelBreak, required: required, enabled: enabled, onFocus: onFocus, onBlur: onBlur, style: style, children: (0, jsx_runtime_1.jsx)(react_textarea_autosize_1.default, Object.assign({}, textareaProps, { "data-part-id": parts_1.PART_INPUT, ref: inputRef, style: style, className: (0, classnames_1.default)(classes), maxRows: maxRows, minRows: minRows, rows: rows })) })));
     }
-    return ((0, jsx_runtime_1.jsx)(ItemWithLabel_1.ItemWithLabel, Object.assign({}, rest, { ref: forwardedRef, labelPosition: labelPosition, label: label, labelWidth: labelWidth, labelBreak: labelBreak, required: required, enabled: enabled, onFocus: onFocus, onBlur: onBlur, style: style, children: (0, jsx_runtime_1.jsx)("textarea", Object.assign({}, textareaProps, { ref: inputRef, rows: rows, className: (0, classnames_1.default)((0, parts_1.partClassName)(parts_1.PART_INPUT), classes) })) })));
+    return ((0, jsx_runtime_1.jsx)(ItemWithLabel_1.ItemWithLabel, Object.assign({}, rest, { ref: forwardedRef, labelPosition: labelPosition, label: label, labelWidth: labelWidth, labelBreak: labelBreak, required: required, enabled: enabled, onFocus: onFocus, onBlur: onBlur, style: style, children: (0, jsx_runtime_1.jsx)("textarea", Object.assign({}, textareaProps, { "data-part-id": parts_1.PART_INPUT, ref: inputRef, rows: rows, className: (0, classnames_1.default)(classes) })) })));
 });

package/dist/scripts/src/components/TextBox/TextBoxNative.js

@@ -141,7 +141,7 @@ exports.TextBox = (0, react_1.forwardRef)(function TextBox(_a, ref) {
                 [TextBox_module_scss_1.default.error]: validationStatus === "error",
                 [TextBox_module_scss_1.default.warning]: validationStatus === "warning",
                 [TextBox_module_scss_1.default.valid]: validationStatus === "valid",
-            }), tabIndex: -1, onFocus: focus, style: { gap }, children: [(0, jsx_runtime_1.jsx)(InputAdornment_1.Adornment, { text: startText, iconName: startIcon, className: (0, classnames_1.default)((0, parts_1.partClassName)(parts_1.PART_START_ADORNMENT), TextBox_module_scss_1.default.adornment) }), (0, jsx_runtime_1.jsx)("input", { id: id, type: actualType, className: (0, classnames_1.default)((0, parts_1.partClassName)(parts_1.PART_INPUT), TextBox_module_scss_1.default.input, {
+            }), tabIndex: -1, onFocus: focus, style: { gap }, children: [(0, jsx_runtime_1.jsx)(InputAdornment_1.Adornment, { "data-part-id": parts_1.PART_START_ADORNMENT, text: startText, iconName: startIcon, className: (0, classnames_1.default)(TextBox_module_scss_1.default.adornment) }), (0, jsx_runtime_1.jsx)("input", { id: id, "data-part-id": parts_1.PART_INPUT, type: actualType, className: (0, classnames_1.default)(TextBox_module_scss_1.default.input, {
                         [TextBox_module_scss_1.default.readOnly]: readOnly,
-                    }), disabled: !enabled, value: localValue, maxLength: maxLength, placeholder: placeholder, onChange: onInputChange, onFocus: handleOnFocus, onBlur: handleOnBlur, onKeyDown: onKeyDown, ref: inputRef, readOnly: readOnly, autoFocus: autoFocus, tabIndex: enabled ? tabIndex : -1, required: required }), type === "password" && showPasswordToggle ? ((0, jsx_runtime_1.jsx)(InputAdornment_1.Adornment, { iconName: showPassword ? passwordVisibleIcon : passwordHiddenIcon, className: (0, classnames_1.default)((0, parts_1.partClassName)(parts_1.PART_END_ADORNMENT), TextBox_module_scss_1.default.adornment, TextBox_module_scss_1.default.passwordToggle), onClick: togglePasswordVisibility })) : ((0, jsx_runtime_1.jsx)(InputAdornment_1.Adornment, { text: endText, iconName: endIcon, className: (0, classnames_1.default)((0, parts_1.partClassName)(parts_1.PART_END_ADORNMENT), TextBox_module_scss_1.default.adornment) }))] }) })));
+                    }), disabled: !enabled, value: localValue, maxLength: maxLength, placeholder: placeholder, onChange: onInputChange, onFocus: handleOnFocus, onBlur: handleOnBlur, onKeyDown: onKeyDown, ref: inputRef, readOnly: readOnly, autoFocus: autoFocus, tabIndex: enabled ? tabIndex : -1, required: required }), type === "password" && showPasswordToggle ? ((0, jsx_runtime_1.jsx)(InputAdornment_1.Adornment, { "data-part-id": parts_1.PART_END_ADORNMENT, iconName: showPassword ? passwordVisibleIcon : passwordHiddenIcon, className: (0, classnames_1.default)(TextBox_module_scss_1.default.adornment, TextBox_module_scss_1.default.passwordToggle), onClick: togglePasswordVisibility })) : ((0, jsx_runtime_1.jsx)(InputAdornment_1.Adornment, { "data-part-id": parts_1.PART_END_ADORNMENT, text: endText, iconName: endIcon, className: TextBox_module_scss_1.default.adornment }))] }) })));
 });

package/dist/scripts/src/components/TimeInput/TimeInput.js

@@ -88,11 +88,6 @@ exports.TimeInputMd = (0, metadata_helpers_1.createMetadata)({
                 "set, the gap declared by the current theme is used.",
             valueType: "string",
         },
-        mute: {
-            description: "Whether to mute the beep sound while still firing the beep event",
-            valueType: "boolean",
-            defaultValue: TimeInputNative_1.defaultProps.mute,
-        },
         emptyCharacter: {
             description: "Character to use as placeholder for empty time values. If longer than 1 character, uses the first character. Defaults to '-'",
             valueType: "string",
@@ -104,7 +99,6 @@ exports.TimeInputMd = (0, metadata_helpers_1.createMetadata)({
         gotFocus: (0, metadata_helpers_1.dGotFocus)(COMP),
         lostFocus: (0, metadata_helpers_1.dLostFocus)(COMP),
         invalidTime: (0, metadata_helpers_1.d)("Fired when the user enters an invalid time"),
-        beep: (0, metadata_helpers_1.d)("Fired when a beep sound is played due to invalid input, allowing custom feedback implementations"),
     },
     apis: {
         focus: {
@@ -122,10 +116,16 @@ exports.TimeInputMd = (0, metadata_helpers_1.createMetadata)({
                 value: "The new time value to set for the time picker.",
             },
         },
+        isoValue: {
+            description: `Get the current time value formatted in ISO standard (HH:MM:SS) using 24-hour format, suitable for JSON serialization.`,
+            signature: "isoValue(): string | null",
+        },
     },
     themeVars: (0, themeVars_1.parseScssVar)(TimeInput_module_scss_1.default.themeVars),
     defaultThemeVars: {
         // TimeInput specific theme variables
+        [`paddingHorizontal-${COMP}`]: "$space-2",
+        [`paddingVertical-${COMP}`]: "$space-2",
         [`color-divider-${COMP}`]: "$textColor-secondary",
         [`spacing-divider-${COMP}`]: "1px 0",
         [`width-input-${COMP}`]: "1.8em",
@@ -135,19 +135,19 @@ exports.TimeInputMd = (0, metadata_helpers_1.createMetadata)({
         [`fontSize-input-${COMP}`]: "inherit",
         [`borderRadius-input-${COMP}`]: "$borderRadius",
         [`backgroundColor-input-${COMP}-invalid`]: "rgba(220, 53, 69, 0.15)",
-        [`padding-button-${COMP}`]: "4px 6px",
+        [`padding-button-${COMP}`]: "4px 4px",
         [`borderRadius-button-${COMP}`]: "$borderRadius",
         [`hoverColor-button-${COMP}`]: "$color-surface-800",
         [`disabledColor-button-${COMP}`]: "$textColor-disabled",
         [`outlineColor-button-${COMP}--focused`]: "$color-accent-500",
         [`outlineWidth-button-${COMP}--focused`]: "2px",
-        [`outlineOffset-button-${COMP}--focused`]: "2px",
-        [`minWidth-ampm-${COMP}`]: "2em",
+        [`outlineOffset-button-${COMP}--focused`]: "0",
+        [`minWidth-ampm-${COMP}`]: "2.2em",
         [`fontSize-ampm-${COMP}`]: "inherit",
     },
 });
 exports.timeInputComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.TimeInputMd, ({ node, state, updateState, extractValue, className, lookupEventHandler, registerComponentApi, }) => {
     const extractedInitialValue = extractValue(node.props.initialValue);
     const stateValue = state === null || state === void 0 ? void 0 : state.value;
-    return ((0, jsx_runtime_1.jsx)(TimeInputNative_1.TimeInputNative, { className: className, initialValue: extractedInitialValue, value: stateValue, updateState: updateState, registerComponentApi: registerComponentApi, enabled: extractValue.asOptionalBoolean(node.props.enabled, TimeInputNative_1.defaultProps.enabled), autoFocus: extractValue.asOptionalBoolean(node.props.autoFocus, TimeInputNative_1.defaultProps.autoFocus), readOnly: extractValue.asOptionalBoolean(node.props.readOnly, TimeInputNative_1.defaultProps.readOnly), validationStatus: extractValue(node.props.validationStatus), hour24: extractValue.asOptionalBoolean(node.props.hour24, TimeInputNative_1.defaultProps.hour24), seconds: extractValue.asOptionalBoolean(node.props.seconds, TimeInputNative_1.defaultProps.seconds), minTime: extractValue(node.props.minTime), maxTime: extractValue(node.props.maxTime), clearable: extractValue.asOptionalBoolean(node.props.clearable, TimeInputNative_1.defaultProps.clearable), clearIcon: extractValue(node.props.clearIcon), clearToInitialValue: extractValue.asOptionalBoolean(node.props.clearToInitialValue, TimeInputNative_1.defaultProps.clearToInitialValue), required: extractValue.asOptionalBoolean(node.props.required, TimeInputNative_1.defaultProps.required), label: extractValue(node.props.label), labelPosition: extractValue(node.props.labelPosition), labelWidth: extractValue(node.props.labelWidth), labelBreak: extractValue.asOptionalBoolean(node.props.labelBreak, TimeInputNative_1.defaultProps.labelBreak), startText: extractValue(node.props.startText), startIcon: extractValue(node.props.startIcon), endText: extractValue(node.props.endText), endIcon: extractValue(node.props.endIcon), gap: extractValue.asOptionalString(node.props.gap), mute: extractValue.asOptionalBoolean(node.props.mute, TimeInputNative_1.defaultProps.mute), emptyCharacter: extractValue.asOptionalString(node.props.emptyCharacter, TimeInputNative_1.defaultProps.emptyCharacter), onDidChange: lookupEventHandler("didChange"), onFocus: lookupEventHandler("gotFocus"), onBlur: lookupEventHandler("lostFocus"), onInvalidChange: lookupEventHandler("invalidTime"), onBeep: lookupEventHandler("beep") }));
+    return ((0, jsx_runtime_1.jsx)(TimeInputNative_1.TimeInputNative, { className: className, initialValue: extractedInitialValue, value: stateValue, updateState: updateState, registerComponentApi: registerComponentApi, enabled: extractValue.asOptionalBoolean(node.props.enabled, TimeInputNative_1.defaultProps.enabled), autoFocus: extractValue.asOptionalBoolean(node.props.autoFocus, TimeInputNative_1.defaultProps.autoFocus), readOnly: extractValue.asOptionalBoolean(node.props.readOnly, TimeInputNative_1.defaultProps.readOnly), validationStatus: extractValue(node.props.validationStatus), hour24: extractValue.asOptionalBoolean(node.props.hour24, TimeInputNative_1.defaultProps.hour24), seconds: extractValue.asOptionalBoolean(node.props.seconds, TimeInputNative_1.defaultProps.seconds), minTime: extractValue(node.props.minTime), maxTime: extractValue(node.props.maxTime), clearable: extractValue.asOptionalBoolean(node.props.clearable, TimeInputNative_1.defaultProps.clearable), clearIcon: extractValue(node.props.clearIcon), clearToInitialValue: extractValue.asOptionalBoolean(node.props.clearToInitialValue, TimeInputNative_1.defaultProps.clearToInitialValue), required: extractValue.asOptionalBoolean(node.props.required, TimeInputNative_1.defaultProps.required), label: extractValue(node.props.label), labelPosition: extractValue(node.props.labelPosition), labelWidth: extractValue(node.props.labelWidth), labelBreak: extractValue.asOptionalBoolean(node.props.labelBreak, TimeInputNative_1.defaultProps.labelBreak), startText: extractValue(node.props.startText), startIcon: extractValue(node.props.startIcon), endText: extractValue(node.props.endText), endIcon: extractValue(node.props.endIcon), gap: extractValue.asOptionalString(node.props.gap), emptyCharacter: extractValue.asOptionalString(node.props.emptyCharacter, TimeInputNative_1.defaultProps.emptyCharacter), onDidChange: lookupEventHandler("didChange"), onFocus: lookupEventHandler("gotFocus"), onBlur: lookupEventHandler("lostFocus"), onInvalidChange: lookupEventHandler("invalidTime") }));
 });

package/dist/scripts/src/components/TimeInput/TimeInputNative.js

@@ -22,13 +22,11 @@ const TimeInput_module_scss_1 = __importDefault(require("./TimeInput.module.scss
 const PartialInput_1 = require("../Input/PartialInput");
 const InputDivider_1 = require("../Input/InputDivider");
 const misc_1 = require("../../components-core/utils/misc");
-const audio_utils_1 = require("../../components-core/utils/audio-utils");
 const InputAdornment_1 = require("../Input/InputAdornment");
 const ItemWithLabel_1 = require("../FormItem/ItemWithLabel");
 const IconNative_1 = __importDefault(require("../Icon/IconNative"));
 // Import utilities and types from merged utils file
 const utils_1 = require("./utils");
-const parts_1 = require("../../components-core/parts");
 // Component part names
 const PART_HOUR = "hour";
 const PART_MINUTE = "minute";
@@ -47,11 +45,10 @@ exports.defaultProps = {
     readOnly: false,
     autoFocus: false,
     labelBreak: false,
-    mute: false,
     emptyCharacter: "-",
 };
 exports.TimeInputNative = (0, react_1.forwardRef)(function TimeInputNative(_a, ref) {
-    var { id, initialValue, value: controlledValue, enabled = exports.defaultProps.enabled, updateState, style, className, onDidChange, onFocus, onBlur, onInvalidChange, onBeep, validationStatus = exports.defaultProps.validationStatus, registerComponentApi, hour24 = exports.defaultProps.hour24, seconds = exports.defaultProps.seconds, minTime, maxTime, clearable = exports.defaultProps.clearable, clearIcon, clearToInitialValue = exports.defaultProps.clearToInitialValue, required = exports.defaultProps.required, startText, startIcon, endText, endIcon, gap, label, labelPosition = exports.defaultProps.labelPosition, labelWidth, labelBreak = exports.defaultProps.labelBreak, readOnly = exports.defaultProps.readOnly, autoFocus = exports.defaultProps.autoFocus, mute = exports.defaultProps.mute, emptyCharacter = exports.defaultProps.emptyCharacter } = _a, rest = __rest(_a, ["id", "initialValue", "value", "enabled", "updateState", "style", "className", "onDidChange", "onFocus", "onBlur", "onInvalidChange", "onBeep", "validationStatus", "registerComponentApi", "hour24", "seconds", "minTime", "maxTime", "clearable", "clearIcon", "clearToInitialValue", "required", "startText", "startIcon", "endText", "endIcon", "gap", "label", "labelPosition", "labelWidth", "labelBreak", "readOnly", "autoFocus", "mute", "emptyCharacter"]);
+    var { id, initialValue, value: controlledValue, enabled = exports.defaultProps.enabled, updateState, style, className, onDidChange, onFocus, onBlur, onInvalidChange, validationStatus = exports.defaultProps.validationStatus, registerComponentApi, hour24 = exports.defaultProps.hour24, seconds = exports.defaultProps.seconds, minTime, maxTime, clearable = exports.defaultProps.clearable, clearIcon, clearToInitialValue = exports.defaultProps.clearToInitialValue, required = exports.defaultProps.required, startText, startIcon, endText, endIcon, gap, label, labelPosition = exports.defaultProps.labelPosition, labelWidth, labelBreak = exports.defaultProps.labelBreak, readOnly = exports.defaultProps.readOnly, autoFocus = exports.defaultProps.autoFocus, emptyCharacter = exports.defaultProps.emptyCharacter } = _a, rest = __rest(_a, ["id", "initialValue", "value", "enabled", "updateState", "style", "className", "onDidChange", "onFocus", "onBlur", "onInvalidChange", "validationStatus", "registerComponentApi", "hour24", "seconds", "minTime", "maxTime", "clearable", "clearIcon", "clearToInitialValue", "required", "startText", "startIcon", "endText", "endIcon", "gap", "label", "labelPosition", "labelWidth", "labelBreak", "readOnly", "autoFocus", "emptyCharacter"]);
     const timeInputRef = (0, react_1.useRef)(null);
     // Refs for auto-tabbing between inputs
     const hourInputRef = (0, react_1.useRef)(null);
@@ -105,7 +102,7 @@ exports.TimeInputNative = (0, react_1.forwardRef)(function TimeInputNative(_a, r
     // Parse value into individual components
     (0, react_1.useEffect)(() => {
         if (localValue) {
-            const { amPm: parsedAmPm, hour: hourStr, minute: minuteStr, second: secondStr, } = parseTimeString(String(localValue), is12HourFormat);
+            const { amPm: parsedAmPm, hour: hourStr, minute: minuteStr, second: secondStr, } = parseTimeString(localValue, is12HourFormat);
             setAmPm(parsedAmPm);
             setHour(hourStr);
             setMinute(minuteStr);
@@ -128,15 +125,6 @@ exports.TimeInputNative = (0, react_1.forwardRef)(function TimeInputNative(_a, r
         }
         onDidChange === null || onDidChange === void 0 ? void 0 : onDidChange(newValue);
     });
-    // Method to handle beeping - both sound and event
-    const handleBeep = (0, react_1.useCallback)(() => {
-        // Play the beep sound only if not muted
-        if (!mute) {
-            (0, audio_utils_1.beep)(440, 50);
-        }
-        // Always fire the beep event for alternative implementations
-        onBeep === null || onBeep === void 0 ? void 0 : onBeep();
-    }, [onBeep, mute]);
     // Helper function to format the complete time value
     const formatTimeValue = (0, react_1.useCallback)((h, m, s, ap, is12Hour) => {
         if (!h || !m) {
@@ -184,10 +172,6 @@ exports.TimeInputNative = (0, react_1.forwardRef)(function TimeInputNative(_a, r
         const normalizedValue = normalizeFn(currentValue);
         // Check if the current value was invalid (needed normalization or couldn't be normalized)
         const wasInvalid = currentValue !== "" && (normalizedValue === null || normalizedValue !== currentValue);
-        if (wasInvalid) {
-            // Play beep sound and fire beep event when manually tabbing out of invalid input
-            handleBeep();
-        }
         if (normalizedValue !== null && normalizedValue !== currentValue) {
             setValue(normalizedValue);
             setInvalid(false); // Clear invalid state after normalization
@@ -214,7 +198,7 @@ exports.TimeInputNative = (0, react_1.forwardRef)(function TimeInputNative(_a, r
             const timeString = formatTimeValue(timeValues.hour, timeValues.minute, timeValues.second, amPm, is12HourFormat);
             handleChange(timeString);
         }
-    }, [hour, minute, second, amPm, is12HourFormat, handleChange, handleBeep]);
+    }, [hour, minute, second, amPm, is12HourFormat, handleChange]);
     // Handle changes from individual inputs
     const handleHourChange = (0, react_1.useMemo)(() => createInputChangeHandler("hour", setHour, setIsHourCurrentlyInvalid, (value) => isHourInvalid(value, !is12HourFormat)), [createInputChangeHandler, is12HourFormat]);
     const handleHourBlur = (0, react_1.useMemo)(() => createInputBlurHandler("hour", setHour, setIsHourCurrentlyInvalid, (value) => normalizeHour(value, !is12HourFormat)), [createInputBlurHandler, is12HourFormat]);
@@ -283,7 +267,9 @@ exports.TimeInputNative = (0, react_1.forwardRef)(function TimeInputNative(_a, r
                         amPmButtonRef.current.focus();
                     }
                 }
-                else if (currentTarget === secondInputRef.current && is12HourFormat && amPmButtonRef.current) {
+                else if (currentTarget === secondInputRef.current &&
+                    is12HourFormat &&
+                    amPmButtonRef.current) {
                     amPmButtonRef.current.focus();
                 }
             }
@@ -361,6 +347,32 @@ exports.TimeInputNative = (0, react_1.forwardRef)(function TimeInputNative(_a, r
     const setValue = (0, misc_1.useEvent)((newValue) => {
         handleChange(newValue);
     });
+    // Function to get ISO formatted time value (HH:MM:SS in 24-hour format)
+    const getIsoValue = (0, react_1.useCallback)(() => {
+        if (!hour || !minute) {
+            return null;
+        }
+        // Convert to 24-hour format if currently in 12-hour format
+        let hour24;
+        if (is12HourFormat && amPm) {
+            const hourInt = parseInt(hour, 10);
+            if (amPm === "am") {
+                hour24 = hourInt === 12 ? 0 : hourInt;
+            }
+            else {
+                // pm
+                hour24 = hourInt === 12 ? 12 : hourInt + 12;
+            }
+        }
+        else {
+            hour24 = parseInt(hour, 10);
+        }
+        // Format as ISO time string (HH:MM:SS)
+        const h24 = hour24.toString().padStart(2, "0");
+        const m24 = minute.padStart(2, "0");
+        const s24 = (second || "00").padStart(2, "0");
+        return `${h24}:${m24}:${s24}`;
+    }, [hour, minute, second, amPm, is12HourFormat]);
     // Component API registration
     (0, react_1.useImperativeHandle)(ref, () => timeInputRef.current);
     (0, react_1.useEffect)(() => {
@@ -368,9 +380,10 @@ exports.TimeInputNative = (0, react_1.forwardRef)(function TimeInputNative(_a, r
             registerComponentApi({
                 focus,
                 setValue,
+                isoValue: getIsoValue,
             });
         }
-    }, [registerComponentApi, focus, setValue]);
+    }, [registerComponentApi, focus, setValue, getIsoValue]);
     // Custom clear icon
     const clearIconElement = (0, react_1.useMemo)(() => {
         if (clearIcon === null || clearIcon === "null")
@@ -393,15 +406,13 @@ exports.TimeInputNative = (0, react_1.forwardRef)(function TimeInputNative(_a, r
         }
         return null;
     }, [endIcon, endText]);
-    // Create placeholder using processed empty character
-    const placeholder = processedEmptyCharacter.repeat(2);
     const timeInputComponent = ((0, jsx_runtime_1.jsxs)("div", Object.assign({ ref: timeInputRef, className: (0, classnames_1.default)(TimeInput_module_scss_1.default.timeInputWrapper, {
             [TimeInput_module_scss_1.default.error]: validationStatus === "error",
             [TimeInput_module_scss_1.default.warning]: validationStatus === "warning",
             [TimeInput_module_scss_1.default.valid]: validationStatus === "valid",
             [TimeInput_module_scss_1.default.disabled]: !enabled,
             [TimeInput_module_scss_1.default.readOnly]: readOnly,
-        }, className), style: Object.assign(Object.assign({}, style), { gap }), onFocusCapture: handleComponentFocus, onBlur: handleComponentBlur, "data-validation-status": validationStatus }, rest, { children: [startAdornment, (0, jsx_runtime_1.jsxs)("div", { className: TimeInput_module_scss_1.default.wrapper, children: [(0, jsx_runtime_1.jsxs)("div", { className: TimeInput_module_scss_1.default.inputGroup, children: [(0, jsx_runtime_1.jsx)(HourInput, { amPm: amPm, autoFocus: autoFocus, disabled: !enabled, inputRef: hourInputRef, nextInputRef: minuteInputRef, maxTime: maxTime, minTime: minTime, onChange: handleHourChange, onBlur: handleHourBlur, onKeyDown: handleArrowKeys, readOnly: readOnly, required: required, value: hour, isInvalid: isHourCurrentlyInvalid, is24Hour: !is12HourFormat, emptyCharacter: processedEmptyCharacter, onBeep: handleBeep }), (0, jsx_runtime_1.jsx)(InputDivider_1.InputDivider, { separator: ":", className: TimeInput_module_scss_1.default.divider }), (0, jsx_runtime_1.jsx)(MinuteInput, { disabled: !enabled, hour: hour, inputRef: minuteInputRef, nextInputRef: showSeconds ? secondInputRef : undefined, nextButtonRef: showSeconds ? undefined : is12HourFormat ? amPmButtonRef : undefined, maxTime: maxTime, minTime: minTime, onChange: handleMinuteChange, onBlur: handleMinuteBlur, onKeyDown: handleArrowKeys, readOnly: readOnly, required: required, showLeadingZeros: showLeadingZeros, value: minute, isInvalid: isMinuteCurrentlyInvalid, emptyCharacter: processedEmptyCharacter, onBeep: handleBeep }), showSeconds && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(InputDivider_1.InputDivider, { separator: ":", className: TimeInput_module_scss_1.default.divider }), (0, jsx_runtime_1.jsx)(SecondInput, { disabled: !enabled, hour: hour, inputRef: secondInputRef, nextButtonRef: is12HourFormat ? amPmButtonRef : undefined, maxTime: maxTime, minTime: minTime, minute: minute, onChange: handleSecondChange, onBlur: handleSecondBlur, onKeyDown: handleArrowKeys, readOnly: readOnly, required: required, showLeadingZeros: showLeadingZeros, value: second, isInvalid: isSecondCurrentlyInvalid, emptyCharacter: processedEmptyCharacter, onBeep: handleBeep })] })), is12HourFormat && ((0, jsx_runtime_1.jsx)(AmPmButton, { className: "timeinput", disabled: !enabled, buttonRef: amPmButtonRef, maxTime: maxTime, minTime: minTime, onClick: handleAmPmToggle, onAmPmSet: handleAmPmSet, onKeyDown: handleArrowKeys, value: amPm }))] }), clearable && ((0, jsx_runtime_1.jsx)("button", { className: (0, classnames_1.default)((0, parts_1.partClassName)(PART_CLEAR_BUTTON), TimeInput_module_scss_1.default.clearButton, TimeInput_module_scss_1.default.button), disabled: !enabled, onClick: clear, onFocus: stopPropagation, type: "button", children: clearIconElement }))] }), endAdornment] })));
+        }, className), style: Object.assign(Object.assign({}, style), { gap }), onFocusCapture: handleComponentFocus, onBlur: handleComponentBlur, "data-validation-status": validationStatus }, rest, { children: [startAdornment, (0, jsx_runtime_1.jsxs)("div", { className: TimeInput_module_scss_1.default.wrapper, children: [(0, jsx_runtime_1.jsxs)("div", { className: TimeInput_module_scss_1.default.inputGroup, children: [(0, jsx_runtime_1.jsx)(HourInput, { amPm: amPm, autoFocus: autoFocus, disabled: !enabled, inputRef: hourInputRef, nextInputRef: minuteInputRef, maxTime: maxTime, minTime: minTime, onChange: handleHourChange, onBlur: handleHourBlur, onKeyDown: handleArrowKeys, readOnly: readOnly, required: required, value: hour, isInvalid: isHourCurrentlyInvalid, is24Hour: !is12HourFormat, emptyCharacter: processedEmptyCharacter }), (0, jsx_runtime_1.jsx)(InputDivider_1.InputDivider, { separator: ":" }), (0, jsx_runtime_1.jsx)(MinuteInput, { disabled: !enabled, hour: hour, inputRef: minuteInputRef, nextInputRef: showSeconds ? secondInputRef : undefined, nextButtonRef: showSeconds ? undefined : is12HourFormat ? amPmButtonRef : undefined, maxTime: maxTime, minTime: minTime, onChange: handleMinuteChange, onBlur: handleMinuteBlur, onKeyDown: handleArrowKeys, readOnly: readOnly, required: required, showLeadingZeros: showLeadingZeros, value: minute, isInvalid: isMinuteCurrentlyInvalid, emptyCharacter: processedEmptyCharacter }), showSeconds && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(InputDivider_1.InputDivider, { separator: ":", className: TimeInput_module_scss_1.default.divider }), (0, jsx_runtime_1.jsx)(SecondInput, { disabled: !enabled, hour: hour, inputRef: secondInputRef, nextButtonRef: is12HourFormat ? amPmButtonRef : undefined, maxTime: maxTime, minTime: minTime, minute: minute, onChange: handleSecondChange, onBlur: handleSecondBlur, onKeyDown: handleArrowKeys, readOnly: readOnly, required: required, showLeadingZeros: showLeadingZeros, value: second, isInvalid: isSecondCurrentlyInvalid, emptyCharacter: processedEmptyCharacter })] })), is12HourFormat && ((0, jsx_runtime_1.jsx)(AmPmButton, { className: "timeinput", disabled: !enabled, buttonRef: amPmButtonRef, maxTime: maxTime, minTime: minTime, onClick: handleAmPmToggle, onAmPmSet: handleAmPmSet, onKeyDown: handleArrowKeys, value: amPm }))] }), clearable && ((0, jsx_runtime_1.jsx)("button", { "data-part-id": PART_CLEAR_BUTTON, className: (0, classnames_1.default)(TimeInput_module_scss_1.default.clearButton, TimeInput_module_scss_1.default.button), disabled: !enabled, onClick: clear, onFocus: stopPropagation, type: "button", children: clearIconElement }))] }), endAdornment] })));
     // Wrap with label if needed
     if (label) {
         return ((0, jsx_runtime_1.jsx)(ItemWithLabel_1.ItemWithLabel, { label: label, labelPosition: labelPosition, labelWidth: labelWidth, labelBreak: labelBreak, required: required, children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [startAdornment, timeInputComponent, endAdornment] }) }));
@@ -434,10 +445,10 @@ function AmPmButton({ ariaLabel, autoFocus, className, disabled, locale, maxTime
             onAmPmSet("pm");
         }
     }, [onKeyDown, disabled, onAmPmSet, value, amDisabled, pmDisabled]);
-    return ((0, jsx_runtime_1.jsx)("button", { type: "button", "aria-label": ariaLabel || "Toggle AM/PM (Press A for AM, P for PM)", autoFocus: autoFocus, className: (0, classnames_1.default)((0, parts_1.partClassName)(PART_AMPM), TimeInput_module_scss_1.default.amPmButton, TimeInput_module_scss_1.default.button, className), disabled: isDisabled, onClick: onClick, onKeyDown: handleKeyDown, ref: buttonRef, children: (0, jsx_runtime_1.jsx)("span", { className: TimeInput_module_scss_1.default.amPmValue, children: value ? (value === "am" ? amLabel : pmLabel) : "--" }) }));
+    return ((0, jsx_runtime_1.jsx)("button", { type: "button", "data-part-id": PART_AMPM, "aria-label": ariaLabel || "Toggle AM/PM (Press A for AM, P for PM)", autoFocus: autoFocus, className: (0, classnames_1.default)(TimeInput_module_scss_1.default.amPmButton, TimeInput_module_scss_1.default.button, className), disabled: isDisabled, onClick: onClick, onKeyDown: handleKeyDown, ref: buttonRef, children: (0, jsx_runtime_1.jsx)("span", { className: TimeInput_module_scss_1.default.amPmValue, children: value ? (value === "am" ? amLabel : pmLabel) : "--" }) }));
 }
 function HourInput(_a) {
-    var { amPm, maxTime, minTime, value, isInvalid = false, is24Hour = false, emptyCharacter = "-", onBeep } = _a, otherProps = __rest(_a, ["amPm", "maxTime", "minTime", "value", "isInvalid", "is24Hour", "emptyCharacter", "onBeep"]);
+    var { amPm, maxTime, minTime, value, isInvalid = false, is24Hour = false, emptyCharacter = "-" } = _a, otherProps = __rest(_a, ["amPm", "maxTime", "minTime", "value", "isInvalid", "is24Hour", "emptyCharacter"]);
     // Calculate min/max based on format
     const { minHour, maxHour } = (() => {
         if (is24Hour) {
@@ -476,52 +487,90 @@ function HourInput(_a) {
     // Always show the raw value during typing, no conversion
     // This allows users to see invalid input like "23" before it gets normalized on blur
     const displayValue = value || "";
-    return ((0, jsx_runtime_1.jsx)(PartialInput_1.PartialInput, { value: displayValue, emptyCharacter: emptyCharacter, placeholderLength: 2, max: maxHour, min: minHour, maxLength: 2, validateFn: (val) => isHourInvalid(val, is24Hour), onBeep: onBeep, onChange: otherProps.onChange, onBlur: (direction, event) => {
+    return ((0, jsx_runtime_1.jsx)(PartialInput_1.PartialInput, { "data-part-id": PART_HOUR, value: displayValue, emptyCharacter: emptyCharacter, placeholderLength: 2, max: maxHour, min: minHour, maxLength: 2, validateFn: (val) => isHourInvalid(val, is24Hour), onChange: otherProps.onChange, onBlur: (direction, event) => {
             // PartialInput provides direction, but the current onBlur expects just the event
             if (otherProps.onBlur) {
                 otherProps.onBlur(event);
             }
-        }, onKeyDown: otherProps.onKeyDown, className: (0, classnames_1.default)((0, parts_1.partClassName)(PART_HOUR), TimeInput_module_scss_1.default.input, TimeInput_module_scss_1.default.hour), invalidClassName: TimeInput_module_scss_1.default.invalid, disabled: otherProps.disabled, readOnly: otherProps.readOnly, required: otherProps.required, autoFocus: otherProps.autoFocus, inputRef: otherProps.inputRef, nextInputRef: otherProps.nextInputRef, nextButtonRef: otherProps.nextButtonRef, name: is24Hour ? "hour24" : "hour12", ariaLabel: otherProps.ariaLabel, isInvalid: isInvalid }));
+        }, onKeyDown: otherProps.onKeyDown, className: (0, classnames_1.default)(TimeInput_module_scss_1.default.input, TimeInput_module_scss_1.default.hour), invalidClassName: TimeInput_module_scss_1.default.invalid, disabled: otherProps.disabled, readOnly: otherProps.readOnly, required: otherProps.required, autoFocus: otherProps.autoFocus, inputRef: otherProps.inputRef, nextInputRef: otherProps.nextInputRef, nextButtonRef: otherProps.nextButtonRef, name: is24Hour ? "hour24" : "hour12", ariaLabel: otherProps.ariaLabel, isInvalid: isInvalid }));
 }
 function MinuteInput(_a) {
-    var { hour, maxTime, minTime, showLeadingZeros = true, value, isInvalid = false, emptyCharacter = "-", onBeep } = _a, otherProps = __rest(_a, ["hour", "maxTime", "minTime", "showLeadingZeros", "value", "isInvalid", "emptyCharacter", "onBeep"]);
+    var { hour, maxTime, minTime, showLeadingZeros = true, value, isInvalid = false, emptyCharacter = "-" } = _a, otherProps = __rest(_a, ["hour", "maxTime", "minTime", "showLeadingZeros", "value", "isInvalid", "emptyCharacter"]);
     function isSameHour(date) {
         return hour === (0, utils_1.getHours)(date).toString();
     }
     const maxMinute = (0, utils_1.safeMin)(59, maxTime && isSameHour(maxTime) && (0, utils_1.getMinutes)(maxTime));
     const minMinute = (0, utils_1.safeMax)(0, minTime && isSameHour(minTime) && (0, utils_1.getMinutes)(minTime));
-    return ((0, jsx_runtime_1.jsx)(PartialInput_1.PartialInput, { max: maxMinute, min: minMinute, name: "minute", value: value, validateFn: isMinuteOrSecondInvalid, onBeep: onBeep, emptyCharacter: emptyCharacter, placeholderLength: 2, maxLength: 2, onChange: otherProps.onChange, onBlur: (direction, event) => {
+    return ((0, jsx_runtime_1.jsx)(PartialInput_1.PartialInput, { "data-part-id": PART_MINUTE, max: maxMinute, min: minMinute, name: "minute", value: value, validateFn: isMinuteOrSecondInvalid, emptyCharacter: emptyCharacter, placeholderLength: 2, maxLength: 2, onChange: otherProps.onChange, onBlur: (direction, event) => {
             // PartialInput provides direction, but the current onBlur expects just the event
             if (otherProps.onBlur) {
                 otherProps.onBlur(event);
             }
-        }, onKeyDown: otherProps.onKeyDown, className: (0, classnames_1.default)((0, parts_1.partClassName)(PART_MINUTE), TimeInput_module_scss_1.default.input, TimeInput_module_scss_1.default.minute), invalidClassName: TimeInput_module_scss_1.default.invalid, disabled: otherProps.disabled, readOnly: otherProps.readOnly, required: otherProps.required, autoFocus: otherProps.autoFocus, inputRef: otherProps.inputRef, nextInputRef: otherProps.nextInputRef, nextButtonRef: otherProps.nextButtonRef, ariaLabel: otherProps.ariaLabel, isInvalid: isInvalid }));
+        }, onKeyDown: otherProps.onKeyDown, className: (0, classnames_1.default)(TimeInput_module_scss_1.default.input, TimeInput_module_scss_1.default.minute), invalidClassName: TimeInput_module_scss_1.default.invalid, disabled: otherProps.disabled, readOnly: otherProps.readOnly, required: otherProps.required, autoFocus: otherProps.autoFocus, inputRef: otherProps.inputRef, nextInputRef: otherProps.nextInputRef, nextButtonRef: otherProps.nextButtonRef, ariaLabel: otherProps.ariaLabel, isInvalid: isInvalid }));
 }
 function SecondInput(_a) {
-    var { hour, maxTime, minTime, minute, showLeadingZeros = true, value, isInvalid = false, emptyCharacter = "-", onBeep } = _a, otherProps = __rest(_a, ["hour", "maxTime", "minTime", "minute", "showLeadingZeros", "value", "isInvalid", "emptyCharacter", "onBeep"]);
+    var { hour, maxTime, minTime, minute, showLeadingZeros = true, value, isInvalid = false, emptyCharacter = "-" } = _a, otherProps = __rest(_a, ["hour", "maxTime", "minTime", "minute", "showLeadingZeros", "value", "isInvalid", "emptyCharacter"]);
     function isSameMinute(date) {
         return hour === (0, utils_1.getHours)(date).toString() && minute === (0, utils_1.getMinutes)(date).toString();
     }
     const maxSecond = (0, utils_1.safeMin)(59, maxTime && isSameMinute(maxTime) && (0, utils_1.getSeconds)(maxTime));
     const minSecond = (0, utils_1.safeMax)(0, minTime && isSameMinute(minTime) && (0, utils_1.getSeconds)(minTime));
-    return ((0, jsx_runtime_1.jsx)(PartialInput_1.PartialInput, { max: maxSecond, min: minSecond, name: "second", value: value, validateFn: isMinuteOrSecondInvalid, onBeep: onBeep, emptyCharacter: emptyCharacter, placeholderLength: 2, maxLength: 2, onChange: otherProps.onChange, onBlur: (direction, event) => {
+    return ((0, jsx_runtime_1.jsx)(PartialInput_1.PartialInput, { "data-part-id": PART_SECOND, max: maxSecond, min: minSecond, name: "second", value: value, validateFn: isMinuteOrSecondInvalid, emptyCharacter: emptyCharacter, placeholderLength: 2, maxLength: 2, onChange: otherProps.onChange, onBlur: (direction, event) => {
             // PartialInput provides direction, but the current onBlur expects just the event
             if (otherProps.onBlur) {
                 otherProps.onBlur(event);
             }
-        }, onKeyDown: otherProps.onKeyDown, className: (0, classnames_1.default)((0, parts_1.partClassName)(PART_SECOND), TimeInput_module_scss_1.default.input, TimeInput_module_scss_1.default.second), invalidClassName: TimeInput_module_scss_1.default.invalid, disabled: otherProps.disabled, readOnly: otherProps.readOnly, required: otherProps.required, autoFocus: otherProps.autoFocus, inputRef: otherProps.inputRef, nextInputRef: otherProps.nextInputRef, nextButtonRef: otherProps.nextButtonRef, ariaLabel: otherProps.ariaLabel, isInvalid: isInvalid }));
+        }, onKeyDown: otherProps.onKeyDown, className: (0, classnames_1.default)(TimeInput_module_scss_1.default.input, TimeInput_module_scss_1.default.second), invalidClassName: TimeInput_module_scss_1.default.invalid, disabled: otherProps.disabled, readOnly: otherProps.readOnly, required: otherProps.required, autoFocus: otherProps.autoFocus, inputRef: otherProps.inputRef, nextInputRef: otherProps.nextInputRef, nextButtonRef: otherProps.nextButtonRef, ariaLabel: otherProps.ariaLabel, isInvalid: isInvalid }));
 }
 // Utility function to parse time string into components
-function parseTimeString(timeString, targetIs12Hour = false) {
+function parseTimeString(timeValue, targetIs12Hour = false) {
+    // Handle non-string values gracefully
+    if (timeValue == null || timeValue === undefined) {
+        return {
+            amPm: null,
+            hour: "",
+            minute: "",
+            second: "",
+        };
+    }
+    // If not a string, return empty values for type safety
+    if (typeof timeValue !== "string") {
+        return {
+            amPm: null,
+            hour: "",
+            minute: "",
+            second: "",
+        };
+    }
+    const timeString = timeValue;
     const normalizedTimeString = timeString.toLowerCase();
     // Check if the time string contains AM/PM
     const hasAmPm = normalizedTimeString.includes("am") || normalizedTimeString.includes("pm");
     const isAmPmPm = normalizedTimeString.includes("pm");
     // Extract just the time part (remove AM/PM suffix)
     const timePart = normalizedTimeString.replace(/\s*(am|pm)\s*$/i, "").trim();
-    const parsedHour = (0, utils_1.getHours)(timePart);
-    const parsedMinute = (0, utils_1.getMinutes)(timePart);
-    const parsedSecond = (0, utils_1.getSeconds)(timePart);
+    let parsedHour = (0, utils_1.getHours)(timePart);
+    let parsedMinute = (0, utils_1.getMinutes)(timePart);
+    let parsedSecond = (0, utils_1.getSeconds)(timePart);
+    // If parsing with the current format fails (all zeros), try ISO time format
+    if (parsedHour === 0 &&
+        parsedMinute === 0 &&
+        parsedSecond === 0 &&
+        timePart !== "00:00:00" &&
+        timePart !== "00:00") {
+        try {
+            // Try parsing as ISO time format using Date constructor
+            const isoDate = new Date(`1970-01-01T${timePart}`);
+            if (!isNaN(isoDate.getTime())) {
+                parsedHour = isoDate.getHours();
+                parsedMinute = isoDate.getMinutes();
+                parsedSecond = isoDate.getSeconds();
+            }
+        }
+        catch (_a) {
+            // If ISO parsing fails, keep the original parsed values (zeros)
+        }
+    }
     // Set AM/PM based on the actual string content or convert from 24-hour
     let amPmValue = null;
     let displayHour = parsedHour;