@simplybusiness/mobius 4.8.6 → 4.8.8

package/dist/esm/src/components/Modal/Modal.js

@@ -0,0 +1,119 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import classNames from "classnames/dedupe";
+import { Children, cloneElement, forwardRef, isValidElement, useCallback, useEffect, useRef } from "react";
+import { useBodyScrollLock } from "../../hooks/useBodyScrollLock";
+import { supportsDialog } from "../../utils/polyfill-tests";
+import { mergeRefs } from "../../utils";
+const TRANSITION_CLASS_NAME = "--transition";
+const Modal = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const { isOpen, onClose, onOpen, children, className, closeLabel, isFullScreen, animation, // Deprecated props below
+    size, appElement, preventCloseOnEsc, shouldFocusAfterRender, parentSelector } = props;
+    const hasWarnedAboutMissingLabels = useRef(false);
+    // Handle deprecated props
+    if (!hasWarnedAboutMissingLabels.current) {
+        if (size || appElement || preventCloseOnEsc || shouldFocusAfterRender || parentSelector) {
+            console.warn(`Deprecation warning: Mobius Modal no longer supports the following props: size, appElement, preventCloseOnEsc, shouldFocusAfterRender and parentSelector.`);
+            hasWarnedAboutMissingLabels.current = true;
+        }
+    }
+    const hasOpened = useRef(false);
+    const modalRef = useRef(null);
+    const hasDialogSupport = supportsDialog();
+    // Fire onOpen once
+    if (onOpen && !hasOpened.current) {
+        onOpen();
+        hasOpened.current = true;
+    }
+    useBodyScrollLock({
+        enabled: isOpen
+    });
+    // Add close handler, to enable closing animations
+    const handleClose = useCallback((event)=>{
+        if (event) {
+            event.preventDefault();
+            event.stopPropagation();
+        }
+        const doClose = ()=>{
+            var _modalRef_current;
+            (_modalRef_current = modalRef.current) === null || _modalRef_current === void 0 ? void 0 : _modalRef_current.close();
+            onClose === null || onClose === void 0 ? void 0 : onClose();
+        };
+        // Delay close to allow backdrop exit transition
+        if (hasDialogSupport && animation) {
+            var _modalRef_current, _modalRef_current1;
+            (_modalRef_current = modalRef.current) === null || _modalRef_current === void 0 ? void 0 : _modalRef_current.classList.remove(TRANSITION_CLASS_NAME);
+            (_modalRef_current1 = modalRef.current) === null || _modalRef_current1 === void 0 ? void 0 : _modalRef_current1.addEventListener("transitionend", ()=>{
+                doClose();
+            }, {
+                once: true
+            });
+        } else {
+            doClose();
+        }
+    }, [
+        onClose,
+        hasDialogSupport,
+        animation
+    ]);
+    const modalClasses = classNames("mobius", "mobius/Modal", {
+        "--no-dialog-support": !hasDialogSupport,
+        "--should-transition": hasDialogSupport && animation,
+        "--slide-up": animation === "slideUp",
+        "--fade": animation === "fade",
+        "--is-fullscreen": isFullScreen
+    }, className);
+    // Add polyfill for HTML Dialog in old browsers
+    useEffect(()=>{
+        async function toggleModal() {
+            var _modalRef_current, _modalRef_current1;
+            if (!hasDialogSupport && typeof window !== "undefined" && modalRef.current !== null) {
+                // eslint-disable-next-line import/no-extraneous-dependencies
+                const { default: dialogPolyfill } = await import("dialog-polyfill");
+                try {
+                    dialogPolyfill.registerDialog(modalRef.current);
+                } catch (error) {
+                    // In iOS 15 <= 15.2 this intermittently fails with
+                    // TypeError: null is not an object (evaluating 'element.showModal')
+                    // Checking showModal presence through hasOwnProperty is falsy natively, truthy with polyfill 🤷🏼‍♂️
+                    console.error("Failed to load dialog-polyfill", error);
+                }
+            }
+            if (isOpen && !((_modalRef_current = modalRef.current) === null || _modalRef_current === void 0 ? void 0 : _modalRef_current.open)) {
+                var _modalRef_current2, _modalRef_current3;
+                (_modalRef_current2 = modalRef.current) === null || _modalRef_current2 === void 0 ? void 0 : _modalRef_current2.showModal();
+                (_modalRef_current3 = modalRef.current) === null || _modalRef_current3 === void 0 ? void 0 : _modalRef_current3.classList.add(TRANSITION_CLASS_NAME);
+                onOpen === null || onOpen === void 0 ? void 0 : onOpen();
+            } else if (!isOpen && ((_modalRef_current1 = modalRef.current) === null || _modalRef_current1 === void 0 ? void 0 : _modalRef_current1.open)) {
+                handleClose();
+            }
+        }
+        toggleModal();
+    }, [
+        isOpen,
+        onOpen,
+        handleClose,
+        hasDialogSupport
+    ]);
+    return /*#__PURE__*/ _jsx("dialog", {
+        ref: mergeRefs([
+            modalRef,
+            ref
+        ]),
+        onCancel: handleClose,
+        className: modalClasses,
+        children: Children.map(children, (child)=>{
+            if (/*#__PURE__*/ isValidElement(child)) {
+                return /*#__PURE__*/ cloneElement(child, {
+                    onClose: handleClose,
+                    closeLabel
+                });
+            }
+            return child;
+        })
+    });
+});
+Modal.displayName = "Modal";
+export { Modal };
+
+//# sourceMappingURL=Modal.js.map

package/dist/esm/src/components/Modal/Modal.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/Modal/Modal.tsx"],"sourcesContent":["\"use client\";\n\nimport classNames from \"classnames/dedupe\";\nimport {\n  Children,\n  Ref,\n  SyntheticEvent,\n  cloneElement,\n  forwardRef,\n  isValidElement,\n  useCallback,\n  useEffect,\n  useRef,\n} from \"react\";\nimport { useBodyScrollLock } from \"../../hooks/useBodyScrollLock\";\nimport { supportsDialog } from \"../../utils/polyfill-tests\";\nimport { ModalProps } from \"./types\";\nimport { mergeRefs } from \"../../utils\";\n\nexport type ModalElementType = HTMLDialogElement;\nexport type ModalRef = Ref<ModalElementType>;\n\nconst TRANSITION_CLASS_NAME = \"--transition\";\n\nconst Modal = forwardRef((props: ModalProps, ref: ModalRef) => {\n  const {\n    isOpen,\n    onClose,\n    onOpen,\n    children,\n    className,\n    closeLabel,\n    isFullScreen,\n    animation,\n    // Deprecated props below\n    size,\n    appElement,\n    preventCloseOnEsc,\n    shouldFocusAfterRender,\n    parentSelector,\n  } = props;\n  const hasWarnedAboutMissingLabels = useRef<boolean>(false);\n  // Handle deprecated props\n  if (!hasWarnedAboutMissingLabels.current) {\n    if (\n      size ||\n      appElement ||\n      preventCloseOnEsc ||\n      shouldFocusAfterRender ||\n      parentSelector\n    ) {\n      console.warn(\n        `Deprecation warning: Mobius Modal no longer supports the following props: size, appElement, preventCloseOnEsc, shouldFocusAfterRender and parentSelector.`,\n      );\n      hasWarnedAboutMissingLabels.current = true;\n    }\n  }\n\n  const hasOpened = useRef<boolean>(false);\n  const modalRef = useRef<HTMLDialogElement | null>(null);\n  const hasDialogSupport = supportsDialog();\n\n  // Fire onOpen once\n  if (onOpen && !hasOpened.current) {\n    onOpen();\n    hasOpened.current = true;\n  }\n\n  useBodyScrollLock({ enabled: isOpen });\n\n  // Add close handler, to enable closing animations\n  const handleClose = useCallback(\n    (event?: SyntheticEvent<HTMLElement, Event>) => {\n      if (event) {\n        event.preventDefault();\n        event.stopPropagation();\n      }\n\n      const doClose = () => {\n        modalRef.current?.close();\n        onClose?.();\n      };\n\n      // Delay close to allow backdrop exit transition\n      if (hasDialogSupport && animation) {\n        modalRef.current?.classList.remove(TRANSITION_CLASS_NAME);\n        modalRef.current?.addEventListener(\n          \"transitionend\",\n          () => {\n            doClose();\n          },\n          { once: true },\n        );\n      } else {\n        doClose();\n      }\n    },\n    [onClose, hasDialogSupport, animation],\n  );\n\n  const modalClasses = classNames(\n    \"mobius\",\n    \"mobius/Modal\",\n    {\n      \"--no-dialog-support\": !hasDialogSupport, // This class is used to correctly position modal in x/y middle on iOS <= 15.2\n      \"--should-transition\": hasDialogSupport && animation,\n      \"--slide-up\": animation === \"slideUp\",\n      \"--fade\": animation === \"fade\",\n      \"--is-fullscreen\": isFullScreen,\n    },\n    className,\n  );\n\n  // Add polyfill for HTML Dialog in old browsers\n  useEffect(() => {\n    async function toggleModal() {\n      if (\n        !hasDialogSupport &&\n        typeof window !== \"undefined\" &&\n        modalRef.current !== null\n      ) {\n        // eslint-disable-next-line import/no-extraneous-dependencies\n        const { default: dialogPolyfill } = await import(\"dialog-polyfill\");\n\n        try {\n          dialogPolyfill.registerDialog(modalRef.current);\n        } catch (error) {\n          // In iOS 15 <= 15.2 this intermittently fails with\n          // TypeError: null is not an object (evaluating 'element.showModal')\n          // Checking showModal presence through hasOwnProperty is falsy natively, truthy with polyfill 🤷🏼‍♂️\n          console.error(\"Failed to load dialog-polyfill\", error);\n        }\n      }\n\n      if (isOpen && !modalRef.current?.open) {\n        modalRef.current?.showModal();\n        modalRef.current?.classList.add(TRANSITION_CLASS_NAME);\n        onOpen?.();\n      } else if (!isOpen && modalRef.current?.open) {\n        handleClose();\n      }\n    }\n\n    toggleModal();\n  }, [isOpen, onOpen, handleClose, hasDialogSupport]);\n\n  return (\n    <dialog\n      ref={mergeRefs([modalRef, ref])}\n      onCancel={handleClose}\n      className={modalClasses}\n    >\n      {Children.map(children, child => {\n        if (isValidElement(child)) {\n          return cloneElement(child, {\n            onClose: handleClose,\n            closeLabel,\n          } as any);\n        }\n\n        return child;\n      })}\n    </dialog>\n  );\n});\n\nModal.displayName = \"Modal\";\nexport { Modal };\n"],"names":["classNames","Children","cloneElement","forwardRef","isValidElement","useCallback","useEffect","useRef","useBodyScrollLock","supportsDialog","mergeRefs","TRANSITION_CLASS_NAME","Modal","props","ref","isOpen","onClose","onOpen","children","className","closeLabel","isFullScreen","animation","size","appElement","preventCloseOnEsc","shouldFocusAfterRender","parentSelector","hasWarnedAboutMissingLabels","current","console","warn","hasOpened","modalRef","hasDialogSupport","enabled","handleClose","event","preventDefault","stopPropagation","doClose","close","classList","remove","addEventListener","once","modalClasses","toggleModal","window","default","dialogPolyfill","registerDialog","error","open","showModal","add","dialog","onCancel","map","child","displayName"],"mappings":"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"}

package/dist/esm/src/components/Modal/index.js

@@ -0,0 +1,11 @@
+import { Content } from "./Content";
+import { Header } from "./Header";
+import { Modal as ModalComponent } from "./Modal";
+const Modal = Object.assign(ModalComponent, {
+    Header,
+    Content
+});
+Modal.displayName = "Modal";
+export { Modal };
+
+//# sourceMappingURL=index.js.map

package/dist/esm/src/components/Modal/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/Modal/index.tsx"],"sourcesContent":["import {\n  Content,\n  DivElementType as ModalContentDivElementType,\n  ContentProps as ModalContentProps,\n} from \"./Content\";\nimport {\n  Header,\n  HeaderElementType as ModalHeaderElementType,\n  HeaderProps as ModalHeaderProps,\n} from \"./Header\";\nimport { Modal as ModalComponent } from \"./Modal\";\nimport { ModalProps } from \"./types\";\n\nconst Modal = Object.assign(ModalComponent, {\n  Header,\n  Content,\n});\n\nModal.displayName = \"Modal\";\nexport { Modal };\n\nexport type {\n  ModalContentDivElementType,\n  ModalContentProps,\n  ModalHeaderElementType,\n  ModalHeaderProps,\n  ModalProps,\n};\n"],"names":["Content","Header","Modal","ModalComponent","Object","assign","displayName"],"mappings":"AAAA,SACEA,OAAO,QAGF,YAAY;AACnB,SACEC,MAAM,QAGD,WAAW;AAClB,SAASC,SAASC,cAAc,QAAQ,UAAU;AAGlD,MAAMD,QAAQE,OAAOC,MAAM,CAACF,gBAAgB;IAC1CF;IACAD;AACF;AAEAE,MAAMI,WAAW,GAAG;AACpB,SAASJ,KAAK,GAAG"}

package/dist/esm/src/components/Modal/types.js

@@ -0,0 +1,3 @@
+export { };
+
+//# sourceMappingURL=types.js.map

package/dist/esm/src/components/Modal/types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/Modal/types.ts"],"sourcesContent":["import { ReactNode } from \"react\";\n\nexport interface ModalProps {\n  isOpen: boolean;\n  onOpen?: () => void;\n  onClose?: () => void;\n  children?: ReactNode;\n  className?: string;\n  closeLabel?: string;\n  animation?: \"slideUp\" | \"fade\";\n  isFullScreen?: boolean;\n  /**\n   * **Deprecated:** No longer needed\n   */\n  size?: string;\n  /**\n   * **Deprecated:** No longer needed\n   */\n  appElement?: string;\n  /**\n   * **Deprecated:** No longer needed\n   */\n  preventCloseOnEsc?: boolean;\n  /**\n   * **Deprecated:** No longer needed\n   */\n  shouldFocusAfterRender?: boolean;\n  /**\n   * **Deprecated:** No longer needed\n   */\n  parentSelector?: () => HTMLElement;\n}\n"],"names":[],"mappings":"AAEA,WA6BC"}

package/dist/esm/src/components/NumberField/NumberField.js

@@ -0,0 +1,103 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import classNames from "classnames/dedupe";
+import { forwardRef, useId, useRef, useState } from "react";
+import { useLabel } from "../../hooks";
+import { spaceDelimitedList } from "../../utils/spaceDelimitedList";
+import { ErrorMessage } from "../ErrorMessage";
+import { Label } from "../Label";
+export const NumberField = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const { id, isDisabled, isRequired, label, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, className, errorMessage, validationState, isReadOnly, minValue, maxValue, step, placeholder, defaultValue = 0, onChange } = props;
+    const inputRef = useRef(null);
+    const [value, setValue] = useState(defaultValue);
+    const valueWithoutLeadingZero = value.toString().replace(/^0+/, "");
+    const optional = typeof isRequired === "boolean" && !isRequired;
+    const required = typeof isRequired === "boolean" && isRequired;
+    const { labelProps, fieldProps } = useLabel({
+        id,
+        label,
+        "aria-label": ariaLabel,
+        "aria-labelledby": ariaLabelledBy
+    });
+    const containerClasses = classNames("mobius/NumberField", className, {
+        "--is-optional": optional
+    });
+    const inputClasses = classNames("mobius/NumberFieldInput", className, {
+        "--is-required": required,
+        "--is-optional": optional,
+        "--is-valid": validationState === "valid",
+        "--is-invalid": validationState === "invalid",
+        "--is-disabled": isDisabled
+    });
+    const labelClasses = classNames("mobius/NumberFieldLabel", {
+        "--is-valid": validationState === "valid",
+        "--is-invalid": validationState === "invalid",
+        "--is-disabled": isDisabled
+    });
+    const errorMessageId = useId();
+    const shouldErrorMessageShow = errorMessage ? errorMessageId : undefined;
+    const describedBy = spaceDelimitedList([
+        shouldErrorMessageShow,
+        ariaDescribedBy
+    ]);
+    const handleChange = (event)=>{
+        // Only allow change between min and max values
+        const enteredValue = Number(event.target.value);
+        if (minValue && enteredValue < minValue || maxValue && enteredValue > maxValue) {
+            return;
+        }
+        setValue(enteredValue);
+        if (onChange) {
+            onChange(event);
+        }
+    };
+    // Only allow numeric input
+    const handleBeforeInput = (event)=>{
+        const allowedChars = /[\d]/;
+        if (event.data && !allowedChars.test(event.data)) {
+            event.preventDefault();
+            event.stopPropagation();
+        }
+    };
+    return /*#__PURE__*/ _jsxs("div", {
+        className: containerClasses,
+        children: [
+            label && /*#__PURE__*/ _jsx(Label, {
+                ...labelProps,
+                className: labelClasses,
+                children: label
+            }),
+            /*#__PURE__*/ _jsx("div", {
+                className: "mobius/NumberFieldInputWrapper",
+                children: /*#__PURE__*/ _jsx("input", {
+                    ...fieldProps,
+                    ref: inputRef || ref,
+                    className: inputClasses,
+                    type: "number",
+                    onChange: handleChange,
+                    onBeforeInput: handleBeforeInput,
+                    max: maxValue,
+                    min: minValue,
+                    step: step,
+                    value: valueWithoutLeadingZero,
+                    placeholder: placeholder,
+                    required: required,
+                    "aria-describedby": describedBy,
+                    "aria-errormessage": shouldErrorMessageShow,
+                    "aria-invalid": validationState === "invalid",
+                    readOnly: isReadOnly,
+                    disabled: isDisabled,
+                    autoComplete: "off",
+                    autoCorrect: "off",
+                    spellCheck: "false"
+                })
+            }),
+            /*#__PURE__*/ _jsx(ErrorMessage, {
+                id: errorMessageId,
+                errorMessage: errorMessage
+            })
+        ]
+    });
+});
+
+//# sourceMappingURL=NumberField.js.map

package/dist/esm/src/components/NumberField/NumberField.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/NumberField/NumberField.tsx"],"sourcesContent":["\"use client\";\n\nimport classNames from \"classnames/dedupe\";\nimport {\n  ChangeEvent,\n  CompositionEvent,\n  Ref,\n  RefAttributes,\n  forwardRef,\n  useId,\n  useRef,\n  useState,\n} from \"react\";\nimport { DOMProps } from \"../../types/dom\";\nimport { UseLabelProps, useLabel } from \"../../hooks\";\nimport { ForwardedRefComponent } from \"../../types/components\";\nimport { spaceDelimitedList } from \"../../utils/spaceDelimitedList\";\nimport { ErrorMessage } from \"../ErrorMessage\";\nimport { Label } from \"../Label\";\n\nexport type NumberFieldElementType = HTMLInputElement;\n\nexport interface NumberFieldProps\n  extends DOMProps,\n    UseLabelProps,\n    RefAttributes<NumberFieldElementType> {\n  id?: string;\n  /** Custom class name for setting specific CSS */\n  className?: string;\n  validationState?: \"valid\" | \"invalid\" | undefined;\n  /** The smallest value allowed for the input. */\n  minValue?: number;\n  /** The largest value allowed for the input. */\n  maxValue?: number;\n  /** The amount that the input value changes with each increment or decrement \"tick\". */\n  step?: number; // ??\n  /** The default value (uncontrolled). */\n  defaultValue?: number;\n  /** Handler that is called when the value changes. */\n  onChange?: (event: ChangeEvent<NumberFieldElementType>) => void;\n  /** Temporary text that occupies the text input when it is empty. */\n  placeholder?: string;\n  /** Whether user input is required on the input before form submission. */\n  isRequired?: boolean;\n  /** Whether the input is disabled. */\n  isDisabled?: boolean;\n  /** Whether the input can be selected but not changed by the user. */\n  isReadOnly?: boolean;\n  /** An error message for the field. */\n  errorMessage?: string;\n  /** Identifies the element (or elements) that describes the object. */\n  \"aria-describedby\"?: string | undefined;\n}\n\nexport type NumberFieldRef = Ref<NumberFieldElementType>;\n\nexport const NumberField: ForwardedRefComponent<\n  NumberFieldProps,\n  NumberFieldElementType\n> = forwardRef((props: NumberFieldProps, ref: NumberFieldRef) => {\n  const {\n    id,\n    isDisabled,\n    isRequired,\n    label,\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-describedby\": ariaDescribedBy,\n    className,\n    errorMessage,\n    validationState,\n    isReadOnly,\n    minValue,\n    maxValue,\n    step,\n    placeholder,\n    defaultValue = 0,\n    onChange,\n  } = props;\n  const inputRef = useRef<HTMLInputElement | null>(null);\n  const [value, setValue] = useState<number>(defaultValue);\n  const valueWithoutLeadingZero = value.toString().replace(/^0+/, \"\");\n  const optional = typeof isRequired === \"boolean\" && !isRequired;\n  const required = typeof isRequired === \"boolean\" && isRequired;\n\n  const { labelProps, fieldProps } = useLabel({\n    id,\n    label,\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledBy,\n  });\n\n  const containerClasses = classNames(\"mobius/NumberField\", className, {\n    \"--is-optional\": optional,\n  });\n\n  const inputClasses = classNames(\"mobius/NumberFieldInput\", className, {\n    \"--is-required\": required,\n    \"--is-optional\": optional,\n    \"--is-valid\": validationState === \"valid\",\n    \"--is-invalid\": validationState === \"invalid\",\n    \"--is-disabled\": isDisabled,\n  });\n\n  const labelClasses = classNames(\"mobius/NumberFieldLabel\", {\n    \"--is-valid\": validationState === \"valid\",\n    \"--is-invalid\": validationState === \"invalid\",\n    \"--is-disabled\": isDisabled,\n  });\n\n  const errorMessageId = useId();\n  const shouldErrorMessageShow = errorMessage ? errorMessageId : undefined;\n  const describedBy = spaceDelimitedList([\n    shouldErrorMessageShow,\n    ariaDescribedBy,\n  ]);\n\n  const handleChange = (event: ChangeEvent<NumberFieldElementType>) => {\n    // Only allow change between min and max values\n    const enteredValue = Number(event.target.value);\n    if (\n      (minValue && enteredValue < minValue) ||\n      (maxValue && enteredValue > maxValue)\n    ) {\n      return;\n    }\n    setValue(enteredValue);\n    if (onChange) {\n      onChange(event);\n    }\n  };\n\n  // Only allow numeric input\n  const handleBeforeInput = (\n    event: CompositionEvent<NumberFieldElementType>,\n  ) => {\n    const allowedChars = /[\\d]/;\n\n    if (event.data && !allowedChars.test(event.data)) {\n      event.preventDefault();\n      event.stopPropagation();\n    }\n  };\n\n  return (\n    <div className={containerClasses}>\n      {label && (\n        <Label {...labelProps} className={labelClasses}>\n          {label}\n        </Label>\n      )}\n      <div className=\"mobius/NumberFieldInputWrapper\">\n        <input\n          {...fieldProps}\n          ref={inputRef || ref}\n          className={inputClasses}\n          type=\"number\"\n          onChange={handleChange}\n          onBeforeInput={handleBeforeInput}\n          max={maxValue}\n          min={minValue}\n          step={step}\n          value={valueWithoutLeadingZero}\n          placeholder={placeholder}\n          required={required}\n          aria-describedby={describedBy}\n          aria-errormessage={shouldErrorMessageShow}\n          aria-invalid={validationState === \"invalid\"}\n          readOnly={isReadOnly}\n          disabled={isDisabled}\n          autoComplete=\"off\"\n          autoCorrect=\"off\"\n          spellCheck=\"false\"\n        />\n      </div>\n      <ErrorMessage id={errorMessageId} errorMessage={errorMessage} />\n    </div>\n  );\n});\n"],"names":["classNames","forwardRef","useId","useRef","useState","useLabel","spaceDelimitedList","ErrorMessage","Label","NumberField","props","ref","id","isDisabled","isRequired","label","ariaLabel","ariaLabelledBy","ariaDescribedBy","className","errorMessage","validationState","isReadOnly","minValue","maxValue","step","placeholder","defaultValue","onChange","inputRef","value","setValue","valueWithoutLeadingZero","toString","replace","optional","required","labelProps","fieldProps","containerClasses","inputClasses","labelClasses","errorMessageId","shouldErrorMessageShow","undefined","describedBy","handleChange","event","enteredValue","Number","target","handleBeforeInput","allowedChars","data","test","preventDefault","stopPropagation","div","input","type","onBeforeInput","max","min","aria-describedby","aria-errormessage","aria-invalid","readOnly","disabled","autoComplete","autoCorrect","spellCheck"],"mappings":"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"}

package/dist/esm/src/components/NumberField/index.js

@@ -0,0 +1,3 @@
+export * from "./NumberField";
+
+//# sourceMappingURL=index.js.map

package/dist/esm/src/components/NumberField/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/NumberField/index.tsx"],"sourcesContent":["export * from \"./NumberField\";\n"],"names":[],"mappings":"AAAA,cAAc,gBAAgB"}

package/dist/esm/src/components/Option/Option.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+const Option = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const { isDisabled, ...rest } = props;
+    const mappedProps = {
+        ...rest,
+        disabled: isDisabled
+    };
+    return /*#__PURE__*/ _jsx("option", {
+        ...mappedProps,
+        ref: ref
+    });
+});
+Option.displayName = "Option";
+export { Option };
+
+//# sourceMappingURL=Option.js.map

package/dist/esm/src/components/Option/Option.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/Option/Option.tsx"],"sourcesContent":["import { forwardRef, RefAttributes, Ref } from \"react\";\nimport { ForwardedRefComponent } from \"../../types/components\";\n\nexport interface OptionProps extends RefAttributes<HTMLOptionElement> {\n  value?: string;\n  children?: string;\n  isDisabled?: boolean;\n}\n\nexport type OptionRef = Ref<HTMLOptionElement>;\n\nconst Option: ForwardedRefComponent<OptionProps, HTMLOptionElement> =\n  forwardRef((props: OptionProps, ref: OptionRef) => {\n    const { isDisabled, ...rest } = props;\n    const mappedProps = {\n      ...rest,\n      disabled: isDisabled,\n    };\n    return <option {...mappedProps} ref={ref} />;\n  });\n\nOption.displayName = \"Option\";\nexport { Option };\n"],"names":["forwardRef","Option","props","ref","isDisabled","rest","mappedProps","disabled","option","displayName"],"mappings":";AAAA,SAASA,UAAU,QAA4B,QAAQ;AAWvD,MAAMC,uBACJD,WAAW,CAACE,OAAoBC;IAC9B,MAAM,EAAEC,UAAU,EAAE,GAAGC,MAAM,GAAGH;IAChC,MAAMI,cAAc;QAClB,GAAGD,IAAI;QACPE,UAAUH;IACZ;IACA,qBAAO,KAACI;QAAQ,GAAGF,WAAW;QAAEH,KAAKA;;AACvC;AAEFF,OAAOQ,WAAW,GAAG;AACrB,SAASR,MAAM,GAAG"}

package/dist/esm/src/components/Option/index.js

@@ -0,0 +1,3 @@
+export * from "./Option";
+
+//# sourceMappingURL=index.js.map

package/dist/esm/src/components/Option/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/Option/index.tsx"],"sourcesContent":["export * from \"./Option\";\n"],"names":[],"mappings":"AAAA,cAAc,WAAW"}

package/dist/esm/src/components/PasswordField/PasswordField.js

@@ -0,0 +1,33 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import classNames from "classnames/dedupe";
+import { forwardRef, useState, useRef } from "react";
+import { mergeRefs } from "../../utils/mergeRefs";
+import { TextField } from "../TextField";
+import { ShowHideButton } from "./ShowHideButton";
+export const PasswordField = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=>{
+    const [show, setShow] = useState(false);
+    const type = show ? "text" : "password";
+    const classes = classNames("mobius/PasswordField", className);
+    const localRef = useRef(null);
+    const handleShowHideButtonClick = ()=>{
+        var _localRef_current;
+        setShow((oldShow)=>!oldShow);
+        (_localRef_current = localRef.current) === null || _localRef_current === void 0 ? void 0 : _localRef_current.focus();
+    };
+    return /*#__PURE__*/ _jsx(TextField, {
+        ref: mergeRefs([
+            localRef,
+            ref
+        ]),
+        className: classes,
+        ...props,
+        type: type,
+        suffixInside: /*#__PURE__*/ _jsx(ShowHideButton, {
+            onClick: handleShowHideButtonClick,
+            show: show
+        })
+    });
+});
+
+//# sourceMappingURL=PasswordField.js.map

package/dist/esm/src/components/PasswordField/PasswordField.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/PasswordField/PasswordField.tsx"],"sourcesContent":["\"use client\";\n\nimport classNames from \"classnames/dedupe\";\nimport { forwardRef, useState, useRef } from \"react\";\nimport { mergeRefs } from \"../../utils/mergeRefs\";\nimport {\n  TextField,\n  type TextFieldProps,\n  type TextFieldRef,\n  type TextFieldElementType,\n} from \"../TextField\";\nimport { ShowHideButton } from \"./ShowHideButton\";\n\nexport interface PasswordFieldProps extends TextFieldProps {}\n\nexport type PasswordFieldRef = TextFieldRef;\n\nexport const PasswordField = forwardRef(\n  ({ className, ...props }: PasswordFieldProps, ref: TextFieldRef) => {\n    const [show, setShow] = useState(false);\n    const type = show ? \"text\" : \"password\";\n    const classes = classNames(\"mobius/PasswordField\", className);\n    const localRef = useRef<TextFieldElementType>(null);\n\n    const handleShowHideButtonClick = () => {\n      setShow(oldShow => !oldShow);\n      localRef.current?.focus();\n    };\n\n    return (\n      <TextField\n        ref={mergeRefs([localRef, ref])}\n        className={classes}\n        {...props}\n        type={type}\n        suffixInside={\n          <ShowHideButton onClick={handleShowHideButtonClick} show={show} />\n        }\n      />\n    );\n  },\n);\n"],"names":["classNames","forwardRef","useState","useRef","mergeRefs","TextField","ShowHideButton","PasswordField","className","props","ref","show","setShow","type","classes","localRef","handleShowHideButtonClick","oldShow","current","focus","suffixInside","onClick"],"mappings":"AAAA;;AAEA,OAAOA,gBAAgB,oBAAoB;AAC3C,SAASC,UAAU,EAAEC,QAAQ,EAAEC,MAAM,QAAQ,QAAQ;AACrD,SAASC,SAAS,QAAQ,wBAAwB;AAClD,SACEC,SAAS,QAIJ,eAAe;AACtB,SAASC,cAAc,QAAQ,mBAAmB;AAMlD,OAAO,MAAMC,8BAAgBN,WAC3B,CAAC,EAAEO,SAAS,EAAE,GAAGC,OAA2B,EAAEC;IAC5C,MAAM,CAACC,MAAMC,QAAQ,GAAGV,SAAS;IACjC,MAAMW,OAAOF,OAAO,SAAS;IAC7B,MAAMG,UAAUd,WAAW,wBAAwBQ;IACnD,MAAMO,WAAWZ,OAA6B;IAE9C,MAAMa,4BAA4B;YAEhCD;QADAH,QAAQK,CAAAA,UAAW,CAACA;SACpBF,oBAAAA,SAASG,OAAO,cAAhBH,wCAAAA,kBAAkBI,KAAK;IACzB;IAEA,qBACE,KAACd;QACCK,KAAKN,UAAU;YAACW;YAAUL;SAAI;QAC9BF,WAAWM;QACV,GAAGL,KAAK;QACTI,MAAMA;QACNO,4BACE,KAACd;YAAee,SAASL;YAA2BL,MAAMA;;;AAIlE,GACA"}

package/dist/esm/src/components/PasswordField/ShowHideButton.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const ShowHideButton = ({ show = false, onClick })=>/*#__PURE__*/ _jsx("button", {
+        className: "mobius/PasswordFieldShowButton",
+        type: "button",
+        onClick: (e)=>{
+            e.preventDefault();
+            onClick();
+        },
+        "aria-label": `${show ? "Hide" : "Show"} password`,
+        "data-testid": "show-hide-button",
+        children: show ? "hide" : "show"
+    });
+
+//# sourceMappingURL=ShowHideButton.js.map

package/dist/esm/src/components/PasswordField/ShowHideButton.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/PasswordField/ShowHideButton.tsx"],"sourcesContent":["export interface ShowHideButtonProps {\n  show?: boolean;\n  onClick: () => void;\n}\n\nexport const ShowHideButton = ({\n  show = false,\n  onClick,\n}: ShowHideButtonProps) => (\n  <button\n    className=\"mobius/PasswordFieldShowButton\"\n    type=\"button\"\n    onClick={e => {\n      e.preventDefault();\n      onClick();\n    }}\n    aria-label={`${show ? \"Hide\" : \"Show\"} password`}\n    data-testid=\"show-hide-button\"\n  >\n    {show ? \"hide\" : \"show\"}\n  </button>\n);\n"],"names":["ShowHideButton","show","onClick","button","className","type","e","preventDefault","aria-label","data-testid"],"mappings":";AAKA,OAAO,MAAMA,iBAAiB,CAAC,EAC7BC,OAAO,KAAK,EACZC,OAAO,EACa,iBACpB,KAACC;QACCC,WAAU;QACVC,MAAK;QACLH,SAASI,CAAAA;YACPA,EAAEC,cAAc;YAChBL;QACF;QACAM,cAAY,CAAC,EAAEP,OAAO,SAAS,OAAO,SAAS,CAAC;QAChDQ,eAAY;kBAEXR,OAAO,SAAS;OAEnB"}

package/dist/esm/src/components/PasswordField/index.js

@@ -0,0 +1,3 @@
+export * from "./PasswordField";
+
+//# sourceMappingURL=index.js.map

package/dist/esm/src/components/PasswordField/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/PasswordField/index.tsx"],"sourcesContent":["export * from \"./PasswordField\";\n"],"names":[],"mappings":"AAAA,cAAc,kBAAkB"}

package/dist/esm/src/components/Popover/Popover.js

@@ -0,0 +1,109 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { FloatingArrow, arrow, autoUpdate, flip, offset, shift, useDismiss, useFloating, useInteractions } from "@floating-ui/react";
+import { cross } from "@simplybusiness/icons";
+import classNames from "classnames";
+import { cloneElement, useRef, useState } from "react";
+import { useWindowEvent } from "../../hooks";
+import { Button } from "../Button";
+import { Icon } from "../Icon";
+const OFFSET_FROM_CONTENT_DEFAULT = 10;
+export const Popover = (props)=>{
+    const { trigger, children, onOpen, onClose, className } = props;
+    const arrowRef = useRef(null);
+    const [isOpen, setIsOpen] = useState(false);
+    const { refs, floatingStyles, context } = useFloating({
+        open: isOpen,
+        onOpenChange: setIsOpen,
+        whileElementsMounted: autoUpdate,
+        middleware: [
+            arrow({
+                element: arrowRef
+            }),
+            offset(OFFSET_FROM_CONTENT_DEFAULT),
+            shift(),
+            flip()
+        ]
+    });
+    const dismiss = useDismiss(context, {
+        bubbles: true,
+        outsidePress: (event)=>{
+            // Prevent 'onClose' from firing when clicking the toggle to close
+            const toggle = refs.reference.current;
+            const isToggleClick = !(toggle === null || toggle === void 0 ? void 0 : toggle.contains(event.target));
+            if (isToggleClick) {
+                onClose === null || onClose === void 0 ? void 0 : onClose();
+            }
+            return true;
+        }
+    });
+    const { getReferenceProps, getFloatingProps } = useInteractions([
+        dismiss
+    ]);
+    const containerClasses = classNames("mobius", "mobius/PopoverContainer", className);
+    const toggleVisibility = ()=>{
+        if (isOpen) {
+            setIsOpen(false);
+            onClose === null || onClose === void 0 ? void 0 : onClose();
+            return;
+        }
+        setIsOpen(true);
+        onOpen === null || onOpen === void 0 ? void 0 : onOpen();
+    };
+    const triggerComponent = /*#__PURE__*/ cloneElement(trigger, {
+        ref: refs.setReference,
+        className: classNames(trigger.props.className, "mobius/PopoverToggle"),
+        onClick: toggleVisibility,
+        ...getReferenceProps()
+    });
+    useWindowEvent("keydown", (e)=>{
+        if (e.key === "Escape") {
+            onClose === null || onClose === void 0 ? void 0 : onClose();
+            e.preventDefault();
+            e.stopPropagation();
+        }
+    });
+    return /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            triggerComponent,
+            isOpen && /*#__PURE__*/ _jsxs("div", {
+                className: containerClasses,
+                ref: refs.setFloating,
+                style: floatingStyles,
+                ...getFloatingProps(),
+                children: [
+                    /*#__PURE__*/ _jsxs("div", {
+                        className: "mobius/Popover",
+                        children: [
+                            /*#__PURE__*/ _jsx("header", {
+                                className: "mobius/PopoverHeader",
+                                children: /*#__PURE__*/ _jsx(Button, {
+                                    type: "button",
+                                    className: "mobius/PopoverCloseButton",
+                                    onClick: toggleVisibility,
+                                    "aria-label": "Close",
+                                    variant: "ghost",
+                                    children: /*#__PURE__*/ _jsx(Icon, {
+                                        icon: cross,
+                                        size: "md",
+                                        className: "mobius/PopoverCloseIcon"
+                                    })
+                                })
+                            }),
+                            /*#__PURE__*/ _jsx("div", {
+                                className: "mobius/PopoverBody",
+                                children: children
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsx(FloatingArrow, {
+                        ref: arrowRef,
+                        context: context,
+                        width: 20
+                    })
+                ]
+            })
+        ]
+    });
+};
+
+//# sourceMappingURL=Popover.js.map

package/dist/esm/src/components/Popover/Popover.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/Popover/Popover.tsx"],"sourcesContent":["import {\n  FloatingArrow,\n  arrow,\n  autoUpdate,\n  flip,\n  offset,\n  shift,\n  useDismiss,\n  useFloating,\n  useInteractions,\n} from \"@floating-ui/react\";\nimport { cross } from \"@simplybusiness/icons\";\nimport classNames from \"classnames\";\nimport {\n  ReactElement,\n  ReactNode,\n  Ref,\n  RefAttributes,\n  cloneElement,\n  useRef,\n  useState,\n} from \"react\";\nimport { useWindowEvent } from \"../../hooks\";\nimport { DOMProps } from \"../../types\";\nimport { Button } from \"../Button\";\nimport { Icon } from \"../Icon\";\n\nexport type PopoverElementType = HTMLDivElement;\n\nexport interface PopoverProps\n  extends DOMProps,\n    RefAttributes<PopoverElementType> {\n  children?: ReactNode;\n  trigger: ReactElement;\n  /** Callback that fires each time the accordion is opened */\n  onOpen?: () => void;\n  /** Callback that fires each time the accordion is closed */\n  onClose?: () => void;\n  /** Custom class name for setting specific CSS */\n  className?: string;\n}\n\nexport type PopoverRef = Ref<PopoverElementType>;\n\nconst OFFSET_FROM_CONTENT_DEFAULT = 10;\n\nexport const Popover = (props: PopoverProps) => {\n  const { trigger, children, onOpen, onClose, className } = props;\n  const arrowRef = useRef(null);\n  const [isOpen, setIsOpen] = useState(false);\n  const { refs, floatingStyles, context } = useFloating({\n    open: isOpen,\n    onOpenChange: setIsOpen,\n    whileElementsMounted: autoUpdate,\n    middleware: [\n      arrow({\n        element: arrowRef,\n      }),\n      offset(OFFSET_FROM_CONTENT_DEFAULT),\n      shift(),\n      flip(),\n    ],\n  });\n  const dismiss = useDismiss(context, {\n    bubbles: true,\n    outsidePress: (event: MouseEvent) => {\n      // Prevent 'onClose' from firing when clicking the toggle to close\n      const toggle = refs.reference.current as HTMLElement;\n      const isToggleClick = !toggle?.contains(event.target as HTMLElement);\n      if (isToggleClick) {\n        onClose?.();\n      }\n      return true;\n    },\n  });\n  const { getReferenceProps, getFloatingProps } = useInteractions([dismiss]);\n\n  const containerClasses = classNames(\n    \"mobius\",\n    \"mobius/PopoverContainer\",\n    className,\n  );\n\n  const toggleVisibility = () => {\n    if (isOpen) {\n      setIsOpen(false);\n      onClose?.();\n      return;\n    }\n\n    setIsOpen(true);\n    onOpen?.();\n  };\n\n  const triggerComponent = cloneElement(trigger, {\n    ref: refs.setReference,\n    className: classNames(trigger.props.className, \"mobius/PopoverToggle\"),\n    onClick: toggleVisibility,\n    ...getReferenceProps(),\n  });\n\n  useWindowEvent(\"keydown\", e => {\n    if (e.key === \"Escape\") {\n      onClose?.();\n      e.preventDefault();\n      e.stopPropagation();\n    }\n  });\n\n  return (\n    <>\n      {triggerComponent}\n      {isOpen && (\n        <div\n          className={containerClasses}\n          ref={refs.setFloating}\n          style={floatingStyles}\n          {...getFloatingProps()}\n        >\n          <div className=\"mobius/Popover\">\n            <header className=\"mobius/PopoverHeader\">\n              <Button\n                type=\"button\"\n                className=\"mobius/PopoverCloseButton\"\n                onClick={toggleVisibility}\n                aria-label=\"Close\"\n                variant=\"ghost\"\n              >\n                <Icon\n                  icon={cross}\n                  size=\"md\"\n                  className=\"mobius/PopoverCloseIcon\"\n                />\n              </Button>\n            </header>\n            <div className=\"mobius/PopoverBody\">{children}</div>\n          </div>\n          <FloatingArrow ref={arrowRef} context={context} width={20} />\n        </div>\n      )}\n    </>\n  );\n};\n"],"names":["FloatingArrow","arrow","autoUpdate","flip","offset","shift","useDismiss","useFloating","useInteractions","cross","classNames","cloneElement","useRef","useState","useWindowEvent","Button","Icon","OFFSET_FROM_CONTENT_DEFAULT","Popover","props","trigger","children","onOpen","onClose","className","arrowRef","isOpen","setIsOpen","refs","floatingStyles","context","open","onOpenChange","whileElementsMounted","middleware","element","dismiss","bubbles","outsidePress","event","toggle","reference","current","isToggleClick","contains","target","getReferenceProps","getFloatingProps","containerClasses","toggleVisibility","triggerComponent","ref","setReference","onClick","e","key","preventDefault","stopPropagation","div","setFloating","style","header","type","aria-label","variant","icon","size","width"],"mappings":";AAAA,SACEA,aAAa,EACbC,KAAK,EACLC,UAAU,EACVC,IAAI,EACJC,MAAM,EACNC,KAAK,EACLC,UAAU,EACVC,WAAW,EACXC,eAAe,QACV,qBAAqB;AAC5B,SAASC,KAAK,QAAQ,wBAAwB;AAC9C,OAAOC,gBAAgB,aAAa;AACpC,SAKEC,YAAY,EACZC,MAAM,EACNC,QAAQ,QACH,QAAQ;AACf,SAASC,cAAc,QAAQ,cAAc;AAE7C,SAASC,MAAM,QAAQ,YAAY;AACnC,SAASC,IAAI,QAAQ,UAAU;AAmB/B,MAAMC,8BAA8B;AAEpC,OAAO,MAAMC,UAAU,CAACC;IACtB,MAAM,EAAEC,OAAO,EAAEC,QAAQ,EAAEC,MAAM,EAAEC,OAAO,EAAEC,SAAS,EAAE,GAAGL;IAC1D,MAAMM,WAAWb,OAAO;IACxB,MAAM,CAACc,QAAQC,UAAU,GAAGd,SAAS;IACrC,MAAM,EAAEe,IAAI,EAAEC,cAAc,EAAEC,OAAO,EAAE,GAAGvB,YAAY;QACpDwB,MAAML;QACNM,cAAcL;QACdM,sBAAsB/B;QACtBgC,YAAY;YACVjC,MAAM;gBACJkC,SAASV;YACX;YACArB,OAAOa;YACPZ;YACAF;SACD;IACH;IACA,MAAMiC,UAAU9B,WAAWwB,SAAS;QAClCO,SAAS;QACTC,cAAc,CAACC;YACb,kEAAkE;YAClE,MAAMC,SAASZ,KAAKa,SAAS,CAACC,OAAO;YACrC,MAAMC,gBAAgB,EAACH,mBAAAA,6BAAAA,OAAQI,QAAQ,CAACL,MAAMM,MAAM;YACpD,IAAIF,eAAe;gBACjBpB,oBAAAA,8BAAAA;YACF;YACA,OAAO;QACT;IACF;IACA,MAAM,EAAEuB,iBAAiB,EAAEC,gBAAgB,EAAE,GAAGvC,gBAAgB;QAAC4B;KAAQ;IAEzE,MAAMY,mBAAmBtC,WACvB,UACA,2BACAc;IAGF,MAAMyB,mBAAmB;QACvB,IAAIvB,QAAQ;YACVC,UAAU;YACVJ,oBAAAA,8BAAAA;YACA;QACF;QAEAI,UAAU;QACVL,mBAAAA,6BAAAA;IACF;IAEA,MAAM4B,iCAAmBvC,aAAaS,SAAS;QAC7C+B,KAAKvB,KAAKwB,YAAY;QACtB5B,WAAWd,WAAWU,QAAQD,KAAK,CAACK,SAAS,EAAE;QAC/C6B,SAASJ;QACT,GAAGH,mBAAmB;IACxB;IAEAhC,eAAe,WAAWwC,CAAAA;QACxB,IAAIA,EAAEC,GAAG,KAAK,UAAU;YACtBhC,oBAAAA,8BAAAA;YACA+B,EAAEE,cAAc;YAChBF,EAAEG,eAAe;QACnB;IACF;IAEA,qBACE;;YACGP;YACAxB,wBACC,MAACgC;gBACClC,WAAWwB;gBACXG,KAAKvB,KAAK+B,WAAW;gBACrBC,OAAO/B;gBACN,GAAGkB,kBAAkB;;kCAEtB,MAACW;wBAAIlC,WAAU;;0CACb,KAACqC;gCAAOrC,WAAU;0CAChB,cAAA,KAACT;oCACC+C,MAAK;oCACLtC,WAAU;oCACV6B,SAASJ;oCACTc,cAAW;oCACXC,SAAQ;8CAER,cAAA,KAAChD;wCACCiD,MAAMxD;wCACNyD,MAAK;wCACL1C,WAAU;;;;0CAIhB,KAACkC;gCAAIlC,WAAU;0CAAsBH;;;;kCAEvC,KAACrB;wBAAcmD,KAAK1B;wBAAUK,SAASA;wBAASqC,OAAO;;;;;;AAKjE,EAAE"}

package/dist/esm/src/components/Popover/index.js

@@ -0,0 +1,3 @@
+export * from "./Popover";
+
+//# sourceMappingURL=index.js.map

package/dist/esm/src/components/Popover/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/Popover/index.tsx"],"sourcesContent":["export * from \"./Popover\";\n"],"names":[],"mappings":"AAAA,cAAc,YAAY"}

package/dist/esm/src/components/Progress/Progress.js

@@ -0,0 +1,90 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import classNames from "classnames/dedupe";
+import { forwardRef, useId } from "react";
+import { Label } from "../Label";
+function warnAboutInvalidValues(value, minValue, maxValue) {
+    if (minValue > maxValue) {
+        console.warn("minValue is greater than maxValue");
+    }
+    if (value < minValue) {
+        console.warn("Progress value is less than minValue");
+    }
+    if (value > maxValue) {
+        console.warn("Progress value is greater than maxValue");
+    }
+}
+const sanitizedValue = (value, defaultValue)=>{
+    const numberValue = parseFloat(value);
+    return Number.isNaN(numberValue) ? defaultValue : numberValue;
+};
+const DEFAULT_VALUE = 0;
+const DEFAULT_MIN_VALUE = 0;
+const DEFAULT_MAX_VALUE = 100;
+const Progress = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const progressId = useId();
+    const progressLabelId = useId();
+    const { id, label, showValueLabel = !!label, valueFormatter, variant = "primary", className } = props;
+    let { value, minValue, maxValue } = props;
+    value = sanitizedValue(value, DEFAULT_VALUE);
+    minValue = sanitizedValue(minValue, DEFAULT_MIN_VALUE);
+    maxValue = sanitizedValue(maxValue, DEFAULT_MAX_VALUE);
+    // Will never happen but lets appease the typescript gods
+    if (value === undefined || minValue === undefined || maxValue === undefined) {
+        return null;
+    }
+    warnAboutInvalidValues(value, minValue, maxValue);
+    // Calculate the width of the progress bar as a percentage
+    const clamp = (num, min, max)=>Math.min(Math.max(num, min), max);
+    const percentage = clamp(Math.round((value - minValue) / (maxValue - minValue) * 100), 0, 100);
+    const barWidth = `${percentage}%`;
+    const classes = classNames("mobius", "mobius/Progress", className, {
+        "--is-primary": variant === "primary",
+        "--is-secondary": variant === "secondary"
+    });
+    // Set progress aria values
+    const progressBarProps = {};
+    progressBarProps["aria-valuemin"] = minValue.toString();
+    progressBarProps["aria-valuemax"] = maxValue.toString();
+    progressBarProps["aria-valuenow"] = value.toString();
+    progressBarProps["aria-valuetext"] = valueFormatter instanceof Function ? valueFormatter(value, minValue, maxValue) : barWidth;
+    return /*#__PURE__*/ _jsxs("div", {
+        id: id || progressId,
+        ...progressBarProps,
+        ref: ref,
+        className: classes,
+        role: "progressbar",
+        "aria-labelledby": progressLabelId,
+        children: [
+            label && /*#__PURE__*/ _jsx(Label, {
+                id: progressLabelId,
+                className: "mobius/ProgressLabel",
+                elementType: "span",
+                children: label
+            }),
+            /*#__PURE__*/ _jsx("div", {
+                className: "mobius/ProgressTrack",
+                children: /*#__PURE__*/ _jsx("div", {
+                    className: "mobius/ProgressBar",
+                    style: {
+                        width: barWidth
+                    }
+                })
+            }),
+            showValueLabel && /*#__PURE__*/ _jsx(Label, {
+                "data-testid": "value-label",
+                elementType: "span",
+                children: progressBarProps["aria-valuetext"]
+            })
+        ]
+    });
+});
+Progress.defaultProps = {
+    value: DEFAULT_VALUE,
+    minValue: DEFAULT_MIN_VALUE,
+    maxValue: DEFAULT_MAX_VALUE
+};
+Progress.displayName = "Progress";
+export { Progress };
+
+//# sourceMappingURL=Progress.js.map