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

package/dist/esm/input/Password.js

@@ -2,65 +2,63 @@
 
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import { Tooltip, Button, CoreIcons } from '@react-fabric/core';
-import classNames from 'classnames';
-import { useState, useDeferredValue, useMemo, useEffect, useCallback } from 'react';
+import { useControlledValue, Tooltip, Button } from '@react-fabric/core';
+import { cn } from '@react-fabric/utilities';
+import { useId, useState, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { InputWrapper } from '../internal/InputWrapper.js';
-import { handleEnter } from '../utils/eventHandlers.js';
-import '@react-fabric/utilities';
+import { useHandleEnter } from '../utils/eventHandlers.js';
+import { getWrapperProps } from '../utils/getProps.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
-var _excluded = ["ref", "value", "name", "strength", "invalid", "readOnly", "disabled", "required", "placeholder", "autoFocus", "showToggle", "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) {
-  var ref = _ref.ref,
-    value = _ref.value,
-    name = _ref.name,
-    strength = _ref.strength,
-    invalid = _ref.invalid,
-    readOnly = _ref.readOnly,
-    disabled = _ref.disabled,
-    required = _ref.required,
-    placeholder = _ref.placeholder,
-    autoFocus = _ref.autoFocus,
-    showToggle = _ref.showToggle,
-    onChange = _ref.onChange,
-    onEnterPressed = _ref.onEnterPressed,
-    rest = _objectWithoutProperties(_ref, _excluded);
+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; }
+/**
+ * Password input component with optional strength meter and toggle visibility.
+ */
+function Password(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,
+    showToggle = props.showToggle,
+    strength = props.strength,
+    placeholder = props.placeholder,
+    name = props.name,
+    autoFocus = props.autoFocus,
+    allowClear = props.allowClear,
+    _props$autoComplete = props.autoComplete,
+    autoComplete = _props$autoComplete === void 0 ? "off" : _props$autoComplete,
+    ref = props.ref;
+  var id = useId();
+  var _useControlledValue = useControlledValue(value, defaultValue),
+    currentValue = _useControlledValue.currentValue,
+    updateValue = _useControlledValue.updateValue;
   var _useTranslation = useTranslation("form"),
     t = _useTranslation.t;
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     show = _useState2[0],
     setShow = _useState2[1];
-  var _useState3 = useState(""),
-    _useState4 = _slicedToArray(_useState3, 2),
-    actualValue = _useState4[0],
-    setActualValue = _useState4[1];
-  var deferred = useDeferredValue(value);
-  var handleEnterPressed = useMemo(function () {
-    return handleEnter(onEnterPressed);
-  }, [onEnterPressed]);
-  useEffect(function () {
-    setActualValue(deferred !== null && deferred !== void 0 ? deferred : "");
-  }, [deferred]);
+  var handleEnterPressed = useHandleEnter(onEnterPressed);
   var handleChange = useCallback(function (e) {
-    var value = e === null || e === void 0 ? void 0 : e.target.value;
-    setActualValue(value !== null && value !== void 0 ? value : "");
-    onChange === null || onChange === void 0 || onChange(value !== null && value !== void 0 ? value : undefined);
-  }, [onChange]);
+    var _e$target$value;
+    var value = (_e$target$value = e === null || e === void 0 ? void 0 : e.target.value) !== null && _e$target$value !== void 0 ? _e$target$value : defaultValue;
+    updateValue(value);
+    onChange === null || onChange === void 0 || onChange(value);
+  }, [defaultValue, updateValue, onChange]);
   return /*#__PURE__*/jsxs(InputWrapper, _objectSpread(_objectSpread({
-    showClear: !!actualValue,
+    id: id,
+    showClear: allowClear && !!currentValue && !disabled && !readOnly,
     onClear: handleChange,
-    invalid: invalid,
-    readOnly: readOnly,
-    disabled: disabled,
-    required: required
-  }, rest), {}, {
-    decorateEnd: showToggle && /*#__PURE__*/jsx(Tooltip, {
+    invalid: invalid
+  }, getWrapperProps(props)), {}, {
+    actionButton: showToggle && currentValue && /*#__PURE__*/jsx(Tooltip, {
       color: "warning",
       content: t(show ? "password.hide" : "password.show"),
       children: /*#__PURE__*/jsx(Button, {
@@ -68,14 +66,15 @@ var Password = function Password(_ref) {
         color: "warning",
         variant: "link",
         "aria-label": t(show ? "password.hide" : "password.show"),
-        icon: show ? CoreIcons.eyeOff : CoreIcons.eye,
+        icon: show ? "icon-[mdi--eye-off-outline]" : "icon-[mdi--eye-outline]",
         onClick: function onClick() {
           return setShow(!show);
         }
       })
     }),
     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,
@@ -87,18 +86,21 @@ var Password = function Password(_ref) {
       size: 1,
       type: show ? "text" : "password",
       ref: ref,
-      autoComplete: "off",
+      autoComplete: autoComplete,
       autoFocus: autoFocus,
-      value: actualValue,
+      value: currentValue !== null && currentValue !== void 0 ? currentValue : "",
+      onBlur: onBlur,
+      onFocus: onFocus,
       onChange: handleChange,
       onKeyDown: handleEnterPressed
     }), !!strength && /*#__PURE__*/jsx("div", {
-      className: classNames("absolute bottom-px h-[3px] inset-x-0 after:block after:h-full after:bg-dimmed", "ltr:bg-gradient-to-r rtl:bg-gradient-to-l from-danger-500 via-marigold-500 to-jade-500"),
+      className: cn("absolute bottom-px h-0.5 inset-x-0 after:block after:h-full after:bg-dimmed"),
       style: {
-        paddingInlineStart: "".concat(strength > 1 ? 100 : strength * 100, "%")
+        paddingInlineStart: "".concat(strength > 1 ? 100 : strength * 100, "%"),
+        background: "linear-gradient(to right,var(--color-scarlet-500) 25%,var(--color-amber-500) 50%,var(--color-jade-500) 75%,var(--color-avocado-500) 100%)"
       }
     })]
   }));
-};
+}
 
 export { Password };

package/dist/esm/input/Radio.js

@@ -2,45 +2,52 @@
 
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import { CoreIcons, Icon } from '@react-fabric/core';
-import classNames from 'classnames';
+import { Icon } from '@react-fabric/core';
+import { cn } from '@react-fabric/utilities';
 import { useMemo, useCallback } from 'react';
+import { ErrorIcon } from '../internal/ErrorIcon.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
-var _excluded = ["ref", "name", "label", "value", "invalid", "disabled", "error", "width", "icon", "iconChecked", "onChange"];
+var _excluded = ["ref", "name", "label", "value", "invalid", "disabled", "width", "icon", "error", "iconChecked", "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 Radio = function Radio(_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; }
+/**
+ * Radio input component with custom icons and label.
+ *
+ * This component renders a radio button with an optional label and custom icons for checked and unchecked states.
+ * It supports disabled and invalid states, and allows for custom width.
+ */
+function Radio(_ref) {
   var ref = _ref.ref,
     name = _ref.name,
     label = _ref.label,
     value = _ref.value,
     invalid = _ref.invalid,
-    disabled = _ref.disabled;
-    _ref.error;
-    var width = _ref.width,
+    disabled = _ref.disabled,
+    width = _ref.width,
     icon = _ref.icon,
+    error = _ref.error,
     iconChecked = _ref.iconChecked,
     onChange = _ref.onChange,
     rest = _objectWithoutProperties(_ref, _excluded);
   var iconOn = useMemo(function () {
     var _ref2;
-    return (_ref2 = iconChecked !== null && iconChecked !== void 0 ? iconChecked : icon) !== null && _ref2 !== void 0 ? _ref2 : CoreIcons.radioOn;
+    return (_ref2 = iconChecked !== null && iconChecked !== void 0 ? iconChecked : icon) !== null && _ref2 !== void 0 ? _ref2 : "icon-[mdi--radiobox-marked]";
   }, [icon, iconChecked]);
   var iconOff = useMemo(function () {
-    return icon !== null && icon !== void 0 ? icon : CoreIcons.radioOff;
+    return icon !== null && icon !== void 0 ? icon : "icon-[mdi--radiobox-blank]";
   }, [icon]);
   var handleChange = useCallback(function (e) {
     // @ts-expect-error ignore
-    (e === null || e === void 0 ? void 0 : e.target.checked) && value && (onChange === null || onChange === void 0 ? void 0 : onChange(value));
+    if (e !== null && e !== void 0 && e.target.checked && value) onChange === null || onChange === void 0 || onChange(value);
   }, [onChange, value]);
   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" : "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"),
     style: {
       width: width
     },
     children: [/*#__PURE__*/jsx("input", _objectSpread({
-      className: classNames("appearance-none absolute peer opacity-0 inset-0 bg-transparent border-none outline-none ring-0"),
+      className: cn("appearance-none absolute peer opacity-0 inset-0 bg-transparent border-none outline-none ring-0"),
       "aria-disabled": disabled,
       disabled: disabled,
       type: "radio",
@@ -51,20 +58,23 @@ var Radio = function Radio(_ref) {
       autoComplete: "off",
       onChange: handleChange
     }, rest)), /*#__PURE__*/jsx(Icon, {
-      className: classNames("p-0.5 hidden peer-checked:inline-block", icon && !iconChecked && "bg-primary-500 text-white"),
+      className: cn("p-0.5 not-peer-checked:hidden", icon && !iconChecked && "bg-primary-500 text-white!"),
       color: invalid ? "danger" : "primary",
       size: "1.25em",
       icon: iconOn
     }), /*#__PURE__*/jsx(Icon, {
-      className: classNames("p-0.5 peer-checked:hidden"),
+      className: cn("p-0.5 peer-checked:hidden"),
       color: invalid ? "danger" : "primary",
       size: "1.25em",
       icon: iconOff
+    }), /*#__PURE__*/jsx(ErrorIcon, {
+      invalid: invalid,
+      error: error
     }), label && /*#__PURE__*/jsx("span", {
-      className: "flex-initial leading-none truncate",
+      className: "flex-initial leading-tight truncate",
       children: label
     })]
   });
-};
+}
 
 export { Radio };

package/dist/esm/input/RadioGroup.js

@@ -2,32 +2,47 @@
 
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import { Children, cloneElement } from 'react';
+import { cloneChildren } from '@react-fabric/core';
+import { cn } from '@react-fabric/utilities';
+import { isValidElement, cloneElement } from 'react';
 import { FieldWrapper } from '../internal/FieldWrapper.js';
 import { jsx } from 'react/jsx-runtime';
 
-var _excluded = ["children", "name", "className", "optionWidth", "onChange"];
+var _excluded = ["children", "name", "className", "optionWidth", "vertical", "value", "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 RadioGroup = function RadioGroup(_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; }
+/**
+ * RadioGroup component for rendering a group of radio buttons.
+ * It allows for customization of the label, options, and layout.
+ * The component supports inline and vertical orientations, and can handle change events.
+ */
+function RadioGroup(_ref) {
+  var _cloneChildren;
   var children = _ref.children,
     name = _ref.name,
     className = _ref.className,
     optionWidth = _ref.optionWidth,
+    vertical = _ref.vertical,
+    value = _ref.value,
     onChange = _ref.onChange,
     rest = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/jsx(FieldWrapper, _objectSpread(_objectSpread({}, rest), {}, {
     children: /*#__PURE__*/jsx("div", {
-      className: className,
-      children: Children.map(children, function (child) {
-        return /*#__PURE__*/cloneElement(child, {
-          name: name,
-          onChange: onChange,
-          width: optionWidth
-        });
+      className: cn(className, vertical && "flex flex-col gap-1"),
+      children: (_cloneChildren = cloneChildren(children)) === null || _cloneChildren === void 0 ? void 0 : _cloneChildren.map(function (child) {
+        if (/*#__PURE__*/isValidElement(child)) {
+          var _child$props;
+          return /*#__PURE__*/cloneElement(child, {
+            name: name,
+            checked: ((_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.value) === value,
+            onChange: onChange,
+            width: optionWidth
+          });
+        }
+        return child;
       })
     })
   }));
-};
+}
 
 export { RadioGroup };

package/dist/esm/input/{Range.js → RangeSlider.js}

@@ -2,51 +2,49 @@
 
 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", "format", "autoFocus", "disabled", "readOnly", "onBlur", "onChange", "onEnterPressed", "onFocus", "onSlide", "invalid"];
 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 Range input
+ * RangeSlider component for rendering a range slider input.
+ * It supports vertical orientation, custom colors, step increments,
+ * min/max values, and display of labels and value tooltips.
+ * The component uses the Ranger library for handling the slider functionality.
+ * It also provides error handling and supports disabled and read-only states.
+ * The component is designed to be flexible and customizable, allowing for various configurations.
  */
-var Range = function Range(_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,
-    format = _ref.format;
-    _ref.autoFocus;
-    var disabled = _ref.disabled,
-    readOnly = _ref.readOnly;
-    _ref.onBlur;
-    var onChange = _ref.onChange;
-    _ref.onEnterPressed;
-    _ref.onFocus;
-    var onSlide = _ref.onSlide,
-    invalid = _ref.invalid,
-    rest = _objectWithoutProperties(_ref, _excluded);
-  var _useState = useState([0, 0]),
+function RangeSlider(props) {
+  var value = props.value,
+    showLabels = props.showLabels,
+    showValue = props.showValue,
+    onChange = props.onChange,
+    onSlide = props.onSlide,
+    ranges = props.ranges,
+    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(function () {
+      return [0, 0];
+    }),
     _useState2 = _slicedToArray(_useState, 2),
     actualValue = _useState2[0],
     setActualValue = _useState2[1];
@@ -64,14 +62,16 @@ var Range = function Range(_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(deferred !== null && deferred !== void 0 ? deferred : [min, max]);
   }, [deferred, min, max]);
   useEffect(function () {
+    // eslint-disable-next-line @eslint-react/set-state-in-effect
     setDisplayValue(!!showValue);
   }, [showValue]);
   var handleChange = useCallback(function (val) {
     setActualValue(val !== null && val !== void 0 ? val : [min, max]);
-    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, min, max]);
   var minDisplay = useMemo(function () {
     return /*#__PURE__*/jsx("span", {
@@ -106,55 +106,50 @@ var Range = function Range(_ref) {
       return handleChange([values[0], values[1]]);
     }
   });
-  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 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 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("flex-1 relative flex items-center", vertical ? "my-2 w-8" : "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,
-            valueStyles = _ref4.valueStyles;
+        }), rangerInstance.handles.map(function (_ref3) {
+          var key = _ref3.key,
+            value = _ref3.value,
+            props = _ref3.props,
+            styles = _ref3.styles,
+            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-1 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-1 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-1 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 && (key === 0 ? "-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-1 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 ? "inset-e-0 ltr:translate-x-full rtl:-translate-x-full translate-y-2" : "top-1/2 -translate-y-1/2", !vertical && (key === 0 ? "-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": key === 0 ? "start" : "end",
               style: valueStyles,
               children: Format.number(value, format)
@@ -164,6 +159,6 @@ var Range = function Range(_ref) {
       }), showLabels && (vertical ? minDisplay : maxDisplay)]
     })
   }));
-};
+}
 
-export { Range };
+export { RangeSlider };