@opengovsg/oui 0.0.0-snapshot-20250314033948 → 0.0.0-snapshot-20250318065939

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

@@ -1,10 +1,13 @@
 "use strict";
 "use client";
-import { jsx } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useDeferredValue, useMemo, useState, useCallback } from 'react';
 import fuzzysort from 'fuzzysort';
-import { comboBoxFuzzyHighlightedTextStyles } from '@opengovsg/oui-theme';
-import { ComboBox, ComboBoxItem } from './combo-box.js';
+import { Text } from 'react-aria-components';
+import { comboBoxStyles, comboBoxItemStyles, comboBoxFuzzyHighlightedTextStyles } from '@opengovsg/oui-theme';
+import { mapPropsVariants } from '../system/utils.js';
+import { ComboBox } from './combo-box.js';
+import { ComboBoxItem } from './combo-box-item.js';
 
 function HighlightedText({
   result,
@@ -27,18 +30,24 @@ function HighlightedText({
     i
   ));
 }
-function ComboBoxFuzzy({
-  items,
-  itemClassNames,
-  onSelectionChange: onSelectionChangeProp,
-  onInputChange: onInputChangeProp,
-  ...props
-}) {
-  const deferredInputValue = useDeferredValue(props.inputValue);
+function ComboBoxFuzzy(originalProps) {
+  const [_props, variantProps] = mapPropsVariants(
+    originalProps,
+    comboBoxStyles.variantKeys
+  );
+  const {
+    items,
+    itemClassNames,
+    onSelectionChange: onSelectionChangeProp,
+    onInputChange: onInputChangeProp,
+    inputValue,
+    ...props
+  } = _props;
+  const deferredInputValue = useDeferredValue(inputValue);
   const preparedItems = useMemo(() => {
     return items?.map((item) => ({
       ...item,
-      prepared: fuzzysort.prepare(item.name)
+      prepared: fuzzysort.prepare(item.textValue)
     })) ?? [];
   }, [items]);
   const [filteredResults, setFilteredResults] = useState({ items, result: {} });
@@ -61,7 +70,7 @@ function ComboBoxFuzzy({
       }).reduce(
         (acc, result) => {
           acc.items.push(result.obj);
-          acc.result[result.obj.name] = result;
+          acc.result[result.obj.textValue] = result;
           return acc;
         },
         { items: [], result: {} }
@@ -70,34 +79,47 @@ function ComboBoxFuzzy({
     },
     [onInputChangeProp, preparedItems]
   );
+  const comboboxItemStyles = comboBoxItemStyles(variantProps);
   return /* @__PURE__ */ jsx(
     ComboBox,
     {
       ...props,
+      inputValue,
       items: filteredResults.items,
       dependencies: [deferredInputValue],
       onSelectionChange,
       onInputChange,
-      children: (item) => /* @__PURE__ */ jsx(
-        ComboBoxItem,
-        {
-          classNames: itemClassNames,
-          label: ({ isSelected, isFocused }) => /* @__PURE__ */ jsx(
-            HighlightedText,
-            {
-              className: itemClassNames?.highlight,
-              result: filteredResults.result?.[item.name],
-              originalText: item.name,
-              isSelected,
-              isFocused
-            }
-          ),
-          description: item.description,
-          textValue: item.name,
-          id: item.value
-        },
-        item.name
-      )
+      children: (item) => /* @__PURE__ */ jsx(ComboBoxItem, { textValue: item.textValue, id: item.id, children: ({ isSelected, isFocused }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          Text,
+          {
+            className: comboboxItemStyles.label({
+              className: itemClassNames?.label
+            }),
+            slot: "label",
+            children: /* @__PURE__ */ jsx(
+              HighlightedText,
+              {
+                className: itemClassNames?.highlight,
+                result: filteredResults.result?.[item.textValue],
+                originalText: item.textValue,
+                isSelected,
+                isFocused
+              }
+            )
+          }
+        ),
+        item.description && /* @__PURE__ */ jsx(
+          Text,
+          {
+            className: comboboxItemStyles.description({
+              className: itemClassNames?.description
+            }),
+            slot: "description",
+            children: item.description
+          }
+        )
+      ] }) }, item.id)
     }
   );
 }

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

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

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

@@ -0,0 +1,10 @@
+"use strict";
+"use client";
+import { createContext } from '../system/react-utils/context.js';
+
+const [ComboBoxVariantContext, useComboBoxVariantContext] = createContext({
+  name: "ComboBoxVariantContext",
+  strict: true
+});
+
+export { ComboBoxVariantContext, useComboBoxVariantContext };

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,8 @@
 "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';
@@ -6,15 +10,15 @@ 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, 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';

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/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/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"}

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

@@ -1,12 +1,6 @@
-import type { JSX } from "react";
-import type { ComboBoxProps as AriaComboBoxProps, ListBoxItemProps, ListBoxItemRenderProps, ListBoxProps, ListLayoutOptions, ValidationResult } from "react-aria-components";
-import type { ComboBoxItemSlots, ComboBoxItemVariantProps, ComboBoxSlots, ComboBoxVariantProps, SlotsToClasses } from "@opengovsg/oui-theme";
-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