@commercetools/nimbus 2.1.0 → 2.3.0

package/dist/components/calendar/intl/en.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Pre-compiled en messages for Calendar
+ * Generated by @internationalized/string-compiler
+ * DO NOT EDIT MANUALLY
+ */
+declare const _default: {
+    nextMonth: string;
+    nextYear: string;
+    previousMonth: string;
+    previousYear: string;
+};
+export default _default;

package/dist/components/calendar/intl/es.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Pre-compiled es messages for Calendar
+ * Generated by @internationalized/string-compiler
+ * DO NOT EDIT MANUALLY
+ */
+declare const _default: {
+    nextMonth: string;
+    nextYear: string;
+    previousMonth: string;
+    previousYear: string;
+};
+export default _default;

package/dist/components/calendar/intl/fr-FR.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Pre-compiled fr-FR messages for Calendar
+ * Generated by @internationalized/string-compiler
+ * DO NOT EDIT MANUALLY
+ */
+declare const _default: {
+    nextMonth: string;
+    nextYear: string;
+    previousMonth: string;
+    previousYear: string;
+};
+export default _default;

package/dist/components/calendar/intl/pt-BR.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Pre-compiled pt-BR messages for Calendar
+ * Generated by @internationalized/string-compiler
+ * DO NOT EDIT MANUALLY
+ */
+declare const _default: {
+    nextMonth: string;
+    nextYear: string;
+    previousMonth: string;
+    previousYear: string;
+};
+export default _default;

package/dist/components/calendar.cjs

@@ -1,2 +1,2 @@
-"use strict";const e=require("../chunks/calendar-DLSOwy_e.cjs.js");exports.Calendar=e.Calendar;
+"use strict";const e=require("../chunks/calendar-D0OrT88Y.cjs.js");exports.Calendar=e.Calendar;
 //# sourceMappingURL=calendar.cjs.map

package/dist/components/calendar.es.js

@@ -1,4 +1,4 @@
-import { C as e } from "../chunks/calendar-B--ZxTlQ.es.js";
+import { C as e } from "../chunks/calendar-Bnw0u0vz.es.js";
 export {
   e as Calendar
 };

package/dist/components/card/card.recipe.d.ts

@@ -40,7 +40,7 @@ export declare const cardRecipe: import('@chakra-ui/react').SlotRecipeDefinition
     backgroundStyle: {
         default: {
             root: {
-                backgroundColor: "colorPalette.contrast";
+                backgroundColor: "bg";
             };
         };
         muted: {

package/dist/components/card.cjs

@@ -1,2 +1,2 @@
-"use strict";const r=require("../chunks/card-B2TxE_Ez.cjs.js");exports.Card=r.Card;exports._CardContent=r.CardContent;exports._CardHeader=r.CardHeader;exports._CardRoot=r.CardRoot;
+"use strict";const r=require("../chunks/card-CgBcH7Zm.cjs.js");exports.Card=r.Card;exports._CardContent=r.CardContent;exports._CardHeader=r.CardHeader;exports._CardRoot=r.CardRoot;
 //# sourceMappingURL=card.cjs.map

package/dist/components/card.es.js

@@ -1,4 +1,4 @@
-import { C, c as d, b as o, a as e } from "../chunks/card-CEfEgF48.es.js";
+import { C, c as d, b as o, a as e } from "../chunks/card-BHw7lWYe.es.js";
 export {
   C as Card,
   d as _CardContent,

package/dist/components/checkbox.cjs

@@ -1,2 +1,2 @@
-"use strict";const e=require("../chunks/checkbox-CWhwDnrI.cjs.js");exports.Checkbox=e.Checkbox;
+"use strict";const e=require("../chunks/checkbox-BYBGaSV9.cjs.js");exports.Checkbox=e.Checkbox;
 //# sourceMappingURL=checkbox.cjs.map

package/dist/components/checkbox.es.js

@@ -1,4 +1,4 @@
-import { C as r } from "../chunks/checkbox-BAZ2ps7B.es.js";
+import { C as r } from "../chunks/checkbox-UATxAVti.es.js";
 export {
   r as Checkbox
 };

package/dist/components/collapsible-motion.cjs

@@ -1,2 +1,2 @@
-"use strict";const o=require("../chunks/collapsible-motion-D4u7W2de.cjs.js");exports.CollapsibleMotion=o.CollapsibleMotion;exports._CollapsibleMotionContent=o.CollapsibleMotionContent;exports._CollapsibleMotionRoot=o.CollapsibleMotionRoot;exports._CollapsibleMotionTrigger=o.CollapsibleMotionTrigger;
+"use strict";const o=require("../chunks/collapsible-motion-Cj6ESwsR.cjs.js");exports.CollapsibleMotion=o.CollapsibleMotion;exports._CollapsibleMotionContent=o.CollapsibleMotionContent;exports._CollapsibleMotionRoot=o.CollapsibleMotionRoot;exports._CollapsibleMotionTrigger=o.CollapsibleMotionTrigger;
 //# sourceMappingURL=collapsible-motion.cjs.map

package/dist/components/collapsible-motion.es.js

@@ -1,4 +1,4 @@
-import { c as a, b as i, C as s, a as t } from "../chunks/collapsible-motion-dMfEe4kv.es.js";
+import { c as a, b as i, C as s, a as t } from "../chunks/collapsible-motion-BsyuKtxS.es.js";
 export {
   a as CollapsibleMotion,
   i as _CollapsibleMotionContent,

package/dist/components/combo-box/combo-box.messages.d.ts

@@ -0,0 +1,6 @@
+import { LocalizedString, LocalizedStrings } from '@internationalized/string';
+export declare const comboBoxMessagesStrings: LocalizedStrings<string, LocalizedString>;
+/**
+ * Available message keys for ComboBox component
+ */
+export type ComboBoxMessageKey = "clearSelection" | "options" | "selectedValues" | "toggleOptions";

package/dist/components/combo-box/intl/de.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Pre-compiled de messages for ComboBox
+ * Generated by @internationalized/string-compiler
+ * DO NOT EDIT MANUALLY
+ */
+declare const _default: {
+    clearSelection: string;
+    options: string;
+    selectedValues: string;
+    toggleOptions: string;
+};
+export default _default;

package/dist/components/combo-box/intl/en.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Pre-compiled en messages for ComboBox
+ * Generated by @internationalized/string-compiler
+ * DO NOT EDIT MANUALLY
+ */
+declare const _default: {
+    clearSelection: string;
+    options: string;
+    selectedValues: string;
+    toggleOptions: string;
+};
+export default _default;

package/dist/components/combo-box/intl/es.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Pre-compiled es messages for ComboBox
+ * Generated by @internationalized/string-compiler
+ * DO NOT EDIT MANUALLY
+ */
+declare const _default: {
+    clearSelection: string;
+    options: string;
+    selectedValues: string;
+    toggleOptions: string;
+};
+export default _default;

package/dist/components/combo-box/intl/fr-FR.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Pre-compiled fr-FR messages for ComboBox
+ * Generated by @internationalized/string-compiler
+ * DO NOT EDIT MANUALLY
+ */
+declare const _default: {
+    clearSelection: string;
+    options: string;
+    selectedValues: string;
+    toggleOptions: string;
+};
+export default _default;

package/dist/components/combo-box/intl/pt-BR.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Pre-compiled pt-BR messages for ComboBox
+ * Generated by @internationalized/string-compiler
+ * DO NOT EDIT MANUALLY
+ */
+declare const _default: {
+    clearSelection: string;
+    options: string;
+    selectedValues: string;
+    toggleOptions: string;
+};
+export default _default;

package/dist/components/combobox/combobox.d.ts

@@ -1,58 +1,234 @@
+import { ComboBoxRoot, ComboBoxListBox, ComboBoxOption, ComboBoxSection } from './components';
+import { filterByText, filterByStartsWith, filterByCaseSensitive, filterByWordBoundary, filterByFuzzy, createMultiPropertyFilter, createRankedFilter, createMultiTermFilter, createSectionAwareFilter } from './utils/filters';
+/**
+ * # ComboBox
+ * ============================================================
+ *
+ * A searchable, filterable selection component with single and multi-select support.
+ * Built with React Aria Components for accessibility and keyboard navigation.
+ *
+ * @see {@link https://nimbus-documentation.vercel.app/components/inputs/combobox}
+ *
+ * @example
+ * ```tsx
+ * <ComboBox.Root items={items}>
+ *   <ComboBox.Trigger />
+ *   <ComboBox.Popover>
+ *     <ComboBox.ListBox>
+ *       {(item) => <ComboBox.Option>{item.name}</ComboBox.Option>}
+ *     </ComboBox.ListBox>
+ *   </ComboBox.Popover>
+ * </ComboBox.Root>
+ * ```
+ */
 export declare const ComboBox: {
     /**
      * # ComboBox.Root
      *
-     * The root container for the combobox component. Provides state management and configuration
-     * for all child parts. Supports both single and multiple selection modes.
+     * The root component that provides state management and context for the combobox.
+     * Handles selection state, input filtering, popover open/close, and keyboard navigation.
      *
      * @example
      * ```tsx
-     * <ComboBox.Root>
-     *   <ComboBox.Option>Option 1</ComboBox.Option>
-     *   <ComboBox.Option>Option 2</ComboBox.Option>
+     * <ComboBox.Root items={items}>
+     *   <ComboBox.Trigger />
+     *   <ComboBox.Popover>
+     *     <ComboBox.ListBox>
+     *       {(item) => <ComboBox.Option>{item.name}</ComboBox.Option>}
+     *     </ComboBox.ListBox>
+     *   </ComboBox.Popover>
      * </ComboBox.Root>
      * ```
      */
-    Root: {
-        <T extends object>({ children, ref, ...props }: import('./combobox.types').ComboBoxRootProps<T>): import("react/jsx-runtime").JSX.Element;
+    Root: typeof ComboBoxRoot;
+    /**
+     * # ComboBox.Trigger
+     *
+     * The trigger element that contains the input field and controls for the combobox.
+     * Automatically renders tag group (multi-select), input field, toggle button, and clear button.
+     *
+     * @example
+     * ```tsx
+     * <ComboBox.Root items={items}>
+     *   <ComboBox.Trigger />
+     *   <ComboBox.Popover>...</ComboBox.Popover>
+     * </ComboBox.Root>
+     * ```
+     */
+    Trigger: {
+        ({ children, ...restProps }: import('./combobox.types').ComboBoxTriggerProps): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
     /**
-     * # ComboBox.OptionGroup
+     * # ComboBox.Popover
      *
-     * Groups related options together with an optional label. Used to organize options into
-     * logical sections within the combobox dropdown.
+     * The popover container that displays the dropdown options list.
+     * Renders in a React portal and handles positioning relative to the trigger.
      *
      * @example
      * ```tsx
-     * <ComboBox.Root>
-     *   <ComboBox.OptionGroup label="Fruits">
-     *     <ComboBox.Option>Apple</ComboBox.Option>
-     *     <ComboBox.Option>Banana</ComboBox.Option>
-     *   </ComboBox.OptionGroup>
-     * </ComboBox.Root>
+     * <ComboBox.Popover>
+     *   <ComboBox.ListBox>
+     *     {(item) => <ComboBox.Option>{item.name}</ComboBox.Option>}
+     *   </ComboBox.ListBox>
+     * </ComboBox.Popover>
      * ```
      */
-    OptionGroup: {
-        <T extends object>({ children, label, items, ref, ...props }: import('./combobox.types').ComboBoxOptionGroupProps<T> & import('react').RefAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+    Popover: {
+        ({ children, ref, ...restProps }: import('./combobox.types').ComboBoxPopoverProps): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
+    /**
+     * # ComboBox.ListBox
+     *
+     * The container for dropdown options that displays filtered results.
+     *
+     * Use the render prop pattern - do **NOT** manually map over items as this is less performant.
+     *
+     * @example
+     * ```tsx
+     * <ComboBox.ListBox>
+     *   {(item) => <ComboBox.Option>{item.name}</ComboBox.Option>}
+     * </ComboBox.ListBox>
+     * ```
+     */
+    ListBox: typeof ComboBoxListBox;
     /**
      * # ComboBox.Option
      *
-     * An individual selectable option within the combobox. Displays a checkbox indicator
-     * in multiple selection mode and supports custom content rendering.
+     * An individual selectable option within the listbox.
+     * Displays a checkmark indicator for selected items in multi-select mode.
      *
      * @example
      * ```tsx
-     * <ComboBox.Root>
-     *   <ComboBox.Option>Option 1</ComboBox.Option>
-     *   <ComboBox.Option>Option 2</ComboBox.Option>
-     * </ComboBox.Root>
+     * <ComboBox.Option>Option text</ComboBox.Option>
+     * ```
+     *
+     * @example Render prop pattern
+     * ```tsx
+     * <ComboBox.Option>
+     *   {({ isSelected }) => (
+     *     <span>Option 1 {isSelected && "✓"}</span>
+     *   )}
+     * </ComboBox.Option>
      * ```
      */
-    Option: {
-        <T extends object>({ children, ref, ...props }: import('./combobox.types').ComboBoxOptionProps<T>): import("react/jsx-runtime").JSX.Element;
-        displayName: string;
+    Option: typeof ComboBoxOption;
+    /**
+     * # ComboBox.Section
+     *
+     * Groups related options together with an optional heading.
+     * Supports render prop pattern for dynamic option rendering within sections.
+     *
+     * @example
+     * ```tsx
+     * <ComboBox.Section label="Category Name">
+     *   <ComboBox.Option id="opt-1">Option 1</ComboBox.Option>
+     *   <ComboBox.Option id="opt-2">Option 2</ComboBox.Option>
+     * </ComboBox.Section>
+     * ```
+     *
+     * @example Render prop pattern
+     * ```tsx
+     * <ComboBox.Section items={categoryItems}>
+     *   {(item) => <ComboBox.Option>{item.name}</ComboBox.Option>}
+     * </ComboBox.Section>
+     * ```
+     */
+    Section: typeof ComboBoxSection;
+    /**
+     * # ComboBox.filters
+     *
+     * Built-in filter functions and utilities for customizing ComboBox filtering behavior.
+     * These filters can be passed to the `filter` prop on ComboBox.Root to control how options are filtered based on user input.
+     *
+     * **Available Filters:**
+     * - `filterByText`: Default substring matching (case-insensitive)
+     * - `filterByStartsWith`: Prefix matching
+     * - `filterByCaseSensitive`: Exact case substring matching
+     * - `filterByWordBoundary`: Word boundary matching
+     * - `filterByFuzzy`: Fuzzy matching (characters in order)
+     * - `createMultiPropertyFilter`: Search across multiple object properties
+     * - `createRankedFilter`: Custom scoring/ranking logic
+     * - `createMultiTermFilter`: OR logic for multiple search terms
+     * - `createSectionAwareFilter`: Preserves section structure while filtering
+     *
+     * @example Basic filter usage
+     * ```tsx
+     * import { ComboBox } from '@commercetools/nimbus';
+     *
+     * function MyComponent() {
+     *   return (
+     *     <ComboBox.Root
+     *       items={items}
+     *       filter={ComboBox.filters.filterByStartsWith}
+     *     >
+     *       <ComboBox.Trigger />
+     *       <ComboBox.Popover>
+     *         <ComboBox.ListBox>
+     *           {(item) => <ComboBox.Option>{item.name}</ComboBox.Option>}
+     *         </ComboBox.ListBox>
+     *       </ComboBox.Popover>
+     *     </ComboBox.Root>
+     *   );
+     * }
+     * ```
+     *
+     * @example Multi-property search
+     * ```tsx
+     * const productFilter = ComboBox.filters.createMultiPropertyFilter<Product>([
+     *   'name',
+     *   'category',
+     *   'description'
+     * ]);
+     *
+     * function ProductSearch() {
+     *   return (
+     *     <ComboBox.Root items={products} filter={productFilter}>
+     *       <ComboBox.Trigger />
+     *       <ComboBox.Popover>
+     *         <ComboBox.ListBox>
+     *           {(item) => <ComboBox.Option>{item.name}</ComboBox.Option>}
+     *         </ComboBox.ListBox>
+     *       </ComboBox.Popover>
+     *     </ComboBox.Root>
+     *   );
+     * }
+     * ```
+     *
+     * @example Section-aware filtering
+     * ```tsx
+     * const sectionFilter = ComboBox.filters.createSectionAwareFilter(
+     *   ComboBox.filters.filterByFuzzy
+     * );
+     *
+     * function SectionedSearch() {
+     *   return (
+     *     <ComboBox.Root items={sectionsWithItems} filter={sectionFilter}>
+     *       <ComboBox.Trigger />
+     *       <ComboBox.Popover>
+     *         <ComboBox.ListBox>
+     *           {(section) => (
+     *             <ComboBox.Section>
+     *               {(item) => <ComboBox.Option>{item.name}</ComboBox.Option>}
+     *             </ComboBox.Section>
+     *           )}
+     *         </ComboBox.ListBox>
+     *       </ComboBox.Popover>
+     *     </ComboBox.Root>
+     *   );
+     * }
+     * ```
+     */
+    filters: {
+        filterByText: typeof filterByText;
+        filterByStartsWith: typeof filterByStartsWith;
+        filterByCaseSensitive: typeof filterByCaseSensitive;
+        filterByWordBoundary: typeof filterByWordBoundary;
+        filterByFuzzy: typeof filterByFuzzy;
+        createMultiPropertyFilter: typeof createMultiPropertyFilter;
+        createRankedFilter: typeof createRankedFilter;
+        createMultiTermFilter: typeof createMultiTermFilter;
+        createSectionAwareFilter: typeof createSectionAwareFilter;
     };
 };

package/dist/components/combobox/combobox.i18n.d.ts

@@ -1,20 +1,10 @@
 export declare const messages: {
-    comboboxDialog: {
-        id: string;
-        description: string;
-        defaultMessage: string;
-    };
-    filterOptions: {
-        id: string;
-        description: string;
-        defaultMessage: string;
-    };
-    options: {
+    selectedValues: {
         id: string;
         description: string;
         defaultMessage: string;
     };
-    selectedValues: {
+    toggleOptions: {
         id: string;
         description: string;
         defaultMessage: string;
@@ -24,7 +14,7 @@ export declare const messages: {
         description: string;
         defaultMessage: string;
     };
-    toggleCombobox: {
+    options: {
         id: string;
         description: string;
         defaultMessage: string;

package/dist/components/combobox/combobox.messages.d.ts

@@ -0,0 +1,6 @@
+import { LocalizedString, LocalizedStrings } from '@internationalized/string';
+export declare const comboboxMessagesStrings: LocalizedStrings<string, LocalizedString>;
+/**
+ * Available message keys for Combobox component
+ */
+export type ComboboxMessageKey = "clearSelection" | "toggleOptions" | "selectedValues" | "options";

package/dist/components/combobox/combobox.recipe.d.ts

@@ -2,54 +2,55 @@
  * Recipe configuration for the Combobox component.
  * Defines the styling variants and base styles using Chakra UI's recipe system.
  */
-export declare const comboBoxSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"root" | "popover" | "option" | "value" | "leadingElement" | "options" | "optionGroup" | "buttonGroup" | "multiSelectInput" | "optionIndicator" | "optionContent", {
+export declare const comboBoxSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"root" | "trigger" | "popover" | "content" | "input" | "option" | "section" | "leadingElement" | "tagGroup" | "listBox" | "optionIndicator" | "optionContent", {
     size: {
         sm: {
-            value: {
+            trigger: {
                 minH: "800";
                 textStyle: "sm";
-                pl: "calc(var(--leading-element-width) + {sizes.100})";
             };
             leadingElement: {
                 minH: "800";
-                pl: "300";
             };
         };
         md: {
-            value: {
+            trigger: {
                 minH: "1000";
                 textStyle: "md";
-                pl: "calc(var(--leading-element-width) + {sizes.200})";
             };
             leadingElement: {
                 minH: "1000";
-                pl: "400";
             };
         };
     };
     variant: {
         solid: {
             root: {
+                bg: "primary.1";
+                "&:hover:not([data-disabled='true'])": {
+                    bg: "primary.2";
+                };
                 width: "7200";
             };
-            value: {
+            trigger: {
+                "--border-width": "sizes.25";
+                "--border-color": "colors.neutral.7";
                 width: "100%";
-                "--border-width"?: "sizes.25" | undefined;
-                "--border-color"?: "colors.neutral.7" | undefined;
             };
         };
         ghost: {
             root: {
-                maxW: "7200";
-                bg?: "transparent" | undefined;
-                "&:hover"?: {
+                bg: "transparent";
+                "&:hover:not([data-disabled='true'])": {
                     bg: "primaryAlpha.2";
-                } | undefined;
+                };
+                width: "7200";
             };
-            value: {
+            trigger: {
+                "--border-width": "sizes.25";
+                "--border-color": "transparent";
                 bg: "transparent";
-                "--border-width"?: "sizes.25" | undefined;
-                "--border-color"?: "transparent" | undefined;
+                width: "100%";
             };
         };
     };