@algolia/satellite 1.0.0 → 1.1.0

package/dist/esm/AutoComplete/AutoComplete.js

@@ -1,12 +1,14 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28;
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30;
 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 { useCombobox, useMultipleSelection } from "downshift";
+import { forwardRef } from "react";
+import { Fragment } from "react";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { usePopper } from "react-popper";
 import useMeasure from "react-use/lib/useMeasure";
@@ -14,11 +16,12 @@ import usePrevious from "react-use/lib/usePrevious";
 import { Card } from "../Card";
 import { ClickAwayContainer } from "../ClickAwayContainer";
 import { useField } from "../Field";
-import { XIcon } from "../Icons";
+import { CheckIcon, XIcon } from "../Icons";
 import { useCreatePortal, useLocale } from "../Satellite";
 import { ScrollIndicator } from "../ScrollIndicator";
 import stl from "../styles/helpers/satellitePrefixer";
 import { Tag } from "../Tag";
+import { mergeRefs } from "../utils/mergeRefs";
 import { uniqBy } from "../utils/uniqBy";
 import { AutoCompleteProvider } from "./components/AutoCompleteContext";
 import { AutoCompleteEmptyState } from "./components/AutoCompleteEmptyState";
@@ -44,18 +47,30 @@ var updateRef = function updateRef(ref, value) {
     ref.current = value;
   }
 };
+var InvalidIcon = function InvalidIcon() {
+  return /*#__PURE__*/_jsx(XIcon, {
+    className: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["h-4 w-4 text-white bg-red-700 p-px rounded-full"])))
+  });
+};
+var ValidatedIcon = function ValidatedIcon() {
+  return /*#__PURE__*/_jsx(CheckIcon, {
+    className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["h-4 w-4 text-white bg-accent-600 p-px rounded-full"])))
+  });
+};
 
 /**
  * The `Autocomplete` component enables users to search and select from a list using real-time input matching.
  *
  * See the [Autocomplete documentation page](https://satellite.algolia.com/components/forms/autocomplete) for more information.
  */
-export var AutoComplete = function AutoComplete(_ref) {
+export var AutoComplete = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var localeProp = _ref.locale,
     id = _ref.id,
     labelId = _ref.labelId,
     ariaLabel = _ref["aria-label"],
     name = _ref.name,
+    _ref$required = _ref.required,
+    required = _ref$required === void 0 ? false : _ref$required,
     placeholder = _ref.placeholder,
     autoFocus = _ref.autoFocus,
     inputValueProp = _ref.inputValue,
@@ -89,9 +104,15 @@ export var AutoComplete = function AutoComplete(_ref) {
     valuesClassName = _ref.valuesClassName,
     internalsRef = _ref.internalsRef;
   var createPortal = useCreatePortal();
-  var _useField = useField(),
+  var _useField = useField({
+      required: required
+    }),
     status = _useField.state.status,
-    fieldLabelId = _useField.labelId;
+    fieldLabelId = _useField.labelId,
+    descriptionId = _useField.descriptionId,
+    inputId = _useField.inputId;
+  var isInvalid = status === "invalid";
+  var StatusIcon = isInvalid ? InvalidIcon : status === "validated" ? ValidatedIcon : Fragment;
   var localeContext = useLocale("autoComplete");
   var locale = useMemo(function () {
     return _objectSpread(_objectSpread(_objectSpread({}, DEFAULT_AUTOCOMPLETE_LOCALE), localeContext), localeProp);
@@ -165,7 +186,7 @@ export var AutoComplete = function AutoComplete(_ref) {
     }
   });
   var combobox = useCombobox({
-    inputId: id,
+    inputId: id !== null && id !== void 0 ? id : inputId,
     labelId: labelId !== null && labelId !== void 0 ? labelId : fieldLabelId,
     items: items,
     itemToString: optionToString,
@@ -235,9 +256,12 @@ export var AutoComplete = function AutoComplete(_ref) {
     }
   });
   var inputProps = combobox.getInputProps(_objectSpread({
-    "aria-label": ariaLabel
+    "aria-label": ariaLabel,
+    "aria-describedby": descriptionId,
+    "aria-invalid": isInvalid,
+    required: required
   }, multipleSelection.getDropdownProps({
-    ref: inputRef,
+    ref: mergeRefs([inputRef, ref]),
     autoFocus: autoFocus,
     disabled: disabled,
     // See https://github.com/downshift-js/downshift/issues/1108
@@ -303,24 +327,24 @@ export var AutoComplete = function AutoComplete(_ref) {
   return /*#__PURE__*/_jsx(AutoCompleteProvider, {
     locale: locale,
     children: /*#__PURE__*/_jsxs("div", {
-      className: cx(stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["flex"]))), className),
+      className: cx(stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["flex"]))), className),
       ref: function ref(el) {
         setContainerElement(el);
         // @ts-expect-error
         setContainerMeasureRef(el);
       },
       children: [/*#__PURE__*/_jsxs("div", {
-        className: cx(stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["autocomplete-container"]))), variant === "large" && stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["autocomplete-large py-1"]))), inputFocused && stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["autocomplete-focused"]))), disabled && stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["autocomplete-disabled"]))), status === "invalid" && stl(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["autocomplete-invalid"]))), noWrap && stl(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["autocomplete-nowrap"])))),
+        className: cx(stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["autocomplete-container"]))), variant === "large" && stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["autocomplete-large py-1"]))), inputFocused && stl(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["autocomplete-focused"]))), disabled && stl(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["autocomplete-disabled"]))), isInvalid && stl(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["autocomplete-invalid"]))), noWrap && stl(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["autocomplete-nowrap"])))),
         onClick: function onClick() {
           var _inputRef$current;
           return (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
         },
         children: [Icon && /*#__PURE__*/_jsx(Icon, {
-          className: cx(stl(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["mr-4 shrink-0"]))), stl(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["", ""])), disabled ? "text-grey-200" : inputFocused ? "text-accent-600" : "text-grey-500")),
+          className: cx(stl(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["mr-4 shrink-0"]))), stl(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["", ""])), disabled ? "text-grey-200" : inputFocused ? "text-accent-600" : "text-grey-500")),
           width: "1rem",
           height: "1rem"
         }), /*#__PURE__*/_jsxs("div", {
-          className: cx(stl(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["flex items-center flex-1 max-h-full"]))), !noWrap && stl(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["flex-wrap overflow-y-scroll no-scrollbar"]))), multiple && stl(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["-ml-1"]))), valuesClassName),
+          className: cx(stl(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["flex items-center flex-1 max-h-full"]))), !noWrap && stl(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["flex-wrap overflow-y-scroll no-scrollbar"]))), multiple && stl(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["-ml-1"]))), valuesClassName),
           children: [multiple && selectedItems.map(function (option, index) {
             return renderValueTemplate ? /*#__PURE__*/_jsx("span", _objectSpread(_objectSpread({}, multipleSelection.getSelectedItemProps({
               selectedItem: option,
@@ -335,7 +359,7 @@ export var AutoComplete = function AutoComplete(_ref) {
                 evt.stopPropagation();
                 multipleSelection.removeSelectedItem(option);
               },
-              className: stl(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["m-1 max-w-48 ", ""])), disabled && "opacity-50")
+              className: stl(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["m-1 max-w-48 ", ""])), disabled && "opacity-50")
             }, multipleSelection.getSelectedItemProps({
               selectedItem: option,
               index: index
@@ -348,21 +372,21 @@ export var AutoComplete = function AutoComplete(_ref) {
           }), /*#__PURE__*/_jsx("input", _objectSpread(_objectSpread({
             "data-lpignore": true
           }, inputProps), {}, {
-            id: id,
+            id: id !== null && id !== void 0 ? id : inputId,
             name: name,
             type: "text",
             placeholder: hasValue ? "" : placeholder,
             autoComplete: "off",
-            className: cx(stl(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["autocomplete-input py-1.5"]))), multiple && stl(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["ml-1"]))), shouldRenderCustomTemplate && hasValue && stl(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["h-0 w-0 opacity-0"]))))
+            className: cx(stl(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["autocomplete-input py-1.5"]))), multiple && stl(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["ml-1"]))), shouldRenderCustomTemplate && hasValue && stl(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["h-0 w-0 opacity-0"]))))
           }))]
         }), Boolean(showClearButton || endItem) && /*#__PURE__*/_jsxs("div", {
-          className: cx(showClearButton && endItem && stl(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["my-2 flex self-end space-x-4"])))),
+          className: cx(showClearButton && endItem && stl(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["my-2 flex self-end space-x-4"])))),
           children: [!!endItem && /*#__PURE__*/_jsx("div", {
-            className: stl(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["text-grey-700 my-auto"]))),
+            className: stl(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["text-grey-700 my-auto"]))),
             children: endItem
           }), showClearButton && /*#__PURE__*/_jsx("button", {
             type: "button",
-            className: stl(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["w-6 h-6 flex items-center justify-center text-grey-500"]))),
+            className: stl(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["w-6 h-6 flex items-center justify-center text-grey-500"]))),
             onClick: function onClick() {
               setInternalInputValue("");
               multipleSelection.setSelectedItems([]);
@@ -372,11 +396,11 @@ export var AutoComplete = function AutoComplete(_ref) {
               size: ".75rem"
             })
           })]
-        })]
+        }), /*#__PURE__*/_jsx(StatusIcon, {})]
       }), createPortal( /*#__PURE__*/_jsx(ClickAwayContainer, {
         element: menuRef.current,
         children: /*#__PURE__*/_jsxs(Card, _objectSpread(_objectSpread({}, menuPopper.attributes), {}, {
-          className: cx(stl(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["z-dropdown"]))), menuClassName),
+          className: cx(stl(_templateObject22 || (_templateObject22 = _taggedTemplateLiteral(["z-dropdown"]))), menuClassName),
           style: _objectSpread(_objectSpread(_objectSpread({}, menuPopper.styles.popper), hideMenu && {
             display: "none"
           }), {}, {
@@ -387,7 +411,7 @@ export var AutoComplete = function AutoComplete(_ref) {
           elevation: "300",
           fullBleed: true,
           children: [hideMenu ? /*#__PURE__*/_jsx("div", _objectSpread({}, combobox.getMenuProps())) : items.length === 0 ? /*#__PURE__*/_jsx("div", _objectSpread(_objectSpread({}, combobox.getMenuProps({
-            className: stl(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["min-h-10"])))
+            className: stl(_templateObject23 || (_templateObject23 = _taggedTemplateLiteral(["min-h-10"])))
           })), {}, {
             children: /*#__PURE__*/_jsx("div", {
               role: "option",
@@ -398,15 +422,15 @@ export var AutoComplete = function AutoComplete(_ref) {
               })
             })
           })) : /*#__PURE__*/_jsx(ScrollIndicator, {
-            className: menuSize === "large" ? stl(_templateObject22 || (_templateObject22 = _taggedTemplateLiteral(["max-h-96"]))) : stl(_templateObject23 || (_templateObject23 = _taggedTemplateLiteral(["max-h-64"]))),
+            className: menuSize === "large" ? stl(_templateObject24 || (_templateObject24 = _taggedTemplateLiteral(["max-h-96"]))) : stl(_templateObject25 || (_templateObject25 = _taggedTemplateLiteral(["max-h-64"]))),
             children: /*#__PURE__*/_jsx("ul", _objectSpread(_objectSpread({}, combobox.getMenuProps()), {}, {
               children: items.map(function (item, index) {
                 return /*#__PURE__*/_jsx("li", _objectSpread(_objectSpread({}, combobox.getItemProps({
                   item: item,
-                  className: cx(stl(_templateObject24 || (_templateObject24 = _taggedTemplateLiteral(["autocomplete-result flex items-center min-h-10 px-4 cursor-pointer"]))), index === combobox.highlightedIndex && stl(_templateObject25 || (_templateObject25 = _taggedTemplateLiteral(["bg-grey-100"]))), item.disabled && stl(_templateObject26 || (_templateObject26 = _taggedTemplateLiteral(["cursor-not-allowed"]))))
+                  className: cx(stl(_templateObject26 || (_templateObject26 = _taggedTemplateLiteral(["autocomplete-result flex items-center min-h-10 px-4 cursor-pointer"]))), index === combobox.highlightedIndex && stl(_templateObject27 || (_templateObject27 = _taggedTemplateLiteral(["bg-grey-100"]))), item.disabled && stl(_templateObject28 || (_templateObject28 = _taggedTemplateLiteral(["cursor-not-allowed"]))))
                 })), {}, {
                   children: item.value === SHOW_ALL_ITEMS_ID ? /*#__PURE__*/_jsx("span", {
-                    className: stl(_templateObject27 || (_templateObject27 = _taggedTemplateLiteral(["w-full py-2 truncate text-center text-grey-900"]))),
+                    className: stl(_templateObject29 || (_templateObject29 = _taggedTemplateLiteral(["w-full py-2 truncate text-center text-grey-900"]))),
                     children: item.label
                   }, item.value) : /*#__PURE__*/_jsx(OptionItem, {
                     multiple: Boolean(multiple),
@@ -418,11 +442,12 @@ export var AutoComplete = function AutoComplete(_ref) {
               })
             }))
           }), !!menuFooter && /*#__PURE__*/_jsx("footer", {
-            className: stl(_templateObject28 || (_templateObject28 = _taggedTemplateLiteral(["flex items-center justify-center min-h-12 p-4 bg-grey-100 border-t border-grey-200 text-grey-600"]))),
+            className: stl(_templateObject30 || (_templateObject30 = _taggedTemplateLiteral(["flex items-center justify-center min-h-12 p-4 bg-grey-100 border-t border-grey-200 text-grey-600"]))),
             children: menuFooter
           })]
         }))
       }))]
     })
   });
-};
+});
+AutoComplete.displayName = "AutoComplete";

package/dist/esm/AutoComplete/AutoComplete.tailwind.js

@@ -24,6 +24,7 @@ var autoCompletePlugin = plugin(function (_ref) {
       border: "1px solid ".concat(theme("colors.grey.500")),
       boxShadow: "inset 0px 1px 4px 0px ".concat(rgba(theme("colors.grey.500"), 0.3)),
       transition: "all 100ms ease-in-out",
+      outline: "1px solid transparent",
       "&:not(.autocomplete-disabled, .autocomplete-focused):hover": {
         borderColor: theme("colors.grey.600")
       },
@@ -59,7 +60,14 @@ var autoCompletePlugin = plugin(function (_ref) {
     },
     ".autocomplete-invalid:not(.autocomplete-disabled)": {
       backgroundColor: theme("colors.red.100"),
-      borderColor: theme("colors.red.700")
+      borderColor: theme("colors.red.700"),
+      "&:hover": {
+        backgroundColor: theme("colors.red.50"),
+        borderColor: theme("colors.red.700")
+      },
+      "&.autocomplete-focused, &.autocomplete-container:focus-within": {
+        outlineColor: theme("colors.red.700")
+      }
     },
     ".autocomplete-nowrap": {
       overflowX: "scroll",

package/dist/esm/AutoComplete/types.d.ts

@@ -15,6 +15,7 @@ export interface AutoCompleteBaseProps<T extends Option = Option> {
     labelId?: string;
     icon?: IconComponentType;
     name?: string;
+    required?: boolean;
     className?: string;
     valuesClassName?: string;
     menuClassName?: string;

package/dist/esm/Checkbox/Checkbox.d.ts

@@ -19,5 +19,5 @@ export declare type CheckboxProps = CheckboxInputProps & CheckboxCustomProps;
  *
  * See the [Checkbox documentation page](https://satellite.algolia.com/components/controls/checkbox) for more information.
  */
-export declare const Checkbox: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLInputElement>, "onChange"> & Pick<InputHTMLAttributes<HTMLInputElement>, "defaultChecked" | "onChange" | "autoFocus" | "disabled" | "checked" | "required"> & CheckboxCustomProps & import("react").RefAttributes<HTMLInputElement>>;
+export declare const Checkbox: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLInputElement>, "onChange"> & Pick<InputHTMLAttributes<HTMLInputElement>, "defaultChecked" | "onChange" | "required" | "autoFocus" | "disabled" | "checked"> & CheckboxCustomProps & import("react").RefAttributes<HTMLInputElement>>;
 export {};

package/dist/esm/Checkbox/Checkbox.js

@@ -2,7 +2,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _excluded = ["children", "className", "textPosition", "indeterminate", "defaultChecked", "checkedColor", "checked", "disabled"];
+var _excluded = ["children", "className", "textPosition", "indeterminate", "defaultChecked", "checkedColor", "checked", "disabled", "required"];
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
 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; }
@@ -12,11 +12,9 @@ import { useField } from "../Field";
 import { CheckIcon, MinusIcon } from "../Icons";
 import stl from "../styles/helpers/satellitePrefixer";
 import { isRenderedChild } from "../utils/isRenderedChild";
+import { uniqueId } from "../utils/uniqueId";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-var generateFieldId = function generateFieldId() {
-  return Math.random().toString(36).substring(7);
-};
 var STATUS_CLASSNAMES = {
   "default": "",
   invalid: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["checkbox-invalid"]))),
@@ -38,13 +36,19 @@ export var Checkbox = /*#__PURE__*/forwardRef(function (_ref, ref) {
     checkedColor = _ref.checkedColor,
     checked = _ref.checked,
     disabled = _ref.disabled,
+    required = _ref.required,
     checkboxProps = _objectWithoutProperties(_ref, _excluded);
-  var id = useMemo(function () {
-    return checkboxProps.id || generateFieldId();
-  }, [checkboxProps.id]);
-  var _useField = useField(),
+  var _useField = useField({
+      required: required
+    }),
     status = _useField.state.status,
-    labelId = _useField.labelId;
+    labelId = _useField.labelId,
+    descriptionId = _useField.descriptionId,
+    inputId = _useField.inputId;
+  var id = useMemo(function () {
+    var _ref2, _checkboxProps$id;
+    return (_ref2 = (_checkboxProps$id = checkboxProps.id) !== null && _checkboxProps$id !== void 0 ? _checkboxProps$id : inputId) !== null && _ref2 !== void 0 ? _ref2 : uniqueId("checkbox");
+  }, [checkboxProps.id, inputId]);
   var isControlled = typeof checked === "boolean";
   var _useState = useState(Boolean(isControlled ? checked : defaultChecked)),
     _useState2 = _slicedToArray(_useState, 2),
@@ -69,10 +73,14 @@ export var Checkbox = /*#__PURE__*/forwardRef(function (_ref, ref) {
       },
       children: [/*#__PURE__*/_jsx(CheckboxIcon, {
         className: stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["checkbox-icon"])))
-      }), /*#__PURE__*/_jsx("input", _objectSpread(_objectSpread({}, checkboxProps), {}, {
-        "aria-checked": indeterminate ? "mixed" : isChecked,
-        id: id,
+      }), /*#__PURE__*/_jsx("input", _objectSpread(_objectSpread({
         "aria-labelledby": labelId,
+        "aria-describedby": descriptionId
+      }, checkboxProps), {}, {
+        id: id !== null && id !== void 0 ? id : inputId,
+        required: required,
+        "aria-invalid": status === "invalid",
+        "aria-checked": indeterminate ? "mixed" : isChecked,
         className: stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n              opacity-0 absolute inset-0\n              ", "\n            "])), disabled ? "cursor-not-allowed" : "cursor-pointer"),
         type: "checkbox",
         ref: ref,
@@ -82,7 +90,7 @@ export var Checkbox = /*#__PURE__*/forwardRef(function (_ref, ref) {
       }))]
     }), isRenderedChild(children) && /*#__PURE__*/_jsx("label", {
       className: stl(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n            display-body\n            ", "\n            ", "\n          "])), disabled && "text-grey-300 cursor-not-allowed", textPosition === "left" ? "pr-2" : "pl-2"),
-      htmlFor: id,
+      htmlFor: id !== null && id !== void 0 ? id : inputId,
       children: children
     })]
   });

package/dist/esm/Checkbox/Checkbox.tailwind.js

@@ -34,14 +34,20 @@ var checkboxPlugin = plugin(function (_ref) {
       }
     },
     ".group\\/checkbox:hover": {
-      "& > .checkbox:not(.checkbox-disabled, .checkbox-checked, .checkbox-indeterminate, :has(input:focus))": {
+      "& > .checkbox:not(.checkbox-disabled, .checkbox-checked, .checkbox-indeterminate, .checkbox-invalid, :has(input:focus))": {
         borderColor: theme("colors.grey.600")
       }
     },
     ".checkbox-invalid:not(.checkbox-disabled)": {
       color: theme("colors.red.700"),
       background: theme("colors.red.100"),
-      borderColor: "currentColor"
+      borderColor: "currentColor",
+      "&:hover": {
+        background: theme("colors.red.50")
+      },
+      "&:focus-within": {
+        outline: "1px solid ".concat(theme("colors.red.700"))
+      }
     },
     ".checkbox-checked, .checkbox-indeterminate": {
       borderColor: "currentColor",

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

@@ -1,4 +1,4 @@
-import type { Dispatch, MouseEvent, ReactNode, VFC } from "react";
+import type { Dispatch, MouseEvent, ReactNode } from "react";
 import type { DatePickerCalendarProps } from "../components/Calendar";
 import type { DatePickerDisplayProps } from "../components/Display";
 import type { DatePickerFooterActionsProps } from "../components/FooterActions";
@@ -17,6 +17,7 @@ interface RenderTargetParams {
     isOpen: boolean;
 }
 export declare type DatePickerProps = {
+    id?: string;
     calendarProps?: Pick<DatePickerCalendarProps, "fromMonth" | "toMonth" | "disabled">;
     onOpen?: DatePickerDisplayProps["onClick"];
     onChange?: (value: Date | null) => void;
@@ -29,11 +30,12 @@ export declare type DatePickerProps = {
     value?: Date | null;
     initialValue?: Date | null;
     buttonSize?: DatePickerDisplayProps["size"];
+    required?: boolean;
 } & SharedDatePickerProps;
 /**
  * The `DatePicker` component allows users to easily select a date, featuring a calendar view, month/year navigation, and custom options.
  *
  * See the [Date Picker documentation page](https://satellite.algolia.com/layouts/date-picker) for more information.
  */
-export declare const DatePicker: VFC<DatePickerProps>;
+export declare const DatePicker: import("react").ForwardRefExoticComponent<DatePickerProps & import("react").RefAttributes<HTMLButtonElement>>;
 export {};

package/dist/esm/DatePicker/DatePicker/DatePicker.js

@@ -1,10 +1,11 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _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 { useMemo, useReducer, useState } from "react";
+import { forwardRef, useMemo, useReducer, useState } from "react";
+import { useField } from "../../Field";
 import { useLocale } from "../../Satellite";
 import stl from "../../styles/helpers/satellitePrefixer";
 import { DatePickerCalendar } from "../components/Calendar";
@@ -23,8 +24,8 @@ import { Fragment as _Fragment } from "react/jsx-runtime";
  *
  * See the [Date Picker documentation page](https://satellite.algolia.com/layouts/date-picker) for more information.
  */
-export var DatePicker = function DatePicker(props) {
-  var _props$initialValue, _props$validate, _props$calendarProps;
+export var DatePicker = /*#__PURE__*/forwardRef(function (props, ref) {
+  var _props$initialValue, _props$validate, _props$id, _props$calendarProps;
   var contextLocale = useLocale("datePicker");
   var locale = _objectSpread(_objectSpread(_objectSpread({}, DEFAULT_DATE_PICKER_LOCALE), contextLocale), props.locale);
   var _useState = useState(null),
@@ -89,6 +90,12 @@ export var DatePicker = function DatePicker(props) {
   },
   // eslint-disable-next-line react-hooks/exhaustive-deps
   [props]);
+  var _useField = useField({
+      required: props.required || false
+    }),
+    status = _useField.state.status,
+    inputId = _useField.inputId;
+  var isInvalid = status === "invalid";
   return /*#__PURE__*/_jsxs("div", {
     children: [/*#__PURE__*/_jsx("span", {
       ref: setTargetElement,
@@ -97,15 +104,18 @@ export var DatePicker = function DatePicker(props) {
         toggle: state.show ? handleClose : handleOpen,
         isOpen: state.show
       }) : /*#__PURE__*/_jsx(DatePickerDisplay, {
+        id: (_props$id = props.id) !== null && _props$id !== void 0 ? _props$id : inputId,
+        ref: ref,
         onClick: state.show ? handleClose : handleOpen,
         size: props.buttonSize,
+        className: isInvalid ? stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["border-red-700 bg-red-100 bg-none focus:outline-1 focus:outline focus:outline-red-700 focus:shadow-none focus:bg-none focus:bg-red-100 focus:border-red-700 hover:border-red-700 hover:bg-red-50 hover:bg-none"]))) : undefined,
         children: value ? /*#__PURE__*/_jsx("time", {
           dateTime: value.toISOString(),
           children: formatDate(value)
         }) : locale.openButton
       })
     }), /*#__PURE__*/_jsx(DatePickerModal, {
-      className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["date-picker"]))),
+      className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["date-picker"]))),
       show: state.show,
       onClickAway: function onClickAway(evt) {
         if (!(targetElement !== null && targetElement !== void 0 && targetElement.contains(evt.target))) {
@@ -118,7 +128,7 @@ export var DatePicker = function DatePicker(props) {
       targetElement: targetElement,
       placement: props.modalPlacement,
       children: /*#__PURE__*/_jsxs("div", {
-        className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["flex"]))),
+        className: stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["flex"]))),
         children: [/*#__PURE__*/_jsxs("div", {
           children: [/*#__PURE__*/_jsx(DatePickerCalendar, _objectSpread(_objectSpread(_objectSpread({
             mode: "single",
@@ -144,7 +154,7 @@ export var DatePicker = function DatePicker(props) {
           })]
         }), props.renderRightPanel && /*#__PURE__*/_jsxs(_Fragment, {
           children: [/*#__PURE__*/_jsx("div", {
-            className: stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["h-full w-px bg-red-800"])))
+            className: stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["h-full w-px bg-red-800"])))
           }), /*#__PURE__*/_jsxs(DatePickerSidePanel, {
             children: [props.renderRightPanel({
               state: state,
@@ -160,4 +170,5 @@ export var DatePicker = function DatePicker(props) {
       })
     })]
   });
-};
+});
+DatePicker.displayName = "DatePicker";

package/dist/esm/DatePicker/components/Display.d.ts

@@ -1,9 +1,9 @@
-import type { ReactNode, VFC } from "react";
+import type { ReactNode } from "react";
 import type { ButtonProps, ButtonSize } from "../../Button";
-export interface DatePickerDisplayProps {
+export interface DatePickerDisplayProps extends ButtonProps {
     id?: string;
     onClick: ButtonProps["onClick"];
     children: ReactNode;
     size?: ButtonSize;
 }
-export declare const DatePickerDisplay: VFC<DatePickerDisplayProps>;
+export declare const DatePickerDisplay: import("react").ForwardRefExoticComponent<DatePickerDisplayProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/esm/DatePicker/components/Display.js

@@ -1,16 +1,26 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["id", "size", "onClick", "children"];
+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 { forwardRef } from "react";
 import { Button } from "../../Button";
 import { CalendarIcon } from "../../Icons";
 import { jsx as _jsx } from "react/jsx-runtime";
-export var DatePickerDisplay = function DatePickerDisplay(_ref) {
+export var DatePickerDisplay = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var id = _ref.id,
     size = _ref.size,
     onClick = _ref.onClick,
-    children = _ref.children;
-  return /*#__PURE__*/_jsx(Button, {
+    children = _ref.children,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/_jsx(Button, _objectSpread(_objectSpread({
     id: id,
     size: size,
     startIcon: CalendarIcon,
     onClick: onClick,
+    ref: ref
+  }, props), {}, {
     children: children
-  });
-};
+  }));
+});
+DatePickerDisplay.displayName = "Display";

package/dist/esm/Dropzone/Dropzone.d.ts

@@ -1,4 +1,4 @@
-import type { VFC } from "react";
+/// <reference types="react" />
 import type { FileRejection, DropzoneProps as ReactDropZoneProps } from "react-dropzone";
 export declare type DropzoneLocale = {
     clearInput?: string;
@@ -14,6 +14,8 @@ export interface DropzoneBaseProps {
     className?: string;
     /** @default false */
     multiple?: boolean;
+    /** @default false */
+    required?: boolean;
     locale?: DropzoneLocale;
 }
 export declare type DropzoneProps = DropzoneBaseProps & Omit<ReactDropZoneProps, "onDrop" | "onDropAccepted" | "onDropRejected" | "multiple">;
@@ -22,4 +24,4 @@ export declare type DropzoneProps = DropzoneBaseProps & Omit<ReactDropZoneProps,
  *
  * See the [Dropzone documentation page](https://satellite.algolia.com/components/forms/dropzone) for more information.
  */
-export declare const Dropzone: VFC<DropzoneProps>;
+export declare const Dropzone: import("react").ForwardRefExoticComponent<DropzoneBaseProps & Omit<ReactDropZoneProps, "onDrop" | "multiple" | "onDropAccepted" | "onDropRejected"> & import("react").RefAttributes<HTMLInputElement>>;