@opengovsg/oui 0.0.29 → 0.0.31

package/dist/cjs/avatar/avatar-context.cjs

@@ -0,0 +1,12 @@
+"use strict";
+'use strict';
+
+var context = require('../system/react-utils/context.cjs');
+
+const [AvatarContext, useAvatarContext] = context.createContext({
+  name: "AvatarContext",
+  strict: true
+});
+
+exports.AvatarContext = AvatarContext;
+exports.useAvatarContext = useAvatarContext;

package/dist/cjs/avatar/avatar-group-context.cjs

@@ -0,0 +1,88 @@
+"use strict";
+'use strict';
+
+var $670gB$react = require('react');
+var ouiTheme = require('@opengovsg/oui-theme');
+var children = require('../system/react-utils/children.cjs');
+var context = require('../system/react-utils/context.cjs');
+var refs = require('../system/react-utils/refs.cjs');
+
+const [AvatarGroupProvider, useAvatarGroupContext] = context.createContext({
+  name: "AvatarGroupContext",
+  strict: false
+});
+function useAvatarGroup(props = {}) {
+  const {
+    as,
+    ref,
+    max = 5,
+    total,
+    size,
+    color,
+    prominence,
+    radius,
+    children: children$1,
+    renderCount,
+    className,
+    classNames,
+    countProps,
+    ...otherProps
+  } = props;
+  const domRef = refs.useDomRef(ref);
+  const Component = as || "div";
+  const context = $670gB$react.useMemo(
+    () => ({
+      size,
+      color,
+      radius,
+      prominence
+    }),
+    [size, color, radius, prominence]
+  );
+  const slots = $670gB$react.useMemo(
+    () => ouiTheme.avatarGroupStyles({ className: className ?? classNames?.base }),
+    [className, classNames?.base]
+  );
+  const validChildren = children.getValidChildren(children$1);
+  const childrenWithinMax = max ? validChildren.slice(0, max) : validChildren;
+  const remainingCount = total ? total : max != null ? validChildren.length - max : -1;
+  const clones = childrenWithinMax.map((child, index) => {
+    return $670gB$react.cloneElement(child, {
+      // @ts-expect-error: CSS variable is not recognized as a valid style property
+      style: {
+        "--avatar-zindex": childrenWithinMax.length - index
+      }
+    });
+  });
+  const getAvatarGroupProps = () => {
+    return {
+      ref: domRef,
+      className: slots.base({
+        class: ouiTheme.cn(classNames?.base, className)
+      }),
+      role: "group",
+      ...otherProps
+    };
+  };
+  const getAvatarGroupCountProps = () => {
+    return {
+      className: slots.counter({
+        class: classNames?.counter
+      }),
+      ...countProps
+    };
+  };
+  return {
+    Component,
+    context,
+    remainingCount,
+    clones,
+    renderCount,
+    getAvatarGroupProps,
+    getAvatarGroupCountProps
+  };
+}
+
+exports.AvatarGroupProvider = AvatarGroupProvider;
+exports.useAvatarGroup = useAvatarGroup;
+exports.useAvatarGroupContext = useAvatarGroupContext;

package/dist/cjs/avatar/avatar-group.cjs

@@ -0,0 +1,60 @@
+"use strict";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var $670gB$react = require('react');
+var utils = require('../system/utils.cjs');
+var avatar = require('./avatar.cjs');
+var avatarGroupContext = require('./avatar-group-context.cjs');
+
+const AvatarGroup = utils.forwardRef((props, ref) => {
+  const {
+    Component,
+    clones,
+    context,
+    remainingCount,
+    getAvatarGroupCountProps,
+    getAvatarGroupProps,
+    renderCount
+  } = avatarGroupContext.useAvatarGroup({
+    ...props,
+    ref
+  });
+  const renderedCount = $670gB$react.useMemo(() => {
+    if (remainingCount <= 0) return null;
+    if (renderCount) {
+      return renderCount(remainingCount);
+    }
+    const countAvatarVariantProps = {
+      prominence: "subtle",
+      color: "primary"
+    };
+    if (context.prominence === "subtle") {
+      countAvatarVariantProps.color = "white";
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      avatar.AvatarRoot,
+      {
+        ...countAvatarVariantProps,
+        ...getAvatarGroupCountProps(),
+        name: `+${remainingCount}`,
+        children: /* @__PURE__ */ jsxRuntime.jsxs(avatar.AvatarFallback, { children: [
+          "+",
+          remainingCount
+        ] })
+      }
+    );
+  }, [
+    context.prominence,
+    getAvatarGroupCountProps,
+    remainingCount,
+    renderCount
+  ]);
+  return /* @__PURE__ */ jsxRuntime.jsx(Component, { ...getAvatarGroupProps(), children: /* @__PURE__ */ jsxRuntime.jsxs(avatarGroupContext.AvatarGroupProvider, { value: context, children: [
+    clones,
+    renderedCount
+  ] }) });
+});
+AvatarGroup.displayName = "AvatarGroup";
+
+exports.AvatarGroup = AvatarGroup;

package/dist/cjs/avatar/avatar.cjs

@@ -0,0 +1,132 @@
+"use strict";
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var $670gB$react = require('react');
+var utils$2 = require('@react-aria/utils');
+var ouiTheme = require('@opengovsg/oui-theme');
+var utils = require('../system/utils.cjs');
+var avatarContext = require('./avatar-context.cjs');
+var avatarGroupContext = require('./avatar-group-context.cjs');
+var useImgLoadingStatus = require('./hooks/use-img-loading-status.cjs');
+var utils$1 = require('./utils.cjs');
+var refs = require('../system/react-utils/refs.cjs');
+var user = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/user.cjs');
+
+const AvatarRoot = utils.forwardRef(
+  (originalProps, ref) => {
+    const groupContext = avatarGroupContext.useAvatarGroupContext();
+    const [
+      {
+        name,
+        getInitials = utils$1.getInitialsFromText,
+        classNames,
+        className,
+        children,
+        as,
+        ...props
+      },
+      {
+        color = groupContext?.color,
+        prominence = groupContext?.prominence,
+        size = groupContext?.size,
+        radius = groupContext?.radius,
+        ...variantProps
+      }
+    ] = utils.mapPropsVariants(originalProps, ouiTheme.avatarStyles.variantKeys);
+    const isInGroup = !!groupContext;
+    const domRef = refs.useDomRef(ref);
+    const slots = ouiTheme.avatarStyles({
+      color,
+      prominence,
+      size,
+      radius,
+      isInGroup,
+      ...variantProps
+    });
+    const [imageLoadingStatus, setImageLoadingStatus] = $670gB$react.useState("idle");
+    const Component = as || "span";
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      avatarContext.AvatarContext,
+      {
+        value: {
+          imageLoadingStatus,
+          setImageLoadingStatus,
+          slots,
+          classNames,
+          getInitials,
+          name
+        },
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          Component,
+          {
+            ref: domRef,
+            ...props,
+            className: slots.base({ className: className ?? classNames?.base }),
+            children
+          }
+        )
+      }
+    );
+  }
+);
+const AvatarImage = utils.forwardRef(
+  ({ src, as, ...props }, ref) => {
+    const domRef = refs.useDomRef(ref);
+    const {
+      setImageLoadingStatus,
+      imageLoadingStatus,
+      slots,
+      name,
+      classNames
+    } = avatarContext.useAvatarContext();
+    const currentImageStatus = useImgLoadingStatus.useImageLoadingStatus(src, props);
+    const Component = as || "img";
+    utils$2.useLayoutEffect(() => {
+      setImageLoadingStatus(currentImageStatus);
+    }, [currentImageStatus, setImageLoadingStatus]);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Component,
+      {
+        ref: domRef,
+        alt: name,
+        "data-loaded": ouiTheme.dataAttr(imageLoadingStatus === "loaded"),
+        ...props,
+        src,
+        className: slots.image({ className: classNames?.image })
+      }
+    );
+  }
+);
+const AvatarFallback = utils.forwardRef(
+  ({ children, as, ...props }, ref) => {
+    const domRef = refs.useDomRef(ref);
+    const { slots, classNames, imageLoadingStatus, name, getInitials } = avatarContext.useAvatarContext();
+    const childrenToRender = $670gB$react.useMemo(() => {
+      if (children) return children;
+      if (name) {
+        return getInitials(name);
+      }
+      return /* @__PURE__ */ jsxRuntime.jsx(user.default, { className: slots.icon({ className: classNames?.icon }) });
+    }, [children, classNames?.icon, getInitials, name, slots]);
+    const Component = as || "div";
+    if (imageLoadingStatus === "loaded") {
+      return null;
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Component,
+      {
+        title: name,
+        className: slots.fallback({ className: classNames?.fallback }),
+        ref: domRef,
+        ...props,
+        children: childrenToRender
+      }
+    );
+  }
+);
+
+exports.AvatarFallback = AvatarFallback;
+exports.AvatarImage = AvatarImage;
+exports.AvatarRoot = AvatarRoot;

package/dist/cjs/avatar/hooks/use-img-loading-status.cjs

@@ -0,0 +1,68 @@
+"use strict";
+'use strict';
+
+var $670gB$react = require('react');
+
+function useIsHydrated() {
+  return $670gB$react.useSyncExternalStore(
+    subscribe,
+    () => true,
+    () => false
+  );
+}
+function subscribe() {
+  return () => {
+  };
+}
+function resolveLoadingStatus(image, src) {
+  if (!image) {
+    return "idle";
+  }
+  if (!src) {
+    return "error";
+  }
+  if (image.src !== src) {
+    image.src = src;
+  }
+  return image.complete && image.naturalWidth > 0 ? "loaded" : "loading";
+}
+function useImageLoadingStatus(src, { referrerPolicy, crossOrigin }) {
+  const isHydrated = useIsHydrated();
+  const imageRef = $670gB$react.useRef(null);
+  const image = (() => {
+    if (!isHydrated) return null;
+    if (!imageRef.current) {
+      imageRef.current = new window.Image();
+    }
+    return imageRef.current;
+  })();
+  const [loadingStatus, setLoadingStatus] = $670gB$react.useState(
+    () => resolveLoadingStatus(image, src)
+  );
+  $670gB$react.useLayoutEffect(() => {
+    setLoadingStatus(resolveLoadingStatus(image, src));
+  }, [image, src]);
+  $670gB$react.useLayoutEffect(() => {
+    const updateStatus = (status) => () => {
+      setLoadingStatus(status);
+    };
+    if (!image) return;
+    const handleLoad = updateStatus("loaded");
+    const handleError = updateStatus("error");
+    image.addEventListener("load", handleLoad);
+    image.addEventListener("error", handleError);
+    if (referrerPolicy) {
+      image.referrerPolicy = referrerPolicy;
+    }
+    if (typeof crossOrigin === "string") {
+      image.crossOrigin = crossOrigin;
+    }
+    return () => {
+      image.removeEventListener("load", handleLoad);
+      image.removeEventListener("error", handleError);
+    };
+  }, [image, crossOrigin, referrerPolicy]);
+  return loadingStatus;
+}
+
+exports.useImageLoadingStatus = useImageLoadingStatus;

package/dist/cjs/avatar/index.cjs

@@ -0,0 +1,23 @@
+"use strict";
+'use strict';
+
+var avatar = require('./avatar.cjs');
+var avatarContext = require('./avatar-context.cjs');
+var avatarGroup = require('./avatar-group.cjs');
+var avatarGroupContext = require('./avatar-group-context.cjs');
+
+const Avatar = Object.assign(avatar.AvatarRoot, {
+  Root: avatar.AvatarRoot,
+  Image: avatar.AvatarImage,
+  Fallback: avatar.AvatarFallback
+});
+
+exports.AvatarFallback = avatar.AvatarFallback;
+exports.AvatarImage = avatar.AvatarImage;
+exports.AvatarRoot = avatar.AvatarRoot;
+exports.AvatarContext = avatarContext.AvatarContext;
+exports.useAvatarContext = avatarContext.useAvatarContext;
+exports.AvatarGroup = avatarGroup.AvatarGroup;
+exports.AvatarGroupProvider = avatarGroupContext.AvatarGroupProvider;
+exports.useAvatarGroup = avatarGroupContext.useAvatarGroup;
+exports.Avatar = Avatar;

package/dist/cjs/avatar/utils.cjs

@@ -0,0 +1,9 @@
+"use strict";
+'use strict';
+
+const getInitialsFromText = (text, limit = 2) => {
+  const initials = text?.trim().split(/[\s\-_.]+/).filter(Boolean).map((word) => word.charAt(0).toUpperCase()).join("") || "";
+  return initials.slice(0, limit);
+};
+
+exports.getInitialsFromText = getInitialsFromText;

package/dist/cjs/banner/banner.cjs

@@ -7,9 +7,9 @@ var $670gB$react = require('react');
 var reactAria = require('react-aria');
 var reactStately = require('react-stately');
 var ouiTheme = require('@opengovsg/oui-theme');
+var button = require('../button/button.cjs');
 var circleAlert = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/circle-alert.cjs');
 var info = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/info.cjs');
-var button = require('../button/button.cjs');
 var x = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/x.cjs');
 
 const i18nStrings = {

package/dist/cjs/checkbox/checkbox.cjs

@@ -5,11 +5,11 @@
 var jsxRuntime = require('react/jsx-runtime');
 var reactAriaComponents = require('react-aria-components');
 var ouiTheme = require('@opengovsg/oui-theme');
+var field = require('../field/field.cjs');
 var utils = require('../system/utils.cjs');
 var checkboxGroupStyleContext = require('./checkbox-group-style-context.cjs');
 var minus = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/minus.cjs');
 var check = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/check.cjs');
-var field = require('../field/field.cjs');
 
 const Checkbox = ({
   classNames,
@@ -20,8 +20,8 @@ const Checkbox = ({
     originalProps,
     ouiTheme.checkboxStyles.variantKeys
   );
-  const { size } = checkboxGroupStyleContext.useCheckboxGroupStyleContext();
-  const styles = ouiTheme.checkboxStyles({ size, ...variants });
+  const context = checkboxGroupStyleContext.useCheckboxGroupStyleContext();
+  const styles = ouiTheme.checkboxStyles({ size: context?.size, ...variants });
   return /* @__PURE__ */ jsxRuntime.jsx(
     reactAriaComponents.Checkbox,
     {

package/dist/cjs/combo-box/combo-box.cjs

@@ -7,10 +7,10 @@ var $670gB$react = require('react');
 var reactAria = require('react-aria');
 var reactAriaComponents = require('react-aria-components');
 var ouiTheme = require('@opengovsg/oui-theme');
+var field = require('../field/field.cjs');
 var popover = require('../popover/popover.cjs');
 var utils = require('../system/utils.cjs');
 var comboBoxVariantContext = require('./combo-box-variant-context.cjs');
-var field = require('../field/field.cjs');
 var chevronUp = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/chevron-up.cjs');
 var chevronDown = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/chevron-down.cjs');
 var x = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/x.cjs');

package/dist/cjs/date-field/date-field.cjs

@@ -6,8 +6,8 @@ var jsxRuntime = require('react/jsx-runtime');
 var $670gB$react = require('react');
 var reactAriaComponents = require('react-aria-components');
 var ouiTheme = require('@opengovsg/oui-theme');
-var utils = require('../system/utils.cjs');
 var field = require('../field/field.cjs');
+var utils = require('../system/utils.cjs');
 
 function DateField(originalProps) {
   const [

package/dist/cjs/date-picker/date-picker.cjs

@@ -6,13 +6,14 @@ var jsxRuntime = require('react/jsx-runtime');
 var $670gB$react = require('react');
 var reactAriaComponents = require('react-aria-components');
 var ouiTheme = require('@opengovsg/oui-theme');
+var button = require('../button/button.cjs');
+var calendar$1 = require('../calendar/calendar.cjs');
+require('@internationalized/date');
+var dateField = require('../date-field/date-field.cjs');
+var field = require('../field/field.cjs');
 var popover = require('../popover/popover.cjs');
 var utils = require('../system/utils.cjs');
-var dateField = require('../date-field/date-field.cjs');
 var calendar = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/calendar.cjs');
-var calendar$1 = require('../calendar/calendar.cjs');
-var field = require('../field/field.cjs');
-var button = require('../button/button.cjs');
 
 function DatePicker(originalProps) {
   const [

package/dist/cjs/date-range-picker/date-range-picker.cjs

@@ -7,13 +7,13 @@ var $670gB$react = require('react');
 var date = require('@internationalized/date');
 var reactAriaComponents = require('react-aria-components');
 var ouiTheme = require('@opengovsg/oui-theme');
+var button = require('../button/button.cjs');
+var dateField = require('../date-field/date-field.cjs');
+var field = require('../field/field.cjs');
 var popover = require('../popover/popover.cjs');
 var rangeCalendar = require('../range-calendar/range-calendar.cjs');
 var utils = require('../system/utils.cjs');
 var calendar = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/calendar.cjs');
-var field = require('../field/field.cjs');
-var dateField = require('../date-field/date-field.cjs');
-var button = require('../button/button.cjs');
 
 function DateRangePicker(originalProps) {
   const [

package/dist/cjs/file-dropzone/file-dropzone.cjs

@@ -9,13 +9,13 @@ var reactAria = require('react-aria');
 var reactAriaComponents = require('react-aria-components');
 var reactDropzone = require('react-dropzone');
 var ouiTheme = require('@opengovsg/oui-theme');
+var field = require('../field/field.cjs');
 var useControllableState = require('../hooks/use-controllable-state.cjs');
 var utils = require('../system/utils.cjs');
 var contexts = require('./contexts.cjs');
 var fileInfo = require('./file-info.cjs');
 var utils$1 = require('./utils.cjs');
 var upload = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/upload.cjs');
-var field = require('../field/field.cjs');
 
 const FileDropzone = (originalProps) => {
   const [props, variantProps] = utils.mapPropsVariants(
@@ -25,6 +25,7 @@ const FileDropzone = (originalProps) => {
   const {
     name,
     allowedMimeTypes = [],
+    fileSizeBase = "binary",
     maxFileSize = Number.POSITIVE_INFINITY,
     minFileSize = 0,
     showFileSizeText = true,
@@ -69,9 +70,10 @@ const FileDropzone = (originalProps) => {
     (error) => utils$1.formatErrorMessage(error, {
       maxFileSize,
       minFileSize,
-      maxFiles
+      maxFiles,
+      fileSizeBase
     }),
-    [maxFileSize, maxFiles, minFileSize]
+    [fileSizeBase, maxFileSize, maxFiles, minFileSize]
   );
   const onDrop = $670gB$react.useCallback(
     (acceptedFiles, fileRejections) => {
@@ -129,19 +131,20 @@ const FileDropzone = (originalProps) => {
     const shouldShow = showFileSizeText && (notDefaultMaxFileSize || notDefaultMinFileSize);
     if (!shouldShow) return null;
     if (notDefaultMaxFileSize && notDefaultMinFileSize) {
-      return `File size must be between ${utils$1.formatBytes(minFileSize, 2)} and ${utils$1.formatBytes(
+      return `File size must be between ${utils$1.formatBytes(minFileSize, 2, fileSizeBase)} and ${utils$1.formatBytes(
         maxFileSize,
-        2
+        2,
+        fileSizeBase
       )}`;
     }
     if (notDefaultMaxFileSize) {
-      return `Maximum file size: ${utils$1.formatBytes(maxFileSize, 2)}`;
+      return `Maximum file size: ${utils$1.formatBytes(maxFileSize, 2, fileSizeBase)}`;
     }
     if (notDefaultMinFileSize) {
-      return `Minimum file size: ${utils$1.formatBytes(minFileSize, 2)}`;
+      return `Minimum file size: ${utils$1.formatBytes(minFileSize, 2, fileSizeBase)}`;
     }
     return null;
-  }, [maxFileSize, minFileSize, showFileSizeText]);
+  }, [maxFileSize, minFileSize, showFileSizeText, fileSizeBase]);
   const triggerFileSelector = $670gB$react.useCallback(() => {
     if (isDisabled || isReadOnly) return;
     dropzoneState.inputRef.current?.click();
@@ -187,6 +190,7 @@ const FileDropzone = (originalProps) => {
           {
             isDisabled,
             isReadOnly,
+            fileSizeBase,
             maxFiles,
             maxFileSize,
             showDropzone,

package/dist/cjs/file-dropzone/file-info.cjs

@@ -5,10 +5,10 @@
 var jsxRuntime = require('react/jsx-runtime');
 var $670gB$react = require('react');
 var ouiTheme = require('@opengovsg/oui-theme');
+var button = require('../button/button.cjs');
 var contexts = require('./contexts.cjs');
 var utils = require('./utils.cjs');
 var trash2 = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/trash-2.cjs');
-var button = require('../button/button.cjs');
 
 const FileInfo = ({ file, imagePreview, classNames }) => {
   const {
@@ -19,7 +19,8 @@ const FileInfo = ({ file, imagePreview, classNames }) => {
     isReadOnly
   } = contexts.useFileDropzoneStateContext();
   const { size, variant, itemClassNames } = contexts.useFileDropzoneStyleContext();
-  const readableFileSize = utils.formatBytes(file.size, 2);
+  const { fileSizeBase } = contexts.useFileDropzoneStateContext();
+  const readableFileSize = utils.formatBytes(file.size, 2, fileSizeBase);
   const styles = ouiTheme.fileInfoDropzoneStyles({
     size,
     variant,

package/dist/cjs/file-dropzone/utils.cjs

@@ -3,8 +3,8 @@
 
 var reactDropzone = require('react-dropzone');
 
-const formatBytes = (bytes, decimals = 2, size) => {
-  const k = 1e3;
+const formatBytes = (bytes, decimals = 2, base = "binary", size) => {
+  const k = base === "binary" ? 1024 : 1e3;
   const dm = decimals < 0 ? 0 : decimals;
   const sizes = ["bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
   if (bytes === 0 || bytes === void 0)
@@ -16,9 +16,9 @@ const formatErrorMessage = (error, config) => {
   const { maxFileSize, minFileSize, maxFiles } = config;
   switch (error.code) {
     case reactDropzone.ErrorCode.FileTooLarge:
-      return `You have exceeded the size limit, please upload a file below ${formatBytes(maxFileSize, 2)}`;
+      return `You have exceeded the size limit, please upload a file below ${formatBytes(maxFileSize, 2, config.fileSizeBase)}`;
     case reactDropzone.ErrorCode.FileTooSmall:
-      return `Please upload a file above ${formatBytes(minFileSize, 2)}`;
+      return `Please upload a file above ${formatBytes(minFileSize, 2, config.fileSizeBase)}`;
     case reactDropzone.ErrorCode.TooManyFiles:
       return `Maximum number of files allowed is ${maxFiles}.`;
     default: {

package/dist/cjs/hooks/use-scroll-position.cjs

@@ -0,0 +1,53 @@
+"use strict";
+'use strict';
+
+var $670gB$react = require('react');
+
+const isBrowser = typeof window !== "undefined";
+function getScrollPosition(element) {
+  if (!isBrowser) return { x: 0, y: 0 };
+  if (!element) {
+    return { x: window.scrollX, y: window.scrollY };
+  }
+  return { x: element.scrollLeft, y: element.scrollTop };
+}
+const useScrollPosition = (props) => {
+  const { elementRef, delay = 30, callback, isEnabled } = props;
+  const position = $670gB$react.useRef(
+    isEnabled ? getScrollPosition(elementRef?.current) : { x: 0, y: 0 }
+  );
+  const throttleTimeout = $670gB$react.useRef(null);
+  const handler = $670gB$react.useCallback(() => {
+    const currPos = getScrollPosition(elementRef?.current);
+    if (typeof callback === "function") {
+      callback({ prevPos: position.current, currPos });
+    }
+    position.current = currPos;
+    throttleTimeout.current = null;
+  }, [callback, elementRef]);
+  $670gB$react.useEffect(() => {
+    if (!isEnabled) return;
+    const handleScroll = () => {
+      if (delay) {
+        if (throttleTimeout.current) {
+          clearTimeout(throttleTimeout.current);
+        }
+        throttleTimeout.current = setTimeout(handler, delay);
+      } else {
+        handler();
+      }
+    };
+    const target = elementRef?.current || window;
+    target.addEventListener("scroll", handleScroll);
+    return () => {
+      target.removeEventListener("scroll", handleScroll);
+      if (throttleTimeout.current) {
+        clearTimeout(throttleTimeout.current);
+        throttleTimeout.current = null;
+      }
+    };
+  }, [elementRef?.current, delay, handler, isEnabled]);
+  return position.current;
+};
+
+exports.useScrollPosition = useScrollPosition;