@algolia/satellite 2.0.0-rc.1 → 2.0.0-rc.3

package/dist/esm/Fields/Field/Field.js

@@ -1,6 +1,6 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
 import cx from "clsx";
 import { useEffect, useMemo, useState } from "react";
 import { AlertCircleIcon } from "../../Icons";
@@ -10,12 +10,19 @@ import { getTextFromReactNode } from "../../utils/getTextFromReactNode";
 import { useForm } from "../Form/useForm";
 import { DEFAULT_FIELD_STATE, FieldContext } from "./FieldContext";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var INLINE_LABEL_SIZE = {
+  small: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["grid-cols-[20%_auto]"]))),
+  medium: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["grid-cols-[35%_auto]"]))),
+  large: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["grid-cols-[50%_auto]"])))
+};
+
 /**
  * The `Field` component is a helper that wraps inputs to streamline labeling, validation, integration into a form.
  *
  * See the [Field documentation page](https://satellite.algolia.com/components/forms/field) for more information.
  */
 export var Field = function Field(_ref) {
+  var _form$inline, _form$inlineLabelSize;
   var className = _ref.className,
     label = _ref.label,
     labelForProp = _ref.labelFor,
@@ -23,8 +30,7 @@ export var Field = function Field(_ref) {
     description = _ref.description,
     _ref$state = _ref.state,
     state = _ref$state === void 0 ? DEFAULT_FIELD_STATE : _ref$state,
-    _ref$inline = _ref.inline,
-    inline = _ref$inline === void 0 ? false : _ref$inline,
+    inlineProp = _ref.inline,
     requiredProp = _ref.required,
     _ref$hideRequiredIndi = _ref.hideRequiredIndicator,
     hideRequiredIndicator = _ref$hideRequiredIndi === void 0 ? false : _ref$hideRequiredIndi,
@@ -54,14 +60,11 @@ export var Field = function Field(_ref) {
     _useState4 = _slicedToArray(_useState3, 2),
     elementToFocusContext = _useState4[0],
     setElementToFocusContext = _useState4[1];
-  if (process.env.NODE_ENV !== "production") {
-    if (typeof requiredProp !== "undefined" && typeof requiredContext !== "undefined" && requiredProp !== requiredContext) {
-      console.warn("The `required` prop is set to different values on both the Field (`required=".concat(requiredProp, "`) and the underlying input component (`required=").concat(requiredContext, "`)."));
-    }
-  }
   var form = useForm();
   var addField = form === null || form === void 0 ? void 0 : form.addField;
   var removeField = form === null || form === void 0 ? void 0 : form.removeField;
+  var inline = (_form$inline = form === null || form === void 0 ? void 0 : form.inline) !== null && _form$inline !== void 0 ? _form$inline : inlineProp;
+  var inlineLabelSize = (_form$inlineLabelSize = form === null || form === void 0 ? void 0 : form.inlineLabelSize) !== null && _form$inlineLabelSize !== void 0 ? _form$inlineLabelSize : "medium";
   useEffect(function () {
     addField === null || addField === void 0 || addField({
       state: state,
@@ -76,6 +79,14 @@ export var Field = function Field(_ref) {
       });
     };
   }, [addField, removeField, state, labelFor, label]);
+  if (process.env.NODE_ENV !== "production") {
+    if (typeof requiredProp !== "undefined" && typeof requiredContext !== "undefined" && requiredProp !== requiredContext) {
+      console.warn("The `required` prop is set to different values on both the Field (`required=".concat(requiredProp, "`) and the underlying input component (`required=").concat(requiredContext, "`)."));
+    }
+    if ((form === null || form === void 0 ? void 0 : form.inline) === true && inlineProp === false) {
+      console.warn("The `Field` component is being used inside a `Form` with `inline` set to `true`, but the `Field` component has `inline` set to `false`. To fix this, remove the `inline` prop on the `Field` component.");
+    }
+  }
   return /*#__PURE__*/_jsx(FieldContext.Provider, {
     value: {
       state: state,
@@ -85,47 +96,52 @@ export var Field = function Field(_ref) {
       setRequired: setRequiredContext,
       setElementToFocus: setElementToFocusContext
     },
-    children: /*#__PURE__*/_jsxs("div", {
+    children: /*#__PURE__*/_jsx("div", {
       className: className,
-      children: [/*#__PURE__*/_jsxs("label", {
-        className: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["cursor-pointer flex ", ""])), inline ? "items-center" : "flex-col"),
-        htmlFor: labelFor,
-        onClick: function onClick() {
-          if (!(elementToFocusContext !== null && elementToFocusContext !== void 0 && elementToFocusContext.closest("[aria-disabled=true]")) && !(elementToFocusContext !== null && elementToFocusContext !== void 0 && elementToFocusContext.closest("[disabled=true]"))) {
-            elementToFocusContext === null || elementToFocusContext === void 0 || elementToFocusContext.focus();
-          }
-        },
-        children: [hasLabel && /*#__PURE__*/_jsxs("div", {
-          id: labelId,
-          className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["truncate ", ""])), inline ? "mr-2" : "mb-1"),
-          children: [label, !hideRequiredIndicator && (requiredProp || requiredContext) && /*#__PURE__*/_jsx("span", {
-            className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["text-red-700 ml-0.5 align-top"]))),
-            "aria-hidden": true,
-            children: "*"
-          })]
+      children: /*#__PURE__*/_jsxs("div", {
+        className: cx(inline && cx(stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["grid items-center"]))), INLINE_LABEL_SIZE[inlineLabelSize])),
+        children: [/*#__PURE__*/_jsx("label", {
+          className: stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["cursor-pointer ", ""])), inline && "justify-self-end"),
+          htmlFor: labelFor,
+          onClick: function onClick() {
+            if (!(elementToFocusContext !== null && elementToFocusContext !== void 0 && elementToFocusContext.closest("[aria-disabled=true]")) && !(elementToFocusContext !== null && elementToFocusContext !== void 0 && elementToFocusContext.closest("[disabled=true]"))) {
+              elementToFocusContext === null || elementToFocusContext === void 0 || elementToFocusContext.focus();
+            }
+          },
+          children: hasLabel && /*#__PURE__*/_jsxs("div", {
+            id: labelId,
+            className: stl(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["", ""])), inline ? "mr-2 text-right" : "truncate mb-1"),
+            children: [label, !hideRequiredIndicator && (requiredProp || requiredContext) && /*#__PURE__*/_jsx("span", {
+              className: stl(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["text-red-700 ml-0.5 align-top"]))),
+              "aria-hidden": true,
+              children: "*"
+            })]
+          })
         }), /*#__PURE__*/_jsx("div", {
-          className: cx(inline && stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["ml-auto mt-1"])))),
           children: children
+        }), /*#__PURE__*/_jsx("div", {
+          className: cx(inline && stl(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["col-start-2"])))),
+          children: state.status === "invalid" && state.errors.length > 0 ? /*#__PURE__*/_jsx("ul", {
+            id: descriptionId,
+            className: stl(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["mt-2 display-caption flex flex-col gap-0.5"]))),
+            children: state.errors.map(function (error) {
+              return /*#__PURE__*/_jsxs("li", {
+                className: stl(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["flex items-center text-red-700"]))),
+                children: [/*#__PURE__*/_jsx(AlertCircleIcon, {
+                  className: stl(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["mr-1 shrink-0"]))),
+                  width: "1rem",
+                  height: "1rem",
+                  "aria-hidden": true
+                }), error]
+              }, error);
+            })
+          }) : description ? /*#__PURE__*/_jsx("p", {
+            id: descriptionId,
+            className: cx(stl(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["display-caption text-grey-600 ", ""])), inline ? "mt-1" : "mt-2")),
+            children: description
+          }) : null
         })]
-      }), state.status === "invalid" && state.errors.length > 0 ? /*#__PURE__*/_jsx("ul", {
-        id: descriptionId,
-        className: stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["mb-1 mt-2 display-caption flex flex-col gap-0.5"]))),
-        children: state.errors.map(function (error) {
-          return /*#__PURE__*/_jsxs("li", {
-            className: stl(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["flex items-center text-red-700"]))),
-            children: [/*#__PURE__*/_jsx(AlertCircleIcon, {
-              className: stl(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["mr-1 shrink-0"]))),
-              width: "1rem",
-              height: "1rem",
-              "aria-hidden": true
-            }), error]
-          }, error);
-        })
-      }) : description ? /*#__PURE__*/_jsx("p", {
-        id: descriptionId,
-        className: cx(stl(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["display-caption text-grey-600"]))), inline ? stl(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["mt-1"]))) : stl(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["mt-2"])))),
-        children: description
-      }) : null]
+      })
     })
   });
 };

package/dist/esm/Fields/FilePicker/FilePicker.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import type { DropzoneProps } from "../Dropzone";
+export declare type FilePickerLocale = {
+    removeFile?: string;
+};
+export declare type FilePickerProps = DropzoneProps & {
+    locale?: FilePickerLocale;
+};
+/**
+ * The `FilePicker` component allows users to select multiple files for attachment, supporting both drag-and-drop and browse options.
+ *
+ * See the [FilePicker documentation page](https://satellite.algolia.com/components/forms/file-picker) for more information.
+ */
+export declare const FilePicker: import("react").ForwardRefExoticComponent<import("../Dropzone").DropzoneBaseProps & Omit<import("react-dropzone").DropzoneProps, "multiple" | "onDropAccepted" | "onDropRejected"> & {
+    locale?: FilePickerLocale | undefined;
+} & import("react").RefAttributes<HTMLElement>>;

package/dist/esm/Fields/FilePicker/FilePicker.js

@@ -0,0 +1,134 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
+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; }
+import cx from "classnames";
+import { forwardRef, useState } from "react";
+import { IconButton } from "../../Actions";
+import { AlertTriangleIcon, FileTextIcon, TrashIcon } from "../../Icons";
+import { useLocale } from "../../Satellite";
+import stl from "../../styles/helpers/satellitePrefixer";
+import { formatHumanSize } from "../../utils/formatters";
+import { Dropzone } from "../Dropzone";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var FileCard = function FileCard(_ref) {
+  var file = _ref.file,
+    errors = _ref.errors,
+    removeFileTooltip = _ref.removeFileTooltip,
+    onDelete = _ref.onDelete;
+  var FileIcon = errors ? AlertTriangleIcon : FileTextIcon;
+  return /*#__PURE__*/_jsxs("div", {
+    className: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["flex items-center justify-between gap-3 bg-white border border-grey-200 rounded px-4 py-2"]))),
+    children: [/*#__PURE__*/_jsxs("div", {
+      className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["flex items-center gap-3"]))),
+      children: [/*#__PURE__*/_jsx(FileIcon, {
+        size: "1.5rem",
+        className: cx(stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["shrink-0"]))), errors ? stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["text-red-700"]))) : stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["typo-subdued"]))))
+      }), /*#__PURE__*/_jsxs("div", {
+        className: cx(stl(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["display-body"]))), errors && stl(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["text-red-700"])))),
+        children: [/*#__PURE__*/_jsx("div", {
+          className: stl(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["line-clamp-1"]))),
+          children: file.name
+        }), errors && errors.length > 0 ? /*#__PURE__*/_jsx("div", {
+          className: stl(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["line-clamp-1"]))),
+          children: errors[0].message
+        }) : /*#__PURE__*/_jsx("div", {
+          className: stl(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["typo-subdued line-clamp-1"]))),
+          children: formatHumanSize(file.size)
+        })]
+      })]
+    }), /*#__PURE__*/_jsx(IconButton, {
+      icon: TrashIcon,
+      title: removeFileTooltip,
+      size: "medium",
+      variant: "subtle",
+      onClick: onDelete
+    })]
+  });
+};
+var DEFAULT_FILE_PICKER_LOCALE = {
+  removeFile: "Remove file"
+};
+/**
+ * The `FilePicker` component allows users to select multiple files for attachment, supporting both drag-and-drop and browse options.
+ *
+ * See the [FilePicker documentation page](https://satellite.algolia.com/components/forms/file-picker) for more information.
+ */
+export var FilePicker = /*#__PURE__*/forwardRef(function (props, ref) {
+  var contextLocale = useLocale("filePicker");
+  var locale = _objectSpread(_objectSpread(_objectSpread({}, DEFAULT_FILE_PICKER_LOCALE), contextLocale), props.locale);
+  var _useState = useState([]),
+    _useState2 = _slicedToArray(_useState, 2),
+    files = _useState2[0],
+    setFiles = _useState2[1];
+  var onDrop = function onDrop(acceptedFiles, rejectedFiles) {
+    var _props$onChange;
+    var newFiles = [].concat(_toConsumableArray(acceptedFiles.map(function (file) {
+      return {
+        file: file
+      };
+    })), _toConsumableArray(rejectedFiles.map(function (_ref2) {
+      var file = _ref2.file,
+        errors = _ref2.errors;
+      return {
+        file: file,
+        errors: errors
+      };
+    })));
+    setFiles(props.multiple ? [].concat(_toConsumableArray(files), _toConsumableArray(newFiles)) : newFiles);
+    (_props$onChange = props.onChange) === null || _props$onChange === void 0 || _props$onChange.call(props, acceptedFiles, rejectedFiles);
+  };
+  var handleDelete = function handleDelete(fileToDelete) {
+    var _props$onChange2;
+    var updatedFiles = files.filter(function (_ref3) {
+      var file = _ref3.file;
+      return file !== fileToDelete;
+    });
+    setFiles(updatedFiles);
+    var _updatedFiles$reduce = updatedFiles.reduce(function (acc, _ref4) {
+        var file = _ref4.file,
+          errors = _ref4.errors;
+        if (errors) {
+          acc.rejectedFiles.push({
+            file: file,
+            errors: errors
+          });
+        } else {
+          acc.acceptedFiles.push(file);
+        }
+        return acc;
+      }, {
+        acceptedFiles: [],
+        rejectedFiles: []
+      }),
+      acceptedFiles = _updatedFiles$reduce.acceptedFiles,
+      rejectedFiles = _updatedFiles$reduce.rejectedFiles;
+    (_props$onChange2 = props.onChange) === null || _props$onChange2 === void 0 || _props$onChange2.call(props, acceptedFiles, rejectedFiles);
+  };
+  return /*#__PURE__*/_jsxs("div", {
+    className: stl(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["flex flex-col gap-4"]))),
+    children: [/*#__PURE__*/_jsx(Dropzone, _objectSpread(_objectSpread({}, props), {}, {
+      ref: ref,
+      onDrop: onDrop,
+      hideFiles: true
+    })), files.length > 0 && /*#__PURE__*/_jsx("div", {
+      className: stl(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["flex flex-col gap-1"]))),
+      children: files.map(function (_ref5, index) {
+        var file = _ref5.file,
+          errors = _ref5.errors;
+        return /*#__PURE__*/_jsx(FileCard, {
+          file: file,
+          errors: errors,
+          removeFileTooltip: locale.removeFile,
+          onDelete: function onDelete() {
+            return handleDelete(file);
+          }
+        }, "".concat(file.name, "-").concat(index));
+      })
+    })]
+  });
+});
+FilePicker.displayName = "FilePicker";

package/dist/esm/Fields/FilePicker/index.d.ts

@@ -0,0 +1 @@
+export * from "./FilePicker";

package/dist/esm/Fields/FilePicker/index.js

@@ -0,0 +1 @@
+export * from "./FilePicker";

package/dist/esm/Fields/Form/Form.d.ts

@@ -2,7 +2,10 @@ import type { FC, HTMLAttributes, PropsWithChildren, ReactNode } from "react";
 import type { ButtonProps } from "../../Actions";
 import type { AlertProps } from "../../Indicators";
 import type { FormContextField } from "./FormContext";
+export declare type FormInlineLabelSize = "small" | "medium" | "large";
 export interface FormProps extends HTMLAttributes<HTMLFormElement> {
+    inline?: boolean;
+    inlineLabelSize?: FormInlineLabelSize;
 }
 export declare type FormLocale = {
     errorTitle?: (invalidFields: FormContextField[], extraErrors?: string[]) => ReactNode;

package/dist/esm/Fields/Form/Form.js

@@ -4,7 +4,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _excluded = ["className", "extraErrors", "locale"],
-  _excluded2 = ["children"],
+  _excluded2 = ["children", "inline", "inlineLabelSize"],
   _excluded3 = ["children"],
   _excluded4 = ["children"];
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
@@ -96,6 +96,9 @@ export var FormErrorMessage = function FormErrorMessage(_ref) {
 };
 export var Form = function Form(_ref6) {
   var children = _ref6.children,
+    inline = _ref6.inline,
+    _ref6$inlineLabelSize = _ref6.inlineLabelSize,
+    inlineLabelSize = _ref6$inlineLabelSize === void 0 ? "medium" : _ref6$inlineLabelSize,
     props = _objectWithoutProperties(_ref6, _excluded2);
   var _useState = useState({}),
     _useState2 = _slicedToArray(_useState, 2),
@@ -118,7 +121,9 @@ export var Form = function Form(_ref6) {
     value: {
       fields: fields,
       addField: addField,
-      removeField: removeField
+      removeField: removeField,
+      inline: inline,
+      inlineLabelSize: inlineLabelSize
     },
     children: /*#__PURE__*/_jsx("form", _objectSpread(_objectSpread({
       noValidate: true

package/dist/esm/Fields/Form/FormContext.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 import type { FieldState } from "../Field";
+import type { FormInlineLabelSize } from "./Form";
 export declare type FormContextField = {
     state: FieldState;
     label: string;
@@ -9,5 +10,7 @@ export declare type FormContextValue = {
     fields: Record<string, FormContextField>;
     addField: (field: FormContextField) => void;
     removeField: (field: FormContextField) => void;
+    inline?: boolean;
+    inlineLabelSize?: FormInlineLabelSize;
 };
 export declare const FormContext: import("react").Context<FormContextValue | null>;

package/dist/esm/Fields/Form/index.d.ts

@@ -1,4 +1,4 @@
-export type { FormProps as ExperimentalFormProps, FormLocale as ExperimentalFormLocale, FormErrorMessageProps as ExperimentalFormErrorMessageProps, } from "./Form";
+export type { FormProps as ExperimentalFormProps, FormLocale as ExperimentalFormLocale, FormErrorMessageProps as ExperimentalFormErrorMessageProps, FormInlineLabelSize, } from "./Form";
 export { Form as ExperimentalForm, FormErrorMessage as ExperimentalFormErrorMessage, FormSubmit as ExperimentalFormSubmit, FormReset as ExperimentalFormReset, } from "./Form";
 export type { FormContextField as ExperimentalFormContextField, FormContextValue as ExperimentalFormContextValue, } from "./FormContext";
 export { useForm as useExperimentalForm } from "./useForm";

package/dist/esm/Fields/Form/stories/Complex.js

@@ -18,8 +18,8 @@ import { Input } from "../../Input";
 import { RadioButton, RadioGroup } from "../../RadioGroup";
 import { RangeSlider } from "../../RangeSlider";
 import { Select } from "../../Select";
+import { Switch } from "../../Switch";
 import { TextArea } from "../../TextArea";
-import { Toggle } from "../../Toggle";
 import { Form, FormErrorMessage, FormReset, FormSubmit } from "../Form";
 import { useFormikAutoFocusOnError } from "./utils/useFormikAutoFocusOnError";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -518,7 +518,6 @@ export var RHFComplexComponent = function RHFComplexComponent() {
               description: "Please accept the terms",
               state: getFieldState("acceptTerms"),
               className: stl(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["w-full"]))),
-              inline: true,
               children: /*#__PURE__*/_jsx(Checkbox, _objectSpread({
                 id: "acceptTerms",
                 required: true,
@@ -537,8 +536,7 @@ export var RHFComplexComponent = function RHFComplexComponent() {
               description: "Do you want to receive our newsletter?",
               state: getFieldState("newsletter"),
               className: stl(_templateObject22 || (_templateObject22 = _taggedTemplateLiteral(["w-full"]))),
-              inline: true,
-              children: /*#__PURE__*/_jsx(Toggle, _objectSpread({
+              children: /*#__PURE__*/_jsx(Switch, _objectSpread({
                 id: "newsletter",
                 required: true,
                 checked: getValues("newsletter")
@@ -888,7 +886,6 @@ export var FormikComplexComponent = function FormikComplexComponent() {
           description: "Please accept the terms",
           state: getFieldState("acceptTerms"),
           className: stl(_templateObject46 || (_templateObject46 = _taggedTemplateLiteral(["w-full"]))),
-          inline: true,
           children: /*#__PURE__*/_jsx(Checkbox, _objectSpread({
             id: "acceptTerms",
             required: true,
@@ -900,8 +897,7 @@ export var FormikComplexComponent = function FormikComplexComponent() {
           description: "Do you want to receive our newsletter?",
           state: getFieldState("newsletter"),
           className: stl(_templateObject47 || (_templateObject47 = _taggedTemplateLiteral(["w-full"]))),
-          inline: true,
-          children: /*#__PURE__*/_jsx(Toggle, _objectSpread({
+          children: /*#__PURE__*/_jsx(Switch, _objectSpread({
             id: "newsletter",
             required: true,
             checked: formik.values.newsletter

package/dist/esm/Fields/Form/stories/InlineFields.js

@@ -0,0 +1,55 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+var _templateObject, _templateObject2, _templateObject3;
+import { ExperimentalForm, ExperimentalFormReset, ExperimentalFormSubmit } from "../..";
+import stl from "../../../styles/helpers/satellitePrefixer";
+import { Field } from "../../Field";
+import { Input } from "../../Input";
+import { Switch } from "../../Switch";
+import { TextArea } from "../../TextArea";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export var InlineFieldsComponent = function InlineFieldsComponent() {
+  return /*#__PURE__*/_jsx("div", {
+    className: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["flex flex-col w-4/5"]))),
+    children: /*#__PURE__*/_jsxs(ExperimentalForm, {
+      className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["flex flex-col gap-4 min-w-72"]))),
+      inline: true,
+      inlineLabelSize: "medium",
+      children: [/*#__PURE__*/_jsx(Field, {
+        label: "First Name",
+        labelFor: "firstName",
+        description: "Please enter your first name",
+        children: /*#__PURE__*/_jsx(Input, {
+          id: "firstName",
+          placeholder: "John",
+          required: true
+        })
+      }), /*#__PURE__*/_jsx(Field, {
+        label: "Bio",
+        labelFor: "bio",
+        description: "Please write a short bio",
+        children: /*#__PURE__*/_jsx(TextArea, {
+          id: "bio",
+          required: true
+        })
+      }), /*#__PURE__*/_jsx(Field, {
+        label: "Receive Newsletter",
+        labelFor: "newsletter",
+        description: "Do you want to receive our newsletter?",
+        children: /*#__PURE__*/_jsx(Switch, {
+          id: "newsletter",
+          required: true
+        })
+      }), /*#__PURE__*/_jsxs("div", {
+        className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["flex justify-end gap-2"]))),
+        children: [/*#__PURE__*/_jsx(ExperimentalFormReset, {
+          "aria-label": "Reset the form",
+          children: "Reset"
+        }), /*#__PURE__*/_jsx(ExperimentalFormSubmit, {
+          variant: "primary",
+          "aria-label": "Save the form",
+          children: "Save"
+        })]
+      })]
+    })
+  });
+};

package/dist/esm/Fields/Form/stories/JSONForms.js

@@ -23,8 +23,8 @@ import { Input } from "../../Input/Input";
 import { RadioButton, RadioGroup } from "../../RadioGroup";
 import { RangeSlider } from "../../RangeSlider";
 import { Select } from "../../Select";
+import { Switch } from "../../Switch";
 import { TextArea } from "../../TextArea";
-import { Toggle } from "../../Toggle";
 import { Form, FormErrorMessage, FormReset, FormSubmit } from "../Form";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 var schema = {
@@ -783,7 +783,7 @@ var ToggleRendererComponent = function ToggleRendererComponent(_ref11) {
     state: getFieldState(errors),
     inline: (_uischema$options36 = uischema.options) === null || _uischema$options36 === void 0 ? void 0 : _uischema$options36.inline,
     className: cx(!visible && stl(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["hidden"])))),
-    children: /*#__PURE__*/_jsx(Toggle, {
+    children: /*#__PURE__*/_jsx(Switch, {
       id: id,
       required: required,
       disabled: !enabled,

package/dist/esm/Fields/{Toggle/Toggle.d.ts → Switch/Switch.d.ts}

@@ -1,5 +1,5 @@
 import type { ChangeEvent, HTMLAttributes, InputHTMLAttributes } from "react";
-export declare type ToggleProps = Omit<HTMLAttributes<HTMLInputElement>, "children" | "onChange" | "defaultChecked"> & Pick<InputHTMLAttributes<HTMLInputElement>, "autoFocus"> & {
+export declare type SwitchProps = Omit<HTMLAttributes<HTMLInputElement>, "children" | "onChange" | "defaultChecked"> & Pick<InputHTMLAttributes<HTMLInputElement>, "autoFocus"> & {
     /**
      * Whether the `Toggle` is decorative.
      * Decorative toggles are not using an input element.
@@ -27,11 +27,11 @@ export declare type ToggleProps = Omit<HTMLAttributes<HTMLInputElement>, "childr
     checked?: boolean;
 };
 /**
- * The `Toggle` component is used to view or switch between enabled or disabled states.
+ * The `Switch` 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.
+ * See the [Switch documentation page](https://satellite.algolia.com/components/controls/switch) for more information.
  */
-export declare const Toggle: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLInputElement>, "children" | "defaultChecked" | "onChange"> & Pick<InputHTMLAttributes<HTMLInputElement>, "autoFocus"> & {
+export declare const Switch: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLInputElement>, "children" | "defaultChecked" | "onChange"> & Pick<InputHTMLAttributes<HTMLInputElement>, "autoFocus"> & {
     /**
      * Whether the `Toggle` is decorative.
      * Decorative toggles are not using an input element.

package/dist/esm/Fields/{Toggle/Toggle.js → Switch/Switch.js}

@@ -12,11 +12,11 @@ import stl from "../../styles/helpers/satellitePrefixer";
 import { useField } from "../Field";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
- * The `Toggle` component is used to view or switch between enabled or disabled states.
+ * The `Switch` 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.
+ * See the [Switch documentation page](https://satellite.algolia.com/components/controls/switch) for more information.
  */
-export var Toggle = /*#__PURE__*/forwardRef(function (_ref, ref) {
+export var Switch = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var _inputProps$id;
   var className = _ref.className,
     checked = _ref.checked,
@@ -46,7 +46,7 @@ export var Toggle = /*#__PURE__*/forwardRef(function (_ref, ref) {
       setInternalChecked(evt.currentTarget.checked);
     }
   };
-  var handleClassName = cx(stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["toggle-handle"]))), isChecked && stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["toggle-checked"]))), isDisabled && stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["toggle-disabled"]))), isInvalid && stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["toggle-invalid"]))));
+  var handleClassName = cx(stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["switch-handle"]))), isChecked && stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["switch-checked"]))), isDisabled && stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["switch-disabled"]))), isInvalid && stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["switch-invalid"]))));
   var onClick = function onClick(event) {
     if (isDisabled) {
       return;
@@ -56,7 +56,7 @@ export var Toggle = /*#__PURE__*/forwardRef(function (_ref, ref) {
   };
   return /*#__PURE__*/_jsxs("div", {
     translate: "yes",
-    className: cx(stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["toggle-container"]))), className),
+    className: cx(stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["switch-container"]))), className),
     children: [decorative ? /*#__PURE__*/_jsx("span", {
       className: handleClassName,
       onClick: onClick
@@ -76,8 +76,8 @@ export var Toggle = /*#__PURE__*/forwardRef(function (_ref, ref) {
       role: "switch",
       ref: ref
     })), /*#__PURE__*/_jsx("div", {
-      className: stl(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["toggle focusable-sibling"])))
+      className: stl(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["switch focusable-sibling"])))
     })]
   });
 });
-Toggle.displayName = "Toggle";
+Switch.displayName = "Switch";