@opengovsg/oui 0.0.0-snapshot-20251216073051 → 0.0.0-snapshot-20260126025301

package/dist/cjs/accordion/accordion.cjs

@@ -0,0 +1,189 @@
+"use strict";
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var $670gB$react = require('react');
+var reactAriaComponents = require('react-aria-components');
+var ouiTheme = require('@opengovsg/oui-theme');
+var children = require('../system/react-utils/children.cjs');
+var utils = require('../system/utils.cjs');
+var context = require('../system/react-utils/context.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');
+
+const [AccordionStyleContext, useAccordionStyleContext] = context.createContext({
+  name: "AccordionStyleContext",
+  strict: true
+});
+const AccordionItem = utils.forwardRef(
+  ({ classNames, className, children, ...props }, ref) => {
+    const { slots } = $670gB$react.useContext(AccordionStyleContext);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      reactAriaComponents.Disclosure,
+      {
+        ...props,
+        ref,
+        className: reactAriaComponents.composeRenderProps(
+          className,
+          (className2, renderProps) => slots.item({
+            ...renderProps,
+            className: ouiTheme.cn(classNames?.item, className2)
+          })
+        ),
+        children
+      }
+    );
+  }
+);
+AccordionItem.displayName = "AccordionItem";
+function AccordionHeader({
+  children: children$1,
+  classNames,
+  indicator,
+  startContent,
+  endContent,
+  hideIndicator = false
+}) {
+  const { slots, classNames: contextClassNames } = $670gB$react.useContext(
+    AccordionStyleContext
+  );
+  const { isExpanded } = $670gB$react.useContext(reactAriaComponents.DisclosureStateContext);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactAriaComponents.Heading,
+    {
+      className: slots.heading({
+        className: ouiTheme.cn(contextClassNames?.heading, classNames?.heading)
+      }),
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        reactAriaComponents.Button,
+        {
+          slot: "trigger",
+          className: slots.trigger({
+            className: ouiTheme.cn(contextClassNames?.trigger, classNames?.trigger)
+          }),
+          children: (buttonRenderProps) => {
+            const headerRenderProps = { ...buttonRenderProps, isExpanded };
+            return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              startContent && /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: slots.startContentWrapper({
+                    className: ouiTheme.cn(
+                      contextClassNames?.startContentWrapper,
+                      classNames?.startContentWrapper
+                    )
+                  }),
+                  children: children.renderChildren(headerRenderProps, startContent)
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  className: slots.title({
+                    className: ouiTheme.cn(contextClassNames?.title, classNames?.title)
+                  }),
+                  children: children.renderChildren(headerRenderProps, children$1)
+                }
+              ),
+              !hideIndicator && /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  "aria-hidden": true,
+                  className: slots.indicator({
+                    isExpanded,
+                    className: ouiTheme.cn(
+                      contextClassNames?.indicator,
+                      classNames?.indicator
+                    )
+                  }),
+                  children: children.renderChildren(
+                    headerRenderProps,
+                    indicator ?? /* @__PURE__ */ jsxRuntime.jsx(chevronDown.default, {})
+                  )
+                }
+              ),
+              endContent && /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: slots.endContentWrapper({
+                    className: ouiTheme.cn(
+                      contextClassNames?.endContentWrapper,
+                      classNames?.endContentWrapper
+                    )
+                  }),
+                  children: children.renderChildren(headerRenderProps, endContent)
+                }
+              )
+            ] });
+          }
+        }
+      )
+    }
+  );
+}
+function AccordionContent({
+  children,
+  classNames,
+  ...props
+}) {
+  const { slots, classNames: contextClassNames } = $670gB$react.useContext(
+    AccordionStyleContext
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactAriaComponents.DisclosurePanel,
+    {
+      ...props,
+      className: ouiTheme.composeTailwindRenderProps(
+        props.className,
+        slots.panel({
+          className: ouiTheme.cn(contextClassNames?.panel, classNames?.panel)
+        })
+      ),
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: slots.content({
+            className: ouiTheme.cn(contextClassNames?.content, classNames?.content)
+          }),
+          children
+        }
+      )
+    }
+  );
+}
+const Accordion = utils.forwardRef(
+  (originalProps, ref) => {
+    const [
+      { classNames, className, ...props },
+      { size = "md", ...variantProps }
+    ] = utils.mapPropsVariants(originalProps, ouiTheme.accordionStyles.variantKeys);
+    const slots = ouiTheme.accordionStyles({ size, ...variantProps });
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      AccordionStyleContext.Provider,
+      {
+        value: {
+          slots,
+          classNames
+        },
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          reactAriaComponents.DisclosureGroup,
+          {
+            className: slots.base({
+              className: ouiTheme.cn(classNames?.base, className)
+            }),
+            ...props,
+            ref
+          }
+        )
+      }
+    );
+  }
+);
+Accordion.displayName = "Accordion";
+
+exports.Accordion = Accordion;
+exports.AccordionContent = AccordionContent;
+exports.AccordionHeader = AccordionHeader;
+exports.AccordionItem = AccordionItem;
+exports.AccordionStyleContext = AccordionStyleContext;
+exports.useAccordionStyleContext = useAccordionStyleContext;

package/dist/cjs/accordion/index.cjs

@@ -0,0 +1,13 @@
+"use strict";
+'use strict';
+
+var accordion = require('./accordion.cjs');
+
+
+
+exports.Accordion = accordion.Accordion;
+exports.AccordionContent = accordion.AccordionContent;
+exports.AccordionHeader = accordion.AccordionHeader;
+exports.AccordionItem = accordion.AccordionItem;
+exports.AccordionStyleContext = accordion.AccordionStyleContext;
+exports.useAccordionStyleContext = accordion.useAccordionStyleContext;

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,10 @@ 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');
+var children = require('../system/react-utils/children.cjs');
 
 const Button = $670gB$react.forwardRef(
   ({
@@ -23,8 +24,9 @@ const Button = $670gB$react.forwardRef(
     size = "md",
     spinnerPlacement = "start",
     loadingText,
+    pendingElement,
     onPress,
-    children,
+    children: children$1,
     disableRipple,
     isPending,
     spinner: spinnerProp,
@@ -49,7 +51,7 @@ const Button = $670gB$react.forwardRef(
       const spinnerSize = buttonSpinnerSizeMap[size];
       return /* @__PURE__ */ jsxRuntime.jsx(spinner.Spinner, { size: spinnerSize });
     }, [size, spinnerProp]);
-    return /* @__PURE__ */ jsxRuntime.jsxs(
+    return /* @__PURE__ */ jsxRuntime.jsx(
       reactAriaComponents.Button,
       {
         ...props,
@@ -70,15 +72,16 @@ const Button = $670gB$react.forwardRef(
         isPending,
         onPress: utils.chain(onPress, onPressRipple),
         ref,
-        children: [
-          startContent,
-          isPending && spinnerPlacement === "start" ? spinner$1 : null,
-          isPending ? null : children,
+        children: (renderProps) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          children.renderChildren(renderProps, startContent),
+          isPending && spinnerPlacement === "start" ? children.renderChildren(renderProps, spinner$1) : null,
+          isPending ? null : children.renderChildren(renderProps, children$1),
           isPending && loadingText ? loadingText : null,
-          isPending && spinnerPlacement === "end" ? spinner$1 : null,
-          endContent,
+          isPending && pendingElement ? children.renderChildren(renderProps, pendingElement) : null,
+          isPending && spinnerPlacement === "end" ? children.renderChildren(renderProps, spinner$1) : null,
+          children.renderChildren(renderProps, endContent),
           !disableRipple && /* @__PURE__ */ jsxRuntime.jsx(ripple.Ripple, { onClear: onClearRipple, ripples })
-        ]
+        ] })
       }
     );
   }

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 = () => {