npm - @carbon-labs/react-animated-header - Versions diffs - 0.10.0 → 0.12.0 - Mend

@carbon-labs/react-animated-header 0.10.0 → 0.12.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (21) hide show

package/es/__stories__/AnimatedHeader.stories.d.ts CHANGED Viewed

@@ -8250,6 +8250,7 @@ export declare const ThemeG10: {
                     5: string;
                     6: string;
                     7: string;
+                    8: string;
                 };
             };
             options: number[];
@@ -8289,6 +8290,13 @@ export declare const ThemeG10: {
                         secondaryIcon: string;
                         subtitle?: undefined;
                     })[];
+                } | {
+                    id: number;
+                    label: string;
+                    tiles: {
+                        id: string;
+                        customContent: import("react/jsx-runtime").JSX.Element;
+                    }[];
                 };
                 2: {
                     id: number;
@@ -8324,6 +8332,13 @@ export declare const ThemeG10: {
                         secondaryIcon: string;
                         subtitle?: undefined;
                     })[];
+                } | {
+                    id: number;
+                    label: string;
+                    tiles: {
+                        id: string;
+                        customContent: import("react/jsx-runtime").JSX.Element;
+                    }[];
                 };
                 3: {
                     id: number;
@@ -8359,6 +8374,13 @@ export declare const ThemeG10: {
                         secondaryIcon: string;
                         subtitle?: undefined;
                     })[];
+                } | {
+                    id: number;
+                    label: string;
+                    tiles: {
+                        id: string;
+                        customContent: import("react/jsx-runtime").JSX.Element;
+                    }[];
                 };
                 4: {
                     id: number;
@@ -8394,6 +8416,13 @@ export declare const ThemeG10: {
                         secondaryIcon: string;
                         subtitle?: undefined;
                     })[];
+                } | {
+                    id: number;
+                    label: string;
+                    tiles: {
+                        id: string;
+                        customContent: import("react/jsx-runtime").JSX.Element;
+                    }[];
                 };
                 5: {
                     id: number;
@@ -8429,6 +8458,13 @@ export declare const ThemeG10: {
                         secondaryIcon: string;
                         subtitle?: undefined;
                     })[];
+                } | {
+                    id: number;
+                    label: string;
+                    tiles: {
+                        id: string;
+                        customContent: import("react/jsx-runtime").JSX.Element;
+                    }[];
                 };
                 6: {
                     id: number;
@@ -8464,6 +8500,13 @@ export declare const ThemeG10: {
                         secondaryIcon: string;
                         subtitle?: undefined;
                     })[];
+                } | {
+                    id: number;
+                    label: string;
+                    tiles: {
+                        id: string;
+                        customContent: import("react/jsx-runtime").JSX.Element;
+                    }[];
                 };
                 7: {
                     id: number;
@@ -8499,6 +8542,55 @@ export declare const ThemeG10: {
                         secondaryIcon: string;
                         subtitle?: undefined;
                     })[];
+                } | {
+                    id: number;
+                    label: string;
+                    tiles: {
+                        id: string;
+                        customContent: import("react/jsx-runtime").JSX.Element;
+                    }[];
+                };
+                8: {
+                    id: number;
+                    label: string;
+                    tiles: ({
+                        id: string;
+                        href: string;
+                        title: string;
+                        mainIcon: string;
+                        subtitle?: undefined;
+                    } | {
+                        id: string;
+                        href: string;
+                        title: string;
+                        subtitle: string;
+                        mainIcon: string;
+                    })[];
+                } | {
+                    id: number;
+                    label: string;
+                    tiles: ({
+                        id: string;
+                        href: string;
+                        title: string;
+                        subtitle: string;
+                        mainIcon: string;
+                        secondaryIcon?: undefined;
+                    } | {
+                        id: string;
+                        href: string;
+                        title: string;
+                        mainIcon: string;
+                        secondaryIcon: string;
+                        subtitle?: undefined;
+                    })[];
+                } | {
+                    id: number;
+                    label: string;
+                    tiles: {
+                        id: string;
+                        customContent: import("react/jsx-runtime").JSX.Element;
+                    }[];
                 };
             };
         };
@@ -8545,6 +8637,14 @@ export declare const ThemeG10: {
         workspaceLabel: {
             description: string;
         };
+        expandButtonLabel: {
+            description: string;
+            type: string;
+        };
+        collapseButtonLabel: {
+            description: string;
+            type: string;
+        };
     };
     args: {
         allTiles: ({
@@ -8581,6 +8681,13 @@ export declare const ThemeG10: {
                 secondaryIcon: string;
                 subtitle?: undefined;
             })[];
+        } | {
+            id: number;
+            label: string;
+            tiles: {
+                id: string;
+                customContent: import("react/jsx-runtime").JSX.Element;
+            }[];
         })[];
         allWorkspaces: {
             id: string;
@@ -8597,6 +8704,8 @@ export declare const ThemeG10: {
         tasksConfig: number;
         userName: string;
         welcomeText: string;
+        expandButtonLabel: string;
+        collapseButtonLabel: string;
         headerAnimation: number;
     };
 };
@@ -16847,6 +16956,7 @@ export declare const ThemeG100: {
                     5: string;
                     6: string;
                     7: string;
+                    8: string;
                 };
             };
             options: number[];
@@ -16886,6 +16996,13 @@ export declare const ThemeG100: {
                         secondaryIcon: string;
                         subtitle?: undefined;
                     })[];
+                } | {
+                    id: number;
+                    label: string;
+                    tiles: {
+                        id: string;
+                        customContent: import("react/jsx-runtime").JSX.Element;
+                    }[];
                 };
                 2: {
                     id: number;
@@ -16921,6 +17038,13 @@ export declare const ThemeG100: {
                         secondaryIcon: string;
                         subtitle?: undefined;
                     })[];
+                } | {
+                    id: number;
+                    label: string;
+                    tiles: {
+                        id: string;
+                        customContent: import("react/jsx-runtime").JSX.Element;
+                    }[];
                 };
                 3: {
                     id: number;
@@ -16956,6 +17080,13 @@ export declare const ThemeG100: {
                         secondaryIcon: string;
                         subtitle?: undefined;
                     })[];
+                } | {
+                    id: number;
+                    label: string;
+                    tiles: {
+                        id: string;
+                        customContent: import("react/jsx-runtime").JSX.Element;
+                    }[];
                 };
                 4: {
                     id: number;
@@ -16991,6 +17122,13 @@ export declare const ThemeG100: {
                         secondaryIcon: string;
                         subtitle?: undefined;
                     })[];
+                } | {
+                    id: number;
+                    label: string;
+                    tiles: {
+                        id: string;
+                        customContent: import("react/jsx-runtime").JSX.Element;
+                    }[];
                 };
                 5: {
                     id: number;
@@ -17026,6 +17164,13 @@ export declare const ThemeG100: {
                         secondaryIcon: string;
                         subtitle?: undefined;
                     })[];
+                } | {
+                    id: number;
+                    label: string;
+                    tiles: {
+                        id: string;
+                        customContent: import("react/jsx-runtime").JSX.Element;
+                    }[];
                 };
                 6: {
                     id: number;
@@ -17061,6 +17206,13 @@ export declare const ThemeG100: {
                         secondaryIcon: string;
                         subtitle?: undefined;
                     })[];
+                } | {
+                    id: number;
+                    label: string;
+                    tiles: {
+                        id: string;
+                        customContent: import("react/jsx-runtime").JSX.Element;
+                    }[];
                 };
                 7: {
                     id: number;
@@ -17096,6 +17248,55 @@ export declare const ThemeG100: {
                         secondaryIcon: string;
                         subtitle?: undefined;
                     })[];
+                } | {
+                    id: number;
+                    label: string;
+                    tiles: {
+                        id: string;
+                        customContent: import("react/jsx-runtime").JSX.Element;
+                    }[];
+                };
+                8: {
+                    id: number;
+                    label: string;
+                    tiles: ({
+                        id: string;
+                        href: string;
+                        title: string;
+                        mainIcon: string;
+                        subtitle?: undefined;
+                    } | {
+                        id: string;
+                        href: string;
+                        title: string;
+                        subtitle: string;
+                        mainIcon: string;
+                    })[];
+                } | {
+                    id: number;
+                    label: string;
+                    tiles: ({
+                        id: string;
+                        href: string;
+                        title: string;
+                        subtitle: string;
+                        mainIcon: string;
+                        secondaryIcon?: undefined;
+                    } | {
+                        id: string;
+                        href: string;
+                        title: string;
+                        mainIcon: string;
+                        secondaryIcon: string;
+                        subtitle?: undefined;
+                    })[];
+                } | {
+                    id: number;
+                    label: string;
+                    tiles: {
+                        id: string;
+                        customContent: import("react/jsx-runtime").JSX.Element;
+                    }[];
                 };
             };
         };
@@ -17142,6 +17343,14 @@ export declare const ThemeG100: {
         workspaceLabel: {
             description: string;
         };
+        expandButtonLabel: {
+            description: string;
+            type: string;
+        };
+        collapseButtonLabel: {
+            description: string;
+            type: string;
+        };
     };
     args: {
         allTiles: ({
@@ -17178,6 +17387,13 @@ export declare const ThemeG100: {
                 secondaryIcon: string;
                 subtitle?: undefined;
             })[];
+        } | {
+            id: number;
+            label: string;
+            tiles: {
+                id: string;
+                customContent: import("react/jsx-runtime").JSX.Element;
+            }[];
         })[];
         allWorkspaces: {
             id: string;
@@ -17194,6 +17410,8 @@ export declare const ThemeG100: {
         tasksConfig: number;
         userName: string;
         welcomeText: string;
+        expandButtonLabel: string;
+        collapseButtonLabel: string;
         headerAnimation: number;
     };
     globals: {

package/es/__stories__/data/SampleCustomTaskContent.d.ts ADDED Viewed

@@ -0,0 +1,10 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+declare const SampleCustomTaskContent: () => import("react/jsx-runtime").JSX.Element;
+export default SampleCustomTaskContent;

package/es/__stories__/data/index.d.ts CHANGED Viewed

@@ -36,6 +36,13 @@ export const headerTiles: ({
         secondaryIcon: string;
         subtitle?: undefined;
     })[];
+} | {
+    id: number;
+    label: string;
+    tiles: {
+        id: string;
+        customContent: import("react/jsx-runtime").JSX.Element;
+    }[];
 })[];
 export namespace tasksConfigButton {
     let type: string;

package/es/components/AnimatedHeader/AnimatedHeader.d.ts CHANGED Viewed

@@ -18,12 +18,13 @@ export interface SelectedWorkspace {
     label: string;
 }
 export interface Tile {
-    href: string | null;
+    href?: string | null;
     id: string;
-    mainIcon: string | null;
+    mainIcon?: string | null;
     secondaryIcon?: string | null;
     subtitle?: string | null;
-    title: string | null;
+    title?: string | null;
+    customContent?: ReactNode | null;
 }
 export interface TileGroup {
     id: number;
@@ -49,6 +50,8 @@ export interface AnimatedHeaderProps {
     userName?: string;
     welcomeText?: string;
     workspaceLabel?: string;
+    expandButtonLabel?: string;
+    collapseButtonLabel?: string;
 }
 declare const AnimatedHeader: React.FC<AnimatedHeaderProps>;
 export default AnimatedHeader;

package/es/components/AnimatedHeader/AnimatedHeader.js CHANGED Viewed

@@ -35,7 +35,9 @@ const AnimatedHeader = _ref => {
     tasksConfig,
     userName,
     welcomeText,
-    workspaceLabel = `Open in: ${userName}'s workspace` || `Select a workspace`
+    workspaceLabel = `Open in: ${userName}'s workspace` || `Select a workspace`,
+    expandButtonLabel = 'Expand',
+    collapseButtonLabel = 'Collapse'
   } = _ref;
   const prefix = usePrefix();
   const blockClass = `${prefix}--animated-header`;
@@ -168,6 +170,8 @@ const AnimatedHeader = _ref => {
     itemToString: handleWorkspaceItemsToString
   } : {}, renderWorkspaceSelectedItem ? {
     renderSelectedItem: renderWorkspaceSelectedItem
+  } : {}, selectedWorkspace ? {
+    selectedItem: selectedWorkspace
   } : {}))), /*#__PURE__*/React.createElement("div", {
     className: `${blockClass}__tiles-container`
   }, selectedTileGroup.tiles.map(tile => {
@@ -180,7 +184,8 @@ const AnimatedHeader = _ref => {
       secondaryIcon: tile.secondaryIcon,
       title: tile.title,
       subtitle: tile.subtitle,
-      productName: productName
+      productName: productName,
+      customContent: tile.customContent
     });
   }))), /*#__PURE__*/React.createElement("div", {
     className: `${blockClass}__button-collapse--gradient`
@@ -191,7 +196,7 @@ const AnimatedHeader = _ref => {
     kind: "ghost",
     renderIcon: open ? ChevronUp : ChevronDown,
     onClick: handleButtonCollapseClick
-  }, open ? `Collapse` : `Expand`))));
+  }, open ? collapseButtonLabel : expandButtonLabel))));
 };
 AnimatedHeader.displayName = 'Animated Header';
 AnimatedHeader.propTypes = {
@@ -207,10 +212,18 @@ AnimatedHeader.propTypes = {
    * Specify an optional className to be added to your Animated Header
    */
   className: PropTypes.string,
+  /**
+   * Custom collapse button label
+   */
+  collapseButtonLabel: PropTypes.string,
   /**
    * Provide short sentence in max. 3 lines related to product context
    */
   description: PropTypes.string,
+  /**
+   * Custom expand button label
+   */
+  expandButtonLabel: PropTypes.string,
   /**
    * Helper function passed to downshift that allows the library to render a
    * given item to a string label. By default, it extracts the `label` field

package/es/components/Tiles/BaseTile/BaseTile.d.ts CHANGED Viewed

@@ -6,7 +6,7 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import React from 'react';
+import React, { ReactNode } from 'react';
 /** Base Tile */
 interface BaseTileProps {
     id?: string;
@@ -17,6 +17,7 @@ interface BaseTileProps {
     title?: string;
     subtitle?: string;
     productName?: string;
+    customContent?: ReactNode;
 }
 export declare const BaseTile: React.FC<BaseTileProps>;
 export {};

package/es/components/Tiles/BaseTile/BaseTile.js CHANGED Viewed

@@ -20,7 +20,8 @@ const BaseTile = _ref => {
     secondaryIcon,
     title,
     subtitle,
-    productName
+    productName,
+    customContent
   } = _ref;
   const props = {
     id,
@@ -30,7 +31,8 @@ const BaseTile = _ref => {
     secondaryIcon,
     title,
     subtitle,
-    productName
+    productName,
+    customContent
   };
   const tile = id === 'ai-tile' ? /*#__PURE__*/React.createElement(AIPromptTile, props) : /*#__PURE__*/React.createElement(GlassTile, props);
   return tile;

package/es/components/Tiles/GlassTile/GlassTile.d.ts CHANGED Viewed

@@ -6,7 +6,7 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import React from 'react';
+import React, { ReactNode } from 'react';
 /** Primary UI component for user interaction */
 interface GlassTileProps {
     href?: string;
@@ -16,6 +16,7 @@ interface GlassTileProps {
     secondaryIcon?: string;
     subtitle?: string;
     title?: string;
+    customContent?: ReactNode;
 }
 export declare const GlassTile: React.FC<GlassTileProps>;
 export {};

package/es/components/Tiles/GlassTile/GlassTile.js CHANGED Viewed

@@ -20,7 +20,8 @@ const GlassTile = _ref => {
     open,
     secondaryIcon,
     subtitle,
-    title
+    title,
+    customContent
   } = _ref;
   const prefix = usePrefix();
   const blockClass = `${prefix}--animated-header__glass-tile`;
@@ -35,7 +36,9 @@ const GlassTile = _ref => {
     className: `${blockClass}--body${!open ? ` ${collapsed}` : ''}`
   }, /*#__PURE__*/React.createElement("div", {
     className: `${blockClass}--body-background`
-  }), /*#__PURE__*/React.createElement("div", {
+  }), customContent ? /*#__PURE__*/React.createElement("div", {
+    className: `${blockClass}--custom-content`
+  }, customContent) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     className: `${blockClass}--icons`
   }, MainIcon && /*#__PURE__*/React.createElement(MainIcon, {
     fill: `var(--cds-icon-secondary)`,
@@ -49,7 +52,7 @@ const GlassTile = _ref => {
   }, subtitle), SecondaryIcon && /*#__PURE__*/React.createElement(SecondaryIcon, {
     size: 16,
     fill: `var(--cds-icon-secondary)`
-  }))));
+  })))));
 };
 export { GlassTile };

package/lib/__stories__/AnimatedHeader.stories.d.ts CHANGED Viewed

@@ -8250,6 +8250,7 @@ export declare const ThemeG10: {
                     5: string;
                     6: string;
                     7: string;
+                    8: string;
                 };
             };
             options: number[];
@@ -8289,6 +8290,13 @@ export declare const ThemeG10: {
                         secondaryIcon: string;
                         subtitle?: undefined;
                     })[];
+                } | {
+                    id: number;
+                    label: string;
+                    tiles: {
+                        id: string;
+                        customContent: import("react/jsx-runtime").JSX.Element;
+                    }[];
                 };
                 2: {
                     id: number;
@@ -8324,6 +8332,13 @@ export declare const ThemeG10: {
                         secondaryIcon: string;
                         subtitle?: undefined;
                     })[];
+                } | {
+                    id: number;
+                    label: string;
+                    tiles: {
+                        id: string;
+                        customContent: import("react/jsx-runtime").JSX.Element;
+                    }[];
                 };
                 3: {
                     id: number;
@@ -8359,6 +8374,13 @@ export declare const ThemeG10: {
                         secondaryIcon: string;
                         subtitle?: undefined;
                     })[];
+                } | {
+                    id: number;
+                    label: string;
+                    tiles: {
+                        id: string;
+                        customContent: import("react/jsx-runtime").JSX.Element;
+                    }[];
                 };
                 4: {
                     id: number;
@@ -8394,6 +8416,13 @@ export declare const ThemeG10: {
                         secondaryIcon: string;
                         subtitle?: undefined;
                     })[];
+                } | {
+                    id: number;
+                    label: string;
+                    tiles: {
+                        id: string;
+                        customContent: import("react/jsx-runtime").JSX.Element;
+                    }[];
                 };
                 5: {
                     id: number;
@@ -8429,6 +8458,13 @@ export declare const ThemeG10: {
                         secondaryIcon: string;
                         subtitle?: undefined;
                     })[];
+                } | {
+                    id: number;
+                    label: string;
+                    tiles: {
+                        id: string;
+                        customContent: import("react/jsx-runtime").JSX.Element;
+                    }[];
                 };
                 6: {
                     id: number;
@@ -8464,6 +8500,13 @@ export declare const ThemeG10: {
                         secondaryIcon: string;
                         subtitle?: undefined;
                     })[];
+                } | {
+                    id: number;
+                    label: string;
+                    tiles: {
+                        id: string;
+                        customContent: import("react/jsx-runtime").JSX.Element;
+                    }[];
                 };
                 7: {
                     id: number;
@@ -8499,6 +8542,55 @@ export declare const ThemeG10: {
                         secondaryIcon: string;
                         subtitle?: undefined;
                     })[];
+                } | {
+                    id: number;
+                    label: string;
+                    tiles: {
+                        id: string;
+                        customContent: import("react/jsx-runtime").JSX.Element;
+                    }[];
+                };
+                8: {
+                    id: number;
+                    label: string;
+                    tiles: ({
+                        id: string;
+                        href: string;
+                        title: string;
+                        mainIcon: string;
+                        subtitle?: undefined;
+                    } | {
+                        id: string;
+                        href: string;
+                        title: string;
+                        subtitle: string;
+                        mainIcon: string;
+                    })[];
+                } | {
+                    id: number;
+                    label: string;
+                    tiles: ({
+                        id: string;
+                        href: string;
+                        title: string;
+                        subtitle: string;
+                        mainIcon: string;
+                        secondaryIcon?: undefined;
+                    } | {
+                        id: string;
+                        href: string;
+                        title: string;
+                        mainIcon: string;
+                        secondaryIcon: string;
+                        subtitle?: undefined;
+                    })[];
+                } | {
+                    id: number;
+                    label: string;
+                    tiles: {
+                        id: string;
+                        customContent: import("react/jsx-runtime").JSX.Element;
+                    }[];
                 };
             };
         };
@@ -8545,6 +8637,14 @@ export declare const ThemeG10: {
         workspaceLabel: {
             description: string;
         };
+        expandButtonLabel: {
+            description: string;
+            type: string;
+        };
+        collapseButtonLabel: {
+            description: string;
+            type: string;
+        };
     };
     args: {
         allTiles: ({
@@ -8581,6 +8681,13 @@ export declare const ThemeG10: {
                 secondaryIcon: string;
                 subtitle?: undefined;
             })[];
+        } | {
+            id: number;
+            label: string;
+            tiles: {
+                id: string;
+                customContent: import("react/jsx-runtime").JSX.Element;
+            }[];
         })[];
         allWorkspaces: {
             id: string;
@@ -8597,6 +8704,8 @@ export declare const ThemeG10: {
         tasksConfig: number;
         userName: string;
         welcomeText: string;
+        expandButtonLabel: string;
+        collapseButtonLabel: string;
         headerAnimation: number;
     };
 };
@@ -16847,6 +16956,7 @@ export declare const ThemeG100: {
                     5: string;
                     6: string;
                     7: string;
+                    8: string;
                 };
             };
             options: number[];
@@ -16886,6 +16996,13 @@ export declare const ThemeG100: {
                         secondaryIcon: string;
                         subtitle?: undefined;
                     })[];
+                } | {
+                    id: number;
+                    label: string;
+                    tiles: {
+                        id: string;
+                        customContent: import("react/jsx-runtime").JSX.Element;
+                    }[];
                 };
                 2: {
                     id: number;
@@ -16921,6 +17038,13 @@ export declare const ThemeG100: {
                         secondaryIcon: string;
                         subtitle?: undefined;
                     })[];
+                } | {
+                    id: number;
+                    label: string;
+                    tiles: {
+                        id: string;
+                        customContent: import("react/jsx-runtime").JSX.Element;
+                    }[];
                 };
                 3: {
                     id: number;
@@ -16956,6 +17080,13 @@ export declare const ThemeG100: {
                         secondaryIcon: string;
                         subtitle?: undefined;
                     })[];
+                } | {
+                    id: number;
+                    label: string;
+                    tiles: {
+                        id: string;
+                        customContent: import("react/jsx-runtime").JSX.Element;
+                    }[];
                 };
                 4: {
                     id: number;
@@ -16991,6 +17122,13 @@ export declare const ThemeG100: {
                         secondaryIcon: string;
                         subtitle?: undefined;
                     })[];
+                } | {
+                    id: number;
+                    label: string;
+                    tiles: {
+                        id: string;
+                        customContent: import("react/jsx-runtime").JSX.Element;
+                    }[];
                 };
                 5: {
                     id: number;
@@ -17026,6 +17164,13 @@ export declare const ThemeG100: {
                         secondaryIcon: string;
                         subtitle?: undefined;
                     })[];
+                } | {
+                    id: number;
+                    label: string;
+                    tiles: {
+                        id: string;
+                        customContent: import("react/jsx-runtime").JSX.Element;
+                    }[];
                 };
                 6: {
                     id: number;
@@ -17061,6 +17206,13 @@ export declare const ThemeG100: {
                         secondaryIcon: string;
                         subtitle?: undefined;
                     })[];
+                } | {
+                    id: number;
+                    label: string;
+                    tiles: {
+                        id: string;
+                        customContent: import("react/jsx-runtime").JSX.Element;
+                    }[];
                 };
                 7: {
                     id: number;
@@ -17096,6 +17248,55 @@ export declare const ThemeG100: {
                         secondaryIcon: string;
                         subtitle?: undefined;
                     })[];
+                } | {
+                    id: number;
+                    label: string;
+                    tiles: {
+                        id: string;
+                        customContent: import("react/jsx-runtime").JSX.Element;
+                    }[];
+                };
+                8: {
+                    id: number;
+                    label: string;
+                    tiles: ({
+                        id: string;
+                        href: string;
+                        title: string;
+                        mainIcon: string;
+                        subtitle?: undefined;
+                    } | {
+                        id: string;
+                        href: string;
+                        title: string;
+                        subtitle: string;
+                        mainIcon: string;
+                    })[];
+                } | {
+                    id: number;
+                    label: string;
+                    tiles: ({
+                        id: string;
+                        href: string;
+                        title: string;
+                        subtitle: string;
+                        mainIcon: string;
+                        secondaryIcon?: undefined;
+                    } | {
+                        id: string;
+                        href: string;
+                        title: string;
+                        mainIcon: string;
+                        secondaryIcon: string;
+                        subtitle?: undefined;
+                    })[];
+                } | {
+                    id: number;
+                    label: string;
+                    tiles: {
+                        id: string;
+                        customContent: import("react/jsx-runtime").JSX.Element;
+                    }[];
                 };
             };
         };
@@ -17142,6 +17343,14 @@ export declare const ThemeG100: {
         workspaceLabel: {
             description: string;
         };
+        expandButtonLabel: {
+            description: string;
+            type: string;
+        };
+        collapseButtonLabel: {
+            description: string;
+            type: string;
+        };
     };
     args: {
         allTiles: ({
@@ -17178,6 +17387,13 @@ export declare const ThemeG100: {
                 secondaryIcon: string;
                 subtitle?: undefined;
             })[];
+        } | {
+            id: number;
+            label: string;
+            tiles: {
+                id: string;
+                customContent: import("react/jsx-runtime").JSX.Element;
+            }[];
         })[];
         allWorkspaces: {
             id: string;
@@ -17194,6 +17410,8 @@ export declare const ThemeG100: {
         tasksConfig: number;
         userName: string;
         welcomeText: string;
+        expandButtonLabel: string;
+        collapseButtonLabel: string;
         headerAnimation: number;
     };
     globals: {

package/lib/__stories__/data/SampleCustomTaskContent.d.ts ADDED Viewed

@@ -0,0 +1,10 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+declare const SampleCustomTaskContent: () => import("react/jsx-runtime").JSX.Element;
+export default SampleCustomTaskContent;

package/lib/__stories__/data/index.d.ts CHANGED Viewed

@@ -36,6 +36,13 @@ export const headerTiles: ({
         secondaryIcon: string;
         subtitle?: undefined;
     })[];
+} | {
+    id: number;
+    label: string;
+    tiles: {
+        id: string;
+        customContent: import("react/jsx-runtime").JSX.Element;
+    }[];
 })[];
 export namespace tasksConfigButton {
     let type: string;

package/lib/components/AnimatedHeader/AnimatedHeader.d.ts CHANGED Viewed

@@ -18,12 +18,13 @@ export interface SelectedWorkspace {
     label: string;
 }
 export interface Tile {
-    href: string | null;
+    href?: string | null;
     id: string;
-    mainIcon: string | null;
+    mainIcon?: string | null;
     secondaryIcon?: string | null;
     subtitle?: string | null;
-    title: string | null;
+    title?: string | null;
+    customContent?: ReactNode | null;
 }
 export interface TileGroup {
     id: number;
@@ -49,6 +50,8 @@ export interface AnimatedHeaderProps {
     userName?: string;
     welcomeText?: string;
     workspaceLabel?: string;
+    expandButtonLabel?: string;
+    collapseButtonLabel?: string;
 }
 declare const AnimatedHeader: React.FC<AnimatedHeaderProps>;
 export default AnimatedHeader;

package/lib/components/AnimatedHeader/AnimatedHeader.js CHANGED Viewed

@@ -39,7 +39,9 @@ const AnimatedHeader = _ref => {
     tasksConfig,
     userName,
     welcomeText,
-    workspaceLabel = `Open in: ${userName}'s workspace` || `Select a workspace`
+    workspaceLabel = `Open in: ${userName}'s workspace` || `Select a workspace`,
+    expandButtonLabel = 'Expand',
+    collapseButtonLabel = 'Collapse'
   } = _ref;
   const prefix = usePrefix.usePrefix();
   const blockClass = `${prefix}--animated-header`;
@@ -172,6 +174,8 @@ const AnimatedHeader = _ref => {
     itemToString: handleWorkspaceItemsToString
   } : {}, renderWorkspaceSelectedItem ? {
     renderSelectedItem: renderWorkspaceSelectedItem
+  } : {}, selectedWorkspace ? {
+    selectedItem: selectedWorkspace
   } : {}))), /*#__PURE__*/React.createElement("div", {
     className: `${blockClass}__tiles-container`
   }, selectedTileGroup.tiles.map(tile => {
@@ -184,7 +188,8 @@ const AnimatedHeader = _ref => {
       secondaryIcon: tile.secondaryIcon,
       title: tile.title,
       subtitle: tile.subtitle,
-      productName: productName
+      productName: productName,
+      customContent: tile.customContent
     });
   }))), /*#__PURE__*/React.createElement("div", {
     className: `${blockClass}__button-collapse--gradient`
@@ -195,7 +200,7 @@ const AnimatedHeader = _ref => {
     kind: "ghost",
     renderIcon: open ? bucket3.ChevronUp : bucket3.ChevronDown,
     onClick: handleButtonCollapseClick
-  }, open ? `Collapse` : `Expand`))));
+  }, open ? collapseButtonLabel : expandButtonLabel))));
 };
 AnimatedHeader.displayName = 'Animated Header';
 AnimatedHeader.propTypes = {
@@ -211,10 +216,18 @@ AnimatedHeader.propTypes = {
    * Specify an optional className to be added to your Animated Header
    */
   className: PropTypes.string,
+  /**
+   * Custom collapse button label
+   */
+  collapseButtonLabel: PropTypes.string,
   /**
    * Provide short sentence in max. 3 lines related to product context
    */
   description: PropTypes.string,
+  /**
+   * Custom expand button label
+   */
+  expandButtonLabel: PropTypes.string,
   /**
    * Helper function passed to downshift that allows the library to render a
    * given item to a string label. By default, it extracts the `label` field

package/lib/components/Tiles/BaseTile/BaseTile.d.ts CHANGED Viewed

@@ -6,7 +6,7 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import React from 'react';
+import React, { ReactNode } from 'react';
 /** Base Tile */
 interface BaseTileProps {
     id?: string;
@@ -17,6 +17,7 @@ interface BaseTileProps {
     title?: string;
     subtitle?: string;
     productName?: string;
+    customContent?: ReactNode;
 }
 export declare const BaseTile: React.FC<BaseTileProps>;
 export {};

package/lib/components/Tiles/BaseTile/BaseTile.js CHANGED Viewed

@@ -22,7 +22,8 @@ const BaseTile = _ref => {
     secondaryIcon,
     title,
     subtitle,
-    productName
+    productName,
+    customContent
   } = _ref;
   const props = {
     id,
@@ -32,7 +33,8 @@ const BaseTile = _ref => {
     secondaryIcon,
     title,
     subtitle,
-    productName
+    productName,
+    customContent
   };
   const tile = id === 'ai-tile' ? /*#__PURE__*/React.createElement(AIPromptTile.AIPromptTile, props) : /*#__PURE__*/React.createElement(GlassTile.GlassTile, props);
   return tile;

package/lib/components/Tiles/GlassTile/GlassTile.d.ts CHANGED Viewed

@@ -6,7 +6,7 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import React from 'react';
+import React, { ReactNode } from 'react';
 /** Primary UI component for user interaction */
 interface GlassTileProps {
     href?: string;
@@ -16,6 +16,7 @@ interface GlassTileProps {
     secondaryIcon?: string;
     subtitle?: string;
     title?: string;
+    customContent?: ReactNode;
 }
 export declare const GlassTile: React.FC<GlassTileProps>;
 export {};

package/lib/components/Tiles/GlassTile/GlassTile.js CHANGED Viewed

@@ -22,7 +22,8 @@ const GlassTile = _ref => {
     open,
     secondaryIcon,
     subtitle,
-    title
+    title,
+    customContent
   } = _ref;
   const prefix = usePrefix.usePrefix();
   const blockClass = `${prefix}--animated-header__glass-tile`;
@@ -37,7 +38,9 @@ const GlassTile = _ref => {
     className: `${blockClass}--body${!open ? ` ${collapsed}` : ''}`
   }, /*#__PURE__*/React.createElement("div", {
     className: `${blockClass}--body-background`
-  }), /*#__PURE__*/React.createElement("div", {
+  }), customContent ? /*#__PURE__*/React.createElement("div", {
+    className: `${blockClass}--custom-content`
+  }, customContent) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     className: `${blockClass}--icons`
   }, MainIcon && /*#__PURE__*/React.createElement(MainIcon, {
     fill: `var(--cds-icon-secondary)`,
@@ -51,7 +54,7 @@ const GlassTile = _ref => {
   }, subtitle), SecondaryIcon && /*#__PURE__*/React.createElement(SecondaryIcon, {
     size: 16,
     fill: `var(--cds-icon-secondary)`
-  }))));
+  })))));
 };
 exports.GlassTile = GlassTile;

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@carbon-labs/react-animated-header",
-  "version": "0.10.0",
+  "version": "0.12.0",
   "publishConfig": {
     "access": "public",
     "provenance": true
@@ -36,5 +36,5 @@
   "devDependencies": {
     "@carbon-labs/utilities": "canary"
   },
-  "gitHead": "74de03e1cd9ba159fd11071f1c2f481c907e8ef2"
+  "gitHead": "1ea42e5a8c5c9bf5797973dd614f2d44851d595d"
 }

package/scss/Tiles/AIPromptTile/ai-prompt-tile.scss CHANGED Viewed

@@ -188,6 +188,10 @@ $prefix: 'clabs--animated-header__ai-prompt-tile' !default;
   fill: $icon-primary;
 }
+.#{$prefix}--custom-content {
+  z-index: 4;
+}
 @keyframes animate-border {
   0% {
     background-position: 100% 0%;

package/scss/Tiles/GlassTile/glass-tile.scss CHANGED Viewed

@@ -129,3 +129,7 @@ $prefix: 'clabs--animated-header__glass-tile' !default;
     white-space: initial;
   }
 }
+.#{$prefix}--custom-content {
+  z-index: 2;
+}