@opengovsg/oui 0.0.0-snapshot-20251203100754 → 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/badge/badge.cjs

@@ -3,11 +3,11 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var react = require('react');
+var $670gB$react = require('react');
 var useBadge = require('./use-badge.cjs');
-var x = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/x.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 Badge = react.forwardRef((props, ref) => {
+const Badge = $670gB$react.forwardRef((props, ref) => {
   const {
     Component,
     children,
@@ -19,13 +19,13 @@ const Badge = react.forwardRef((props, ref) => {
     endContent,
     isCloseable
   } = useBadge.useBadge({ ...props, ref });
-  const start = react.useMemo(() => {
+  const start = $670gB$react.useMemo(() => {
     if (props.variant === "dot" && !startContent) {
       return /* @__PURE__ */ jsxRuntime.jsx("span", { className: slots.dot({ className: classNames?.dot }) });
     }
     return startContent;
   }, [props.variant, startContent, slots, classNames?.dot]);
-  const end = react.useMemo(() => {
+  const end = $670gB$react.useMemo(() => {
     if (isCloseable) {
       return /* @__PURE__ */ jsxRuntime.jsx("span", { ...getCloseButtonProps(), children: endContent ?? /* @__PURE__ */ jsxRuntime.jsx(x.default, { className: "size-full" }) });
     }

package/dist/cjs/badge/use-badge.cjs

@@ -1,7 +1,7 @@
 "use strict";
 'use strict';
 
-var react = require('react');
+var $670gB$react = require('react');
 var utils$1 = require('@react-aria/utils');
 var reactAria = require('react-aria');
 var useDeepCompare = require('use-deep-compare');
@@ -40,7 +40,7 @@ function useBadge(originalProps) {
     ...props
   } = _props;
   const domRef = refs.useDomRef(ref);
-  const Component = react.useMemo(() => as || "div", [as]);
+  const Component = $670gB$react.useMemo(() => as || "div", [as]);
   const baseClassName = ouiTheme.cn(classNames?.base, className);
   const formatMessage = reactAria.useMessageFormatter(i18nStrings);
   const isCloseable = variantProps.isCloseable || !!onClose;
@@ -59,14 +59,14 @@ function useBadge(originalProps) {
     isDisabled: !!variantProps?.isDisabled,
     onPress: onClose
   });
-  const getContentClone = react.useCallback(
-    (content) => react.isValidElement(content) ? react.cloneElement(content, {
+  const getContentClone = $670gB$react.useCallback(
+    (content) => $670gB$react.isValidElement(content) ? $670gB$react.cloneElement(content, {
       // @ts-expect-error types are not full
       className: content.props?.className
     }) : null,
     []
   );
-  const getChipProps = react.useCallback(() => {
+  const getChipProps = $670gB$react.useCallback(() => {
     return {
       ref: domRef,
       className: slots.base({ className: baseClassName }),
@@ -74,7 +74,7 @@ function useBadge(originalProps) {
       ...props
     };
   }, [baseClassName, domRef, props, slots, variantProps?.isDisabled]);
-  const getCloseButtonProps = react.useCallback(() => {
+  const getCloseButtonProps = $670gB$react.useCallback(() => {
     return {
       role: "button",
       tabIndex: 0,