@algolia/satellite 1.1.0 → 1.1.1

package/dist/cjs/Fields/RangeSlider/RangeSlider.js

@@ -0,0 +1,125 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.RangeSlider = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _reactSlider = require("@radix-ui/react-slider");
+var _clsx = _interopRequireDefault(require("clsx"));
+var _react = require("react");
+var _colors = _interopRequireDefault(require("../../styles/colors"));
+var _satellitePrefixer = _interopRequireDefault(require("../../styles/helpers/satellitePrefixer"));
+var _Field = require("../Field");
+var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["id", "className", "value", "defaultValue", "onChange", "onCommit", "disabled", "required", "min", "max", "track1Color", "track2Color"];
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8; // Prevents unwanted number narrowing
+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) { (0, _defineProperty2["default"])(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 TRACK_SHADOWS_CLASSNAME = (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["shadow-[inset_0_1px_3px_0_rgb(0_0_0_/_10%),0_0.5px_0_0_rgb(255_255_255_/_5%)]"])));
+var coerceToRadixValue = function coerceToRadixValue(value) {
+  return typeof value === "number" ? [value] : value;
+};
+var getThumbCount = function getThumbCount(value) {
+  return Array.isArray(value) ? value.length : 1;
+};
+var ThumbGroove = function ThumbGroove(_ref) {
+  var className = _ref.className,
+    isInvalid = _ref.isInvalid,
+    disabled = _ref.disabled;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+    className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["h-3 w-px absolute top-1.5\n      ", "\n      ", "\n      ", ""])), !isInvalid && !disabled && "bg-grey-500 group-hover:bg-grey-600", disabled && "bg-grey-300 group-hover:bg-grey-300", isInvalid && !disabled && "bg-red-700 group-hover:bg-red-700"), className)
+  });
+};
+var RangeSliderInternal = function RangeSliderInternal(_ref2, ref) {
+  var idProp = _ref2.id,
+    className = _ref2.className,
+    value = _ref2.value,
+    defaultValue = _ref2.defaultValue,
+    onChange = _ref2.onChange,
+    onCommit = _ref2.onCommit,
+    disabled = _ref2.disabled,
+    _ref2$required = _ref2.required,
+    required = _ref2$required === void 0 ? false : _ref2$required,
+    _ref2$min = _ref2.min,
+    min = _ref2$min === void 0 ? 0 : _ref2$min,
+    _ref2$max = _ref2.max,
+    max = _ref2$max === void 0 ? 100 : _ref2$max,
+    track1Color = _ref2.track1Color,
+    track2Color = _ref2.track2Color,
+    otherProps = (0, _objectWithoutProperties2["default"])(_ref2, _excluded);
+  var thumbsCount = getThumbCount(value !== null && value !== void 0 ? value : defaultValue);
+  var trackColors = {
+    track1: disabled ? _colors["default"].grey[200] : track1Color,
+    track2: disabled ? _colors["default"].grey[100] : track2Color
+  };
+  var _useField = (0, _Field.useField)({
+      required: required
+    }),
+    state = _useField.state,
+    labelId = _useField.labelId,
+    descriptionId = _useField.descriptionId,
+    inputId = _useField.inputId;
+  var isInvalid = state.status === "invalid";
+  var id = idProp !== null && idProp !== void 0 ? idProp : inputId;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactSlider.Root, _objectSpread(_objectSpread({}, otherProps), {}, {
+    className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["relative h-6 min-w-[200px] flex items-center select-none touch-none aria-disabled:opacity-70 cursor-pointer aria-disabled:cursor-not-allowed"]))), className),
+    value: coerceToRadixValue(value),
+    defaultValue: coerceToRadixValue(defaultValue),
+    onValueChange: function onValueChange(value) {
+      return (// @ts-expect-error
+        onChange === null || onChange === void 0 ? void 0 : onChange(value.length === 1 ? value[0] : value)
+      );
+    },
+    onValueCommit: function onValueCommit(value) {
+      return (// @ts-expect-error
+        onCommit === null || onCommit === void 0 ? void 0 : onCommit(value.length === 1 ? value[0] : value)
+      );
+    },
+    disabled: disabled,
+    max: max,
+    min: min,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactSlider.SliderTrack, {
+      className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["relative h-1 flex-1 rounded bg-grey-100 ", ""])), isInvalid && "bg-red-100"), TRACK_SHADOWS_CLASSNAME),
+      style: {
+        backgroundColor: trackColors.track2
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactSlider.SliderRange, {
+        className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["absolute rounded-full h-full bg-accent-600 ", ""])), isInvalid && "bg-red-700"), TRACK_SHADOWS_CLASSNAME),
+        style: {
+          backgroundColor: trackColors.track1
+        }
+      })
+    }), Array(thumbsCount).fill(undefined).map(function (_, idx) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactSlider.SliderThumb, {
+        ref: ref,
+        id: id && (idx === 0 ? id : "".concat(id, "-").concat(idx)),
+        "aria-labelledby": labelId,
+        "aria-describedby": descriptionId,
+        "aria-required": required,
+        "aria-invalid": isInvalid,
+        className: (0, _satellitePrefixer["default"])(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["group absolute -translate-x-1.5 -translate-y-3\n              w-3 h-6 rounded-[2px] border\n              bg-white bg-gradient-to-b from-white to-grey-50 shadow-[0_1px_0_0_rgb(35_38_59_/_5%)]\n              ", "\n              ", "\n              ", "\n            "])), !isInvalid && !disabled && "hover:border-grey-600", isInvalid && !disabled && "border-red-700 hover:border-red-700 focus:outline-red-700", disabled ? "border-grey-300" : "border-grey-500"),
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(ThumbGroove, {
+          className: (0, _satellitePrefixer["default"])(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["right-1.5"]))),
+          disabled: disabled,
+          isInvalid: isInvalid
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(ThumbGroove, {
+          className: (0, _satellitePrefixer["default"])(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["left-1.5"]))),
+          disabled: disabled,
+          isInvalid: isInvalid
+        })]
+      }, "thumb_".concat(idx));
+    })]
+  }));
+};
+
+/**
+ * The `RangeSlider` component is an input field where users select one or two numeric values within a given range (minimum and maximum values).
+ *
+ * See the [Range Slider documentation page](https://satellite.algolia.com/components/controls/range-slider) for more information.
+ */
+var RangeSlider = exports.RangeSlider = /*#__PURE__*/(0, _react.forwardRef)(RangeSliderInternal);
+RangeSlider.displayName = "RangeSlider";

package/dist/cjs/Fields/Select/Select.js

@@ -0,0 +1,73 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Select = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _react = require("react");
+var _Icons = require("../../Icons");
+var _satellitePrefixer = _interopRequireDefault(require("../../styles/helpers/satellitePrefixer"));
+var _Field = require("../Field");
+var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["variant", "className", "required"];
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
+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) { (0, _defineProperty2["default"])(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 VARIANT_CLASSNAMES = {
+  small: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["select-input-small"]))),
+  medium: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["select-input-medium"]))),
+  large: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["select-input-large"])))
+};
+var InvalidIcon = function InvalidIcon() {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icons.XIcon, {
+    className: (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["h-4 w-4 mr-10 text-white bg-red-700 p-px rounded-full absolute top-1/2 right-0 -translate-y-1/2"])))
+  });
+};
+var ValidatedIcon = function ValidatedIcon() {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icons.CheckIcon, {
+    className: (0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["h-4 w-4 mr-10 text-white bg-accent-600 p-px rounded-full absolute top-1/2 right-0 -translate-y-1/2"])))
+  });
+};
+
+/**
+ * The `Select` component provides a dropdown menu, allowing users to choose one option from a list.
+ *
+ * See the [Select documentation page](https://satellite.algolia.com/components/forms/select) for more information.
+ */
+var Select = exports.Select = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+  var _props$id;
+  var _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? "medium" : _ref$variant,
+    className = _ref.className,
+    required = _ref.required,
+    props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  var _useField = (0, _Field.useField)({
+      required: required
+    }),
+    state = _useField.state,
+    labelId = _useField.labelId,
+    descriptionId = _useField.descriptionId,
+    inputId = _useField.inputId;
+  var isValidated = state.status === "validated";
+  var isInvalid = state.status === "invalid";
+  var StatusIcon = isInvalid ? InvalidIcon : state.status === "validated" ? ValidatedIcon : _react.Fragment;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: (0, _satellitePrefixer["default"])(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["relative w-full"]))),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("select", _objectSpread(_objectSpread({
+      "aria-labelledby": labelId,
+      "aria-describedby": descriptionId
+    }, props), {}, {
+      id: (_props$id = props.id) !== null && _props$id !== void 0 ? _props$id : inputId,
+      required: required,
+      "aria-invalid": isInvalid,
+      className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["select-input display-body"]))), VARIANT_CLASSNAMES[variant], isInvalid && (0, _satellitePrefixer["default"])(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["select-input-invalid"]))), isValidated && (0, _satellitePrefixer["default"])(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["select-input-validated"]))), className),
+      ref: ref
+    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(StatusIcon, {})]
+  });
+});
+Select.displayName = "Select";

package/dist/cjs/Fields/Select/Select.tailwind.js

@@ -0,0 +1,95 @@
+"use strict";
+
+// @ts-check
+var plugin = require("tailwindcss/plugin");
+var disabledColor = require("../../styles/disabledColor");
+var _require = require("../../styles/helpers/icons"),
+  selectIconBG = _require.selectIconBG;
+var selectPlugin = plugin(function (_ref) {
+  var addComponents = _ref.addComponents,
+    theme = _ref.theme;
+  addComponents({
+    // I chose .select-input to avoid name collision with tailwindcss.com/docs/user-select/
+    ".select-input": {
+      appearance: "none",
+      outline: "none",
+      cursor: "pointer",
+      position: "relative",
+      padding: "0 ".concat(theme("spacing.10"), " 0 ").concat(theme("spacing.4")),
+      width: "100%",
+      color: theme("colors.grey.900"),
+      backgroundColor: theme("colors.white"),
+      backgroundImage: "\n        ".concat(selectIconBG(theme("colors.grey.500")), ",\n        linear-gradient(-180deg, ").concat(theme("colors.white"), " 0%, ").concat(theme("colors.grey.50"), " 100%)\n      "),
+      backgroundPosition: "right ".concat(theme("spacing.4"), " center, 0 0"),
+      backgroundRepeat: "no-repeat",
+      borderRadius: theme("borderRadius.DEFAULT"),
+      border: "1px solid ".concat(theme("colors.grey.500")),
+      boxShadow: "0 1px 0 0 ".concat(theme("colors.shadow.5")),
+      transition: "all 100ms ease-in-out",
+      "&::-moz-focus-inner, &:-moz-focusring": {
+        outline: "none",
+        color: "transparent",
+        textShadow: "0 0 0 ".concat(theme("colors.grey.900"))
+      },
+      "&:focus::-ms-value": {
+        color: theme("colors.grey.900")
+      },
+      "& > option": {
+        textShadow: "none",
+        "&:not(:checked)": {
+          color: theme("colors.grey.900")
+        },
+        "&:disabled": {
+          color: theme("colors.grey.300")
+        }
+      },
+      "&:hover": {
+        backgroundImage: "\n          ".concat(selectIconBG(theme("colors.grey.500")), ",\n          linear-gradient(-180deg, ").concat(theme("colors.grey.50"), " 0%, ").concat(theme("colors.grey.100"), " 100%)\n        "),
+        borderColor: theme("colors.grey.600")
+      },
+      "&:focus": {
+        backgroundImage: "\n          ".concat(selectIconBG(theme("colors.grey.500")), ",\n          linear-gradient(-180deg, ").concat(theme("colors.white"), " 0%, ").concat(theme("colors.grey.100"), " 100%)\n        "),
+        borderColor: theme("colors.accent.600"),
+        boxShadow: "\n          0 0 0 1px ".concat(theme("colors.accent.600"), ",\n          0 2px 0 0 ").concat(theme("colors.shadow.5"), "\n        ")
+      },
+      "&:disabled": {
+        cursor: "not-allowed",
+        color: theme("colors.grey.300"),
+        backgroundImage: "\n          ".concat(selectIconBG(theme("colors.grey.300")), ",\n          linear-gradient(-180deg, ").concat(theme("colors.white"), " 0%, ").concat(theme("colors.grey.100"), " 100%)\n        "),
+        borderColor: disabledColor(theme("colors.grey.200")),
+        boxShadow: "none"
+      }
+    },
+    ".select-input-small": {
+      height: theme("spacing.8"),
+      backgroundSize: "8px, auto"
+    },
+    ".select-input-medium": {
+      height: theme("spacing.10"),
+      backgroundSize: "10px, auto"
+    },
+    ".select-input-large": {
+      height: theme("spacing.12"),
+      backgroundSize: "12px, auto"
+    },
+    ".select-input-invalid, .select-input-validated": {
+      padding: "0 ".concat(theme("spacing.16"), " 0 ").concat(theme("spacing.4"))
+    },
+    ".select-input-invalid": {
+      borderColor: theme("colors.red.700"),
+      backgroundColor: theme("colors.red.100"),
+      backgroundImage: selectIconBG(theme("colors.red.700")),
+      "&:hover": {
+        borderColor: theme("colors.red.700"),
+        backgroundColor: theme("colors.red.50"),
+        backgroundImage: selectIconBG(theme("colors.red.700"))
+      },
+      "&:focus": {
+        backgroundImage: selectIconBG(theme("colors.red.700")),
+        borderColor: theme("colors.red.700"),
+        boxShadow: "\n          0 0 0 1px ".concat(theme("colors.red.700"), ",\n          0 2px 0 0 ").concat(theme("colors.shadow.5"), "\n        ")
+      }
+    }
+  });
+});
+module.exports = selectPlugin;

package/dist/cjs/Fields/TextArea/TextArea.js

@@ -0,0 +1,71 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TextArea = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _react = require("react");
+var _Icons = require("../../Icons");
+var _satellitePrefixer = _interopRequireDefault(require("../../styles/helpers/satellitePrefixer"));
+var _Field = require("../Field");
+var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["className", "placeholder", "required"];
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+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) { (0, _defineProperty2["default"])(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 STATUS_CLASSNAMES = {
+  "default": "",
+  invalid: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["text-area-invalid"]))),
+  validated: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["text-area-validated"])))
+};
+var InvalidIcon = function InvalidIcon() {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icons.XIcon, {
+    className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["mr-4 h-4 w-4 text-white bg-red-700 p-px rounded-full absolute top-2 -right-2"])))
+  });
+};
+var ValidatedIcon = function ValidatedIcon() {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icons.CheckIcon, {
+    className: (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["mr-4 h-4 w-4 text-white bg-accent-600 p-px rounded-full absolute top-2 -right-2"])))
+  });
+};
+
+/**
+ * The `TextArea` component is a multiline input field for extensive text, ideal for detailed feedback, descriptions, or comments.
+ *
+ * See the [Text Area documentation page](https://satellite.algolia.com/components/forms/text-area) for more information.
+ */
+var TextArea = exports.TextArea = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+  var _textareaProps$id;
+  var className = _ref.className,
+    placeholder = _ref.placeholder,
+    required = _ref.required,
+    textareaProps = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  var _useField = (0, _Field.useField)({
+      required: required
+    }),
+    state = _useField.state,
+    labelId = _useField.labelId,
+    descriptionId = _useField.descriptionId,
+    inputId = _useField.inputId;
+  var isInvalid = state.status === "invalid";
+  var StatusIcon = isInvalid ? InvalidIcon : state.status === "validated" ? ValidatedIcon : _react.Fragment;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["text-area relative"]))), STATUS_CLASSNAMES[state.status], className),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("textarea", _objectSpread(_objectSpread({
+      "aria-labelledby": labelId,
+      "aria-describedby": descriptionId
+    }, textareaProps), {}, {
+      id: (_textareaProps$id = textareaProps.id) !== null && _textareaProps$id !== void 0 ? _textareaProps$id : inputId,
+      required: required,
+      "aria-invalid": isInvalid,
+      ref: ref,
+      placeholder: placeholder
+    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(StatusIcon, {})]
+  });
+});
+TextArea.displayName = "TextArea";

package/dist/cjs/Fields/TextArea/TextArea.tailwind.js

@@ -0,0 +1,79 @@
+"use strict";
+
+// @ts-check
+var plugin = require("tailwindcss/plugin");
+var disabledColor = require("../../styles/disabledColor");
+var rgba = require("../../styles/rgba");
+var textAreaPlugin = plugin(function (_ref) {
+  var addComponents = _ref.addComponents,
+    theme = _ref.theme;
+  addComponents({
+    ".text-area": {
+      display: "flex",
+      width: "100%",
+      backgroundColor: theme("colors.white"),
+      border: "1px solid ".concat(theme("colors.grey.500")),
+      borderRadius: theme("borderRadius.DEFAULT"),
+      boxShadow: "inset 0px 1px 4px 0px ".concat(rgba(theme("colors.grey.500"), 0.3)),
+      transition: "all 100ms ease-in-out",
+      fontSize: theme("fontSize.base"),
+      lineHeight: theme("lineHeight.base"),
+      "&::placeholder": {
+        color: theme("colors.grey.600")
+      },
+      "&:hover": {
+        borderColor: theme("colors.grey.600")
+      },
+      "&:focus": {
+        borderColor: theme("colors.accent.600"),
+        boxShadow: "0px 1px 0px 0px ".concat(theme("colors.shadow.5")),
+        outline: "none"
+      },
+      "&:has(textarea:disabled)": {
+        borderColor: disabledColor(theme("colors.grey.200")),
+        boxShadow: "none"
+      }
+    },
+    ".text-area-invalid": {
+      backgroundColor: theme("colors.red.100"),
+      borderColor: theme("colors.red.700"),
+      "&:hover": {
+        borderColor: theme("colors.red.700"),
+        backgroundColor: theme("colors.red.50")
+      },
+      "&:focus-within": {
+        outline: "1px solid ".concat(theme("colors.red.700"))
+      }
+    },
+    ".text-area-invalid textarea": {
+      paddingRight: theme("spacing.6")
+    },
+    ".text-area-validated textarea": {
+      paddingRight: theme("spacing.6")
+    },
+    textarea: {
+      flex: "1",
+      minWidth: "0px",
+      caretColor: theme("colors.grey.600"),
+      color: theme("colors.grey.900"),
+      background: "transparent",
+      padding: theme("spacing.4"),
+      "&:focus": {
+        outline: "none"
+      },
+      "&:disabled": {
+        cursor: "not-allowed",
+        color: theme("colors.grey.300"),
+        background: "linear-gradient(-180deg, ".concat(theme("colors.white"), " 0%, ").concat(theme("colors.grey.100"), " 100%)")
+      }
+    },
+    ".text-area-invalid:not(.text-area:disabled)": {
+      backgroundColor: theme("colors.red.100"),
+      borderColor: theme("colors.red.700"),
+      "&:hover": {
+        borderColor: theme("colors.red.800")
+      }
+    }
+  });
+});
+module.exports = textAreaPlugin;

package/dist/cjs/Fields/Toggle/Toggle.d.ts

@@ -0,0 +1,12 @@
+import type { HTMLAttributes, InputHTMLAttributes } from "react";
+export declare type ToggleProps = Omit<HTMLAttributes<HTMLInputElement>, "children" | "onChange"> & Pick<InputHTMLAttributes<HTMLInputElement>, "onChange" | "required" | "autoFocus" | "disabled" | "checked" | "defaultChecked"> & {
+    decorative?: boolean;
+};
+/**
+ * The `Toggle` component is used to view or switch between enabled or disabled states.
+ *
+ * See the [Toggle documentation page](https://satellite.algolia.com/components/controls/toggle) for more information.
+ */
+export declare const Toggle: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLInputElement>, "children" | "onChange"> & Pick<InputHTMLAttributes<HTMLInputElement>, "defaultChecked" | "onChange" | "autoFocus" | "disabled" | "checked" | "required"> & {
+    decorative?: boolean | undefined;
+} & import("react").RefAttributes<HTMLInputElement>>;

package/dist/cjs/Fields/Toggle/Toggle.js

@@ -0,0 +1,90 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Toggle = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _react = require("react");
+var _satellitePrefixer = _interopRequireDefault(require("../../styles/helpers/satellitePrefixer"));
+var _Field = require("../Field");
+var _jsxRuntime = require("react/jsx-runtime");
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+var _excluded = ["className", "checked", "decorative", "defaultChecked", "required"];
+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) { (0, _defineProperty2["default"])(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; }
+/**
+ * The `Toggle` component is used to view or switch between enabled or disabled states.
+ *
+ * See the [Toggle documentation page](https://satellite.algolia.com/components/controls/toggle) for more information.
+ */
+var Toggle = exports.Toggle = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+  var _inputProps$id;
+  var className = _ref.className,
+    checked = _ref.checked,
+    decorative = _ref.decorative,
+    defaultChecked = _ref.defaultChecked,
+    required = _ref.required,
+    inputProps = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  var isControlled = typeof checked === "boolean";
+  var _useState = (0, _react.useState)(Boolean(isControlled ? checked : defaultChecked)),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    internalChecked = _useState2[0],
+    setInternalChecked = _useState2[1];
+  var isChecked = Boolean(isControlled ? checked : internalChecked);
+  var isDisabled = inputProps.disabled,
+    onChange = inputProps.onChange;
+  var _useField = (0, _Field.useField)({
+      required: required
+    }),
+    state = _useField.state,
+    labelId = _useField.labelId,
+    descriptionId = _useField.descriptionId,
+    inputId = _useField.inputId;
+  var isInvalid = state.status === "invalid";
+  var handleChange = function handleChange(evt) {
+    onChange === null || onChange === void 0 || onChange(evt);
+    if (!isControlled && !evt.isDefaultPrevented()) {
+      setInternalChecked(evt.currentTarget.checked);
+    }
+  };
+  var handleClassName = (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["toggle-handle"]))), isChecked && (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["toggle-checked"]))), isDisabled && (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["toggle-disabled"]))), isInvalid && (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["toggle-invalid"]))));
+  var onClick = function onClick(event) {
+    if (isDisabled) {
+      return;
+    }
+    onChange === null || onChange === void 0 || onChange(event);
+    !isControlled && setInternalChecked(!isChecked);
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    translate: "yes",
+    className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["toggle-container"]))), className),
+    children: [decorative ? /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      className: handleClassName,
+      onClick: onClick
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("input", _objectSpread(_objectSpread({
+      "aria-labelledby": labelId,
+      "aria-describedby": descriptionId
+    }, inputProps), {}, {
+      id: (_inputProps$id = inputProps.id) !== null && _inputProps$id !== void 0 ? _inputProps$id : inputId,
+      required: required,
+      "aria-invalid": isInvalid,
+      className: handleClassName,
+      disabled: isDisabled,
+      onChange: handleChange,
+      checked: isChecked,
+      "aria-checked": isChecked,
+      type: "checkbox",
+      role: "switch",
+      ref: ref
+    })), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: (0, _satellitePrefixer["default"])(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["toggle"])))
+    })]
+  });
+});
+Toggle.displayName = "Toggle";

package/dist/cjs/Fields/Toggle/Toggle.tailwind.js

@@ -0,0 +1,93 @@
+"use strict";
+
+// @ts-check
+var plugin = require("tailwindcss/plugin");
+var rgba = require("../../styles/rgba");
+var togglePlugin = plugin(function (_ref) {
+  var addComponents = _ref.addComponents,
+    theme = _ref.theme;
+  var transition = "all 72ms ease-in-out";
+  addComponents({
+    ".toggle-container": {
+      position: "relative",
+      display: "block",
+      height: "18px",
+      width: "32px",
+      ".toggle-handle": {
+        position: "absolute",
+        top: "0px",
+        left: "0px",
+        width: "100%",
+        height: "100%",
+        opacity: "0",
+        cursor: "pointer",
+        "&.toggle-disabled": {
+          cursor: "not-allowed"
+        }
+      },
+      "&:hover .toggle:after": {
+        transform: "translateX(2px)"
+      },
+      "&:hover .toggle-handle.toggle-checked ~ .toggle:after": {
+        transform: "translateX(12px)"
+      },
+      "&:hover .toggle-handle.toggle-disabled ~ .toggle:after": {
+        transform: "translateX(0px)"
+      },
+      "&:hover .toggle-handle.toggle-checked.toggle-disabled ~ .toggle:after": {
+        transform: "translateX(14px)"
+      }
+    },
+    ".toggle": {
+      position: "absolute",
+      top: "0px",
+      left: "0px",
+      width: "100%",
+      height: "100%",
+      pointerEvents: "none",
+      borderRadius: "9999px",
+      background: theme("colors.grey.500"),
+      boxShadow: "inset 0px 1px 4px 0px ".concat(rgba(theme("colors.grey.500"), 0.2)),
+      transition: transition,
+      "&::after": {
+        position: "absolute",
+        top: "1px",
+        left: "1px",
+        width: "16px",
+        height: "16px",
+        content: '" "',
+        borderRadius: "9999px",
+        background: "linear-gradient(-180deg, ".concat(theme("colors.white"), " 0%, ").concat(theme("colors.grey.50"), " 100%)"),
+        boxShadow: "0px 1px 1px 0px ".concat(theme("colors.shadow.10")),
+        transition: transition
+      },
+      ".toggle-handle.toggle-checked ~ &": {
+        background: theme("colors.accent.600"),
+        boxShadow: "inset 0px 1px 4px 0px ".concat(rgba(theme("colors.grey.900"), 0.1)),
+        "&:after": {
+          transform: "translateX(14px)"
+        }
+      },
+      ".toggle-handle.toggle-disabled ~ &": {
+        background: theme("colors.grey.200")
+      },
+      ".toggle-checked.toggle-handle.toggle-disabled ~ &": {
+        background: theme("colors.xenon.200")
+      },
+      ".toggle-handle.toggle-invalid ~ &": {
+        background: theme("colors.red.700"),
+        "&:after": {
+          background: theme("colors.red.100")
+        }
+      }
+    },
+    "input:focus ~ .toggle": {
+      outline: "2px solid ".concat(theme("colors.accent.600")),
+      outlineOffset: "1px"
+    },
+    "input:focus.toggle-invalid ~ .toggle": {
+      outlineColor: theme("colors.red.700")
+    }
+  });
+});
+module.exports = togglePlugin;