@commercetools/nimbus 1.0.1 → 2.0.1-rc1

package/dist/select.d.ts

@@ -1,33 +1,134 @@
-import { ForwardRefExoticComponent } from 'react';
-import { HTMLChakraProps } from '@chakra-ui/react/styled-system';
+import { HTMLChakraProps } from '@chakra-ui/react';
 import { JSX } from 'react/jsx-runtime';
 import { ListBoxItemProps } from 'react-aria-components';
 import { ListBoxProps } from 'react-aria-components';
 import { ListBoxSectionProps } from 'react-aria-components';
 import { ReactNode } from 'react';
-import { RecipeVariantProps } from '@chakra-ui/react/styled-system';
-import { RefAttributes } from 'react';
 import { SelectOptionGroupProps as SelectOptionGroupProps_2 } from './select.types';
 import { SelectOptionProps as SelectOptionProps_2 } from './select.types';
 import { SelectOptionsProps as SelectOptionsProps_2 } from './select.types';
 import { SelectProps } from 'react-aria-components';
 import { SelectRootProps as SelectRootProps_2 } from './select.types';
-import { SlotRecipeDefinition } from '@chakra-ui/react';
+import { SlotRecipeProps } from '@chakra-ui/react';
 
+/**
+ * Select
+ * ============================================================
+ * A versatile select component for choosing one or more options from a list.
+ * Features full keyboard accessibility and WCAG 2.1 AA compliance.
+ *
+ * @example
+ * ```tsx
+ * <Select.Root>
+ *   <Select.Options placeholder="Select an option">
+ *     <Select.Option id="1">Option 1</Select.Option>
+ *     <Select.Option id="2">Option 2</Select.Option>
+ *     <Select.Option id="3">Option 3</Select.Option>
+ *   </Select.Options>
+ * </Select.Root>
+ * ```
+ *
+ * @see https://nimbus-documentation.vercel.app/components/inputs/select
+ */
 export declare const Select: {
-    Root: ForwardRefExoticComponent<SelectRootProps_2 & RefAttributes<HTMLDivElement>>;
+    /**
+     * # Select.Root
+     *
+     * The root component that provides context and state management for the select.
+     * This component must wrap all select parts (Options, Option, etc.) and provides
+     * the select state, variant styling context, and selection management.
+     *
+     * @example
+     * ```tsx
+     * <Select.Root>
+     *   <Select.Options placeholder="Choose...">
+     *     <Select.Option id="apple">Apple</Select.Option>
+     *     <Select.Option id="orange">Orange</Select.Option>
+     *   </Select.Options>
+     * </Select.Root>
+     * ```
+     */
+    Root: {
+        ({ ref: forwardedRef, children, leadingElement, isLoading, isDisabled, isClearable, ...props }: SelectRootProps_2): JSX.Element;
+        displayName: string;
+    };
+    /**
+     * # Select.Options
+     *
+     * The trigger button and dropdown container for select options.
+     * Displays the selected value and opens the options list when activated.
+     *
+     * This component handles the visual presentation of the select, including
+     * the trigger button, selected value display, dropdown icon, and the
+     * popover containing options.
+     *
+     * @example
+     * ```tsx
+     * <Select.Root>
+     *   <Select.Options
+     *     placeholder="Select fruit"
+     *     label="Favorite Fruit"
+     *   >
+     *     <Select.Option id="apple">Apple</Select.Option>
+     *     <Select.Option id="banana">Banana</Select.Option>
+     *   </Select.Options>
+     * </Select.Root>
+     * ```
+     */
     Options: {
         <T extends object>(props: SelectOptionsProps_2<T> & {
             ref?: React.Ref<HTMLDivElement>;
         }): JSX.Element;
         displayName: string;
     };
+    /**
+     * # Select.Option
+     *
+     * An individual selectable option within the select dropdown.
+     * Represents a single choice that can be selected by the user.
+     *
+     * Options automatically handle selection state, keyboard navigation,
+     * and visual feedback for hover and selection states.
+     *
+     * @example
+     * ```tsx
+     * <Select.Options>
+     *   <Select.Option id="red" textValue="Red">
+     *     🔴 Red
+     *   </Select.Option>
+     *   <Select.Option id="blue" textValue="Blue">
+     *     🔵 Blue
+     *   </Select.Option>
+     * </Select.Options>
+     * ```
+     */
     Option: {
-        <T extends object>({ ref, ...restProps }: SelectOptionProps_2<T> & {
-            ref?: React.Ref<HTMLDivElement>;
-        }): JSX.Element;
+        (props: SelectOptionProps_2): JSX.Element;
         displayName: string;
     };
+    /**
+     * # Select.OptionGroup
+     *
+     * A container for grouping related options with an optional label.
+     * Provides visual separation and semantic grouping of options.
+     *
+     * Option groups help organize large lists of options into logical
+     * categories with proper accessibility support.
+     *
+     * @example
+     * ```tsx
+     * <Select.Options>
+     *   <Select.OptionGroup label="Fruits">
+     *     <Select.Option id="apple">Apple</Select.Option>
+     *     <Select.Option id="banana">Banana</Select.Option>
+     *   </Select.OptionGroup>
+     *   <Select.OptionGroup label="Vegetables">
+     *     <Select.Option id="carrot">Carrot</Select.Option>
+     *     <Select.Option id="broccoli">Broccoli</Select.Option>
+     *   </Select.OptionGroup>
+     * </Select.Options>
+     * ```
+     */
     OptionGroup: {
         <T extends object>(props: SelectOptionGroupProps_2<T> & {
             ref?: React.Ref<HTMLDivElement>;
@@ -37,9 +138,7 @@ export declare const Select: {
 };
 
 export declare const _SelectOption: {
-    <T extends object>({ ref, ...restProps }: SelectOptionProps<T> & {
-        ref?: React.Ref<HTMLDivElement>;
-    }): JSX.Element;
+    (props: SelectOptionProps): JSX.Element;
     displayName: string;
 };
 
@@ -50,16 +149,21 @@ export declare const _SelectOptionGroup: {
     displayName: string;
 };
 
-export declare interface SelectOptionGroupProps<T> extends ListBoxSectionProps<T>, Omit<SelectOptionGroupSlotProps, keyof ListBoxSectionProps<T>> {
-    /** the label for the section */
+export declare type SelectOptionGroupProps<T> = ListBoxSectionProps<T> & Omit<SelectOptionGroupSlotProps, keyof ListBoxSectionProps<T>> & {
+    /**
+     * Label text for the option group section
+     */
     label: string;
-}
+};
 
-declare interface SelectOptionGroupSlotProps extends HTMLChakraProps<"div"> {
-}
+export declare type SelectOptionGroupSlotProps = HTMLChakraProps<"div">;
 
-export declare interface SelectOptionProps<T> extends Omit<ListBoxItemProps<T>, "onClick" | "translate" | "onBlur" | "onFocus" | "onKeyDown" | "onKeyUp" | "onMouseDown" | "onMouseUp">, Omit<SelectOptionSlotProps, keyof ListBoxItemProps<T>> {
-}
+export declare type SelectOptionProps = Omit<ListBoxItemProps, "onClick" | "translate" | "onBlur" | "onFocus" | "onKeyDown" | "onKeyUp" | "onMouseDown" | "onMouseUp"> & Omit<SelectOptionSlotProps, keyof ListBoxItemProps> & {
+    /**
+     * Ref forwarding to the option element
+     */
+    ref?: React.Ref<HTMLDivElement>;
+};
 
 export declare const _SelectOptions: {
     <T extends object>(props: SelectOptionsProps<T> & {
@@ -68,14 +172,23 @@ export declare const _SelectOptions: {
     displayName: string;
 };
 
-declare interface SelectOptionSlotProps extends HTMLChakraProps<"div"> {
-}
+export declare type SelectOptionSlotProps = HTMLChakraProps<"div">;
 
 export declare interface SelectOptionsProps<T> extends ListBoxProps<T>, Omit<SelectOptionsSlotProps, keyof ListBoxProps<T>> {
 }
 
-declare interface SelectOptionsSlotProps extends HTMLChakraProps<"div"> {
-}
+export declare type SelectOptionsSlotProps = HTMLChakraProps<"div">;
+
+declare type SelectRecipeProps = {
+    /**
+     * Size variant of the select
+     */
+    size?: SlotRecipeProps<"select">["size"];
+    /**
+     * Visual style variant of the select
+     */
+    variant?: SlotRecipeProps<"select">["variant"];
+};
 
 /**
  * # Select
@@ -84,68 +197,42 @@ declare interface SelectOptionsSlotProps extends HTMLChakraProps<"div"> {
  *
  * @see {@link https://nimbus-documentation.vercel.app/components/inputs/select}
  */
-export declare const _SelectRoot: ForwardRefExoticComponent<SelectRootProps & RefAttributes<HTMLDivElement>>;
+export declare const _SelectRoot: {
+    ({ ref: forwardedRef, children, leadingElement, isLoading, isDisabled, isClearable, ...props }: SelectRootProps): JSX.Element;
+    displayName: string;
+};
 
-export declare interface SelectRootProps extends SelectRootSlotProps, SelectProps {
-    /** set to true if Select is currently busy with something */
+export declare type SelectRootProps = SelectRootSlotProps & SelectProps & {
+    /**
+     * Whether the select is in a loading state
+     * @default false
+     */
     isLoading?: boolean;
-    /** Children must be ReactNode, no render props/functions allowed */
+    /**
+     * Children elements (must be ReactNode, no render props/functions allowed)
+     */
     children: ReactNode;
-}
+    /**
+     * Optional element to display at the start of the input field
+     * Respects text direction (left in LTR, right in RTL)
+     */
+    leadingElement?: ReactNode;
+    /**
+     * Whether to show a clear button when a value is selected
+     * @default false
+     */
+    isClearable?: boolean;
+    /**
+     * Ref forwarding to the root element
+     */
+    ref?: React.Ref<HTMLDivElement>;
+};
 
-declare interface SelectRootSlotProps extends HTMLChakraProps<"div", RecipeVariantProps<typeof selectSlotRecipe> & SelectProps<object>> {
-}
+export declare type SelectRootSlotProps = HTMLChakraProps<"div", SelectRecipeProps & SelectProps<object>>;
 
-/**
- * Recipe configuration for the Select component.
- * Defines the styling variants and base styles using Chakra UI's recipe system.
- */
-declare const selectSlotRecipe: SlotRecipeDefinition<"option" | "root" | "trigger" | "triggerLabel" | "options" | "optionGroup", {
-size: {
-sm: {
-root: {};
-trigger: {
-h: "800";
-px: "400";
-textStyle: "sm";
-};
-};
-md: {
-root: {};
-trigger: {
-h: "1000";
-px: "400";
-textStyle: "md";
-};
-};
-};
-variant: {
-outline: {
-root: {
-bg: "primary.1";
-"&:hover": {
-bg: "primary.2";
-};
-};
-trigger: {
-"--border-width": "sizes.25";
-"--border-color": "colors.neutral.7";
-};
-};
-ghost: {
-root: {
-bg: "transparent";
-"&:hover": {
-bg: "primaryAlpha.2";
-};
-};
-trigger: {
-"--border-width": "sizes.25";
-"--border-color": "transparent";
-};
-};
-};
-}>;
+export declare type SelectTriggerLabelSlotProps = HTMLChakraProps<"span">;
+
+export declare type SelectTriggerSlotProps = HTMLChakraProps<"button">;
 
 export { }
 

package/dist/separator.d.ts

@@ -0,0 +1,49 @@
+import { HTMLChakraProps } from '@chakra-ui/react';
+import { JSX } from 'react/jsx-runtime';
+import { RecipeProps } from '@chakra-ui/react';
+import { UnstyledProp } from '@chakra-ui/react';
+
+/**
+ * Separator
+ * ============================================================
+ * A visual separator that divides content sections
+ *
+ * Features:
+ *
+ * - allows forwarding refs to the underlying DOM element
+ * - accepts all native html 'HTMLDivElement' attributes (including aria- & data-attributes)
+ * - supports 'variants', 'orientation', etc. configured in the recipe
+ * - allows overriding styles by using style-props
+ * - supports 'asChild' and 'as' to modify the underlying html-element (polymorphic)
+ * - built with React Aria for accessibility
+ */
+export declare const Separator: {
+    ({ ref: forwardedRef, orientation, ...props }: SeparatorProps): JSX.Element;
+    displayName: string;
+};
+
+export declare type SeparatorProps = SeparatorRootSlotProps & {
+    /**
+     * Data attributes for testing or custom metadata
+     */
+    [key: `data-${string}`]: unknown;
+    /**
+     * Ref forwarding to the root element
+     */
+    ref?: React.Ref<HTMLDivElement>;
+};
+
+declare type SeparatorRecipeProps = RecipeProps<"separator"> & UnstyledProp;
+
+export declare type SeparatorRootSlotProps = HTMLChakraProps<"div", SeparatorRecipeProps>;
+
+export { }
+
+
+declare module "slate" {
+    interface CustomTypes {
+        Editor: BaseEditor & ReactEditor & HistoryEditor;
+        Element: CustomElement;
+        Text: CustomText;
+    }
+}

package/dist/setup-jsdom-polyfills.cjs

@@ -1,2 +1,2 @@
-"use strict";typeof globalThis.structuredClone!="function"&&(globalThis.structuredClone=function(e){if(e==null)return e;try{return typeof e=="object"?JSON.parse(JSON.stringify(e)):e}catch(r){return console.warn("structuredClone polyfill failed:",r),Array.isArray(e)?[...e]:{...e}}});
+"use strict";typeof globalThis.structuredClone!="function"&&(globalThis.structuredClone=function(e){if(e==null)return e;try{return typeof e=="object"?JSON.parse(JSON.stringify(e)):e}catch(t){return console.warn("structuredClone polyfill failed:",t),Array.isArray(e)?[...e]:{...e}}});if(typeof globalThis.ResizeObserver>"u"){class r{observe(){}unobserve(){}disconnect(){}}globalThis.ResizeObserver=r}if(typeof globalThis.IntersectionObserver>"u"){class r{root=null;rootMargin="";thresholds=[];disconnect(){}observe(){}takeRecords(){return[]}unobserve(){}}globalThis.IntersectionObserver=r}typeof Element<"u"&&(Element.prototype.scrollTo=Element.prototype.scrollTo||(()=>{}),Element.prototype.scrollIntoView=Element.prototype.scrollIntoView||(()=>{}));typeof window<"u"&&!window.requestAnimationFrame&&(window.requestAnimationFrame=r=>setTimeout(()=>r(Date.now()),1e3/60));
 //# sourceMappingURL=setup-jsdom-polyfills.cjs.map

package/dist/setup-jsdom-polyfills.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"setup-jsdom-polyfills.cjs","sources":["../src/test/setup-jsdom-polyfills.ts"],"sourcesContent":["/**\n * Polyfills necessary for the `NimbusProvider` not to crash in JSDOM environments (e.g. jest)\n *\n * To use with jest, update jest config like so:\n * config = {\n *   ...\n *   setupFiles: [\n *     '@commercetools/nimbus/setup-jsdom-polyfills`,\n *     ...\n *  ]\n * }\n */\n\n// TODO: document this somewhere besides this file\n\n// implementation of structuredClone polyfill to satisfy the Nimbus (Chakra UI) provider\nif (typeof globalThis.structuredClone !== \"function\") {\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  globalThis.structuredClone = function structuredClone(value: any) {\n    if (value === null || value === undefined) {\n      return value;\n    }\n\n    try {\n      // For objects and arrays, use JSON methods\n      if (typeof value === \"object\") {\n        return JSON.parse(JSON.stringify(value));\n      }\n      // For primitive values, return directly\n      return value;\n    } catch (error) {\n      console.warn(\"structuredClone polyfill failed:\", error);\n\n      // Returns a shallow copy as fallback\n      return Array.isArray(value) ? [...value] : { ...value };\n    }\n  };\n}\n\n// Polyfill window.matchMedia for JSDOM (used by Nimbus/Chakra for theming)\nObject.defineProperty(window, \"matchMedia\", {\n  writable: true,\n  value: (query: unknown) => ({\n    matches: false, // Default value, tests can override if needed\n    media: query,\n    onchange: null,\n    addListener: () => {}, // Deprecated but needed for some libs\n    removeListener: () => {}, // Deprecated but needed for some libs\n    addEventListener: () => {},\n    removeEventListener: () => {},\n    dispatchEvent: () => false,\n  }),\n});\n"],"names":["value","error"],"mappings":"aAgBI,OAAO,WAAW,iBAAoB,aAExC,WAAW,gBAAkB,SAAyBA,EAAY,CAChE,GAAIA,GAAU,KACZ,OAAOA,EAGT,GAAI,CAEF,OAAI,OAAOA,GAAU,SACZ,KAAK,MAAM,KAAK,UAAUA,CAAK,CAAC,EAGlCA,CACT,OAASC,EAAO,CACd,eAAQ,KAAK,mCAAoCA,CAAK,EAG/C,MAAM,QAAQD,CAAK,EAAI,CAAC,GAAGA,CAAK,EAAI,CAAE,GAAGA,CAAA,CAClD,CACF"}
+{"version":3,"file":"setup-jsdom-polyfills.cjs","sources":["../src/test/setup-jsdom-polyfills.ts"],"sourcesContent":["/**\n * Polyfills for JSDOM test environments\n *\n * These polyfills prevent `NimbusProvider` from crashing in JSDOM\n * environments (e.g., Jest, Vitest).\n *\n * **Usage with Jest:**\n * ```js\n * // jest.config.js\n * module.exports = {\n *   setupFiles: [\n *     '@commercetools/nimbus/setup-jsdom-polyfills'\n *   ]\n * };\n * ```\n *\n * **Usage with Vitest:**\n * ```ts\n * // vitest.config.ts\n * export default defineConfig({\n *   test: {\n *     setupFiles: [\n *       '@commercetools/nimbus/setup-jsdom-polyfills'\n *     ]\n *   }\n * });\n * ```\n\n */\n\n/**\n * Mock structuredClone\n *\n * **Why**: Required by Chakra UI provider for deep cloning objects\n *\n * **Use cases**:\n * - NimbusProvider initialization\n * - Chakra UI theme configuration\n * - Deep cloning of component state\n * - React context value cloning\n */\nif (typeof globalThis.structuredClone !== \"function\") {\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  globalThis.structuredClone = function structuredClone(value: any) {\n    if (value === null || value === undefined) {\n      return value;\n    }\n\n    try {\n      // For objects and arrays, use JSON methods\n      if (typeof value === \"object\") {\n        return JSON.parse(JSON.stringify(value));\n      }\n      // For primitive values, return directly\n      return value;\n    } catch (error) {\n      console.warn(\"structuredClone polyfill failed:\", error);\n\n      // Returns a shallow copy as fallback\n      return Array.isArray(value) ? [...value] : { ...value };\n    }\n  };\n}\n\n/**\n * Mock window.matchMedia\n *\n * **Why**: Required for responsive design and theme system\n *\n * **Use cases**:\n * - Chakra UI color mode and theme detection\n * - Responsive component behavior\n * - Media query hooks (useMediaQuery)\n * - Breakpoint-based rendering\n */\nObject.defineProperty(window, \"matchMedia\", {\n  writable: true,\n  value: (query: unknown) => ({\n    matches: false, // Default, can be overridden in tests\n    media: query,\n    onchange: null,\n    addListener: () => {}, // Deprecated but needed\n    removeListener: () => {}, // Deprecated but needed\n    addEventListener: () => {},\n    removeEventListener: () => {},\n    dispatchEvent: () => false,\n  }),\n});\n\n/**\n * Mock ResizeObserver\n *\n * **Why**: Required for components that adjust based on size\n *\n * **Use cases**:\n * - Chakra UI responsive components\n * - React Aria components with responsive behavior\n * - Components that measure container dimensions\n */\nif (typeof globalThis.ResizeObserver === \"undefined\") {\n  class ResizeObserverMock {\n    observe() {}\n    unobserve() {}\n    disconnect() {}\n  }\n  globalThis.ResizeObserver =\n    ResizeObserverMock as unknown as typeof ResizeObserver;\n}\n\n/**\n * Mock IntersectionObserver\n *\n * **Why**: Required for lazy loading and viewport-based effects\n *\n * **Use cases**:\n * - Components that trigger actions when entering viewport\n * - Infinite scroll implementations\n * - Lazy image loading\n * - Visibility tracking for analytics\n */\nif (typeof globalThis.IntersectionObserver === \"undefined\") {\n  class IntersectionObserverMock {\n    readonly root: Element | null = null;\n    readonly rootMargin: string = \"\";\n    readonly thresholds: ReadonlyArray<number> = [];\n\n    disconnect() {}\n    observe() {}\n    takeRecords(): IntersectionObserverEntry[] {\n      return [];\n    }\n    unobserve() {}\n  }\n  globalThis.IntersectionObserver =\n    IntersectionObserverMock as unknown as typeof IntersectionObserver;\n}\n\n/**\n * Mock Element.prototype scroll methods\n *\n * **Why**: Used by navigation, modals, and focus management\n *\n * **Use cases**:\n * - React Aria focus management\n * - Scroll-to-top features\n * - Dialog auto-focus and scroll behavior\n * - Dropdown and menu positioning\n */\nif (typeof Element !== \"undefined\") {\n  Element.prototype.scrollTo = Element.prototype.scrollTo || (() => {});\n  Element.prototype.scrollIntoView =\n    Element.prototype.scrollIntoView || (() => {});\n}\n\n/**\n * Mock requestAnimationFrame\n *\n * **Why**: Used in animations and transitions\n *\n * **Use cases**:\n * - Chakra UI animations and motion components\n * - React Aria transition hooks\n * - Smooth UI updates and state changes\n * - Custom animation implementations\n */\nif (typeof window !== \"undefined\" && !window.requestAnimationFrame) {\n  window.requestAnimationFrame = (callback: FrameRequestCallback) => {\n    return setTimeout(\n      () => callback(Date.now()),\n      1000 / 60\n    ) as unknown as number;\n  };\n}\n"],"names":["value","error","ResizeObserverMock","IntersectionObserverMock","callback"],"mappings":"aAyCI,OAAO,WAAW,iBAAoB,aAExC,WAAW,gBAAkB,SAAyBA,EAAY,CAChE,GAAIA,GAAU,KACZ,OAAOA,EAGT,GAAI,CAEF,OAAI,OAAOA,GAAU,SACZ,KAAK,MAAM,KAAK,UAAUA,CAAK,CAAC,EAGlCA,CACT,OAASC,EAAO,CACd,eAAQ,KAAK,mCAAoCA,CAAK,EAG/C,MAAM,QAAQD,CAAK,EAAI,CAAC,GAAGA,CAAK,EAAI,CAAE,GAAGA,CAAA,CAClD,CACF,GAsCF,GAAI,OAAO,WAAW,eAAmB,IAAa,CACpD,MAAME,CAAmB,CACvB,SAAU,CAAC,CACX,WAAY,CAAC,CACb,YAAa,CAAC,CAAA,CAEhB,WAAW,eACTA,CACJ,CAaA,GAAI,OAAO,WAAW,qBAAyB,IAAa,CAC1D,MAAMC,CAAyB,CACpB,KAAuB,KACvB,WAAqB,GACrB,WAAoC,CAAA,EAE7C,YAAa,CAAC,CACd,SAAU,CAAC,CACX,aAA2C,CACzC,MAAO,CAAA,CACT,CACA,WAAY,CAAC,CAAA,CAEf,WAAW,qBACTA,CACJ,CAaI,OAAO,QAAY,MACrB,QAAQ,UAAU,SAAW,QAAQ,UAAU,WAAa,IAAM,CAAC,GACnE,QAAQ,UAAU,eAChB,QAAQ,UAAU,iBAAmB,IAAM,CAAC,IAc5C,OAAO,OAAW,KAAe,CAAC,OAAO,wBAC3C,OAAO,sBAAyBC,GACvB,WACL,IAAMA,EAAS,KAAK,KAAK,EACzB,IAAO,EAAA"}

package/dist/setup-jsdom-polyfills.es.js

@@ -3,8 +3,43 @@ typeof globalThis.structuredClone != "function" && (globalThis.structuredClone =
     return e;
   try {
     return typeof e == "object" ? JSON.parse(JSON.stringify(e)) : e;
-  } catch (r) {
-    return console.warn("structuredClone polyfill failed:", r), Array.isArray(e) ? [...e] : { ...e };
+  } catch (t) {
+    return console.warn("structuredClone polyfill failed:", t), Array.isArray(e) ? [...e] : { ...e };
   }
 });
+if (typeof globalThis.ResizeObserver > "u") {
+  class r {
+    observe() {
+    }
+    unobserve() {
+    }
+    disconnect() {
+    }
+  }
+  globalThis.ResizeObserver = r;
+}
+if (typeof globalThis.IntersectionObserver > "u") {
+  class r {
+    root = null;
+    rootMargin = "";
+    thresholds = [];
+    disconnect() {
+    }
+    observe() {
+    }
+    takeRecords() {
+      return [];
+    }
+    unobserve() {
+    }
+  }
+  globalThis.IntersectionObserver = r;
+}
+typeof Element < "u" && (Element.prototype.scrollTo = Element.prototype.scrollTo || (() => {
+}), Element.prototype.scrollIntoView = Element.prototype.scrollIntoView || (() => {
+}));
+typeof window < "u" && !window.requestAnimationFrame && (window.requestAnimationFrame = (r) => setTimeout(
+  () => r(Date.now()),
+  1e3 / 60
+));
 //# sourceMappingURL=setup-jsdom-polyfills.es.js.map

package/dist/setup-jsdom-polyfills.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"setup-jsdom-polyfills.es.js","sources":["../src/test/setup-jsdom-polyfills.ts"],"sourcesContent":["/**\n * Polyfills necessary for the `NimbusProvider` not to crash in JSDOM environments (e.g. jest)\n *\n * To use with jest, update jest config like so:\n * config = {\n *   ...\n *   setupFiles: [\n *     '@commercetools/nimbus/setup-jsdom-polyfills`,\n *     ...\n *  ]\n * }\n */\n\n// TODO: document this somewhere besides this file\n\n// implementation of structuredClone polyfill to satisfy the Nimbus (Chakra UI) provider\nif (typeof globalThis.structuredClone !== \"function\") {\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  globalThis.structuredClone = function structuredClone(value: any) {\n    if (value === null || value === undefined) {\n      return value;\n    }\n\n    try {\n      // For objects and arrays, use JSON methods\n      if (typeof value === \"object\") {\n        return JSON.parse(JSON.stringify(value));\n      }\n      // For primitive values, return directly\n      return value;\n    } catch (error) {\n      console.warn(\"structuredClone polyfill failed:\", error);\n\n      // Returns a shallow copy as fallback\n      return Array.isArray(value) ? [...value] : { ...value };\n    }\n  };\n}\n\n// Polyfill window.matchMedia for JSDOM (used by Nimbus/Chakra for theming)\nObject.defineProperty(window, \"matchMedia\", {\n  writable: true,\n  value: (query: unknown) => ({\n    matches: false, // Default value, tests can override if needed\n    media: query,\n    onchange: null,\n    addListener: () => {}, // Deprecated but needed for some libs\n    removeListener: () => {}, // Deprecated but needed for some libs\n    addEventListener: () => {},\n    removeEventListener: () => {},\n    dispatchEvent: () => false,\n  }),\n});\n"],"names":["value","error"],"mappings":"AAgBI,OAAO,WAAW,mBAAoB,eAExC,WAAW,kBAAkB,SAAyBA,GAAY;AAChE,MAAIA,KAAU;AACZ,WAAOA;AAGT,MAAI;AAEF,WAAI,OAAOA,KAAU,WACZ,KAAK,MAAM,KAAK,UAAUA,CAAK,CAAC,IAGlCA;AAAA,EACT,SAASC,GAAO;AACd,mBAAQ,KAAK,oCAAoCA,CAAK,GAG/C,MAAM,QAAQD,CAAK,IAAI,CAAC,GAAGA,CAAK,IAAI,EAAE,GAAGA,EAAA;AAAA,EAClD;AACF;"}
+{"version":3,"file":"setup-jsdom-polyfills.es.js","sources":["../src/test/setup-jsdom-polyfills.ts"],"sourcesContent":["/**\n * Polyfills for JSDOM test environments\n *\n * These polyfills prevent `NimbusProvider` from crashing in JSDOM\n * environments (e.g., Jest, Vitest).\n *\n * **Usage with Jest:**\n * ```js\n * // jest.config.js\n * module.exports = {\n *   setupFiles: [\n *     '@commercetools/nimbus/setup-jsdom-polyfills'\n *   ]\n * };\n * ```\n *\n * **Usage with Vitest:**\n * ```ts\n * // vitest.config.ts\n * export default defineConfig({\n *   test: {\n *     setupFiles: [\n *       '@commercetools/nimbus/setup-jsdom-polyfills'\n *     ]\n *   }\n * });\n * ```\n\n */\n\n/**\n * Mock structuredClone\n *\n * **Why**: Required by Chakra UI provider for deep cloning objects\n *\n * **Use cases**:\n * - NimbusProvider initialization\n * - Chakra UI theme configuration\n * - Deep cloning of component state\n * - React context value cloning\n */\nif (typeof globalThis.structuredClone !== \"function\") {\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  globalThis.structuredClone = function structuredClone(value: any) {\n    if (value === null || value === undefined) {\n      return value;\n    }\n\n    try {\n      // For objects and arrays, use JSON methods\n      if (typeof value === \"object\") {\n        return JSON.parse(JSON.stringify(value));\n      }\n      // For primitive values, return directly\n      return value;\n    } catch (error) {\n      console.warn(\"structuredClone polyfill failed:\", error);\n\n      // Returns a shallow copy as fallback\n      return Array.isArray(value) ? [...value] : { ...value };\n    }\n  };\n}\n\n/**\n * Mock window.matchMedia\n *\n * **Why**: Required for responsive design and theme system\n *\n * **Use cases**:\n * - Chakra UI color mode and theme detection\n * - Responsive component behavior\n * - Media query hooks (useMediaQuery)\n * - Breakpoint-based rendering\n */\nObject.defineProperty(window, \"matchMedia\", {\n  writable: true,\n  value: (query: unknown) => ({\n    matches: false, // Default, can be overridden in tests\n    media: query,\n    onchange: null,\n    addListener: () => {}, // Deprecated but needed\n    removeListener: () => {}, // Deprecated but needed\n    addEventListener: () => {},\n    removeEventListener: () => {},\n    dispatchEvent: () => false,\n  }),\n});\n\n/**\n * Mock ResizeObserver\n *\n * **Why**: Required for components that adjust based on size\n *\n * **Use cases**:\n * - Chakra UI responsive components\n * - React Aria components with responsive behavior\n * - Components that measure container dimensions\n */\nif (typeof globalThis.ResizeObserver === \"undefined\") {\n  class ResizeObserverMock {\n    observe() {}\n    unobserve() {}\n    disconnect() {}\n  }\n  globalThis.ResizeObserver =\n    ResizeObserverMock as unknown as typeof ResizeObserver;\n}\n\n/**\n * Mock IntersectionObserver\n *\n * **Why**: Required for lazy loading and viewport-based effects\n *\n * **Use cases**:\n * - Components that trigger actions when entering viewport\n * - Infinite scroll implementations\n * - Lazy image loading\n * - Visibility tracking for analytics\n */\nif (typeof globalThis.IntersectionObserver === \"undefined\") {\n  class IntersectionObserverMock {\n    readonly root: Element | null = null;\n    readonly rootMargin: string = \"\";\n    readonly thresholds: ReadonlyArray<number> = [];\n\n    disconnect() {}\n    observe() {}\n    takeRecords(): IntersectionObserverEntry[] {\n      return [];\n    }\n    unobserve() {}\n  }\n  globalThis.IntersectionObserver =\n    IntersectionObserverMock as unknown as typeof IntersectionObserver;\n}\n\n/**\n * Mock Element.prototype scroll methods\n *\n * **Why**: Used by navigation, modals, and focus management\n *\n * **Use cases**:\n * - React Aria focus management\n * - Scroll-to-top features\n * - Dialog auto-focus and scroll behavior\n * - Dropdown and menu positioning\n */\nif (typeof Element !== \"undefined\") {\n  Element.prototype.scrollTo = Element.prototype.scrollTo || (() => {});\n  Element.prototype.scrollIntoView =\n    Element.prototype.scrollIntoView || (() => {});\n}\n\n/**\n * Mock requestAnimationFrame\n *\n * **Why**: Used in animations and transitions\n *\n * **Use cases**:\n * - Chakra UI animations and motion components\n * - React Aria transition hooks\n * - Smooth UI updates and state changes\n * - Custom animation implementations\n */\nif (typeof window !== \"undefined\" && !window.requestAnimationFrame) {\n  window.requestAnimationFrame = (callback: FrameRequestCallback) => {\n    return setTimeout(\n      () => callback(Date.now()),\n      1000 / 60\n    ) as unknown as number;\n  };\n}\n"],"names":["value","error","ResizeObserverMock","IntersectionObserverMock","callback"],"mappings":"AAyCI,OAAO,WAAW,mBAAoB,eAExC,WAAW,kBAAkB,SAAyBA,GAAY;AAChE,MAAIA,KAAU;AACZ,WAAOA;AAGT,MAAI;AAEF,WAAI,OAAOA,KAAU,WACZ,KAAK,MAAM,KAAK,UAAUA,CAAK,CAAC,IAGlCA;AAAA,EACT,SAASC,GAAO;AACd,mBAAQ,KAAK,oCAAoCA,CAAK,GAG/C,MAAM,QAAQD,CAAK,IAAI,CAAC,GAAGA,CAAK,IAAI,EAAE,GAAGA,EAAA;AAAA,EAClD;AACF;AAsCF,IAAI,OAAO,WAAW,iBAAmB,KAAa;AAAA,EACpD,MAAME,EAAmB;AAAA,IACvB,UAAU;AAAA,IAAC;AAAA,IACX,YAAY;AAAA,IAAC;AAAA,IACb,aAAa;AAAA,IAAC;AAAA,EAAA;AAEhB,aAAW,iBACTA;AACJ;AAaA,IAAI,OAAO,WAAW,uBAAyB,KAAa;AAAA,EAC1D,MAAMC,EAAyB;AAAA,IACpB,OAAuB;AAAA,IACvB,aAAqB;AAAA,IACrB,aAAoC,CAAA;AAAA,IAE7C,aAAa;AAAA,IAAC;AAAA,IACd,UAAU;AAAA,IAAC;AAAA,IACX,cAA2C;AACzC,aAAO,CAAA;AAAA,IACT;AAAA,IACA,YAAY;AAAA,IAAC;AAAA,EAAA;AAEf,aAAW,uBACTA;AACJ;AAaI,OAAO,UAAY,QACrB,QAAQ,UAAU,WAAW,QAAQ,UAAU,aAAa,MAAM;AAAC,IACnE,QAAQ,UAAU,iBAChB,QAAQ,UAAU,mBAAmB,MAAM;AAAC;AAc5C,OAAO,SAAW,OAAe,CAAC,OAAO,0BAC3C,OAAO,wBAAwB,CAACC,MACvB;AAAA,EACL,MAAMA,EAAS,KAAK,KAAK;AAAA,EACzB,MAAO;AAAA;"}

package/dist/simple-grid.d.ts

@@ -18,10 +18,10 @@ export declare const SimpleGrid: {
  *
  * @see {@link https://nimbus-documentation.vercel.app/components/layout/simplegrid}
  */
-export declare interface SimpleGridProps extends SimpleGridProps_2 {
+export declare type SimpleGridProps = SimpleGridProps_2 & {
     children?: React.ReactNode;
     ref?: React.Ref<HTMLDivElement>;
-}
+};
 
 export { }
 

package/dist/spacer.d.ts

@@ -0,0 +1,41 @@
+import { BoxProps } from '@chakra-ui/react';
+import { JSX } from 'react/jsx-runtime';
+
+/**
+ * Spacer component that fills available space in flex layouts.
+ *
+ * @example
+ * ```tsx
+ * <Stack direction="row">
+ *   <Button>Left</Button>
+ *   <Spacer />
+ *   <Button>Right</Button>
+ * </Stack>
+ * ```
+ */
+export declare const Spacer: {
+    ({ ref, ...props }: SpacerProps): JSX.Element;
+    displayName: string;
+};
+
+/**
+ * Props for the Spacer component.
+ * Extends Chakra UI Box props with flexGrow automatically set to 1.
+ */
+export declare type SpacerProps = Omit<BoxProps, "flexGrow"> & {
+    /**
+     * Reference to the spacer element
+     */
+    ref?: React.Ref<HTMLDivElement>;
+};
+
+export { }
+
+
+declare module "slate" {
+    interface CustomTypes {
+        Editor: BaseEditor & ReactEditor & HistoryEditor;
+        Element: CustomElement;
+        Text: CustomText;
+    }
+}

package/dist/split-button.d.ts

@@ -1,36 +1,47 @@
 import { AriaButtonProps } from 'react-aria';
-import { HTMLChakraProps } from '@chakra-ui/react/styled-system';
+import { HTMLChakraProps } from '@chakra-ui/react';
 import { JSX } from 'react/jsx-runtime';
 import { MenuProps } from 'react-aria-components';
 import { MenuTriggerProps } from 'react-aria-components';
 import { ReactNode } from 'react';
-import { RecipeProps } from '@chakra-ui/react/styled-system';
-import { UnstyledProp } from '@chakra-ui/react/styled-system';
+import { RecipeProps } from '@chakra-ui/react';
+import { SlotRecipeProps } from '@chakra-ui/react';
+import { UnstyledProp } from '@chakra-ui/react';
 
-declare interface ButtonProps extends FunctionalButtonProps {
+declare type ButtonProps = Omit<ButtonRootSlotProps, keyof AriaButtonProps> & AriaButtonProps & {
+    /**
+     * Data attributes for testing or custom metadata
+     */
+    [key: `data-${string}`]: unknown;
+    /**
+     * Slot name for React Aria Components composition
+     */
     slot?: string | null | undefined;
+    /**
+     * Ref forwarding to the button element
+     */
     ref?: React.Ref<HTMLButtonElement>;
-}
+};
 
-/**
- * Base recipe props interface that combines Chakra UI's recipe props
- * with the unstyled prop option for the button element.
- */
-declare interface ButtonRecipeProps extends RecipeProps<"button">, UnstyledProp {
-}
+declare type ButtonRecipeProps = {
+    /**
+     * Size variant of the button
+     * @default "md"
+     */
+    size?: RecipeProps<"button">["size"];
+    /**
+     * Visual style variant of the button
+     * @default "subtle"
+     */
+    variant?: RecipeProps<"button">["variant"];
+    /**
+     * Color tone palette for the button
+     */
+    tone?: RecipeProps<"button">["tone"];
+} & UnstyledProp;
 
-/**
- * Root props interface that extends Chakra's HTML props with our recipe props.
- * This creates a complete set of props for the root element, combining
- * HTML attributes, Chakra's styling system, and our custom recipe props.
- */
-declare interface ButtonRootProps extends Omit<HTMLChakraProps<"button", ButtonRecipeProps>, "slot"> {
+declare type ButtonRootSlotProps = Omit<HTMLChakraProps<"button", ButtonRecipeProps>, "slot"> & {
     slot?: string | null | undefined;
-}
-
-/** combine chakra-button props with aria-button props */
-declare type FunctionalButtonProps = AriaButtonProps & Omit<ButtonRootProps, keyof AriaButtonProps | "slot"> & {
-    [key: `data-${string}`]: unknown;
 };
 
 /**
@@ -42,27 +53,39 @@ declare type FunctionalButtonProps = AriaButtonProps & Omit<ButtonRootProps, key
  * executes the first enabled Menu.Item action, while the dropdown trigger opens a menu
  * with all available options.
  *
- * Use with Menu.Item, Menu.Section, and Menu.Separator components for content.
+ * Use with Menu.Item, Menu.Section, and Separator components for content.
  */
 export declare const SplitButton: {
     (props: SplitButtonProps): JSX.Element;
     displayName: string;
 };
 
-export declare interface SplitButtonProps extends Omit<MenuTriggerProps, "trigger" | "children">, Required<Pick<MenuProps<object>, "onAction">>, Pick<ButtonProps, "size" | "variant" | "tone" | "isDisabled"> {
+export declare type SplitButtonButtonGroupSlotProps = HTMLChakraProps<"div">;
+
+export declare type SplitButtonPrimaryButtonSlotProps = HTMLChakraProps<"button">;
+
+export declare type SplitButtonProps = SplitButtonRecipeProps & Pick<ButtonProps, "size" | "tone" | "variant" | "isDisabled"> & Omit<MenuTriggerProps, "trigger" | "children"> & Required<Pick<MenuProps<object>, "onAction">> & {
     /**
      * Accessibility label for the dropdown trigger
      */
     "aria-label": string;
     /**
-     * Children should contain:
-     * - Icon slot: Icon component with slot="icon" containing an icon element
-     * - Menu components: Menu.Item, Menu.Section, Menu.Separator
+     * Icon element to display in the primary button (automatically wrapped in Icon component)
+     */
+    icon?: ReactNode;
+    /**
+     * Children should contain Menu components: Menu.Item, Menu.Section, Menu.Separator
      *
      * The component automatically selects the first enabled Menu.Item as the primary action.
      */
     children: ReactNode;
-}
+};
+
+declare type SplitButtonRecipeProps = SlotRecipeProps<"splitButton">;
+
+export declare type SplitButtonRootSlotProps = HTMLChakraProps<"div", SplitButtonRecipeProps>;
+
+export declare type SplitButtonTriggerSlotProps = HTMLChakraProps<"button">;
 
 export { }
 

package/dist/stack.d.ts

@@ -13,10 +13,10 @@ export declare const Stack: {
     displayName: string;
 };
 
-export declare interface StackProps extends StackProps_2 {
+export declare type StackProps = StackProps_2 & {
     children?: React.ReactNode;
     ref?: React.Ref<HTMLDivElement>;
-}
+};
 
 export { }