@algolia/satellite 1.0.0 → 1.1.0

package/dist/cjs/Dropzone/Dropzone.js

@@ -21,8 +21,8 @@ var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satel
 var _formatters = require("../utils/formatters");
 var _uniqueId = require("../utils/uniqueId");
 var _jsxRuntime = require("react/jsx-runtime");
-var _excluded = ["id", "placeholder", "disabled", "multiple", "clearable", "onChange", "className", "locale"];
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
+var _excluded = ["id", "placeholder", "disabled", "multiple", "clearable", "onChange", "className", "locale", "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 DropzoneFileItem = function DropzoneFileItem(_ref) {
@@ -54,7 +54,7 @@ var ValidatedIcon = function ValidatedIcon() {
  *
  * See the [Dropzone documentation page](https://satellite.algolia.com/components/forms/dropzone) for more information.
  */
-var Dropzone = exports.Dropzone = function Dropzone(_ref2) {
+var Dropzone = exports.Dropzone = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref) {
   var id = _ref2.id,
     placeholder = _ref2.placeholder,
     disabled = _ref2.disabled,
@@ -65,6 +65,8 @@ var Dropzone = exports.Dropzone = function Dropzone(_ref2) {
     onChange = _ref2.onChange,
     className = _ref2.className,
     propsLocale = _ref2.locale,
+    _ref2$required = _ref2.required,
+    required = _ref2$required === void 0 ? false : _ref2$required,
     props = (0, _objectWithoutProperties2["default"])(_ref2, _excluded);
   var contextLocale = (0, _Satellite.useLocale)("dropzone");
   var locale = _objectSpread(_objectSpread(_objectSpread({}, DEFAULT_DROPZONE_LOCALE), contextLocale), propsLocale);
@@ -76,9 +78,13 @@ var Dropzone = exports.Dropzone = function Dropzone(_ref2) {
     _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
     focused = _useState4[0],
     setFocused = _useState4[1];
-  var _useField = (0, _Field.useField)(),
+  var _useField = (0, _Field.useField)({
+      required: required
+    }),
     status = _useField.state.status,
-    labelId = _useField.labelId;
+    labelId = _useField.labelId,
+    descriptionId = _useField.descriptionId,
+    inputId = _useField.inputId;
   var onDrop = (0, _react.useCallback)(function (acceptedFiles, fileRejections) {
     var updatedFiles = multiple ? [].concat((0, _toConsumableArray2["default"])(files), (0, _toConsumableArray2["default"])(acceptedFiles)) : acceptedFiles;
     setFiles(updatedFiles);
@@ -100,14 +106,19 @@ var Dropzone = exports.Dropzone = function Dropzone(_ref2) {
     isDragActive = _useDropzone.isDragActive,
     isDragReject = _useDropzone.isDragReject;
   var dropzoneId = (0, _react.useMemo)(function () {
-    return id !== null && id !== void 0 ? id : (0, _uniqueId.uniqueId)("dropzone");
-  }, [id]);
+    var _ref3;
+    return (_ref3 = id !== null && id !== void 0 ? id : inputId) !== null && _ref3 !== void 0 ? _ref3 : (0, _uniqueId.uniqueId)("dropzone");
+  }, [id, inputId]);
   var isValueEmpty = files.length === 0;
   var isInvalid = status === "invalid";
   var StatusIcon = isInvalid ? InvalidIcon : status === "validated" ? ValidatedIcon : _react.Fragment;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", _objectSpread(_objectSpread({}, getRootProps({
+    ref: ref,
     "aria-controls": dropzoneId,
-    className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n            relative flex items-center group/dropzone\n            border border-grey-500 rounded\n            shadow-field\n            overflow-hidden transition-all ease-in-out delay-100\n            focus-within:border-accent-600 focus-within:shadow-field-focused\n            min-h-16\n            ", "\n            ", "\n            ", "\n            ", ""])), focused && "border-accent-600 shadow-field-focused", disabled ? "cursor-not-allowed border-grey-200/30 shadow-none bg-gradient-to-b from-white to-grey-100" : "cursor-pointer", isDragReject && !disabled ? "border-red-200 cursor-not-allowed" : isDragActive ? "border-accent-500 cursor-pointer" : null, isInvalid ? "bg-red-100 border-red-700 hover:bg-red-50" : "bg-white hover:bg-grey-50"), className),
+    "aria-labelledby": labelId,
+    "aria-describedby": descriptionId,
+    "aria-invalid": isInvalid,
+    className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n            relative flex items-center group/dropzone\n            border rounded\n            overflow-hidden transition-all ease-in-out delay-100\n            focus-within:shadow-field-focused\n            min-h-16\n            ", "\n            ", "\n            ", "\n            ", ""])), focused && "border-accent-600 shadow-field-focused", disabled ? "cursor-not-allowed border-grey-200/30 shadow-none bg-gradient-to-b from-white to-grey-100" : "shadow-field cursor-pointer", isDragReject && !disabled ? "border-red-200 cursor-not-allowed" : isDragActive ? "border-accent-500 cursor-pointer" : null, isInvalid ? "bg-red-100 border-red-700 hover:bg-red-50 focus-within:outline focus-within:outline-red-700 focus-within:outline-1" : "border-grey-500 bg-white focus-within:border-accent-600 hover:bg-grey-50"), className),
     onClick: function onClick(evt) {
       // Helps with https://github.com/react-dropzone/react-dropzone/issues/182
       if (evt.target.closest("label")) {
@@ -117,7 +128,7 @@ var Dropzone = exports.Dropzone = function Dropzone(_ref2) {
   })), {}, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", _objectSpread({}, getInputProps({
       id: dropzoneId,
-      "aria-labelledby": labelId,
+      required: required,
       onFocus: function onFocus() {
         return setFocused(true);
       },
@@ -147,9 +158,8 @@ var Dropzone = exports.Dropzone = function Dropzone(_ref2) {
         })]
       })
     }), clearable && !disabled && !isValueEmpty && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-      className: (0, _satellitePrefixer["default"])(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])([""]))),
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, {
-        className: (0, _satellitePrefixer["default"])(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["mr-2 ", ""])), focused ? "visible" : "invisible group-hover/dropzone:visible"),
+        className: (0, _satellitePrefixer["default"])(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["mr-2 ", ""])), focused ? "visible" : "invisible group-hover/dropzone:visible"),
         title: locale.clearInput,
         icon: _Icons.XIcon,
         variant: "subtle",
@@ -160,4 +170,5 @@ var Dropzone = exports.Dropzone = function Dropzone(_ref2) {
       })
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(StatusIcon, {})]
   }));
-};
+});
+Dropzone.displayName = "Dropzone";

package/dist/cjs/Field/Field.d.ts

@@ -14,6 +14,7 @@ export interface FieldProps {
      */
     state?: FieldState;
     inline?: boolean;
+    required?: boolean;
     children: ReactNode;
 }
 /**

package/dist/cjs/Field/Field.js

@@ -6,14 +6,17 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Field = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _react = require("react");
+var _useForm = require("../Form/useForm");
 var _Icons = require("../Icons");
 var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satellitePrefixer"));
 var _utils = require("../utils");
+var _getTextFromReactNode = require("../utils/getTextFromReactNode");
 var _FieldContext = require("./FieldContext");
 var _jsxRuntime = require("react/jsx-runtime");
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
 /**
  * The `Field` component is a helper that wraps inputs to streamline labeling, validation, integration into a form.
  *
@@ -22,13 +25,14 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _temp
 var Field = exports.Field = function Field(_ref) {
   var className = _ref.className,
     label = _ref.label,
-    labelFor = _ref.labelFor,
+    labelForProp = _ref.labelFor,
     labelIdProp = _ref.labelId,
     description = _ref.description,
     _ref$state = _ref.state,
     state = _ref$state === void 0 ? _FieldContext.DEFAULT_FIELD_STATE : _ref$state,
     _ref$inline = _ref.inline,
     inline = _ref$inline === void 0 ? false : _ref$inline,
+    requiredProp = _ref.required,
     children = _ref.children;
   var hasLabel = !!label;
   var labelId = (0, _react.useMemo)(
@@ -36,37 +40,85 @@ var Field = exports.Field = function Field(_ref) {
   function () {
     return hasLabel ? labelIdProp !== null && labelIdProp !== void 0 ? labelIdProp : (0, _utils.uniqueId)("stl-field-label-") : undefined;
   }, [labelIdProp, hasLabel]);
+  var hasLabelFor = !!labelForProp;
+  var labelFor = (0, _react.useMemo)(
+  // eslint-disable-next-line @algolia/stl/prefer-stl-helper
+  function () {
+    return hasLabelFor ? labelForProp : (0, _utils.uniqueId)("stl-field-input-");
+  }, [labelForProp, hasLabelFor]);
+  var descriptionId = (0, _react.useMemo)(
+  // eslint-disable-next-line @algolia/stl/prefer-stl-helper
+  function () {
+    return description || state.status === "invalid" ? (0, _utils.uniqueId)("stl-field-description-") : undefined;
+  }, [description, state.status]);
+  var _useState = (0, _react.useState)(undefined),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    requiredContext = _useState2[0],
+    setRequiredContext = _useState2[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 = (0, _useForm.useExperimentalForm)();
+  var addField = form === null || form === void 0 ? void 0 : form.addField;
+  var removeField = form === null || form === void 0 ? void 0 : form.removeField;
+  (0, _react.useEffect)(function () {
+    addField === null || addField === void 0 || addField({
+      state: state,
+      label: (0, _getTextFromReactNode.getTextFromReactNode)(label),
+      labelFor: labelFor
+    });
+    return function () {
+      removeField === null || removeField === void 0 || removeField({
+        state: state,
+        label: (0, _getTextFromReactNode.getTextFromReactNode)(label),
+        labelFor: labelFor
+      });
+    };
+  }, [addField, removeField, state, labelFor, label]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_FieldContext.FieldContext.Provider, {
     value: {
       state: state,
-      labelId: labelId
+      labelId: labelId,
+      descriptionId: descriptionId,
+      inputId: labelFor,
+      setRequired: setRequiredContext
     },
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: className,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
         className: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["cursor-pointer flex ", ""])), inline ? "items-center" : "flex-col"),
         htmlFor: labelFor,
-        children: [hasLabel && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        children: [hasLabel && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
           id: labelId,
           className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["truncate ", ""])), inline ? "mr-2" : "mb-1"),
-          children: label
+          children: [label, (requiredProp || requiredContext) && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+            className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["text-red-700 ml-0.5"]))),
+            "aria-hidden": true,
+            children: "*"
+          })]
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: (0, _clsx["default"])(inline && (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["ml-auto mt-1"])))),
+          className: (0, _clsx["default"])(inline && (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["ml-auto mt-1"])))),
           children: children
         })]
       }), state.status === "invalid" && state.errors.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)("ul", {
-        className: (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["mb-1 mt-2 display-caption"]))),
+        id: descriptionId,
+        className: (0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["mb-1 mt-2 display-caption flex flex-col gap-0.5"]))),
         children: state.errors.map(function (error) {
           return /*#__PURE__*/(0, _jsxRuntime.jsxs)("li", {
-            className: (0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["flex items-center"]))),
+            className: (0, _satellitePrefixer["default"])(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["flex items-center text-red-700"]))),
             children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Icons.AlertCircleIcon, {
-              className: (0, _satellitePrefixer["default"])(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["text-red-700 mr-1"]))),
-              size: "1rem"
+              className: (0, _satellitePrefixer["default"])(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["mr-1 shrink-0"]))),
+              width: "1rem",
+              height: "1rem",
+              "aria-hidden": true
             }), error]
           }, error);
         })
       }) : description ? /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
-        className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["display-caption text-grey-600"]))), inline ? (0, _satellitePrefixer["default"])(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["mt-1"]))) : (0, _satellitePrefixer["default"])(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["mt-2"])))),
+        id: descriptionId,
+        className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["display-caption text-grey-600"]))), inline ? (0, _satellitePrefixer["default"])(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["mt-1"]))) : (0, _satellitePrefixer["default"])(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["mt-2"])))),
         children: description
       }) : null]
     })

package/dist/cjs/Field/FieldContext.d.ts

@@ -10,6 +10,9 @@ export declare type FieldState = {
 export declare type FieldContextValue = {
     state: FieldState;
     labelId?: string;
+    descriptionId?: string;
+    inputId?: string;
+    setRequired?: (required?: boolean) => void;
 };
 export declare const DEFAULT_FIELD_STATE: FieldState;
 export declare const DEFAULT_CONTEXT_VALUE: FieldContextValue;

package/dist/cjs/Field/useField.d.ts

@@ -1,2 +1,5 @@
 import type { FieldContextValue } from "./FieldContext";
-export declare const useField: () => FieldContextValue;
+export declare type UseFieldProps = {
+    required?: boolean;
+};
+export declare const useField: ({ required }?: UseFieldProps) => FieldContextValue;

package/dist/cjs/Field/useField.js

@@ -1,11 +1,27 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useField = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = require("react");
 var _FieldContext = require("./FieldContext");
+var _excluded = ["setRequired"];
+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 useField = exports.useField = function useField() {
-  return (0, _react.useContext)(_FieldContext.FieldContext);
+  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+    required = _ref.required;
+  var _useContext = (0, _react.useContext)(_FieldContext.FieldContext),
+    setRequired = _useContext.setRequired,
+    contextValue = (0, _objectWithoutProperties2["default"])(_useContext, _excluded);
+  (0, _react.useEffect)(function () {
+    return setRequired === null || setRequired === void 0 ? void 0 : setRequired(required);
+  }, [setRequired, required]);
+  return _objectSpread({
+    setRequired: setRequired
+  }, contextValue);
 };

package/dist/cjs/Form/Form.d.ts

@@ -0,0 +1,16 @@
+import type { FC, HTMLAttributes, ReactNode, VFC } from "react";
+import type { AlertProps } from "../Banners";
+import type { ButtonProps } from "../Button";
+import type { ExperimentalFormContextField } from "./FormContext";
+export interface ExperimentalFormProps extends HTMLAttributes<HTMLFormElement> {
+}
+export declare type ExperimentalFormLocale = {
+    errorText?: (invalidFields: ExperimentalFormContextField[]) => ReactNode;
+};
+export interface ExperimentalFormErrorMessageProps extends Omit<AlertProps, "children"> {
+    locale?: ExperimentalFormLocale;
+}
+export declare const ExperimentalFormErrorMessage: VFC<ExperimentalFormErrorMessageProps>;
+export declare const ExperimentalForm: FC<ExperimentalFormProps>;
+export declare const ExperimentalFormSubmit: FC<ButtonProps>;
+export declare const ExperimentalFormReset: FC<ButtonProps>;

package/dist/cjs/Form/Form.js

@@ -0,0 +1,140 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ExperimentalFormSubmit = exports.ExperimentalFormReset = exports.ExperimentalFormErrorMessage = exports.ExperimentalForm = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+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 _Banners = require("../Banners");
+var _Button = require("../Button");
+var _Icons = require("../Icons");
+var _Satellite = require("../Satellite");
+var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satellitePrefixer"));
+var _FormContext = require("./FormContext");
+var _useForm = require("./useForm");
+var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["className", "locale"],
+  _excluded2 = ["children"],
+  _excluded3 = ["children"],
+  _excluded4 = ["children"];
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+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 DEFAULT_ERROR_MESSAGE_LOCALE = {
+  errorText: function errorText(invalidFields) {
+    var firstInvalidField = invalidFields[0];
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["display-heading mb-2"]))),
+        children: ["Please fix ", invalidFields.length, " error", invalidFields.length > 1 ? "s" : "", " below and try again."]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col"]))),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
+          href: "#",
+          className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["text-black underline hover:text-grey-800"]))),
+          onClick: function onClick(e) {
+            e.preventDefault();
+            var label = document.querySelector("label[for=\"".concat(firstInvalidField.labelFor, "\"]"));
+            label === null || label === void 0 || label.scrollIntoView({
+              behavior: "smooth",
+              block: "start"
+            });
+            label === null || label === void 0 || label.focus({
+              preventScroll: true
+            });
+          },
+          children: "Go to first error"
+        })
+      })]
+    });
+  }
+};
+var ExperimentalFormErrorMessage = exports.ExperimentalFormErrorMessage = function ExperimentalFormErrorMessage(_ref) {
+  var className = _ref.className,
+    propsLocale = _ref.locale,
+    props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  var contextLocale = (0, _Satellite.useLocale)("form");
+  var locale = _objectSpread(_objectSpread(_objectSpread({}, DEFAULT_ERROR_MESSAGE_LOCALE), contextLocale), propsLocale);
+  var form = (0, _useForm.useExperimentalForm)();
+  if (!form) return null;
+  var invalidFields = Object.entries(form.fields).filter(function (_ref2) {
+    var _ref3 = (0, _slicedToArray2["default"])(_ref2, 2),
+      _ = _ref3[0],
+      value = _ref3[1];
+    return value.state.status === "invalid";
+  }).map(function (_ref4) {
+    var _ref5 = (0, _slicedToArray2["default"])(_ref4, 2),
+      _ = _ref5[0],
+      value = _ref5[1];
+    return value;
+  });
+  return invalidFields.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Banners.Alert, _objectSpread(_objectSpread({
+    variant: "red",
+    icon: _Icons.XOctagonIcon
+  }, props), {}, {
+    className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))), className),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      "aria-live": "assertive",
+      className: (0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["whitespace-break-spaces"]))),
+      children: locale.errorText(invalidFields)
+    })
+  })) : null;
+};
+var ExperimentalForm = exports.ExperimentalForm = function ExperimentalForm(_ref6) {
+  var children = _ref6.children,
+    props = (0, _objectWithoutProperties2["default"])(_ref6, _excluded2);
+  var _useState = (0, _react.useState)({}),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    fields = _useState2[0],
+    setFields = _useState2[1];
+  var addField = (0, _react.useCallback)(function (field) {
+    setFields(function (fields) {
+      return _objectSpread(_objectSpread({}, fields), {}, (0, _defineProperty2["default"])({}, field.labelFor, field));
+    });
+  }, []);
+  var removeField = (0, _react.useCallback)(function (field) {
+    setFields(function (fields) {
+      var _field$labelFor = field.labelFor,
+        _ = fields[_field$labelFor],
+        rest = (0, _objectWithoutProperties2["default"])(fields, [_field$labelFor].map(_toPropertyKey));
+      return rest;
+    });
+  }, []);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_FormContext.ExperimentalFormContext.Provider, {
+    value: {
+      fields: fields,
+      addField: addField,
+      removeField: removeField
+    },
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("form", _objectSpread(_objectSpread({
+      noValidate: true
+    }, props), {}, {
+      children: children
+    }))
+  });
+};
+var ExperimentalFormSubmit = exports.ExperimentalFormSubmit = function ExperimentalFormSubmit(_ref7) {
+  var children = _ref7.children,
+    props = (0, _objectWithoutProperties2["default"])(_ref7, _excluded3);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.Button, _objectSpread(_objectSpread({}, props), {}, {
+    type: "submit",
+    children: children
+  }));
+};
+var ExperimentalFormReset = exports.ExperimentalFormReset = function ExperimentalFormReset(_ref8) {
+  var children = _ref8.children,
+    props = (0, _objectWithoutProperties2["default"])(_ref8, _excluded4);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.Button, _objectSpread(_objectSpread({}, props), {}, {
+    type: "reset",
+    children: children
+  }));
+};

package/dist/cjs/Form/FormContext.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import type { FieldState } from "../Field";
+export declare type ExperimentalFormContextField = {
+    state: FieldState;
+    label: string;
+    labelFor: string;
+};
+export declare type ExperimentalFormContextValue = {
+    fields: Record<string, ExperimentalFormContextField>;
+    addField: (field: ExperimentalFormContextField) => void;
+    removeField: (field: ExperimentalFormContextField) => void;
+};
+export declare const ExperimentalFormContext: import("react").Context<ExperimentalFormContextValue | null>;

package/dist/cjs/Form/FormContext.js

@@ -0,0 +1,8 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ExperimentalFormContext = void 0;
+var _react = require("react");
+var ExperimentalFormContext = exports.ExperimentalFormContext = /*#__PURE__*/(0, _react.createContext)(null);

package/dist/cjs/Form/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./Form";
+export type { ExperimentalFormContextField, ExperimentalFormContextValue } from "./FormContext";
+export * from "./useForm";

package/dist/cjs/Form/index.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _Form = require("./Form");
+Object.keys(_Form).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Form[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Form[key];
+    }
+  });
+});
+var _useForm = require("./useForm");
+Object.keys(_useForm).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _useForm[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _useForm[key];
+    }
+  });
+});