@carbon-labs/react-animated-header 0.30.0 → 0.32.0

package/es/components/Tiles/AITile/AITileBody.d.ts

@@ -0,0 +1,19 @@
+/**
+ * @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 { ElementType, ReactNode } from 'react';
+export type AITileBodyProps = {
+    open?: boolean;
+    title?: string | null;
+    subtitle?: string | null;
+    customContent?: ReactNode;
+    primaryIcon?: ElementType | null;
+    secondaryIcon?: ElementType | null;
+    isLoading?: boolean;
+};
+export declare const AITileBody: ({ open, title, subtitle, customContent, primaryIcon: PrimaryIcon, secondaryIcon: SecondaryIcon, isLoading, }: AITileBodyProps) => import("react/jsx-runtime").JSX.Element;

package/es/components/Tiles/AITile/AITileBody.js

@@ -0,0 +1,59 @@
+/**
+ * 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 { usePrefix } from '../../../node_modules/@carbon-labs/utilities/es/usePrefix.js';
+import { SkeletonPlaceholder, AILabel } from '@carbon/react';
+
+var _AILabel;
+const AITileBody = ({
+  open,
+  title,
+  subtitle,
+  customContent,
+  primaryIcon: PrimaryIcon,
+  secondaryIcon: SecondaryIcon,
+  isLoading
+}) => {
+  const prefix = usePrefix();
+  const blockClass = `${prefix}--animated-header__ai-tile`;
+  if (isLoading) {
+    return /*#__PURE__*/React.createElement(SkeletonPlaceholder, {
+      className: `${blockClass}--loading-skeleton`
+    });
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    className: `${blockClass}--body`,
+    "data-expanded": open
+  }, /*#__PURE__*/React.createElement("div", {
+    className: `${blockClass}--body-background`
+  }), /*#__PURE__*/React.createElement("div", {
+    className: `${blockClass}--body-gradient`
+  }), customContent ? /*#__PURE__*/React.createElement("div", {
+    className: `${blockClass}--custom-content`
+  }, customContent) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: `${blockClass}--icons`
+  }, PrimaryIcon && /*#__PURE__*/React.createElement(PrimaryIcon, {
+    fill: `var(--cds-icon-secondary)`,
+    size: 24
+  }), _AILabel || (_AILabel = /*#__PURE__*/React.createElement(AILabel, {
+    autoAlign: true,
+    aiText: "AI",
+    size: "xs"
+  }))), /*#__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 { AITileBody };

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

@@ -6,23 +6,20 @@
  * 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, { ElementType, ReactNode } from 'react';
-/** Base Tile */
-interface BaseTileProps {
+import React from 'react';
+import { type AITileProps } from '../AITile/AITile';
+import { type AIPromptTileProps } from '../AIPromptTile/AIPromptTile';
+import { type GlassTileProps } from '../GlassTile/GlassTile';
+/** Base Tile router */
+export type TileVariant = 'glass' | 'aiPrompt' | 'ai';
+export type BaseTileProps = ({
+    variant?: 'glass';
+} & GlassTileProps) | ({
+    variant: 'aiPrompt';
+} & AIPromptTileProps) | (({
+    variant: 'ai';
+} & AITileProps) & {
     id?: string;
-    open?: boolean;
-    href?: string | null;
-    mainIcon?: ElementType | null;
-    secondaryIcon?: ElementType | null;
-    title?: string | null;
-    subtitle?: string | null;
-    productName?: string;
-    customContent?: ReactNode;
-    isLoading?: boolean;
-    isDisabled?: boolean;
-    disabledTaskLabel?: string;
-    onClick?: (() => void) | null;
-    ariaLabel?: string;
-}
+    tileId?: string | null;
+});
 export declare const BaseTile: React.FC<BaseTileProps>;
-export {};

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

@@ -6,16 +6,46 @@
  */
 
 import React from 'react';
+import { AITile } from '../AITile/AITile.js';
 import { AIPromptTile } from '../AIPromptTile/AIPromptTile.js';
 import { GlassTile } from '../GlassTile/GlassTile.js';
 
-/** Base Tile */
+/** Base Tile router */
 
-const BaseTile = props => {
+function inferVariant(props) {
+  if (props.variant) {
+    return props.variant;
+  }
   if (props.id === 'ai-tile') {
-    return /*#__PURE__*/React.createElement(AIPromptTile, props);
+    return 'aiPrompt';
+  }
+  return 'glass';
+}
+const BaseTile = props => {
+  // Back-compat: alias legacy icon prop to the new name
+  const normalizedProps = {
+    ...props,
+    primaryIcon: props.primaryIcon ?? props.mainIcon // ← fallback
+  };
+
+  // strip legacy id, but flow it into tileId if needed
+  const {
+    id: legacyId,
+    ...rest
+  } = normalizedProps;
+  const forward = {
+    ...rest,
+    tileId: rest.tileId ?? legacyId
+  };
+  switch (inferVariant(props)) {
+    case 'ai':
+      return /*#__PURE__*/React.createElement(AITile, forward);
+    case 'aiPrompt':
+      return /*#__PURE__*/React.createElement(AIPromptTile, forward);
+    case 'glass':
+    default:
+      return /*#__PURE__*/React.createElement(GlassTile, forward);
   }
-  return /*#__PURE__*/React.createElement(GlassTile, props);
 };
 
 export { BaseTile };

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

@@ -6,16 +6,20 @@
  * 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 {
+import React, { ElementType } from 'react';
+export type GlassTileProps = {
+    tileId: string | null;
     href?: string | null;
-    id?: string;
-    isLoading?: boolean;
-    isDisabled?: boolean;
-    disabledTaskLabel?: string;
+    title?: string | null;
+    subtitle?: string | null;
+    disabledTaskLabel?: string | null;
+    customContent?: React.ReactNode | null;
+    primaryIcon?: ElementType | null;
+    secondaryIcon?: ElementType | null;
     onClick?: (() => void) | null;
     ariaLabel?: string;
-}
+    open?: boolean;
+    isLoading?: boolean;
+    isDisabled?: boolean;
+} & Record<string, unknown>;
 export declare const GlassTile: React.FC<GlassTileProps>;
-export {};

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

@@ -10,29 +10,27 @@ import { Link } from '@carbon/react';
 import { usePrefix } from '../../../node_modules/@carbon-labs/utilities/es/usePrefix.js';
 import { GlassTileBody } from './GlassTileBody.js';
 
-/** Primary UI component for user interaction */
-
 const GlassTile = ({
+  tileId,
   href,
-  id,
-  mainIcon,
-  open,
-  secondaryIcon,
-  subtitle,
   title,
-  customContent,
-  isLoading,
-  isDisabled,
+  subtitle,
   disabledTaskLabel,
+  customContent,
+  primaryIcon: PrimaryIcon,
+  secondaryIcon: SecondaryIcon,
   onClick: glassTileClickHandler,
-  ariaLabel
+  ariaLabel,
+  open,
+  isLoading,
+  isDisabled
 }) => {
   const prefix = usePrefix();
   const blockClass = `${prefix}--animated-header__glass-tile`;
   const body = /*#__PURE__*/React.createElement(GlassTileBody, {
-    mainIcon: mainIcon,
     open: open,
-    secondaryIcon: secondaryIcon,
+    primaryIcon: PrimaryIcon,
+    secondaryIcon: SecondaryIcon,
     title: title,
     subtitle: subtitle,
     customContent: customContent,
@@ -43,7 +41,7 @@ const GlassTile = ({
   if (!href && !glassTileClickHandler) {
     return /*#__PURE__*/React.createElement("div", {
       className: `${prefix}--animated-header__tile ${blockClass}`,
-      key: id,
+      key: tileId,
       "aria-label": ariaLabel ?? title ?? 'Glass Tile',
       title: isDisabled ? disabledTaskLabel ?? '' : '',
       tabIndex: -1
@@ -57,7 +55,7 @@ const GlassTile = ({
     "aria-label": ariaLabel ?? title ?? 'Glass Tile',
     role: "listitem",
     tabIndex: isDisabled || isLoading ? -1 : 0,
-    key: id,
+    key: tileId,
     href: href ?? undefined,
     disabled: isDisabled || isLoading,
     title: isDisabled ? disabledTaskLabel ?? '' : ''

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

@@ -8,12 +8,12 @@
  */
 import { ElementType, ReactNode } from 'react';
 export type GlassTileBodyProps = {
-    mainIcon?: ElementType | null;
     open?: boolean;
-    secondaryIcon?: ElementType | null;
-    subtitle?: string | null;
     title?: string | null;
+    subtitle?: string | null;
     customContent?: ReactNode;
+    primaryIcon?: ElementType | null;
+    secondaryIcon?: ElementType | null;
     isLoading?: boolean;
 };
-export declare const GlassTileBody: ({ mainIcon: MainIcon, open, secondaryIcon: SecondaryIcon, subtitle, title, customContent, isLoading, }: GlassTileBodyProps) => import("react/jsx-runtime").JSX.Element;
+export declare const GlassTileBody: ({ open, title, subtitle, customContent, primaryIcon: PrimaryIcon, secondaryIcon: SecondaryIcon, isLoading, }: GlassTileBodyProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -10,12 +10,12 @@ import { usePrefix } from '../../../node_modules/@carbon-labs/utilities/es/usePr
 import { SkeletonPlaceholder } from '@carbon/react';
 
 const GlassTileBody = ({
-  mainIcon: MainIcon,
   open,
-  secondaryIcon: SecondaryIcon,
-  subtitle,
   title,
+  subtitle,
   customContent,
+  primaryIcon: PrimaryIcon,
+  secondaryIcon: SecondaryIcon,
   isLoading
 }) => {
   const prefix = usePrefix();
@@ -34,7 +34,7 @@ const GlassTileBody = ({
     className: `${blockClass}--custom-content`
   }, customContent) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     className: `${blockClass}--icons`
-  }, MainIcon && /*#__PURE__*/React.createElement(MainIcon, {
+  }, PrimaryIcon && /*#__PURE__*/React.createElement(PrimaryIcon, {
     fill: `var(--cds-icon-secondary)`,
     size: 24
   })), /*#__PURE__*/React.createElement("div", {

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

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

package/es/index.d.ts

@@ -6,9 +6,10 @@
  * 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, { AriaLabels, TileGroup } from './components/AnimatedHeader/AnimatedHeader';
+import AnimatedHeader from './components/AnimatedHeader/AnimatedHeader';
+import { AriaLabels, TileGroup } from './components/AnimatedHeader/types';
 import HeaderTitle from './components/HeaderTitle/HeaderTitle';
-import { BaseTile } from './components/Tiles/index.js';
+import { BaseTile } from './components/Tiles/index';
 export * from './assets';
 export type { Workspace, WorkspaceSelectorConfig, } from './components/WorkspaceSelector/WorkspaceSelector';
 export type { TasksControllerConfig } from './components/TasksController/TasksController';

package/es/index.js

@@ -11,13 +11,21 @@ import 'react';
 import '@carbon/react';
 import '@carbon/react/icons';
 export { BaseTile } from './components/Tiles/BaseTile/BaseTile.js';
-export { default as dataFabricAnimatedLight } from './assets/animated/header_1312x738_data_fabric_light_03.json.js';
-export { default as dataFabricAnimatedDark } from './assets/animated/header_1312x738_data_fabric_dark_06.json.js';
-export { default as dataFabricStaticLight } from './assets/static/illustration_data_fabric_light_04.svg.js';
-export { default as dataFabricStaticDark } from './assets/static/illustration_data_fabric_dark_05.svg.js';
-export { default as watsonXAnimatedLight } from './assets/animated/header_1312x738_watsonx_data_light_03.json.js';
-export { default as watsonXAnimatedDark } from './assets/animated/header_1312x738_watsonx_data_dark_02.json.js';
-export { default as watsonXStaticLight } from './assets/static/illustration_watson_x_data_light_03.svg.js';
-export { default as watsonXStaticDark } from './assets/static/illustration_watson_x_data_dark_03.svg.js';
-export { default as wxbiaAnimatedLight } from './assets/animated/header_illustration_container_wxbia_light_08.json.js';
-export { default as wxbiaAnimatedDark } from './assets/animated/header_illustration_container_wxbia_dark_05.json.js';
+export { default as dataFabricStaticLight } from './assets/static/header_static_data_fabric_light_06.svg.js';
+export { default as dataFabricStaticDark } from './assets/static/header_static_data_fabric_dark_06.svg.js';
+export { default as db2StaticLight } from './assets/static/header_static_db2_light_02.svg.js';
+export { default as db2StaticDark } from './assets/static/header_static_db2_dark_02.svg.js';
+export { default as watsonXStaticLight } from './assets/static/header_static_watsonx_data_light_06.svg.js';
+export { default as watsonXStaticDark } from './assets/static/header_static_watsonx_data_dark_05.svg.js';
+export { default as watsonXAStaticLight } from './assets/static/header_static_watsonx_a_light_01.svg.js';
+export { default as watsonXAStaticDark } from './assets/static/header_static_watsonx_a_dark_01.svg.js';
+export { default as wxbiaStaticLight } from './assets/static/header_static_wxbia_light_01.svg.js';
+export { default as wxbiaStaticDark } from './assets/static/header_static_wxbia_dark_01.svg.js';
+export { default as dataFabricAnimatedLight } from './assets/animated/header_animated_data_fabric_light_03.json.js';
+export { default as dataFabricAnimatedDark } from './assets/animated/header_animated_data_fabric_dark_06.json.js';
+export { default as watsonXAnimatedLight } from './assets/animated/header_animated_watsonx_data_light_04.json.js';
+export { default as watsonXAnimatedDark } from './assets/animated/header_animated_watsonx_data_dark_03.json.js';
+export { default as watsonXAAnimatedLight } from './assets/animated/header_animated_watsonx_a_light_06.json.js';
+export { default as watsonXAAnimatedDark } from './assets/animated/header_animated_watsonx_a_dark_06.json.js';
+export { default as wxbiaAnimatedLight } from './assets/animated/header_animated_wxbia_light_09.json.js';
+export { default as wxbiaAnimatedDark } from './assets/animated/header_animated_wxbia_dark_06.json.js';