@react-fabric/form 1.0.0-beta.41 → 1.0.0-beta.42

package/dist/cjs/input/ColorInput.js

@@ -11,7 +11,7 @@ var react = require('react');
 var ColorPicker = require('./ColorPicker.js');
 var jsxRuntime = require('react/jsx-runtime');
 
-var _excluded = ["ref", "required", "disabled", "allowClear", "invalid", "error", "value", "showPicker", "defaultColor", "decorateEnd", "decorateStart", "onChange", "noOutline"];
+var _excluded = ["ref", "required", "disabled", "allowClear", "invalid", "error", "value", "showPicker", "defaultColor", "decorateEnd", "decorateStart", "onBlur", "onFocus", "onChange", "noOutline"];
 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 ColorInput = function ColorInput(_ref) {
@@ -27,6 +27,8 @@ var ColorInput = function ColorInput(_ref) {
     defaultColor = _ref$defaultColor === void 0 ? "" : _ref$defaultColor,
     decorateEnd = _ref.decorateEnd,
     decorateStart = _ref.decorateStart,
+    onBlur = _ref.onBlur,
+    onFocus = _ref.onFocus,
     onChange = _ref.onChange,
     noOutline = _ref.noOutline,
     rest = _objectWithoutProperties(_ref, _excluded);
@@ -85,7 +87,10 @@ var ColorInput = function ColorInput(_ref) {
       "data-ref": "button",
       className: "flex-1 flex items-center",
       ref: refs.setReference
-    }, getReferenceProps()), {}, {
+    }, getReferenceProps({
+      onBlur: onBlur,
+      onFocus: onFocus
+    })), {}, {
       "data-inner-clickable": "true",
       "data-dropdown-open": isOpen ? true : undefined,
       children: /*#__PURE__*/jsxRuntime.jsx("div", {

package/dist/cjs/input/DateInput.js

@@ -12,7 +12,7 @@ var eventHandlers = require('../utils/eventHandlers.js');
 var classNames = require('classnames');
 var jsxRuntime = require('react/jsx-runtime');
 
-var _excluded = ["ref", "name", "value", "invalid", "readOnly", "disabled", "required", "placeholder", "autoFocus", "error", "type", "onChange", "onEnterPressed", "format", "min", "max"];
+var _excluded = ["ref", "name", "value", "invalid", "readOnly", "disabled", "required", "placeholder", "autoFocus", "error", "type", "onBlur", "onFocus", "onChange", "onEnterPressed", "format", "min", "max"];
 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 DateInput = function DateInput(_ref) {
@@ -28,6 +28,8 @@ var DateInput = function DateInput(_ref) {
     error = _ref.error,
     _ref$type = _ref.type,
     type = _ref$type === void 0 ? "date" : _ref$type,
+    onBlur = _ref.onBlur,
+    onFocus = _ref.onFocus,
     onChange = _ref.onChange,
     onEnterPressed = _ref.onEnterPressed;
     _ref.format;
@@ -153,7 +155,10 @@ var DateInput = function DateInput(_ref) {
       autoFocus: autoFocus,
       value: inputValue,
       ref: utilities.mergeRefs(ref, refs.setReference)
-    }, getReferenceProps()), {}, {
+    }, getReferenceProps({
+      onBlur: onBlur,
+      onFocus: onFocus
+    })), {}, {
       onChange: handleChange,
       onKeyDown: handleEnterPressed
     })), isOpen && /*#__PURE__*/jsxRuntime.jsxs("div", _objectSpread(_objectSpread({

package/dist/cjs/input/Input.js

@@ -9,7 +9,7 @@ var eventHandlers = require('../utils/eventHandlers.js');
 require('@react-fabric/utilities');
 var jsxRuntime = require('react/jsx-runtime');
 
-var _excluded = ["ref", "name", "value", "invalid", "readOnly", "disabled", "required", "placeholder", "autoFocus", "error", "type", "onChange", "onEnterPressed"];
+var _excluded = ["ref", "name", "value", "invalid", "readOnly", "disabled", "required", "placeholder", "autoFocus", "error", "type", "onBlur", "onFocus", "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) {
@@ -25,6 +25,8 @@ var Input = function Input(_ref) {
     error = _ref.error,
     _ref$type = _ref.type,
     type = _ref$type === void 0 ? "text" : _ref$type,
+    onBlur = _ref.onBlur,
+    onFocus = _ref.onFocus,
     onChange = _ref.onChange,
     onEnterPressed = _ref.onEnterPressed,
     rest = _objectWithoutProperties(_ref, _excluded);
@@ -70,6 +72,8 @@ var Input = function Input(_ref) {
       autoComplete: "off",
       autoFocus: autoFocus,
       value: actualValue,
+      onBlur: onBlur,
+      onFocus: onFocus,
       onChange: handleChange,
       onKeyDown: handleEnterPressed
     })

package/dist/cjs/input/Number.js

@@ -9,7 +9,7 @@ var eventHandlers = require('../utils/eventHandlers.js');
 require('@react-fabric/utilities');
 var jsxRuntime = require('react/jsx-runtime');
 
-var _excluded = ["ref", "value", "invalid", "readOnly", "disabled", "required", "placeholder", "autoFocus", "name", "min", "max", "step", "onChange", "onEnterPressed"];
+var _excluded = ["ref", "value", "invalid", "readOnly", "disabled", "required", "placeholder", "autoFocus", "name", "min", "max", "step", "onBlur", "onFocus", "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) {
@@ -25,6 +25,8 @@ var Number = function Number(_ref) {
     min = _ref.min,
     max = _ref.max,
     step = _ref.step,
+    onBlur = _ref.onBlur,
+    onFocus = _ref.onFocus,
     onChange = _ref.onChange,
     onEnterPressed = _ref.onEnterPressed,
     rest = _objectWithoutProperties(_ref, _excluded);
@@ -71,6 +73,8 @@ var Number = function Number(_ref) {
       autoComplete: "off",
       autoFocus: autoFocus,
       value: actualValue,
+      onBlur: onBlur,
+      onFocus: onFocus,
       onChange: handleChange,
       onKeyDown: handleEnterPressed
     })

package/dist/cjs/input/Password.js

@@ -12,7 +12,7 @@ var eventHandlers = require('../utils/eventHandlers.js');
 require('@react-fabric/utilities');
 var jsxRuntime = require('react/jsx-runtime');
 
-var _excluded = ["ref", "value", "name", "strength", "invalid", "readOnly", "disabled", "required", "placeholder", "autoFocus", "showToggle", "onChange", "onEnterPressed"];
+var _excluded = ["ref", "value", "name", "strength", "invalid", "readOnly", "disabled", "required", "placeholder", "autoFocus", "showToggle", "onBlur", "onFocus", "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 Password = function Password(_ref) {
@@ -27,6 +27,8 @@ var Password = function Password(_ref) {
     placeholder = _ref.placeholder,
     autoFocus = _ref.autoFocus,
     showToggle = _ref.showToggle,
+    onBlur = _ref.onBlur,
+    onFocus = _ref.onFocus,
     onChange = _ref.onChange,
     onEnterPressed = _ref.onEnterPressed,
     rest = _objectWithoutProperties(_ref, _excluded);
@@ -90,6 +92,8 @@ var Password = function Password(_ref) {
       autoComplete: "off",
       autoFocus: autoFocus,
       value: actualValue,
+      onBlur: onBlur,
+      onFocus: onFocus,
       onChange: handleChange,
       onKeyDown: handleEnterPressed
     }), !!strength && /*#__PURE__*/jsxRuntime.jsx("div", {

package/dist/cjs/input/Search.js

@@ -10,7 +10,7 @@ var eventHandlers = require('../utils/eventHandlers.js');
 require('@react-fabric/utilities');
 var jsxRuntime = require('react/jsx-runtime');
 
-var _excluded = ["ref", "value", "name", "invalid", "readOnly", "disabled", "required", "searching", "placeholder", "autoFocus", "allowClear", "searchOnChange", "decorateEnd", "decorateStart", "onSearch", "onChange", "onEnterPressed"];
+var _excluded = ["ref", "value", "name", "invalid", "readOnly", "disabled", "required", "searching", "placeholder", "autoFocus", "allowClear", "searchOnChange", "decorateEnd", "decorateStart", "onBlur", "onFocus", "onSearch", "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 Search = function Search(_ref) {
@@ -30,6 +30,8 @@ var Search = function Search(_ref) {
     searchOnChange = _ref$searchOnChange === void 0 ? true : _ref$searchOnChange,
     decorateEnd = _ref.decorateEnd,
     decorateStart = _ref.decorateStart,
+    onBlur = _ref.onBlur,
+    onFocus = _ref.onFocus,
     onSearch = _ref.onSearch,
     onChange = _ref.onChange;
     _ref.onEnterPressed;
@@ -100,6 +102,8 @@ var Search = function Search(_ref) {
       autoComplete: "off",
       autoFocus: autoFocus,
       value: actualValue,
+      onBlur: onBlur,
+      onFocus: onFocus,
       onChange: handleChange,
       onKeyDown: handleEnterPressed
     })

package/dist/cjs/input/Textarea.js

@@ -9,7 +9,7 @@ var eventHandlers = require('../utils/eventHandlers.js');
 require('@react-fabric/utilities');
 var jsxRuntime = require('react/jsx-runtime');
 
-var _excluded = ["ref", "value", "name", "invalid", "readOnly", "disabled", "required", "placeholder", "autoFocus", "rows", "maxRows", "variableRows", "expandable", "onChange", "onEnterPressed"];
+var _excluded = ["ref", "value", "name", "invalid", "readOnly", "disabled", "required", "placeholder", "autoFocus", "rows", "maxRows", "variableRows", "expandable", "onBlur", "onFocus", "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 Textarea = function Textarea(_ref) {
@@ -28,6 +28,8 @@ var Textarea = function Textarea(_ref) {
     maxRows = _ref$maxRows === void 0 ? 12 : _ref$maxRows,
     variableRows = _ref.variableRows,
     expandable = _ref.expandable,
+    onBlur = _ref.onBlur,
+    onFocus = _ref.onFocus,
     onChange = _ref.onChange,
     onEnterPressed = _ref.onEnterPressed,
     rest = _objectWithoutProperties(_ref, _excluded);
@@ -84,6 +86,8 @@ var Textarea = function Textarea(_ref) {
       autoComplete: "off",
       autoFocus: autoFocus,
       value: actualValue,
+      onBlur: onBlur,
+      onFocus: onFocus,
       onChange: handleChange,
       onKeyDown: eventHandlers.handleEnter(onEnterPressed, {
         preventDefault: !!onEnterPressed

package/dist/esm/input/ColorInput.js

@@ -11,7 +11,7 @@ import { useState, useDeferredValue, useEffect, useCallback, startTransition, us
 import { ColorPicker } from './ColorPicker.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
-var _excluded = ["ref", "required", "disabled", "allowClear", "invalid", "error", "value", "showPicker", "defaultColor", "decorateEnd", "decorateStart", "onChange", "noOutline"];
+var _excluded = ["ref", "required", "disabled", "allowClear", "invalid", "error", "value", "showPicker", "defaultColor", "decorateEnd", "decorateStart", "onBlur", "onFocus", "onChange", "noOutline"];
 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 ColorInput = function ColorInput(_ref) {
@@ -27,6 +27,8 @@ var ColorInput = function ColorInput(_ref) {
     defaultColor = _ref$defaultColor === void 0 ? "" : _ref$defaultColor,
     decorateEnd = _ref.decorateEnd,
     decorateStart = _ref.decorateStart,
+    onBlur = _ref.onBlur,
+    onFocus = _ref.onFocus,
     onChange = _ref.onChange,
     noOutline = _ref.noOutline,
     rest = _objectWithoutProperties(_ref, _excluded);
@@ -85,7 +87,10 @@ var ColorInput = function ColorInput(_ref) {
       "data-ref": "button",
       className: "flex-1 flex items-center",
       ref: refs.setReference
-    }, getReferenceProps()), {}, {
+    }, getReferenceProps({
+      onBlur: onBlur,
+      onFocus: onFocus
+    })), {}, {
       "data-inner-clickable": "true",
       "data-dropdown-open": isOpen ? true : undefined,
       children: /*#__PURE__*/jsx("div", {

package/dist/esm/input/DateInput.js

@@ -12,7 +12,7 @@ import { handleEnter } from '../utils/eventHandlers.js';
 import classNames from 'classnames';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
-var _excluded = ["ref", "name", "value", "invalid", "readOnly", "disabled", "required", "placeholder", "autoFocus", "error", "type", "onChange", "onEnterPressed", "format", "min", "max"];
+var _excluded = ["ref", "name", "value", "invalid", "readOnly", "disabled", "required", "placeholder", "autoFocus", "error", "type", "onBlur", "onFocus", "onChange", "onEnterPressed", "format", "min", "max"];
 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 DateInput = function DateInput(_ref) {
@@ -28,6 +28,8 @@ var DateInput = function DateInput(_ref) {
     error = _ref.error,
     _ref$type = _ref.type,
     type = _ref$type === void 0 ? "date" : _ref$type,
+    onBlur = _ref.onBlur,
+    onFocus = _ref.onFocus,
     onChange = _ref.onChange,
     onEnterPressed = _ref.onEnterPressed;
     _ref.format;
@@ -153,7 +155,10 @@ var DateInput = function DateInput(_ref) {
       autoFocus: autoFocus,
       value: inputValue,
       ref: mergeRefs(ref, refs.setReference)
-    }, getReferenceProps()), {}, {
+    }, getReferenceProps({
+      onBlur: onBlur,
+      onFocus: onFocus
+    })), {}, {
       onChange: handleChange,
       onKeyDown: handleEnterPressed
     })), isOpen && /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread({

package/dist/esm/input/Input.js

@@ -9,7 +9,7 @@ import { handleEnter } from '../utils/eventHandlers.js';
 import '@react-fabric/utilities';
 import { jsx } from 'react/jsx-runtime';
 
-var _excluded = ["ref", "name", "value", "invalid", "readOnly", "disabled", "required", "placeholder", "autoFocus", "error", "type", "onChange", "onEnterPressed"];
+var _excluded = ["ref", "name", "value", "invalid", "readOnly", "disabled", "required", "placeholder", "autoFocus", "error", "type", "onBlur", "onFocus", "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) {
@@ -25,6 +25,8 @@ var Input = function Input(_ref) {
     error = _ref.error,
     _ref$type = _ref.type,
     type = _ref$type === void 0 ? "text" : _ref$type,
+    onBlur = _ref.onBlur,
+    onFocus = _ref.onFocus,
     onChange = _ref.onChange,
     onEnterPressed = _ref.onEnterPressed,
     rest = _objectWithoutProperties(_ref, _excluded);
@@ -70,6 +72,8 @@ var Input = function Input(_ref) {
       autoComplete: "off",
       autoFocus: autoFocus,
       value: actualValue,
+      onBlur: onBlur,
+      onFocus: onFocus,
       onChange: handleChange,
       onKeyDown: handleEnterPressed
     })

package/dist/esm/input/Number.js

@@ -9,7 +9,7 @@ import { handleEnter } from '../utils/eventHandlers.js';
 import '@react-fabric/utilities';
 import { jsx } from 'react/jsx-runtime';
 
-var _excluded = ["ref", "value", "invalid", "readOnly", "disabled", "required", "placeholder", "autoFocus", "name", "min", "max", "step", "onChange", "onEnterPressed"];
+var _excluded = ["ref", "value", "invalid", "readOnly", "disabled", "required", "placeholder", "autoFocus", "name", "min", "max", "step", "onBlur", "onFocus", "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) {
@@ -25,6 +25,8 @@ var Number = function Number(_ref) {
     min = _ref.min,
     max = _ref.max,
     step = _ref.step,
+    onBlur = _ref.onBlur,
+    onFocus = _ref.onFocus,
     onChange = _ref.onChange,
     onEnterPressed = _ref.onEnterPressed,
     rest = _objectWithoutProperties(_ref, _excluded);
@@ -71,6 +73,8 @@ var Number = function Number(_ref) {
       autoComplete: "off",
       autoFocus: autoFocus,
       value: actualValue,
+      onBlur: onBlur,
+      onFocus: onFocus,
       onChange: handleChange,
       onKeyDown: handleEnterPressed
     })

package/dist/esm/input/Password.js

@@ -12,7 +12,7 @@ import { handleEnter } from '../utils/eventHandlers.js';
 import '@react-fabric/utilities';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
-var _excluded = ["ref", "value", "name", "strength", "invalid", "readOnly", "disabled", "required", "placeholder", "autoFocus", "showToggle", "onChange", "onEnterPressed"];
+var _excluded = ["ref", "value", "name", "strength", "invalid", "readOnly", "disabled", "required", "placeholder", "autoFocus", "showToggle", "onBlur", "onFocus", "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 Password = function Password(_ref) {
@@ -27,6 +27,8 @@ var Password = function Password(_ref) {
     placeholder = _ref.placeholder,
     autoFocus = _ref.autoFocus,
     showToggle = _ref.showToggle,
+    onBlur = _ref.onBlur,
+    onFocus = _ref.onFocus,
     onChange = _ref.onChange,
     onEnterPressed = _ref.onEnterPressed,
     rest = _objectWithoutProperties(_ref, _excluded);
@@ -90,6 +92,8 @@ var Password = function Password(_ref) {
       autoComplete: "off",
       autoFocus: autoFocus,
       value: actualValue,
+      onBlur: onBlur,
+      onFocus: onFocus,
       onChange: handleChange,
       onKeyDown: handleEnterPressed
     }), !!strength && /*#__PURE__*/jsx("div", {

package/dist/esm/input/Search.js

@@ -10,7 +10,7 @@ import { handleEnter } from '../utils/eventHandlers.js';
 import '@react-fabric/utilities';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
-var _excluded = ["ref", "value", "name", "invalid", "readOnly", "disabled", "required", "searching", "placeholder", "autoFocus", "allowClear", "searchOnChange", "decorateEnd", "decorateStart", "onSearch", "onChange", "onEnterPressed"];
+var _excluded = ["ref", "value", "name", "invalid", "readOnly", "disabled", "required", "searching", "placeholder", "autoFocus", "allowClear", "searchOnChange", "decorateEnd", "decorateStart", "onBlur", "onFocus", "onSearch", "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 Search = function Search(_ref) {
@@ -30,6 +30,8 @@ var Search = function Search(_ref) {
     searchOnChange = _ref$searchOnChange === void 0 ? true : _ref$searchOnChange,
     decorateEnd = _ref.decorateEnd,
     decorateStart = _ref.decorateStart,
+    onBlur = _ref.onBlur,
+    onFocus = _ref.onFocus,
     onSearch = _ref.onSearch,
     onChange = _ref.onChange;
     _ref.onEnterPressed;
@@ -100,6 +102,8 @@ var Search = function Search(_ref) {
       autoComplete: "off",
       autoFocus: autoFocus,
       value: actualValue,
+      onBlur: onBlur,
+      onFocus: onFocus,
       onChange: handleChange,
       onKeyDown: handleEnterPressed
     })

package/dist/esm/input/Textarea.js

@@ -9,7 +9,7 @@ import { handleEnter } from '../utils/eventHandlers.js';
 import '@react-fabric/utilities';
 import { jsx } from 'react/jsx-runtime';
 
-var _excluded = ["ref", "value", "name", "invalid", "readOnly", "disabled", "required", "placeholder", "autoFocus", "rows", "maxRows", "variableRows", "expandable", "onChange", "onEnterPressed"];
+var _excluded = ["ref", "value", "name", "invalid", "readOnly", "disabled", "required", "placeholder", "autoFocus", "rows", "maxRows", "variableRows", "expandable", "onBlur", "onFocus", "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 Textarea = function Textarea(_ref) {
@@ -28,6 +28,8 @@ var Textarea = function Textarea(_ref) {
     maxRows = _ref$maxRows === void 0 ? 12 : _ref$maxRows,
     variableRows = _ref.variableRows,
     expandable = _ref.expandable,
+    onBlur = _ref.onBlur,
+    onFocus = _ref.onFocus,
     onChange = _ref.onChange,
     onEnterPressed = _ref.onEnterPressed,
     rest = _objectWithoutProperties(_ref, _excluded);
@@ -84,6 +86,8 @@ var Textarea = function Textarea(_ref) {
       autoComplete: "off",
       autoFocus: autoFocus,
       value: actualValue,
+      onBlur: onBlur,
+      onFocus: onFocus,
       onChange: handleChange,
       onKeyDown: handleEnter(onEnterPressed, {
         preventDefault: !!onEnterPressed

package/dist/types/input/ColorInput.d.ts

@@ -7,4 +7,4 @@ export interface ColorInputProps extends InputProps, Omit<ColorProps, "onChange"
      */
     showPicker?: boolean;
 }
-export declare const ColorInput: ({ ref, required, disabled, allowClear, invalid, error, value, showPicker, defaultColor, decorateEnd, decorateStart, onChange, noOutline, ...rest }: ColorInputProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ColorInput: ({ ref, required, disabled, allowClear, invalid, error, value, showPicker, defaultColor, decorateEnd, decorateStart, onBlur, onFocus, onChange, noOutline, ...rest }: ColorInputProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/input/DateInput.d.ts

@@ -16,4 +16,4 @@ export interface DateProps extends InputProps<string>, RefProp<HTMLInputElement>
      */
     max?: DateLike;
 }
-export declare const DateInput: ({ ref, name, value, invalid, readOnly, disabled, required, placeholder, autoFocus, error, type, onChange, onEnterPressed, format, min, max, ...rest }: DateProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DateInput: ({ ref, name, value, invalid, readOnly, disabled, required, placeholder, autoFocus, error, type, onBlur, onFocus, onChange, onEnterPressed, format, min, max, ...rest }: DateProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/input/Input.d.ts

@@ -6,4 +6,4 @@ export interface TextInputProps extends InputProps, RefProp<HTMLInputElement> {
      */
     type?: "email" | "file" | "search" | "tel" | "text" | "url";
 }
-export declare const Input: ({ ref, name, value, invalid, readOnly, disabled, required, placeholder, autoFocus, error, type, onChange, onEnterPressed, ...rest }: TextInputProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Input: ({ ref, name, value, invalid, readOnly, disabled, required, placeholder, autoFocus, error, type, onBlur, onFocus, onChange, onEnterPressed, ...rest }: TextInputProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/input/Number.d.ts

@@ -14,4 +14,4 @@ export interface NumberProps extends InputProps<number>, RefProp<HTMLInputElemen
      */
     step?: number;
 }
-export declare const Number: ({ ref, value, invalid, readOnly, disabled, required, placeholder, autoFocus, name, min, max, step, onChange, onEnterPressed, ...rest }: NumberProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Number: ({ ref, value, invalid, readOnly, disabled, required, placeholder, autoFocus, name, min, max, step, onBlur, onFocus, onChange, onEnterPressed, ...rest }: NumberProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/input/Password.d.ts

@@ -10,4 +10,4 @@ export interface PasswordProps extends InputProps, RefProp<HTMLInputElement> {
      */
     strength?: number;
 }
-export declare const Password: ({ ref, value, name, strength, invalid, readOnly, disabled, required, placeholder, autoFocus, showToggle, onChange, onEnterPressed, ...rest }: PasswordProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Password: ({ ref, value, name, strength, invalid, readOnly, disabled, required, placeholder, autoFocus, showToggle, onBlur, onFocus, onChange, onEnterPressed, ...rest }: PasswordProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/input/Search.d.ts

@@ -14,4 +14,4 @@ export interface SearchProps extends InputProps, RefProp<HTMLInputElement> {
      */
     onSearch?: (query?: string) => void;
 }
-export declare const Search: ({ ref, value, name, invalid, readOnly, disabled, required, searching, placeholder, autoFocus, allowClear, searchOnChange, decorateEnd, decorateStart, onSearch, onChange, onEnterPressed, ...rest }: SearchProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Search: ({ ref, value, name, invalid, readOnly, disabled, required, searching, placeholder, autoFocus, allowClear, searchOnChange, decorateEnd, decorateStart, onBlur, onFocus, onSearch, onChange, onEnterPressed, ...rest }: SearchProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/input/Textarea.d.ts

@@ -18,4 +18,4 @@ export interface TextareaProps extends InputProps, RefProp<HTMLTextAreaElement>
      */
     expandable?: boolean;
 }
-export declare const Textarea: ({ ref, value, name, invalid, readOnly, disabled, required, placeholder, autoFocus, rows, maxRows, variableRows, expandable, onChange, onEnterPressed, ...rest }: TextareaProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Textarea: ({ ref, value, name, invalid, readOnly, disabled, required, placeholder, autoFocus, rows, maxRows, variableRows, expandable, onBlur, onFocus, onChange, onEnterPressed, ...rest }: TextareaProps) => import("react/jsx-runtime").JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-fabric/form",
-  "version": "1.0.0-beta.41",
+  "version": "1.0.0-beta.42",
   "description": "RUF: Form package",
   "author": "Adarsh Pastakia <adarshpastakia@outlook.com>",
   "license": "MIT",
@@ -41,9 +41,9 @@
     "@dnd-kit/utilities": "^3.2.2",
     "@floating-ui/react": "^0.26.24",
     "@hookform/resolvers": "^3.9.0",
-    "@react-fabric/core": "^1.0.0-beta.41",
-    "@react-fabric/date": "^1.0.0-beta.41",
-    "@react-fabric/utilities": "^1.0.0-beta.41",
+    "@react-fabric/core": "^1.0.0-beta.42",
+    "@react-fabric/date": "^1.0.0-beta.42",
+    "@react-fabric/utilities": "^1.0.0-beta.42",
     "classnames": "^2.5.1",
     "color": "^4.2.3",
     "react-color": "^2.19.3",
@@ -63,5 +63,5 @@
     "node": ">=18.12.0",
     "npm": ">=8.19.0"
   },
-  "gitHead": "bc737416d3c6a217a6b8c47291c3975a22722d80"
+  "gitHead": "61c9612bb2c7bc9a807f46922881432748c9e7a3"
 }

package/src/input/ColorInput.tsx

@@ -70,6 +70,8 @@ export const ColorInput = ({
   defaultColor = "",
   decorateEnd,
   decorateStart,
+  onBlur,
+  onFocus,
   onChange,
   // @ts-expect-error ignore
   noOutline,
@@ -144,7 +146,10 @@ export const ColorInput = ({
         data-ref="button"
         className="flex-1 flex items-center"
         ref={refs.setReference}
-        {...getReferenceProps()}
+        {...getReferenceProps({
+          onBlur,
+          onFocus,
+        })}
         data-inner-clickable="true"
         data-dropdown-open={isOpen ? true : undefined}
       >

package/src/input/DateInput.tsx

@@ -82,6 +82,8 @@ export const DateInput = ({
   autoFocus,
   error,
   type = "date",
+  onBlur,
+  onFocus,
   onChange,
   onEnterPressed,
   format = "dd/MM/yyyy",
@@ -213,7 +215,10 @@ export const DateInput = ({
         autoFocus={autoFocus}
         value={inputValue}
         ref={mergeRefs(ref, refs.setReference)}
-        {...getReferenceProps()}
+        {...getReferenceProps({
+          onBlur,
+          onFocus,
+        })}
         onChange={handleChange}
         onKeyDown={handleEnterPressed}
       />

package/src/input/Input.tsx

@@ -53,6 +53,8 @@ export const Input = ({
   autoFocus,
   error,
   type = "text",
+  onBlur,
+  onFocus,
   onChange,
   onEnterPressed,
   ...rest
@@ -106,6 +108,8 @@ export const Input = ({
         autoComplete="off"
         autoFocus={autoFocus}
         value={actualValue}
+        onBlur={onBlur}
+        onFocus={onFocus}
         onChange={handleChange}
         onKeyDown={handleEnterPressed}
       />

package/src/input/Number.tsx

@@ -64,6 +64,8 @@ export const Number = ({
   min,
   max,
   step,
+  onBlur,
+  onFocus,
   onChange,
   onEnterPressed,
   ...rest
@@ -118,6 +120,8 @@ export const Number = ({
         autoComplete="off"
         autoFocus={autoFocus}
         value={actualValue}
+        onBlur={onBlur}
+        onFocus={onFocus}
         onChange={handleChange}
         onKeyDown={handleEnterPressed}
       />

package/src/input/Password.tsx

@@ -60,6 +60,8 @@ export const Password = ({
   placeholder,
   autoFocus,
   showToggle,
+  onBlur,
+  onFocus,
   onChange,
   onEnterPressed,
   ...rest
@@ -131,6 +133,8 @@ export const Password = ({
         autoComplete="off"
         autoFocus={autoFocus}
         value={actualValue}
+        onBlur={onBlur}
+        onFocus={onFocus}
         onChange={handleChange}
         onKeyDown={handleEnterPressed}
       />

package/src/input/Search.tsx

@@ -67,6 +67,8 @@ export const Search = ({
   searchOnChange = true,
   decorateEnd,
   decorateStart,
+  onBlur,
+  onFocus,
   onSearch,
   onChange,
   onEnterPressed,
@@ -152,6 +154,8 @@ export const Search = ({
         autoComplete="off"
         autoFocus={autoFocus}
         value={actualValue}
+        onBlur={onBlur}
+        onFocus={onFocus}
         onChange={handleChange}
         onKeyDown={handleEnterPressed}
       />

package/src/input/Textarea.tsx

@@ -69,6 +69,8 @@ export const Textarea = ({
   maxRows = 12,
   variableRows,
   expandable,
+  onBlur,
+  onFocus,
   onChange,
   onEnterPressed,
   ...rest
@@ -128,6 +130,8 @@ export const Textarea = ({
         autoComplete="off"
         autoFocus={autoFocus}
         value={actualValue}
+        onBlur={onBlur}
+        onFocus={onFocus}
         onChange={handleChange}
         onKeyDown={handleEnter(onEnterPressed, {
           preventDefault: !!onEnterPressed,