@opengovsg/oui 0.0.7 → 0.0.8

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

@@ -3,8 +3,10 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useMemo, useCallback } from 'react';
 import { useMessageFormatter } from 'react-aria';
-import { ListLayout, ComboBox as ComboBox$1, Input, Button, Virtualizer, Popover, ListBox, ListBoxItem, Text } from 'react-aria-components';
+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 { 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';
@@ -54,38 +56,43 @@ function ComboBoxEmptyState({
     }
   );
 }
-function ComboBox({
-  label,
-  description,
-  errorMessage,
-  classNames,
-  itemClassNames,
-  size,
-  listLayoutOptions,
-  children,
-  dependencies,
-  onClear,
-  renderEmptyState: renderEmptyStateProp,
-  ...props
-}) {
+function ComboBox(originalProps) {
   const formatMessage = useMessageFormatter(i18nStrings);
-  const styles = comboBoxStyles({ size });
+  const [_props, variantProps] = mapPropsVariants(
+    originalProps,
+    comboBoxStyles.variantKeys
+  );
+  const {
+    label,
+    description,
+    errorMessage,
+    classNames,
+    listLayoutOptions,
+    children,
+    dependencies,
+    onClear,
+    renderEmptyState: renderEmptyStateProp,
+    ...props
+  } = _props;
+  const styles = comboBoxStyles(variantProps);
   const layout = useMemo(() => {
     return new ListLayout({
-      estimatedRowHeight: calculateEstimatedRowHeight(size ?? "md"),
+      estimatedRowHeight: calculateEstimatedRowHeight(
+        variantProps.size ?? "md"
+      ),
       ...listLayoutOptions
     });
-  }, [listLayoutOptions, size]);
+  }, [listLayoutOptions, variantProps.size]);
   const renderEmptyState = useCallback(
     (props2) => {
       if (renderEmptyStateProp) {
         return renderEmptyStateProp(props2);
       }
-      return /* @__PURE__ */ jsx(ComboBoxEmptyState, { size, className: classNames?.emptyState });
+      return /* @__PURE__ */ jsx(ComboBoxEmptyState, { className: classNames?.emptyState });
     },
-    [classNames?.emptyState, renderEmptyStateProp, size]
+    [classNames?.emptyState, renderEmptyStateProp]
   );
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(Provider, { values: [[ComboBoxVariantContext, variantProps]], children: /* @__PURE__ */ jsx(
     ComboBox$1,
     {
       className: composeTailwindRenderProps(
@@ -94,13 +101,14 @@ function ComboBox({
       ),
       shouldFocusWrap: true,
       allowsEmptyCollection: true,
+      isDisabled: variantProps.isDisabled,
       ...props,
       children: ({ isOpen, isDisabled: isComboBoxDisabled }) => /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsx(
           Label,
           {
-            size,
-            className: styles.label({ className: classNames?.label, size }),
+            size: variantProps.size,
+            className: styles.label({ className: classNames?.label }),
             children: label
           }
         ),
@@ -108,12 +116,12 @@ function ComboBox({
           /* @__PURE__ */ jsxs(
             FieldGroup,
             {
+              isDisabled: isComboBoxDisabled,
               className: composeRenderProps(
                 classNames?.group,
                 (className, renderProps) => styles.group({
                   ...renderProps,
                   className,
-                  size,
                   isClearable: !!onClear
                 })
               ),
@@ -123,7 +131,7 @@ function ComboBox({
                   {
                     className: composeRenderProps(
                       classNames?.field,
-                      (className, renderProps) => styles.field({ ...renderProps, className, size })
+                      (className, renderProps) => styles.field({ ...renderProps, className })
                     )
                   }
                 ),
@@ -132,22 +140,20 @@ function ComboBox({
                   {
                     className: composeRenderProps(
                       classNames?.expandButton,
-                      (className, renderProps) => styles.expandButton({ ...renderProps, className, size })
+                      (className, renderProps) => styles.expandButton({ ...renderProps, className })
                     ),
                     children: isOpen ? /* @__PURE__ */ jsx(
                       ChevronUp,
                       {
                         className: styles.icon({
-                          className: classNames?.icon,
-                          size
+                          className: classNames?.icon
                         })
                       }
                     ) : /* @__PURE__ */ jsx(
                       ChevronDown,
                       {
                         className: styles.icon({
-                          className: classNames?.icon,
-                          size
+                          className: classNames?.icon
                         })
                       }
                     )
@@ -166,35 +172,33 @@ function ComboBox({
               className: composeRenderProps(
                 classNames?.clearButton,
                 (className, renderProps) => comboBoxClearButtonStyles({
+                  ...variantProps,
                   ...renderProps,
                   className,
-                  size,
-                  isInactive: !props.inputValue,
-                  isDisabled: renderProps.isDisabled
+                  isInactive: !props.inputValue
                 })
               ),
               children: /* @__PURE__ */ jsx(
                 X,
                 {
                   className: styles.icon({
-                    className: classNames?.icon,
-                    size
+                    className: classNames?.icon
                   })
                 }
               )
             }
           )
         ] }),
-        description && /* @__PURE__ */ jsx(Description, { size, children: description }),
-        /* @__PURE__ */ jsx(FieldError, { size, children: errorMessage }),
-        /* @__PURE__ */ jsx(Virtualizer, { layout, children: /* @__PURE__ */ jsx(
+        description && /* @__PURE__ */ jsx(Description, { size: variantProps.size, children: description }),
+        /* @__PURE__ */ jsx(FieldError, { size: variantProps.size, children: errorMessage }),
+        /* @__PURE__ */ jsx(
           Popover,
           {
             className: composeRenderProps(
               classNames?.popover,
               (className, renderProps) => styles.popover({ ...renderProps, className })
             ),
-            children: /* @__PURE__ */ jsx(
+            children: /* @__PURE__ */ jsx(Virtualizer, { layout, children: /* @__PURE__ */ jsx(
               ListBox,
               {
                 className: composeRenderProps(
@@ -203,71 +207,14 @@ function ComboBox({
                 ),
                 dependencies,
                 renderEmptyState,
-                children: (item) => {
-                  if (children) {
-                    return children(item);
-                  }
-                  return /* @__PURE__ */ jsx(
-                    ComboBoxItem,
-                    {
-                      size,
-                      id: item.value,
-                      label: item.name,
-                      textValue: item.name,
-                      description: item.description,
-                      classNames: itemClassNames
-                    }
-                  );
-                }
+                children
               }
-            )
+            ) })
           }
-        ) })
+        )
       ] })
     }
-  );
-}
-function ComboBoxItem({
-  className,
-  size,
-  description,
-  label,
-  classNames,
-  ...props
-}) {
-  const styles = comboBoxItemStyles({ size });
-  return /* @__PURE__ */ jsx(
-    ListBoxItem,
-    {
-      ...props,
-      className: composeRenderProps(
-        className ?? classNames?.container,
-        (className2, renderProps) => styles.container({ ...renderProps, className: className2 })
-      ),
-      children: (renderProps) => {
-        return /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(
-            Text,
-            {
-              className: styles.label({ className: classNames?.label }),
-              slot: "label",
-              children: typeof label === "function" ? label(renderProps) : label
-            }
-          ),
-          description && /* @__PURE__ */ jsx(
-            Text,
-            {
-              className: styles.description({
-                className: classNames?.description
-              }),
-              slot: "description",
-              children: typeof description === "function" ? description(renderProps) : description
-            }
-          )
-        ] });
-      }
-    }
-  );
+  ) });
 }
 
-export { ComboBox, ComboBoxEmptyState, ComboBoxItem };
+export { ComboBox, ComboBoxEmptyState };

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

@@ -1,3 +1,5 @@
 "use strict";
-export { ComboBox, ComboBoxEmptyState, ComboBoxItem } from './combo-box.js';
+export { ComboBox, ComboBoxEmptyState } from './combo-box.js';
 export { ComboBoxFuzzy } from './combo-box-fuzzy.js';
+export { ComboBoxItem } from './combo-box-item.js';
+export { ComboBoxVariantContext, useComboBoxVariantContext } from './combo-box-variant-context.js';

package/dist/esm/index.js

@@ -1,4 +1,5 @@
 "use strict";
+export { Input } from './input/input.js';
 export { useControllableState } from './hooks/use-controllable-state.js';
 export { Button } from './button/button.js';
 export { GovtBanner } from './govt-banner/govt-banner.js';
@@ -8,13 +9,17 @@ 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, ComboBoxItem } from './combo-box/combo-box.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';
+export { ComboBoxVariantContext, useComboBoxVariantContext } from './combo-box/combo-box-variant-context.js';
 export { Banner } from './banner/banner.js';
 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/index.js

@@ -1,2 +1,4 @@
 "use strict";
 export { Select } from './select.js';
+export { SelectItem } from './select-item.js';
+export { SelectVariantContext, useSelectVariantContext } from './select-variant-context.js';

package/dist/esm/select/select-item.js

@@ -1,4 +1,5 @@
 "use strict";
+"use client";
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useContextProps, ListBoxItem } from 'react-aria-components';
 import { selectItemStyles, composeRenderProps } from '@opengovsg/oui-theme';

package/dist/esm/select/select-variant-context.js

@@ -1,4 +1,5 @@
 "use strict";
+"use client";
 import { createContext } from '../system/react-utils/context.js';
 
 const [SelectVariantContext, useSelectVariantContext] = 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,4 +1,5 @@
 "use strict";
+"use client";
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { createContext, useContext, createElement } from 'react';
 import { useContextProps } from 'react-aria-components';
@@ -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

@@ -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 { 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/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/combo-box/combo-box-fuzzy.d.ts

@@ -1,12 +1,20 @@
+import type { Key } from "react-aria";
 import type { SetRequired } from "type-fest";
-import type { SlotsToClasses } from "@opengovsg/oui-theme";
+import type { ComboBoxItemSlots, SlotsToClasses } from "@opengovsg/oui-theme";
 import type { ComboBoxProps } from "./combo-box";
-import { ComboBoxItem } 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,KAAK,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AAI5C,OAAO,KAAK,EAEV,cAAc,EACf,MAAM,sBAAsB,CAAA;AAG7B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAA;AAChD,OAAO,EAAY,YAAY,EAAE,MAAM,aAAa,CAAA;AA8BpD,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"}