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

package/dist/cjs/tag-field/use-tag-field-state.cjs

@@ -1,14 +1,14 @@
 "use strict";
 'use strict';
 
-var react = require('react');
+var $670gB$react = require('react');
 var form = require('@react-stately/form');
 var utils = require('@react-stately/utils');
 var useControllableState = require('../hooks/use-controllable-state.cjs');
 
 function useTagFieldState(props) {
   const { itemToText, itemToKey, defaultFilter } = props;
-  const itemsByKey = react.useMemo(() => {
+  const itemsByKey = $670gB$react.useMemo(() => {
     const items = props.items ?? props.defaultItems ?? [];
     return items.reduce(
       (acc, item) => {
@@ -18,7 +18,7 @@ function useTagFieldState(props) {
       {}
     ) ?? {};
   }, [itemToKey, props.defaultItems, props.items]);
-  const getSelectedItemsByKey = react.useCallback(
+  const getSelectedItemsByKey = $670gB$react.useCallback(
     (keys) => {
       if (!keys) return;
       return [...keys].map((key) => itemsByKey[key]);
@@ -36,13 +36,13 @@ function useTagFieldState(props) {
     defaultInputValue,
     props.onInputChange
   );
-  const controlledSelectedKeys = react.useMemo(
+  const controlledSelectedKeys = $670gB$react.useMemo(
     () => new Set(selectedItems.map(itemToKey)),
     [itemToKey, selectedItems]
   );
   const validation = form.useFormValidationState({
     ...props,
-    value: react.useMemo(
+    value: $670gB$react.useMemo(
       () => ({
         inputValue,
         selectedKeys: controlledSelectedKeys
@@ -50,7 +50,7 @@ function useTagFieldState(props) {
       [controlledSelectedKeys, inputValue]
     )
   });
-  const filteredItems = react.useMemo(
+  const filteredItems = $670gB$react.useMemo(
     () => (
       // No default filter if items are controlled.
       !!props.items || !defaultFilter ? props.items ?? [] : filterItems({

package/dist/cjs/tag-field/use-tag-field.cjs

@@ -1,7 +1,7 @@
 "use strict";
 'use strict';
 
-var react = require('react');
+var $670gB$react = require('react');
 var utils = require('@react-aria/utils');
 var reactVirtual = require('@tanstack/react-virtual');
 var downshift = require('downshift');
@@ -23,7 +23,7 @@ function useTagField(props, state) {
     label,
     virtualRowHeight = 40
   } = props;
-  const backupBtnRef = react.useRef(null);
+  const backupBtnRef = $670gB$react.useRef(null);
   buttonRef = buttonRef ?? backupBtnRef;
   const {
     selectedItems,
@@ -48,14 +48,14 @@ function useTagField(props, state) {
       }
     }
   });
-  const disabledKeysSet = react.useMemo(() => {
+  const disabledKeysSet = $670gB$react.useMemo(() => {
     return new Set(disabledKeys);
   }, [disabledKeys]);
   const rowVirtualizer = reactVirtual.useVirtualizer({
     count: items.length,
     getScrollElement: () => listBoxRef.current,
     estimateSize: () => virtualRowHeight,
-    getItemKey: react.useCallback(
+    getItemKey: $670gB$react.useCallback(
       (index) => itemToKey(items[index]),
       [itemToKey, items]
     ),

package/dist/cjs/text-area/text-area.cjs

@@ -3,11 +3,11 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var react = require('react');
+var $670gB$react = require('react');
 var reactAriaComponents = require('react-aria-components');
 var ouiTheme = require('@opengovsg/oui-theme');
 
-const TextArea = react.forwardRef(
+const TextArea = $670gB$react.forwardRef(
   ({ size, variant, isDisabled, ...props }, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsx(
       reactAriaComponents.TextArea,

package/dist/cjs/toast/index.cjs

@@ -0,0 +1,13 @@
+"use strict";
+'use strict';
+
+var toast = require('./toast.cjs');
+var sonner = require('sonner');
+
+
+
+exports.Toaster = toast.Toaster;
+Object.defineProperty(exports, "toast", {
+	enumerable: true,
+	get: function () { return sonner.toast; }
+});

package/dist/cjs/toast/toast.cjs

@@ -0,0 +1,91 @@
+"use strict";
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var sonner = require('sonner');
+var ouiTheme = require('@opengovsg/oui-theme');
+var spinner = require('../spinner/spinner.cjs');
+var utils = require('../system/utils.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');
+
+function Toaster(originalProps) {
+  const [{ toastOptions, closeButton = true, ...props }, variantProps] = utils.mapPropsVariants(originalProps, ouiTheme.toastStyles.variantKeys);
+  const styles = ouiTheme.toastStyles(variantProps);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    sonner.Toaster,
+    {
+      className: styles.base({
+        className: props.className ?? props.classNames?.base
+      }),
+      position: "top-center",
+      icons: {
+        loading: /* @__PURE__ */ jsxRuntime.jsx(spinner.Spinner, { size: "xs" }),
+        close: /* @__PURE__ */ jsxRuntime.jsx(x.default, {})
+      },
+      mobileOffset: 8,
+      offset: {
+        top: 8
+      },
+      closeButton,
+      toastOptions: {
+        classNames: {
+          toast: styles.toast({
+            className: props.classNames?.toast
+          }),
+          title: styles.title({
+            className: props.classNames?.title
+          }),
+          description: styles.description({
+            className: props.classNames?.description
+          }),
+          loader: styles.loader({
+            className: props.classNames?.loader
+          }),
+          closeButton: styles.closeButton({
+            className: props.classNames?.closeButton
+          }),
+          success: styles.success({
+            className: props.classNames?.success
+          }),
+          error: styles.error({
+            className: props.classNames?.error
+          }),
+          info: styles.info({
+            className: props.classNames?.info
+          }),
+          warning: styles.warning({
+            className: props.classNames?.warning
+          }),
+          loading: styles.loading({
+            className: props.classNames?.loading
+          }),
+          default: styles.default({
+            className: props.classNames?.default
+          }),
+          content: styles.content({
+            className: props.classNames?.content
+          }),
+          icon: styles.icon({
+            className: props.classNames?.icon
+          }),
+          actionButton: styles.actionButton({
+            className: props.classNames?.actionButton
+          }),
+          cancelButton: styles.cancelButton({
+            className: props.classNames?.cancelButton
+          })
+        },
+        unstyled: true,
+        ...toastOptions
+      },
+      ...props
+    }
+  );
+}
+
+Object.defineProperty(exports, "toast", {
+  enumerable: true,
+  get: function () { return sonner.toast; }
+});
+exports.Toaster = Toaster;

package/dist/cjs/toggle/toggle.cjs

@@ -3,7 +3,7 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var react = require('react');
+var $670gB$react = require('react');
 var reactAria = require('react-aria');
 var reactAriaComponents = require('react-aria-components');
 var ouiTheme = require('@opengovsg/oui-theme');
@@ -21,12 +21,12 @@ const Toggle = ({
     ouiTheme.toggleStyles.variantKeys
   );
   const slots = ouiTheme.toggleStyles(variantProps);
-  const clonedThumbIcon = react.useCallback(
+  const clonedThumbIcon = $670gB$react.useCallback(
     (renderProps) => {
       const baseProps = {
         className: slots.thumbIcon({ className: classNames?.thumbIcon })
       };
-      return typeof thumbIcon === "function" ? thumbIcon(reactAria.mergeProps(baseProps, renderProps)) : thumbIcon && react.cloneElement(thumbIcon, baseProps);
+      return typeof thumbIcon === "function" ? thumbIcon(reactAria.mergeProps(baseProps, renderProps)) : thumbIcon && $670gB$react.cloneElement(thumbIcon, baseProps);
     },
     [classNames?.thumbIcon, slots, thumbIcon]
   );

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 };