@carbon-labs/react-animated-header 0.10.0 → 0.11.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
  1. package/es/__stories__/AnimatedHeader.stories.d.ts +198 -0
  2. package/es/__stories__/data/SampleCustomTaskContent.d.ts +10 -0
  3. package/es/__stories__/data/index.d.ts +7 -0
  4. package/es/components/AnimatedHeader/AnimatedHeader.d.ts +4 -3
  5. package/es/components/AnimatedHeader/AnimatedHeader.js +4 -1
  6. package/es/components/Tiles/BaseTile/BaseTile.d.ts +2 -1
  7. package/es/components/Tiles/BaseTile/BaseTile.js +4 -2
  8. package/es/components/Tiles/GlassTile/GlassTile.d.ts +2 -1
  9. package/es/components/Tiles/GlassTile/GlassTile.js +6 -3
  10. package/lib/__stories__/AnimatedHeader.stories.d.ts +198 -0
  11. package/lib/__stories__/data/SampleCustomTaskContent.d.ts +10 -0
  12. package/lib/__stories__/data/index.d.ts +7 -0
  13. package/lib/components/AnimatedHeader/AnimatedHeader.d.ts +4 -3
  14. package/lib/components/AnimatedHeader/AnimatedHeader.js +4 -1
  15. package/lib/components/Tiles/BaseTile/BaseTile.d.ts +2 -1
  16. package/lib/components/Tiles/BaseTile/BaseTile.js +4 -2
  17. package/lib/components/Tiles/GlassTile/GlassTile.d.ts +2 -1
  18. package/lib/components/Tiles/GlassTile/GlassTile.js +6 -3
  19. package/package.json +2 -2
  20. package/scss/Tiles/AIPromptTile/ai-prompt-tile.scss +4 -0
  21. package/scss/Tiles/GlassTile/glass-tile.scss +4 -0
package/es/__stories__/AnimatedHeader.stories.d.ts CHANGED
@@ -8250,6 +8250,7 @@ export declare const ThemeG10: {
8250
8250
  5: string;
8251
8251
  6: string;
8252
8252
  7: string;
8253
+ 8: string;
8253
8254
  };
8254
8255
  };
8255
8256
  options: number[];
@@ -8289,6 +8290,13 @@ export declare const ThemeG10: {
8289
8290
  secondaryIcon: string;
8290
8291
  subtitle?: undefined;
8291
8292
  })[];
8293
+ } | {
8294
+ id: number;
8295
+ label: string;
8296
+ tiles: {
8297
+ id: string;
8298
+ customContent: import("react/jsx-runtime").JSX.Element;
8299
+ }[];
8292
8300
  };
8293
8301
  2: {
8294
8302
  id: number;
@@ -8324,6 +8332,13 @@ export declare const ThemeG10: {
8324
8332
  secondaryIcon: string;
8325
8333
  subtitle?: undefined;
8326
8334
  })[];
8335
+ } | {
8336
+ id: number;
8337
+ label: string;
8338
+ tiles: {
8339
+ id: string;
8340
+ customContent: import("react/jsx-runtime").JSX.Element;
8341
+ }[];
8327
8342
  };
8328
8343
  3: {
8329
8344
  id: number;
@@ -8359,6 +8374,13 @@ export declare const ThemeG10: {
8359
8374
  secondaryIcon: string;
8360
8375
  subtitle?: undefined;
8361
8376
  })[];
8377
+ } | {
8378
+ id: number;
8379
+ label: string;
8380
+ tiles: {
8381
+ id: string;
8382
+ customContent: import("react/jsx-runtime").JSX.Element;
8383
+ }[];
8362
8384
  };
8363
8385
  4: {
8364
8386
  id: number;
@@ -8394,6 +8416,13 @@ export declare const ThemeG10: {
8394
8416
  secondaryIcon: string;
8395
8417
  subtitle?: undefined;
8396
8418
  })[];
8419
+ } | {
8420
+ id: number;
8421
+ label: string;
8422
+ tiles: {
8423
+ id: string;
8424
+ customContent: import("react/jsx-runtime").JSX.Element;
8425
+ }[];
8397
8426
  };
8398
8427
  5: {
8399
8428
  id: number;
@@ -8429,6 +8458,13 @@ export declare const ThemeG10: {
8429
8458
  secondaryIcon: string;
8430
8459
  subtitle?: undefined;
8431
8460
  })[];
8461
+ } | {
8462
+ id: number;
8463
+ label: string;
8464
+ tiles: {
8465
+ id: string;
8466
+ customContent: import("react/jsx-runtime").JSX.Element;
8467
+ }[];
8432
8468
  };
8433
8469
  6: {
8434
8470
  id: number;
@@ -8464,6 +8500,13 @@ export declare const ThemeG10: {
8464
8500
  secondaryIcon: string;
8465
8501
  subtitle?: undefined;
8466
8502
  })[];
8503
+ } | {
8504
+ id: number;
8505
+ label: string;
8506
+ tiles: {
8507
+ id: string;
8508
+ customContent: import("react/jsx-runtime").JSX.Element;
8509
+ }[];
8467
8510
  };
8468
8511
  7: {
8469
8512
  id: number;
@@ -8499,6 +8542,55 @@ export declare const ThemeG10: {
8499
8542
  secondaryIcon: string;
8500
8543
  subtitle?: undefined;
8501
8544
  })[];
8545
+ } | {
8546
+ id: number;
8547
+ label: string;
8548
+ tiles: {
8549
+ id: string;
8550
+ customContent: import("react/jsx-runtime").JSX.Element;
8551
+ }[];
8552
+ };
8553
+ 8: {
8554
+ id: number;
8555
+ label: string;
8556
+ tiles: ({
8557
+ id: string;
8558
+ href: string;
8559
+ title: string;
8560
+ mainIcon: string;
8561
+ subtitle?: undefined;
8562
+ } | {
8563
+ id: string;
8564
+ href: string;
8565
+ title: string;
8566
+ subtitle: string;
8567
+ mainIcon: string;
8568
+ })[];
8569
+ } | {
8570
+ id: number;
8571
+ label: string;
8572
+ tiles: ({
8573
+ id: string;
8574
+ href: string;
8575
+ title: string;
8576
+ subtitle: string;
8577
+ mainIcon: string;
8578
+ secondaryIcon?: undefined;
8579
+ } | {
8580
+ id: string;
8581
+ href: string;
8582
+ title: string;
8583
+ mainIcon: string;
8584
+ secondaryIcon: string;
8585
+ subtitle?: undefined;
8586
+ })[];
8587
+ } | {
8588
+ id: number;
8589
+ label: string;
8590
+ tiles: {
8591
+ id: string;
8592
+ customContent: import("react/jsx-runtime").JSX.Element;
8593
+ }[];
8502
8594
  };
8503
8595
  };
8504
8596
  };
@@ -8581,6 +8673,13 @@ export declare const ThemeG10: {
8581
8673
  secondaryIcon: string;
8582
8674
  subtitle?: undefined;
8583
8675
  })[];
8676
+ } | {
8677
+ id: number;
8678
+ label: string;
8679
+ tiles: {
8680
+ id: string;
8681
+ customContent: import("react/jsx-runtime").JSX.Element;
8682
+ }[];
8584
8683
  })[];
8585
8684
  allWorkspaces: {
8586
8685
  id: string;
@@ -16847,6 +16946,7 @@ export declare const ThemeG100: {
16847
16946
  5: string;
16848
16947
  6: string;
16849
16948
  7: string;
16949
+ 8: string;
16850
16950
  };
16851
16951
  };
16852
16952
  options: number[];
@@ -16886,6 +16986,13 @@ export declare const ThemeG100: {
16886
16986
  secondaryIcon: string;
16887
16987
  subtitle?: undefined;
16888
16988
  })[];
16989
+ } | {
16990
+ id: number;
16991
+ label: string;
16992
+ tiles: {
16993
+ id: string;
16994
+ customContent: import("react/jsx-runtime").JSX.Element;
16995
+ }[];
16889
16996
  };
16890
16997
  2: {
16891
16998
  id: number;
@@ -16921,6 +17028,13 @@ export declare const ThemeG100: {
16921
17028
  secondaryIcon: string;
16922
17029
  subtitle?: undefined;
16923
17030
  })[];
17031
+ } | {
17032
+ id: number;
17033
+ label: string;
17034
+ tiles: {
17035
+ id: string;
17036
+ customContent: import("react/jsx-runtime").JSX.Element;
17037
+ }[];
16924
17038
  };
16925
17039
  3: {
16926
17040
  id: number;
@@ -16956,6 +17070,13 @@ export declare const ThemeG100: {
16956
17070
  secondaryIcon: string;
16957
17071
  subtitle?: undefined;
16958
17072
  })[];
17073
+ } | {
17074
+ id: number;
17075
+ label: string;
17076
+ tiles: {
17077
+ id: string;
17078
+ customContent: import("react/jsx-runtime").JSX.Element;
17079
+ }[];
16959
17080
  };
16960
17081
  4: {
16961
17082
  id: number;
@@ -16991,6 +17112,13 @@ export declare const ThemeG100: {
16991
17112
  secondaryIcon: string;
16992
17113
  subtitle?: undefined;
16993
17114
  })[];
17115
+ } | {
17116
+ id: number;
17117
+ label: string;
17118
+ tiles: {
17119
+ id: string;
17120
+ customContent: import("react/jsx-runtime").JSX.Element;
17121
+ }[];
16994
17122
  };
16995
17123
  5: {
16996
17124
  id: number;
@@ -17026,6 +17154,13 @@ export declare const ThemeG100: {
17026
17154
  secondaryIcon: string;
17027
17155
  subtitle?: undefined;
17028
17156
  })[];
17157
+ } | {
17158
+ id: number;
17159
+ label: string;
17160
+ tiles: {
17161
+ id: string;
17162
+ customContent: import("react/jsx-runtime").JSX.Element;
17163
+ }[];
17029
17164
  };
17030
17165
  6: {
17031
17166
  id: number;
@@ -17061,6 +17196,13 @@ export declare const ThemeG100: {
17061
17196
  secondaryIcon: string;
17062
17197
  subtitle?: undefined;
17063
17198
  })[];
17199
+ } | {
17200
+ id: number;
17201
+ label: string;
17202
+ tiles: {
17203
+ id: string;
17204
+ customContent: import("react/jsx-runtime").JSX.Element;
17205
+ }[];
17064
17206
  };
17065
17207
  7: {
17066
17208
  id: number;
@@ -17096,6 +17238,55 @@ export declare const ThemeG100: {
17096
17238
  secondaryIcon: string;
17097
17239
  subtitle?: undefined;
17098
17240
  })[];
17241
+ } | {
17242
+ id: number;
17243
+ label: string;
17244
+ tiles: {
17245
+ id: string;
17246
+ customContent: import("react/jsx-runtime").JSX.Element;
17247
+ }[];
17248
+ };
17249
+ 8: {
17250
+ id: number;
17251
+ label: string;
17252
+ tiles: ({
17253
+ id: string;
17254
+ href: string;
17255
+ title: string;
17256
+ mainIcon: string;
17257
+ subtitle?: undefined;
17258
+ } | {
17259
+ id: string;
17260
+ href: string;
17261
+ title: string;
17262
+ subtitle: string;
17263
+ mainIcon: string;
17264
+ })[];
17265
+ } | {
17266
+ id: number;
17267
+ label: string;
17268
+ tiles: ({
17269
+ id: string;
17270
+ href: string;
17271
+ title: string;
17272
+ subtitle: string;
17273
+ mainIcon: string;
17274
+ secondaryIcon?: undefined;
17275
+ } | {
17276
+ id: string;
17277
+ href: string;
17278
+ title: string;
17279
+ mainIcon: string;
17280
+ secondaryIcon: string;
17281
+ subtitle?: undefined;
17282
+ })[];
17283
+ } | {
17284
+ id: number;
17285
+ label: string;
17286
+ tiles: {
17287
+ id: string;
17288
+ customContent: import("react/jsx-runtime").JSX.Element;
17289
+ }[];
17099
17290
  };
17100
17291
  };
17101
17292
  };
@@ -17178,6 +17369,13 @@ export declare const ThemeG100: {
17178
17369
  secondaryIcon: string;
17179
17370
  subtitle?: undefined;
17180
17371
  })[];
17372
+ } | {
17373
+ id: number;
17374
+ label: string;
17375
+ tiles: {
17376
+ id: string;
17377
+ customContent: import("react/jsx-runtime").JSX.Element;
17378
+ }[];
17181
17379
  })[];
17182
17380
  allWorkspaces: {
17183
17381
  id: string;
package/es/__stories__/data/SampleCustomTaskContent.d.ts ADDED
@@ -0,0 +1,10 @@
1
+ /**
2
+ * @license
3
+ *
4
+ * Copyright IBM Corp. 2025
5
+ *
6
+ * This source code is licensed under the Apache-2.0 license found in the
7
+ * LICENSE file in the root directory of this source tree.
8
+ */
9
+ declare const SampleCustomTaskContent: () => import("react/jsx-runtime").JSX.Element;
10
+ export default SampleCustomTaskContent;
package/es/__stories__/data/index.d.ts CHANGED
@@ -36,6 +36,13 @@ export const headerTiles: ({
36
36
  secondaryIcon: string;
37
37
  subtitle?: undefined;
38
38
  })[];
39
+ } | {
40
+ id: number;
41
+ label: string;
42
+ tiles: {
43
+ id: string;
44
+ customContent: import("react/jsx-runtime").JSX.Element;
45
+ }[];
39
46
  })[];
40
47
  export namespace tasksConfigButton {
41
48
  let type: string;
package/es/components/AnimatedHeader/AnimatedHeader.d.ts CHANGED
@@ -18,12 +18,13 @@ export interface SelectedWorkspace {
18
18
  label: string;
19
19
  }
20
20
  export interface Tile {
21
- href: string | null;
21
+ href?: string | null;
22
22
  id: string;
23
- mainIcon: string | null;
23
+ mainIcon?: string | null;
24
24
  secondaryIcon?: string | null;
25
25
  subtitle?: string | null;
26
- title: string | null;
26
+ title?: string | null;
27
+ customContent?: ReactNode | null;
27
28
  }
28
29
  export interface TileGroup {
29
30
  id: number;
package/es/components/AnimatedHeader/AnimatedHeader.js CHANGED
@@ -168,6 +168,8 @@ const AnimatedHeader = _ref => {
168
168
  itemToString: handleWorkspaceItemsToString
169
169
  } : {}, renderWorkspaceSelectedItem ? {
170
170
  renderSelectedItem: renderWorkspaceSelectedItem
171
+ } : {}, selectedWorkspace ? {
172
+ selectedItem: selectedWorkspace
171
173
  } : {}))), /*#__PURE__*/React.createElement("div", {
172
174
  className: `${blockClass}__tiles-container`
173
175
  }, selectedTileGroup.tiles.map(tile => {
@@ -180,7 +182,8 @@ const AnimatedHeader = _ref => {
180
182
  secondaryIcon: tile.secondaryIcon,
181
183
  title: tile.title,
182
184
  subtitle: tile.subtitle,
183
- productName: productName
185
+ productName: productName,
186
+ customContent: tile.customContent
184
187
  });
185
188
  }))), /*#__PURE__*/React.createElement("div", {
186
189
  className: `${blockClass}__button-collapse--gradient`
package/es/components/Tiles/BaseTile/BaseTile.d.ts CHANGED
@@ -6,7 +6,7 @@
6
6
  * This source code is licensed under the Apache-2.0 license found in the
7
7
  * LICENSE file in the root directory of this source tree.
8
8
  */
9
- import React from 'react';
9
+ import React, { ReactNode } from 'react';
10
10
  /** Base Tile */
11
11
  interface BaseTileProps {
12
12
  id?: string;
@@ -17,6 +17,7 @@ interface BaseTileProps {
17
17
  title?: string;
18
18
  subtitle?: string;
19
19
  productName?: string;
20
+ customContent?: ReactNode;
20
21
  }
21
22
  export declare const BaseTile: React.FC<BaseTileProps>;
22
23
  export {};
package/es/components/Tiles/BaseTile/BaseTile.js CHANGED
@@ -20,7 +20,8 @@ const BaseTile = _ref => {
20
20
  secondaryIcon,
21
21
  title,
22
22
  subtitle,
23
- productName
23
+ productName,
24
+ customContent
24
25
  } = _ref;
25
26
  const props = {
26
27
  id,
@@ -30,7 +31,8 @@ const BaseTile = _ref => {
30
31
  secondaryIcon,
31
32
  title,
32
33
  subtitle,
33
- productName
34
+ productName,
35
+ customContent
34
36
  };
35
37
  const tile = id === 'ai-tile' ? /*#__PURE__*/React.createElement(AIPromptTile, props) : /*#__PURE__*/React.createElement(GlassTile, props);
36
38
  return tile;
package/es/components/Tiles/GlassTile/GlassTile.d.ts CHANGED
@@ -6,7 +6,7 @@
6
6
  * This source code is licensed under the Apache-2.0 license found in the
7
7
  * LICENSE file in the root directory of this source tree.
8
8
  */
9
- import React from 'react';
9
+ import React, { ReactNode } from 'react';
10
10
  /** Primary UI component for user interaction */
11
11
  interface GlassTileProps {
12
12
  href?: string;
@@ -16,6 +16,7 @@ interface GlassTileProps {
16
16
  secondaryIcon?: string;
17
17
  subtitle?: string;
18
18
  title?: string;
19
+ customContent?: ReactNode;
19
20
  }
20
21
  export declare const GlassTile: React.FC<GlassTileProps>;
21
22
  export {};
package/es/components/Tiles/GlassTile/GlassTile.js CHANGED
@@ -20,7 +20,8 @@ const GlassTile = _ref => {
20
20
  open,
21
21
  secondaryIcon,
22
22
  subtitle,
23
- title
23
+ title,
24
+ customContent
24
25
  } = _ref;
25
26
  const prefix = usePrefix();
26
27
  const blockClass = `${prefix}--animated-header__glass-tile`;
@@ -35,7 +36,9 @@ const GlassTile = _ref => {
35
36
  className: `${blockClass}--body${!open ? ` ${collapsed}` : ''}`
36
37
  }, /*#__PURE__*/React.createElement("div", {
37
38
  className: `${blockClass}--body-background`
38
- }), /*#__PURE__*/React.createElement("div", {
39
+ }), customContent ? /*#__PURE__*/React.createElement("div", {
40
+ className: `${blockClass}--custom-content`
41
+ }, customContent) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
39
42
  className: `${blockClass}--icons`
40
43
  }, MainIcon && /*#__PURE__*/React.createElement(MainIcon, {
41
44
  fill: `var(--cds-icon-secondary)`,
@@ -49,7 +52,7 @@ const GlassTile = _ref => {
49
52
  }, subtitle), SecondaryIcon && /*#__PURE__*/React.createElement(SecondaryIcon, {
50
53
  size: 16,
51
54
  fill: `var(--cds-icon-secondary)`
52
- }))));
55
+ })))));
53
56
  };
54
57
 
55
58
  export { GlassTile };
package/lib/__stories__/AnimatedHeader.stories.d.ts CHANGED
@@ -8250,6 +8250,7 @@ export declare const ThemeG10: {
8250
8250
  5: string;
8251
8251
  6: string;
8252
8252
  7: string;
8253
+ 8: string;
8253
8254
  };
8254
8255
  };
8255
8256
  options: number[];
@@ -8289,6 +8290,13 @@ export declare const ThemeG10: {
8289
8290
  secondaryIcon: string;
8290
8291
  subtitle?: undefined;
8291
8292
  })[];
8293
+ } | {
8294
+ id: number;
8295
+ label: string;
8296
+ tiles: {
8297
+ id: string;
8298
+ customContent: import("react/jsx-runtime").JSX.Element;
8299
+ }[];
8292
8300
  };
8293
8301
  2: {
8294
8302
  id: number;
@@ -8324,6 +8332,13 @@ export declare const ThemeG10: {
8324
8332
  secondaryIcon: string;
8325
8333
  subtitle?: undefined;
8326
8334
  })[];
8335
+ } | {
8336
+ id: number;
8337
+ label: string;
8338
+ tiles: {
8339
+ id: string;
8340
+ customContent: import("react/jsx-runtime").JSX.Element;
8341
+ }[];
8327
8342
  };
8328
8343
  3: {
8329
8344
  id: number;
@@ -8359,6 +8374,13 @@ export declare const ThemeG10: {
8359
8374
  secondaryIcon: string;
8360
8375
  subtitle?: undefined;
8361
8376
  })[];
8377
+ } | {
8378
+ id: number;
8379
+ label: string;
8380
+ tiles: {
8381
+ id: string;
8382
+ customContent: import("react/jsx-runtime").JSX.Element;
8383
+ }[];
8362
8384
  };
8363
8385
  4: {
8364
8386
  id: number;
@@ -8394,6 +8416,13 @@ export declare const ThemeG10: {
8394
8416
  secondaryIcon: string;
8395
8417
  subtitle?: undefined;
8396
8418
  })[];
8419
+ } | {
8420
+ id: number;
8421
+ label: string;
8422
+ tiles: {
8423
+ id: string;
8424
+ customContent: import("react/jsx-runtime").JSX.Element;
8425
+ }[];
8397
8426
  };
8398
8427
  5: {
8399
8428
  id: number;
@@ -8429,6 +8458,13 @@ export declare const ThemeG10: {
8429
8458
  secondaryIcon: string;
8430
8459
  subtitle?: undefined;
8431
8460
  })[];
8461
+ } | {
8462
+ id: number;
8463
+ label: string;
8464
+ tiles: {
8465
+ id: string;
8466
+ customContent: import("react/jsx-runtime").JSX.Element;
8467
+ }[];
8432
8468
  };
8433
8469
  6: {
8434
8470
  id: number;
@@ -8464,6 +8500,13 @@ export declare const ThemeG10: {
8464
8500
  secondaryIcon: string;
8465
8501
  subtitle?: undefined;
8466
8502
  })[];
8503
+ } | {
8504
+ id: number;
8505
+ label: string;
8506
+ tiles: {
8507
+ id: string;
8508
+ customContent: import("react/jsx-runtime").JSX.Element;
8509
+ }[];
8467
8510
  };
8468
8511
  7: {
8469
8512
  id: number;
@@ -8499,6 +8542,55 @@ export declare const ThemeG10: {
8499
8542
  secondaryIcon: string;
8500
8543
  subtitle?: undefined;
8501
8544
  })[];
8545
+ } | {
8546
+ id: number;
8547
+ label: string;
8548
+ tiles: {
8549
+ id: string;
8550
+ customContent: import("react/jsx-runtime").JSX.Element;
8551
+ }[];
8552
+ };
8553
+ 8: {
8554
+ id: number;
8555
+ label: string;
8556
+ tiles: ({
8557
+ id: string;
8558
+ href: string;
8559
+ title: string;
8560
+ mainIcon: string;
8561
+ subtitle?: undefined;
8562
+ } | {
8563
+ id: string;
8564
+ href: string;
8565
+ title: string;
8566
+ subtitle: string;
8567
+ mainIcon: string;
8568
+ })[];
8569
+ } | {
8570
+ id: number;
8571
+ label: string;
8572
+ tiles: ({
8573
+ id: string;
8574
+ href: string;
8575
+ title: string;
8576
+ subtitle: string;
8577
+ mainIcon: string;
8578
+ secondaryIcon?: undefined;
8579
+ } | {
8580
+ id: string;
8581
+ href: string;
8582
+ title: string;
8583
+ mainIcon: string;
8584
+ secondaryIcon: string;
8585
+ subtitle?: undefined;
8586
+ })[];
8587
+ } | {
8588
+ id: number;
8589
+ label: string;
8590
+ tiles: {
8591
+ id: string;
8592
+ customContent: import("react/jsx-runtime").JSX.Element;
8593
+ }[];
8502
8594
  };
8503
8595
  };
8504
8596
  };
@@ -8581,6 +8673,13 @@ export declare const ThemeG10: {
8581
8673
  secondaryIcon: string;
8582
8674
  subtitle?: undefined;
8583
8675
  })[];
8676
+ } | {
8677
+ id: number;
8678
+ label: string;
8679
+ tiles: {
8680
+ id: string;
8681
+ customContent: import("react/jsx-runtime").JSX.Element;
8682
+ }[];
8584
8683
  })[];
8585
8684
  allWorkspaces: {
8586
8685
  id: string;
@@ -16847,6 +16946,7 @@ export declare const ThemeG100: {
16847
16946
  5: string;
16848
16947
  6: string;
16849
16948
  7: string;
16949
+ 8: string;
16850
16950
  };
16851
16951
  };
16852
16952
  options: number[];
@@ -16886,6 +16986,13 @@ export declare const ThemeG100: {
16886
16986
  secondaryIcon: string;
16887
16987
  subtitle?: undefined;
16888
16988
  })[];
16989
+ } | {
16990
+ id: number;
16991
+ label: string;
16992
+ tiles: {
16993
+ id: string;
16994
+ customContent: import("react/jsx-runtime").JSX.Element;
16995
+ }[];
16889
16996
  };
16890
16997
  2: {
16891
16998
  id: number;
@@ -16921,6 +17028,13 @@ export declare const ThemeG100: {
16921
17028
  secondaryIcon: string;
16922
17029
  subtitle?: undefined;
16923
17030
  })[];
17031
+ } | {
17032
+ id: number;
17033
+ label: string;
17034
+ tiles: {
17035
+ id: string;
17036
+ customContent: import("react/jsx-runtime").JSX.Element;
17037
+ }[];
16924
17038
  };
16925
17039
  3: {
16926
17040
  id: number;
@@ -16956,6 +17070,13 @@ export declare const ThemeG100: {
16956
17070
  secondaryIcon: string;
16957
17071
  subtitle?: undefined;
16958
17072
  })[];
17073
+ } | {
17074
+ id: number;
17075
+ label: string;
17076
+ tiles: {
17077
+ id: string;
17078
+ customContent: import("react/jsx-runtime").JSX.Element;
17079
+ }[];
16959
17080
  };
16960
17081
  4: {
16961
17082
  id: number;
@@ -16991,6 +17112,13 @@ export declare const ThemeG100: {
16991
17112
  secondaryIcon: string;
16992
17113
  subtitle?: undefined;
16993
17114
  })[];
17115
+ } | {
17116
+ id: number;
17117
+ label: string;
17118
+ tiles: {
17119
+ id: string;
17120
+ customContent: import("react/jsx-runtime").JSX.Element;
17121
+ }[];
16994
17122
  };
16995
17123
  5: {
16996
17124
  id: number;
@@ -17026,6 +17154,13 @@ export declare const ThemeG100: {
17026
17154
  secondaryIcon: string;
17027
17155
  subtitle?: undefined;
17028
17156
  })[];
17157
+ } | {
17158
+ id: number;
17159
+ label: string;
17160
+ tiles: {
17161
+ id: string;
17162
+ customContent: import("react/jsx-runtime").JSX.Element;
17163
+ }[];
17029
17164
  };
17030
17165
  6: {
17031
17166
  id: number;
@@ -17061,6 +17196,13 @@ export declare const ThemeG100: {
17061
17196
  secondaryIcon: string;
17062
17197
  subtitle?: undefined;
17063
17198
  })[];
17199
+ } | {
17200
+ id: number;
17201
+ label: string;
17202
+ tiles: {
17203
+ id: string;
17204
+ customContent: import("react/jsx-runtime").JSX.Element;
17205
+ }[];
17064
17206
  };
17065
17207
  7: {
17066
17208
  id: number;
@@ -17096,6 +17238,55 @@ export declare const ThemeG100: {
17096
17238
  secondaryIcon: string;
17097
17239
  subtitle?: undefined;
17098
17240
  })[];
17241
+ } | {
17242
+ id: number;
17243
+ label: string;
17244
+ tiles: {
17245
+ id: string;
17246
+ customContent: import("react/jsx-runtime").JSX.Element;
17247
+ }[];
17248
+ };
17249
+ 8: {
17250
+ id: number;
17251
+ label: string;
17252
+ tiles: ({
17253
+ id: string;
17254
+ href: string;
17255
+ title: string;
17256
+ mainIcon: string;
17257
+ subtitle?: undefined;
17258
+ } | {
17259
+ id: string;
17260
+ href: string;
17261
+ title: string;
17262
+ subtitle: string;
17263
+ mainIcon: string;
17264
+ })[];
17265
+ } | {
17266
+ id: number;
17267
+ label: string;
17268
+ tiles: ({
17269
+ id: string;
17270
+ href: string;
17271
+ title: string;
17272
+ subtitle: string;
17273
+ mainIcon: string;
17274
+ secondaryIcon?: undefined;
17275
+ } | {
17276
+ id: string;
17277
+ href: string;
17278
+ title: string;
17279
+ mainIcon: string;
17280
+ secondaryIcon: string;
17281
+ subtitle?: undefined;
17282
+ })[];
17283
+ } | {
17284
+ id: number;
17285
+ label: string;
17286
+ tiles: {
17287
+ id: string;
17288
+ customContent: import("react/jsx-runtime").JSX.Element;
17289
+ }[];
17099
17290
  };
17100
17291
  };
17101
17292
  };
@@ -17178,6 +17369,13 @@ export declare const ThemeG100: {
17178
17369
  secondaryIcon: string;
17179
17370
  subtitle?: undefined;
17180
17371
  })[];
17372
+ } | {
17373
+ id: number;
17374
+ label: string;
17375
+ tiles: {
17376
+ id: string;
17377
+ customContent: import("react/jsx-runtime").JSX.Element;
17378
+ }[];
17181
17379
  })[];
17182
17380
  allWorkspaces: {
17183
17381
  id: string;
package/lib/__stories__/data/SampleCustomTaskContent.d.ts ADDED
@@ -0,0 +1,10 @@
1
+ /**
2
+ * @license
3
+ *
4
+ * Copyright IBM Corp. 2025
5
+ *
6
+ * This source code is licensed under the Apache-2.0 license found in the
7
+ * LICENSE file in the root directory of this source tree.
8
+ */
9
+ declare const SampleCustomTaskContent: () => import("react/jsx-runtime").JSX.Element;
10
+ export default SampleCustomTaskContent;
package/lib/__stories__/data/index.d.ts CHANGED
@@ -36,6 +36,13 @@ export const headerTiles: ({
36
36
  secondaryIcon: string;
37
37
  subtitle?: undefined;
38
38
  })[];
39
+ } | {
40
+ id: number;
41
+ label: string;
42
+ tiles: {
43
+ id: string;
44
+ customContent: import("react/jsx-runtime").JSX.Element;
45
+ }[];
39
46
  })[];
40
47
  export namespace tasksConfigButton {
41
48
  let type: string;
package/lib/components/AnimatedHeader/AnimatedHeader.d.ts CHANGED
@@ -18,12 +18,13 @@ export interface SelectedWorkspace {
18
18
  label: string;
19
19
  }
20
20
  export interface Tile {
21
- href: string | null;
21
+ href?: string | null;
22
22
  id: string;
23
- mainIcon: string | null;
23
+ mainIcon?: string | null;
24
24
  secondaryIcon?: string | null;
25
25
  subtitle?: string | null;
26
- title: string | null;
26
+ title?: string | null;
27
+ customContent?: ReactNode | null;
27
28
  }
28
29
  export interface TileGroup {
29
30
  id: number;
package/lib/components/AnimatedHeader/AnimatedHeader.js CHANGED
@@ -172,6 +172,8 @@ const AnimatedHeader = _ref => {
172
172
  itemToString: handleWorkspaceItemsToString
173
173
  } : {}, renderWorkspaceSelectedItem ? {
174
174
  renderSelectedItem: renderWorkspaceSelectedItem
175
+ } : {}, selectedWorkspace ? {
176
+ selectedItem: selectedWorkspace
175
177
  } : {}))), /*#__PURE__*/React.createElement("div", {
176
178
  className: `${blockClass}__tiles-container`
177
179
  }, selectedTileGroup.tiles.map(tile => {
@@ -184,7 +186,8 @@ const AnimatedHeader = _ref => {
184
186
  secondaryIcon: tile.secondaryIcon,
185
187
  title: tile.title,
186
188
  subtitle: tile.subtitle,
187
- productName: productName
189
+ productName: productName,
190
+ customContent: tile.customContent
188
191
  });
189
192
  }))), /*#__PURE__*/React.createElement("div", {
190
193
  className: `${blockClass}__button-collapse--gradient`
package/lib/components/Tiles/BaseTile/BaseTile.d.ts CHANGED
@@ -6,7 +6,7 @@
6
6
  * This source code is licensed under the Apache-2.0 license found in the
7
7
  * LICENSE file in the root directory of this source tree.
8
8
  */
9
- import React from 'react';
9
+ import React, { ReactNode } from 'react';
10
10
  /** Base Tile */
11
11
  interface BaseTileProps {
12
12
  id?: string;
@@ -17,6 +17,7 @@ interface BaseTileProps {
17
17
  title?: string;
18
18
  subtitle?: string;
19
19
  productName?: string;
20
+ customContent?: ReactNode;
20
21
  }
21
22
  export declare const BaseTile: React.FC<BaseTileProps>;
22
23
  export {};
package/lib/components/Tiles/BaseTile/BaseTile.js CHANGED
@@ -22,7 +22,8 @@ const BaseTile = _ref => {
22
22
  secondaryIcon,
23
23
  title,
24
24
  subtitle,
25
- productName
25
+ productName,
26
+ customContent
26
27
  } = _ref;
27
28
  const props = {
28
29
  id,
@@ -32,7 +33,8 @@ const BaseTile = _ref => {
32
33
  secondaryIcon,
33
34
  title,
34
35
  subtitle,
35
- productName
36
+ productName,
37
+ customContent
36
38
  };
37
39
  const tile = id === 'ai-tile' ? /*#__PURE__*/React.createElement(AIPromptTile.AIPromptTile, props) : /*#__PURE__*/React.createElement(GlassTile.GlassTile, props);
38
40
  return tile;
package/lib/components/Tiles/GlassTile/GlassTile.d.ts CHANGED
@@ -6,7 +6,7 @@
6
6
  * This source code is licensed under the Apache-2.0 license found in the
7
7
  * LICENSE file in the root directory of this source tree.
8
8
  */
9
- import React from 'react';
9
+ import React, { ReactNode } from 'react';
10
10
  /** Primary UI component for user interaction */
11
11
  interface GlassTileProps {
12
12
  href?: string;
@@ -16,6 +16,7 @@ interface GlassTileProps {
16
16
  secondaryIcon?: string;
17
17
  subtitle?: string;
18
18
  title?: string;
19
+ customContent?: ReactNode;
19
20
  }
20
21
  export declare const GlassTile: React.FC<GlassTileProps>;
21
22
  export {};
package/lib/components/Tiles/GlassTile/GlassTile.js CHANGED
@@ -22,7 +22,8 @@ const GlassTile = _ref => {
22
22
  open,
23
23
  secondaryIcon,
24
24
  subtitle,
25
- title
25
+ title,
26
+ customContent
26
27
  } = _ref;
27
28
  const prefix = usePrefix.usePrefix();
28
29
  const blockClass = `${prefix}--animated-header__glass-tile`;
@@ -37,7 +38,9 @@ const GlassTile = _ref => {
37
38
  className: `${blockClass}--body${!open ? ` ${collapsed}` : ''}`
38
39
  }, /*#__PURE__*/React.createElement("div", {
39
40
  className: `${blockClass}--body-background`
40
- }), /*#__PURE__*/React.createElement("div", {
41
+ }), customContent ? /*#__PURE__*/React.createElement("div", {
42
+ className: `${blockClass}--custom-content`
43
+ }, customContent) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
41
44
  className: `${blockClass}--icons`
42
45
  }, MainIcon && /*#__PURE__*/React.createElement(MainIcon, {
43
46
  fill: `var(--cds-icon-secondary)`,
@@ -51,7 +54,7 @@ const GlassTile = _ref => {
51
54
  }, subtitle), SecondaryIcon && /*#__PURE__*/React.createElement(SecondaryIcon, {
52
55
  size: 16,
53
56
  fill: `var(--cds-icon-secondary)`
54
- }))));
57
+ })))));
55
58
  };
56
59
 
57
60
  exports.GlassTile = GlassTile;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@carbon-labs/react-animated-header",
3
- "version": "0.10.0",
3
+ "version": "0.11.0",
4
4
  "publishConfig": {
5
5
  "access": "public",
6
6
  "provenance": true
@@ -36,5 +36,5 @@
36
36
  "devDependencies": {
37
37
  "@carbon-labs/utilities": "canary"
38
38
  },
39
- "gitHead": "74de03e1cd9ba159fd11071f1c2f481c907e8ef2"
39
+ "gitHead": "21d95639102946ba47ba52d7b98fe09ff6c55a6e"
40
40
  }
package/scss/Tiles/AIPromptTile/ai-prompt-tile.scss CHANGED
@@ -188,6 +188,10 @@ $prefix: 'clabs--animated-header__ai-prompt-tile' !default;
188
188
  fill: $icon-primary;
189
189
  }
190
190
 
191
+ .#{$prefix}--custom-content {
192
+ z-index: 4;
193
+ }
194
+
191
195
  @keyframes animate-border {
192
196
  0% {
193
197
  background-position: 100% 0%;
package/scss/Tiles/GlassTile/glass-tile.scss CHANGED
@@ -129,3 +129,7 @@ $prefix: 'clabs--animated-header__glass-tile' !default;
129
129
  white-space: initial;
130
130
  }
131
131
  }
132
+
133
+ .#{$prefix}--custom-content {
134
+ z-index: 2;
135
+ }