@nulogy/components 14.8.2 → 15.0.1

package/dist/src/Toast/Toast.story.js

@@ -0,0 +1,192 @@
+// @ts-nocheck
+// typescript turned off because of {toast.type} not being a string
+import React, { useState } from "react";
+import { Button, DangerButton, IconicButton, Modal, PrimaryButton, Flex, Toast } from "../index";
+export default {
+    title: "Components/Toast",
+};
+export const _Toast = () => {
+    const ToastWithTrigger = () => {
+        const [triggered, setTriggered] = useState(false);
+        const triggerToast = () => {
+            setTriggered(!triggered);
+        };
+        const onHideHandler = () => {
+            setTriggered(false);
+        };
+        return (React.createElement(React.Fragment, null,
+            React.createElement(Button, { onClick: triggerToast }, "Save Changes"),
+            React.createElement(Toast, { triggered: triggered, onHide: onHideHandler }, "Saved")));
+    };
+    return React.createElement(ToastWithTrigger, null);
+};
+export const _MultipleToastsExample = () => {
+    const MultipleToastsExample = () => {
+        const [currentToast, setCurrentToast] = useState(undefined);
+        const triggerToast = (toastName) => {
+            setCurrentToast(toastName);
+        };
+        /* Alternate trigger toast fn adds a delay between toasts
+        const triggerToast = toastName => {
+          if (!currentToast) {
+            setCurrentToast(toastName);
+          } else {
+            // adds a delay between toasts
+            setTimeout(() => {
+              setCurrentToast(toastName);
+            }, 200);
+          }
+        }; */
+        const onHideHandler = (toastName) => {
+            if (currentToast === toastName) {
+                setCurrentToast(undefined);
+            }
+        };
+        const TOAST_ACTIONS = {
+            SAVE: "save",
+            RESET: "reset",
+            DELETE: "delete",
+            ERROR: "error",
+        };
+        const TOASTS = [
+            {
+                action: TOAST_ACTIONS.SAVE,
+                message: "Saved all your changes",
+                type: "success",
+            },
+            {
+                action: TOAST_ACTIONS.RESET,
+                message: "Reset all your changes",
+                type: "success",
+            },
+            {
+                action: TOAST_ACTIONS.DELETE,
+                message: "Ok, it's deleted",
+                type: "success",
+            },
+            {
+                action: TOAST_ACTIONS.ERROR,
+                message: "An error occurred, please retry",
+                type: "danger",
+            },
+        ];
+        return (React.createElement(React.Fragment, null,
+            React.createElement(Flex, { alignItems: "center" },
+                React.createElement(PrimaryButton, { onClick: () => triggerToast(TOAST_ACTIONS.SAVE), mr: "x2" }, "Save Changes"),
+                React.createElement(Button, { onClick: () => triggerToast(TOAST_ACTIONS.RESET), mr: "x2" }, "Reset"),
+                React.createElement(DangerButton, { onClick: () => triggerToast(TOAST_ACTIONS.ERROR), mr: "x2" }, "Trigger Error"),
+                React.createElement(IconicButton, { icon: "delete", onClick: () => triggerToast(TOAST_ACTIONS.DELETE) }, "Delete")),
+            TOASTS.map((toast) => {
+                return (React.createElement(Toast, { triggered: currentToast === toast.action, onHide: () => onHideHandler(toast.action), type: toast.type, key: toast.action }, toast.message));
+            })));
+    };
+    return React.createElement(MultipleToastsExample, null);
+};
+_MultipleToastsExample.story = {
+    name: "multiple toasts example",
+};
+export const CustomizeLengthOfTimeToastIsVisible = () => {
+    const ToastWithTrigger = () => {
+        const [triggered, setTriggered] = useState(false);
+        const triggerToast = () => {
+            setTriggered(!triggered);
+        };
+        const onHideHandler = () => {
+            setTriggered(false);
+        };
+        return (React.createElement(React.Fragment, null,
+            React.createElement(Button, { onClick: triggerToast }, "Save Changes"),
+            React.createElement(Toast, { triggered: triggered, onHide: onHideHandler, showDuration: 5000 }, "Saved")));
+    };
+    return React.createElement(ToastWithTrigger, null);
+};
+CustomizeLengthOfTimeToastIsVisible.story = {
+    name: "customize length of time toast is visible",
+};
+export const WithCloseButton = () => {
+    const ToastWithTrigger = () => {
+        const [triggered, setTriggered] = useState(false);
+        const triggerToast = () => {
+            setTriggered(!triggered);
+        };
+        const onHideHandler = () => {
+            setTriggered(false);
+        };
+        return (React.createElement(React.Fragment, null,
+            React.createElement(Button, { onClick: triggerToast }, "Save Changes"),
+            React.createElement(Toast, { triggered: triggered, onHide: onHideHandler, isCloseable: true }, "An error occurred while saving results. Please try again")));
+    };
+    return React.createElement(ToastWithTrigger, null);
+};
+WithCloseButton.story = {
+    name: "with close button",
+};
+export const WithModal = () => (React.createElement(React.Fragment, null,
+    React.createElement(Toast, { triggered: true, type: "danger", isCloseable: true, zIndex: 1001 }, "Something went wrong. Try again."),
+    React.createElement(Modal, { title: "Modal Title", onRequestClose: () => { }, maxWidth: "456px" }, "Modal Body")));
+WithModal.story = {
+    name: "with a modal",
+};
+export const CloseableWithMultiLineMessage = () => {
+    const [triggered, setTriggered] = useState(false);
+    const triggerToast = () => {
+        setTriggered(!triggered);
+    };
+    const onHideHandler = () => {
+        setTriggered(false);
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Button, { onClick: triggerToast }, "Save Changes"),
+        React.createElement(Toast, { triggered: triggered, onHide: onHideHandler, type: "danger", isCloseable: true }, "Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum quidem eveniet, repellat accusamus error reiciendis libero. Totam autem distinctio vo")));
+};
+CloseableWithMultiLineMessage.story = {
+    name: "closeable with a 150 character long multi-line message",
+};
+export const MultipleCloseableToastsExample = () => {
+    const MultipleToastsExample = () => {
+        const [currentToasts, setCurrentToasts] = useState([]);
+        const triggerToast = (toastName) => {
+            setCurrentToasts([...currentToasts, toastName]);
+        };
+        const onHideHandler = (toastName) => {
+            setCurrentToasts(currentToasts.filter((toast) => toast !== toastName));
+        };
+        const TOAST_ACTIONS = {
+            SAVE: "save",
+            RESET: "reset",
+            DELETE: "delete",
+            ERROR: "error",
+        };
+        const TOASTS = [
+            {
+                action: TOAST_ACTIONS.SAVE,
+                message: "Error saving all your changes",
+            },
+            {
+                action: TOAST_ACTIONS.RESET,
+                message: "Error: changes were reset",
+            },
+            {
+                action: TOAST_ACTIONS.DELETE,
+                message: "An error occurred, could not deleted",
+            },
+            {
+                action: TOAST_ACTIONS.ERROR,
+                message: "An error occurred, please retry",
+            },
+        ];
+        return (React.createElement(React.Fragment, null,
+            React.createElement(Flex, { alignItems: "center" },
+                React.createElement(PrimaryButton, { onClick: () => triggerToast(TOAST_ACTIONS.SAVE), mr: "x2" }, "Save Changes"),
+                React.createElement(Button, { onClick: () => triggerToast(TOAST_ACTIONS.RESET), mr: "x2" }, "Reset"),
+                React.createElement(DangerButton, { onClick: () => triggerToast(TOAST_ACTIONS.ERROR), mr: "x2" }, "Trigger Error"),
+                React.createElement(IconicButton, { icon: "delete", onClick: () => triggerToast(TOAST_ACTIONS.DELETE) }, "Delete")),
+            TOASTS.map((toast) => {
+                return (React.createElement(Toast, { triggered: currentToasts.includes(toast.action), onHide: () => onHideHandler(toast.action), type: "danger", key: toast.action, isCloseable: true }, toast.message));
+            })));
+    };
+    return React.createElement(MultipleToastsExample, null);
+};
+MultipleCloseableToastsExample.story = {
+    name: "multiple closeable toasts example",
+};

package/dist/src/Toast/index.d.ts

@@ -1 +1 @@
-export { default as Toast } from "./Toast";
+export { default as Toast } from "./Toast";

package/dist/src/Toast/index.js

@@ -0,0 +1 @@
+export { default as Toast } from "./Toast";

package/dist/src/ToastContainer/ToastContainer.d.ts

@@ -1,10 +1,10 @@
-import React from "react";
-import { ToasterProps } from "react-hot-toast";
-import { ToastOptions } from "./ToastFunction";
-type ToastContainerProps = {
-    gap?: number;
-    maxVisibleToasts?: number;
-    toastOptions?: ToastOptions;
-} & Omit<ToasterProps, "gutter" | "toastOptions">;
-declare const ToastContainer: ({ gap, position, reverseOrder, containerClassName, toastOptions, maxVisibleToasts, ...props }: ToastContainerProps) => React.JSX.Element;
-export default ToastContainer;
+import React from "react";
+import { ToasterProps } from "react-hot-toast";
+import { ToastOptions } from "./ToastFunction";
+type ToastContainerProps = {
+    gap?: number;
+    maxVisibleToasts?: number;
+    toastOptions?: ToastOptions;
+} & Omit<ToasterProps, "gutter" | "toastOptions">;
+declare const ToastContainer: ({ gap, position, reverseOrder, containerClassName, toastOptions, maxVisibleToasts, ...props }: ToastContainerProps) => React.JSX.Element;
+export default ToastContainer;

package/dist/src/ToastContainer/ToastContainer.js

@@ -0,0 +1,31 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React, { useEffect } from "react";
+import { toast as _toast, Toaster, useToasterStore } from "react-hot-toast";
+import { useTheme } from "styled-components";
+import { TOAST_SHOW_DURATION } from "../Toast/Toast";
+import numberFromDimension from "../utils/numberFromDimension";
+const ToastContainer = (_a) => {
+    var { gap, position = "bottom-center", reverseOrder = false, containerClassName = "nds-toast-container", toastOptions = { duration: TOAST_SHOW_DURATION }, maxVisibleToasts = 8 } = _a, props = __rest(_a, ["gap", "position", "reverseOrder", "containerClassName", "toastOptions", "maxVisibleToasts"]);
+    const theme = useTheme();
+    const { toasts } = useToasterStore();
+    useEffect(() => {
+        toasts
+            .filter((t) => t.visible)
+            .filter((_, i) => i >= maxVisibleToasts)
+            .forEach((t) => _toast.dismiss(t.id));
+    }, [toasts, maxVisibleToasts]);
+    return (React.createElement(Toaster, Object.assign({ gutter: gap || numberFromDimension(theme.space.x1), toastOptions: {
+            custom: Object.assign({}, toastOptions),
+        }, position: position, reverseOrder: reverseOrder, containerClassName: containerClassName }, props)));
+};
+export default ToastContainer;

package/dist/src/ToastContainer/ToastContainer.story.d.ts

@@ -1,6 +1,6 @@
-import React from "react";
-export declare const WithEverything: () => React.JSX.Element;
-declare const _default: {
-    title: string;
-};
-export default _default;
+import React from "react";
+export declare const WithEverything: () => React.JSX.Element;
+declare const _default: {
+    title: string;
+};
+export default _default;

package/dist/src/ToastContainer/ToastContainer.story.js

@@ -0,0 +1,83 @@
+import React, { useState } from "react";
+import { PrimaryButton } from "../Button";
+import { Input } from "../Input";
+import { Flex } from "../Flex";
+import { Select } from "../Select";
+import { Heading1, Text } from "../Type";
+import ToastContainer from "./ToastContainer";
+import toast from "./ToastFunction";
+const getToastFunctionTemplate = ({ isClosable = false, toastType = "informative", } = {}) => `toast.${toastType}("This is a toast content", {
+  title: "This is a '${toastType}' type toast title",
+  isCloseable: ${isClosable},
+})`;
+export const WithEverything = () => {
+    const [behavior, setBehavior] = useState("random");
+    const [position, setPosition] = useState("bottom-center");
+    const [type, setType] = useState("random");
+    const [toastFunctionTemplate, setToastFunctionTemplate] = useState();
+    const [duration, setDuration] = useState(2000);
+    const [maxVisibleToasts, setMaxVisibleToasts] = useState(8);
+    const randomBoolean = () => Boolean(Math.round(Math.random()));
+    const randomIndex = (length) => Math.floor(Math.random() * length);
+    const isCloseable = () => (behavior === "random" ? randomBoolean() : behavior !== "auto");
+    const toastType = () => (type === "random" ? types[randomIndex(types.length)].value : type);
+    const types = [
+        { value: "informative", label: "Informative" },
+        { value: "success", label: "Success" },
+        { value: "warning", label: "Warning" },
+        { value: "danger", label: "Danger" },
+    ];
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Heading1, null, "Toast container playground"),
+        React.createElement(Flex, { gap: "x3", flexDirection: "column", maxWidth: "600px" },
+            React.createElement(Flex, { flexDirection: "column", flexBasis: "100%", gap: "x2" },
+                React.createElement(Flex, { flexDirection: "column" },
+                    React.createElement(Text, { fontWeight: "bold" },
+                        "1) Add the ",
+                        "<ToastContainer />",
+                        " to a top level component in your UI tree. The ",
+                        "<ToastContainer />",
+                        " ",
+                        "should always be mounted when you call the `toast` function bellow"),
+                    React.createElement("pre", null, `import { ToastContainer } from "@nulogy/components"`),
+                    React.createElement("pre", null, `<ToastContainer position="${position}" maxVisibleToasts={${maxVisibleToasts}} toastOptions={{ duration: ${duration} }} />`)),
+                React.createElement(Input, { value: duration, labelText: "Show duration in milliseconds", onChange: (event) => {
+                        setDuration(Number(event.target.value));
+                    } }),
+                React.createElement(Input, { value: maxVisibleToasts, labelText: "Maximum number of visible toasts", onChange: (event) => {
+                        setMaxVisibleToasts(Number(event.target.value));
+                    } }),
+                React.createElement(Select, { defaultValue: position, options: [
+                        { value: "bottom-center", label: "Bottom center" },
+                        { value: "bottom-left", label: "Bottom left" },
+                        { value: "bottom-right", label: "Bottom right" },
+                        { value: "top-center", label: "Top center" },
+                        { value: "top-left", label: "Top left" },
+                        { value: "top-right", label: "Top right" },
+                    ], labelText: "Position", onChange: (value) => setPosition(value) })),
+            React.createElement(Flex, { flexDirection: "column", flexBasis: "100%", gap: "x2" },
+                React.createElement(Flex, { flexDirection: "column" },
+                    React.createElement(Text, { fontWeight: "bold" }, "Trigger toasts from anywhere using the `toast` function"),
+                    React.createElement("pre", null, `import { toast } from "@nulogy/components"`),
+                    React.createElement("pre", null, toastFunctionTemplate !== null && toastFunctionTemplate !== void 0 ? toastFunctionTemplate : getToastFunctionTemplate())),
+                React.createElement(Flex, { gap: "x2", flexDirection: "column" },
+                    React.createElement(Select, { defaultValue: type, options: [{ value: "random", label: "Random" }, ...types], labelText: "Type", onChange: (value) => setType(value) }),
+                    React.createElement(Select, { defaultValue: behavior, options: [
+                            { label: "Random", value: "random" },
+                            { label: "Dismissible", value: "dismissible" },
+                            { label: "Auto-dismissed", value: "auto" },
+                        ], labelText: "Behavior", onChange: (value) => setBehavior(value) }),
+                    React.createElement(PrimaryButton, { onClick: () => {
+                            const toastTypeValue = toastType();
+                            const isClosableValue = isCloseable();
+                            setToastFunctionTemplate(getToastFunctionTemplate({ isClosable: isClosableValue, toastType: toastTypeValue }));
+                            toast[toastTypeValue]("This is a toast content", {
+                                title: `This is a '${toastTypeValue}' type toast title`,
+                                isCloseable: isClosableValue,
+                            });
+                        } }, "Trigger toast"))),
+            React.createElement(ToastContainer, { position: position, toastOptions: { duration }, maxVisibleToasts: maxVisibleToasts }))));
+};
+export default {
+    title: "Components/ToastContainer",
+};

package/dist/src/ToastContainer/ToastFunction.d.ts

@@ -1,14 +1,14 @@
-import React from "react";
-import { ToastOptions as ReactHotToastOptions } from "react-hot-toast";
-import { AlertProps as OriginalAlertProps } from "../Alert/Alert";
-type AlertProps = Omit<OriginalAlertProps, "as">;
-type ToastFunction = (children: React.ReactNode, props?: AlertProps, options?: ToastOptions) => void;
-type ToastFunctions = {
-    danger: ToastFunction;
-    informative: ToastFunction;
-    success: ToastFunction;
-    warning: ToastFunction;
-};
-declare const toast: ToastFunctions;
-export type ToastOptions = Omit<ReactHotToastOptions, "icon" | "iconTheme">;
-export default toast;
+import React from "react";
+import { ToastOptions as ReactHotToastOptions } from "react-hot-toast";
+import { AlertProps as OriginalAlertProps } from "../Alert/Alert";
+type AlertProps = Omit<OriginalAlertProps, "as">;
+type ToastFunction = (children: React.ReactNode, props?: AlertProps, options?: ToastOptions) => void;
+type ToastFunctions = {
+    danger: ToastFunction;
+    informative: ToastFunction;
+    success: ToastFunction;
+    warning: ToastFunction;
+};
+declare const toast: ToastFunctions;
+export type ToastOptions = Omit<ReactHotToastOptions, "icon" | "iconTheme">;
+export default toast;

package/dist/src/ToastContainer/ToastFunction.js

@@ -0,0 +1,32 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from "react";
+import { AnimatePresence } from "framer-motion";
+import { toast as _toast } from "react-hot-toast";
+import { Alert } from "../Alert";
+import { AnimatedBox } from "../Box";
+import { toastAnimationConfig } from "../Toast/Toast";
+const CustomToast = (_a) => {
+    var { isVisible, id, children } = _a, props = __rest(_a, ["isVisible", "id", "children"]);
+    const handleClose = () => {
+        _toast.dismiss(id);
+    };
+    return (React.createElement(AnimatePresence, null, isVisible && (React.createElement(AnimatedBox, Object.assign({ key: "notification", role: "alert" }, toastAnimationConfig),
+        React.createElement(Alert, Object.assign({ controlled: true, onClose: handleClose }, props), children)))));
+};
+const toast = {
+    danger: (children, props = {}, options = {}) => _toast.custom((t) => (React.createElement(CustomToast, Object.assign({ id: t.id, isVisible: t.visible, type: "danger" }, props), children)), Object.assign({ duration: props.isCloseable ? Infinity : options.duration }, options)),
+    informative: (children, props = {}, options = {}) => _toast.custom((t) => (React.createElement(CustomToast, Object.assign({ id: t.id, isVisible: t.visible, type: "informative" }, props), children)), Object.assign({ duration: props.isCloseable ? Infinity : options.duration }, options)),
+    success: (children, props = {}, options = {}) => _toast.custom((t) => (React.createElement(CustomToast, Object.assign({ id: t.id, isVisible: t.visible, type: "success" }, props), children)), Object.assign({ duration: props.isCloseable ? Infinity : options.duration }, options)),
+    warning: (children, props = {}, options = {}) => _toast.custom((t) => (React.createElement(CustomToast, Object.assign({ id: t.id, isVisible: t.visible, type: "warning" }, props), children)), Object.assign({ duration: props.isCloseable ? Infinity : options.duration }, options)),
+};
+export default toast;

package/dist/src/ToastContainer/index.d.ts

@@ -1,2 +1,2 @@
-export { default as ToastContainer } from "./ToastContainer";
-export { default as toast } from "./ToastFunction";
+export { default as ToastContainer } from "./ToastContainer";
+export { default as toast } from "./ToastFunction";

package/dist/src/ToastContainer/index.js

@@ -0,0 +1,2 @@
+export { default as ToastContainer } from "./ToastContainer";
+export { default as toast } from "./ToastFunction";

package/dist/src/Toggle/Toggle.d.ts

@@ -1,27 +1,27 @@
-import React from "react";
-import { SpaceProps } from "styled-system";
-import { ComponentVariant } from "../NDSProvider/ComponentVariantContext";
-import { DefaultNDSThemeType } from "../theme";
-declare const ToggleComponent: React.ForwardRefExoticComponent<SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & {
-    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
-    variant?: ComponentVariant;
-    toggled?: boolean;
-    disabled?: boolean;
-    onText?: string;
-    offText?: string;
-    id?: string;
-    className?: string;
-    required?: boolean;
-    helpText?: string;
-    labelText?: string;
-    requirementText?: string;
-    error?: boolean;
-    onClick?: (e: React.MouseEvent) => void;
-    innerRef?: React.Ref<HTMLInputElement>;
-    name?: string;
-    theme?: DefaultNDSThemeType;
-    "data-testid"?: string;
-} & {
-    defaultToggled?: boolean;
-} & React.RefAttributes<HTMLInputElement>>;
-export default ToggleComponent;
+import React from "react";
+import { SpaceProps } from "styled-system";
+import { ComponentVariant } from "../NDSProvider/ComponentVariantContext";
+import { DefaultNDSThemeType } from "../theme";
+declare const ToggleComponent: React.ForwardRefExoticComponent<SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & {
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    variant?: ComponentVariant;
+    toggled?: boolean;
+    disabled?: boolean;
+    onText?: string;
+    offText?: string;
+    id?: string;
+    className?: string;
+    required?: boolean;
+    helpText?: string;
+    labelText?: string;
+    requirementText?: string;
+    error?: boolean;
+    onClick?: (e: React.MouseEvent) => void;
+    innerRef?: React.Ref<HTMLInputElement>;
+    name?: string;
+    theme?: DefaultNDSThemeType;
+    "data-testid"?: string;
+} & {
+    defaultToggled?: boolean;
+} & React.RefAttributes<HTMLInputElement>>;
+export default ToggleComponent;

package/dist/src/Toggle/Toggle.js

@@ -0,0 +1,68 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React, { useState, useContext } from "react";
+import { ThemeContext } from "styled-components";
+import propTypes from "@styled-system/prop-types";
+import { Box } from "../Box";
+import { HelpText, RequirementText } from "../FieldLabel";
+import { Field } from "../Form";
+import { Text } from "../Type";
+import { useComponentVariant } from "../NDSProvider/ComponentVariantContext";
+import { ClickInputLabel } from "../utils";
+import { getSubset, omitSubset } from "../utils/subset";
+import { noop } from "../utils/noop";
+import ToggleButton from "./ToggleButton";
+const labelTextStyles = (theme) => ({
+    fontSize: theme.fontSizes.small,
+    fontWeight: theme.fontWeights.bold,
+    lineHeight: theme.lineHeights.smallTextBase,
+});
+function MaybeToggleTitle(_a) {
+    var { labelText, requirementText, helpText, children } = _a, props = __rest(_a, ["labelText", "requirementText", "helpText", "children"]);
+    const themeContext = useContext(ThemeContext);
+    return labelText ? (React.createElement("div", Object.assign({}, props),
+        React.createElement(Box, { mb: children && "x1" },
+            React.createElement("span", { style: labelTextStyles(themeContext) }, labelText),
+            requirementText && React.createElement(RequirementText, null, requirementText),
+            helpText && React.createElement(HelpText, null, helpText)),
+        children)) : (React.createElement(React.Fragment, null, children));
+}
+const BaseToggle = (_a) => {
+    var { disabled, onChange, onText, offText, className, required, error, id, labelText, requirementText, helpText, toggled, onClick = noop, variant, "data-testid": dataTestId } = _a, props = __rest(_a, ["disabled", "onChange", "onText", "offText", "className", "required", "error", "id", "labelText", "requirementText", "helpText", "toggled", "onClick", "variant", "data-testid"]);
+    const handleClick = (e) => {
+        onClick(e);
+    };
+    const componentVariant = useComponentVariant(variant);
+    const spaceProps = getSubset(props, propTypes.space);
+    const restProps = omitSubset(props, propTypes.space);
+    return (React.createElement(Field, Object.assign({ className: className, alignItems: "flex-start", py: "half" }, spaceProps),
+        React.createElement(MaybeToggleTitle, { id: labelText && `${labelText}-label`, labelText: labelText, requirementText: requirementText, helpText: helpText },
+            React.createElement(ClickInputLabel, { variant: componentVariant, as: "div", onClick: onClick, disabled: disabled, "data-testid": dataTestId },
+                React.createElement(ToggleButton, Object.assign({ id: id, checked: toggled, onChange: onChange, disabled: disabled, required: required, "aria-required": required, "aria-invalid": error, "aria-labelledby": labelText && `${labelText}-label`, onClick: handleClick, toggled: toggled }, restProps, { ref: props.innerRef })),
+                (onText || offText) && (React.createElement(Text, { disabled: disabled, mb: "none", ml: "x1" }, toggled ? onText : offText))))));
+};
+const StatefulToggle = (_a) => {
+    var { defaultToggled, onClick = noop, disabled } = _a, props = __rest(_a, ["defaultToggled", "onClick", "disabled"]);
+    const [toggled, setToggled] = useState(defaultToggled);
+    const handleClick = (e) => {
+        if (!disabled)
+            setToggled(!toggled);
+        onClick(e);
+    };
+    return React.createElement(BaseToggle, Object.assign({ toggled: toggled, onClick: handleClick, disabled: disabled }, props));
+};
+const Toggle = (_a) => {
+    var { toggled } = _a, props = __rest(_a, ["toggled"]);
+    return toggled === undefined ? React.createElement(StatefulToggle, Object.assign({}, props)) : React.createElement(BaseToggle, Object.assign({ toggled: toggled }, props));
+};
+const ToggleComponent = React.forwardRef((props, ref) => (React.createElement(Toggle, Object.assign({ innerRef: ref }, props))));
+export default ToggleComponent;

package/dist/src/Toggle/Toggle.story.d.ts

@@ -1,50 +1,50 @@
-import React from "react";
-declare const _default: {
-    title: string;
-};
-export default _default;
-export declare const _Toggle: () => React.JSX.Element;
-export declare const ToggleWithAllProps: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const ToggleSetToDefaultToggled: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const ToggleSetToDisabled: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const WithCustomId: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const WithText: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const WithLongText: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const WithContraintWidth: () => React.JSX.Element;
-export declare const ControlledToggle: () => React.JSX.Element;
-export declare const UsingRefToControlFocus: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
+import React from "react";
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const _Toggle: () => React.JSX.Element;
+export declare const ToggleWithAllProps: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const ToggleSetToDefaultToggled: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const ToggleSetToDisabled: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const WithCustomId: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const WithText: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const WithLongText: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const WithContraintWidth: () => React.JSX.Element;
+export declare const ControlledToggle: () => React.JSX.Element;
+export declare const UsingRefToControlFocus: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};