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

@@ -1,10 +1,6 @@
 "use strict";
 'use strict';
 
-var toggle = require('./toggle/toggle.cjs');
-var textField = require('./text-field/text-field.cjs');
-var textArea = require('./text-area/text-area.cjs');
-var textAreaField = require('./text-area-field/text-area-field.cjs');
 var useControllableState = require('./hooks/use-controllable-state.cjs');
 var button = require('./button/button.cjs');
 var govtBanner = require('./govt-banner/govt-banner.cjs');
@@ -12,9 +8,13 @@ var ripple = require('./ripple/ripple.cjs');
 var useRipple = require('./ripple/use-ripple.cjs');
 var spinner = require('./spinner/spinner.cjs');
 var useSpinner = require('./spinner/use-spinner.cjs');
+var toggle = require('./toggle/toggle.cjs');
 var skipNavLink = require('./skip-nav-link/skip-nav-link.cjs');
 var input = require('./input/input.cjs');
+var textField = require('./text-field/text-field.cjs');
 var field = require('./field/field.cjs');
+var textArea = require('./text-area/text-area.cjs');
+var textAreaField = require('./text-area-field/text-area-field.cjs');
 var comboBox = require('./combo-box/combo-box.cjs');
 var comboBoxFuzzy = require('./combo-box/combo-box-fuzzy.cjs');
 var comboBoxItem = require('./combo-box/combo-box-item.cjs');
@@ -24,13 +24,10 @@ 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');
 
 
 
-exports.Toggle = toggle.Toggle;
-exports.TextField = textField.TextField;
-exports.TextArea = textArea.TextArea;
-exports.TextAreaField = textAreaField.TextAreaField;
 exports.useControllableState = useControllableState.useControllableState;
 exports.Button = button.Button;
 exports.GovtBanner = govtBanner.GovtBanner;
@@ -38,12 +35,16 @@ exports.Ripple = ripple.Ripple;
 exports.useRipple = useRipple.useRipple;
 exports.Spinner = spinner.Spinner;
 exports.useSpinner = useSpinner.useSpinner;
+exports.Toggle = toggle.Toggle;
 exports.SkipNavLink = skipNavLink.SkipNavLink;
 exports.Input = input.Input;
+exports.TextField = textField.TextField;
 exports.Description = field.Description;
 exports.FieldError = field.FieldError;
 exports.FieldGroup = field.FieldGroup;
 exports.Label = field.Label;
+exports.TextArea = textArea.TextArea;
+exports.TextAreaField = textAreaField.TextAreaField;
 exports.ComboBox = comboBox.ComboBox;
 exports.ComboBoxEmptyState = comboBox.ComboBoxEmptyState;
 exports.ComboBoxFuzzy = comboBoxFuzzy.ComboBoxFuzzy;
@@ -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/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/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/index.js

@@ -1,8 +1,4 @@
 "use strict";
-export { Toggle } from './toggle/toggle.js';
-export { TextField } from './text-field/text-field.js';
-export { TextArea } from './text-area/text-area.js';
-export { TextAreaField } from './text-area-field/text-area-field.js';
 export { useControllableState } from './hooks/use-controllable-state.js';
 export { Button } from './button/button.js';
 export { GovtBanner } from './govt-banner/govt-banner.js';
@@ -10,9 +6,13 @@ export { Ripple } from './ripple/ripple.js';
 export { useRipple } from './ripple/use-ripple.js';
 export { Spinner } from './spinner/spinner.js';
 export { useSpinner } from './spinner/use-spinner.js';
+export { Toggle } from './toggle/toggle.js';
 export { SkipNavLink } from './skip-nav-link/skip-nav-link.js';
 export { Input } from './input/input.js';
+export { TextField } from './text-field/text-field.js';
 export { Description, FieldError, FieldGroup, Label } from './field/field.js';
+export { TextArea } from './text-area/text-area.js';
+export { TextAreaField } from './text-area-field/text-area-field.js';
 export { ComboBox, ComboBoxEmptyState } from './combo-box/combo-box.js';
 export { ComboBoxFuzzy } from './combo-box/combo-box-fuzzy.js';
 export { ComboBoxItem } from './combo-box/combo-box-item.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/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/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-20250318065939",
+  "version": "0.0.0-snapshot-20250318093226",
   "sideEffects": false,
   "license": "SEE LICENSE IN LICENSE.md",
   "type": "module",
@@ -47,9 +47,9 @@
     "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/typescript-config": "0.0.0"
   },
@@ -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",