@react-fabric/form 1.0.0-beta.9 → 1.0.1

package/dist/esm/input/File.js

@@ -1,71 +1,72 @@
 'use client';
 
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import { Icon, CoreIcons } from '@react-fabric/core';
-import { isArray, mergeRefs, isEmpty, FileUtil, Format } from '@react-fabric/utilities';
-import classNames from 'classnames';
-import { useRef, useState, useDeferredValue, useMemo, useEffect, useCallback, Fragment } from 'react';
+import { useControlledValue, Icon } from '@react-fabric/core';
+import { mergeRefs, cn, isArray, FileUtil, Format, isEmpty } from '@react-fabric/utilities';
+import { useRef, useState, useId, useCallback, Fragment, useEffect } from 'react';
 import { InputWrapper } from '../internal/InputWrapper.js';
-import { handleEnter } from '../utils/eventHandlers.js';
-import classes from './File.module.css';
+import { useHandleEnter } from '../utils/eventHandlers.js';
+import { getWrapperProps } from '../utils/getProps.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
-var _excluded = ["ref", "value", "invalid", "readOnly", "disabled", "required", "placeholder", "autoFocus", "error", "name", "accept", "showList", "multiple", "onChange", "onEnterPressed"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var FileExists = function FileExists(prop) {
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function FileExists(prop) {
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     kill = _useState2[0],
     setKill = _useState2[1];
   useEffect(function () {
-    setTimeout(function () {
+    var tmr = setTimeout(function () {
       setKill(true);
     }, 2000);
-  });
+    return function () {
+      clearTimeout(tmr);
+    };
+  }, []);
   return kill ? null : /*#__PURE__*/jsxs("div", {
     className: "bg-danger-500 text-white px-2 rounded text-xs",
     children: ["File [", prop.name, "] already added to list"]
   });
-};
-var FileInput = function FileInput(_ref) {
-  var _actualValue$map;
-  var ref = _ref.ref,
-    value = _ref.value,
-    invalid = _ref.invalid,
-    readOnly = _ref.readOnly,
-    disabled = _ref.disabled,
-    required = _ref.required,
-    placeholder = _ref.placeholder,
-    autoFocus = _ref.autoFocus,
-    error = _ref.error,
-    name = _ref.name,
-    accept = _ref.accept,
-    _ref$showList = _ref.showList,
-    showList = _ref$showList === void 0 ? true : _ref$showList,
-    multiple = _ref.multiple,
-    onChange = _ref.onChange,
-    onEnterPressed = _ref.onEnterPressed,
-    rest = _objectWithoutProperties(_ref, _excluded);
+}
+
+/**
+ * File input component that allows users to select files from their system.
+ * It supports multiple file selection and displays a list of selected files.
+ * The component also provides functionality to remove files from the list.
+ * It handles file changes, invalid states, and read-only or disabled states.
+ */
+function FileInput(props) {
+  var _currentValue$map;
+  var ref = props.ref,
+    value = props.value,
+    invalid = props.invalid,
+    readOnly = props.readOnly,
+    disabled = props.disabled,
+    placeholder = props.placeholder,
+    autoFocus = props.autoFocus,
+    error = props.error,
+    name = props.name,
+    accept = props.accept,
+    _props$showList = props.showList,
+    showList = _props$showList === void 0 ? true : _props$showList,
+    multiple = props.multiple,
+    onChange = props.onChange,
+    onEnterPressed = props.onEnterPressed;
   var listRef = useRef([]);
   var inputRef = useRef(null);
-  var _useState3 = useState([]),
+  var _useState3 = useState(function () {
+      return [];
+    }),
     _useState4 = _slicedToArray(_useState3, 2),
     exists = _useState4[0],
     setExists = _useState4[1];
-  var _useState5 = useState(),
-    _useState6 = _slicedToArray(_useState5, 2),
-    actualValue = _useState6[0],
-    setActualValue = _useState6[1];
-  var deferred = useDeferredValue(value);
-  var handleEnterPressed = useMemo(function () {
-    return handleEnter(onEnterPressed);
-  }, [onEnterPressed]);
-  useEffect(function () {
-    setActualValue(deferred);
-  }, [deferred]);
+  var id = useId();
+  var _useControlledValue = useControlledValue(value, null),
+    currentValue = _useControlledValue.currentValue,
+    updateValue = _useControlledValue.updateValue;
+  var handleEnterPressed = useHandleEnter(onEnterPressed);
   var handleChange = useCallback(function (e) {
     setExists([]);
     if (multiple) {
@@ -73,73 +74,77 @@ var FileInput = function FileInput(_ref) {
         if (showList) {
           var _exists = [];
           Array.from(e.target.files).forEach(function (file) {
-            listRef.current.find(function (ef) {
+            if (listRef.current.find(function (ef) {
               return ef.name === file.name;
-            }) ? _exists.push(file.name) : listRef.current.push(file);
+            })) _exists.push(file.name);else listRef.current.push(file);
           });
-          setActualValue(listRef.current.slice());
+          updateValue(listRef.current.slice());
           setExists(_exists);
         }
         e.target.value = "";
         onChange === null || onChange === void 0 || onChange(listRef.current);
       } else {
         listRef.current = [];
-        setActualValue(listRef.current);
+        updateValue(listRef.current);
         onChange === null || onChange === void 0 || onChange(listRef.current);
       }
     } else {
       var _e$target$files, _e$target$files$item, _e$target$files2;
-      setActualValue(e === null || e === void 0 || (_e$target$files = e.target.files) === null || _e$target$files === void 0 ? void 0 : _e$target$files.item(0));
+      updateValue(e === null || e === void 0 || (_e$target$files = e.target.files) === null || _e$target$files === void 0 ? void 0 : _e$target$files.item(0));
       onChange === null || onChange === void 0 || onChange((_e$target$files$item = e === null || e === void 0 || (_e$target$files2 = e.target.files) === null || _e$target$files2 === void 0 ? void 0 : _e$target$files2.item(0)) !== null && _e$target$files$item !== void 0 ? _e$target$files$item : undefined);
       if (!e && inputRef.current) inputRef.current.value = "";
     }
-  }, [onChange, multiple, showList]);
+  }, [multiple, showList, onChange, updateValue]);
   var removeFile = useCallback(function (idx) {
     listRef.current.splice(idx, 1);
-    setActualValue(listRef.current);
+    updateValue(listRef.current);
     onChange === null || onChange === void 0 || onChange(listRef.current);
-  }, [onChange]);
+  }, [onChange, updateValue]);
   return /*#__PURE__*/jsx(InputWrapper, _objectSpread(_objectSpread({
-    showClear: !isEmpty(actualValue),
-    onClear: handleChange,
-    invalid: invalid,
-    readOnly: readOnly,
-    disabled: disabled,
-    required: required,
-    error: error,
+    id: id,
+    showClear: !isEmpty(currentValue) && !disabled && !readOnly,
+    onClear: handleChange
+  }, getWrapperProps(props)), {}, {
     listing: showList && /*#__PURE__*/jsxs(Fragment, {
-      children: [isArray(actualValue) && (actualValue === null || actualValue === void 0 || (_actualValue$map = actualValue.map) === null || _actualValue$map === void 0 ? void 0 : _actualValue$map.call(actualValue, function (file, idx) {
-        return /*#__PURE__*/jsxs("div", {
-          className: "flex gap-1 items-center text-sm text-dimmed py-1 px-2",
-          children: [/*#__PURE__*/jsxs("div", {
-            className: "flex-1 truncate",
-            children: [/*#__PURE__*/jsx("div", {
-              className: "font-medium",
-              children: file.name
+      children: [isArray(currentValue) && (currentValue === null || currentValue === void 0 || (_currentValue$map = currentValue.map) === null || _currentValue$map === void 0 ? void 0 : _currentValue$map.call(currentValue, function (file, idx) {
+        return (
+          /*#__PURE__*/
+          // eslint-disable-next-line @eslint-react/no-array-index-key
+          jsxs("div", {
+            className: "flex gap-1 items-center text-sm text-dimmed py-1 px-2",
+            children: [/*#__PURE__*/jsxs("div", {
+              className: "flex-1 truncate",
+              children: [/*#__PURE__*/jsx("div", {
+                className: "font-medium",
+                children: file.name
+              }), /*#__PURE__*/jsx("span", {
+                className: "text-xs",
+                children: FileUtil.mime(file.type)
+              })]
             }), /*#__PURE__*/jsx("span", {
-              className: "text-xs",
-              children: FileUtil.mime(file.type)
+              className: "flex-content text-end w-24",
+              children: Format.bytes(file.size)
+            }), /*#__PURE__*/jsx("button", {
+              type: "button",
+              className: cn("size-fit leading-0 cursor-pointer"),
+              onClick: function onClick() {
+                removeFile(idx);
+              },
+              children: /*#__PURE__*/jsx(Icon, {
+                className: "cursor-pointer opacity-30 hover:opacity-80",
+                icon: "icon-[mdi--close]"
+              })
             })]
-          }), /*#__PURE__*/jsx("span", {
-            className: "flex-content text-end w-24",
-            children: Format.bytes(file.size)
-          }), /*#__PURE__*/jsx(Icon, {
-            className: "cursor-pointer opacity-30 hover:opacity-80",
-            icon: CoreIcons.close,
-            onClick: function onClick() {
-              removeFile(idx);
-            }
-          })]
-        }, idx);
+          }, idx)
+        );
       })), exists.map(function (name) {
         return /*#__PURE__*/jsx(FileExists, {
           name: name
         }, new Date().getTime());
       })]
-    })
-  }, rest), {}, {
+    }),
     children: /*#__PURE__*/jsx("input", {
-      className: classNames("appearance-none bg-transparent py-1 px-2 flex-1 border-none outline-none ring-0", classes.fileInput, isArray(actualValue) && (actualValue === null || actualValue === void 0 ? void 0 : actualValue.length) && "text-[var(--fabric-bg)]"),
+      className: cn("fabric-fileInput", "appearance-none bg-transparent py-1 px-2 flex-1 border-none outline-none ring-0 peer", isArray(currentValue) && (currentValue === null || currentValue === void 0 ? void 0 : currentValue.length) && "text-(--fabric-bg)"),
       "aria-invalid": invalid,
       "aria-disabled": disabled,
       "aria-readonly": readOnly,
@@ -160,6 +165,6 @@ var FileInput = function FileInput(_ref) {
       onKeyDown: handleEnterPressed
     })
   }));
-};
+}
 
 export { FileInput };

package/dist/esm/input/Hidden.js

@@ -1,6 +1,7 @@
 'use client';
 
-import { useEffect, Fragment } from 'react';
+import { isEqual } from '@react-fabric/utilities';
+import { useRef, useDeferredValue, useEffect, Fragment } from 'react';
 import { ErrorIcon } from '../internal/ErrorIcon.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
@@ -27,28 +28,41 @@ import { jsxs, jsx } from 'react/jsx-runtime';
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-var HiddenInput = function HiddenInput(_ref) {
-  var hiddenValue = _ref.hiddenValue,
-    onChange = _ref.onChange,
-    invalid = _ref.invalid,
-    error = _ref.error,
-    _ref$value = _ref.value,
-    value = _ref$value === void 0 ? "" : _ref$value,
-    name = _ref.name;
+/**
+ * Hidden input component to handle hidden values in forms.
+ * It will trigger the onChange handler with the hidden value after a short delay.
+ * This is useful for cases where you need to update the form state without user interaction.
+ */
+function HiddenInput(props) {
+  var _props$invalid = props.invalid,
+    invalid = _props$invalid === void 0 ? false : _props$invalid,
+    _props$error = props.error,
+    error = _props$error === void 0 ? "" : _props$error,
+    onChange = props.onChange,
+    value = props.value,
+    hiddenValue = props.hiddenValue,
+    name = props.name;
+  var valueRef = useRef(value);
+  var deferred = useDeferredValue(hiddenValue);
+  useEffect(function () {
+    valueRef.current = value;
+  }, [value]);
   useEffect(function () {
-    onChange === null || onChange === void 0 || onChange(hiddenValue);
-  }, [hiddenValue]);
+    if (!isEqual(valueRef.current, deferred)) {
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+      onChange === null || onChange === void 0 || onChange(deferred);
+    }
+  }, [deferred, onChange]);
   return /*#__PURE__*/jsxs(Fragment, {
     children: [/*#__PURE__*/jsx("input", {
       type: "hidden",
-      onChange: onChange,
-      value: value,
+      value: value !== null && value !== void 0 ? value : "",
       name: name
     }), /*#__PURE__*/jsx(ErrorIcon, {
       invalid: invalid,
       error: error
     })]
   });
-};
+}
 
 export { HiddenInput };

package/dist/esm/input/Input.js

@@ -1,60 +1,59 @@
 'use client';
 
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import { useState, useDeferredValue, useMemo, useEffect, useCallback } from 'react';
+import { useControlledValue } from '@react-fabric/core';
+import { cn } from '@react-fabric/utilities';
+import { useId, useCallback } from 'react';
 import { InputWrapper } from '../internal/InputWrapper.js';
-import { handleEnter } from '../utils/eventHandlers.js';
-import '@react-fabric/utilities';
+import { useHandleEnter } from '../utils/eventHandlers.js';
+import { getWrapperProps } from '../utils/getProps.js';
 import { jsx } from 'react/jsx-runtime';
 
-var _excluded = ["ref", "name", "value", "invalid", "readOnly", "disabled", "required", "placeholder", "autoFocus", "error", "type", "onChange", "onEnterPressed"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var Input = function Input(_ref) {
-  var ref = _ref.ref,
-    name = _ref.name,
-    value = _ref.value,
-    invalid = _ref.invalid,
-    readOnly = _ref.readOnly,
-    disabled = _ref.disabled,
-    required = _ref.required,
-    placeholder = _ref.placeholder,
-    autoFocus = _ref.autoFocus,
-    error = _ref.error,
-    _ref$type = _ref.type,
-    type = _ref$type === void 0 ? "text" : _ref$type,
-    onChange = _ref.onChange,
-    onEnterPressed = _ref.onEnterPressed,
-    rest = _objectWithoutProperties(_ref, _excluded);
-  var _useState = useState(""),
-    _useState2 = _slicedToArray(_useState, 2),
-    actualValue = _useState2[0],
-    setActualValue = _useState2[1];
-  var deferred = useDeferredValue(value);
-  var handleEnterPressed = useMemo(function () {
-    return handleEnter(onEnterPressed);
-  }, [onEnterPressed]);
-  useEffect(function () {
-    setActualValue(deferred !== null && deferred !== void 0 ? deferred : "");
-  }, [deferred]);
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+/**
+ * This component is used to render a text input field with various properties such as name, value, invalid state, read-only, disabled, required, placeholder, autoFocus, error message, monospace font option, and event handlers for blur, focus, change, and enter key press.
+ * It also includes a clear button that appears when there is a value in the input field, allowing users to clear the input easily.
+ * The component uses a wrapper to handle the clear button and styling, and it supports deferred value updates to optimize performance.
+ */
+function Input(props) {
+  var value = props.value,
+    defaultValue = props.defaultValue,
+    onEnterPressed = props.onEnterPressed,
+    onChange = props.onChange,
+    onBlur = props.onBlur,
+    onFocus = props.onFocus,
+    disabled = props.disabled,
+    readOnly = props.readOnly,
+    invalid = props.invalid,
+    error = props.error,
+    placeholder = props.placeholder,
+    name = props.name,
+    type = props.type,
+    autoFocus = props.autoFocus,
+    allowClear = props.allowClear,
+    _props$autoComplete = props.autoComplete,
+    autoComplete = _props$autoComplete === void 0 ? "off" : _props$autoComplete,
+    ref = props.ref;
+  var id = useId();
+  var _useControlledValue = useControlledValue(value, defaultValue),
+    currentValue = _useControlledValue.currentValue,
+    updateValue = _useControlledValue.updateValue;
+  var handleEnterPressed = useHandleEnter(onEnterPressed);
   var handleChange = useCallback(function (e) {
-    var value = e === null || e === void 0 ? void 0 : e.target.value;
-    setActualValue(value !== null && value !== void 0 ? value : "");
-    onChange === null || onChange === void 0 || onChange(value !== null && value !== void 0 ? value : undefined);
-  }, [onchange]);
+    var _e$target$value;
+    var value = (_e$target$value = e === null || e === void 0 ? void 0 : e.target.value) !== null && _e$target$value !== void 0 ? _e$target$value : defaultValue;
+    updateValue(value);
+    onChange === null || onChange === void 0 || onChange(value);
+  }, [defaultValue, updateValue, onChange]);
   return /*#__PURE__*/jsx(InputWrapper, _objectSpread(_objectSpread({
-    showClear: !!actualValue,
-    onClear: handleChange,
-    invalid: invalid,
-    readOnly: readOnly,
-    disabled: disabled,
-    required: required,
-    error: error
-  }, rest), {}, {
+    id: id,
+    showClear: allowClear && (currentValue !== null && currentValue !== void 0 ? currentValue : "") !== (defaultValue !== null && defaultValue !== void 0 ? defaultValue : "") && !disabled && !readOnly,
+    onClear: handleChange
+  }, getWrapperProps(props)), {}, {
     children: /*#__PURE__*/jsx("input", {
-      className: "appearance-none bg-transparent py-1 px-2 flex-1 border-none outline-none ring-0 peer",
+      id: id,
+      className: cn("appearance-none bg-transparent py-1 px-4 not-first:ps-2 not-last:pe-2 flex-1 border-none outline-none ring-0 peer"),
       "aria-invalid": invalid,
       "aria-disabled": disabled,
       "aria-readonly": readOnly,
@@ -67,13 +66,15 @@ var Input = function Input(_ref) {
       size: 1,
       type: type,
       ref: ref,
-      autoComplete: "off",
+      autoComplete: autoComplete,
       autoFocus: autoFocus,
-      value: actualValue,
+      value: currentValue !== null && currentValue !== void 0 ? currentValue : "",
+      onBlur: onBlur,
+      onFocus: onFocus,
       onChange: handleChange,
       onKeyDown: handleEnterPressed
     })
   }));
-};
+}
 
 export { Input };

package/dist/esm/input/Number.js

@@ -1,59 +1,59 @@
 'use client';
 
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import { useState, useDeferredValue, useMemo, useEffect, useCallback } from 'react';
+import { useControlledValue } from '@react-fabric/core';
+import { useId, useCallback } from 'react';
 import { InputWrapper } from '../internal/InputWrapper.js';
-import { handleEnter } from '../utils/eventHandlers.js';
+import { useHandleEnter } from '../utils/eventHandlers.js';
 import '@react-fabric/utilities';
+import { getWrapperProps } from '../utils/getProps.js';
 import { jsx } from 'react/jsx-runtime';
 
-var _excluded = ["ref", "value", "invalid", "readOnly", "disabled", "required", "placeholder", "autoFocus", "name", "min", "max", "step", "onChange", "onEnterPressed"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var Number = function Number(_ref) {
-  var ref = _ref.ref,
-    value = _ref.value,
-    invalid = _ref.invalid,
-    readOnly = _ref.readOnly,
-    disabled = _ref.disabled,
-    required = _ref.required,
-    placeholder = _ref.placeholder,
-    autoFocus = _ref.autoFocus,
-    name = _ref.name,
-    min = _ref.min,
-    max = _ref.max,
-    step = _ref.step,
-    onChange = _ref.onChange,
-    onEnterPressed = _ref.onEnterPressed,
-    rest = _objectWithoutProperties(_ref, _excluded);
-  var _useState = useState(""),
-    _useState2 = _slicedToArray(_useState, 2),
-    actualValue = _useState2[0],
-    setActualValue = _useState2[1];
-  var deferred = useDeferredValue(value);
-  var handleEnterPressed = useMemo(function () {
-    return handleEnter(onEnterPressed);
-  }, [onEnterPressed]);
-  useEffect(function () {
-    setActualValue(deferred !== null && deferred !== void 0 ? deferred : "");
-  }, [deferred]);
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+/**
+ * This component allows users to input numeric values with optional minimum, maximum, and step constraints.
+ * It provides a clear interface for entering numbers, with support for validation and accessibility features.
+ * It also includes a clear button to reset the input value.
+ */
+function Number(props) {
+  var value = props.value,
+    defaultValue = props.defaultValue,
+    onEnterPressed = props.onEnterPressed,
+    onChange = props.onChange,
+    onBlur = props.onBlur,
+    onFocus = props.onFocus,
+    disabled = props.disabled,
+    readOnly = props.readOnly,
+    invalid = props.invalid,
+    min = props.min,
+    max = props.max,
+    step = props.step,
+    placeholder = props.placeholder,
+    name = props.name,
+    autoFocus = props.autoFocus,
+    allowClear = props.allowClear,
+    ref = props.ref;
+  var id = useId();
+  var _useControlledValue = useControlledValue(value, defaultValue),
+    currentValue = _useControlledValue.currentValue,
+    updateValue = _useControlledValue.updateValue;
+  var handleEnterPressed = useHandleEnter(onEnterPressed);
   var handleChange = useCallback(function (e) {
-    var number = e === null || e === void 0 ? void 0 : e.target.valueAsNumber;
-    setActualValue(number !== null && number !== void 0 ? number : "");
-    onChange === null || onChange === void 0 || onChange(number !== null && number !== void 0 ? number : undefined);
-  }, [onChange]);
+    var _e$target$valueAsNumb;
+    var number = (_e$target$valueAsNumb = e === null || e === void 0 ? void 0 : e.target.valueAsNumber) !== null && _e$target$valueAsNumb !== void 0 ? _e$target$valueAsNumb : defaultValue;
+    updateValue(number);
+    onChange === null || onChange === void 0 || onChange(number);
+  }, [defaultValue, updateValue, onChange]);
   return /*#__PURE__*/jsx(InputWrapper, _objectSpread(_objectSpread({
-    showClear: !!actualValue,
+    id: id,
+    showClear: allowClear && (currentValue !== null && currentValue !== void 0 ? currentValue : "") !== (defaultValue !== null && defaultValue !== void 0 ? defaultValue : "") && !disabled && !readOnly,
     onClear: handleChange,
-    invalid: invalid,
-    readOnly: readOnly,
-    disabled: disabled,
-    required: required
-  }, rest), {}, {
+    hasStepper: true
+  }, getWrapperProps(props)), {}, {
     children: /*#__PURE__*/jsx("input", {
-      className: "appearance-none bg-transparent py-1 px-2 flex-1 border-none outline-none ring-0",
+      id: id,
+      className: "appearance-none bg-transparent py-1 ps-4 pe-2 not-first:ps-2 flex-1 border-none outline-none ring-0 peer",
       "aria-invalid": invalid,
       "aria-disabled": disabled,
       "aria-readonly": readOnly,
@@ -70,11 +70,13 @@ var Number = function Number(_ref) {
       ref: ref,
       autoComplete: "off",
       autoFocus: autoFocus,
-      value: actualValue,
+      value: currentValue !== null && currentValue !== void 0 ? currentValue : "",
+      onBlur: onBlur,
+      onFocus: onFocus,
       onChange: handleChange,
       onKeyDown: handleEnterPressed
     })
   }));
-};
+}
 
 export { Number };