@opengovsg/oui 0.0.0-snapshot-20250318052429 → 0.0.0-snapshot-20250318093226

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/banner/banner.cjs

@@ -7,9 +7,9 @@ var 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.0.0/node_modules/lucide-react/dist/esm/icons/circle-alert.cjs');
 var info = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/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.0.0/node_modules/lucide-react/dist/esm/icons/x.cjs');
 
 const i18nStrings = {

package/dist/cjs/button/button.cjs

@@ -7,9 +7,9 @@ var 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');
 
 const Button = react.forwardRef(
   ({

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

@@ -7,9 +7,9 @@ var react = require('react');
 var reactAria = require('react-aria');
 var reactAriaComponents = require('react-aria-components');
 var ouiTheme = require('@opengovsg/oui-theme');
-var field = require('../field/field.cjs');
 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');
 var x = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/x.cjs');

package/dist/cjs/index.cjs

@@ -24,6 +24,7 @@ var tagField = require('./tag-field/tag-field.cjs');
 var select = require('./select/select.cjs');
 var selectItem = require('./select/select-item.cjs');
 var selectVariantContext = require('./select/select-variant-context.cjs');
+var badge = require('./badge/badge.cjs');
 
 
 
@@ -56,3 +57,4 @@ exports.Select = select.Select;
 exports.SelectItem = selectItem.SelectItem;
 exports.SelectVariantContext = selectVariantContext.SelectVariantContext;
 exports.useSelectVariantContext = selectVariantContext.useSelectVariantContext;
+exports.Badge = badge.Badge;

package/dist/cjs/select/select.cjs

@@ -6,11 +6,11 @@ var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
 var reactAriaComponents = require('react-aria-components');
 var ouiTheme = require('@opengovsg/oui-theme');
-var button = require('../button/button.cjs');
-var field = require('../field/field.cjs');
 var utils = require('../system/utils.cjs');
 var selectVariantContext = require('./select-variant-context.cjs');
 var chevronsUpDown = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/chevrons-up-down.cjs');
+var field = require('../field/field.cjs');
+var button = require('../button/button.cjs');
 
 const calculateEstimatedRowHeight = (size) => {
   switch (size) {

package/dist/cjs/system/react-utils/index.cjs

@@ -2,7 +2,9 @@
 'use strict';
 
 var context = require('./context.cjs');
+var refs = require('./refs.cjs');
 
 
 
 exports.createContext = context.createContext;
+exports.useDomRef = refs.useDomRef;

package/dist/cjs/system/react-utils/refs.cjs

@@ -0,0 +1,12 @@
+"use strict";
+'use strict';
+
+var react = require('react');
+
+function useDomRef(ref) {
+  const domRef = react.useRef(null);
+  react.useImperativeHandle(ref, () => domRef.current);
+  return domRef;
+}
+
+exports.useDomRef = useDomRef;

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

@@ -57,8 +57,8 @@ const TagFieldListInner = (props, ref) => {
         item,
         isHighlighted: highlightedIndex === virtualRow.index,
         key: virtualRow.key,
-        ...itemProps,
-        classNames: itemClassNames
+        itemClassNames,
+        ...itemProps
       };
       if (typeof props.children === "function") {
         return props.children(childProps);

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

@@ -6,13 +6,13 @@ var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
 var reactAriaComponents = require('react-aria-components');
 var ouiTheme = require('@opengovsg/oui-theme');
-var field = require('../field/field.cjs');
-var input = require('../input/input.cjs');
 var tagFieldList = require('./tag-field-list.cjs');
 var tagFieldRoot = require('./tag-field-root.cjs');
 var tagFieldTagList = require('./tag-field-tag-list.cjs');
 var tagFieldTrigger = require('./tag-field-trigger.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');
+var field = require('../field/field.cjs');
+var input = require('../input/input.cjs');
 
 function TagField({
   classNames,

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

@@ -5,8 +5,8 @@
 var jsxRuntime = require('react/jsx-runtime');
 var reactAriaComponents = require('react-aria-components');
 var ouiTheme = require('@opengovsg/oui-theme');
-var field = require('../field/field.cjs');
 var textArea = require('../text-area/text-area.cjs');
+var field = require('../field/field.cjs');
 
 function TextAreaField({
   label,

package/dist/cjs/text-field/text-field.cjs

@@ -5,8 +5,8 @@
 var jsxRuntime = require('react/jsx-runtime');
 var reactAriaComponents = require('react-aria-components');
 var ouiTheme = require('@opengovsg/oui-theme');
-var field = require('../field/field.cjs');
 var input = require('../input/input.cjs');
+var field = require('../field/field.cjs');
 
 function TextField({
   label,

package/dist/esm/badge/badge.js

@@ -0,0 +1,40 @@
+"use strict";
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { forwardRef, useMemo } from 'react';
+import { useBadge } from './use-badge.js';
+import X from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/x.js';
+
+const Badge = forwardRef((props, ref) => {
+  const {
+    Component,
+    children,
+    slots,
+    classNames,
+    getChipProps,
+    getCloseButtonProps,
+    startContent,
+    endContent,
+    isCloseable
+  } = useBadge({ ...props, ref });
+  const start = useMemo(() => {
+    if (props.variant === "dot" && !startContent) {
+      return /* @__PURE__ */ jsx("span", { className: slots.dot({ className: classNames?.dot }) });
+    }
+    return startContent;
+  }, [props.variant, startContent, slots, classNames?.dot]);
+  const end = useMemo(() => {
+    if (isCloseable) {
+      return /* @__PURE__ */ jsx("span", { ...getCloseButtonProps(), children: endContent ?? /* @__PURE__ */ jsx(X, { className: "size-full" }) });
+    }
+    return endContent;
+  }, [endContent, getCloseButtonProps, isCloseable]);
+  return /* @__PURE__ */ jsxs(Component, { ...getChipProps(), children: [
+    start,
+    /* @__PURE__ */ jsx("span", { className: slots.content({ className: classNames?.content }), children }),
+    end
+  ] });
+});
+Badge.displayName = "Badge";
+
+export { Badge };

package/dist/esm/badge/index.js

@@ -0,0 +1,2 @@
+"use strict";
+export { Badge } from './badge.js';

package/dist/esm/badge/use-badge.js

@@ -0,0 +1,109 @@
+"use strict";
+import { useMemo, useCallback, cloneElement, isValidElement } from 'react';
+import { mergeProps } from '@react-aria/utils';
+import { useMessageFormatter, useFocusRing, usePress } from 'react-aria';
+import { useDeepCompareMemo } from 'use-deep-compare';
+import { badgeStyles, cn, badgeCloseButtonStyles } from '@opengovsg/oui-theme';
+import { mapPropsVariants } from '../system/utils.js';
+import { useDomRef } from '../system/react-utils/refs.js';
+
+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] = mapPropsVariants(
+    originalProps,
+    badgeStyles.variantKeys
+  );
+  const {
+    ref,
+    as,
+    children,
+    startContent,
+    endContent,
+    onClose,
+    classNames,
+    className,
+    ...props
+  } = _props;
+  const domRef = useDomRef(ref);
+  const Component = useMemo(() => as || "div", [as]);
+  const baseClassName = cn(classNames?.base, className);
+  const formatMessage = useMessageFormatter(i18nStrings);
+  const isCloseable = variantProps.isCloseable || !!onClose;
+  const {
+    focusProps: closeFocusProps,
+    isFocusVisible: isCloseButtonFocusVisible
+  } = useFocusRing();
+  const slots = useDeepCompareMemo(
+    () => ({
+      ...badgeStyles({ isCloseable, ...variantProps }),
+      closeButton: badgeCloseButtonStyles
+    }),
+    [variantProps, isCloseable, badgeStyles, badgeCloseButtonStyles]
+  );
+  const { pressProps: closePressProps } = usePress({
+    isDisabled: !!variantProps?.isDisabled,
+    onPress: onClose
+  });
+  const getContentClone = useCallback(
+    (content) => isValidElement(content) ? cloneElement(content, {
+      // @ts-expect-error types are not full
+      className: content.props?.className
+    }) : null,
+    []
+  );
+  const getChipProps = useCallback(() => {
+    return {
+      ref: domRef,
+      className: slots.base({ className: baseClassName }),
+      "aria-disabled": variantProps?.isDisabled,
+      ...props
+    };
+  }, [baseClassName, domRef, props, slots, variantProps?.isDisabled]);
+  const getCloseButtonProps = useCallback(() => {
+    return {
+      role: "button",
+      tabIndex: 0,
+      className: slots.closeButton({
+        size: variantProps?.size,
+        className: classNames?.closeButton,
+        isFocusVisible: isCloseButtonFocusVisible
+      }),
+      "aria-label": formatMessage("close"),
+      ...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
+  };
+}
+
+export { useBadge };

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.0.0/node_modules/lucide-react/dist/esm/icons/circle-alert.js';
 import Info from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/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.0.0/node_modules/lucide-react/dist/esm/icons/x.js';
 
 const i18nStrings = {

package/dist/esm/button/button.js

@@ -5,9 +5,9 @@ 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';
 
 const Button = forwardRef(
   ({

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

@@ -5,9 +5,9 @@ import { useMemo, useCallback } from 'react';
 import { useMessageFormatter } from 'react-aria';
 import { ListLayout, Provider, ComboBox as ComboBox$1, Input, Button, Popover, Virtualizer, ListBox } from 'react-aria-components';
 import { comboBoxItemStyles, cn, comboBoxStyles, composeTailwindRenderProps, composeRenderProps, comboBoxClearButtonStyles } from '@opengovsg/oui-theme';
-import { Label, FieldGroup, Description, FieldError } from '../field/field.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.0.0/node_modules/lucide-react/dist/esm/icons/chevron-up.js';
 import ChevronDown from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/chevron-down.js';
 import X from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/x.js';

package/dist/esm/index.js

@@ -22,3 +22,4 @@ export { TagField } from './tag-field/tag-field.js';
 export { Select } from './select/select.js';
 export { SelectItem } from './select/select-item.js';
 export { SelectVariantContext, useSelectVariantContext } from './select/select-variant-context.js';
+export { Badge } from './badge/badge.js';

package/dist/esm/select/select.js

@@ -4,11 +4,11 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import { useMemo } from 'react';
 import { ListLayout, Provider, Select as Select$1, SelectValue, Popover, Virtualizer, ListBox } from 'react-aria-components';
 import { selectStyles, composeRenderProps } from '@opengovsg/oui-theme';
-import { Button } from '../button/button.js';
-import { Label, Description } from '../field/field.js';
 import { mapPropsVariants } from '../system/utils.js';
 import { SelectVariantContext } from './select-variant-context.js';
 import ChevronsUpDown from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/chevrons-up-down.js';
+import { Label, Description } from '../field/field.js';
+import { Button } from '../button/button.js';
 
 const calculateEstimatedRowHeight = (size) => {
   switch (size) {

package/dist/esm/system/react-utils/index.js

@@ -1,2 +1,3 @@
 "use strict";
 export { createContext } from './context.js';
+export { useDomRef } from './refs.js';

package/dist/esm/system/react-utils/refs.js

@@ -0,0 +1,10 @@
+"use strict";
+import { useRef, useImperativeHandle } from 'react';
+
+function useDomRef(ref) {
+  const domRef = useRef(null);
+  useImperativeHandle(ref, () => domRef.current);
+  return domRef;
+}
+
+export { useDomRef };

package/dist/esm/tag-field/tag-field-list.js

@@ -55,8 +55,8 @@ const TagFieldListInner = (props, ref) => {
         item,
         isHighlighted: highlightedIndex === virtualRow.index,
         key: virtualRow.key,
-        ...itemProps,
-        classNames: itemClassNames
+        itemClassNames,
+        ...itemProps
       };
       if (typeof props.children === "function") {
         return props.children(childProps);

package/dist/esm/tag-field/tag-field.js

@@ -4,13 +4,13 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { createElement } from 'react';
 import { composeRenderProps, Popover } from 'react-aria-components';
 import { tagFieldStyles } from '@opengovsg/oui-theme';
-import { Label, FieldGroup, Description, FieldError } from '../field/field.js';
-import { Input } from '../input/input.js';
 import { TagFieldList, TagFieldListItem } from './tag-field-list.js';
 import { TagFieldRoot } from './tag-field-root.js';
 import { TagFieldTagList } from './tag-field-tag-list.js';
 import { TagFieldTrigger } from './tag-field-trigger.js';
 import ChevronDown from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/chevron-down.js';
+import { Label, FieldGroup, Description, FieldError } from '../field/field.js';
+import { Input } from '../input/input.js';
 
 function TagField({
   classNames,

package/dist/esm/text-area-field/text-area-field.js

@@ -3,8 +3,8 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { TextField } from 'react-aria-components';
 import { composeTailwindRenderProps } from '@opengovsg/oui-theme';
-import { Label, Description, FieldError } from '../field/field.js';
 import { TextArea } from '../text-area/text-area.js';
+import { Label, Description, FieldError } from '../field/field.js';
 
 function TextAreaField({
   label,

package/dist/esm/text-field/text-field.js

@@ -3,8 +3,8 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { TextField as TextField$1 } from 'react-aria-components';
 import { composeTailwindRenderProps } from '@opengovsg/oui-theme';
-import { Label, Description, FieldError } from '../field/field.js';
 import { Input } from '../input/input.js';
+import { Label, Description, FieldError } from '../field/field.js';
 
 function TextField({
   label,

package/dist/types/badge/badge.d.ts

@@ -0,0 +1,3 @@
+import type { UseBadgeProps } from "./use-badge";
+export declare const Badge: import("react").ForwardRefExoticComponent<Omit<UseBadgeProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=badge.d.ts.map

package/dist/types/badge/badge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"badge.d.ts","sourceRoot":"","sources":["../../../src/badge/badge.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAA;AAGhD,eAAO,MAAM,KAAK,uHAwChB,CAAA"}

package/dist/types/badge/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./badge";
+//# sourceMappingURL=index.d.ts.map

package/dist/types/badge/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/badge/index.tsx"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAA"}

package/dist/types/badge/use-badge.d.ts

@@ -0,0 +1,166 @@
+import type { PressEvent } from "@react-types/shared";
+import type { ReactNode } from "react";
+import type { BadgeSlots, BadgeVariantProps, SlotsToClasses } from "@opengovsg/oui-theme";
+import type { ReactRef } from "../system/react-utils";
+import type { HtmlUiProps, PropGetter } from "../system/types";
+export interface UseBadgeProps extends HtmlUiProps, BadgeVariantProps {
+    ref?: ReactRef<HTMLDivElement | null>;
+    /**
+     * Element to be rendered in the left side of the badge.
+     */
+    startContent?: React.ReactNode;
+    /**
+     * Element to be rendered in the right side of the badge.
+     * if you pass this prop and the `onClose` prop, the passed element
+     * will have the close button props and it will be rendered instead of the
+     * default close button.
+     */
+    endContent?: React.ReactNode;
+    /**
+     * Classname or List of classes to change the classNames of the element.
+     * if `className` is passed, it will be added to the base slot.
+     *
+     * @example
+     * ```ts
+     * <Badge classNames={{
+     *    base:"base-classes",
+     *    dot: "dot-classes",
+     *    content: "content-classes",
+     *    closeButton: "close-button-classes",
+     * }} />
+     * ```
+     */
+    classNames?: SlotsToClasses<BadgeSlots | "closeButton">;
+    /**
+     * Callback fired when the badge is closed. if you pass this prop,
+     * the badge will display a close button in the `endContent` slot.
+     * @param e PressEvent
+     */
+    onClose?: (e: PressEvent) => void;
+}
+export declare function useBadge(originalProps: UseBadgeProps): {
+    Component: import("../system/types").As<any>;
+    children: ReactNode;
+    slots: {
+        closeButton: import("tailwind-variants").TVReturnType<{
+            size: {
+                xs: string;
+                sm: string;
+                md: string;
+            };
+        }, undefined, string, {
+            responsiveVariants?: boolean | (string | number | symbol)[] | {
+                size?: boolean | (string | number | symbol)[] | undefined;
+                isFocusVisible?: boolean | (string | number | symbol)[] | undefined;
+            } | undefined;
+        } & import("tailwind-variants/dist/config.js").TWMConfig & {
+            twMergeConfig: {
+                extend: {
+                    theme: {};
+                    classGroups: {
+                        prose: {
+                            prose: (() => boolean)[];
+                        }[];
+                    };
+                };
+            };
+        }, {
+            isFocusVisible: {
+                false: string;
+                true: string;
+            };
+        }, undefined, import("tailwind-variants").TVReturnType<{
+            isFocusVisible: {
+                false: string;
+                true: string;
+            };
+        }, undefined, "outline-offset-2 outline-none", {
+            responsiveVariants?: boolean | (string | number | symbol)[] | {
+                isFocusVisible?: boolean | (string | number | symbol)[] | undefined;
+            } | undefined;
+        } & import("tailwind-variants/dist/config.js").TWMConfig & {
+            twMergeConfig: {
+                extend: {
+                    theme: {};
+                    classGroups: {
+                        prose: {
+                            prose: (() => boolean)[];
+                        }[];
+                    };
+                };
+            };
+        }, {
+            isFocusVisible: {
+                false: string;
+                true: string;
+            };
+        }, undefined, import("tailwind-variants").TVReturnType<{
+            isFocusVisible: {
+                false: string;
+                true: string;
+            };
+        }, undefined, "outline-offset-2 outline-none", import("tailwind-variants/dist/config.js").TVConfig<{
+            isFocusVisible: {
+                false: string;
+                true: string;
+            };
+        }, {
+            isFocusVisible: {
+                false: string;
+                true: string;
+            };
+        }>, unknown, unknown, undefined>>>;
+        base: ((slotProps?: ({
+            size?: "md" | "sm" | "xs" | undefined;
+            color?: "sub" | "main" | "neutral" | "critical" | "warning" | "success" | undefined;
+            radius?: "lg" | "md" | "sm" | "none" | "full" | undefined;
+            variant?: "solid" | "outline" | "dot" | "subtle" | undefined;
+            isDisabled?: boolean | undefined;
+            isCloseable?: boolean | undefined;
+        } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string) & ((slotProps?: ({
+            size?: "md" | "sm" | "xs" | undefined;
+            color?: "sub" | "main" | "neutral" | "critical" | "warning" | "success" | undefined;
+            radius?: "lg" | "md" | "sm" | "none" | "full" | undefined;
+            variant?: "solid" | "outline" | "dot" | "subtle" | undefined;
+            isDisabled?: boolean | undefined;
+            isCloseable?: boolean | undefined;
+        } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string);
+        dot: ((slotProps?: ({
+            size?: "md" | "sm" | "xs" | undefined;
+            color?: "sub" | "main" | "neutral" | "critical" | "warning" | "success" | undefined;
+            radius?: "lg" | "md" | "sm" | "none" | "full" | undefined;
+            variant?: "solid" | "outline" | "dot" | "subtle" | undefined;
+            isDisabled?: boolean | undefined;
+            isCloseable?: boolean | undefined;
+        } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string) & ((slotProps?: ({
+            size?: "md" | "sm" | "xs" | undefined;
+            color?: "sub" | "main" | "neutral" | "critical" | "warning" | "success" | undefined;
+            radius?: "lg" | "md" | "sm" | "none" | "full" | undefined;
+            variant?: "solid" | "outline" | "dot" | "subtle" | undefined;
+            isDisabled?: boolean | undefined;
+            isCloseable?: boolean | undefined;
+        } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string);
+        content: ((slotProps?: ({
+            size?: "md" | "sm" | "xs" | undefined;
+            color?: "sub" | "main" | "neutral" | "critical" | "warning" | "success" | undefined;
+            radius?: "lg" | "md" | "sm" | "none" | "full" | undefined;
+            variant?: "solid" | "outline" | "dot" | "subtle" | undefined;
+            isDisabled?: boolean | undefined;
+            isCloseable?: boolean | undefined;
+        } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string) & ((slotProps?: ({
+            size?: "md" | "sm" | "xs" | undefined;
+            color?: "sub" | "main" | "neutral" | "critical" | "warning" | "success" | undefined;
+            radius?: "lg" | "md" | "sm" | "none" | "full" | undefined;
+            variant?: "solid" | "outline" | "dot" | "subtle" | undefined;
+            isDisabled?: boolean | undefined;
+            isCloseable?: boolean | undefined;
+        } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string);
+    };
+    classNames: SlotsToClasses<"content" | "base" | "dot" | "closeButton"> | undefined;
+    isCloseable: boolean;
+    startContent: import("react").DetailedReactHTMLElement<import("react").HTMLAttributes<HTMLElement>, HTMLElement> | null;
+    endContent: import("react").DetailedReactHTMLElement<import("react").HTMLAttributes<HTMLElement>, HTMLElement> | null;
+    getCloseButtonProps: PropGetter;
+    getChipProps: PropGetter;
+};
+//# sourceMappingURL=use-badge.d.ts.map

package/dist/types/badge/use-badge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-badge.d.ts","sourceRoot":"","sources":["../../../src/badge/use-badge.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAA;AACrD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAOtC,OAAO,KAAK,EACV,UAAU,EACV,iBAAiB,EACjB,cAAc,EACf,MAAM,sBAAsB,CAAA;AAG7B,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AACrD,OAAO,KAAK,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAA;AAI9D,MAAM,WAAW,aAAc,SAAQ,WAAW,EAAE,iBAAiB;IACnE,GAAG,CAAC,EAAE,QAAQ,CAAC,cAAc,GAAG,IAAI,CAAC,CAAA;IACrC;;OAEG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC9B;;;;;OAKG;IACH,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAE5B;;;;;;;;;;;;;OAaG;IACH,UAAU,CAAC,EAAE,cAAc,CAAC,UAAU,GAAG,aAAa,CAAC,CAAA;IACvD;;;;OAIG;IACH,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAA;CAClC;AAiBD,wBAAgB,QAAQ,CAAC,aAAa,EAAE,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAiGpD"}

package/dist/types/index.d.mts

@@ -14,4 +14,5 @@ export * from "./combo-box";
 export * from "./banner";
 export * from "./tag-field";
 export * from "./select";
+export * from "./badge";
 //# sourceMappingURL=index.d.ts.map

package/dist/types/index.d.ts

@@ -14,4 +14,5 @@ export * from "./combo-box";
 export * from "./banner";
 export * from "./tag-field";
 export * from "./select";
+export * from "./badge";
 //# sourceMappingURL=index.d.ts.map

package/dist/types/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,eAAe,CAAA;AAC7B,cAAc,UAAU,CAAA;AACxB,cAAc,WAAW,CAAA;AACzB,cAAc,UAAU,CAAA;AACxB,cAAc,iBAAiB,CAAA;AAC/B,cAAc,SAAS,CAAA;AACvB,cAAc,cAAc,CAAA;AAC5B,cAAc,SAAS,CAAA;AACvB,cAAc,aAAa,CAAA;AAC3B,cAAc,mBAAmB,CAAA;AACjC,cAAc,aAAa,CAAA;AAC3B,cAAc,UAAU,CAAA;AACxB,cAAc,aAAa,CAAA;AAC3B,cAAc,UAAU,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,eAAe,CAAA;AAC7B,cAAc,UAAU,CAAA;AACxB,cAAc,WAAW,CAAA;AACzB,cAAc,UAAU,CAAA;AACxB,cAAc,iBAAiB,CAAA;AAC/B,cAAc,SAAS,CAAA;AACvB,cAAc,cAAc,CAAA;AAC5B,cAAc,SAAS,CAAA;AACvB,cAAc,aAAa,CAAA;AAC3B,cAAc,mBAAmB,CAAA;AACjC,cAAc,aAAa,CAAA;AAC3B,cAAc,UAAU,CAAA;AACxB,cAAc,aAAa,CAAA;AAC3B,cAAc,UAAU,CAAA;AACxB,cAAc,SAAS,CAAA"}

package/dist/types/system/react-utils/index.d.ts

@@ -1,2 +1,3 @@
 export * from "./context";
+export * from "./refs";
 //# sourceMappingURL=index.d.ts.map

package/dist/types/system/react-utils/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/system/react-utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/system/react-utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAA;AACzB,cAAc,QAAQ,CAAA"}

package/dist/types/system/react-utils/refs.d.ts

@@ -0,0 +1,4 @@
+import type React from "react";
+export type ReactRef<T> = React.RefObject<T> | React.Ref<T>;
+export declare function useDomRef<T extends HTMLElement = HTMLElement>(ref?: ReactRef<T | null>): React.RefObject<T | null>;
+//# sourceMappingURL=refs.d.ts.map

package/dist/types/system/react-utils/refs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"refs.d.ts","sourceRoot":"","sources":["../../../../src/system/react-utils/refs.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,MAAM,MAAM,QAAQ,CAAC,CAAC,IAAI,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAA;AAE3D,wBAAgB,SAAS,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW,EAC3D,GAAG,CAAC,EAAE,QAAQ,CAAC,CAAC,GAAG,IAAI,CAAC,6BAOzB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opengovsg/oui",
-  "version": "0.0.0-snapshot-20250318052429",
+  "version": "0.0.0-snapshot-20250318093226",
   "sideEffects": false,
   "license": "SEE LICENSE IN LICENSE.md",
   "type": "module",
@@ -47,10 +47,10 @@
     "prettier": "^3.5.0",
     "tsx": "^4.19.2",
     "typescript": "5.7.3",
-    "@opengovsg/oui-theme": "0.0.5",
+    "@oui/chromatic": "0.0.0",
     "@oui/eslint-config": "0.0.0",
+    "@opengovsg/oui-theme": "0.0.0-snapshot-20250318093226",
     "@oui/prettier-config": "0.0.0",
-    "@oui/chromatic": "0.0.0",
     "@oui/typescript-config": "0.0.0"
   },
   "dependencies": {
@@ -78,11 +78,12 @@
   "peerDependencies": {
     "motion": ">=11.12.0 || >=12.0.0-alpha.1",
     "react-aria-components": "^1.7.1",
-    "@opengovsg/oui-theme": "0.0.5"
+    "@opengovsg/oui-theme": "0.0.0-snapshot-20250318093226"
   },
   "prettier": "@oui/prettier-config",
   "scripts": {
     "build": "tsx ../../tooling/build-scripts/main.ts --dts --clean",
+    "changeset": "cd ../.. && pnpm changeset",
     "dev": "tsx ../../tooling/build-scripts/main.ts --watch",
     "lint": "eslint . --max-warnings 0",
     "lint:fix": "eslint . --fix",