@opengovsg/oui 0.0.6 → 0.0.8

package/dist/esm/select/select.js

@@ -0,0 +1,101 @@
+"use strict";
+"use client";
+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 { 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) {
+    case "xs":
+      return 44;
+    case "sm":
+      return 44;
+    case "md":
+      return 48;
+  }
+};
+function Select({
+  label,
+  description,
+  classNames,
+  ...originalProps
+}) {
+  const [_props, variantProps] = mapPropsVariants(
+    originalProps,
+    selectStyles.variantKeys
+  );
+  const { items, children, listLayoutOptions, ...props } = _props;
+  const styles = selectStyles(variantProps);
+  const layout = useMemo(() => {
+    return new ListLayout({
+      estimatedRowHeight: calculateEstimatedRowHeight(
+        variantProps.size ?? "md"
+      ),
+      ...listLayoutOptions
+    });
+  }, [listLayoutOptions, variantProps.size]);
+  return /* @__PURE__ */ jsx(Provider, { values: [[SelectVariantContext, variantProps]], children: /* @__PURE__ */ jsxs(
+    Select$1,
+    {
+      className: composeRenderProps(
+        props.className,
+        (className, renderProps) => styles.base({ className, ...renderProps })
+      ),
+      ...props,
+      children: [
+        label && /* @__PURE__ */ jsx(Label, { size: variantProps.size, className: classNames?.label, children: label }),
+        /* @__PURE__ */ jsxs(
+          Button,
+          {
+            size: variantProps.size,
+            variant: variantProps.variant ?? selectStyles.defaultVariants.variant,
+            color: variantProps.color ?? selectStyles.defaultVariants.color,
+            className: composeRenderProps(
+              classNames?.trigger,
+              (className, renderProps) => styles.trigger({ className, ...renderProps })
+            ),
+            children: [
+              /* @__PURE__ */ jsx(
+                SelectValue,
+                {
+                  className: styles.selectedText({
+                    className: classNames?.selectedText
+                  })
+                }
+              ),
+              /* @__PURE__ */ jsx(ChevronsUpDown, { className: "h-4 w-4" })
+            ]
+          }
+        ),
+        description && /* @__PURE__ */ jsx(
+          Description,
+          {
+            size: variantProps.size,
+            className: classNames?.description,
+            children: description
+          }
+        ),
+        /* @__PURE__ */ jsx(Popover, { className: styles.popover({ className: classNames?.popover }), children: /* @__PURE__ */ jsx(Virtualizer, { layout, children: /* @__PURE__ */ jsx(
+          ListBox,
+          {
+            items,
+            shouldFocusWrap: true,
+            className: composeRenderProps(
+              classNames?.list,
+              (className, renderProps) => styles.list({ className, ...renderProps })
+            ),
+            children
+          }
+        ) }) })
+      ]
+    }
+  ) });
+}
+
+export { Select };

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

@@ -1,8 +1,8 @@
 "use strict";
 "use client";
 import { useMemo, useCallback } from 'react';
-import { spinnerStyles, cn } from '@opengovsg/oui-theme';
 import { useDeepCompareMemo } from 'use-deep-compare';
+import { spinnerStyles, cn } from '@opengovsg/oui-theme';
 import { mapPropsVariants } from '../system/utils.js';
 
 const useSpinner = (originalProps) => {

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

@@ -19,11 +19,7 @@ function createContext(options = {}) {
     }
     return context;
   }
-  return [
-    Context.Provider,
-    useContext$1,
-    Context
-  ];
+  return [Context, useContext$1];
 }
 
 export { createContext };

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

@@ -1,8 +1,9 @@
 "use strict";
+"use client";
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { createContext, useContext, createElement } from 'react';
-import { tagFieldItemStyles, dataAttr } from '@opengovsg/oui-theme';
 import { useContextProps } from 'react-aria-components';
+import { tagFieldItemStyles, dataAttr } from '@opengovsg/oui-theme';
 import { forwardRefGeneric } from '../system/utils.js';
 import { TagFieldStateContext } from './tag-field-state-context.js';
 
@@ -54,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-trigger.js

@@ -1,4 +1,5 @@
 "use strict";
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import { createContext } from 'react';
 import { useContextProps } from 'react-aria-components';

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

@@ -2,15 +2,15 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { createElement } from 'react';
-import { tagFieldStyles } from '@opengovsg/oui-theme';
 import { composeRenderProps, Popover } from 'react-aria-components';
+import { tagFieldStyles } from '@opengovsg/oui-theme';
+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/tag-field/use-tag-field.js

@@ -125,6 +125,7 @@ function useTagField(props, state) {
   });
   const { isInvalid, validationErrors, validationDetails } = state.displayValidation;
   const inputProps = getInputProps({
+    placeholder: props.placeholder,
     ref: inputRef,
     "aria-label": props["aria-label"],
     "aria-labelledby": props["aria-labelledby"],

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

@@ -2,8 +2,8 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
-import { composeRenderProps, textAreaStyles } from '@opengovsg/oui-theme';
 import { TextArea as TextArea$1 } from 'react-aria-components';
+import { composeRenderProps, textAreaStyles } from '@opengovsg/oui-theme';
 
 const TextArea = forwardRef(
   ({ size, variant, isDisabled, ...props }, ref) => {

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

@@ -1,8 +1,8 @@
 "use strict";
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { composeTailwindRenderProps } from '@opengovsg/oui-theme';
 import { TextField } from 'react-aria-components';
+import { composeTailwindRenderProps } from '@opengovsg/oui-theme';
 import { TextArea } from '../text-area/text-area.js';
 import { Label, Description, FieldError } from '../field/field.js';
 

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

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

package/dist/esm/toggle/toggle.js

@@ -2,9 +2,9 @@
 "use client";
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useCallback, cloneElement } from 'react';
-import { toggleStyles, composeTailwindRenderProps } from '@opengovsg/oui-theme';
 import { mergeProps } from 'react-aria';
 import { Switch } from 'react-aria-components';
+import { toggleStyles, composeTailwindRenderProps } from '@opengovsg/oui-theme';
 import { mapPropsVariants } from '../system/utils.js';
 
 const Toggle = ({

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/banner/banner.d.ts

@@ -1,6 +1,7 @@
-import { ReactNode } from "react";
-import { BannerSlots, bannerStyles, SlotsToClasses, VariantProps } from "@opengovsg/oui-theme";
-import { AriaDisclosureProps } from "react-aria";
+import type { ReactNode } from "react";
+import type { AriaDisclosureProps } from "react-aria";
+import type { BannerSlots, SlotsToClasses, VariantProps } from "@opengovsg/oui-theme";
+import { bannerStyles } from "@opengovsg/oui-theme";
 interface BannerProps extends VariantProps<typeof bannerStyles>, AriaDisclosureProps {
     /**
      * The banner start content. Will default to the relevant icons based on the `variant` prop.

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

@@ -1 +1 @@
-{"version":3,"file":"banner.d.ts","sourceRoot":"","sources":["../../../src/banner/banner.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAmB,MAAM,OAAO,CAAA;AAClD,OAAO,EACL,WAAW,EACX,YAAY,EACZ,cAAc,EACd,YAAY,EACb,MAAM,sBAAsB,CAAA;AAE7B,OAAO,EACL,mBAAmB,EAIpB,MAAM,YAAY,CAAA;AAKnB,UAAU,WACR,SAAQ,YAAY,CAAC,OAAO,YAAY,CAAC,EACvC,mBAAmB;IACrB;;OAEG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC9B,QAAQ,EAAE,SAAS,CAAA;IACnB;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,UAAU,CAAC,EAAE,cAAc,CAAC,WAAW,CAAC,CAAA;CACzC;AAiBD,eAAO,MAAM,MAAM,2IAUhB,WAAW,mDA6Eb,CAAA"}
+{"version":3,"file":"banner.d.ts","sourceRoot":"","sources":["../../../src/banner/banner.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACtC,OAAO,KAAK,EAAE,mBAAmB,EAAoB,MAAM,YAAY,CAAA;AAMvE,OAAO,KAAK,EACV,WAAW,EACX,cAAc,EACd,YAAY,EACb,MAAM,sBAAsB,CAAA;AAC7B,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAA;AAInD,UAAU,WACR,SAAQ,YAAY,CAAC,OAAO,YAAY,CAAC,EACvC,mBAAmB;IACrB;;OAEG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC9B,QAAQ,EAAE,SAAS,CAAA;IACnB;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,UAAU,CAAC,EAAE,cAAc,CAAC,WAAW,CAAC,CAAA;CACzC;AAiBD,eAAO,MAAM,MAAM,2IAUhB,WAAW,mDA6Eb,CAAA"}

package/dist/types/button/button.d.ts

@@ -1,7 +1,6 @@
-import type { VariantProps } from "@opengovsg/oui-theme";
 import type { ButtonProps as AriaButtonProps } from "react-aria-components";
-import { buttonStyles } from "@opengovsg/oui-theme";
-interface _ButtonProps extends Omit<AriaButtonProps, "children">, VariantProps<typeof buttonStyles> {
+import type { ButtonVariantProps } from "@opengovsg/oui-theme";
+export interface ButtonProps extends Omit<AriaButtonProps, "children">, ButtonVariantProps {
     /**
      * Whether the button should display a ripple effect on press.
      * @defaultValue false
@@ -32,17 +31,9 @@ interface _ButtonProps extends Omit<AriaButtonProps, "children">, VariantProps<t
      */
     spinnerPlacement?: "start" | "end";
 }
-export type ButtonProps = Omit<_ButtonProps, "aria-label"> & ({
-    isIconOnly: true;
-    "aria-label": string;
-} | {
-    isIconOnly?: false;
-    "aria-label"?: string;
-});
 /**
  * You probably do not want to use this component if you are rendering a link.
  * Use `LinkButton` component instead.
  */
 export declare const Button: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
-export {};
 //# sourceMappingURL=button.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/button/button.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAA;AACxD,OAAO,KAAK,EAAE,WAAW,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAA;AAE3E,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAA;AAQnD,UAAU,YACR,SAAQ,IAAI,CAAC,eAAe,EAAE,UAAU,CAAC,EACvC,YAAY,CAAC,OAAO,YAAY,CAAC;IACnC;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB;;OAEG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC9B;;OAEG;IACH,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC5B;;;OAGG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAEzB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;IAEpB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,GAAG,KAAK,CAAA;CACnC;AAED,MAAM,MAAM,WAAW,GAAG,IAAI,CAAC,YAAY,EAAE,YAAY,CAAC,GACxD,CACI;IAAE,UAAU,EAAE,IAAI,CAAC;IAAC,YAAY,EAAE,MAAM,CAAA;CAAE,GAC1C;IAAE,UAAU,CAAC,EAAE,KAAK,CAAC;IAAC,YAAY,CAAC,EAAE,MAAM,CAAA;CAAE,CAChD,CAAA;AAEH;;;GAGG;AACH,eAAO,MAAM,MAAM,2GAwElB,CAAA"}
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/button/button.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAA;AAK3E,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAA;AAO9D,MAAM,WAAW,WACf,SAAQ,IAAI,CAAC,eAAe,EAAE,UAAU,CAAC,EACvC,kBAAkB;IACpB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB;;OAEG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC9B;;OAEG;IACH,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC5B;;;OAGG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAEzB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;IAEpB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,GAAG,KAAK,CAAA;CACnC;AAED;;;GAGG;AACH,eAAO,MAAM,MAAM,2GAwElB,CAAA"}

package/dist/types/combo-box/combo-box-fuzzy.d.ts

@@ -1,11 +1,20 @@
-import { SlotsToClasses } from "@opengovsg/oui-theme";
-import { SetRequired } from "type-fest";
-import { ComboBoxItem, ComboBoxProps } from "./combo-box";
+import type { Key } from "react-aria";
+import type { SetRequired } from "type-fest";
+import type { ComboBoxItemSlots, SlotsToClasses } from "@opengovsg/oui-theme";
+import type { ComboBoxProps } from "./combo-box";
+import { ComboBoxItem } from "./combo-box-item";
+type ComboBoxItem = {
+    id: Key;
+    textValue: string;
+    description?: string;
+};
 export interface ComboBoxFuzzyProps<T extends ComboBoxItem = ComboBoxItem> extends SetRequired<ComboBoxProps<T>, "inputValue" | "onInputChange" | "onSelectionChange" | "selectedKey" | "items"> {
-    itemClassNames?: ComboBoxProps<T>["itemClassNames"] & SlotsToClasses<"highlight">;
+    itemClassNames?: SlotsToClasses<ComboBoxItemSlots> & SlotsToClasses<"highlight">;
 }
 /**
  * Controlled variant of ComboBox, allows for fuzzy search and item highlight.
+ * @deprecated Use ComboBox instead (and bring your own fuzzysearch).
  */
-export declare function ComboBoxFuzzy<T extends ComboBoxItem = ComboBoxItem>({ items, itemClassNames, onSelectionChange: onSelectionChangeProp, onInputChange: onInputChangeProp, ...props }: ComboBoxFuzzyProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function ComboBoxFuzzy<T extends ComboBoxItem = ComboBoxItem>(originalProps: ComboBoxFuzzyProps<T>): import("react/jsx-runtime").JSX.Element;
+export {};
 //# sourceMappingURL=combo-box-fuzzy.d.ts.map

package/dist/types/combo-box/combo-box-fuzzy.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"combo-box-fuzzy.d.ts","sourceRoot":"","sources":["../../../src/combo-box/combo-box-fuzzy.tsx"],"names":[],"mappings":"AAGA,OAAO,EAGL,cAAc,EACf,MAAM,sBAAsB,CAAA;AAG7B,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AAEvC,OAAO,EAAY,YAAY,EAAE,aAAa,EAAE,MAAM,aAAa,CAAA;AA8BnE,MAAM,WAAW,kBAAkB,CAAC,CAAC,SAAS,YAAY,GAAG,YAAY,CACvE,SAAQ,WAAW,CACjB,aAAa,CAAC,CAAC,CAAC,EACd,YAAY,GACZ,eAAe,GACf,mBAAmB,GACnB,aAAa,GACb,OAAO,CACV;IACD,cAAc,CAAC,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC,gBAAgB,CAAC,GACjD,cAAc,CAAC,WAAW,CAAC,CAAA;CAC9B;AAED;;GAEG;AACH,wBAAgB,aAAa,CAAC,CAAC,SAAS,YAAY,GAAG,YAAY,EAAE,EACnE,KAAK,EACL,cAAc,EACd,iBAAiB,EAAE,qBAAqB,EACxC,aAAa,EAAE,iBAAiB,EAChC,GAAG,KAAK,EACT,EAAE,kBAAkB,CAAC,CAAC,CAAC,2CAyEvB"}
+{"version":3,"file":"combo-box-fuzzy.d.ts","sourceRoot":"","sources":["../../../src/combo-box/combo-box-fuzzy.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,YAAY,CAAA;AACrC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AAK5C,OAAO,KAAK,EAEV,iBAAiB,EACjB,cAAc,EACf,MAAM,sBAAsB,CAAA;AAO7B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAA;AAGhD,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAA;AAQ/C,KAAK,YAAY,GAAG;IAClB,EAAE,EAAE,GAAG,CAAA;IACP,SAAS,EAAE,MAAM,CAAA;IACjB,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB,CAAA;AAwBD,MAAM,WAAW,kBAAkB,CAAC,CAAC,SAAS,YAAY,GAAG,YAAY,CACvE,SAAQ,WAAW,CACjB,aAAa,CAAC,CAAC,CAAC,EACd,YAAY,GACZ,eAAe,GACf,mBAAmB,GACnB,aAAa,GACb,OAAO,CACV;IACD,cAAc,CAAC,EAAE,cAAc,CAAC,iBAAiB,CAAC,GAChD,cAAc,CAAC,WAAW,CAAC,CAAA;CAC9B;AAED;;;GAGG;AACH,wBAAgB,aAAa,CAAC,CAAC,SAAS,YAAY,GAAG,YAAY,EACjE,aAAa,EAAE,kBAAkB,CAAC,CAAC,CAAC,2CAwGrC"}

package/dist/types/combo-box/combo-box-item.d.ts

@@ -0,0 +1,11 @@
+import type { ListBoxItemProps } from "react-aria-components";
+import type { ComboBoxItemSlots, ComboBoxItemVariantProps, SlotsToClasses } from "@opengovsg/oui-theme";
+export interface ComboBoxItemProps extends ListBoxItemProps, ComboBoxItemVariantProps {
+    /**
+     * Description for the item, if any
+     */
+    description?: React.ReactNode;
+    classNames?: SlotsToClasses<ComboBoxItemSlots>;
+}
+export declare const ComboBoxItem: import("../system/utils").InternalForwardRefRenderFunction<import("../system/types").As, ComboBoxItemProps, never>;
+//# sourceMappingURL=combo-box-item.d.ts.map

package/dist/types/combo-box/combo-box-item.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"combo-box-item.d.ts","sourceRoot":"","sources":["../../../src/combo-box/combo-box-item.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAA;AAS7D,OAAO,KAAK,EACV,iBAAiB,EACjB,wBAAwB,EACxB,cAAc,EACf,MAAM,sBAAsB,CAAA;AAM7B,MAAM,WAAW,iBACf,SAAQ,gBAAgB,EACtB,wBAAwB;IAC1B;;OAEG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC7B,UAAU,CAAC,EAAE,cAAc,CAAC,iBAAiB,CAAC,CAAA;CAC/C;AAED,eAAO,MAAM,YAAY,oHAgEvB,CAAA"}

package/dist/types/combo-box/combo-box-variant-context.d.ts

@@ -0,0 +1,4 @@
+import type { ContextValue } from "react-aria-components";
+import type { ComboBoxVariantProps } from "@opengovsg/oui-theme";
+export declare const ComboBoxVariantContext: import("react").Context<ContextValue<ComboBoxVariantProps, any>>, useComboBoxVariantContext: () => ContextValue<ComboBoxVariantProps, any>;
+//# sourceMappingURL=combo-box-variant-context.d.ts.map

package/dist/types/combo-box/combo-box-variant-context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"combo-box-variant-context.d.ts","sourceRoot":"","sources":["../../../src/combo-box/combo-box-variant-context.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAA;AAEzD,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,sBAAsB,CAAA;AAIhE,eAAO,MAAO,sBAAsB,oEAAE,yBAAyB,+CAO3D,CAAA"}

package/dist/types/combo-box/combo-box.d.ts

@@ -1,12 +1,6 @@
-import React, { JSX } from "react";
-import { ComboBoxItemSlots, ComboBoxItemVariantProps, ComboBoxSlots, ComboBoxVariantProps, SlotsToClasses } from "@opengovsg/oui-theme";
-import { ComboBoxProps as AriaComboBoxProps, ListBoxItemProps, ListBoxItemRenderProps, ListBoxProps, ListLayoutOptions, ValidationResult } from "react-aria-components";
-export type ComboBoxItem = {
-    value: string;
-    name: string;
-    description?: string;
-};
-export interface ComboBoxProps<T extends ComboBoxItem = ComboBoxItem> extends ComboBoxVariantProps, Omit<AriaComboBoxProps<T>, "children"> {
+import type { ComboBoxProps as AriaComboBoxProps, ListBoxProps, ListLayoutOptions, ValidationResult } from "react-aria-components";
+import type { ComboBoxSlots, ComboBoxVariantProps, SlotsToClasses } from "@opengovsg/oui-theme";
+export interface ComboBoxProps<T extends object> extends ComboBoxVariantProps, Omit<AriaComboBoxProps<T>, "children"> {
     label?: string;
     /** The list of ComboBox items (uncontrolled). */
     defaultItems?: T[];
@@ -15,12 +9,10 @@ export interface ComboBoxProps<T extends ComboBoxItem = ComboBoxItem> extends Co
     description?: string | null;
     errorMessage?: string | ((validation: ValidationResult) => string);
     classNames?: SlotsToClasses<ComboBoxSlots> & SlotsToClasses<"clearButton" | "emptyState">;
-    itemClassNames?: SlotsToClasses<ComboBoxItemSlots>;
     /**
      * Any additional props to be spread to the list layout.
      */
     listLayoutOptions?: ListLayoutOptions;
-    children?: (item: T) => JSX.Element;
     /** Values that should invalidate the item cache when using dynamic collections. */
     dependencies?: ListBoxProps<T>["dependencies"];
     /**
@@ -33,18 +25,10 @@ export interface ComboBoxProps<T extends ComboBoxItem = ComboBoxItem> extends Co
      */
     onClear?: () => void;
     renderEmptyState?: ListBoxProps<T>["renderEmptyState"];
+    children?: ListBoxProps<T>["children"];
 }
 export declare function ComboBoxEmptyState({ size, className, }: Pick<ComboBoxVariantProps, "size"> & {
     className?: string;
 }): import("react/jsx-runtime").JSX.Element;
-export declare function ComboBox<T extends ComboBoxItem>({ label, description, errorMessage, classNames, itemClassNames, size, listLayoutOptions, children, dependencies, onClear, renderEmptyState: renderEmptyStateProp, ...props }: ComboBoxProps<T>): import("react/jsx-runtime").JSX.Element;
-export interface ComboBoxItemProps extends ListBoxItemProps, ComboBoxItemVariantProps {
-    label: React.ReactNode | ((props: ListBoxItemRenderProps) => React.ReactNode);
-    /**
-     * Description for the item, if any
-     */
-    description?: React.ReactNode | ((props: ListBoxItemRenderProps) => React.ReactNode);
-    classNames?: SlotsToClasses<ComboBoxItemSlots>;
-}
-export declare function ComboBoxItem({ className, size, description, label, classNames, ...props }: ComboBoxItemProps): import("react/jsx-runtime").JSX.Element;
+export declare function ComboBox<T extends object>(originalProps: ComboBoxProps<T>): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=combo-box.d.ts.map

package/dist/types/combo-box/combo-box.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"combo-box.d.ts","sourceRoot":"","sources":["../../../src/combo-box/combo-box.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAE,GAAG,EAAwB,MAAM,OAAO,CAAA;AACxD,OAAO,EAGL,iBAAiB,EAEjB,wBAAwB,EACxB,aAAa,EAEb,oBAAoB,EAGpB,cAAc,EACf,MAAM,sBAAsB,CAAA;AAG7B,OAAO,EAGL,aAAa,IAAI,iBAAiB,EAIlC,gBAAgB,EAChB,sBAAsB,EACtB,YAAY,EAGZ,iBAAiB,EAGjB,gBAAgB,EAEjB,MAAM,uBAAuB,CAAA;AAI9B,MAAM,MAAM,YAAY,GAAG;IACzB,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,MAAM,CAAA;IACZ,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB,CAAA;AAED,MAAM,WAAW,aAAa,CAAC,CAAC,SAAS,YAAY,GAAG,YAAY,CAClE,SAAQ,oBAAoB,EAC1B,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC,EAAE,UAAU,CAAC;IACxC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,iDAAiD;IACjD,YAAY,CAAC,EAAE,CAAC,EAAE,CAAA;IAClB,+CAA+C;IAC/C,KAAK,CAAC,EAAE,CAAC,EAAE,CAAA;IACX,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC3B,YAAY,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC,UAAU,EAAE,gBAAgB,KAAK,MAAM,CAAC,CAAA;IAClE,UAAU,CAAC,EAAE,cAAc,CAAC,aAAa,CAAC,GACxC,cAAc,CAAC,aAAa,GAAG,YAAY,CAAC,CAAA;IAC9C,cAAc,CAAC,EAAE,cAAc,CAAC,iBAAiB,CAAC,CAAA;IAClD;;OAEG;IACH,iBAAiB,CAAC,EAAE,iBAAiB,CAAA;IAErC,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,GAAG,CAAC,OAAO,CAAA;IAEnC,mFAAmF;IACnF,YAAY,CAAC,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC,cAAc,CAAC,CAAA;IAE9C;;;;;;;OAOG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IAEpB,gBAAgB,CAAC,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAA;CACvD;AAkCD,wBAAgB,kBAAkB,CAAC,EACjC,IAAI,EACJ,SAAS,GACV,EAAE,IAAI,CAAC,oBAAoB,EAAE,MAAM,CAAC,GAAG;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,2CAY7D;AAED,wBAAgB,QAAQ,CAAC,CAAC,SAAS,YAAY,EAAE,EAC/C,KAAK,EACL,WAAW,EACX,YAAY,EACZ,UAAU,EACV,cAAc,EACd,IAAI,EACJ,iBAAiB,EACjB,QAAQ,EACR,YAAY,EACZ,OAAO,EACP,gBAAgB,EAAE,oBAAoB,EACtC,GAAG,KAAK,EACT,EAAE,aAAa,CAAC,CAAC,CAAC,2CAwJlB;AAED,MAAM,WAAW,iBACf,SAAQ,gBAAgB,EACtB,wBAAwB;IAC1B,KAAK,EAAE,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC,KAAK,EAAE,sBAAsB,KAAK,KAAK,CAAC,SAAS,CAAC,CAAA;IAC7E;;OAEG;IACH,WAAW,CAAC,EACR,KAAK,CAAC,SAAS,GACf,CAAC,CAAC,KAAK,EAAE,sBAAsB,KAAK,KAAK,CAAC,SAAS,CAAC,CAAA;IACxD,UAAU,CAAC,EAAE,cAAc,CAAC,iBAAiB,CAAC,CAAA;CAC/C;AAED,wBAAgB,YAAY,CAAC,EAC3B,SAAS,EACT,IAAI,EACJ,WAAW,EACX,KAAK,EACL,UAAU,EACV,GAAG,KAAK,EACT,EAAE,iBAAiB,2CAqCnB"}
+{"version":3,"file":"combo-box.d.ts","sourceRoot":"","sources":["../../../src/combo-box/combo-box.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EACV,aAAa,IAAI,iBAAiB,EAClC,YAAY,EAEZ,iBAAiB,EACjB,gBAAgB,EACjB,MAAM,uBAAuB,CAAA;AAe9B,OAAO,KAAK,EACV,aAAa,EACb,oBAAoB,EACpB,cAAc,EACf,MAAM,sBAAsB,CAAA;AAc7B,MAAM,WAAW,aAAa,CAAC,CAAC,SAAS,MAAM,CAC7C,SAAQ,oBAAoB,EAC1B,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC,EAAE,UAAU,CAAC;IACxC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,iDAAiD;IACjD,YAAY,CAAC,EAAE,CAAC,EAAE,CAAA;IAClB,+CAA+C;IAC/C,KAAK,CAAC,EAAE,CAAC,EAAE,CAAA;IACX,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC3B,YAAY,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC,UAAU,EAAE,gBAAgB,KAAK,MAAM,CAAC,CAAA;IAClE,UAAU,CAAC,EAAE,cAAc,CAAC,aAAa,CAAC,GACxC,cAAc,CAAC,aAAa,GAAG,YAAY,CAAC,CAAA;IAC9C;;OAEG;IACH,iBAAiB,CAAC,EAAE,iBAAiB,CAAA;IAErC,mFAAmF;IACnF,YAAY,CAAC,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC,cAAc,CAAC,CAAA;IAE9C;;;;;;;OAOG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IAEpB,gBAAgB,CAAC,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAA;IAEtD,QAAQ,CAAC,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAA;CACvC;AAkCD,wBAAgB,kBAAkB,CAAC,EACjC,IAAI,EACJ,SAAS,GACV,EAAE,IAAI,CAAC,oBAAoB,EAAE,MAAM,CAAC,GAAG;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,2CAY7D;AAED,wBAAgB,QAAQ,CAAC,CAAC,SAAS,MAAM,EAAE,aAAa,EAAE,aAAa,CAAC,CAAC,CAAC,2CA6JzE"}

package/dist/types/combo-box/index.d.ts

@@ -1,3 +1,5 @@
 export * from "./combo-box";
 export * from "./combo-box-fuzzy";
+export * from "./combo-box-item";
+export * from "./combo-box-variant-context";
 //# sourceMappingURL=index.d.ts.map

package/dist/types/combo-box/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/combo-box/index.tsx"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAA;AAC3B,cAAc,mBAAmB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/combo-box/index.tsx"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAA;AAC3B,cAAc,mBAAmB,CAAA;AACjC,cAAc,kBAAkB,CAAA;AAChC,cAAc,6BAA6B,CAAA"}