@carbon-labs/react-animated-header 0.1.0

package/es/_virtual/_commonjsHelpers.js

@@ -0,0 +1,12 @@
+/**
+ * Copyright IBM Corp. 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+function getDefaultExportFromCjs (x) {
+	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
+}
+
+export { getDefaultExportFromCjs };

package/es/_virtual/lottie.js

@@ -0,0 +1,14 @@
+/**
+ * Copyright IBM Corp. 2024
+ *
+ * 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 { getDefaultExportFromCjs } from './_commonjsHelpers.js';
+import { __require as requireLottie } from '../node_modules/lottie-web/build/player/lottie.js';
+
+var lottieExports = requireLottie();
+var lottie = /*@__PURE__*/getDefaultExportFromCjs(lottieExports);
+
+export { lottie as default };

package/es/_virtual/lottie2.js

@@ -0,0 +1,10 @@
+/**
+ * Copyright IBM Corp. 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+var lottie = {exports: {}};
+
+export { lottie as __module };

package/es/assets/index.d.ts

@@ -0,0 +1,7 @@
+import dataFabricAnimatedLight from './animated/header_1312x738_data_fabric_light_03.json';
+import dataFabricAnimatedDark from './animated/header_1312x738_data_fabric_dark_06.json';
+import watsonXAnimatedLight from './animated/header_1312x738_watsonx_data_light_03.json';
+import watsonXAnimatedDark from './animated/header_1312x738_watsonx_data_dark_02.json';
+import wxbiaAnimatedLight from './animated/header_illustration_container_wxbia_light_08.json';
+import wxbiaAnimatedDark from './animated/header_illustration_container_wxbia_dark_05.json';
+export { dataFabricAnimatedLight, dataFabricAnimatedDark, dataFabricStaticLight, dataFabricStaticDark, watsonXAnimatedLight, watsonXAnimatedDark, watsonXStaticLight, watsonXStaticDark, wxbiaAnimatedLight, wxbiaAnimatedDark };

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

@@ -0,0 +1,31 @@
+import React from 'react';
+import { ButtonKind } from '@carbon/react';
+/** Animated Header */
+export interface Tile {
+    id: string;
+    href: string;
+    title: string;
+    mainIcon: string;
+}
+export interface TileGroup {
+    id: number;
+    name: string;
+    tiles: Tile[];
+}
+export interface AnimatedHeaderProps {
+    name?: string;
+    description?: string;
+    buttonText?: string;
+    buttonType?: ButtonKind;
+    buttonIcon?: any;
+    headerDropdown?: boolean;
+    productName?: string;
+    tileDropdownItems?: Array<object>;
+    selectedTileGroup: TileGroup[] | any;
+    setSelectedTileGroup: (e: any) => void;
+    allTiles: TileGroup[];
+    headerAnimation?: object;
+    headerStatic?: React.JSX.Element;
+}
+declare const AnimatedHeader: React.FC<AnimatedHeaderProps>;
+export default AnimatedHeader;

package/es/components/AnimatedHeader/AnimatedHeader.js

@@ -0,0 +1,277 @@
+/**
+ * Copyright IBM Corp. 2024
+ *
+ * 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 PropTypes from 'prop-types';
+import React, { useState, useEffect, createRef } from 'react';
+import { ButtonKinds, Grid, Column, Tooltip, Button, Dropdown, IconButton } from '@carbon/react';
+import lottie from '../../_virtual/lottie.js';
+import { usePrefix } from '../../node_modules/@carbon-labs/utilities/es/usePrefix.js';
+import { BaseTile } from '../Tiles/BaseTile/BaseTile.js';
+import { PauseFilled } from '../../node_modules/@carbon/icons-react/es/generated/bucket-12.js';
+import { PlayFilledAlt } from '../../node_modules/@carbon/icons-react/es/generated/bucket-13.js';
+import { ChevronUp, ChevronDown } from '../../node_modules/@carbon/icons-react/es/generated/bucket-3.js';
+
+var _PauseFilled, _PlayFilledAlt;
+
+/** Animated Header */
+
+const AnimatedHeader = _ref => {
+  let {
+    name,
+    description,
+    buttonText,
+    buttonType = 'tertiary',
+    buttonIcon = null,
+    headerDropdown = false,
+    productName = '[Product name]',
+    tileDropdownItems,
+    selectedTileGroup,
+    setSelectedTileGroup,
+    allTiles,
+    headerAnimation,
+    headerStatic
+  } = _ref;
+  const prefix = usePrefix();
+  const blockClass = `${prefix}-animated-header`;
+  let animationContainer = /*#__PURE__*/createRef();
+  const [open, setOpen] = useState(true);
+  const [playing, setPlaying] = useState(true);
+  const [headingTextAnimation, setHeadingTextAnimation] = useState('');
+  const isReduced = window.matchMedia('(prefers-reduced-motion)').matches;
+  const collapsed = `${blockClass}--collapsed`;
+  const contentCollapsed = `${blockClass}__content--collapsed`;
+  const descriptionCollapsed = `${blockClass}__left-area-container--collapsed`;
+  const headingCollapsed = `${blockClass}__heading--collapsed`;
+  const headingExpanded = `${blockClass}__heading--expanded`;
+  const lottieCollapsed = `${blockClass}__lottie-animation--collapsed`;
+  const handleButtonCollapseClick = () => {
+    setOpen(!open);
+    open ? setHeadingTextAnimation(headingCollapsed) : setHeadingTextAnimation(headingExpanded);
+  };
+  const handleLottieAnimationClick = () => {
+    if (playing) {
+      lottie.pause();
+    } else {
+      lottie.play();
+    }
+    setPlaying(!playing);
+  };
+  useEffect(() => {
+    let animation = lottie.loadAnimation({
+      container: animationContainer.current,
+      animationData: headerAnimation,
+      renderer: 'svg',
+      loop: false,
+      autoplay: false
+    });
+    const lottieLoadSpeed = 1;
+    const lottieLoopSpeed = 1;
+    const animationData = animation['animationData'];
+    function reducedMotion() {
+      animation.goToAndStop(5000);
+    }
+    function load() {
+      animation.setSpeed(lottieLoadSpeed);
+      animation.playSegments([animationData.markers.at(0).tm, animationData.markers.at(1).tm], true);
+    }
+    function loop() {
+      animation.setSpeed(lottieLoopSpeed);
+      animation.playSegments([animationData.markers.at(1).tm, animationData.op], true);
+    }
+    if (!!isReduced) {
+      // reduced motion on
+      animation.addEventListener('DOMLoaded', reducedMotion);
+    } else {
+      // reduced motion off
+
+      // Run Start Animation
+      animation.addEventListener('DOMLoaded', load);
+
+      // Run Looped Animation
+      animation.addEventListener('complete', loop);
+    }
+  }, []);
+  return /*#__PURE__*/React.createElement("section", {
+    className: `${blockClass} ${!open && collapsed}`
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement("div", {
+    className: `${blockClass}__gradient--overlay`
+  }), /*#__PURE__*/React.createElement("div", {
+    className: `${blockClass}__container--gradient`
+  }), !headerAnimation && headerStatic && /*#__PURE__*/React.createElement("div", {
+    className: `${blockClass}__static--container`
+  }, /*#__PURE__*/React.createElement("div", {
+    className: `${blockClass}__static`,
+    style: {
+      backgroundImage: `url(${headerStatic})`
+    }
+  })), /*#__PURE__*/React.createElement("div", {
+    className: `${blockClass}__lottie-animation--container`
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: animationContainer,
+    className: `${blockClass}__lottie-animation ${!open && lottieCollapsed}`
+  })), /*#__PURE__*/React.createElement(Column, {
+    sm: 4,
+    md: 8,
+    lg: 16
+  }, /*#__PURE__*/React.createElement(Tooltip, {
+    align: "bottom",
+    label: `Welcome, ${name}`
+  }, /*#__PURE__*/React.createElement("h1", {
+    className: `${blockClass}__heading ${headingTextAnimation}`
+  }, /*#__PURE__*/React.createElement("span", {
+    className: `${blockClass}__heading-welcome`
+  }, "Welcome,", ' '), /*#__PURE__*/React.createElement("span", {
+    className: `${blockClass}__heading-name`
+  }, name)))), (description || buttonText || headerDropdown) && /*#__PURE__*/React.createElement(Column, {
+    sm: 4,
+    md: 8,
+    lg: 4,
+    className: `${blockClass}__left-area-container ${!open && descriptionCollapsed}`
+  }, description && /*#__PURE__*/React.createElement(Tooltip, {
+    align: "bottom",
+    label: description
+  }, /*#__PURE__*/React.createElement("h2", {
+    className: `${blockClass}__description`
+  }, description)), buttonText && /*#__PURE__*/React.createElement(Button, {
+    className: `${blockClass}__button`,
+    kind: buttonType,
+    renderIcon: buttonIcon
+  }, buttonText), !buttonText && headerDropdown && allTiles && /*#__PURE__*/React.createElement(Dropdown, {
+    id: `${blockClass}__header-dropdown`,
+    className: `${blockClass}__header-dropdown`,
+    size: "md",
+    autoAlign: true,
+    titleText: "Label",
+    initialSelectedItem: allTiles[0],
+    label: allTiles[0].name,
+    hideLabel: true,
+    type: "inline",
+    items: allTiles,
+    itemToString: item => item ? item.name : '',
+    onChange: e => setSelectedTileGroup(e)
+  })), selectedTileGroup && /*#__PURE__*/React.createElement(Column, {
+    sm: 4,
+    md: 8,
+    lg: 12,
+    className: `${blockClass}__content`
+  }, tileDropdownItems && /*#__PURE__*/React.createElement("div", {
+    className: `${blockClass}__tile-dropdown--container ${!open && contentCollapsed}`
+  }, /*#__PURE__*/React.createElement(Dropdown, {
+    id: `${blockClass}__tile-dropdown`,
+    className: `${blockClass}__tile-dropdown`,
+    size: "sm",
+    titleText: "Label",
+    label: `Open in: ${name}'s sandbox`,
+    hideLabel: true,
+    type: "inline",
+    items: tileDropdownItems,
+    itemToString: item => item ? item['text'] : ''
+  })), /*#__PURE__*/React.createElement("div", {
+    className: `${blockClass}__tiles-container`
+  }, selectedTileGroup.tiles.map(tile => {
+    return /*#__PURE__*/React.createElement(BaseTile, {
+      key: tile.id,
+      id: tile.id,
+      open: open,
+      href: tile.href,
+      mainIcon: tile.mainIcon,
+      secondaryIcon: tile.secondaryIcon,
+      title: tile.title,
+      subtitle: tile.subtitle,
+      productName: productName
+    });
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: `${blockClass}__button-collapse--gradient`
+  }), /*#__PURE__*/React.createElement("div", {
+    className: `${blockClass}__button-collapse--container`
+  }, headerAnimation && !isReduced && /*#__PURE__*/React.createElement(IconButton, {
+    className: `${blockClass}__icon-button`,
+    label: playing ? 'Pause' : 'Play',
+    kind: "ghost",
+    type: "button",
+    onClick: handleLottieAnimationClick
+  }, playing ? _PauseFilled || (_PauseFilled = /*#__PURE__*/React.createElement(PauseFilled, {
+    size: 16,
+    fill: `var(--cds-icon-secondary)`
+  })) : _PlayFilledAlt || (_PlayFilledAlt = /*#__PURE__*/React.createElement(PlayFilledAlt, {
+    size: 16,
+    fill: `var(--cds-icon-secondary)`
+  }))), /*#__PURE__*/React.createElement(Button, {
+    id: `${blockClass}__button-collapse`,
+    kind: "ghost",
+    renderIcon: open ? ChevronUp : ChevronDown,
+    onClick: handleButtonCollapseClick
+  }, open ? `Collapse` : `Expand`))));
+};
+AnimatedHeader.displayName = 'Animated Header';
+AnimatedHeader.propTypes = {
+  /**
+   * Specify an optional className to be added to your Animated Header
+   */
+  className: PropTypes.string,
+  /**
+   * Specify the current username of active user
+   */
+  name: PropTypes.string,
+  /**
+   * Provide short sentence in max. 3 lines related to product context
+   */
+  description: PropTypes.string,
+  /**
+   * (optional), Provide content that needs highest attention from
+   * the user or content that triggers an action and allow users to
+   * directly start working and gain value (within one click)
+   */
+  buttonText: PropTypes.string,
+  /**
+   * Specify the carbon button type
+   */
+  buttonType: ButtonKinds,
+  /**
+   * (optional), Provide the renderIcon used in the button
+   * ex. Launch, Add, ect.
+   */
+  buttonIcon: PropTypes.any,
+  /**
+   * Header dropdown menu when button/buttonText is not in use
+   */
+  headerDropdown: PropTypes.bool,
+  /**
+   * Provide current product name
+   */
+  productName: PropTypes.string,
+  /**
+   * Object containing dropdown items
+   * `Open in: "_"`
+   */
+  tileDropdownItems: PropTypes.arrayOf(PropTypes.object),
+  /**
+   * The tile group that is active in the header
+   * ex. "AI Chat Tile w/ two glass tiles", "Four glass tiles", ect.
+   */
+  selectedTileGroup: PropTypes.object,
+  /**
+   * Provide function to be called when switching selected tile group
+   */
+  setSelectedTileGroup: PropTypes.func,
+  /**
+   * Array of each tile group setup
+   */
+  allTiles: PropTypes.arrayOf(PropTypes.object),
+  /**
+   * In-product imagery / lottie animation (.json) dim. 1312 x 738
+   * (to update headerAnimation content storybook requires remount in toolbar)
+   */
+  headerAnimation: PropTypes.object,
+  /**
+   * In-product imagery / static imagery dim. 1312 x 738
+   * Only active when headerAnimation is not in use
+   */
+  headerStatic: PropTypes.object
+};
+
+export { AnimatedHeader as default };

package/es/components/Tiles/AIPromptTile/AIPromptTile.d.ts

@@ -0,0 +1,20 @@
+/**
+ * @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.
+ */
+import React from 'react';
+/** Primary UI component for user interaction */
+interface AIPromptTileProps {
+    id?: string;
+    href?: string;
+    open?: boolean;
+    mainIcon?: string;
+    title?: string;
+    productName?: string;
+}
+export declare const AIPromptTile: React.FC<AIPromptTileProps>;
+export {};

package/es/components/Tiles/AIPromptTile/AIPromptTile.js

@@ -0,0 +1,94 @@
+/**
+ * Copyright IBM Corp. 2024
+ *
+ * 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, { useState } from 'react';
+import { AILabel, TextInput, IconButton, Button } from '@carbon/react';
+import * as index from '../../../node_modules/@carbon/icons-react/es/index.js';
+import { usePrefix } from '../../../node_modules/@carbon-labs/utilities/es/usePrefix.js';
+import { Send } from '../../../node_modules/@carbon/icons-react/es/generated/bucket-14.js';
+
+var _AILabel;
+
+/** Primary UI component for user interaction */
+
+const AIPromptTile = _ref => {
+  let {
+    id,
+    href,
+    open,
+    mainIcon,
+    title,
+    productName
+  } = _ref;
+  const prefix = usePrefix();
+  const blockClass = `${prefix}-animated-header__ai-prompt-tile`;
+  const collapsed = `${blockClass}--collapsed`;
+  const [textInput, setTextInput] = useState('');
+  const MainIcon = mainIcon ? index[mainIcon] : null;
+  const Send$1 = Send;
+  const handleTextInput = e => {
+    setTextInput(e.target.value);
+  };
+  const openInNewTab = url => {
+    const newWindow = window.open(url, '_blank', 'noopener,noreferrer');
+    if (newWindow) newWindow.opener = null;
+  };
+  const handleTextInputKeyDown = event => {
+    if (event.key === 'Enter') {
+      console.log('do validate');
+      openInNewTab(`${href}&primed_chat=${textInput}`);
+    }
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    id: `${blockClass}`,
+    className: `${prefix}-animated-header__tile ${blockClass}`,
+    key: id
+  }, /*#__PURE__*/React.createElement("div", {
+    className: `${blockClass}--body ${!open && collapsed}`
+  }, /*#__PURE__*/React.createElement("div", {
+    className: `${blockClass}--icons`
+  }, MainIcon && /*#__PURE__*/React.createElement(MainIcon, {
+    fill: `var(--cds-icon-secondary)`,
+    size: 24
+  }), _AILabel || (_AILabel = /*#__PURE__*/React.createElement(AILabel, {
+    autoAlign: true,
+    aiText: "AI",
+    size: "mini"
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: `${blockClass}--title`
+  }, title), /*#__PURE__*/React.createElement("div", {
+    className: `${blockClass}--text-input-container ${textInput && `${blockClass}--text-input-container__active`}`
+  }, /*#__PURE__*/React.createElement(TextInput, {
+    id: `${blockClass}--text-input`,
+    className: `${blockClass}--text-input`,
+    type: "text",
+    labelText: "AI Chat Input",
+    hideLabel: true,
+    placeholder: "Start chatting...",
+    size: "sm",
+    onChange: handleTextInput,
+    onKeyDown: handleTextInputKeyDown,
+    value: textInput
+  }), /*#__PURE__*/React.createElement(IconButton, {
+    className: `${blockClass}--icon-button ${textInput && `${blockClass}--icon-button__active`}`,
+    label: `Chat in ${productName}`,
+    kind: "ghost",
+    size: "sm",
+    disabled: !textInput,
+    align: "top-right",
+    onClick: () => openInNewTab(`${href}&primed_chat=${textInput}`),
+    onKeyDown: handleTextInputKeyDown
+  }, /*#__PURE__*/React.createElement(Send$1, null))), /*#__PURE__*/React.createElement("div", {
+    className: `${blockClass}--footer`
+  }, /*#__PURE__*/React.createElement(Button, {
+    kind: "ghost",
+    size: "sm",
+    href: href
+  }, "Open ", productName))));
+};
+
+export { AIPromptTile };

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

@@ -0,0 +1,22 @@
+/**
+ * @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.
+ */
+import React from 'react';
+/** Base Tile */
+interface BaseTileProps {
+    id?: string;
+    open?: boolean;
+    href?: string;
+    mainIcon?: string;
+    secondaryIcon?: string;
+    title?: string;
+    productName?: string;
+    subtitle?: string;
+}
+export declare const BaseTile: React.FC<BaseTileProps>;
+export {};

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

@@ -0,0 +1,39 @@
+/**
+ * Copyright IBM Corp. 2024
+ *
+ * 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 { AIPromptTile } from '../AIPromptTile/AIPromptTile.js';
+import { GlassTile } from '../GlassTile/GlassTile.js';
+
+/** Base Tile */
+
+const BaseTile = _ref => {
+  let {
+    id,
+    open,
+    href,
+    mainIcon,
+    secondaryIcon,
+    title,
+    productName,
+    subtitle
+  } = _ref;
+  const props = {
+    id,
+    open,
+    href,
+    mainIcon,
+    secondaryIcon,
+    title,
+    productName,
+    subtitle
+  };
+  const tile = id === 'ai-tile' ? /*#__PURE__*/React.createElement(AIPromptTile, props) : /*#__PURE__*/React.createElement(GlassTile, props);
+  return tile;
+};
+
+export { BaseTile };

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

@@ -0,0 +1,21 @@
+/**
+ * @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.
+ */
+import React from 'react';
+/** Primary UI component for user interaction */
+interface GlassTileProps {
+    id?: string;
+    href?: string;
+    open?: boolean;
+    mainIcon?: string;
+    secondaryIcon?: string;
+    title?: string;
+    subtitle?: string;
+}
+export declare const GlassTile: React.FC<GlassTileProps>;
+export {};

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

@@ -0,0 +1,53 @@
+/**
+ * Copyright IBM Corp. 2024
+ *
+ * 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 { Link } from '@carbon/react';
+import * as index from '../../../node_modules/@carbon/icons-react/es/index.js';
+import { usePrefix } from '../../../node_modules/@carbon-labs/utilities/es/usePrefix.js';
+
+/** Primary UI component for user interaction */
+
+const GlassTile = _ref => {
+  let {
+    id,
+    href,
+    open,
+    mainIcon,
+    secondaryIcon,
+    title,
+    subtitle
+  } = _ref;
+  const prefix = usePrefix();
+  const blockClass = `${prefix}-animated-header__glass-tile`;
+  const collapsed = `${blockClass}--collapsed`;
+  const MainIcon = mainIcon ? index[mainIcon] : null;
+  const SecondaryIcon = secondaryIcon ? index[secondaryIcon] : null;
+  return /*#__PURE__*/React.createElement(Link, {
+    className: `${prefix}-animated-header__tile ${blockClass}`,
+    key: id,
+    href: href
+  }, /*#__PURE__*/React.createElement("div", {
+    className: `${blockClass}--body ${!open && collapsed}`
+  }, /*#__PURE__*/React.createElement("div", {
+    className: `${blockClass}--icons`
+  }, MainIcon && /*#__PURE__*/React.createElement(MainIcon, {
+    fill: `var(--cds-icon-secondary)`,
+    size: 24
+  })), /*#__PURE__*/React.createElement("div", {
+    className: `${blockClass}--title`
+  }, title), /*#__PURE__*/React.createElement("div", {
+    className: `${blockClass}--footer`
+  }, subtitle && /*#__PURE__*/React.createElement("div", {
+    className: `${blockClass}--subtitle`
+  }, subtitle), SecondaryIcon && /*#__PURE__*/React.createElement(SecondaryIcon, {
+    size: 16,
+    fill: `var(--cds-icon-secondary)`
+  }))));
+};
+
+export { GlassTile };

package/es/components/Tiles/index.d.ts

@@ -0,0 +1,12 @@
+/**
+ * @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.
+ */
+import { AIPromptTile } from './AIPromptTile/AIPromptTile';
+import { BaseTile } from './BaseTile/BaseTile';
+import { GlassTile } from './GlassTile/GlassTile';
+export { AIPromptTile, BaseTile, GlassTile };

package/es/data/index.d.ts

@@ -0,0 +1,47 @@
+/**
+ * @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.
+ */
+export const tileDropdownData: {
+    id: string;
+    text: string;
+}[];
+export const headerTiles: ({
+    id: number;
+    name: string;
+    tiles: ({
+        id: string;
+        href: string;
+        title: string;
+        mainIcon: string;
+        subtitle?: undefined;
+    } | {
+        id: string;
+        href: string;
+        title: string;
+        subtitle: string;
+        mainIcon: string;
+    })[];
+} | {
+    id: number;
+    name: 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;
+    })[];
+})[];

package/es/index.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @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.
+ */
+import AnimatedHeader from '../AnimatedHeader/components/AnimatedHeader/AnimatedHeader';
+import { BaseTile } from './components/Tiles/index.js';
+export { AnimatedHeader, BaseTile };