@opengovsg/oui 0.0.7 → 0.0.8

package/dist/cjs/badge/badge.cjs

@@ -0,0 +1,42 @@
+"use strict";
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var 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');
+
+const Badge = react.forwardRef((props, ref) => {
+  const {
+    Component,
+    children,
+    slots,
+    classNames,
+    getChipProps,
+    getCloseButtonProps,
+    startContent,
+    endContent,
+    isCloseable
+  } = useBadge.useBadge({ ...props, ref });
+  const start = 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(() => {
+    if (isCloseable) {
+      return /* @__PURE__ */ jsxRuntime.jsx("span", { ...getCloseButtonProps(), children: endContent ?? /* @__PURE__ */ jsxRuntime.jsx(x.default, { className: "size-full" }) });
+    }
+    return endContent;
+  }, [endContent, getCloseButtonProps, isCloseable]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(Component, { ...getChipProps(), children: [
+    start,
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: slots.content({ className: classNames?.content }), children }),
+    end
+  ] });
+});
+Badge.displayName = "Badge";
+
+exports.Badge = Badge;

package/dist/cjs/badge/index.cjs

@@ -0,0 +1,8 @@
+"use strict";
+'use strict';
+
+var badge = require('./badge.cjs');
+
+
+
+exports.Badge = badge.Badge;

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

@@ -0,0 +1,111 @@
+"use strict";
+'use strict';
+
+var react = require('react');
+var utils$1 = require('@react-aria/utils');
+var reactAria = require('react-aria');
+var useDeepCompare = require('use-deep-compare');
+var ouiTheme = require('@opengovsg/oui-theme');
+var utils = require('../system/utils.cjs');
+var refs = require('../system/react-utils/refs.cjs');
+
+const i18nStrings = {
+  "en-SG": {
+    close: "Close badge"
+  },
+  "zh-SG": {
+    close: "\u5173\u95ED\u5FBD\u7AE0"
+  },
+  "ms-SG": {
+    close: "Tutup lencana"
+  },
+  "ta-SG": {
+    close: "\u0BAA\u0BC7\u0B9F\u0BCD\u0B9C\u0BC8 \u0BAE\u0BC2\u0B9F\u0BC1"
+  }
+};
+function useBadge(originalProps) {
+  const [_props, variantProps] = utils.mapPropsVariants(
+    originalProps,
+    ouiTheme.badgeStyles.variantKeys
+  );
+  const {
+    ref,
+    as,
+    children,
+    startContent,
+    endContent,
+    onClose,
+    classNames,
+    className,
+    ...props
+  } = _props;
+  const domRef = refs.useDomRef(ref);
+  const Component = react.useMemo(() => as || "div", [as]);
+  const baseClassName = ouiTheme.cn(classNames?.base, className);
+  const formatMessage = reactAria.useMessageFormatter(i18nStrings);
+  const isCloseable = variantProps.isCloseable || !!onClose;
+  const {
+    focusProps: closeFocusProps,
+    isFocusVisible: isCloseButtonFocusVisible
+  } = reactAria.useFocusRing();
+  const slots = useDeepCompare.useDeepCompareMemo(
+    () => ({
+      ...ouiTheme.badgeStyles({ isCloseable, ...variantProps }),
+      closeButton: ouiTheme.badgeCloseButtonStyles
+    }),
+    [variantProps, isCloseable, ouiTheme.badgeStyles, ouiTheme.badgeCloseButtonStyles]
+  );
+  const { pressProps: closePressProps } = reactAria.usePress({
+    isDisabled: !!variantProps?.isDisabled,
+    onPress: onClose
+  });
+  const getContentClone = react.useCallback(
+    (content) => react.isValidElement(content) ? react.cloneElement(content, {
+      // @ts-expect-error types are not full
+      className: content.props?.className
+    }) : null,
+    []
+  );
+  const getChipProps = react.useCallback(() => {
+    return {
+      ref: domRef,
+      className: slots.base({ className: baseClassName }),
+      "aria-disabled": variantProps?.isDisabled,
+      ...props
+    };
+  }, [baseClassName, domRef, props, slots, variantProps?.isDisabled]);
+  const getCloseButtonProps = react.useCallback(() => {
+    return {
+      role: "button",
+      tabIndex: 0,
+      className: slots.closeButton({
+        size: variantProps?.size,
+        className: classNames?.closeButton,
+        isFocusVisible: isCloseButtonFocusVisible
+      }),
+      "aria-label": formatMessage("close"),
+      ...utils$1.mergeProps(closePressProps, closeFocusProps)
+    };
+  }, [
+    classNames?.closeButton,
+    closeFocusProps,
+    closePressProps,
+    formatMessage,
+    isCloseButtonFocusVisible,
+    slots,
+    variantProps?.size
+  ]);
+  return {
+    Component,
+    children,
+    slots,
+    classNames,
+    isCloseable,
+    startContent: getContentClone(startContent),
+    endContent: getContentClone(endContent),
+    getCloseButtonProps,
+    getChipProps
+  };
+}
+
+exports.useBadge = useBadge;

package/dist/cjs/combo-box/combo-box-fuzzy.cjs

@@ -5,8 +5,11 @@
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
 var fuzzysort = require('fuzzysort');
+var reactAriaComponents = require('react-aria-components');
 var ouiTheme = require('@opengovsg/oui-theme');
+var utils = require('../system/utils.cjs');
 var comboBox = require('./combo-box.cjs');
+var comboBoxItem = require('./combo-box-item.cjs');
 
 function HighlightedText({
   result,
@@ -29,18 +32,24 @@ function HighlightedText({
     i
   ));
 }
-function ComboBoxFuzzy({
-  items,
-  itemClassNames,
-  onSelectionChange: onSelectionChangeProp,
-  onInputChange: onInputChangeProp,
-  ...props
-}) {
-  const deferredInputValue = react.useDeferredValue(props.inputValue);
+function ComboBoxFuzzy(originalProps) {
+  const [_props, variantProps] = utils.mapPropsVariants(
+    originalProps,
+    ouiTheme.comboBoxStyles.variantKeys
+  );
+  const {
+    items,
+    itemClassNames,
+    onSelectionChange: onSelectionChangeProp,
+    onInputChange: onInputChangeProp,
+    inputValue,
+    ...props
+  } = _props;
+  const deferredInputValue = react.useDeferredValue(inputValue);
   const preparedItems = react.useMemo(() => {
     return items?.map((item) => ({
       ...item,
-      prepared: fuzzysort.prepare(item.name)
+      prepared: fuzzysort.prepare(item.textValue)
     })) ?? [];
   }, [items]);
   const [filteredResults, setFilteredResults] = react.useState({ items, result: {} });
@@ -63,7 +72,7 @@ function ComboBoxFuzzy({
       }).reduce(
         (acc, result) => {
           acc.items.push(result.obj);
-          acc.result[result.obj.name] = result;
+          acc.result[result.obj.textValue] = result;
           return acc;
         },
         { items: [], result: {} }
@@ -72,34 +81,47 @@ function ComboBoxFuzzy({
     },
     [onInputChangeProp, preparedItems]
   );
+  const comboboxItemStyles = ouiTheme.comboBoxItemStyles(variantProps);
   return /* @__PURE__ */ jsxRuntime.jsx(
     comboBox.ComboBox,
     {
       ...props,
+      inputValue,
       items: filteredResults.items,
       dependencies: [deferredInputValue],
       onSelectionChange,
       onInputChange,
-      children: (item) => /* @__PURE__ */ jsxRuntime.jsx(
-        comboBox.ComboBoxItem,
-        {
-          classNames: itemClassNames,
-          label: ({ isSelected, isFocused }) => /* @__PURE__ */ jsxRuntime.jsx(
-            HighlightedText,
-            {
-              className: itemClassNames?.highlight,
-              result: filteredResults.result?.[item.name],
-              originalText: item.name,
-              isSelected,
-              isFocused
-            }
-          ),
-          description: item.description,
-          textValue: item.name,
-          id: item.value
-        },
-        item.name
-      )
+      children: (item) => /* @__PURE__ */ jsxRuntime.jsx(comboBoxItem.ComboBoxItem, { textValue: item.textValue, id: item.id, children: ({ isSelected, isFocused }) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          reactAriaComponents.Text,
+          {
+            className: comboboxItemStyles.label({
+              className: itemClassNames?.label
+            }),
+            slot: "label",
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              HighlightedText,
+              {
+                className: itemClassNames?.highlight,
+                result: filteredResults.result?.[item.textValue],
+                originalText: item.textValue,
+                isSelected,
+                isFocused
+              }
+            )
+          }
+        ),
+        item.description && /* @__PURE__ */ jsxRuntime.jsx(
+          reactAriaComponents.Text,
+          {
+            className: comboboxItemStyles.description({
+              className: itemClassNames?.description
+            }),
+            slot: "description",
+            children: item.description
+          }
+        )
+      ] }) }, item.id)
     }
   );
 }

package/dist/cjs/combo-box/combo-box-item.cjs

@@ -0,0 +1,70 @@
+"use strict";
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var reactAriaComponents = require('react-aria-components');
+var ouiTheme = require('@opengovsg/oui-theme');
+var utils = require('../system/utils.cjs');
+var comboBoxVariantContext = require('./combo-box-variant-context.cjs');
+
+const ComboBoxItem = utils.forwardRef(function ComboBoxItem2(originalProps, ref) {
+  [originalProps, ref] = reactAriaComponents.useContextProps(
+    originalProps,
+    ref,
+    comboBoxVariantContext.ComboBoxVariantContext
+  );
+  const [
+    { className, description, children, classNames, ...props },
+    variantProps
+  ] = utils.mapPropsVariants(originalProps, ouiTheme.comboBoxItemStyles.variantKeys);
+  const styles = ouiTheme.comboBoxItemStyles(variantProps);
+  const defaultTextValue = react.useMemo(() => {
+    if (props.textValue) {
+      return props.textValue;
+    }
+    if (typeof children === "string") {
+      return children;
+    }
+    return void 0;
+  }, [children, props.textValue]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactAriaComponents.ListBoxItem,
+    {
+      textValue: defaultTextValue,
+      ...props,
+      className: reactAriaComponents.composeRenderProps(
+        className ?? classNames?.container,
+        (className2, renderProps) => styles.container({ ...renderProps, className: className2 })
+      ),
+      children: (renderProps) => {
+        if (typeof children === "function") {
+          return children(renderProps);
+        }
+        return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            reactAriaComponents.Text,
+            {
+              className: styles.label({ className: classNames?.label }),
+              slot: "label",
+              children
+            }
+          ),
+          description && /* @__PURE__ */ jsxRuntime.jsx(
+            reactAriaComponents.Text,
+            {
+              className: styles.description({
+                className: classNames?.description
+              }),
+              slot: "description",
+              children: description
+            }
+          )
+        ] });
+      }
+    }
+  );
+});
+
+exports.ComboBoxItem = ComboBoxItem;

package/dist/cjs/combo-box/combo-box-variant-context.cjs

@@ -0,0 +1,13 @@
+"use strict";
+"use client";
+'use strict';
+
+var context = require('../system/react-utils/context.cjs');
+
+const [ComboBoxVariantContext, useComboBoxVariantContext] = context.createContext({
+  name: "ComboBoxVariantContext",
+  strict: true
+});
+
+exports.ComboBoxVariantContext = ComboBoxVariantContext;
+exports.useComboBoxVariantContext = useComboBoxVariantContext;

package/dist/cjs/combo-box/combo-box.cjs

@@ -7,6 +7,8 @@ var react = require('react');
 var reactAria = require('react-aria');
 var reactAriaComponents = require('react-aria-components');
 var ouiTheme = require('@opengovsg/oui-theme');
+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.0.0/node_modules/lucide-react/dist/esm/icons/chevron-up.cjs');
 var chevronDown = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/chevron-down.cjs');
@@ -56,38 +58,43 @@ function ComboBoxEmptyState({
     }
   );
 }
-function ComboBox({
-  label,
-  description,
-  errorMessage,
-  classNames,
-  itemClassNames,
-  size,
-  listLayoutOptions,
-  children,
-  dependencies,
-  onClear,
-  renderEmptyState: renderEmptyStateProp,
-  ...props
-}) {
+function ComboBox(originalProps) {
   const formatMessage = reactAria.useMessageFormatter(i18nStrings);
-  const styles = ouiTheme.comboBoxStyles({ size });
+  const [_props, variantProps] = utils.mapPropsVariants(
+    originalProps,
+    ouiTheme.comboBoxStyles.variantKeys
+  );
+  const {
+    label,
+    description,
+    errorMessage,
+    classNames,
+    listLayoutOptions,
+    children,
+    dependencies,
+    onClear,
+    renderEmptyState: renderEmptyStateProp,
+    ...props
+  } = _props;
+  const styles = ouiTheme.comboBoxStyles(variantProps);
   const layout = react.useMemo(() => {
     return new reactAriaComponents.ListLayout({
-      estimatedRowHeight: calculateEstimatedRowHeight(size ?? "md"),
+      estimatedRowHeight: calculateEstimatedRowHeight(
+        variantProps.size ?? "md"
+      ),
       ...listLayoutOptions
     });
-  }, [listLayoutOptions, size]);
+  }, [listLayoutOptions, variantProps.size]);
   const renderEmptyState = react.useCallback(
     (props2) => {
       if (renderEmptyStateProp) {
         return renderEmptyStateProp(props2);
       }
-      return /* @__PURE__ */ jsxRuntime.jsx(ComboBoxEmptyState, { size, className: classNames?.emptyState });
+      return /* @__PURE__ */ jsxRuntime.jsx(ComboBoxEmptyState, { className: classNames?.emptyState });
     },
-    [classNames?.emptyState, renderEmptyStateProp, size]
+    [classNames?.emptyState, renderEmptyStateProp]
   );
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.Provider, { values: [[comboBoxVariantContext.ComboBoxVariantContext, variantProps]], children: /* @__PURE__ */ jsxRuntime.jsx(
     reactAriaComponents.ComboBox,
     {
       className: ouiTheme.composeTailwindRenderProps(
@@ -96,13 +103,14 @@ function ComboBox({
       ),
       shouldFocusWrap: true,
       allowsEmptyCollection: true,
+      isDisabled: variantProps.isDisabled,
       ...props,
       children: ({ isOpen, isDisabled: isComboBoxDisabled }) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           field.Label,
           {
-            size,
-            className: styles.label({ className: classNames?.label, size }),
+            size: variantProps.size,
+            className: styles.label({ className: classNames?.label }),
             children: label
           }
         ),
@@ -110,12 +118,12 @@ function ComboBox({
           /* @__PURE__ */ jsxRuntime.jsxs(
             field.FieldGroup,
             {
+              isDisabled: isComboBoxDisabled,
               className: ouiTheme.composeRenderProps(
                 classNames?.group,
                 (className, renderProps) => styles.group({
                   ...renderProps,
                   className,
-                  size,
                   isClearable: !!onClear
                 })
               ),
@@ -125,7 +133,7 @@ function ComboBox({
                   {
                     className: ouiTheme.composeRenderProps(
                       classNames?.field,
-                      (className, renderProps) => styles.field({ ...renderProps, className, size })
+                      (className, renderProps) => styles.field({ ...renderProps, className })
                     )
                   }
                 ),
@@ -134,22 +142,20 @@ function ComboBox({
                   {
                     className: ouiTheme.composeRenderProps(
                       classNames?.expandButton,
-                      (className, renderProps) => styles.expandButton({ ...renderProps, className, size })
+                      (className, renderProps) => styles.expandButton({ ...renderProps, className })
                     ),
                     children: isOpen ? /* @__PURE__ */ jsxRuntime.jsx(
                       chevronUp.default,
                       {
                         className: styles.icon({
-                          className: classNames?.icon,
-                          size
+                          className: classNames?.icon
                         })
                       }
                     ) : /* @__PURE__ */ jsxRuntime.jsx(
                       chevronDown.default,
                       {
                         className: styles.icon({
-                          className: classNames?.icon,
-                          size
+                          className: classNames?.icon
                         })
                       }
                     )
@@ -168,35 +174,33 @@ function ComboBox({
               className: ouiTheme.composeRenderProps(
                 classNames?.clearButton,
                 (className, renderProps) => ouiTheme.comboBoxClearButtonStyles({
+                  ...variantProps,
                   ...renderProps,
                   className,
-                  size,
-                  isInactive: !props.inputValue,
-                  isDisabled: renderProps.isDisabled
+                  isInactive: !props.inputValue
                 })
               ),
               children: /* @__PURE__ */ jsxRuntime.jsx(
                 x.default,
                 {
                   className: styles.icon({
-                    className: classNames?.icon,
-                    size
+                    className: classNames?.icon
                   })
                 }
               )
             }
           )
         ] }),
-        description && /* @__PURE__ */ jsxRuntime.jsx(field.Description, { size, children: description }),
-        /* @__PURE__ */ jsxRuntime.jsx(field.FieldError, { size, children: errorMessage }),
-        /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.Virtualizer, { layout, children: /* @__PURE__ */ jsxRuntime.jsx(
+        description && /* @__PURE__ */ jsxRuntime.jsx(field.Description, { size: variantProps.size, children: description }),
+        /* @__PURE__ */ jsxRuntime.jsx(field.FieldError, { size: variantProps.size, children: errorMessage }),
+        /* @__PURE__ */ jsxRuntime.jsx(
           reactAriaComponents.Popover,
           {
             className: ouiTheme.composeRenderProps(
               classNames?.popover,
               (className, renderProps) => styles.popover({ ...renderProps, className })
             ),
-            children: /* @__PURE__ */ jsxRuntime.jsx(
+            children: /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.Virtualizer, { layout, children: /* @__PURE__ */ jsxRuntime.jsx(
               reactAriaComponents.ListBox,
               {
                 className: ouiTheme.composeRenderProps(
@@ -205,73 +209,15 @@ function ComboBox({
                 ),
                 dependencies,
                 renderEmptyState,
-                children: (item) => {
-                  if (children) {
-                    return children(item);
-                  }
-                  return /* @__PURE__ */ jsxRuntime.jsx(
-                    ComboBoxItem,
-                    {
-                      size,
-                      id: item.value,
-                      label: item.name,
-                      textValue: item.name,
-                      description: item.description,
-                      classNames: itemClassNames
-                    }
-                  );
-                }
+                children
               }
-            )
+            ) })
           }
-        ) })
+        )
       ] })
     }
-  );
-}
-function ComboBoxItem({
-  className,
-  size,
-  description,
-  label,
-  classNames,
-  ...props
-}) {
-  const styles = ouiTheme.comboBoxItemStyles({ size });
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    reactAriaComponents.ListBoxItem,
-    {
-      ...props,
-      className: ouiTheme.composeRenderProps(
-        className ?? classNames?.container,
-        (className2, renderProps) => styles.container({ ...renderProps, className: className2 })
-      ),
-      children: (renderProps) => {
-        return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            reactAriaComponents.Text,
-            {
-              className: styles.label({ className: classNames?.label }),
-              slot: "label",
-              children: typeof label === "function" ? label(renderProps) : label
-            }
-          ),
-          description && /* @__PURE__ */ jsxRuntime.jsx(
-            reactAriaComponents.Text,
-            {
-              className: styles.description({
-                className: classNames?.description
-              }),
-              slot: "description",
-              children: typeof description === "function" ? description(renderProps) : description
-            }
-          )
-        ] });
-      }
-    }
-  );
+  ) });
 }
 
 exports.ComboBox = ComboBox;
 exports.ComboBoxEmptyState = ComboBoxEmptyState;
-exports.ComboBoxItem = ComboBoxItem;

package/dist/cjs/combo-box/index.cjs

@@ -3,10 +3,14 @@
 
 var comboBox = require('./combo-box.cjs');
 var comboBoxFuzzy = require('./combo-box-fuzzy.cjs');
+var comboBoxItem = require('./combo-box-item.cjs');
+var comboBoxVariantContext = require('./combo-box-variant-context.cjs');
 
 
 
 exports.ComboBox = comboBox.ComboBox;
 exports.ComboBoxEmptyState = comboBox.ComboBoxEmptyState;
-exports.ComboBoxItem = comboBox.ComboBoxItem;
 exports.ComboBoxFuzzy = comboBoxFuzzy.ComboBoxFuzzy;
+exports.ComboBoxItem = comboBoxItem.ComboBoxItem;
+exports.ComboBoxVariantContext = comboBoxVariantContext.ComboBoxVariantContext;
+exports.useComboBoxVariantContext = comboBoxVariantContext.useComboBoxVariantContext;