@algolia/satellite 1.1.0 → 1.1.1

package/dist/esm/Fields/DatePicker/components/NavBar.d.ts

@@ -0,0 +1,9 @@
+import type { VFC } from "react";
+import type { CaptionProps } from "react-day-picker";
+import type { WithRequiredProperty } from "../../../types";
+import type { DatePickerLocale } from "../types";
+import type { EditableYearProps } from "./Calendar";
+export declare type NavBarProps = CaptionProps & EditableYearProps & {
+    locale: WithRequiredProperty<DatePickerLocale, "nextMonth" | "previousMonth">;
+};
+export declare const NavBar: VFC<NavBarProps>;

package/dist/esm/Fields/DatePicker/components/NavBar.js

@@ -0,0 +1,116 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
+import cx from "clsx";
+import { add, eachYearOfInterval, getYear, setYear } from "date-fns";
+import isSameMonth from "date-fns/isSameMonth";
+import { useMemo } from "react";
+import { useDayPicker, useNavigation } from "react-day-picker";
+import { IconButton } from "../../../Actions";
+import { ChevronLeftIcon, ChevronRightIcon } from "../../../Icons";
+import stl from "../../../styles/helpers/satellitePrefixer";
+import { uniqueId } from "../../../utils";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export var NavBar = function NavBar(props) {
+  var _useDayPicker = useDayPicker(),
+    numberOfMonths = _useDayPicker.numberOfMonths,
+    onMonthChange = _useDayPicker.onMonthChange,
+    formatMonthCaption = _useDayPicker.formatters.formatMonthCaption,
+    dir = _useDayPicker.dir,
+    locale = _useDayPicker.locale;
+  var _useNavigation = useNavigation(),
+    previousMonth = _useNavigation.previousMonth,
+    nextMonth = _useNavigation.nextMonth,
+    goToMonth = _useNavigation.goToMonth,
+    goToDate = _useNavigation.goToDate,
+    displayMonths = _useNavigation.displayMonths;
+  var _props$locale = props.locale,
+    nextMonthLabel = _props$locale.nextMonth,
+    previousMonthLabel = _props$locale.previousMonth;
+  var initialDate = useMemo(function () {
+    return props.editableYear && props.initialDate ? props.initialDate : new Date();
+  }, [props]);
+  var displayIndex = displayMonths.findIndex(function (month) {
+    return isSameMonth(props.displayMonth, month);
+  });
+  var showNext = numberOfMonths === 1 || displayIndex === displayMonths.length - 1;
+  var showPrevious = numberOfMonths === 1 || displayIndex === 0;
+  var handlePreviousClick = function handlePreviousClick() {
+    if (!previousMonth) return;
+    goToMonth(previousMonth);
+    onMonthChange === null || onMonthChange === void 0 || onMonthChange(previousMonth);
+  };
+  var handleNextClick = function handleNextClick() {
+    if (!nextMonth) return;
+    goToMonth(nextMonth);
+    onMonthChange === null || onMonthChange === void 0 || onMonthChange(nextMonth);
+  };
+  var years = useMemo(function () {
+    if (!props.editableYear) return [];
+    if (props.years) return props.years;
+    var interval = eachYearOfInterval({
+      start: add(initialDate, {
+        years: -5
+      }),
+      end: add(initialDate, {
+        years: 10
+      })
+    }).map(getYear);
+    var monthYear = props.displayMonth.getFullYear(); // year of the currently shown month
+    if (interval.includes(monthYear)) return interval;
+    var minYear = Math.min.apply(Math, _toConsumableArray(interval).concat([monthYear]));
+    var maxYear = Math.max.apply(Math, _toConsumableArray(interval).concat([monthYear]));
+    return Array.from({
+      length: maxYear - minYear + 1
+    }, function (_, i) {
+      return i + minYear;
+    });
+  }, [props, initialDate]);
+  var yearSelectId = useMemo(function () {
+    return uniqueId("year-select");
+  }, []);
+  return /*#__PURE__*/_jsxs("div", {
+    className: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["w-full top-3 left-0 pt-1 px-2 pb-2 flex justify-between"]))),
+    children: [showPrevious ? /*#__PURE__*/_jsx(IconButton, {
+      icon: dir === "rtl" ? ChevronRightIcon : ChevronLeftIcon,
+      title: previousMonthLabel,
+      onClick: handlePreviousClick
+    }) : /*#__PURE__*/_jsx("span", {
+      className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["w-8"])))
+    }), /*#__PURE__*/_jsx("div", {
+      className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["flex items-center text-center"]))),
+      children: /*#__PURE__*/_jsxs("div", {
+        className: stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["font-medium text-md"]))),
+        children: [formatMonthCaption(props.displayMonth, {
+          locale: locale
+        }), " ", props.editableYear ? /*#__PURE__*/_jsxs("label", {
+          htmlFor: yearSelectId,
+          children: [/*#__PURE__*/_jsx("span", {
+            className: stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["sr-only"]))),
+            children: "Select a year"
+          }), /*#__PURE__*/_jsx("select", {
+            id: yearSelectId,
+            className: cx("rdp-year", stl(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["pl-0.5 font-medium outline-none border-transparent border-2 rounded focus:border-accent-600 focus:shadow-z100 appearance-none"])))),
+            value: props.displayMonth.getFullYear(),
+            onChange: function onChange(e) {
+              return goToDate(setYear(props.displayMonth, parseInt(e.currentTarget.value)));
+            },
+            children: years.map(function (year) {
+              return /*#__PURE__*/_jsx("option", {
+                value: year,
+                children: year
+              }, year);
+            })
+          })]
+        }) : props.displayMonth.getFullYear()]
+      })
+    }), showNext ? /*#__PURE__*/_jsx(IconButton, {
+      icon: dir === "rtl" ? ChevronLeftIcon : ChevronRightIcon,
+      title: nextMonthLabel,
+      onClick: handleNextClick
+    }) : /*#__PURE__*/_jsx("span", {
+      className: stl(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["w-8"])))
+    })]
+  });
+};

package/dist/esm/Fields/DatePicker/components/SidePanel.js

@@ -0,0 +1,14 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+var _templateObject, _templateObject2;
+import stl from "../../../styles/helpers/satellitePrefixer";
+import { jsx as _jsx } from "react/jsx-runtime";
+export var DatePickerSidePanel = function DatePickerSidePanel(_ref) {
+  var children = _ref.children;
+  return /*#__PURE__*/_jsx("div", {
+    className: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["min-w-64 flex px-4 py-3"]))),
+    children: /*#__PURE__*/_jsx("div", {
+      className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["flex flex-col flex-1 justify-between items-start border-l border-grey-100 pl-4"]))),
+      children: children
+    })
+  });
+};

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

@@ -0,0 +1,3 @@
+export * from "./DatePicker";
+export * from "./DateRangePicker";
+export * from "./types";

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

@@ -0,0 +1,3 @@
+export * from "./DatePicker";
+export * from "./DateRangePicker";
+export * from "./types";

package/dist/esm/Fields/Dropzone/Dropzone.js

@@ -0,0 +1,168 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+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) { _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 "clsx";
+import { forwardRef, Fragment, useCallback, useMemo, useState } from "react";
+import { useDropzone } from "react-dropzone";
+import { IconButton } from "../../Actions";
+import { CheckIcon, UploadCloudIcon, XIcon } from "../../Icons";
+import { useLocale } from "../../Satellite";
+import stl from "../../styles/helpers/satellitePrefixer";
+import { formatHumanSize } from "../../utils/formatters";
+import { uniqueId } from "../../utils/uniqueId";
+import { useField } from "../Field";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
+var DropzoneFileItem = function DropzoneFileItem(_ref) {
+  var file = _ref.file;
+  return /*#__PURE__*/_jsxs("span", {
+    className: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["truncate text-grey-900"]))),
+    children: [file.name, " - ", formatHumanSize(file.size)]
+  });
+};
+var DEFAULT_DROPZONE_LOCALE = {
+  clearInput: "Clear input",
+  placeholder: function placeholder(multiple) {
+    return "Drop ".concat(multiple ? "files" : "file", " here or click to select.");
+  }
+};
+var InvalidIcon = function InvalidIcon() {
+  return /*#__PURE__*/_jsx(XIcon, {
+    className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["mr-4 h-4 w-4 text-white bg-red-700 p-px rounded-full"])))
+  });
+};
+var ValidatedIcon = function ValidatedIcon() {
+  return /*#__PURE__*/_jsx(CheckIcon, {
+    className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["mr-4 h-4 w-4 text-white bg-accent-600 p-px rounded-full"])))
+  });
+};
+
+/**
+ * The `Dropzone` component is used to upload files.
+ *
+ * See the [Dropzone documentation page](https://satellite.algolia.com/components/forms/dropzone) for more information.
+ */
+export var Dropzone = /*#__PURE__*/forwardRef(function (_ref2, ref) {
+  var id = _ref2.id,
+    placeholder = _ref2.placeholder,
+    disabled = _ref2.disabled,
+    _ref2$multiple = _ref2.multiple,
+    multiple = _ref2$multiple === void 0 ? false : _ref2$multiple,
+    _ref2$clearable = _ref2.clearable,
+    clearable = _ref2$clearable === void 0 ? false : _ref2$clearable,
+    onChange = _ref2.onChange,
+    className = _ref2.className,
+    propsLocale = _ref2.locale,
+    _ref2$required = _ref2.required,
+    required = _ref2$required === void 0 ? false : _ref2$required,
+    props = _objectWithoutProperties(_ref2, _excluded);
+  var contextLocale = useLocale("dropzone");
+  var locale = _objectSpread(_objectSpread(_objectSpread({}, DEFAULT_DROPZONE_LOCALE), contextLocale), propsLocale);
+  var _useState = useState([]),
+    _useState2 = _slicedToArray(_useState, 2),
+    files = _useState2[0],
+    setFiles = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    focused = _useState4[0],
+    setFocused = _useState4[1];
+  var _useField = useField({
+      required: required
+    }),
+    status = _useField.state.status,
+    labelId = _useField.labelId,
+    descriptionId = _useField.descriptionId,
+    inputId = _useField.inputId;
+  var onDrop = useCallback(function (acceptedFiles, fileRejections) {
+    var updatedFiles = multiple ? [].concat(_toConsumableArray(files), _toConsumableArray(acceptedFiles)) : acceptedFiles;
+    setFiles(updatedFiles);
+    onChange === null || onChange === void 0 || onChange(updatedFiles, fileRejections);
+  }, [multiple, files, onChange]);
+  var handleClear = function handleClear(evt) {
+    evt.stopPropagation();
+    setFiles([]);
+    onChange === null || onChange === void 0 || onChange([], []);
+  };
+  var _useDropzone = useDropzone(_objectSpread(_objectSpread({
+      disabled: disabled,
+      multiple: multiple
+    }, props), {}, {
+      onDrop: onDrop
+    })),
+    getRootProps = _useDropzone.getRootProps,
+    getInputProps = _useDropzone.getInputProps,
+    isDragActive = _useDropzone.isDragActive,
+    isDragReject = _useDropzone.isDragReject;
+  var dropzoneId = useMemo(function () {
+    var _ref3;
+    return (_ref3 = id !== null && id !== void 0 ? id : inputId) !== null && _ref3 !== void 0 ? _ref3 : uniqueId("dropzone");
+  }, [id, inputId]);
+  var isValueEmpty = files.length === 0;
+  var isInvalid = status === "invalid";
+  var StatusIcon = isInvalid ? InvalidIcon : status === "validated" ? ValidatedIcon : Fragment;
+  return /*#__PURE__*/_jsxs("div", _objectSpread(_objectSpread({}, getRootProps({
+    ref: ref,
+    "aria-controls": dropzoneId,
+    "aria-labelledby": labelId,
+    "aria-describedby": descriptionId,
+    "aria-invalid": isInvalid,
+    className: cx(stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\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")) {
+        evt.stopPropagation();
+      }
+    }
+  })), {}, {
+    children: [/*#__PURE__*/_jsx("input", _objectSpread({}, getInputProps({
+      id: dropzoneId,
+      required: required,
+      onFocus: function onFocus() {
+        return setFocused(true);
+      },
+      onBlur: function onBlur() {
+        return setFocused(false);
+      }
+    }))), /*#__PURE__*/_jsx("div", {
+      className: stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["flex-1 flex items-center justify-center space-x-2 display-body"]))),
+      children: files.length > 0 ? files.length > 1 ? /*#__PURE__*/_jsx("ul", {
+        children: files.map(function (file) {
+          return /*#__PURE__*/_jsx("li", {
+            children: /*#__PURE__*/_jsx(DropzoneFileItem, {
+              file: file
+            })
+          }, file.name);
+        })
+      }) : /*#__PURE__*/_jsx(DropzoneFileItem, {
+        file: files[0]
+      }) : /*#__PURE__*/_jsxs("div", {
+        className: stl(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["flex items-center justify-center space-x-2 display-body"]))),
+        children: [/*#__PURE__*/_jsx(UploadCloudIcon, {
+          size: "1rem",
+          className: stl(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["", ""])), disabled ? "text-grey-200" : "text-grey-500")
+        }), /*#__PURE__*/_jsx("p", {
+          className: stl(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["", ""])), disabled ? "text-grey-300" : "typo-subdued"),
+          children: placeholder || locale.placeholder(multiple)
+        })]
+      })
+    }), clearable && !disabled && !isValueEmpty && /*#__PURE__*/_jsx("span", {
+      children: /*#__PURE__*/_jsx(IconButton, {
+        className: stl(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["mr-2 ", ""])), focused ? "visible" : "invisible group-hover/dropzone:visible"),
+        title: locale.clearInput,
+        icon: XIcon,
+        variant: "subtle",
+        size: "small",
+        tabIndex: -1,
+        "aria-hidden": true,
+        onClick: handleClear
+      })
+    }), /*#__PURE__*/_jsx(StatusIcon, {})]
+  }));
+});
+Dropzone.displayName = "Dropzone";

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

@@ -0,0 +1,120 @@
+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 cx from "clsx";
+import { useEffect, useMemo, useState } from "react";
+import { AlertCircleIcon } from "../../Icons";
+import stl from "../../styles/helpers/satellitePrefixer";
+import { uniqueId } from "../../utils";
+import { getTextFromReactNode } from "../../utils/getTextFromReactNode";
+import { useExperimentalForm } from "../Form/useForm";
+import { DEFAULT_FIELD_STATE, FieldContext } from "./FieldContext";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * 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 className = _ref.className,
+    label = _ref.label,
+    labelForProp = _ref.labelFor,
+    labelIdProp = _ref.labelId,
+    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,
+    requiredProp = _ref.required,
+    children = _ref.children;
+  var hasLabel = !!label;
+  var labelId = useMemo(
+  // eslint-disable-next-line @algolia/stl/prefer-stl-helper
+  function () {
+    return hasLabel ? labelIdProp !== null && labelIdProp !== void 0 ? labelIdProp : uniqueId("stl-field-label-") : undefined;
+  }, [labelIdProp, hasLabel]);
+  var hasLabelFor = !!labelForProp;
+  var labelFor = useMemo(
+  // eslint-disable-next-line @algolia/stl/prefer-stl-helper
+  function () {
+    return hasLabelFor ? labelForProp : uniqueId("stl-field-input-");
+  }, [labelForProp, hasLabelFor]);
+  var descriptionId = useMemo(
+  // eslint-disable-next-line @algolia/stl/prefer-stl-helper
+  function () {
+    return description || state.status === "invalid" ? uniqueId("stl-field-description-") : undefined;
+  }, [description, state.status]);
+  var _useState = useState(undefined),
+    _useState2 = _slicedToArray(_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 = useExperimentalForm();
+  var addField = form === null || form === void 0 ? void 0 : form.addField;
+  var removeField = form === null || form === void 0 ? void 0 : form.removeField;
+  useEffect(function () {
+    addField === null || addField === void 0 || addField({
+      state: state,
+      label: getTextFromReactNode(label),
+      labelFor: labelFor
+    });
+    return function () {
+      removeField === null || removeField === void 0 || removeField({
+        state: state,
+        label: getTextFromReactNode(label),
+        labelFor: labelFor
+      });
+    };
+  }, [addField, removeField, state, labelFor, label]);
+  return /*#__PURE__*/_jsx(FieldContext.Provider, {
+    value: {
+      state: state,
+      labelId: labelId,
+      descriptionId: descriptionId,
+      inputId: labelFor,
+      setRequired: setRequiredContext
+    },
+    children: /*#__PURE__*/_jsxs("div", {
+      className: className,
+      children: [/*#__PURE__*/_jsxs("label", {
+        className: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["cursor-pointer flex ", ""])), inline ? "items-center" : "flex-col"),
+        htmlFor: labelFor,
+        children: [hasLabel && /*#__PURE__*/_jsxs("div", {
+          id: labelId,
+          className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["truncate ", ""])), inline ? "mr-2" : "mb-1"),
+          children: [label, (requiredProp || requiredContext) && /*#__PURE__*/_jsx("span", {
+            className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["text-red-700 ml-0.5"]))),
+            "aria-hidden": true,
+            children: "*"
+          })]
+        }), /*#__PURE__*/_jsx("div", {
+          className: cx(inline && stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["ml-auto mt-1"])))),
+          children: children
+        })]
+      }), 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/Form/Form.d.ts

@@ -0,0 +1,16 @@
+import type { FC, HTMLAttributes, ReactNode, VFC } from "react";
+import type { ButtonProps } from "../../Actions";
+import type { AlertProps } from "../../Indicators";
+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/esm/Fields/Form/Form.js

@@ -0,0 +1,135 @@
+import _typeof from "@babel/runtime/helpers/typeof";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+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) { _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 "clsx";
+import { useCallback, useState } from "react";
+import { Button } from "../../Actions";
+import { XOctagonIcon } from "../../Icons";
+import { Alert } from "../../Indicators";
+import { useLocale } from "../../Satellite";
+import stl from "../../styles/helpers/satellitePrefixer";
+import { ExperimentalFormContext } from "./FormContext";
+import { useExperimentalForm } from "./useForm";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+var DEFAULT_ERROR_MESSAGE_LOCALE = {
+  errorText: function errorText(invalidFields) {
+    var firstInvalidField = invalidFields[0];
+    return /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsxs("div", {
+        className: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["display-heading mb-2"]))),
+        children: ["Please fix ", invalidFields.length, " error", invalidFields.length > 1 ? "s" : "", " below and try again."]
+      }), /*#__PURE__*/_jsx("div", {
+        className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["flex flex-col"]))),
+        children: /*#__PURE__*/_jsx("a", {
+          href: "#",
+          className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["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"
+        })
+      })]
+    });
+  }
+};
+export var ExperimentalFormErrorMessage = function ExperimentalFormErrorMessage(_ref) {
+  var className = _ref.className,
+    propsLocale = _ref.locale,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var contextLocale = useLocale("form");
+  var locale = _objectSpread(_objectSpread(_objectSpread({}, DEFAULT_ERROR_MESSAGE_LOCALE), contextLocale), propsLocale);
+  var form = useExperimentalForm();
+  if (!form) return null;
+  var invalidFields = Object.entries(form.fields).filter(function (_ref2) {
+    var _ref3 = _slicedToArray(_ref2, 2),
+      _ = _ref3[0],
+      value = _ref3[1];
+    return value.state.status === "invalid";
+  }).map(function (_ref4) {
+    var _ref5 = _slicedToArray(_ref4, 2),
+      _ = _ref5[0],
+      value = _ref5[1];
+    return value;
+  });
+  return invalidFields.length > 0 ? /*#__PURE__*/_jsx(Alert, _objectSpread(_objectSpread({
+    variant: "red",
+    icon: XOctagonIcon
+  }, props), {}, {
+    className: cx(stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["w-full"]))), className),
+    children: /*#__PURE__*/_jsx("span", {
+      "aria-live": "assertive",
+      className: stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["whitespace-break-spaces"]))),
+      children: locale.errorText(invalidFields)
+    })
+  })) : null;
+};
+export var ExperimentalForm = function ExperimentalForm(_ref6) {
+  var children = _ref6.children,
+    props = _objectWithoutProperties(_ref6, _excluded2);
+  var _useState = useState({}),
+    _useState2 = _slicedToArray(_useState, 2),
+    fields = _useState2[0],
+    setFields = _useState2[1];
+  var addField = useCallback(function (field) {
+    setFields(function (fields) {
+      return _objectSpread(_objectSpread({}, fields), {}, _defineProperty({}, field.labelFor, field));
+    });
+  }, []);
+  var removeField = useCallback(function (field) {
+    setFields(function (fields) {
+      var _field$labelFor = field.labelFor,
+        _ = fields[_field$labelFor],
+        rest = _objectWithoutProperties(fields, [_field$labelFor].map(_toPropertyKey));
+      return rest;
+    });
+  }, []);
+  return /*#__PURE__*/_jsx(ExperimentalFormContext.Provider, {
+    value: {
+      fields: fields,
+      addField: addField,
+      removeField: removeField
+    },
+    children: /*#__PURE__*/_jsx("form", _objectSpread(_objectSpread({
+      noValidate: true
+    }, props), {}, {
+      children: children
+    }))
+  });
+};
+export var ExperimentalFormSubmit = function ExperimentalFormSubmit(_ref7) {
+  var children = _ref7.children,
+    props = _objectWithoutProperties(_ref7, _excluded3);
+  return /*#__PURE__*/_jsx(Button, _objectSpread(_objectSpread({}, props), {}, {
+    type: "submit",
+    children: children
+  }));
+};
+export var ExperimentalFormReset = function ExperimentalFormReset(_ref8) {
+  var children = _ref8.children,
+    props = _objectWithoutProperties(_ref8, _excluded4);
+  return /*#__PURE__*/_jsx(Button, _objectSpread(_objectSpread({}, props), {}, {
+    type: "reset",
+    children: children
+  }));
+};