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

package/dist/esm/input/Search.js

@@ -1,91 +1,83 @@
 'use client';
 
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import { useDebounce, Icon, CoreIcons, Button } from '@react-fabric/core';
-import { useState, useDeferredValue, useRef, useMemo, useEffect, useCallback, Fragment } from 'react';
+import { useControlledValue, useDebounce, Icon, Button } from '@react-fabric/core';
+import { useId, useRef, useCallback, Fragment } from 'react';
 import { InputWrapper } from '../internal/InputWrapper.js';
-import { handleEnter } from '../utils/eventHandlers.js';
+import { useHandleEnter } from '../utils/eventHandlers.js';
 import '@react-fabric/utilities';
+import { getWrapperProps } from '../utils/getProps.js';
 import { jsx, jsxs } from '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 = useState(""),
-    _useState2 = _slicedToArray(_useState, 2),
-    actualValue = _useState2[0],
-    setActualValue = _useState2[1];
-  var deferred = useDeferredValue(value);
-  var refValue = 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 = useId();
+  var _useControlledValue = useControlledValue(value, defaultValue),
+    currentValue = _useControlledValue.currentValue,
+    updateValue = _useControlledValue.updateValue;
+  var valueRef = useRef("");
   var handleSearch = 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 = useMemo(function () {
-    return handleEnter(handleSearch);
-  }, [handleSearch]);
-  useEffect(function () {
-    setActualValue(deferred !== null && deferred !== void 0 ? deferred : "");
-  }, [deferred]);
+  var handleEnterPressed = useHandleEnter(handleSearch);
   var handleChange = 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__*/jsx(InputWrapper, _objectSpread(_objectSpread({
-    showClear: !!actualValue,
+    id: id,
+    showClear: allowClear && (currentValue !== null && currentValue !== void 0 ? currentValue : "") !== (defaultValue !== null && defaultValue !== void 0 ? defaultValue : "") && !disabled && !readOnly,
     onClear: handleChange,
-    allowClear: allowClear,
-    invalid: invalid,
-    readOnly: readOnly,
-    disabled: disabled,
-    required: required,
-    decorateStart: decorateStart,
-    decorateEnd: /*#__PURE__*/jsxs(Fragment, {
-      children: [decorateEnd, searching && /*#__PURE__*/jsx(Icon, {
+    hasStepper: true
+  }, getWrapperProps(props)), {}, {
+    actionButton: /*#__PURE__*/jsxs(Fragment, {
+      children: [searching && /*#__PURE__*/jsx(Icon, {
         className: "p-2",
-        icon: CoreIcons.spinner,
-        animate: "spin"
-      }), !searching && /*#__PURE__*/jsx(Button, {
+        icon: "icon-[svg-spinners--eclipse]"
+      }), !searching && !hideHandle && /*#__PURE__*/jsx(Button, {
         tabIndex: -1,
         variant: "link",
         "aria-label": "search",
-        disabled: !actualValue,
-        icon: CoreIcons.search,
+        disabled: !currentValue,
+        icon: "icon-[mdi--magnify]",
         onClick: handleSearch
       })]
-    })
-  }, rest), {}, {
+    }),
     children: /*#__PURE__*/jsx("input", {
-      className: "appearance-none bg-transparent py-1 px-2 flex-1 border-none outline-none ring-0",
+      id: id,
+      className: "appearance-none bg-transparent py-1 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
     })
   }));
-};
+}
 
 export { Search };

package/dist/esm/input/Slider.js

@@ -2,51 +2,45 @@
 
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import { Format } from '@react-fabric/utilities';
-import classNames from 'classnames';
+import { Format, cn } from '@react-fabric/utilities';
 import { useState, useDeferredValue, useMemo, useEffect, useCallback, Fragment } from 'react';
 import { InputWrapper } from '../internal/InputWrapper.js';
 import { useRanger } from '../ranger/index.js';
+import '@floating-ui/react';
+import '@react-fabric/core';
+import { getWrapperProps } from '../utils/getProps.js';
 import { jsx, jsxs } from '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 = 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]);
   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]);
   useEffect(function () {
+    // eslint-disable-next-line @eslint-react/set-state-in-effect
     setDisplayValue(!!showValue);
   }, [showValue]);
   var handleChange = 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 = useMemo(function () {
     return /*#__PURE__*/jsx("span", {
@@ -108,56 +104,51 @@ var Slider = function Slider(_ref) {
       return handleChange(values[0]);
     }
   });
-  return /*#__PURE__*/jsx(InputWrapper, _objectSpread(_objectSpread({}, rest), {}, {
-    noOutline: true,
-    error: error,
-    invalid: invalid,
-    isDisabled: disabled,
-    isReadOnly: readOnly,
-    canClear: !!actualValue,
+  return /*#__PURE__*/jsx(InputWrapper, _objectSpread(_objectSpread({}, getWrapperProps(props)), {}, {
+    borderless: true,
+    focusRing: true,
     children: /*#__PURE__*/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: 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__*/jsxs("div", {
         ref: rangerInstance.trackElRef,
-        className: classNames("flex-auto relative flex items-center", vertical ? "my-2 w-8" : "mx-2 h-8"),
+        className: 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__*/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: 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__*/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: 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__*/jsxs(Fragment, {
             children: [/*#__PURE__*/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: 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__*/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: 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 : "∞" : Format.number(value, format)
@@ -167,6 +158,6 @@ var Slider = function Slider(_ref) {
       }), showLabels && (vertical ? minDisplay : maxDisplay)]
     })
   }));
-};
+}
 
 export { Slider };

package/dist/esm/input/Switch.js

@@ -1,19 +1,25 @@
 'use client';
 
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import classNames from 'classnames';
-import { useState, useDeferredValue, useEffect, useCallback, Fragment } from 'react';
+import { useControlledValue } from '@react-fabric/core';
+import { cn } from '@react-fabric/utilities';
+import { useCallback, Fragment } from 'react';
 import { ErrorIcon } from '../internal/ErrorIcon.js';
-import '@react-fabric/utilities';
-import { getBgClass, getColor, getColorClass } from '../utils/getColor.js';
+import '@floating-ui/react';
+import { getColor, getColorClass, getBgClass } from '../utils/getColor.js';
 import { jsxs, jsx } from '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 = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    actualValue = _useState2[0],
-    setActualValue = _useState2[1];
-  var deferred = useDeferredValue(!!checked);
-  useEffect(function () {
-    setActualValue(deferred);
-  }, [deferred]);
+  var _useControlledValue = useControlledValue(!!checked, false),
+    currentValue = _useControlledValue.currentValue,
+    updateValue = _useControlledValue.updateValue;
   var handleChange = 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__*/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: 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__*/jsxs("div", {
-      className: classNames(actualValue && getBgClass(color ? "".concat(color, "-500") : "primary-500"), !actualValue && (defaultColor ? 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: cn(currentValue && getBgClass(color ? "".concat(color, "-500") : "primary-500"), !currentValue && (defaultColor ? 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(color) : getColor(defaultColor)
+        backgroundColor: currentValue ? getColor(color) : getColor(defaultColor)
       },
       children: [/*#__PURE__*/jsx("input", _objectSpread({
-        className: classNames("appearance-none absolute opacity-0 inset-0 bg-transparent border-none outline-none ring-0"),
+        className: 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__*/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: 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__*/jsxs(Fragment, {
         children: [/*#__PURE__*/jsx("span", {
@@ -91,10 +93,10 @@ var Switch = function Switch(_ref) {
       invalid: invalid,
       error: error
     }), label && /*#__PURE__*/jsx("span", {
-      className: "flex-initial leading-5 truncate",
+      className: "flex-initial leading-tight truncate",
       children: label
     })]
   });
-};
+}
 
 export { Switch };