@commercetools/nimbus 3.2.0 → 3.4.0

package/dist/theme/slot-recipes/index.d.ts

@@ -73,6 +73,28 @@ export declare const slotRecipes: {
             };
         };
     }>;
+    nimbusBreadcrumbs: import('@chakra-ui/react').SlotRecipeDefinition<"root" | "link" | "list" | "separator" | "item", {
+        size: {
+            sm: {
+                item: {
+                    textStyle: "sm";
+                    "--breadcrumbs-gap": "{spacing.100}";
+                };
+                list: {
+                    "--breadcrumbs-gap": "{spacing.100}";
+                };
+            };
+            md: {
+                item: {
+                    textStyle: "md";
+                    "--breadcrumbs-gap": "{spacing.200}";
+                };
+                list: {
+                    "--breadcrumbs-gap": "{spacing.200}";
+                };
+            };
+        };
+    }>;
     nimbusCalendar: import('@chakra-ui/react').SlotRecipeDefinition<"root" | "grid" | "header" | "grids" | "monthTitle" | "gridHeader" | "headerCell" | "gridBody" | "bodyCell", import('@chakra-ui/react').SlotRecipeVariantRecord<"root" | "grid" | "header" | "grids" | "monthTitle" | "gridHeader" | "headerCell" | "gridBody" | "bodyCell">>;
     nimbusCard: import('@chakra-ui/react').SlotRecipeDefinition<"root" | "body" | "footer" | "header", {
         size: {
@@ -147,6 +169,56 @@ export declare const slotRecipes: {
             };
         };
     }>;
+    nimbusChatMessage: import('@chakra-ui/react').SlotRecipeDefinition<"root" | "body" | "meta" | "actions" | "avatar" | "typing", {
+        sender: {
+            user: {
+                root: {
+                    justifyContent: "end";
+                };
+                body: {
+                    gridColumn: number;
+                    justifySelf: "end";
+                    maxWidth: "480px";
+                    backgroundColor: "colorPalette.2";
+                };
+                avatar: {
+                    gridColumn: number;
+                    marginInlineStart: "200";
+                };
+                meta: {
+                    gridColumn: number;
+                };
+            };
+            agent: {
+                root: {
+                    justifyContent: "start";
+                };
+                body: {
+                    gridColumn: number;
+                    justifySelf: "start";
+                    maxWidth: "632px";
+                    backgroundColor: "bg";
+                };
+                avatar: {
+                    gridColumn: number;
+                    marginInlineEnd: "200";
+                };
+                meta: {
+                    gridColumn: number;
+                };
+            };
+        };
+        tone: {
+            neutral: {};
+            error: {
+                body: {
+                    backgroundColor: "critical.2";
+                    borderColor: "critical.6";
+                };
+            };
+        };
+    }>;
+    nimbusChatMessageList: import('@chakra-ui/react').SlotRecipeDefinition<"root" | "viewport" | "empty" | "item" | "scrollToBottom", import('@chakra-ui/react').SlotRecipeVariantRecord<"root" | "viewport" | "empty" | "item" | "scrollToBottom">>;
     nimbusCheckbox: import('@chakra-ui/react').SlotRecipeDefinition<"root" | "label" | "indicator", {
         size: {
             md: {
@@ -195,7 +267,7 @@ export declare const slotRecipes: {
         variant: {
             solid: {
                 root: {
-                    bg: "primary.1";
+                    bg: "neutral.1";
                     "&:hover:not([data-disabled='true'])": {
                         bg: "primary.2";
                     };
@@ -642,6 +714,47 @@ export declare const slotRecipes: {
             };
         };
     }>;
+    nimbusItem: import('@chakra-ui/react').SlotRecipeDefinition<"root" | "content" | "media" | "footer" | "header" | "title" | "description" | "actions", {
+        size: {
+            xs: {
+                root: {
+                    "--item-gap": "spacing.200";
+                    "--item-padding": "spacing.200";
+                };
+            };
+            sm: {
+                root: {
+                    "--item-gap": "spacing.300";
+                    "--item-padding": "spacing.300";
+                };
+            };
+            md: {
+                root: {
+                    "--item-gap": "spacing.400";
+                    "--item-padding": "spacing.400";
+                };
+            };
+        };
+        variant: {
+            plain: {
+                root: {
+                    backgroundColor: "transparent";
+                };
+            };
+            outline: {
+                root: {
+                    border: "solid-25";
+                    borderColor: "colorPalette.6";
+                };
+            };
+            subtle: {
+                root: {
+                    backgroundColor: "colorPalette.2";
+                };
+            };
+        };
+    }>;
+    nimbusItemGroup: import('@chakra-ui/react').SlotRecipeDefinition<"root" | "separator", import('@chakra-ui/react').SlotRecipeVariantRecord<"root" | "separator">>;
     nimbusList: import('@chakra-ui/react').SlotRecipeDefinition<"root" | "indicator" | "item", {
         variant: {
             marker: {
@@ -1114,7 +1227,7 @@ export declare const slotRecipes: {
                 root: {
                     "--border-width": "sizes.25";
                     "--border-color": "colors.neutral.7";
-                    backgroundColor: "primary.1";
+                    backgroundColor: "neutral.1";
                 };
             };
             ghost: {};
@@ -1185,6 +1298,136 @@ export declare const slotRecipes: {
             };
         };
     }>;
+    nimbusSlider: import('@chakra-ui/react').SlotRecipeDefinition<"root" | "thumb" | "fill" | "track" | "tick" | "tickLabel", {
+        size: {
+            sm: {
+                root: {
+                    "--slider-track-thickness": "sizes.200";
+                    "--slider-thumb-size": "sizes.400";
+                    "--slider-tick-length": "sizes.100";
+                };
+            };
+            md: {
+                root: {
+                    "--slider-track-thickness": "sizes.400";
+                    "--slider-thumb-size": "sizes.600";
+                    "--slider-tick-length": "sizes.200";
+                };
+            };
+        };
+        variant: {
+            filled: {};
+            minimal: {
+                fill: {
+                    backgroundColor: "transparent";
+                    "&[data-range='true']::before": {
+                        content: "\"\"";
+                        position: "absolute";
+                        insetInline: "0";
+                        top: "50%";
+                        height: "calc(var(--slider-track-thickness) / 2)";
+                        transform: "translateY(-50%)";
+                        transition: "height 0.15s, background-color 0.15s";
+                        borderRadius: "full";
+                        backgroundColor: "colorPalette.9";
+                    };
+                    "[data-slot=\"root\"]:hover &[data-range=\"true\"]::before, [data-slot=\"root\"]:focus-within &[data-range=\"true\"]::before, [data-slot=\"root\"]:has([data-dragging=\"true\"]) &[data-range=\"true\"]::before": {
+                        height: string;
+                        backgroundColor: string;
+                    };
+                    '&[data-orientation="vertical"]': {
+                        "&[data-range='true']::before": {
+                            insetInline: "auto";
+                            insetInlineStart: "50%";
+                            top: "0";
+                            bottom: "0";
+                            height: "auto";
+                            width: "calc(var(--slider-track-thickness) / 2)";
+                            transform: "translateX(-50%)";
+                            transition: "width 0.15s, background-color 0.15s";
+                        };
+                        "[data-slot=\"root\"]:hover &[data-range=\"true\"]::before, [data-slot=\"root\"]:focus-within &[data-range=\"true\"]::before, [data-slot=\"root\"]:has([data-dragging=\"true\"]) &[data-range=\"true\"]::before": {
+                            width: string;
+                            height: string;
+                        };
+                    };
+                };
+                track: {
+                    "&::before": {
+                        insetBlock: "auto";
+                        insetInline: "calc(var(--slider-thumb-size) / -2)";
+                        top: "50%";
+                        height: "calc(var(--slider-track-thickness) / 2)";
+                        transform: "translateY(-50%)";
+                        transition: "height 0.15s, width 0.15s";
+                        borderRadius: "full";
+                        backgroundColor: "neutral.6";
+                    };
+                    "[data-slot=\"root\"]:hover &::before, [data-slot=\"root\"]:focus-within &::before, [data-slot=\"root\"]:has([data-dragging=\"true\"]) &::before": {
+                        height: string;
+                    };
+                    '&[data-orientation="vertical"]': {
+                        "&::before": {
+                            insetInline: "auto";
+                            insetInlineStart: "50%";
+                            top: "calc(var(--slider-thumb-size) / -2)";
+                            bottom: "calc(var(--slider-thumb-size) / -2)";
+                            height: "auto";
+                            width: "calc(var(--slider-track-thickness) / 2)";
+                            transform: "translateX(-50%)";
+                            borderRadius: "full";
+                            backgroundColor: "neutral.6";
+                        };
+                        "[data-slot=\"root\"]:hover &::before, [data-slot=\"root\"]:focus-within &::before, [data-slot=\"root\"]:has([data-dragging=\"true\"]) &::before": {
+                            width: string;
+                            height: string;
+                        };
+                    };
+                };
+                thumb: {
+                    backgroundColor: "colorPalette.9";
+                    borderColor: "colorPalette.9";
+                    "[data-slot=\"root\"]:hover &, [data-slot=\"root\"]:focus-within &, [data-slot=\"root\"]:has([data-dragging=\"true\"]) &": {
+                        backgroundColor: "colorPalette.10";
+                        borderColor: "colorPalette.10";
+                    };
+                };
+                tick: {
+                    "&[data-filled='true']": {
+                        backgroundColor: "neutral.9";
+                    };
+                    "&[data-filled='true'][data-range='true']": {
+                        backgroundColor: "colorPalette.contrast";
+                    };
+                    "&[data-on-thumb='true']": {
+                        backgroundColor: "colorPalette.contrast";
+                    };
+                };
+            };
+            enclosed: {
+                track: {
+                    height: "var(--slider-thumb-size)";
+                    '&[data-orientation="vertical"]': {
+                        width: "var(--slider-thumb-size)";
+                    };
+                };
+                fill: {
+                    height: "var(--slider-thumb-size)";
+                    '&[data-orientation="vertical"]': {
+                        width: "var(--slider-thumb-size)";
+                    };
+                };
+                thumb: {
+                    boxSize: "var(--slider-thumb-size)";
+                    borderWidth: "{spacing.50}";
+                    borderStyle: "solid";
+                    borderColor: "transparent";
+                    backgroundClip: "padding-box";
+                    shadow: "1";
+                };
+            };
+        };
+    }>;
     nimbusSplitButton: import('@chakra-ui/react').SlotRecipeDefinition<"root" | "buttonGroup" | "primaryButton" | "dropdownTrigger", {
         variant: {
             solid: {
@@ -1379,12 +1622,16 @@ export declare const slotRecipes: {
             };
         };
     }>;
-    nimbusTabNav: import('@chakra-ui/react').SlotRecipeDefinition<"root" | "item", {
+    nimbusTabNav: import('@chakra-ui/react').SlotRecipeDefinition<"root" | "indicator" | "item", {
         variant: {
-            tabs: {
+            line: {
                 root: {
                     boxShadow: "0 1px 0 0 {colors.neutral.6}";
                 };
+                indicator: {
+                    background: "primary.9";
+                    borderRadius: "0";
+                };
                 item: {
                     color: "neutral.12";
                     cursor: "pointer";
@@ -1397,14 +1644,87 @@ export declare const slotRecipes: {
                         color: "primary.11";
                     };
                     '&[aria-current="page"]': {
-                        color: "primary.9";
+                        color: "primary.11";
                         boxShadow: "0 2px 0 0 {colors.primary.9}";
                     };
+                    '[data-animated="true"] &[aria-current="page"]': {
+                        boxShadow: string;
+                    };
                     _disabled: {
                         layerStyle: "disabled";
                     };
                 };
             };
+            rounded: {
+                root: {
+                    colorPalette: "primary";
+                    gap: "100";
+                };
+                indicator: {
+                    background: "colorPalette.3";
+                    borderRadius: "200";
+                };
+                item: {
+                    readonly color: "neutral.11";
+                    readonly cursor: "pointer";
+                    readonly fontWeight: "500";
+                    readonly textDecoration: "none";
+                    readonly borderRadius: "200";
+                    readonly position: "relative";
+                    readonly zIndex: 1;
+                    readonly transition: "color 150ms ease, background 150ms ease";
+                    readonly focusVisibleRing: "outside";
+                    readonly _hover: {
+                        readonly color: "colorPalette.11";
+                    };
+                    readonly '&[aria-current="page"]': {
+                        readonly color: "colorPalette.11";
+                        readonly background: "colorPalette.3";
+                    };
+                    readonly '[data-animated="true"] &[aria-current="page"]': {
+                        readonly background: "transparent";
+                    };
+                    readonly _disabled: {
+                        readonly layerStyle: "disabled";
+                    };
+                };
+            };
+            pill: {
+                root: {
+                    colorPalette: "primary";
+                    gap: "100";
+                };
+                indicator: {
+                    background: "colorPalette.3";
+                    borderRadius: "full";
+                };
+                item: {
+                    borderRadius: "full";
+                    paddingLeft: "calc(var(--tab-nav-padding-left) + {spacing.100})";
+                    paddingRight: "calc(var(--tab-nav-padding-right) + {spacing.100})";
+                    color: "neutral.11";
+                    cursor: "pointer";
+                    fontWeight: "500";
+                    textDecoration: "none";
+                    position: "relative";
+                    zIndex: 1;
+                    transition: "color 150ms ease, background 150ms ease";
+                    focusVisibleRing: "outside";
+                    _hover: {
+                        readonly color: "colorPalette.11";
+                    };
+                    '&[aria-current="page"]': {
+                        readonly color: "colorPalette.11";
+                        readonly background: "colorPalette.3";
+                    };
+                    '[data-animated="true"] &[aria-current="page"]': {
+                        readonly background: "transparent";
+                    };
+                    _disabled: {
+                        readonly layerStyle: "disabled";
+                    };
+                };
+            };
         };
         size: {
             sm: {
@@ -1436,14 +1756,82 @@ export declare const slotRecipes: {
             };
         };
     }>;
-    nimbusTabs: import('@chakra-ui/react').SlotRecipeDefinition<"root" | "list" | "tab" | "trigger" | "panel" | "panels", {
+    nimbusTabs: import('@chakra-ui/react').SlotRecipeDefinition<"root" | "list" | "tab" | "indicator" | "panel" | "panels", {
         variant: {
-            line: {};
-            pills: {
+            line: {
+                indicator: {
+                    background: "primary.9";
+                    borderRadius: "0";
+                };
+                tab: {
+                    '[data-animated="true"] &': {
+                        position: "relative";
+                        zIndex: "1";
+                    };
+                    '[data-animated="true"] &[data-selected]': {
+                        boxShadow: string;
+                    };
+                };
+            };
+            rounded: {
+                root: {
+                    colorPalette: "primary";
+                };
+                indicator: {
+                    background: "colorPalette.3";
+                    borderRadius: "200";
+                };
+                list: {
+                    gap: "100";
+                };
+                tab: {
+                    readonly color: "neutral.11";
+                    readonly borderRadius: "200";
+                    readonly _hover: {
+                        readonly color: "colorPalette.11";
+                    };
+                    readonly _selected: {
+                        readonly color: "colorPalette.11";
+                        readonly background: "colorPalette.3";
+                    };
+                    readonly '[data-animated="true"] &': {
+                        readonly position: "relative";
+                        readonly zIndex: "1";
+                    };
+                    readonly '[data-animated="true"] &[data-selected]': {
+                        readonly background: "transparent";
+                    };
+                };
+            };
+            pill: {
+                root: {
+                    colorPalette: "primary";
+                };
+                indicator: {
+                    background: "colorPalette.3";
+                    borderRadius: "full";
+                };
+                list: {
+                    gap: "100";
+                };
                 tab: {
                     borderRadius: "full";
+                    paddingLeft: "calc(var(--tabs-padding-left) + {spacing.100})";
+                    paddingRight: "calc(var(--tabs-padding-right) + {spacing.100})";
+                    color: "neutral.11";
+                    _hover: {
+                        readonly color: "colorPalette.11";
+                    };
                     _selected: {
-                        backgroundColor: "primary.3";
+                        readonly color: "colorPalette.11";
+                        readonly background: "colorPalette.3";
+                    };
+                    '[data-animated="true"] &': {
+                        readonly position: "relative";
+                        readonly zIndex: "1";
+                    };
+                    '[data-animated="true"] &[data-selected]': {
+                        readonly background: "transparent";
                     };
                 };
             };
@@ -1569,7 +1957,7 @@ export declare const slotRecipes: {
                 root: {
                     "--border-width": "sizes.25";
                     "--border-color": "colors.neutral.7";
-                    backgroundColor: "primary.1";
+                    backgroundColor: "neutral.1";
                 };
             };
             ghost: {};
@@ -1638,6 +2026,34 @@ export declare const slotRecipes: {
             };
         };
     }>;
+    nimbusTree: import('@chakra-ui/react').SlotRecipeDefinition<"root" | "indicator" | "item" | "itemContent", {
+        size: {
+            md: {
+                root: {
+                    "--tree-row-min-height": "sizes.1000";
+                    "--tree-control-size": "sizes.600";
+                    "--tree-indicator-size": "sizes.500";
+                    "--tree-row-padding-y": "spacing.200";
+                };
+                item: {
+                    fontSize: "400";
+                    lineHeight: "500";
+                };
+            };
+            sm: {
+                root: {
+                    "--tree-row-min-height": "sizes.800";
+                    "--tree-control-size": "sizes.500";
+                    "--tree-indicator-size": "sizes.400";
+                    "--tree-row-padding-y": "spacing.100";
+                };
+                item: {
+                    fontSize: "350";
+                    lineHeight: "400";
+                };
+            };
+        };
+    }>;
     nimbusToggleButtonGroup: import('@chakra-ui/react').SlotRecipeDefinition<"root" | "button", {
         size: {
             xs: {

package/dist/theme/tokens/index.d.ts

@@ -767,6 +767,9 @@ export declare const tokens: {
         sticky: {
             value: number;
         };
+        fab: {
+            value: number;
+        };
         banner: {
             value: number;
         };
@@ -1588,6 +1591,9 @@ export declare const darkTokens: {
         sticky: {
             value: number;
         };
+        fab: {
+            value: number;
+        };
         banner: {
             value: number;
         };

package/dist/theme/tokens/z-index.d.ts

@@ -14,6 +14,9 @@ export declare const zIndex: {
     sticky: {
         value: number;
     };
+    fab: {
+        value: number;
+    };
     banner: {
         value: number;
     };

package/dist/utils/index.d.ts

@@ -4,3 +4,4 @@ export { extractPaddingProps } from './extract-padding-props.js';
 export { extractStyleProps } from './extract-style-props.js';
 export { mergeRefs } from './merge-refs.js';
 export { noop } from './no-op.js';
+export { resolveVariantAlias } from './resolve-variant-alias.js';

package/dist/utils/resolve-variant-alias.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Resolve a deprecated string variant alias to its replacement.
+ *
+ * A `variant` prop can be a concrete string or a responsive object/array; only
+ * plain-string values are remapped (via `aliases`), while unknown strings and
+ * responsive values pass through untouched. Used by components that keep a
+ * deprecated variant name working as a non-breaking alias for its replacement
+ * (e.g. Tabs `pills` → `pill`, TabNav `tabs` → `line`) so the recipe only ever
+ * sees real variant keys.
+ *
+ * @example
+ * ```ts
+ * resolveVariantAlias("pills", { pills: "pill" }); // "pill"
+ * resolveVariantAlias("line", { pills: "pill" });  // "line" (pass-through)
+ * ```
+ */
+export declare function resolveVariantAlias<T>(value: T, aliases: Record<string, string>): T;