@nulogy/components 16.1.0 → 17.0.0

package/dist/esm/TimeRange/TimeRange.js

@@ -0,0 +1,148 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef, useState, useRef, useImperativeHandle, useEffect } from "react";
+import { FieldLabelDefaultProps } from "../FieldLabel/FieldLabel.type.js";
+import { useComponentVariant } from "../NDSProvider/ComponentVariantContext.js";
+import { getDuration } from "./TimeRange.utils.js";
+import { useTranslation } from "../node_modules/.pnpm/react-i18next@12.3.1_i18next@19.9.2_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/react-i18next/dist/es/useTranslation.js";
+import TimePicker from "../TimePicker/TimePicker.js";
+import RangeContainer from "../RangeContainer/RangeContainer.js";
+const DEFAULT_LABEL = "Time Range";
+const TimeRange = forwardRef(
+  ({
+    timeFormat,
+    onRangeChange,
+    onStartTimeChange,
+    onEndTimeChange,
+    errorMessage,
+    defaultStartTime,
+    defaultEndTime,
+    minTime,
+    maxTime,
+    interval,
+    startAriaLabel,
+    endAriaLabel,
+    endTimeProps,
+    startTimeProps,
+    variant,
+    disableRangeValidation = false,
+    labelProps = {
+      ...FieldLabelDefaultProps,
+      labelText: DEFAULT_LABEL
+    },
+    ...props
+  }, ref) => {
+    const [startTime, setStartTime] = useState();
+    const [endTime, setEndTime] = useState();
+    const [rangeError, setRangeError] = useState();
+    const inputRef1 = useRef();
+    const inputRef2 = useRef();
+    const { t } = useTranslation();
+    const componentVariant = useComponentVariant(variant);
+    useImperativeHandle(ref, () => ({
+      inputRef1: {
+        ...inputRef1,
+        focus: () => {
+          if (inputRef1.current) {
+            inputRef1.current.focus();
+          }
+        }
+      },
+      inputRef2: {
+        ...inputRef2,
+        focus: () => {
+          if (inputRef2.current) {
+            inputRef2.current.focus();
+          }
+        }
+      }
+    }));
+    useEffect(() => {
+      validateTimeRange();
+    }, [startTime, endTime]);
+    const changeStartTimeHandler = (label, value) => {
+      setStartTime(value);
+      if (onStartTimeChange) {
+        onStartTimeChange(label);
+      }
+    };
+    const changeEndTimeHandler = (label, value) => {
+      setEndTime(value);
+      if (onEndTimeChange) {
+        onEndTimeChange(label);
+      }
+    };
+    const validateTimeRange = () => {
+      let error;
+      const end = endTime || defaultEndTime;
+      const start = startTime || defaultStartTime;
+      if (start && end) {
+        const duration = getDuration(start, end);
+        if (duration < 0) {
+          error = "end time is before start time";
+        }
+      }
+      setRangeError(error);
+      if (onRangeChange) {
+        onRangeChange({
+          startTime,
+          endTime,
+          error
+        });
+      }
+    };
+    const startInput = /* @__PURE__ */ jsx(
+      TimePicker,
+      {
+        timeFormat,
+        defaultValue: defaultStartTime,
+        selected: startTime,
+        onChange: changeStartTimeHandler,
+        minTime,
+        maxTime: endTime || maxTime,
+        interval,
+        "aria-label": startAriaLabel || t("select a start time"),
+        "data-testid": "timerange-start-time",
+        ref: inputRef1,
+        error: rangeError,
+        variant: componentVariant,
+        ...startTimeProps
+      }
+    );
+    const endInput = /* @__PURE__ */ jsx(
+      TimePicker,
+      {
+        timeFormat,
+        defaultValue: defaultEndTime,
+        selected: endTime,
+        onChange: changeEndTimeHandler,
+        maxTime,
+        minTime: startTime || minTime,
+        interval,
+        "aria-label": endAriaLabel || t("select an end time"),
+        "data-testid": "timerange-end-time",
+        ref: inputRef2,
+        error: rangeError,
+        variant: componentVariant,
+        ...endTimeProps
+      }
+    );
+    return /* @__PURE__ */ jsx(
+      RangeContainer,
+      {
+        labelProps: {
+          ...labelProps,
+          labelText: labelProps.labelText === DEFAULT_LABEL ? t("time range") : labelProps.labelText
+        },
+        startComponent: startInput,
+        endComponent: endInput,
+        errorMessages: !disableRangeValidation ? [rangeError, errorMessage] : [errorMessage],
+        variant: componentVariant,
+        ...props
+      }
+    );
+  }
+);
+export {
+  TimeRange as default
+};
+//# sourceMappingURL=TimeRange.js.map

package/dist/esm/TimeRange/TimeRange.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimeRange.js","sources":["../../../src/TimeRange/TimeRange.tsx"],"sourcesContent":["import React, { useState, useEffect, forwardRef, useImperativeHandle, useRef } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { SpaceProps } from \"styled-system\";\nimport { TimePicker } from \"../TimePicker\";\nimport { RangeContainer } from \"../RangeContainer\";\nimport { FieldLabelDefaultProps } from \"../FieldLabel/FieldLabel.type\";\nimport { ComponentVariant, useComponentVariant } from \"../NDSProvider/ComponentVariantContext\";\nimport { getDuration } from \"./TimeRange.utils\";\n\nconst DEFAULT_LABEL = \"Time Range\";\n\ntype TimeRangeProps = SpaceProps & {\n  variant?: ComponentVariant;\n  timeFormat?: string;\n  onRangeChange?: (range: { startTime?: string; endTime?: string; error?: string }) => void;\n  onStartTimeChange?: (label: string) => void;\n  onEndTimeChange?: (label: string) => void;\n  ref?: React.MutableRefObject<unknown>;\n  errorMessage?: string;\n  defaultStartTime?: string;\n  defaultEndTime?: string;\n  disableRangeValidation?: boolean;\n  labelProps?: any;\n  minTime?: string;\n  maxTime?: string;\n  interval?: number;\n  startAriaLabel?: string;\n  endAriaLabel?: string;\n  endTimeProps?: any;\n  startTimeProps?: any;\n};\n\nconst TimeRange = forwardRef(\n  (\n    {\n      timeFormat,\n      onRangeChange,\n      onStartTimeChange,\n      onEndTimeChange,\n      errorMessage,\n      defaultStartTime,\n      defaultEndTime,\n      minTime,\n      maxTime,\n      interval,\n      startAriaLabel,\n      endAriaLabel,\n      endTimeProps,\n      startTimeProps,\n      variant,\n      disableRangeValidation = false,\n      labelProps = {\n        ...FieldLabelDefaultProps,\n        labelText: DEFAULT_LABEL,\n      },\n      ...props\n    }: TimeRangeProps,\n    ref\n  ) => {\n    const [startTime, setStartTime] = useState();\n    const [endTime, setEndTime] = useState();\n    const [rangeError, setRangeError] = useState();\n\n    const inputRef1 = useRef();\n    const inputRef2 = useRef();\n\n    const { t } = useTranslation();\n\n    const componentVariant = useComponentVariant(variant);\n\n    useImperativeHandle(ref, () => ({\n      inputRef1: {\n        ...inputRef1,\n        focus: () => {\n          if (inputRef1.current) {\n            // @ts-expect-error - focus method exists on input elements but type may not be narrowed correctly\n            inputRef1.current.focus();\n          }\n        },\n      },\n      inputRef2: {\n        ...inputRef2,\n        focus: () => {\n          if (inputRef2.current) {\n            // @ts-expect-error - focus method exists on input elements but type may not be narrowed correctly\n            inputRef2.current.focus();\n          }\n        },\n      },\n    }));\n\n    useEffect(() => {\n      validateTimeRange();\n    }, [startTime, endTime]);\n\n    const changeStartTimeHandler = (label, value) => {\n      setStartTime(value);\n      if (onStartTimeChange) {\n        onStartTimeChange(label);\n      }\n    };\n\n    const changeEndTimeHandler = (label, value) => {\n      setEndTime(value);\n      if (onEndTimeChange) {\n        onEndTimeChange(label);\n      }\n    };\n\n    const validateTimeRange = () => {\n      let error;\n      const end = endTime || defaultEndTime;\n      const start = startTime || defaultStartTime;\n      if (start && end) {\n        const duration = getDuration(start, end);\n        if (duration < 0) {\n          error = \"end time is before start time\";\n        }\n      }\n      setRangeError(error);\n      if (onRangeChange) {\n        onRangeChange({\n          startTime,\n          endTime,\n          error,\n        });\n      }\n    };\n\n    const startInput = (\n      <TimePicker\n        timeFormat={timeFormat}\n        defaultValue={defaultStartTime}\n        selected={startTime}\n        onChange={changeStartTimeHandler}\n        minTime={minTime}\n        maxTime={endTime || maxTime}\n        interval={interval}\n        aria-label={startAriaLabel || t(\"select a start time\")}\n        data-testid=\"timerange-start-time\"\n        ref={inputRef1}\n        error={rangeError}\n        variant={componentVariant}\n        {...startTimeProps}\n      />\n    );\n\n    const endInput = (\n      <TimePicker\n        timeFormat={timeFormat}\n        defaultValue={defaultEndTime}\n        selected={endTime}\n        onChange={changeEndTimeHandler}\n        maxTime={maxTime}\n        minTime={startTime || minTime}\n        interval={interval}\n        aria-label={endAriaLabel || t(\"select an end time\")}\n        data-testid=\"timerange-end-time\"\n        ref={inputRef2}\n        error={rangeError}\n        variant={componentVariant}\n        {...endTimeProps}\n      />\n    );\n\n    return (\n      <RangeContainer\n        labelProps={{\n          ...labelProps,\n          labelText: labelProps.labelText === DEFAULT_LABEL ? t(\"time range\") : labelProps.labelText,\n        }}\n        startComponent={startInput}\n        endComponent={endInput}\n        errorMessages={!disableRangeValidation ? [rangeError, errorMessage] : [errorMessage]}\n        variant={componentVariant}\n        {...props}\n      />\n    );\n  }\n);\n\nexport default TimeRange;\n"],"names":[],"mappings":"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"}

package/dist/esm/TimeRange/TimeRange.utils.js

@@ -0,0 +1,16 @@
+const convertTimeToMinutes = (time) => {
+  if (time) {
+    const timeArr = time.split(":").map(Number);
+    const hours = timeArr[0];
+    const minutes = timeArr[1];
+    return hours * 60 + minutes;
+  }
+  return null;
+};
+const getDuration = (start, end) => {
+  return convertTimeToMinutes(end) - convertTimeToMinutes(start);
+};
+export {
+  getDuration
+};
+//# sourceMappingURL=TimeRange.utils.js.map

package/dist/esm/TimeRange/TimeRange.utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimeRange.utils.js","sources":["../../../src/TimeRange/TimeRange.utils.ts"],"sourcesContent":["const convertTimeToMinutes = (time) => {\n  if (time) {\n    const timeArr = time.split(\":\").map(Number);\n    const hours = timeArr[0];\n    const minutes = timeArr[1];\n    return hours * 60 + minutes;\n  }\n  return null;\n};\n\nexport const getDuration = (start, end) => {\n  return convertTimeToMinutes(end) - convertTimeToMinutes(start);\n};\n"],"names":[],"mappings":"AAAA,MAAM,uBAAuB,CAAC,SAAS;AACrC,MAAI,MAAM;AACR,UAAM,UAAU,KAAK,MAAM,GAAG,EAAE,IAAI,MAAM;AAC1C,UAAM,QAAQ,QAAQ,CAAC;AACvB,UAAM,UAAU,QAAQ,CAAC;AACzB,WAAO,QAAQ,KAAK;AAAA,EACtB;AACA,SAAO;AACT;AAEO,MAAM,cAAc,CAAC,OAAO,QAAQ;AACzC,SAAO,qBAAqB,GAAG,IAAI,qBAAqB,KAAK;AAC/D;"}

package/dist/esm/Toast/Toast.js

@@ -0,0 +1,120 @@
+import { jsx } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import Alert from "../Alert/Alert.js";
+import { AnimatePresence } from "../node_modules/.pnpm/framer-motion@12.35.0_@emotion_is-prop-valid@1.4.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/framer-motion/dist/es/components/AnimatePresence/index.js";
+import { AnimatedBox } from "../Box/Box.js";
+const TOAST_SHOW_DURATION = 5e3;
+const ANIMATE_OUT_DURATION = 1e3;
+const toastAnimationConfig = {
+  initial: {
+    opacity: 0,
+    y: 50
+  },
+  animate: {
+    opacity: 1,
+    y: -30,
+    transition: { type: "spring", bounce: 0.4, duration: 0.6 }
+  },
+  exit: {
+    y: 50,
+    opacity: 0,
+    transition: { ease: "easeOut", duration: 0.15 }
+  }
+};
+const Toast = ({
+  triggered = false,
+  isCloseable = false,
+  showDuration = TOAST_SHOW_DURATION,
+  onHide,
+  onShow,
+  children,
+  onHidden,
+  zIndex,
+  ...props
+}) => {
+  const [visible, setVisible] = useState(triggered);
+  const [timeoutID, setTimeoutID] = useState(void 0);
+  const cancelHidingToast = () => {
+    clearTimeout(timeoutID);
+  };
+  const hideToast = (delay = TOAST_SHOW_DURATION) => {
+    cancelHidingToast();
+    let timeoutId;
+    timeoutId = window.setTimeout(() => {
+      setVisible(false);
+      if (onHide) onHide();
+      timeoutId = window.setTimeout(() => {
+        if (onHidden) onHidden();
+      }, ANIMATE_OUT_DURATION);
+    }, delay);
+    setTimeoutID(timeoutId);
+  };
+  const triggerToast = () => {
+    setVisible(true);
+    if (onShow) onShow();
+    if (!isCloseable) hideToast(showDuration);
+  };
+  useEffect(() => {
+    if (triggered) {
+      triggerToast();
+    } else {
+      setVisible(false);
+      if (onHide) onHide();
+    }
+    return () => {
+      cancelHidingToast();
+    };
+  }, [triggered]);
+  const onMouseIn = () => {
+    if (!isCloseable) {
+      cancelHidingToast();
+    }
+  };
+  const onMouseOut = () => {
+    if (!isCloseable) {
+      hideToast(TOAST_SHOW_DURATION / 2);
+    }
+  };
+  const handleCloseButtonClick = () => {
+    hideToast(0);
+  };
+  return /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: visible && /* @__PURE__ */ jsx(
+    AnimatedBox,
+    {
+      onMouseEnter: onMouseIn,
+      onFocus: onMouseIn,
+      onMouseLeave: onMouseOut,
+      onBlur: onMouseOut,
+      position: "fixed",
+      bottom: "0",
+      left: "0",
+      right: "0",
+      marginLeft: "auto",
+      marginRight: "auto",
+      width: "fit-content",
+      zIndex,
+      boxShadow: "medium",
+      layout: true,
+      ...toastAnimationConfig,
+      children: /* @__PURE__ */ jsx(
+        Alert,
+        {
+          minWidth: "200px",
+          maxWidth: "600px",
+          isCloseable,
+          onClose: handleCloseButtonClick,
+          controlled: true,
+          ...props,
+          children
+        }
+      )
+    }
+  ) });
+};
+export {
+  TOAST_SHOW_DURATION,
+  Toast,
+  Toast as default,
+  toastAnimationConfig
+};
+//# sourceMappingURL=Toast.js.map

package/dist/esm/Toast/Toast.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toast.js","sources":["../../../src/Toast/Toast.tsx"],"sourcesContent":["import React, { useState, useEffect } from \"react\";\nimport { AnimatePresence } from \"framer-motion\";\nimport Alert, { AlertProps } from \"../Alert/Alert\";\nimport { AnimatedBox } from \"../Box\";\n\ntype ToastProps = AlertProps & {\n  triggered?: boolean;\n  isCloseable?: boolean;\n  showDuration?: number;\n  onShow?: () => void;\n  onHide?: () => void;\n  onHidden?: () => void;\n};\n\nexport const TOAST_SHOW_DURATION = 5000; // in ms\nconst ANIMATE_OUT_DURATION = 1000;\n\nexport const toastAnimationConfig = {\n  initial: {\n    opacity: 0,\n    y: 50,\n  },\n  animate: {\n    opacity: 1,\n    y: -30,\n    transition: { type: \"spring\" as const, bounce: 0.4, duration: 0.6 },\n  },\n  exit: {\n    y: 50,\n    opacity: 0,\n    transition: { ease: \"easeOut\" as const, duration: 0.15 },\n  },\n};\n\nexport const Toast = ({\n  triggered = false,\n  isCloseable = false,\n  showDuration = TOAST_SHOW_DURATION,\n  onHide,\n  onShow,\n  children,\n  onHidden,\n  zIndex,\n  ...props\n}: ToastProps) => {\n  const [visible, setVisible] = useState(triggered);\n  const [timeoutID, setTimeoutID] = useState<number | undefined>(undefined);\n\n  const cancelHidingToast = () => {\n    clearTimeout(timeoutID);\n  };\n\n  const hideToast = (delay = TOAST_SHOW_DURATION) => {\n    cancelHidingToast();\n    let timeoutId: number;\n\n    timeoutId = window.setTimeout(() => {\n      setVisible(false);\n      if (onHide) onHide();\n\n      timeoutId = window.setTimeout(() => {\n        if (onHidden) onHidden();\n      }, ANIMATE_OUT_DURATION);\n    }, delay);\n\n    setTimeoutID(timeoutId);\n  };\n\n  const triggerToast = () => {\n    setVisible(true);\n    if (onShow) onShow();\n    if (!isCloseable) hideToast(showDuration);\n  };\n\n  useEffect(() => {\n    if (triggered) {\n      triggerToast();\n    } else {\n      setVisible(false);\n      if (onHide) onHide();\n    }\n\n    return () => {\n      cancelHidingToast();\n    };\n  }, [triggered]);\n\n  const onMouseIn = () => {\n    if (!isCloseable) {\n      cancelHidingToast();\n    }\n  };\n\n  const onMouseOut = () => {\n    if (!isCloseable) {\n      hideToast(TOAST_SHOW_DURATION / 2);\n    }\n  };\n\n  const handleCloseButtonClick = () => {\n    hideToast(0);\n  };\n\n  return (\n    <AnimatePresence initial={false}>\n      {visible && (\n        <AnimatedBox\n          onMouseEnter={onMouseIn}\n          onFocus={onMouseIn}\n          onMouseLeave={onMouseOut}\n          onBlur={onMouseOut}\n          position=\"fixed\"\n          bottom=\"0\"\n          left=\"0\"\n          right=\"0\"\n          marginLeft=\"auto\"\n          marginRight=\"auto\"\n          width=\"fit-content\"\n          zIndex={zIndex}\n          boxShadow=\"medium\"\n          layout\n          {...toastAnimationConfig}\n        >\n          <Alert\n            minWidth=\"200px\"\n            maxWidth=\"600px\"\n            isCloseable={isCloseable}\n            onClose={handleCloseButtonClick}\n            controlled\n            {...props}\n          >\n            {children}\n          </Alert>\n        </AnimatedBox>\n      )}\n    </AnimatePresence>\n  );\n};\n\nexport default Toast;\n"],"names":[],"mappings":";;;;;AAcO,MAAM,sBAAsB;AACnC,MAAM,uBAAuB;AAEtB,MAAM,uBAAuB;AAAA,EAClC,SAAS;AAAA,IACP,SAAS;AAAA,IACT,GAAG;AAAA,EAAA;AAAA,EAEL,SAAS;AAAA,IACP,SAAS;AAAA,IACT,GAAG;AAAA,IACH,YAAY,EAAE,MAAM,UAAmB,QAAQ,KAAK,UAAU,IAAA;AAAA,EAAI;AAAA,EAEpE,MAAM;AAAA,IACJ,GAAG;AAAA,IACH,SAAS;AAAA,IACT,YAAY,EAAE,MAAM,WAAoB,UAAU,KAAA;AAAA,EAAK;AAE3D;AAEO,MAAM,QAAQ,CAAC;AAAA,EACpB,YAAY;AAAA,EACZ,cAAc;AAAA,EACd,eAAe;AAAA,EACf;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAkB;AAChB,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,SAAS;AAChD,QAAM,CAAC,WAAW,YAAY,IAAI,SAA6B,MAAS;AAExE,QAAM,oBAAoB,MAAM;AAC9B,iBAAa,SAAS;AAAA,EACxB;AAEA,QAAM,YAAY,CAAC,QAAQ,wBAAwB;AACjD,sBAAA;AACA,QAAI;AAEJ,gBAAY,OAAO,WAAW,MAAM;AAClC,iBAAW,KAAK;AAChB,UAAI,OAAQ,QAAA;AAEZ,kBAAY,OAAO,WAAW,MAAM;AAClC,YAAI,SAAU,UAAA;AAAA,MAChB,GAAG,oBAAoB;AAAA,IACzB,GAAG,KAAK;AAER,iBAAa,SAAS;AAAA,EACxB;AAEA,QAAM,eAAe,MAAM;AACzB,eAAW,IAAI;AACf,QAAI,OAAQ,QAAA;AACZ,QAAI,CAAC,YAAa,WAAU,YAAY;AAAA,EAC1C;AAEA,YAAU,MAAM;AACd,QAAI,WAAW;AACb,mBAAA;AAAA,IACF,OAAO;AACL,iBAAW,KAAK;AAChB,UAAI,OAAQ,QAAA;AAAA,IACd;AAEA,WAAO,MAAM;AACX,wBAAA;AAAA,IACF;AAAA,EACF,GAAG,CAAC,SAAS,CAAC;AAEd,QAAM,YAAY,MAAM;AACtB,QAAI,CAAC,aAAa;AAChB,wBAAA;AAAA,IACF;AAAA,EACF;AAEA,QAAM,aAAa,MAAM;AACvB,QAAI,CAAC,aAAa;AAChB,gBAAU,sBAAsB,CAAC;AAAA,IACnC;AAAA,EACF;AAEA,QAAM,yBAAyB,MAAM;AACnC,cAAU,CAAC;AAAA,EACb;AAEA,SACE,oBAAC,iBAAA,EAAgB,SAAS,OACvB,UAAA,WACC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,cAAc;AAAA,MACd,SAAS;AAAA,MACT,cAAc;AAAA,MACd,QAAQ;AAAA,MACR,UAAS;AAAA,MACT,QAAO;AAAA,MACP,MAAK;AAAA,MACL,OAAM;AAAA,MACN,YAAW;AAAA,MACX,aAAY;AAAA,MACZ,OAAM;AAAA,MACN;AAAA,MACA,WAAU;AAAA,MACV,QAAM;AAAA,MACL,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,UAAS;AAAA,UACT,UAAS;AAAA,UACT;AAAA,UACA,SAAS;AAAA,UACT,YAAU;AAAA,UACT,GAAG;AAAA,UAEH;AAAA,QAAA;AAAA,MAAA;AAAA,IACH;AAAA,EAAA,GAGN;AAEJ;"}

package/dist/esm/ToastContainer/ToastContainer.js

@@ -0,0 +1,38 @@
+import { jsx } from "react/jsx-runtime";
+import { useEffect } from "react";
+import { useToasterStore as I, toast as n, Toaster as Ie } from "../node_modules/.pnpm/react-hot-toast@2.4.1_csstype@3.2.3_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/react-hot-toast/dist/index.js";
+import { useTheme } from "styled-components";
+import { TOAST_SHOW_DURATION } from "../Toast/Toast.js";
+import numberFromDimension from "../utils/numberFromDimension/index.js";
+const ToastContainer = ({
+  gap,
+  position = "bottom-center",
+  reverseOrder = false,
+  containerClassName = "nds-toast-container",
+  toastOptions = { duration: TOAST_SHOW_DURATION },
+  maxVisibleToasts = 8,
+  ...props
+}) => {
+  const theme = useTheme();
+  const { toasts } = I();
+  useEffect(() => {
+    toasts.filter((t) => t.visible).filter((_, i) => i >= maxVisibleToasts).forEach((t) => n.dismiss(t.id));
+  }, [toasts, maxVisibleToasts]);
+  return /* @__PURE__ */ jsx(
+    Ie,
+    {
+      gutter: gap || numberFromDimension(theme.space.x1),
+      toastOptions: {
+        custom: { ...toastOptions }
+      },
+      position,
+      reverseOrder,
+      containerClassName,
+      ...props
+    }
+  );
+};
+export {
+  ToastContainer as default
+};
+//# sourceMappingURL=ToastContainer.js.map

package/dist/esm/ToastContainer/ToastContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToastContainer.js","sources":["../../../src/ToastContainer/ToastContainer.tsx"],"sourcesContent":["import React, { useEffect } from \"react\";\nimport { toast as _toast, Toaster, ToasterProps, useToasterStore } from \"react-hot-toast\";\nimport { useTheme } from \"styled-components\";\nimport { TOAST_SHOW_DURATION } from \"../Toast/Toast\";\nimport numberFromDimension from \"../utils/numberFromDimension\";\nimport { ToastOptions } from \"./ToastFunction\";\n\ntype ToastContainerProps = {\n  gap?: number;\n  maxVisibleToasts?: number;\n  toastOptions?: ToastOptions;\n} & Omit<ToasterProps, \"gutter\" | \"toastOptions\">;\n\nconst ToastContainer = ({\n  gap,\n  position = \"bottom-center\",\n  reverseOrder = false,\n  containerClassName = \"nds-toast-container\",\n  toastOptions = { duration: TOAST_SHOW_DURATION },\n  maxVisibleToasts = 8,\n  ...props\n}: ToastContainerProps) => {\n  const theme = useTheme();\n  const { toasts } = useToasterStore();\n\n  useEffect(() => {\n    toasts\n      .filter((t) => t.visible)\n      .filter((_, i) => i >= maxVisibleToasts)\n      .forEach((t) => _toast.dismiss(t.id));\n  }, [toasts, maxVisibleToasts]);\n\n  return (\n    <Toaster\n      gutter={gap || numberFromDimension(theme.space.x1)}\n      toastOptions={{\n        custom: { ...toastOptions },\n      }}\n      position={position}\n      reverseOrder={reverseOrder}\n      containerClassName={containerClassName}\n      {...props}\n    />\n  );\n};\n\nexport default ToastContainer;\n"],"names":["useToasterStore","_toast","Toaster"],"mappings":";;;;;;AAaA,MAAM,iBAAiB,CAAC;AAAA,EACtB;AAAA,EACA,WAAW;AAAA,EACX,eAAe;AAAA,EACf,qBAAqB;AAAA,EACrB,eAAe,EAAE,UAAU,oBAAA;AAAA,EAC3B,mBAAmB;AAAA,EACnB,GAAG;AACL,MAA2B;AACzB,QAAM,QAAQ,SAAA;AACd,QAAM,EAAE,OAAA,IAAWA,EAAA;AAEnB,YAAU,MAAM;AACd,WACG,OAAO,CAAC,MAAM,EAAE,OAAO,EACvB,OAAO,CAAC,GAAG,MAAM,KAAK,gBAAgB,EACtC,QAAQ,CAAC,MAAMC,EAAO,QAAQ,EAAE,EAAE,CAAC;AAAA,EACxC,GAAG,CAAC,QAAQ,gBAAgB,CAAC;AAE7B,SACE;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,QAAQ,OAAO,oBAAoB,MAAM,MAAM,EAAE;AAAA,MACjD,cAAc;AAAA,QACZ,QAAQ,EAAE,GAAG,aAAA;AAAA,MAAa;AAAA,MAE5B;AAAA,MACA;AAAA,MACA;AAAA,MACC,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV;"}

package/dist/esm/ToastContainer/ToastFunction.js

@@ -0,0 +1,34 @@
+import { jsx } from "react/jsx-runtime";
+import { toast as n } from "../node_modules/.pnpm/react-hot-toast@2.4.1_csstype@3.2.3_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/react-hot-toast/dist/index.js";
+import { toastAnimationConfig } from "../Toast/Toast.js";
+import { AnimatePresence } from "../node_modules/.pnpm/framer-motion@12.35.0_@emotion_is-prop-valid@1.4.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/framer-motion/dist/es/components/AnimatePresence/index.js";
+import { AnimatedBox } from "../Box/Box.js";
+import Alert from "../Alert/Alert.js";
+function CustomToast({ isVisible, id, children, ...props }) {
+  const handleClose = () => {
+    n.dismiss(id);
+  };
+  return /* @__PURE__ */ jsx(AnimatePresence, { children: isVisible && /* @__PURE__ */ jsx(AnimatedBox, { role: "alert", ...toastAnimationConfig, children: /* @__PURE__ */ jsx(Alert, { controlled: true, onClose: handleClose, ...props, children }) }, "notification") });
+}
+const toast = {
+  danger: (children, props = {}, options = {}) => n.custom(
+    (t) => /* @__PURE__ */ jsx(CustomToast, { id: t.id, isVisible: t.visible, type: "danger", ...props, children }),
+    { duration: props.isCloseable ? Infinity : options.duration, ...options }
+  ),
+  informative: (children, props = {}, options = {}) => n.custom(
+    (t) => /* @__PURE__ */ jsx(CustomToast, { id: t.id, isVisible: t.visible, type: "informative", ...props, children }),
+    { duration: props.isCloseable ? Infinity : options.duration, ...options }
+  ),
+  success: (children, props = {}, options = {}) => n.custom(
+    (t) => /* @__PURE__ */ jsx(CustomToast, { id: t.id, isVisible: t.visible, type: "success", ...props, children }),
+    { duration: props.isCloseable ? Infinity : options.duration, ...options }
+  ),
+  warning: (children, props = {}, options = {}) => n.custom(
+    (t) => /* @__PURE__ */ jsx(CustomToast, { id: t.id, isVisible: t.visible, type: "warning", ...props, children }),
+    { duration: props.isCloseable ? Infinity : options.duration, ...options }
+  )
+};
+export {
+  toast as default
+};
+//# sourceMappingURL=ToastFunction.js.map

package/dist/esm/ToastContainer/ToastFunction.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToastFunction.js","sources":["../../../src/ToastContainer/ToastFunction.tsx"],"sourcesContent":["import React from \"react\";\nimport { AnimatePresence } from \"framer-motion\";\nimport { toast as _toast, ToastOptions as ReactHotToastOptions } from \"react-hot-toast\";\nimport { Alert } from \"../Alert\";\nimport { AlertProps as OriginalAlertProps } from \"../Alert/Alert\";\nimport { AnimatedBox } from \"../Box\";\nimport { toastAnimationConfig } from \"../Toast/Toast\";\n\n// We remove the \"as\" prop because the Alert is wrapped with a styled component\n// resulting in a TypeScript overload error.\ntype AlertProps = Omit<OriginalAlertProps, \"as\">;\n\ntype ToastFunction = (children: React.ReactNode, props?: AlertProps, options?: ToastOptions) => void;\n\ntype ToastFunctions = {\n  danger: ToastFunction;\n  informative: ToastFunction;\n  success: ToastFunction;\n  warning: ToastFunction;\n};\n\ntype CustomToastProps = { id: string; isVisible: boolean } & AlertProps;\n\nfunction CustomToast({ isVisible, id, children, ...props }: CustomToastProps) {\n  const handleClose = () => {\n    _toast.dismiss(id);\n  };\n\n  return (\n    <AnimatePresence>\n      {isVisible && (\n        <AnimatedBox key=\"notification\" role=\"alert\" {...toastAnimationConfig}>\n          <Alert controlled onClose={handleClose} {...props}>\n            {children}\n          </Alert>\n        </AnimatedBox>\n      )}\n    </AnimatePresence>\n  );\n}\n\nconst toast: ToastFunctions = {\n  danger: (children, props = {}, options = {}) =>\n    _toast.custom(\n      (t) => (\n        <CustomToast id={t.id} isVisible={t.visible} type=\"danger\" {...props}>\n          {children}\n        </CustomToast>\n      ),\n      { duration: props.isCloseable ? Infinity : options.duration, ...options }\n    ),\n\n  informative: (children, props = {}, options = {}) =>\n    _toast.custom(\n      (t) => (\n        <CustomToast id={t.id} isVisible={t.visible} type=\"informative\" {...props}>\n          {children}\n        </CustomToast>\n      ),\n      { duration: props.isCloseable ? Infinity : options.duration, ...options }\n    ),\n\n  success: (children, props = {}, options = {}) =>\n    _toast.custom(\n      (t) => (\n        <CustomToast id={t.id} isVisible={t.visible} type=\"success\" {...props}>\n          {children}\n        </CustomToast>\n      ),\n      { duration: props.isCloseable ? Infinity : options.duration, ...options }\n    ),\n\n  warning: (children, props = {}, options = {}) =>\n    _toast.custom(\n      (t) => (\n        <CustomToast id={t.id} isVisible={t.visible} type=\"warning\" {...props}>\n          {children}\n        </CustomToast>\n      ),\n      { duration: props.isCloseable ? Infinity : options.duration, ...options }\n    ),\n};\n\nexport type ToastOptions = Omit<ReactHotToastOptions, \"icon\" | \"iconTheme\">;\n\nexport default toast;\n"],"names":["_toast"],"mappings":";;;;;;AAuBA,SAAS,YAAY,EAAE,WAAW,IAAI,UAAU,GAAG,SAA2B;AAC5E,QAAM,cAAc,MAAM;AACxBA,MAAO,QAAQ,EAAE;AAAA,EACnB;AAEA,SACE,oBAAC,mBACE,UAAA,aACC,oBAAC,eAA+B,MAAK,SAAS,GAAG,sBAC/C,UAAA,oBAAC,SAAM,YAAU,MAAC,SAAS,aAAc,GAAG,OACzC,SAAA,CACH,KAHe,cAIjB,EAAA,CAEJ;AAEJ;AAEA,MAAM,QAAwB;AAAA,EAC5B,QAAQ,CAAC,UAAU,QAAQ,CAAA,GAAI,UAAU,CAAA,MACvCA,EAAO;AAAA,IACL,CAAC,MACC,oBAAC,aAAA,EAAY,IAAI,EAAE,IAAI,WAAW,EAAE,SAAS,MAAK,UAAU,GAAG,OAC5D,UACH;AAAA,IAEF,EAAE,UAAU,MAAM,cAAc,WAAW,QAAQ,UAAU,GAAG,QAAA;AAAA,EAAQ;AAAA,EAG5E,aAAa,CAAC,UAAU,QAAQ,CAAA,GAAI,UAAU,CAAA,MAC5CA,EAAO;AAAA,IACL,CAAC,MACC,oBAAC,aAAA,EAAY,IAAI,EAAE,IAAI,WAAW,EAAE,SAAS,MAAK,eAAe,GAAG,OACjE,UACH;AAAA,IAEF,EAAE,UAAU,MAAM,cAAc,WAAW,QAAQ,UAAU,GAAG,QAAA;AAAA,EAAQ;AAAA,EAG5E,SAAS,CAAC,UAAU,QAAQ,CAAA,GAAI,UAAU,CAAA,MACxCA,EAAO;AAAA,IACL,CAAC,MACC,oBAAC,aAAA,EAAY,IAAI,EAAE,IAAI,WAAW,EAAE,SAAS,MAAK,WAAW,GAAG,OAC7D,UACH;AAAA,IAEF,EAAE,UAAU,MAAM,cAAc,WAAW,QAAQ,UAAU,GAAG,QAAA;AAAA,EAAQ;AAAA,EAG5E,SAAS,CAAC,UAAU,QAAQ,CAAA,GAAI,UAAU,CAAA,MACxCA,EAAO;AAAA,IACL,CAAC,MACC,oBAAC,aAAA,EAAY,IAAI,EAAE,IAAI,WAAW,EAAE,SAAS,MAAK,WAAW,GAAG,OAC7D,UACH;AAAA,IAEF,EAAE,UAAU,MAAM,cAAc,WAAW,QAAQ,UAAU,GAAG,QAAA;AAAA,EAAQ;AAE9E;"}

package/dist/esm/Toggle/Toggle.js

@@ -0,0 +1,99 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import React__default, { useEffect, useCallback } from "react";
+import propTypes from "../node_modules/.pnpm/@styled-system_prop-types@5.1.5_styled-system@5.1.5/node_modules/@styled-system/prop-types/dist/index.esm.js";
+import { useComponentVariant } from "../NDSProvider/ComponentVariantContext.js";
+import { getSubset, omitSubset } from "../utils/subset.js";
+import ToggleButton from "./ToggleButton.js";
+import Field from "../Form/Field.js";
+import FieldLabel from "../FieldLabel/FieldLabel.js";
+import Flex from "../Flex/Flex.js";
+import Text from "../Type/Text.js";
+const Toggle = React__default.forwardRef(
+  ({
+    checked,
+    variant,
+    className,
+    labelText,
+    requirementText,
+    helpText,
+    hint,
+    disabled,
+    toggled,
+    onChange,
+    onText,
+    offText,
+    required,
+    error,
+    id,
+    defaultToggled,
+    onClick,
+    "data-testid": dataTestId,
+    ...props
+  }, ref) => {
+    const componentVariant = useComponentVariant(variant);
+    const spaceProps = getSubset(props, propTypes.space);
+    const restProps = omitSubset(props, propTypes.space);
+    useEffect(() => {
+      if (defaultToggled) {
+        console.warn("defaultToggled is deprecated. Use checked instead.");
+      }
+      if (checked) {
+        console.warn("checked is deprecated. Use checked instead.");
+      }
+      if (onClick) {
+        console.warn("onClick is deprecated. Use onChange instead.");
+      }
+    }, []);
+    const _checked = checked ?? defaultToggled ?? toggled;
+    const _onChange = useCallback(
+      (e) => {
+        if (onClick) {
+          onClick(e);
+        }
+        if (onChange) {
+          onChange(e);
+        }
+      },
+      [onClick, onChange]
+    );
+    useEffect(() => {
+      if (_checked !== void 0 && !(onChange || onClick)) {
+        console.warn("onChange or onClick is required when checked is set.");
+      }
+    }, []);
+    return /* @__PURE__ */ jsx(Field, { className, alignItems: "flex-start", py: "half", ...spaceProps, children: /* @__PURE__ */ jsx(
+      FieldLabel,
+      {
+        htmlFor: id,
+        labelText,
+        requirementText,
+        helpText,
+        hint,
+        disabled,
+        variant: componentVariant,
+        "data-testid": dataTestId,
+        children: /* @__PURE__ */ jsxs(Flex, { flexDirection: "row", alignItems: "center", children: [
+          /* @__PURE__ */ jsx(
+            ToggleButton,
+            {
+              id,
+              checked: _checked,
+              onChange: _onChange,
+              disabled,
+              required,
+              "aria-required": required,
+              "aria-invalid": error,
+              ...restProps,
+              ref
+            }
+          ),
+          (onText || offText) && /* @__PURE__ */ jsx(Text, { disabled, mb: "none", ml: "x1", "aria-hidden": true, children: _checked ? onText : offText })
+        ] })
+      }
+    ) });
+  }
+);
+export {
+  Toggle as default
+};
+//# sourceMappingURL=Toggle.js.map

package/dist/esm/Toggle/Toggle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toggle.js","sources":["../../../src/Toggle/Toggle.tsx"],"sourcesContent":["import React, { useCallback, useEffect } from \"react\";\nimport { SpaceProps } from \"styled-system\";\nimport propTypes from \"@styled-system/prop-types\";\nimport { FieldLabel } from \"../FieldLabel\";\nimport { Field } from \"../Form\";\nimport { Text } from \"../Type\";\nimport { ComponentVariant, useComponentVariant } from \"../NDSProvider/ComponentVariantContext\";\nimport { DefaultNDSThemeType } from \"../theme\";\nimport { getSubset, omitSubset } from \"../utils/subset\";\nimport { Flex } from \"../Flex\";\nimport ToggleButton from \"./ToggleButton\";\n\ninterface ToggleProps extends SpaceProps {\n  /**\n   * @see FieldLabel\n   */\n  hint?: string;\n  /**\n   * @note This prop is required when checked is set. It will not be optional in\n   * a future version.\n   */\n  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;\n  variant?: ComponentVariant;\n  /**\n   * Controls whether the toggle is checked or not.\n   * @note This prop will be required in a future version.\n   */\n  checked?: boolean;\n  /**\n   * @deprecated use checked instead\n   */\n  toggled?: boolean;\n  disabled?: boolean;\n  onText?: string;\n  offText?: string;\n  id?: string;\n  className?: string;\n  required?: boolean;\n  /**\n   * @see FieldLabel\n   */\n  helpText?: string;\n  /**\n   * @see FieldLabel\n   */\n  labelText?: string;\n  requirementText?: string;\n  error?: boolean;\n  ref?: React.Ref<HTMLInputElement>;\n  name?: string;\n  theme?: DefaultNDSThemeType;\n  \"data-testid\"?: string;\n  /**\n   * @deprecated use onChange instead\n   */\n  onClick?: (e: React.MouseEvent<HTMLInputElement>) => void;\n  /**\n   * @deprecated set the default state through the checked prop instead\n   */\n  defaultToggled?: boolean;\n}\n\nconst Toggle = React.forwardRef<HTMLInputElement, ToggleProps>(\n  (\n    {\n      checked,\n      variant,\n      className,\n      labelText,\n      requirementText,\n      helpText,\n      hint,\n      disabled,\n      toggled,\n      onChange,\n      onText,\n      offText,\n      required,\n      error,\n      id,\n      defaultToggled,\n      onClick,\n      \"data-testid\": dataTestId,\n      ...props\n    },\n    ref\n  ) => {\n    const componentVariant = useComponentVariant(variant);\n    const spaceProps = getSubset(props, propTypes.space);\n    const restProps = omitSubset(props, propTypes.space);\n\n    useEffect(() => {\n      if (defaultToggled) {\n        console.warn(\"defaultToggled is deprecated. Use checked instead.\");\n      }\n      if (checked) {\n        console.warn(\"checked is deprecated. Use checked instead.\");\n      }\n      if (onClick) {\n        console.warn(\"onClick is deprecated. Use onChange instead.\");\n      }\n    }, []);\n\n    const _checked = checked ?? defaultToggled ?? toggled;\n\n    const _onChange = useCallback(\n      (e: React.ChangeEvent<HTMLInputElement>) => {\n        if (onClick) {\n          onClick(e as unknown as React.MouseEvent<HTMLInputElement>);\n        }\n        if (onChange) {\n          onChange(e);\n        }\n      },\n      [onClick, onChange]\n    );\n\n    useEffect(() => {\n      if (_checked !== undefined && !(onChange || onClick)) {\n        console.warn(\"onChange or onClick is required when checked is set.\");\n      }\n    }, []);\n\n    return (\n      <Field className={className} alignItems=\"flex-start\" py=\"half\" {...spaceProps}>\n        <FieldLabel\n          htmlFor={id}\n          labelText={labelText}\n          requirementText={requirementText}\n          helpText={helpText}\n          hint={hint}\n          disabled={disabled}\n          variant={componentVariant}\n          data-testid={dataTestId}\n        >\n          <Flex flexDirection=\"row\" alignItems=\"center\">\n            <ToggleButton\n              id={id}\n              checked={_checked}\n              onChange={_onChange}\n              disabled={disabled}\n              required={required}\n              aria-required={required}\n              aria-invalid={error}\n              {...restProps}\n              ref={ref}\n            />\n            {(onText || offText) && (\n              <Text disabled={disabled} mb=\"none\" ml=\"x1\" aria-hidden>\n                {_checked ? onText : offText}\n              </Text>\n            )}\n          </Flex>\n        </FieldLabel>\n      </Field>\n    );\n  }\n);\n\nexport default Toggle;\n"],"names":["React"],"mappings":";;;;;;;;;;AA8DA,MAAM,SAASA,eAAM;AAAA,EACnB,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAe;AAAA,IACf,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,mBAAmB,oBAAoB,OAAO;AACpD,UAAM,aAAa,UAAU,OAAO,UAAU,KAAK;AACnD,UAAM,YAAY,WAAW,OAAO,UAAU,KAAK;AAEnD,cAAU,MAAM;AACd,UAAI,gBAAgB;AAClB,gBAAQ,KAAK,oDAAoD;AAAA,MACnE;AACA,UAAI,SAAS;AACX,gBAAQ,KAAK,6CAA6C;AAAA,MAC5D;AACA,UAAI,SAAS;AACX,gBAAQ,KAAK,8CAA8C;AAAA,MAC7D;AAAA,IACF,GAAG,CAAA,CAAE;AAEL,UAAM,WAAW,WAAW,kBAAkB;AAE9C,UAAM,YAAY;AAAA,MAChB,CAAC,MAA2C;AAC1C,YAAI,SAAS;AACX,kBAAQ,CAAkD;AAAA,QAC5D;AACA,YAAI,UAAU;AACZ,mBAAS,CAAC;AAAA,QACZ;AAAA,MACF;AAAA,MACA,CAAC,SAAS,QAAQ;AAAA,IAAA;AAGpB,cAAU,MAAM;AACd,UAAI,aAAa,UAAa,EAAE,YAAY,UAAU;AACpD,gBAAQ,KAAK,sDAAsD;AAAA,MACrE;AAAA,IACF,GAAG,CAAA,CAAE;AAEL,WACE,oBAAC,SAAM,WAAsB,YAAW,cAAa,IAAG,QAAQ,GAAG,YACjE,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,SAAS;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,SAAS;AAAA,QACT,eAAa;AAAA,QAEb,UAAA,qBAAC,MAAA,EAAK,eAAc,OAAM,YAAW,UACnC,UAAA;AAAA,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC;AAAA,cACA,SAAS;AAAA,cACT,UAAU;AAAA,cACV;AAAA,cACA;AAAA,cACA,iBAAe;AAAA,cACf,gBAAc;AAAA,cACb,GAAG;AAAA,cACJ;AAAA,YAAA;AAAA,UAAA;AAAA,WAEA,UAAU,YACV,oBAAC,MAAA,EAAK,UAAoB,IAAG,QAAO,IAAG,MAAK,eAAW,MACpD,UAAA,WAAW,SAAS,QAAA,CACvB;AAAA,QAAA,EAAA,CAEJ;AAAA,MAAA;AAAA,IAAA,GAEJ;AAAA,EAEJ;AACF;"}

package/dist/esm/Toggle/ToggleButton.js

@@ -0,0 +1,101 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import React__default from "react";
+import { styled, useTheme } from "styled-components";
+import { useComponentVariant } from "../NDSProvider/ComponentVariantContext.js";
+import { AnimatedBox } from "../Box/Box.js";
+import { motion } from "../node_modules/.pnpm/framer-motion@12.35.0_@emotion_is-prop-valid@1.4.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/framer-motion/dist/es/render/components/motion/proxy.js";
+const getSwitchBackground = (checked) => checked ? "darkBlue" : "darkGrey";
+const animationConfig = {
+  transition: {
+    type: "spring",
+    stiffness: 850,
+    damping: 37,
+    duration: 0.1
+  },
+  scale: 1.08
+};
+function Switch({ children, disabled, checked }) {
+  const componentVariant = useComponentVariant();
+  return /* @__PURE__ */ jsx(
+    AnimatedBox,
+    {
+      marginTop: componentVariant === "touch" ? "x0_25" : "none",
+      position: "relative",
+      flexShrink: 0,
+      height: "24px",
+      width: "48px",
+      bg: disabled ? "grey" : getSwitchBackground(checked),
+      borderRadius: "20px",
+      padding: "2px",
+      boxShadow: "small",
+      animate: checked ? "toggled" : "initial",
+      whileHover: "active",
+      whileFocus: "active",
+      children
+    }
+  );
+}
+function Slider({ disabled, children }) {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsx(
+    motion.div,
+    {
+      className: "slider",
+      initial: false,
+      variants: {
+        active: {
+          boxShadow: disabled ? void 0 : theme.shadows.focus,
+          scale: disabled ? void 0 : animationConfig.scale
+        },
+        toggled: {
+          marginLeft: "24px"
+        },
+        initial: {
+          marginLeft: theme.space.none
+        }
+      },
+      transition: animationConfig.transition,
+      style: {
+        height: "20px",
+        width: "20px",
+        borderRadius: "50%",
+        backgroundColor: disabled ? theme.colors.whiteGrey : theme.colors.white
+      },
+      children
+    }
+  );
+}
+const ToggleInput = styled.input(({ disabled, theme }) => ({
+  width: "1px",
+  height: "1px",
+  opacity: 0,
+  position: "absolute",
+  [`&:checked + .slider}`]: {
+    backgroundColor: disabled ? theme.colors.grey : theme.colors.darkBlue
+  },
+  [`&:focus + .slider`]: {
+    transform: disabled ? null : `scale(${animationConfig.scale})`,
+    boxShadow: disabled ? void 0 : theme.shadows.focus
+  }
+}));
+const ToggleButton = React__default.forwardRef(({ disabled, checked, ...props }, ref) => {
+  return /* @__PURE__ */ jsxs(Switch, { disabled, checked, children: [
+    /* @__PURE__ */ jsx(
+      ToggleInput,
+      {
+        type: "checkbox",
+        role: "switch",
+        checked,
+        ref,
+        value: checked ? "on" : "off",
+        disabled,
+        ...props
+      }
+    ),
+    /* @__PURE__ */ jsx(Slider, { disabled })
+  ] });
+});
+export {
+  ToggleButton as default
+};
+//# sourceMappingURL=ToggleButton.js.map

package/dist/esm/Toggle/ToggleButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleButton.js","sources":["../../../src/Toggle/ToggleButton.tsx"],"sourcesContent":["import React from \"react\";\nimport { motion } from \"framer-motion\";\nimport type { Transition } from \"framer-motion\";\nimport { styled, useTheme } from \"styled-components\";\nimport { DefaultNDSThemeType } from \"../theme\";\nimport { AnimatedBox } from \"../Box\";\nimport { useComponentVariant } from \"../NDSProvider/ComponentVariantContext\";\n\ninterface SwitchProps {\n  children?: React.ReactNode;\n  disabled?: boolean;\n  checked?: boolean;\n}\n\ninterface SliderProps {\n  disabled?: boolean;\n  children?: React.ReactNode;\n}\n\ninterface ToggleButtonProps extends React.ComponentPropsWithRef<\"input\"> {\n  disabled?: boolean;\n  name?: string;\n  theme?: DefaultNDSThemeType;\n}\n\ninterface AnimationConfig {\n  transition: Transition;\n  scale: string | number;\n}\n\nconst getSwitchBackground = (checked: boolean) => (checked ? \"darkBlue\" : \"darkGrey\");\n\nconst animationConfig: AnimationConfig = {\n  transition: {\n    type: \"spring\",\n    stiffness: 850,\n    damping: 37,\n    duration: 0.1,\n  },\n  scale: 1.08,\n};\n\nfunction Switch({ children, disabled, checked }: SwitchProps) {\n  const componentVariant = useComponentVariant();\n\n  return (\n    <AnimatedBox\n      marginTop={componentVariant === \"touch\" ? \"x0_25\" : \"none\"}\n      position=\"relative\"\n      flexShrink={0}\n      height=\"24px\"\n      width=\"48px\"\n      bg={disabled ? \"grey\" : getSwitchBackground(checked)}\n      borderRadius=\"20px\"\n      padding=\"2px\"\n      boxShadow=\"small\"\n      animate={checked ? \"toggled\" : \"initial\"}\n      whileHover=\"active\"\n      whileFocus=\"active\"\n    >\n      {children}\n    </AnimatedBox>\n  );\n}\n\nfunction Slider({ disabled, children }: SliderProps) {\n  const theme = useTheme();\n\n  return (\n    <motion.div\n      className=\"slider\"\n      initial={false}\n      variants={{\n        active: {\n          boxShadow: disabled ? undefined : theme.shadows.focus,\n          scale: disabled ? undefined : animationConfig.scale,\n        },\n        toggled: {\n          marginLeft: \"24px\",\n        },\n        initial: {\n          marginLeft: theme.space.none,\n        },\n      }}\n      transition={animationConfig.transition}\n      style={{\n        height: \"20px\",\n        width: \"20px\",\n        borderRadius: \"50%\",\n        backgroundColor: disabled ? theme.colors.whiteGrey : theme.colors.white,\n      }}\n    >\n      {children}\n    </motion.div>\n  );\n}\n\nconst ToggleInput = styled.input<ToggleButtonProps>(({ disabled, theme }) => ({\n  width: \"1px\",\n  height: \"1px\",\n  opacity: 0,\n  position: \"absolute\",\n  [`&:checked + .slider}`]: {\n    backgroundColor: disabled ? theme.colors.grey : theme.colors.darkBlue,\n  },\n  [`&:focus + .slider`]: {\n    transform: disabled ? null : `scale(${animationConfig.scale})`,\n    boxShadow: disabled ? undefined : theme.shadows.focus,\n  },\n}));\n\nconst ToggleButton = React.forwardRef<HTMLInputElement, ToggleButtonProps>(({ disabled, checked, ...props }, ref) => {\n  return (\n    <Switch disabled={disabled} checked={checked}>\n      <ToggleInput\n        type=\"checkbox\"\n        role=\"switch\"\n        checked={checked}\n        ref={ref}\n        value={checked ? \"on\" : \"off\"}\n        disabled={disabled}\n        {...props}\n      />\n      <Slider disabled={disabled} />\n    </Switch>\n  );\n});\n\nexport default ToggleButton;\n"],"names":["React"],"mappings":";;;;;;AA8BA,MAAM,sBAAsB,CAAC,YAAsB,UAAU,aAAa;AAE1E,MAAM,kBAAmC;AAAA,EACvC,YAAY;AAAA,IACV,MAAM;AAAA,IACN,WAAW;AAAA,IACX,SAAS;AAAA,IACT,UAAU;AAAA,EAAA;AAAA,EAEZ,OAAO;AACT;AAEA,SAAS,OAAO,EAAE,UAAU,UAAU,WAAwB;AAC5D,QAAM,mBAAmB,oBAAA;AAEzB,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,qBAAqB,UAAU,UAAU;AAAA,MACpD,UAAS;AAAA,MACT,YAAY;AAAA,MACZ,QAAO;AAAA,MACP,OAAM;AAAA,MACN,IAAI,WAAW,SAAS,oBAAoB,OAAO;AAAA,MACnD,cAAa;AAAA,MACb,SAAQ;AAAA,MACR,WAAU;AAAA,MACV,SAAS,UAAU,YAAY;AAAA,MAC/B,YAAW;AAAA,MACX,YAAW;AAAA,MAEV;AAAA,IAAA;AAAA,EAAA;AAGP;AAEA,SAAS,OAAO,EAAE,UAAU,YAAyB;AACnD,QAAM,QAAQ,SAAA;AAEd,SACE;AAAA,IAAC,OAAO;AAAA,IAAP;AAAA,MACC,WAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,QACR,QAAQ;AAAA,UACN,WAAW,WAAW,SAAY,MAAM,QAAQ;AAAA,UAChD,OAAO,WAAW,SAAY,gBAAgB;AAAA,QAAA;AAAA,QAEhD,SAAS;AAAA,UACP,YAAY;AAAA,QAAA;AAAA,QAEd,SAAS;AAAA,UACP,YAAY,MAAM,MAAM;AAAA,QAAA;AAAA,MAC1B;AAAA,MAEF,YAAY,gBAAgB;AAAA,MAC5B,OAAO;AAAA,QACL,QAAQ;AAAA,QACR,OAAO;AAAA,QACP,cAAc;AAAA,QACd,iBAAiB,WAAW,MAAM,OAAO,YAAY,MAAM,OAAO;AAAA,MAAA;AAAA,MAGnE;AAAA,IAAA;AAAA,EAAA;AAGP;AAEA,MAAM,cAAc,OAAO,MAAyB,CAAC,EAAE,UAAU,aAAa;AAAA,EAC5E,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,UAAU;AAAA,EACV,CAAC,sBAAsB,GAAG;AAAA,IACxB,iBAAiB,WAAW,MAAM,OAAO,OAAO,MAAM,OAAO;AAAA,EAAA;AAAA,EAE/D,CAAC,mBAAmB,GAAG;AAAA,IACrB,WAAW,WAAW,OAAO,SAAS,gBAAgB,KAAK;AAAA,IAC3D,WAAW,WAAW,SAAY,MAAM,QAAQ;AAAA,EAAA;AAEpD,EAAE;AAEF,MAAM,eAAeA,eAAM,WAAgD,CAAC,EAAE,UAAU,SAAS,GAAG,MAAA,GAAS,QAAQ;AACnH,SACE,qBAAC,QAAA,EAAO,UAAoB,SAC1B,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,MAAK;AAAA,QACL;AAAA,QACA;AAAA,QACA,OAAO,UAAU,OAAO;AAAA,QACxB;AAAA,QACC,GAAG;AAAA,MAAA;AAAA,IAAA;AAAA,IAEN,oBAAC,UAAO,SAAA,CAAoB;AAAA,EAAA,GAC9B;AAEJ,CAAC;"}