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

package/dist/cjs/input/Search.js

@@ -1,91 +1,83 @@
 'use strict';
 
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
-var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
-var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
 var core = require('@react-fabric/core');
 var react = require('react');
 var InputWrapper = require('../internal/InputWrapper.js');
 var eventHandlers = require('../utils/eventHandlers.js');
 require('@react-fabric/utilities');
+var getProps = require('../utils/getProps.js');
 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"];
 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) {
-  var ref = _ref.ref,
-    value = _ref.value,
-    name = _ref.name,
-    invalid = _ref.invalid,
-    readOnly = _ref.readOnly,
-    disabled = _ref.disabled,
-    required = _ref.required,
-    searching = _ref.searching,
-    placeholder = _ref.placeholder,
-    autoFocus = _ref.autoFocus,
-    _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,
-    onSearch = _ref.onSearch,
-    onChange = _ref.onChange;
-    _ref.onEnterPressed;
-    var rest = _objectWithoutProperties(_ref, _excluded);
-  var _useState = react.useState(""),
-    _useState2 = _slicedToArray(_useState, 2),
-    actualValue = _useState2[0],
-    setActualValue = _useState2[1];
-  var deferred = react.useDeferredValue(value);
-  var refValue = react.useRef("");
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+/**
+ * Search input component with optional searching state and search handler.
+ * This component allows users to input search queries and trigger a search action.
+ * It supports features like searching on value change, showing a search handle,
+ * and handling search actions with a debounce mechanism.
+ */
+function Search(props) {
+  var value = props.value,
+    defaultValue = props.defaultValue,
+    onSearch = props.onSearch,
+    onChange = props.onChange,
+    onBlur = props.onBlur,
+    onFocus = props.onFocus,
+    hideHandle = props.hideHandle,
+    disabled = props.disabled,
+    readOnly = props.readOnly,
+    invalid = props.invalid,
+    searching = props.searching,
+    searchOnChange = props.searchOnChange,
+    placeholder = props.placeholder,
+    name = props.name,
+    autoFocus = props.autoFocus,
+    allowClear = props.allowClear,
+    ref = props.ref;
+  var id = react.useId();
+  var _useControlledValue = core.useControlledValue(value, defaultValue),
+    currentValue = _useControlledValue.currentValue,
+    updateValue = _useControlledValue.updateValue;
+  var valueRef = react.useRef("");
   var handleSearch = core.useDebounce(function () {
-    return onSearch === null || onSearch === void 0 ? void 0 : onSearch(refValue.current);
+    return onSearch === null || onSearch === void 0 ? void 0 : onSearch(valueRef.current);
   }, [onSearch], 250);
-  var handleEnterPressed = react.useMemo(function () {
-    return eventHandlers.handleEnter(handleSearch);
-  }, [handleSearch]);
-  react.useEffect(function () {
-    setActualValue(deferred !== null && deferred !== void 0 ? deferred : "");
-  }, [deferred]);
+  var handleEnterPressed = eventHandlers.useHandleEnter(handleSearch);
   var handleChange = react.useCallback(function (e) {
-    var value = e === null || e === void 0 ? void 0 : e.target.value;
-    refValue.current = value !== null && value !== void 0 ? value : "";
-    setActualValue(value !== null && value !== void 0 ? value : "");
-    onChange === null || onChange === void 0 || onChange(value !== null && value !== void 0 ? value : undefined);
+    var _e$target$value;
+    var value = (_e$target$value = e === null || e === void 0 ? void 0 : e.target.value) !== null && _e$target$value !== void 0 ? _e$target$value : defaultValue;
+    valueRef.current = value !== null && value !== void 0 ? value : "";
+    updateValue(value);
+    onChange === null || onChange === void 0 || onChange(value);
 
-    // value was cleared so force fire onSearch
-    if (searchOnChange) {
+    // when e is undefined value was cleared so force fire onSearch
+    if (!e || searchOnChange) {
       handleSearch();
     }
-  }, [onChange, searchOnChange, handleSearch]);
+  }, [defaultValue, updateValue, onChange, searchOnChange, handleSearch]);
   return /*#__PURE__*/jsxRuntime.jsx(InputWrapper.InputWrapper, _objectSpread(_objectSpread({
-    showClear: !!actualValue,
+    id: id,
+    showClear: allowClear && (currentValue !== null && currentValue !== void 0 ? currentValue : "") !== (defaultValue !== null && defaultValue !== void 0 ? defaultValue : "") && !disabled && !readOnly,
     onClear: handleChange,
-    allowClear: allowClear,
-    invalid: invalid,
-    readOnly: readOnly,
-    disabled: disabled,
-    required: required,
-    decorateStart: decorateStart,
-    decorateEnd: /*#__PURE__*/jsxRuntime.jsxs(react.Fragment, {
-      children: [decorateEnd, searching && /*#__PURE__*/jsxRuntime.jsx(core.Icon, {
+    hasStepper: true
+  }, getProps.getWrapperProps(props)), {}, {
+    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, {
+        icon: "icon-[svg-spinners--eclipse]"
+      }), !searching && !hideHandle && /*#__PURE__*/jsxRuntime.jsx(core.Button, {
         tabIndex: -1,
         variant: "link",
         "aria-label": "search",
-        disabled: !actualValue,
-        icon: core.CoreIcons.search,
+        disabled: !currentValue,
+        icon: "icon-[mdi--magnify]",
         onClick: handleSearch
       })]
-    })
-  }, rest), {}, {
+    }),
     children: /*#__PURE__*/jsxRuntime.jsx("input", {
-      className: "appearance-none bg-transparent py-1 px-2 flex-1 border-none outline-none ring-0",
+      id: id,
+      className: "appearance-none bg-transparent py-1 px-4 not-first:ps-2 not-last:pe-2 flex-1 border-none outline-none ring-0 peer",
       "aria-invalid": invalid,
       "aria-disabled": disabled,
       "aria-readonly": readOnly,
@@ -99,11 +91,13 @@ var Search = function Search(_ref) {
       ref: ref,
       autoComplete: "off",
       autoFocus: autoFocus,
-      value: actualValue,
+      value: currentValue !== null && currentValue !== void 0 ? currentValue : "",
+      onBlur: onBlur,
+      onFocus: onFocus,
       onChange: handleChange,
       onKeyDown: handleEnterPressed
     })
   }));
-};
+}
 
 exports.Search = Search;

package/dist/cjs/input/Slider.js

@@ -2,51 +2,45 @@
 
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
-var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
 var utilities = require('@react-fabric/utilities');
-var classNames = require('classnames');
 var react = require('react');
 var InputWrapper = require('../internal/InputWrapper.js');
 var index = require('../ranger/index.js');
+require('@floating-ui/react');
+require('@react-fabric/core');
+var getProps = require('../utils/getProps.js');
 var jsxRuntime = require('react/jsx-runtime');
 
-var _excluded = ["error", "name", "value", "step", "min", "max", "height", "color", "vertical", "showLabels", "showValue", "minLabel", "maxLabel", "ranges", "useInfinity", "format", "invalid", "autoFocus", "disabled", "readOnly", "onBlur", "onChange", "onEnterPressed", "onFocus", "onSlide"];
 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; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /**
- * Number slider input
+ * Slider component for rendering a slider input with labels and value display.
+ * It supports vertical orientation, custom min/max labels, and step ranges.
+ * The component handles value changes, displays tooltips, and integrates with ranger for slider functionality.
+ * It also supports deferred value updates for smoother interactions.
  */
-var Slider = function Slider(_ref) {
-  var error = _ref.error;
-    _ref.name;
-    var value = _ref.value,
-    _ref$step = _ref.step,
-    step = _ref$step === void 0 ? 1 : _ref$step,
-    _ref$min = _ref.min,
-    min = _ref$min === void 0 ? 0 : _ref$min,
-    _ref$max = _ref.max,
-    max = _ref$max === void 0 ? 100 : _ref$max,
-    _ref$height = _ref.height,
-    height = _ref$height === void 0 ? 192 : _ref$height,
-    color = _ref.color,
-    vertical = _ref.vertical,
-    showLabels = _ref.showLabels,
-    showValue = _ref.showValue,
-    minLabel = _ref.minLabel,
-    maxLabel = _ref.maxLabel,
-    ranges = _ref.ranges,
-    useInfinity = _ref.useInfinity,
-    format = _ref.format,
-    invalid = _ref.invalid;
-    _ref.autoFocus;
-    var disabled = _ref.disabled,
-    readOnly = _ref.readOnly;
-    _ref.onBlur;
-    var onChange = _ref.onChange;
-    _ref.onEnterPressed;
-    _ref.onFocus;
-    var onSlide = _ref.onSlide,
-    rest = _objectWithoutProperties(_ref, _excluded);
+function Slider(props) {
+  var value = props.value,
+    showLabels = props.showLabels,
+    showValue = props.showValue,
+    onChange = props.onChange,
+    onSlide = props.onSlide,
+    ranges = props.ranges,
+    useInfinity = props.useInfinity,
+    invalid = props.invalid,
+    _props$step = props.step,
+    step = _props$step === void 0 ? 1 : _props$step,
+    _props$min = props.min,
+    min = _props$min === void 0 ? 0 : _props$min,
+    _props$max = props.max,
+    max = _props$max === void 0 ? 100 : _props$max,
+    _props$height = props.height,
+    height = _props$height === void 0 ? 192 : _props$height,
+    vertical = props.vertical,
+    minLabel = props.minLabel,
+    maxLabel = props.maxLabel,
+    format = props.format,
+    color = props.color;
   var _useState = react.useState(0),
     _useState2 = _slicedToArray(_useState, 2),
     actualValue = _useState2[0],
@@ -65,15 +59,17 @@ var Slider = function Slider(_ref) {
     return (_ranges$slice$ = ranges === null || ranges === void 0 ? void 0 : ranges.slice(-1)[0]) !== null && _ranges$slice$ !== void 0 ? _ranges$slice$ : max;
   }, [max, ranges]);
   react.useEffect(function () {
+    // eslint-disable-next-line @eslint-react/set-state-in-effect
     setActualValue(useInfinity && deferred === Infinity ? max : deferred !== null && deferred !== void 0 ? deferred : min);
   }, [deferred, min, max, useInfinity]);
   react.useEffect(function () {
+    // eslint-disable-next-line @eslint-react/set-state-in-effect
     setDisplayValue(!!showValue);
   }, [showValue]);
   var handleChange = react.useCallback(function (value) {
     var val = useInfinity && value === max ? Infinity : value;
     setActualValue(val !== null && val !== void 0 ? val : 0);
-    onChange === null || onChange === void 0 || onChange(val !== null && val !== void 0 ? val : undefined);
+    onChange === null || onChange === void 0 || onChange(val !== null && val !== void 0 ? val : null);
   }, [onChange, max, useInfinity]);
   var minDisplay = react.useMemo(function () {
     return /*#__PURE__*/jsxRuntime.jsx("span", {
@@ -108,56 +104,51 @@ var Slider = function Slider(_ref) {
       return handleChange(values[0]);
     }
   });
-  return /*#__PURE__*/jsxRuntime.jsx(InputWrapper.InputWrapper, _objectSpread(_objectSpread({}, rest), {}, {
-    noOutline: true,
-    error: error,
-    invalid: invalid,
-    isDisabled: disabled,
-    isReadOnly: readOnly,
-    canClear: !!actualValue,
+  return /*#__PURE__*/jsxRuntime.jsx(InputWrapper.InputWrapper, _objectSpread(_objectSpread({}, getProps.getWrapperProps(props)), {}, {
+    borderless: true,
+    focusRing: true,
     children: /*#__PURE__*/jsxRuntime.jsxs("div", {
-      className: classNames("flex-auto order-3 flex items-center select-none relative z-0", vertical && "flex-col w-8", invalid ? "text-danger-500" : "text-primary-600"),
+      className: utilities.cn("flex-1 order-3 flex items-center select-none relative z-0", vertical && "flex-col w-8", invalid ? "text-danger-500" : "text-primary-600"),
       "data-vertical": !!vertical,
       style: invalid ? undefined : {
         color: color
       },
       children: [showLabels && (vertical ? maxDisplay : minDisplay), /*#__PURE__*/jsxRuntime.jsxs("div", {
         ref: rangerInstance.trackElRef,
-        className: classNames("flex-auto relative flex items-center", vertical ? "my-2 w-8" : "mx-2 h-8"),
+        className: utilities.cn("relative flex items-center", vertical ? "my-2 w-8" : "flex-1 mx-2 h-8"),
         style: {
           height: vertical ? height : undefined
         },
-        children: [rangerInstance.ticks.map(function (_ref2) {
-          _ref2.value;
-            var key = _ref2.key,
-            styles = _ref2.styles;
+        children: [rangerInstance.ticks.map(function (_ref) {
+          var key = _ref.key,
+            styles = _ref.styles;
           return /*#__PURE__*/jsxRuntime.jsx("div", {
-            className: classNames("absolute inline-block h-1 w-1 rounded-sm bg-invert opacity-30 leading-[0] z-1", vertical && "left-1/2 -ml-0.5"),
+            className: utilities.cn("absolute inline-block h-1 w-1 rounded-sm bg-invert opacity-30 leading-0 z-1", vertical && "left-1/2 -ml-0.5"),
             style: styles
           }, key);
-        }), rangerInstance.segments.map(function (_ref3) {
-          var key = _ref3.key,
-            styles = _ref3.styles,
-            active = _ref3.active;
+        }), rangerInstance.segments.map(function (_ref2) {
+          var key = _ref2.key,
+            styles = _ref2.styles,
+            active = _ref2.active;
           return /*#__PURE__*/jsxRuntime.jsx("div", {
-            className: classNames("absolute", active ? "bg-current z-1 opacity-90" : "bg-invert opacity-5 z-0", vertical ? "-bottom-1 left-1/2 -translate-x-1/2" : "top-1/2 -translate-y-1/2", !vertical && (active ? "h-1" : "h-0.5"), vertical && (active ? "w-1" : "w-0.5")),
+            className: utilities.cn("absolute", active ? "bg-current z-1 opacity-90" : "bg-invert opacity-5 z-0", vertical ? "-bottom-1 left-1/2 -translate-x-1/2" : "top-1/2 -translate-y-1/2", !vertical && (active ? "h-1" : "h-0.5"), vertical && (active ? "w-1" : "w-0.5")),
             style: styles
           }, key);
-        }), rangerInstance.handles.map(function (_ref4) {
-          var key = _ref4.key,
-            value = _ref4.value,
-            props = _ref4.props,
-            styles = _ref4.styles,
-            percentage = _ref4.percentage,
-            valueStyles = _ref4.valueStyles;
+        }), rangerInstance.handles.map(function (_ref3) {
+          var key = _ref3.key,
+            value = _ref3.value,
+            props = _ref3.props,
+            styles = _ref3.styles,
+            percentage = _ref3.percentage,
+            valueStyles = _ref3.valueStyles;
           return /*#__PURE__*/jsxRuntime.jsxs(react.Fragment, {
             children: [/*#__PURE__*/jsxRuntime.jsx("button", _objectSpread(_objectSpread({
               type: "button",
-              className: classNames("bg-current cursor-pointer appearance-none h-3 w-3 rounded-full z-3 absolute", "focus:ring-2 focus:ring-offset-2", vertical && "left-1/2 -ml-1.5")
+              className: utilities.cn("bg-current cursor-pointer appearance-none h-3 w-3 rounded-full z-3 absolute", "focus:ring-2 focus:ring-offset-2", vertical && "left-1/2 -ml-1.5")
             }, props), {}, {
               style: styles
             })), displayValue && /*#__PURE__*/jsxRuntime.jsx("div", {
-              className: classNames("bg-invert text-invert py-px px-2 text-xs absolute rounded z-[5] whitespace-nowrap", "before:absolute before:h-1.5 before:w-1.5 before:z-[-1] before:bg-invert before:top-1/2 before:-translate-y-1/2 before:rotate-45", vertical ? "end-0 ltr:translate-x-full rtl:-translate-x-full translate-y-2" : "top-1/2 -translate-y-1/2", !vertical && (percentage > 50 ? "-ms-3 ltr:-translate-x-full rtl:translate-x-full ltr:before:translate-x-[0.125rem] rtl:before:-translate-x-[0.125rem] before:end-0" : "ms-3 ltr:before:-translate-x-[0.125rem] rtl:before:translate-x-[0.125rem] before:start-0")),
+              className: utilities.cn("bg-invert text-invert py-px px-2 text-xs absolute rounded z-5 whitespace-nowrap pointer-events-none", "before:absolute before:h-1.5 before:w-1.5 before:z-[-1] before:bg-invert before:top-1/2 before:-translate-y-1/2 before:rotate-45", vertical ? "inset-e-0 ltr:translate-x-full rtl:-translate-x-full translate-y-2 ltr:before:-translate-x-0.5 rtl:before:translate-x-0.5 before:inset-s-0" : "top-1/2 -translate-y-1/2", !vertical && (percentage > 50 ? "-ms-3 ltr:-translate-x-full rtl:translate-x-full ltr:before:translate-x-0.5 rtl:before:-translate-x-0.5 before:inset-e-0" : "ms-3 ltr:before:-translate-x-0.5 rtl:before:translate-x-0.5 before:inset-s-0")),
               "data-align": percentage > 50 ? "start" : "end",
               style: valueStyles,
               children: value === Infinity || useInfinity && value === max ? maxLabel !== null && maxLabel !== void 0 ? maxLabel : "∞" : utilities.Format.number(value, format)
@@ -167,6 +158,6 @@ var Slider = function Slider(_ref) {
       }), showLabels && (vertical ? minDisplay : maxDisplay)]
     })
   }));
-};
+}
 
 exports.Slider = Slider;

package/dist/cjs/input/Switch.js

@@ -1,19 +1,25 @@
 'use strict';
 
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
-var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
-var classNames = require('classnames');
+var core = require('@react-fabric/core');
+var utilities = require('@react-fabric/utilities');
 var react = require('react');
 var ErrorIcon = require('../internal/ErrorIcon.js');
-require('@react-fabric/utilities');
+require('@floating-ui/react');
 var getColor = require('../utils/getColor.js');
 var jsxRuntime = require('react/jsx-runtime');
 
 var _excluded = ["ref", "label", "checked", "invalid", "disabled", "error", "width", "color", "name", "onLabel", "offLabel", "onLabelColor", "offLabelColor", "defaultColor", "onChange"];
 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 Switch = function Switch(_ref) {
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+/**
+ * Switch input component with custom labels and colors.
+ * This component renders a switch input with optional labels for the "on" and "off" states,
+ * and allows for custom colors for the switch background and labels.
+ * It supports disabled and invalid states, and handles change events.
+ */
+function Switch(_ref) {
   var ref = _ref.ref,
     label = _ref.label,
     checked = _ref.checked,
@@ -21,56 +27,52 @@ var Switch = function Switch(_ref) {
     disabled = _ref.disabled,
     error = _ref.error,
     width = _ref.width,
-    color = _ref.color;
-    _ref.name;
-    var onLabel = _ref.onLabel,
+    color = _ref.color,
+    name = _ref.name,
+    onLabel = _ref.onLabel,
     offLabel = _ref.offLabel,
     onLabelColor = _ref.onLabelColor,
     offLabelColor = _ref.offLabelColor,
     defaultColor = _ref.defaultColor,
     onChange = _ref.onChange,
     rest = _objectWithoutProperties(_ref, _excluded);
-  var _useState = react.useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    actualValue = _useState2[0],
-    setActualValue = _useState2[1];
-  var deferred = react.useDeferredValue(!!checked);
-  react.useEffect(function () {
-    setActualValue(deferred);
-  }, [deferred]);
+  var _useControlledValue = core.useControlledValue(!!checked, false),
+    currentValue = _useControlledValue.currentValue,
+    updateValue = _useControlledValue.updateValue;
   var handleChange = react.useCallback(function (e) {
     var _e$target$checked, _e$target$checked2;
-    setActualValue((_e$target$checked = e === null || e === void 0 ? void 0 : e.target.checked) !== null && _e$target$checked !== void 0 ? _e$target$checked : false);
+    updateValue((_e$target$checked = e === null || e === void 0 ? void 0 : e.target.checked) !== null && _e$target$checked !== void 0 ? _e$target$checked : false);
     onChange === null || onChange === void 0 || onChange((_e$target$checked2 = e === null || e === void 0 ? void 0 : e.target.checked) !== null && _e$target$checked2 !== void 0 ? _e$target$checked2 : false);
-  }, [onChange]);
+  }, [onChange, updateValue]);
   return /*#__PURE__*/jsxRuntime.jsxs("label", {
-    className: classNames(invalid ? "ring-danger-500" : "ring-primary-500", disabled ? "opacity-50 cursor-not-allowed" : "hover:opacity-100 cursor-pointer", "inline-flex gap-1 py-1 items-center relative cursor-pointer opacity-85 rounded ring-offset-2 has-[:focus-visible]:ring-1"),
+    className: utilities.cn(invalid ? "ring-danger-500" : "ring-primary-500", disabled ? "opacity-50 cursor-not-allowed" : "opacity-85 hover:opacity-100 cursor-pointer", "inline-flex gap-1 py-1 items-center relative rounded ring-offset-2 has-focus-visible:ring-1"),
     style: {
       width: width
     },
     children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
-      className: classNames(actualValue && getColor.getBgClass(color ? "".concat(color, "-500") : "primary-500"), !actualValue && (defaultColor ? getColor.getBgClass("".concat(defaultColor, "-500")) : "bg-tint-200"), "relative grid grid-cols-2 items-center h-6 min-w-10 cursor-pointer rounded-full p-1 transition-colors duration-200 ease-in-out"),
+      className: utilities.cn(currentValue && getColor.getBgClass(color ? "".concat(color, "-500") : "primary-500"), !currentValue && (defaultColor ? getColor.getBgClass("".concat(defaultColor, "-500")) : "bg-tint-200"), "relative grid grid-cols-2 items-center h-[1.5em] min-w-[2.5em] rounded-full p-[0.25em] transition-colors duration-200 ease-in-out"),
       style: {
-        backgroundColor: actualValue ? getColor.getColor(color) : getColor.getColor(defaultColor)
+        backgroundColor: currentValue ? getColor.getColor(color) : getColor.getColor(defaultColor)
       },
       children: [/*#__PURE__*/jsxRuntime.jsx("input", _objectSpread({
-        className: classNames("appearance-none absolute opacity-0 inset-0 bg-transparent border-none outline-none ring-0"),
+        className: utilities.cn("appearance-none absolute opacity-0 inset-0 bg-transparent border-none cursor-[inherit] outline-none ring-0"),
         "aria-invalid": invalid,
         "aria-disabled": disabled,
         disabled: disabled,
         "aria-errormessage": error,
         type: "checkbox",
+        name: name,
         ref: ref,
         size: 1,
         tabIndex: 0,
         autoComplete: "off",
-        checked: actualValue,
+        checked: !!currentValue,
         onChange: handleChange
       }, rest)), /*#__PURE__*/jsxRuntime.jsx("span", {
         "aria-hidden": "true",
-        className: classNames(!disabled && "shadow-sm", actualValue ? "translate-x-[100%]" : "translate-x-0", "pointer-events-none inline-block h-4 start-1 absolute rounded-full bg-white ring-0 transition duration-200 ease-in-out"),
+        className: utilities.cn(!disabled && "shadow-sm", currentValue ? "translate-x-full" : "translate-x-0", "pointer-events-none inline-block h-[1em] inset-s-[0.25em] absolute rounded-full bg-white ring-0 transition duration-200 ease-in-out"),
         style: {
-          width: "calc(50% - 0.25rem)"
+          width: "calc(50% - 0.25em)"
         }
       }), (!!onLabel || !!offLabel) && /*#__PURE__*/jsxRuntime.jsxs(react.Fragment, {
         children: [/*#__PURE__*/jsxRuntime.jsx("span", {
@@ -91,10 +93,10 @@ var Switch = function Switch(_ref) {
       invalid: invalid,
       error: error
     }), label && /*#__PURE__*/jsxRuntime.jsx("span", {
-      className: "flex-initial leading-5 truncate",
+      className: "flex-initial leading-tight truncate",
       children: label
     })]
   });
-};
+}
 
 exports.Switch = Switch;

package/dist/cjs/input/Textarea.js

@@ -2,73 +2,83 @@
 
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
-var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+var core = require('@react-fabric/core');
 var react = require('react');
 var InputWrapper = require('../internal/InputWrapper.js');
 var eventHandlers = require('../utils/eventHandlers.js');
 require('@react-fabric/utilities');
+var getProps = require('../utils/getProps.js');
 var jsxRuntime = require('react/jsx-runtime');
 
-var _excluded = ["ref", "value", "name", "invalid", "readOnly", "disabled", "required", "placeholder", "autoFocus", "rows", "maxRows", "variableRows", "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) {
-  var ref = _ref.ref,
-    value = _ref.value,
-    name = _ref.name,
-    invalid = _ref.invalid,
-    readOnly = _ref.readOnly,
-    disabled = _ref.disabled,
-    required = _ref.required,
-    placeholder = _ref.placeholder,
-    autoFocus = _ref.autoFocus,
-    _ref$rows = _ref.rows,
-    rows = _ref$rows === void 0 ? 5 : _ref$rows,
-    _ref$maxRows = _ref.maxRows,
-    maxRows = _ref$maxRows === void 0 ? 12 : _ref$maxRows,
-    variableRows = _ref.variableRows,
-    onChange = _ref.onChange,
-    onEnterPressed = _ref.onEnterPressed,
-    rest = _objectWithoutProperties(_ref, _excluded);
-  var _useState = react.useState(""),
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+/**
+ * Textarea component that allows users to input multi-line text.
+ * It supports features like variable row count, expandable behavior,
+ * and handling of focus, blur, and change events.
+ * This component is designed to be flexible and user-friendly,
+ * providing a clear interface for text input with optional validation and accessibility features.
+ */
+function Textarea(props) {
+  var value = props.value,
+    defaultValue = props.defaultValue,
+    onEnterPressed = props.onEnterPressed,
+    onChange = props.onChange,
+    onBlur = props.onBlur,
+    onFocus = props.onFocus,
+    disabled = props.disabled,
+    readOnly = props.readOnly,
+    invalid = props.invalid,
+    _props$rows = props.rows,
+    rows = _props$rows === void 0 ? 5 : _props$rows,
+    _props$maxRows = props.maxRows,
+    maxRows = _props$maxRows === void 0 ? 12 : _props$maxRows,
+    placeholder = props.placeholder,
+    name = props.name,
+    autoFocus = props.autoFocus,
+    expandable = props.expandable,
+    variableRows = props.variableRows,
+    allowClear = props.allowClear,
+    ref = props.ref;
+  var id = react.useId();
+  var _useControlledValue = core.useControlledValue(value, defaultValue),
+    currentValue = _useControlledValue.currentValue,
+    updateValue = _useControlledValue.updateValue;
+  var _useState = react.useState(function () {
+      return rows;
+    }),
     _useState2 = _slicedToArray(_useState, 2),
-    actualValue = _useState2[0],
-    setActualValue = _useState2[1];
-  var _useState3 = react.useState(rows),
-    _useState4 = _slicedToArray(_useState3, 2),
-    fixedRows = _useState4[0],
-    setFixedRows = _useState4[1];
-  var deferred = react.useDeferredValue(value);
+    fixedRows = _useState2[0],
+    setFixedRows = _useState2[1];
   var wrapperRef = react.useRef(null);
-  react.useEffect(function () {
-    setActualValue(deferred !== null && deferred !== void 0 ? deferred : "");
-  }, [deferred]);
   var handleChange = react.useCallback(function (e) {
-    var value = e === null || e === void 0 ? void 0 : e.target.value;
-    setActualValue(value !== null && value !== void 0 ? value : "");
-    onChange === null || onChange === void 0 || onChange(value !== null && value !== void 0 ? value : undefined);
-  }, [onChange]);
+    var _e$target$value;
+    var value = (_e$target$value = e === null || e === void 0 ? void 0 : e.target.value) !== null && _e$target$value !== void 0 ? _e$target$value : defaultValue;
+    updateValue(value);
+    onChange === null || onChange === void 0 || onChange(value);
+  }, [defaultValue, updateValue, onChange]);
   react.useEffect(function () {
     if (variableRows) {
-      var _actualValue$split$le;
-      var lines = (_actualValue$split$le = actualValue === null || actualValue === void 0 ? void 0 : actualValue.split("\n").length) !== null && _actualValue$split$le !== void 0 ? _actualValue$split$le : 1;
+      var _currentValue$split$l;
+      var lines = (_currentValue$split$l = currentValue === null || currentValue === void 0 ? void 0 : currentValue.split("\n").length) !== null && _currentValue$split$l !== void 0 ? _currentValue$split$l : 1;
+      // eslint-disable-next-line @eslint-react/set-state-in-effect
       setFixedRows(Math.max(rows, Math.min(maxRows, lines)));
-    } else {
-      setFixedRows(rows);
     }
-  }, [actualValue, variableRows, rows, maxRows]);
+  }, [currentValue, variableRows, rows, maxRows]);
+  var handleEnterPressed = eventHandlers.useHandleEnter(onEnterPressed, {
+    preventDefault: !!onEnterPressed
+  });
   return /*#__PURE__*/jsxRuntime.jsx(InputWrapper.InputWrapper, _objectSpread(_objectSpread({
-    showClear: !!actualValue,
+    id: id,
+    textarea: true,
+    textareaExpandable: expandable,
+    showClear: allowClear && (currentValue !== null && currentValue !== void 0 ? currentValue : "") !== (defaultValue !== null && defaultValue !== void 0 ? defaultValue : "") && !disabled && !readOnly,
     onClear: handleChange,
-    invalid: invalid,
-    readOnly: readOnly,
-    disabled: disabled,
-    required: required,
-    wrapperRef: wrapperRef,
-    textarea: true
-  }, rest), {}, {
+    ref: wrapperRef
+  }, getProps.getWrapperProps(props)), {}, {
     children: /*#__PURE__*/jsxRuntime.jsx("textarea", {
-      className: "appearance-none self-stretch bg-transparent py-1 px-2 flex-1 border-none outline-none ring-0 min-h-20 resize-none",
+      id: id,
+      className: "appearance-none self-stretch bg-transparent py-1 px-4 not-first:ps-2 not-last:pe-2 flex-1 border-none outline-none ring-0 min-h-12 resize-none",
       "aria-invalid": invalid,
       "aria-disabled": disabled,
       "aria-readonly": readOnly,
@@ -81,11 +91,13 @@ var Textarea = function Textarea(_ref) {
       ref: ref,
       autoComplete: "off",
       autoFocus: autoFocus,
-      value: actualValue,
+      value: currentValue !== null && currentValue !== void 0 ? currentValue : "",
+      onBlur: onBlur,
+      onFocus: onFocus,
       onChange: handleChange,
-      onKeyDown: eventHandlers.handleEnter(onEnterPressed)
+      onKeyDown: handleEnterPressed
     })
   }));
-};
+}
 
 exports.Textarea = Textarea;