@opengovsg/oui 0.0.7 → 0.0.9

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

@@ -13,8 +13,18 @@ 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 { TagFieldItem } from './tag-field/tag-field-item.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';
+export { CalendarDate } from '@internationalized/date';
+export { Calendar } from './calendar/calendar.js';
+export { CalendarStyleContext, useCalendarStyleContext, useProvideCalendarStyles } from './calendar/calendar-style-context.js';
+export { getEraFormat, useGenerateLocalizedMonths, useGenerateLocalizedYears, useLocalizedMonthYear } from './calendar/utils.js';

package/dist/esm/node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/{check.js → chevron-left.js}

@@ -8,7 +8,7 @@ import createLucideIcon from '../createLucideIcon.js';
  */
 
 
-const __iconNode = [["path", { d: "M20 6 9 17l-5-5", key: "1gmf2c" }]];
-const Check = createLucideIcon("Check", __iconNode);
+const __iconNode = [["path", { d: "m15 18-6-6 6-6", key: "1wnfg3" }]];
+const ChevronLeft = createLucideIcon("ChevronLeft", __iconNode);
 
-export { __iconNode, Check as default };
+export { __iconNode, ChevronLeft as default };

package/dist/esm/node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/chevron-right.js

@@ -0,0 +1,14 @@
+import createLucideIcon from '../createLucideIcon.js';
+
+/**
+ * @license lucide-react v0.475.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+
+
+const __iconNode = [["path", { d: "m9 18 6-6-6-6", key: "mthhwq" }]];
+const ChevronRight = createLucideIcon("ChevronRight", __iconNode);
+
+export { __iconNode, ChevronRight as default };

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,10 +1,10 @@
 "use strict";
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+"use client";
+import { jsx } from 'react/jsx-runtime';
 import { useContextProps, ListBoxItem } from 'react-aria-components';
 import { selectItemStyles, composeRenderProps } from '@opengovsg/oui-theme';
 import { forwardRef, mapPropsVariants } from '../system/utils.js';
 import { SelectVariantContext } from './select-variant-context.js';
-import Check from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/check.js';
 
 const SelectItem = forwardRef(function SelectItem2({ classNames, ...originalProps }, ref) {
   [originalProps, ref] = useContextProps(
@@ -20,6 +20,7 @@ const SelectItem = forwardRef(function SelectItem2({ classNames, ...originalProp
   return /* @__PURE__ */ jsx(
     ListBoxItem,
     {
+      textValue: typeof props.children === "string" ? props.children : void 0,
       ...props,
       ref,
       className: composeRenderProps(
@@ -30,29 +31,16 @@ const SelectItem = forwardRef(function SelectItem2({ classNames, ...originalProp
         if (typeof props.children === "function") {
           return props.children(renderProps);
         }
-        return /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(
-            "span",
-            {
-              className: styles.text({
-                className: classNames?.text,
-                ...renderProps
-              }),
-              children: props.children
-            }
-          ),
-          renderProps.isSelected && /* @__PURE__ */ jsx(
-            "span",
-            {
-              "aria-hidden": true,
-              className: styles.icon({
-                className: classNames?.icon,
-                ...renderProps
-              }),
-              children: /* @__PURE__ */ jsx(Check, {})
-            }
-          )
-        ] });
+        return /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: styles.text({
+              className: classNames?.text,
+              ...renderProps
+            }),
+            children: props.children
+          }
+        );
       }
     }
   );

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/select/select.js

@@ -2,12 +2,12 @@
 "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 { Provider, Select as Select$1, SelectValue, Popover, Virtualizer, ListLayout, 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 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 { Button } from '../button/button.js';
 
 const calculateEstimatedRowHeight = (size) => {
@@ -32,13 +32,13 @@ function Select({
   );
   const { items, children, listLayoutOptions, ...props } = _props;
   const styles = selectStyles(variantProps);
-  const layout = useMemo(() => {
-    return new ListLayout({
+  const layoutOptions = useMemo(() => {
+    return {
       estimatedRowHeight: calculateEstimatedRowHeight(
         variantProps.size ?? "md"
       ),
       ...listLayoutOptions
-    });
+    };
   }, [listLayoutOptions, variantProps.size]);
   return /* @__PURE__ */ jsx(Provider, { values: [[SelectVariantContext, variantProps]], children: /* @__PURE__ */ jsxs(
     Select$1,
@@ -69,7 +69,14 @@ function Select({
                   })
                 }
               ),
-              /* @__PURE__ */ jsx(ChevronsUpDown, { className: "h-4 w-4" })
+              /* @__PURE__ */ jsx(
+                ChevronDown,
+                {
+                  className: styles.icon({
+                    className: classNames?.icon
+                  })
+                }
+              )
             ]
           }
         ),
@@ -81,9 +88,10 @@ function Select({
             children: description
           }
         ),
-        /* @__PURE__ */ jsx(Popover, { className: styles.popover({ className: classNames?.popover }), children: /* @__PURE__ */ jsx(Virtualizer, { layout, children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx(Popover, { className: styles.popover({ className: classNames?.popover }), children: /* @__PURE__ */ jsx(Virtualizer, { layout: ListLayout, layoutOptions, children: /* @__PURE__ */ jsx(
           ListBox,
           {
+            autoFocus: true,
             items,
             shouldFocusWrap: true,
             className: composeRenderProps(

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/system/utils.js

@@ -11,12 +11,15 @@ const mapPropsVariants = (props, variantKeys, removeVariantProps = true) => {
   if (!variantKeys) {
     return [props, {}];
   }
-  const picked = variantKeys.reduce((acc, key) => {
-    if (key in props) {
-      return { ...acc, [key]: props[key] };
-    }
-    return acc;
-  }, {});
+  const picked = variantKeys.reduce(
+    (acc, key) => {
+      if (key in props) {
+        return { ...acc, [key]: props[key] };
+      }
+      return acc;
+    },
+    {}
+  );
   if (removeVariantProps) {
     const omitted = Object.keys(props).filter((key) => !variantKeys.includes(key)).reduce((acc, key) => ({ ...acc, [key]: props[key] }), {});
     return [omitted, picked];

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

@@ -1,2 +1,3 @@
 "use strict";
 export { TagField } from './tag-field.js';
+export { TagFieldItem } from './tag-field-item.js';

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

@@ -0,0 +1,26 @@
+"use strict";
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { useContext } from 'react';
+import { tagFieldItemStyles, dataAttr } from '@opengovsg/oui-theme';
+import { forwardRefGeneric } from '../system/utils.js';
+import { TagFieldStateContext } from './tag-field-state-context.js';
+
+const TagFieldItemInner = ({ item, isHighlighted, classNames, ...itemProps }, ref) => {
+  const { itemToText, size } = useContext(TagFieldStateContext);
+  const styles = tagFieldItemStyles({ size });
+  return /* @__PURE__ */ jsx(
+    "li",
+    {
+      ref,
+      ...itemProps,
+      className: styles.container({ className: classNames?.container }),
+      "data-rac": true,
+      "data-hovered": dataAttr(isHighlighted),
+      children: /* @__PURE__ */ jsx("span", { className: styles.label({ className: classNames?.label }), children: itemToText(item) })
+    }
+  );
+};
+const TagFieldItem = forwardRefGeneric(TagFieldItemInner);
+
+export { TagFieldItem };

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

@@ -1,28 +1,13 @@
 "use strict";
+"use client";
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { createContext, useContext, createElement } from 'react';
 import { useContextProps } from 'react-aria-components';
-import { tagFieldItemStyles, dataAttr } from '@opengovsg/oui-theme';
 import { forwardRefGeneric } from '../system/utils.js';
+import { TagFieldItem } from './tag-field-item.js';
 import { TagFieldStateContext } from './tag-field-state-context.js';
 
 const TagFieldListContext = createContext(null);
-const TagFieldListItemInner = ({ item, isHighlighted, classNames, ...itemProps }, ref) => {
-  const { itemToText, size } = useContext(TagFieldStateContext);
-  const styles = tagFieldItemStyles({ size });
-  return /* @__PURE__ */ jsx(
-    "li",
-    {
-      ref,
-      ...itemProps,
-      className: styles.container({ className: classNames?.container }),
-      "data-rac": true,
-      "data-hovered": dataAttr(isHighlighted),
-      children: /* @__PURE__ */ jsx("span", { className: styles.label({ className: classNames?.label }), children: itemToText(item) })
-    }
-  );
-};
-const TagFieldListItem = forwardRefGeneric(TagFieldListItemInner);
 const TagFieldListInner = (props, ref) => {
   [props, ref] = useContextProps(props, ref, TagFieldListContext);
   const { items, getItemProps, highlightedIndex } = useContext(TagFieldStateContext);
@@ -54,16 +39,22 @@ const TagFieldListInner = (props, ref) => {
         item,
         isHighlighted: highlightedIndex === virtualRow.index,
         key: virtualRow.key,
-        ...itemProps,
         classNames: itemClassNames
       };
       if (typeof props.children === "function") {
-        return props.children(childProps);
+        return props.children({ ...childProps, itemProps });
       }
-      return /* @__PURE__ */ createElement(TagFieldListItem, { ...childProps, key: childProps.key });
+      return /* @__PURE__ */ createElement(
+        TagFieldItem,
+        {
+          ...childProps,
+          ...itemProps,
+          key: childProps.key
+        }
+      );
     })
   ] }) });
 };
 const TagFieldList = forwardRefGeneric(TagFieldListInner);
 
-export { TagFieldList, TagFieldListContext, TagFieldListItem };
+export { TagFieldList, TagFieldListContext };

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

@@ -13,7 +13,8 @@ const TagFieldTagList = ({
     getSelectedItemProps,
     removeSelectedItem,
     isDisabled,
-    isReadOnly
+    isReadOnly,
+    itemToText
   } = useContext(TagFieldStateContext);
   const handleRemoveSelectedItem = useCallback(
     (item) => () => {
@@ -47,7 +48,7 @@ const TagFieldTagList = ({
         className: classNames?.tag,
         ...itemProps,
         children: [
-          /* @__PURE__ */ jsx("span", { className: classNames?.tagText, children: selectedItem.textValue }),
+          /* @__PURE__ */ jsx("span", { className: classNames?.tagText, children: itemToText(selectedItem) }),
           /* @__PURE__ */ jsx(
             X,
             {

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,7 +4,8 @@ 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 { TagFieldList, TagFieldListItem } from './tag-field-list.js';
+import { TagFieldItem } from './tag-field-item.js';
+import { TagFieldList } 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';
@@ -95,7 +96,7 @@ function TagField({
       {
         className: styles.list({ className: classNames?.list }),
         itemClassNames: props.itemClassNames,
-        children: ({ key, ...props2 }) => children ? children({ key, ...props2 }) : /* @__PURE__ */ createElement(TagFieldListItem, { ...props2, key })
+        children: ({ key, itemProps, ...props2 }) => children ? children({ key, itemProps, ...props2 }) : /* @__PURE__ */ createElement(TagFieldItem, { ...props2, ...itemProps, key })
       }
     ) })
   ] });

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