@opengovsg/oui 0.0.30 → 0.0.32

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/button/button.cjs

@@ -7,9 +7,9 @@ var $670gB$react = require('react');
 var utils = require('@react-aria/utils');
 var reactAriaComponents = require('react-aria-components');
 var ouiTheme = require('@opengovsg/oui-theme');
-var ripple = require('../ripple/ripple.cjs');
 var useRipple = require('../ripple/use-ripple.cjs');
 var spinner = require('../spinner/spinner.cjs');
+var ripple = require('../ripple/ripple.cjs');
 
 const Button = $670gB$react.forwardRef(
   ({

package/dist/cjs/calendar/calendar-month-day-selector.cjs

@@ -6,11 +6,11 @@ var jsxRuntime = require('react/jsx-runtime');
 var $670gB$react = require('react');
 var date = require('@internationalized/date');
 var reactAriaComponents = require('react-aria-components');
-var select = require('../select/select.cjs');
-var selectItem = require('../select/select-item.cjs');
 var agnosticCalendarStateContext = require('./agnostic-calendar-state-context.cjs');
 var calendarStyleContext = require('./calendar-style-context.cjs');
 var useCalendarSelectors = require('./hooks/use-calendar-selectors.cjs');
+var select = require('../select/select.cjs');
+var selectItem = require('../select/select-item.cjs');
 var useCalendarI18n = require('./hooks/use-calendar-i18n.cjs');
 
 const CalendarMonthDaySelector = () => {

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,13 +7,13 @@ 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');
+var popover = require('../popover/popover.cjs');
 
 const calculateEstimatedRowHeight = (size) => {
   switch (size) {

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 field = require('../field/field.cjs');
 var utils = require('../system/utils.cjs');
+var field = require('../field/field.cjs');
 
 function DateField(originalProps) {
   const [

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

@@ -6,14 +6,13 @@ 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 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');
 var popover = require('../popover/popover.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');
 
 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 rangeCalendar = require('../range-calendar/range-calendar.cjs');
+var field = require('../field/field.cjs');
+var dateField = require('../date-field/date-field.cjs');
+var button = require('../button/button.cjs');
+var popover = require('../popover/popover.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 useControllableState = require('../hooks/use-controllable-state.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(

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 {