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

package/dist/esm/accordion/accordion.js

@@ -0,0 +1,182 @@
+"use strict";
+"use client";
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useContext } from 'react';
+import { Disclosure, composeRenderProps, DisclosureGroup, DisclosureStateContext, Heading, Button, DisclosurePanel } from 'react-aria-components';
+import { cn, accordionStyles, composeTailwindRenderProps } from '@opengovsg/oui-theme';
+import { renderChildren } from '../system/react-utils/children.js';
+import { forwardRef, mapPropsVariants } from '../system/utils.js';
+import { createContext } from '../system/react-utils/context.js';
+import ChevronDown from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/chevron-down.js';
+
+const [AccordionStyleContext, useAccordionStyleContext] = createContext({
+  name: "AccordionStyleContext",
+  strict: true
+});
+const AccordionItem = forwardRef(
+  ({ classNames, className, children, ...props }, ref) => {
+    const { slots } = useContext(AccordionStyleContext);
+    return /* @__PURE__ */ jsx(
+      Disclosure,
+      {
+        ...props,
+        ref,
+        className: composeRenderProps(
+          className,
+          (className2, renderProps) => slots.item({
+            ...renderProps,
+            className: cn(classNames?.item, className2)
+          })
+        ),
+        children
+      }
+    );
+  }
+);
+AccordionItem.displayName = "AccordionItem";
+function AccordionHeader({
+  children,
+  classNames,
+  indicator,
+  startContent,
+  endContent,
+  hideIndicator = false
+}) {
+  const { slots, classNames: contextClassNames } = useContext(
+    AccordionStyleContext
+  );
+  const { isExpanded } = useContext(DisclosureStateContext);
+  return /* @__PURE__ */ jsx(
+    Heading,
+    {
+      className: slots.heading({
+        className: cn(contextClassNames?.heading, classNames?.heading)
+      }),
+      children: /* @__PURE__ */ jsx(
+        Button,
+        {
+          slot: "trigger",
+          className: slots.trigger({
+            className: cn(contextClassNames?.trigger, classNames?.trigger)
+          }),
+          children: (buttonRenderProps) => {
+            const headerRenderProps = { ...buttonRenderProps, isExpanded };
+            return /* @__PURE__ */ jsxs(Fragment, { children: [
+              startContent && /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: slots.startContentWrapper({
+                    className: cn(
+                      contextClassNames?.startContentWrapper,
+                      classNames?.startContentWrapper
+                    )
+                  }),
+                  children: renderChildren(headerRenderProps, startContent)
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: slots.title({
+                    className: cn(contextClassNames?.title, classNames?.title)
+                  }),
+                  children: renderChildren(headerRenderProps, children)
+                }
+              ),
+              !hideIndicator && /* @__PURE__ */ jsx(
+                "span",
+                {
+                  "aria-hidden": true,
+                  className: slots.indicator({
+                    isExpanded,
+                    className: cn(
+                      contextClassNames?.indicator,
+                      classNames?.indicator
+                    )
+                  }),
+                  children: renderChildren(
+                    headerRenderProps,
+                    indicator ?? /* @__PURE__ */ jsx(ChevronDown, {})
+                  )
+                }
+              ),
+              endContent && /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: slots.endContentWrapper({
+                    className: cn(
+                      contextClassNames?.endContentWrapper,
+                      classNames?.endContentWrapper
+                    )
+                  }),
+                  children: renderChildren(headerRenderProps, endContent)
+                }
+              )
+            ] });
+          }
+        }
+      )
+    }
+  );
+}
+function AccordionContent({
+  children,
+  classNames,
+  ...props
+}) {
+  const { slots, classNames: contextClassNames } = useContext(
+    AccordionStyleContext
+  );
+  return /* @__PURE__ */ jsx(
+    DisclosurePanel,
+    {
+      ...props,
+      className: composeTailwindRenderProps(
+        props.className,
+        slots.panel({
+          className: cn(contextClassNames?.panel, classNames?.panel)
+        })
+      ),
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: slots.content({
+            className: cn(contextClassNames?.content, classNames?.content)
+          }),
+          children
+        }
+      )
+    }
+  );
+}
+const Accordion = forwardRef(
+  (originalProps, ref) => {
+    const [
+      { classNames, className, ...props },
+      { size = "md", ...variantProps }
+    ] = mapPropsVariants(originalProps, accordionStyles.variantKeys);
+    const slots = accordionStyles({ size, ...variantProps });
+    return /* @__PURE__ */ jsx(
+      AccordionStyleContext.Provider,
+      {
+        value: {
+          slots,
+          classNames
+        },
+        children: /* @__PURE__ */ jsx(
+          DisclosureGroup,
+          {
+            className: slots.base({
+              className: cn(classNames?.base, className)
+            }),
+            ...props,
+            ref
+          }
+        )
+      }
+    );
+  }
+);
+Accordion.displayName = "Accordion";
+
+export { Accordion, AccordionContent, AccordionHeader, AccordionItem, AccordionStyleContext, useAccordionStyleContext };

package/dist/esm/accordion/index.js

@@ -0,0 +1,2 @@
+"use strict";
+export { Accordion, AccordionContent, AccordionHeader, AccordionItem, AccordionStyleContext, useAccordionStyleContext } from './accordion.js';

package/dist/esm/avatar/avatar-context.js

@@ -0,0 +1,9 @@
+"use strict";
+import { createContext } from '../system/react-utils/context.js';
+
+const [AvatarContext, useAvatarContext] = createContext({
+  name: "AvatarContext",
+  strict: true
+});
+
+export { AvatarContext, useAvatarContext };

package/dist/esm/avatar/avatar-group-context.js

@@ -0,0 +1,84 @@
+"use strict";
+import { useMemo, cloneElement } from 'react';
+import { avatarGroupStyles, cn } from '@opengovsg/oui-theme';
+import { getValidChildren } from '../system/react-utils/children.js';
+import { createContext } from '../system/react-utils/context.js';
+import { useDomRef } from '../system/react-utils/refs.js';
+
+const [AvatarGroupProvider, useAvatarGroupContext] = createContext({
+  name: "AvatarGroupContext",
+  strict: false
+});
+function useAvatarGroup(props = {}) {
+  const {
+    as,
+    ref,
+    max = 5,
+    total,
+    size,
+    color,
+    prominence,
+    radius,
+    children,
+    renderCount,
+    className,
+    classNames,
+    countProps,
+    ...otherProps
+  } = props;
+  const domRef = useDomRef(ref);
+  const Component = as || "div";
+  const context = useMemo(
+    () => ({
+      size,
+      color,
+      radius,
+      prominence
+    }),
+    [size, color, radius, prominence]
+  );
+  const slots = useMemo(
+    () => avatarGroupStyles({ className: className ?? classNames?.base }),
+    [className, classNames?.base]
+  );
+  const validChildren = getValidChildren(children);
+  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 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: 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
+  };
+}
+
+export { AvatarGroupProvider, useAvatarGroup, useAvatarGroupContext };

package/dist/esm/avatar/avatar-group.js

@@ -0,0 +1,58 @@
+"use strict";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useMemo } from 'react';
+import { forwardRef } from '../system/utils.js';
+import { AvatarRoot, AvatarFallback } from './avatar.js';
+import { useAvatarGroup, AvatarGroupProvider } from './avatar-group-context.js';
+
+const AvatarGroup = forwardRef((props, ref) => {
+  const {
+    Component,
+    clones,
+    context,
+    remainingCount,
+    getAvatarGroupCountProps,
+    getAvatarGroupProps,
+    renderCount
+  } = useAvatarGroup({
+    ...props,
+    ref
+  });
+  const renderedCount = 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__ */ jsx(
+      AvatarRoot,
+      {
+        ...countAvatarVariantProps,
+        ...getAvatarGroupCountProps(),
+        name: `+${remainingCount}`,
+        children: /* @__PURE__ */ jsxs(AvatarFallback, { children: [
+          "+",
+          remainingCount
+        ] })
+      }
+    );
+  }, [
+    context.prominence,
+    getAvatarGroupCountProps,
+    remainingCount,
+    renderCount
+  ]);
+  return /* @__PURE__ */ jsx(Component, { ...getAvatarGroupProps(), children: /* @__PURE__ */ jsxs(AvatarGroupProvider, { value: context, children: [
+    clones,
+    renderedCount
+  ] }) });
+});
+AvatarGroup.displayName = "AvatarGroup";
+
+export { AvatarGroup };

package/dist/esm/avatar/avatar.js

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

package/dist/esm/avatar/hooks/use-img-loading-status.js

@@ -0,0 +1,66 @@
+"use strict";
+import { useRef, useState, useLayoutEffect, useSyncExternalStore } from 'react';
+
+function useIsHydrated() {
+  return 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 = useRef(null);
+  const image = (() => {
+    if (!isHydrated) return null;
+    if (!imageRef.current) {
+      imageRef.current = new window.Image();
+    }
+    return imageRef.current;
+  })();
+  const [loadingStatus, setLoadingStatus] = useState(
+    () => resolveLoadingStatus(image, src)
+  );
+  useLayoutEffect(() => {
+    setLoadingStatus(resolveLoadingStatus(image, src));
+  }, [image, src]);
+  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;
+}
+
+export { useImageLoadingStatus };

package/dist/esm/avatar/index.js

@@ -0,0 +1,13 @@
+"use strict";
+import { AvatarRoot, AvatarFallback, AvatarImage } from './avatar.js';
+export { AvatarContext, useAvatarContext } from './avatar-context.js';
+export { AvatarGroup } from './avatar-group.js';
+export { AvatarGroupProvider, useAvatarGroup } from './avatar-group-context.js';
+
+const Avatar = Object.assign(AvatarRoot, {
+  Root: AvatarRoot,
+  Image: AvatarImage,
+  Fallback: AvatarFallback
+});
+
+export { Avatar, AvatarFallback, AvatarImage, AvatarRoot };

package/dist/esm/avatar/utils.js

@@ -0,0 +1,7 @@
+"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);
+};
+
+export { getInitialsFromText };

package/dist/esm/banner/banner.js

@@ -5,9 +5,9 @@ import { useMemo, useRef } from 'react';
 import { useMessageFormatter, useDisclosure } from 'react-aria';
 import { useDisclosureState } from 'react-stately';
 import { bannerStyles } from '@opengovsg/oui-theme';
+import { Button } from '../button/button.js';
 import CircleAlert from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/circle-alert.js';
 import Info from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/info.js';
-import { Button } from '../button/button.js';
 import X from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/x.js';
 
 const i18nStrings = {

package/dist/esm/button/button.js

@@ -1,13 +1,14 @@
 "use strict";
 "use client";
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { forwardRef, useMemo } from 'react';
 import { chain } from '@react-aria/utils';
 import { Button as Button$1, composeRenderProps } from 'react-aria-components';
 import { buttonStyles } from '@opengovsg/oui-theme';
+import { Ripple } from '../ripple/ripple.js';
 import { useRipple } from '../ripple/use-ripple.js';
 import { Spinner } from '../spinner/spinner.js';
-import { Ripple } from '../ripple/ripple.js';
+import { renderChildren } from '../system/react-utils/children.js';
 
 const Button = forwardRef(
   ({
@@ -21,6 +22,7 @@ const Button = forwardRef(
     size = "md",
     spinnerPlacement = "start",
     loadingText,
+    pendingElement,
     onPress,
     children,
     disableRipple,
@@ -47,7 +49,7 @@ const Button = forwardRef(
       const spinnerSize = buttonSpinnerSizeMap[size];
       return /* @__PURE__ */ jsx(Spinner, { size: spinnerSize });
     }, [size, spinnerProp]);
-    return /* @__PURE__ */ jsxs(
+    return /* @__PURE__ */ jsx(
       Button$1,
       {
         ...props,
@@ -68,15 +70,16 @@ const Button = forwardRef(
         isPending,
         onPress: chain(onPress, onPressRipple),
         ref,
-        children: [
-          startContent,
-          isPending && spinnerPlacement === "start" ? spinner : null,
-          isPending ? null : children,
+        children: (renderProps) => /* @__PURE__ */ jsxs(Fragment, { children: [
+          renderChildren(renderProps, startContent),
+          isPending && spinnerPlacement === "start" ? renderChildren(renderProps, spinner) : null,
+          isPending ? null : renderChildren(renderProps, children),
           isPending && loadingText ? loadingText : null,
-          isPending && spinnerPlacement === "end" ? spinner : null,
-          endContent,
+          isPending && pendingElement ? renderChildren(renderProps, pendingElement) : null,
+          isPending && spinnerPlacement === "end" ? renderChildren(renderProps, spinner) : null,
+          renderChildren(renderProps, endContent),
           !disableRipple && /* @__PURE__ */ jsx(Ripple, { onClear: onClearRipple, ripples })
-        ]
+        ] })
       }
     );
   }

package/dist/esm/calendar/calendar-month-day-selector.js

@@ -4,11 +4,11 @@ import { jsx } from 'react/jsx-runtime';
 import { useContext } from 'react';
 import { CalendarDate } from '@internationalized/date';
 import { Group } from 'react-aria-components';
+import { Select } from '../select/select.js';
+import { SelectItem } from '../select/select-item.js';
 import { AgnosticCalendarStateContext } from './agnostic-calendar-state-context.js';
 import { useCalendarStyleContext } from './calendar-style-context.js';
 import { useCalendarSelectors } from './hooks/use-calendar-selectors.js';
-import { Select } from '../select/select.js';
-import { SelectItem } from '../select/select-item.js';
 import { useCalendarI18n } from './hooks/use-calendar-i18n.js';
 
 const CalendarMonthDaySelector = () => {

package/dist/esm/checkbox/checkbox.js

@@ -3,11 +3,11 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { Checkbox as Checkbox$1, composeRenderProps, Provider, CheckboxGroup as CheckboxGroup$1 } from 'react-aria-components';
 import { checkboxStyles, checkboxGroupStyles } from '@opengovsg/oui-theme';
+import { Label, Description, FieldError } from '../field/field.js';
 import { mapPropsVariants } from '../system/utils.js';
 import { useCheckboxGroupStyleContext, CheckboxGroupStyleContext } from './checkbox-group-style-context.js';
 import Minus from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/minus.js';
 import Check from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/check.js';
-import { Label, Description, FieldError } from '../field/field.js';
 
 const Checkbox = ({
   classNames,
@@ -18,8 +18,8 @@ const Checkbox = ({
     originalProps,
     checkboxStyles.variantKeys
   );
-  const { size } = useCheckboxGroupStyleContext();
-  const styles = checkboxStyles({ size, ...variants });
+  const context = useCheckboxGroupStyleContext();
+  const styles = checkboxStyles({ size: context?.size, ...variants });
   return /* @__PURE__ */ jsx(
     Checkbox$1,
     {

package/dist/esm/combo-box/combo-box.js

@@ -5,13 +5,13 @@ import { useMemo, useCallback } from 'react';
 import { useMessageFormatter } from 'react-aria';
 import { ListLayout, Provider, ComboBox as ComboBox$1, Input, Button, Virtualizer, ListBox } from 'react-aria-components';
 import { listBoxItemStyles, cn, comboBoxStyles, composeTailwindRenderProps, composeRenderProps, comboBoxClearButtonStyles } from '@opengovsg/oui-theme';
+import { Label, FieldGroup, Description, FieldError } from '../field/field.js';
+import { Popover } from '../popover/popover.js';
 import { mapPropsVariants } from '../system/utils.js';
 import { ComboBoxVariantContext } from './combo-box-variant-context.js';
-import { Label, FieldGroup, Description, FieldError } from '../field/field.js';
 import ChevronUp from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/chevron-up.js';
 import ChevronDown from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/chevron-down.js';
 import X from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/x.js';
-import { Popover } from '../popover/popover.js';
 
 const calculateEstimatedRowHeight = (size) => {
   switch (size) {