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

package/css/_file.css

@@ -27,11 +27,12 @@
       cursor: pointer;
 
       padding-block: 0;
+      padding-inline: 4px;
 
-      color: var(--text-white);
+      color: var(--color-white);
 
       opacity: 0.8;
-      background-color: var(--bg-primary-500);
+      background-color: var(--color-primary-500);
       border: 0;
       border-radius: var(--rounded);
 
@@ -41,7 +42,7 @@
     }
 
     &[aria-invalid="true"]::-webkit-file-upload-button {
-      background-color: var(--bg-danger-500);
+      background-color: var(--color-danger-500);
     }
 
     &:disabled::-webkit-file-upload-button {

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/File.js

@@ -138,7 +138,7 @@ var FileInput = function FileInput(_ref) {
     })
   }, rest), {}, {
     children: /*#__PURE__*/jsxRuntime.jsx("input", {
-      className: classNames("appearance-none bg-transparent py-1 px-2 flex-1 border-none outline-none ring-0", "fabric-fileInput", utilities.isArray(actualValue) && (actualValue === null || actualValue === void 0 ? void 0 : actualValue.length) && "text-(--fabric-bg)"),
+      className: classNames("appearance-none bg-transparent py-1 px-2 flex-1 border-none outline-none ring-0 peer", "fabric-fileInput", utilities.isArray(actualValue) && (actualValue === null || actualValue === void 0 ? void 0 : actualValue.length) && "text-(--fabric-bg)"),
       "aria-invalid": invalid,
       "aria-disabled": disabled,
       "aria-readonly": readOnly,

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);
@@ -53,7 +55,7 @@ var Number = function Number(_ref) {
     required: required
   }, rest), {}, {
     children: /*#__PURE__*/jsxRuntime.jsx("input", {
-      className: "appearance-none bg-transparent py-1 px-2 flex-1 border-none outline-none ring-0",
+      className: "appearance-none bg-transparent py-1 px-2 flex-1 border-none outline-none ring-0 peer",
       "aria-invalid": invalid,
       "aria-disabled": disabled,
       "aria-readonly": readOnly,
@@ -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);
@@ -60,7 +62,7 @@ var Password = function Password(_ref) {
     disabled: disabled,
     required: required
   }, rest), {}, {
-    decorateEnd: showToggle && /*#__PURE__*/jsxRuntime.jsx(core.Tooltip, {
+    actionButton: showToggle && actualValue && /*#__PURE__*/jsxRuntime.jsx(core.Tooltip, {
       color: "warning",
       content: t(show ? "password.hide" : "password.show"),
       children: /*#__PURE__*/jsxRuntime.jsx(core.Button, {
@@ -75,7 +77,7 @@ var Password = function Password(_ref) {
       })
     }),
     children: [/*#__PURE__*/jsxRuntime.jsx("input", {
-      className: "appearance-none bg-transparent py-1 px-2 flex-1 border-none outline-none ring-0",
+      className: "appearance-none bg-transparent py-1 px-2 flex-1 border-none outline-none ring-0 peer",
       "aria-invalid": invalid,
       "aria-disabled": disabled,
       "aria-readonly": readOnly,
@@ -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", "hideHandle", "allowClear", "searchOnChange", "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) {
@@ -24,12 +24,13 @@ var Search = function Search(_ref) {
     searching = _ref.searching,
     placeholder = _ref.placeholder,
     autoFocus = _ref.autoFocus,
+    hideHandle = _ref.hideHandle,
     _ref$allowClear = _ref.allowClear,
     allowClear = _ref$allowClear === void 0 ? true : _ref$allowClear,
     _ref$searchOnChange = _ref.searchOnChange,
-    searchOnChange = _ref$searchOnChange === void 0 ? true : _ref$searchOnChange,
-    decorateEnd = _ref.decorateEnd,
-    decorateStart = _ref.decorateStart,
+    searchOnChange = _ref$searchOnChange === void 0 ? false : _ref$searchOnChange,
+    onBlur = _ref.onBlur,
+    onFocus = _ref.onFocus,
     onSearch = _ref.onSearch,
     onChange = _ref.onChange;
     _ref.onEnterPressed;
@@ -68,13 +69,12 @@ var Search = function Search(_ref) {
     readOnly: readOnly,
     disabled: disabled,
     required: required,
-    decorateStart: decorateStart,
-    decorateEnd: /*#__PURE__*/jsxRuntime.jsxs(react.Fragment, {
-      children: [decorateEnd, searching && /*#__PURE__*/jsxRuntime.jsx(core.Icon, {
+    actionButton: /*#__PURE__*/jsxRuntime.jsxs(react.Fragment, {
+      children: [searching && /*#__PURE__*/jsxRuntime.jsx(core.Icon, {
         className: "p-2",
         icon: core.CoreIcons.spinner,
         animate: "spin"
-      }), !searching && /*#__PURE__*/jsxRuntime.jsx(core.Button, {
+      }), !searching && !hideHandle && /*#__PURE__*/jsxRuntime.jsx(core.Button, {
         tabIndex: -1,
         variant: "link",
         "aria-label": "search",
@@ -85,7 +85,7 @@ var Search = function Search(_ref) {
     })
   }, rest), {}, {
     children: /*#__PURE__*/jsxRuntime.jsx("input", {
-      className: "appearance-none bg-transparent py-1 px-2 flex-1 border-none outline-none ring-0",
+      className: "appearance-none bg-transparent py-1 px-2 flex-1 border-none outline-none ring-0 peer",
       "aria-invalid": invalid,
       "aria-disabled": disabled,
       "aria-readonly": readOnly,
@@ -100,6 +100,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/cjs/internal/FieldWrapper.js

@@ -47,7 +47,7 @@ var FieldWrapper = function FieldWrapper(_ref) {
       width: width,
       flexBasis: width
     },
-    children: [!isInner && /*#__PURE__*/jsxRuntime.jsxs("div", {
+    children: [!isInner && label && /*#__PURE__*/jsxRuntime.jsxs("div", {
       className: "flex flex-nowrap flex-content items-end gap-1 py-0.5 px-2",
       style: {
         width: inline ? labelWidth : undefined

package/dist/cjs/internal/InputWrapper.js

@@ -11,7 +11,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var ErrorIcon = require('./ErrorIcon.js');
 var FieldWrapper = require('./FieldWrapper.js');
 
-var _excluded = ["invalid", "error", "allowClear", "showClear", "decorateStart", "decorateEnd", "decorateEndShowWhenEmpty", "decorateEndHideWhenEmpty", "children", "onClear", "noOutline", "noBorder", "textarea", "textareaExpandable", "data-inner", "data-open", "floatingExpand", "wrapperRef", "width"];
+var _excluded = ["invalid", "error", "allowClear", "showClear", "decorateStart", "decorateEnd", "decorateEndShowWhenEmpty", "decorateEndHideWhenEmpty", "children", "onClear", "noOutline", "noBorder", "actionButton", "textarea", "textareaExpandable", "data-inner", "data-open", "floatingExpand", "wrapperRef", "width"];
 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 InputWrapper = function InputWrapper(_ref) {
@@ -27,6 +27,7 @@ var InputWrapper = function InputWrapper(_ref) {
     onClear = _ref.onClear,
     noOutline = _ref.noOutline,
     noBorder = _ref.noBorder,
+    actionButton = _ref.actionButton,
     _ref$textarea = _ref.textarea,
     textarea = _ref$textarea === void 0 ? false : _ref$textarea,
     _ref$textareaExpandab = _ref.textareaExpandable,
@@ -68,7 +69,7 @@ var InputWrapper = function InputWrapper(_ref) {
   var el = /*#__PURE__*/jsxRuntime.jsxs("div", {
     role: "none",
     ref: wrapperRef,
-    className: classNames("fabric-inputWrapper", invalid && "fabric-invalidWrapper", !noOutline && !noBorder && "bg-(--fabric-input) outline overflow-hidden", "flex flex-nowrap items-center flex-1", textarea ? "rounded-capped group" : "rounded", isExpanded ? "fixed inset-4 z-[99]" : floatingExpand ? "absolute inset-x-0" : "relative", !noOutline && "after:absolute after:bottom-0 after:h-px after:bg-primary-500 after:mx-auto"),
+    className: classNames("fabric-inputWrapper", invalid && "fabric-invalidWrapper", !noOutline && !noBorder && "bg-(--fabric-input) outline -outline-offset-1 overflow-hidden", "flex flex-nowrap items-center flex-1", textarea ? "rounded-capped group" : "rounded", isExpanded ? "fixed inset-4 z-[99]" : floatingExpand ? "absolute inset-x-0" : "relative", !noOutline && "after:absolute after:bottom-0 after:h-[2px] after:bg-primary-500 after:mx-auto"),
     onKeyDown: function onKeyDown(e) {
       return e.key === "Escape" && isExpanded && (setExpanded(false), e.stopPropagation());
     },
@@ -87,6 +88,10 @@ var InputWrapper = function InputWrapper(_ref) {
       onClickCapture: doFocus,
       className: classNames("fabric-decorate", "text-muted leading-none flex-content", utilities.isString(decorateEnd) && "px-1", decorateEndHideWhenEmpty && "peer-placeholder-shown:hidden", decorateEndShowWhenEmpty && "hidden peer-placeholder-shown:inline-block"),
       children: decorateEnd
+    }), actionButton && /*#__PURE__*/jsxRuntime.jsx("div", {
+      onClickCapture: doFocus,
+      className: classNames("fabric-decorate", "text-muted leading-none flex-content"),
+      children: actionButton
     }), textareaExpandable && /*#__PURE__*/jsxRuntime.jsx(core.Icon, {
       onClick: function onClick() {
         return setExpanded(!isExpanded);

package/dist/cjs/select/Select.js

@@ -242,7 +242,7 @@ var Select = function Select(_ref) {
         size: 1,
         ref: ref,
         autoFocus: autoFocus,
-        className: classNames("appearance-none bg-transparent outline-none border-none ring-0 flex-1", disabled && "cursor-not-allowed pointer-events-none", multiple && "min-w-24"),
+        className: classNames("appearance-none bg-transparent outline-none border-none ring-0 flex-1 peer", disabled && "cursor-not-allowed pointer-events-none", multiple && "min-w-24"),
         placeholder: utilities.isEmpty(state.value) ? placeholder : "",
         onChange: function onChange(evt) {
           return handleQuery(evt.target.value);

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/File.js

@@ -138,7 +138,7 @@ var FileInput = function FileInput(_ref) {
     })
   }, rest), {}, {
     children: /*#__PURE__*/jsx("input", {
-      className: classNames("appearance-none bg-transparent py-1 px-2 flex-1 border-none outline-none ring-0", "fabric-fileInput", isArray(actualValue) && (actualValue === null || actualValue === void 0 ? void 0 : actualValue.length) && "text-(--fabric-bg)"),
+      className: classNames("appearance-none bg-transparent py-1 px-2 flex-1 border-none outline-none ring-0 peer", "fabric-fileInput", isArray(actualValue) && (actualValue === null || actualValue === void 0 ? void 0 : actualValue.length) && "text-(--fabric-bg)"),
       "aria-invalid": invalid,
       "aria-disabled": disabled,
       "aria-readonly": readOnly,

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);
@@ -53,7 +55,7 @@ var Number = function Number(_ref) {
     required: required
   }, rest), {}, {
     children: /*#__PURE__*/jsx("input", {
-      className: "appearance-none bg-transparent py-1 px-2 flex-1 border-none outline-none ring-0",
+      className: "appearance-none bg-transparent py-1 px-2 flex-1 border-none outline-none ring-0 peer",
       "aria-invalid": invalid,
       "aria-disabled": disabled,
       "aria-readonly": readOnly,
@@ -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);
@@ -60,7 +62,7 @@ var Password = function Password(_ref) {
     disabled: disabled,
     required: required
   }, rest), {}, {
-    decorateEnd: showToggle && /*#__PURE__*/jsx(Tooltip, {
+    actionButton: showToggle && actualValue && /*#__PURE__*/jsx(Tooltip, {
       color: "warning",
       content: t(show ? "password.hide" : "password.show"),
       children: /*#__PURE__*/jsx(Button, {
@@ -75,7 +77,7 @@ var Password = function Password(_ref) {
       })
     }),
     children: [/*#__PURE__*/jsx("input", {
-      className: "appearance-none bg-transparent py-1 px-2 flex-1 border-none outline-none ring-0",
+      className: "appearance-none bg-transparent py-1 px-2 flex-1 border-none outline-none ring-0 peer",
       "aria-invalid": invalid,
       "aria-disabled": disabled,
       "aria-readonly": readOnly,
@@ -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", "hideHandle", "allowClear", "searchOnChange", "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) {
@@ -24,12 +24,13 @@ var Search = function Search(_ref) {
     searching = _ref.searching,
     placeholder = _ref.placeholder,
     autoFocus = _ref.autoFocus,
+    hideHandle = _ref.hideHandle,
     _ref$allowClear = _ref.allowClear,
     allowClear = _ref$allowClear === void 0 ? true : _ref$allowClear,
     _ref$searchOnChange = _ref.searchOnChange,
-    searchOnChange = _ref$searchOnChange === void 0 ? true : _ref$searchOnChange,
-    decorateEnd = _ref.decorateEnd,
-    decorateStart = _ref.decorateStart,
+    searchOnChange = _ref$searchOnChange === void 0 ? false : _ref$searchOnChange,
+    onBlur = _ref.onBlur,
+    onFocus = _ref.onFocus,
     onSearch = _ref.onSearch,
     onChange = _ref.onChange;
     _ref.onEnterPressed;
@@ -68,13 +69,12 @@ var Search = function Search(_ref) {
     readOnly: readOnly,
     disabled: disabled,
     required: required,
-    decorateStart: decorateStart,
-    decorateEnd: /*#__PURE__*/jsxs(Fragment, {
-      children: [decorateEnd, searching && /*#__PURE__*/jsx(Icon, {
+    actionButton: /*#__PURE__*/jsxs(Fragment, {
+      children: [searching && /*#__PURE__*/jsx(Icon, {
         className: "p-2",
         icon: CoreIcons.spinner,
         animate: "spin"
-      }), !searching && /*#__PURE__*/jsx(Button, {
+      }), !searching && !hideHandle && /*#__PURE__*/jsx(Button, {
         tabIndex: -1,
         variant: "link",
         "aria-label": "search",
@@ -85,7 +85,7 @@ var Search = function Search(_ref) {
     })
   }, rest), {}, {
     children: /*#__PURE__*/jsx("input", {
-      className: "appearance-none bg-transparent py-1 px-2 flex-1 border-none outline-none ring-0",
+      className: "appearance-none bg-transparent py-1 px-2 flex-1 border-none outline-none ring-0 peer",
       "aria-invalid": invalid,
       "aria-disabled": disabled,
       "aria-readonly": readOnly,
@@ -100,6 +100,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/esm/internal/FieldWrapper.js

@@ -47,7 +47,7 @@ var FieldWrapper = function FieldWrapper(_ref) {
       width: width,
       flexBasis: width
     },
-    children: [!isInner && /*#__PURE__*/jsxs("div", {
+    children: [!isInner && label && /*#__PURE__*/jsxs("div", {
       className: "flex flex-nowrap flex-content items-end gap-1 py-0.5 px-2",
       style: {
         width: inline ? labelWidth : undefined

package/dist/esm/internal/InputWrapper.js

@@ -11,7 +11,7 @@ import { Fragment, jsxs, jsx } from 'react/jsx-runtime';
 import { ErrorIcon } from './ErrorIcon.js';
 import { FieldWrapper } from './FieldWrapper.js';
 
-var _excluded = ["invalid", "error", "allowClear", "showClear", "decorateStart", "decorateEnd", "decorateEndShowWhenEmpty", "decorateEndHideWhenEmpty", "children", "onClear", "noOutline", "noBorder", "textarea", "textareaExpandable", "data-inner", "data-open", "floatingExpand", "wrapperRef", "width"];
+var _excluded = ["invalid", "error", "allowClear", "showClear", "decorateStart", "decorateEnd", "decorateEndShowWhenEmpty", "decorateEndHideWhenEmpty", "children", "onClear", "noOutline", "noBorder", "actionButton", "textarea", "textareaExpandable", "data-inner", "data-open", "floatingExpand", "wrapperRef", "width"];
 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 InputWrapper = function InputWrapper(_ref) {
@@ -27,6 +27,7 @@ var InputWrapper = function InputWrapper(_ref) {
     onClear = _ref.onClear,
     noOutline = _ref.noOutline,
     noBorder = _ref.noBorder,
+    actionButton = _ref.actionButton,
     _ref$textarea = _ref.textarea,
     textarea = _ref$textarea === void 0 ? false : _ref$textarea,
     _ref$textareaExpandab = _ref.textareaExpandable,
@@ -68,7 +69,7 @@ var InputWrapper = function InputWrapper(_ref) {
   var el = /*#__PURE__*/jsxs("div", {
     role: "none",
     ref: wrapperRef,
-    className: classNames("fabric-inputWrapper", invalid && "fabric-invalidWrapper", !noOutline && !noBorder && "bg-(--fabric-input) outline overflow-hidden", "flex flex-nowrap items-center flex-1", textarea ? "rounded-capped group" : "rounded", isExpanded ? "fixed inset-4 z-[99]" : floatingExpand ? "absolute inset-x-0" : "relative", !noOutline && "after:absolute after:bottom-0 after:h-px after:bg-primary-500 after:mx-auto"),
+    className: classNames("fabric-inputWrapper", invalid && "fabric-invalidWrapper", !noOutline && !noBorder && "bg-(--fabric-input) outline -outline-offset-1 overflow-hidden", "flex flex-nowrap items-center flex-1", textarea ? "rounded-capped group" : "rounded", isExpanded ? "fixed inset-4 z-[99]" : floatingExpand ? "absolute inset-x-0" : "relative", !noOutline && "after:absolute after:bottom-0 after:h-[2px] after:bg-primary-500 after:mx-auto"),
     onKeyDown: function onKeyDown(e) {
       return e.key === "Escape" && isExpanded && (setExpanded(false), e.stopPropagation());
     },
@@ -87,6 +88,10 @@ var InputWrapper = function InputWrapper(_ref) {
       onClickCapture: doFocus,
       className: classNames("fabric-decorate", "text-muted leading-none flex-content", isString(decorateEnd) && "px-1", decorateEndHideWhenEmpty && "peer-placeholder-shown:hidden", decorateEndShowWhenEmpty && "hidden peer-placeholder-shown:inline-block"),
       children: decorateEnd
+    }), actionButton && /*#__PURE__*/jsx("div", {
+      onClickCapture: doFocus,
+      className: classNames("fabric-decorate", "text-muted leading-none flex-content"),
+      children: actionButton
     }), textareaExpandable && /*#__PURE__*/jsx(Icon, {
       onClick: function onClick() {
         return setExpanded(!isExpanded);

package/dist/esm/select/Select.js

@@ -242,7 +242,7 @@ var Select = function Select(_ref) {
         size: 1,
         ref: ref,
         autoFocus: autoFocus,
-        className: classNames("appearance-none bg-transparent outline-none border-none ring-0 flex-1", disabled && "cursor-not-allowed pointer-events-none", multiple && "min-w-24"),
+        className: classNames("appearance-none bg-transparent outline-none border-none ring-0 flex-1 peer", disabled && "cursor-not-allowed pointer-events-none", multiple && "min-w-24"),
         placeholder: isEmpty(state.value) ? placeholder : "",
         onChange: function onChange(evt) {
           return handleQuery(evt.target.value);

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

@@ -9,9 +9,13 @@ export interface SearchProps extends InputProps, RefProp<HTMLInputElement> {
      * search on value change
      */
     searchOnChange?: boolean;
+    /**
+     * hide search action handle
+     */
+    hideHandle?: boolean;
     /**
      * search handler
      */
     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, hideHandle, allowClear, searchOnChange, 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/dist/types/internal/InputWrapper.d.ts

@@ -1 +1 @@
-export declare const InputWrapper: ({ invalid, error, allowClear, showClear, decorateStart, decorateEnd, decorateEndShowWhenEmpty, decorateEndHideWhenEmpty, children, onClear, noOutline, noBorder, textarea, textareaExpandable, "data-inner": isInner, "data-open": isOpen, floatingExpand, wrapperRef, width, ...rest }: KeyValue) => import("react/jsx-runtime").JSX.Element;
+export declare const InputWrapper: ({ invalid, error, allowClear, showClear, decorateStart, decorateEnd, decorateEndShowWhenEmpty, decorateEndHideWhenEmpty, children, onClear, noOutline, noBorder, actionButton, textarea, textareaExpandable, "data-inner": isInner, "data-open": isOpen, floatingExpand, wrapperRef, width, ...rest }: KeyValue) => 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.43",
   "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.43",
+    "@react-fabric/date": "^1.0.0-beta.43",
+    "@react-fabric/utilities": "^1.0.0-beta.43",
     "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": "92cd2fc5c71e3f0e00a9cff83ff924c51d7adb57"
 }

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/File.tsx

@@ -193,7 +193,7 @@ export const FileInput = ({
     >
       <input
         className={classNames(
-          "appearance-none bg-transparent py-1 px-2 flex-1 border-none outline-none ring-0",
+          "appearance-none bg-transparent py-1 px-2 flex-1 border-none outline-none ring-0 peer",
           "fabric-fileInput",
           isArray(actualValue) && actualValue?.length && "text-(--fabric-bg)",
         )}

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
@@ -100,7 +102,7 @@ export const Number = ({
       {...rest}
     >
       <input
-        className="appearance-none bg-transparent py-1 px-2 flex-1 border-none outline-none ring-0"
+        className="appearance-none bg-transparent py-1 px-2 flex-1 border-none outline-none ring-0 peer"
         aria-invalid={invalid}
         aria-disabled={disabled}
         aria-readonly={readOnly}
@@ -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
@@ -97,8 +99,9 @@ export const Password = ({
       disabled={disabled}
       required={required}
       {...rest}
-      decorateEnd={
-        showToggle && (
+      actionButton={
+        showToggle &&
+        actualValue && (
           <Tooltip
             color="warning"
             content={t(show ? "password.hide" : "password.show")}
@@ -116,7 +119,7 @@ export const Password = ({
       }
     >
       <input
-        className="appearance-none bg-transparent py-1 px-2 flex-1 border-none outline-none ring-0"
+        className="appearance-none bg-transparent py-1 px-2 flex-1 border-none outline-none ring-0 peer"
         aria-invalid={invalid}
         aria-disabled={disabled}
         aria-readonly={readOnly}
@@ -131,6 +134,8 @@ export const Password = ({
         autoComplete="off"
         autoFocus={autoFocus}
         value={actualValue}
+        onBlur={onBlur}
+        onFocus={onFocus}
         onChange={handleChange}
         onKeyDown={handleEnterPressed}
       />

package/src/input/Search.tsx

@@ -46,6 +46,10 @@ export interface SearchProps extends InputProps, RefProp<HTMLInputElement> {
    * search on value change
    */
   searchOnChange?: boolean;
+  /**
+   * hide search action handle
+   */
+  hideHandle?: boolean;
   /**
    * search handler
    */
@@ -63,10 +67,11 @@ export const Search = ({
   searching,
   placeholder,
   autoFocus,
+  hideHandle,
   allowClear = true,
-  searchOnChange = true,
-  decorateEnd,
-  decorateStart,
+  searchOnChange = false,
+  onBlur,
+  onFocus,
   onSearch,
   onChange,
   onEnterPressed,
@@ -115,14 +120,12 @@ export const Search = ({
       readOnly={readOnly}
       disabled={disabled}
       required={required}
-      decorateStart={decorateStart}
-      decorateEnd={
+      actionButton={
         <Fragment>
-          {decorateEnd}
           {searching && (
             <Icon className="p-2" icon={CoreIcons.spinner} animate="spin" />
           )}
-          {!searching && (
+          {!searching && !hideHandle && (
             <Button
               tabIndex={-1}
               variant="link"
@@ -137,7 +140,7 @@ export const Search = ({
       {...rest}
     >
       <input
-        className="appearance-none bg-transparent py-1 px-2 flex-1 border-none outline-none ring-0"
+        className="appearance-none bg-transparent py-1 px-2 flex-1 border-none outline-none ring-0 peer"
         aria-invalid={invalid}
         aria-disabled={disabled}
         aria-readonly={readOnly}
@@ -152,6 +155,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,

package/src/internal/FieldWrapper.tsx

@@ -47,7 +47,7 @@ export const FieldWrapper = ({
       data-ref="fieldWrapper"
       style={{ width, flexBasis: width }}
     >
-      {!isInner && (
+      {!isInner && label && (
         <div
           className="flex flex-nowrap flex-content items-end gap-1 py-0.5 px-2"
           style={{ width: inline ? labelWidth : undefined }}

package/src/internal/InputWrapper.tsx

@@ -49,6 +49,7 @@ export const InputWrapper = ({
   onClear,
   noOutline,
   noBorder,
+  actionButton,
   textarea = false,
   textareaExpandable = false,
   "data-inner": isInner,
@@ -107,7 +108,7 @@ export const InputWrapper = ({
         invalid && "fabric-invalidWrapper",
         !noOutline &&
           !noBorder &&
-          "bg-(--fabric-input) outline overflow-hidden",
+          "bg-(--fabric-input) outline -outline-offset-1 overflow-hidden",
         "flex flex-nowrap items-center flex-1",
         textarea ? "rounded-capped group" : "rounded",
         isExpanded
@@ -116,7 +117,7 @@ export const InputWrapper = ({
             ? "absolute inset-x-0"
             : "relative",
         !noOutline &&
-          "after:absolute after:bottom-0 after:h-px after:bg-primary-500 after:mx-auto",
+          "after:absolute after:bottom-0 after:h-[2px] after:bg-primary-500 after:mx-auto",
       )}
       onKeyDown={(e) =>
         e.key === "Escape" &&
@@ -164,6 +165,17 @@ export const InputWrapper = ({
           {decorateEnd}
         </div>
       )}
+      {actionButton && (
+        <div
+          onClickCapture={doFocus}
+          className={classNames(
+            "fabric-decorate",
+            "text-muted leading-none flex-content",
+          )}
+        >
+          {actionButton}
+        </div>
+      )}
       {textareaExpandable && (
         <Icon
           onClick={() => setExpanded(!isExpanded)}

package/src/select/Select.tsx

@@ -296,7 +296,7 @@ export const Select = <T extends AnyObject = string>({
           ref={ref}
           autoFocus={autoFocus}
           className={classNames(
-            "appearance-none bg-transparent outline-none border-none ring-0 flex-1",
+            "appearance-none bg-transparent outline-none border-none ring-0 flex-1 peer",
             disabled && "cursor-not-allowed pointer-events-none",
             multiple && "min-w-24",
           )}