@servicetitan/anvil2 2.7.0 → 2.8.0

package/dist/components/AiMark/AiMark.d.ts

@@ -0,0 +1,87 @@
+import { IconProps } from '../Icon';
+import { AiMarkCollapsePadding, AiMarkWithTooltipOrPopoverConfig } from '../../types/ai-marks';
+/**
+ * Props for the AiMark component
+ * @property {"default" | "gradient"} [type] - The visual style of the AI mark
+ * @property {AiMarkWithTooltipOrPopoverConfig} [popoverOrTooltipConfig] - Configuration for popover or tooltip display with content and props
+ * @property {boolean} [forceAnimate] - Forces the pulsing animation to play, intended for use within interactive parent components (e.g. on hover or focus of the parent)
+ * @property {AiMarkCollapsePadding} [collapsePadding] - Collapses the component's layout footprint to match a plain icon on the chosen axes.
+ * @extends Omit<IconProps, "svg">
+ */
+export type AiMarkProps = Omit<IconProps, "svg"> & {
+    /**
+     * The visual style of the AI mark.
+     * @default default
+     */
+    type?: "default" | "gradient";
+    /**
+     * Configuration for popover or tooltip display.
+     * Includes content, trigger label, and optional props for customization.
+     * Popover config takes precedence over tooltip config.
+     */
+    popoverOrTooltipConfig?: AiMarkWithTooltipOrPopoverConfig;
+    /**
+     * When true, forces the pulsing morph animation to play regardless of
+     * hover/focus state. Useful when AiMark is embedded inside an interactive
+     * parent component (e.g. a Chip or Button) and the parent controls when
+     * the animation should be active via its own hover or focus state.
+     * @default false
+     */
+    forceAnimate?: boolean;
+    /**
+     * Collapses padding on the chosen axes so the component's layout footprint
+     * matches a plain inline icon on those axes.
+     *
+     * For interactive variants (tooltip/popover), the ghost button's hit area is
+     * unchanged — only the container's layout box shrinks.
+     *
+     * For non-interactive variants, padding equal to the ghost button's padding is
+     * added to the non-collapsed axes, and omitted on the collapsed axes.
+     *
+     * - `"inline"` — collapse the inline axis (left/right)
+     * - `"block"` — collapse the block axis (top/bottom)
+     * - `"all"` — collapse both axes
+     */
+    collapsePadding?: AiMarkCollapsePadding;
+};
+/**
+ * Component for displaying the ServiceTitan AI mark with optional tooltip or popover.
+ *
+ * Features:
+ * - Two visual styles: default and gradient variants
+ * - Optional tooltip on hover for contextual information
+ * - Optional popover on click for more detailed content
+ * - Forced animation mode for use within interactive parent components
+ * - Uses ghost button appearance for subtle interaction
+ * - Inherits all icon properties for size and styling customization
+ * - Accessible with proper ARIA attributes from Button component
+ * - Prevents event propagation when used with popover
+ * - Configurable via popoverOrTooltipConfig for advanced customization
+ * - Optional `collapsePadding` to reduce layout footprint to match a plain icon
+ * - Animates on hover and focus when used with tooltip or popover
+ * - Automatically respects the user's reduced motion preference
+ *
+ * @example
+ * <AiMark
+ *   type="default"
+ *   popoverOrTooltipConfig={{
+ *     type: "tooltip",
+ *     content: "Powered by AI",
+ *     triggerLabel: "AI feature information"
+ *   }}
+ * />
+ *
+ * @example
+ * <AiMark
+ *   type="gradient"
+ *   popoverOrTooltipConfig={{
+ *     type: "popover",
+ *     content: <Text>AI feature details</Text>,
+ *     triggerLabel: "Learn about AI features"
+ *   }}
+ * />
+ *
+ * @example
+ * <AiMark type="default" forceAnimate={isHovered} />
+ */
+export declare const AiMark: (props: AiMarkProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/AiMark/index.d.ts

@@ -0,0 +1 @@
+export * from './AiMark';

package/dist/components/AiMark/internal/AiMarkIconAnimated.d.ts

@@ -0,0 +1,30 @@
+/**
+ * Props for the AiMarkIconAnimated component
+ * @property {boolean} [animate] - Whether to trigger animations (on hover or focus)
+ * @property {number} [size] - Size of the icon in pixels
+ * @property {boolean} [inheritColor] - Whether to inherit color from parent instead of using gradient
+ * @property {boolean} [spin] - Whether to enable the rotation animation in addition to the morph pulse
+ */
+interface AiMarkIconAnimatedProps {
+    animate?: boolean;
+    size?: number;
+    inheritColor?: boolean;
+    spin?: boolean;
+}
+/**
+ * AiMarkIconAnimated renders two animated Atlas AI star icons with rotation and morph effects.
+ *
+ * Features:
+ * - Displays two stars in different sizes positioned in a composition
+ * - Animates morphing on hover
+ * - Supports rotation animation via spin prop
+ * - Supports gradient or inherited color
+ * - Automatically respects reduced motion preferences
+ * - Configurable size
+ * - Unique gradient IDs prevent conflicts when multiple icons render
+ *
+ * @example
+ * <AiMarkIconAnimated animate={isActive} size={24} />
+ */
+export declare const AiMarkIconAnimated: ({ animate, size, inheritColor, spin, }: AiMarkIconAnimatedProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/AiMark/internal/AiMarkInteractive.d.ts

@@ -0,0 +1,10 @@
+import { IconProps } from '../../Icon';
+import { AiMarkWithTooltipOrPopoverConfig } from '../../../types/ai-marks';
+export type AiMarkInteractiveProps = {
+    config: AiMarkWithTooltipOrPopoverConfig;
+    size: NonNullable<IconProps["size"]>;
+    inheritColor: boolean;
+    containerClassName: string;
+    forceAnimate?: boolean;
+};
+export declare const AiMarkInteractive: ({ config, size, inheritColor, containerClassName, forceAnimate, }: AiMarkInteractiveProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/AiMark/stories/aiMarkStoryArgTypes.d.ts

@@ -0,0 +1,16 @@
+import { AiMarkWithTooltipOrPopoverConfig } from '../../../types/ai-marks';
+export declare const AI_MARK_STORY_OPTIONS: readonly ["false", "true", "tooltip (default)", "tooltip (custom)", "popover (default)", "popover (custom)"];
+export type AiMarkStoryOption = (typeof AI_MARK_STORY_OPTIONS)[number];
+/**
+ * Maps Storybook `aiMark` dropdown values to `AiMark` / `aiMark` prop values.
+ */
+export declare function resolveAiMarkStoryOption(option: AiMarkStoryOption | undefined): boolean | AiMarkWithTooltipOrPopoverConfig | undefined;
+export declare const argTypesAiMarkStory: {
+    aiMarkStory: {
+        name: string;
+        options: ("true" | "false" | "tooltip (default)" | "tooltip (custom)" | "popover (default)" | "popover (custom)")[];
+        control: {
+            type: "select";
+        };
+    };
+};

package/dist/components/Alert/Alert.d.ts

@@ -1,5 +1,6 @@
 import { ComponentPropsWithoutRef } from 'react';
 import { DataTrackingId, LayoutUtilProps, OnCloseProps, Status } from '../../types';
+import { AiMarkWithTooltipOrPopoverConfig } from '../../types/ai-marks';
 /**
  * Props for the Alert component
  * @extends ComponentPropsWithoutRef<"div">
@@ -16,6 +17,11 @@ export type AlertProps = ComponentPropsWithoutRef<"div"> & LayoutUtilProps & OnC
      * The title text displayed in the alert.
      */
     title: string;
+    /**
+     * When set, displays the AI mark inline after the title.
+     * Use `true` for the sparkle only, or pass tooltip/popover configuration.
+     */
+    aiMark?: boolean | AiMarkWithTooltipOrPopoverConfig;
 } & 
 /**
  * Data tracking id
@@ -27,6 +33,7 @@ DataTrackingId;
  * Features:
  * - Supports different visual styles (info, success, warning, danger)
  * - Optional close button for dismissible alerts
+ * - Optional AI mark inline after the title
  * - Customizable title and content
  * - Accessible with proper ARIA roles
  * - Includes status-specific icons
@@ -59,4 +66,9 @@ export declare const Alert: import('react').ForwardRefExoticComponent<Omit<impor
      * The title text displayed in the alert.
      */
     title: string;
+    /**
+     * When set, displays the AI mark inline after the title.
+     * Use `true` for the sparkle only, or pass tooltip/popover configuration.
+     */
+    aiMark?: boolean | AiMarkWithTooltipOrPopoverConfig;
 } & DataTrackingId & import('react').RefAttributes<HTMLDivElement>>;

package/dist/components/Avatar/Avatar.d.ts

@@ -15,6 +15,20 @@ import { DistributiveOmit } from '../../types';
 export type AvatarProps = DistributiveOmit<CoreAvatarProps, "size"> & {
     size?: Extract<CoreAvatarProps["size"], "small" | "medium" | "large">;
 };
+/**
+ * Avatar component for displaying user avatars with initials or images.
+ *
+ * Features:
+ * - Displays user initials when no image is provided
+ * - Supports custom colors and sizes
+ * - Shows online/offline status
+ * - Fully accessible with screen reader support
+ * - Automatic image fallback handling
+ * - Automatic tracking ID generation for analytics
+ *
+ * @example
+ * <Avatar name="John Doe" size="medium" status="online" />
+ */
 export declare const Avatar: import('react').ForwardRefExoticComponent<Omit<CoreAvatarProps, "size"> & {
     size?: Extract<CoreAvatarProps["size"], "small" | "medium" | "large">;
 } & import('react').RefAttributes<HTMLSpanElement>> & {

package/dist/components/Button/Button.d.ts

@@ -1,12 +1,23 @@
 import { ButtonAppearance, Size, DataTrackingId, LayoutUtilProps } from '../../types';
 import { ComponentPropsWithoutRef } from 'react';
 import { IconProps } from '../Icon';
+import { AiIconName } from './internal';
+export type { AiIconName };
 /**
  * Props for the Button component
  * @extends Omit<ComponentPropsWithoutRef<"button">, "children">
  * @extends LayoutUtilProps
+ * @extends DataTrackingId
  */
-export type ButtonProps = Omit<ComponentPropsWithoutRef<"button">, "children"> & LayoutUtilProps & {
+export type ButtonProps = Omit<ComponentPropsWithoutRef<"button">, "children"> & LayoutUtilProps & DataTrackingId & {
+    /**
+     * When `true` or an icon name, shows an AI indicator. With button text, any leading
+     * `icon` (plain Svg or `icon.before`) is not shown—the AI icon is used instead.
+     * On an icon-only button, `icon` is not shown—the AI icon is used instead.
+     * Icon-only usage must include an accessible name (for example `aria-label`).
+     * In development, a console warning is logged when `icon` is overridden.
+     */
+    aiMark?: boolean | AiIconName;
     /**
      * The visual variant of the button.
      * @default secondary
@@ -39,11 +50,7 @@ export type ButtonProps = Omit<ComponentPropsWithoutRef<"button">, "children"> &
      * The icon of the icon only button.
      */
     icon?: IconProps["svg"];
-}) & 
-/**
- * Data tracking id
- */
-DataTrackingId;
+});
 /**
  * Button component for triggering actions and user interactions.
  *
@@ -52,6 +59,7 @@ DataTrackingId;
  * - Four size options (xsmall, small, medium, large)
  * - Loading state with spinner animation
  * - Icon support (before, after, or icon-only)
+ * - Optional AI mark / named AI icons via `aiMark`
  * - Full accessibility support with ARIA attributes
  * - Supports layout utilities for positioning and spacing
  * - Automatic disabled state when loading

package/dist/components/Button/internal/buttonAiMarkUtils.d.ts

@@ -0,0 +1,18 @@
+import { IconProps } from '../../Icon';
+/**
+ * AI icon names for `Button` `aiMark`. `"mark"` (or boolean `true`) uses the animated AI mark;
+ * other values use static AI icons.
+ */
+export type AiIconName = "chat" | "edit" | "form" | "mark" | "mic" | "search";
+export declare const AI_ICON_MAP: Record<Exclude<AiIconName, "mark">, IconProps["svg"]>;
+export type ButtonAiMarkSize = "xsmall" | "small" | "medium" | "large";
+/**
+ * Icon-only AI icon container size (px). Medium/large match custom icon-only parity.
+ */
+export declare const ICON_ONLY_AI_SIZE_PX: Record<ButtonAiMarkSize, number>;
+export declare function iconHasLeadingSlot(icon: IconProps["svg"] | {
+    before: IconProps["svg"];
+} | {
+    after: IconProps["svg"];
+} | undefined): boolean;
+export declare function aiMarkShowsAnimatedMark(aiMark?: boolean | AiIconName): boolean;

package/dist/components/Button/internal/index.d.ts

@@ -0,0 +1 @@
+export { type AiIconName, type ButtonAiMarkSize, AI_ICON_MAP, ICON_ONLY_AI_SIZE_PX, aiMarkShowsAnimatedMark, iconHasLeadingSlot, } from './buttonAiMarkUtils';

package/dist/components/Calendar/Calendar.d.ts

@@ -142,32 +142,6 @@ export type CalendarProps = LayoutUtilProps & (CalendarSingleProps | CalendarRan
  *   maxDate="2024-12-31"
  * />
  */
-export declare const CalendarElement: import('react').ForwardRefExoticComponent<CalendarProps & import('react').RefAttributes<HTMLDivElement>>;
-/**
- * Calendar component for viewing and selecting a date or range of dates.
- *
- * Features:
- * - Single date and date range selection modes
- * - Month and year navigation with header buttons
- * - Configurable start day (Sunday or Monday)
- * - Date range restrictions with min/max dates
- * - Unavailable dates and days of week support
- * - Locale and timezone customization
- * - Full accessibility support with ARIA attributes
- * - Keyboard navigation support
- * - Responsive design with automatic width detection
- * - Month and year selection views
- * - Today button for quick navigation
- * - Data tracking integration for analytics
- *
- * @example
- * <Calendar
- *   value="2024-01-15"
- *   onSelection={({ value }) => console.log('Selected:', value)}
- *   minDate="2024-01-01"
- *   maxDate="2024-12-31"
- * />
- */
 export declare const Calendar: import('react').ForwardRefExoticComponent<CalendarProps & import('react').RefAttributes<HTMLDivElement>> & {
     /**
      * Calendar.Now component for navigating to today's date.
@@ -252,4 +226,88 @@ export declare const Calendar: import('react').ForwardRefExoticComponent<Calenda
      */
     YearButton: import('react').ForwardRefExoticComponent<import('./CalendarYearButton').CalendarYearButtonProps & import('react').RefAttributes<HTMLButtonElement>>;
 };
+export declare const CalendarElement: import('react').ForwardRefExoticComponent<CalendarProps & import('react').RefAttributes<HTMLDivElement>> & {
+    /**
+     * Calendar.Now component for navigating to today's date.
+     *
+     * Features:
+     * - Quick navigation to current date
+     * - Accessible button with proper ARIA labels
+     * - Integrates with calendar context
+     * - Data tracking integration for analytics
+     *
+     * @example
+     * <Calendar.Now />
+     */
+    Now: import('react').ForwardRefExoticComponent<{
+        onClick?: (e: import('react').MouseEvent<HTMLButtonElement>, date: string | null) => void;
+        onClickFixed?: import('react').MouseEventHandler<HTMLButtonElement> | undefined;
+    } & Omit<import('..').ButtonProps, "onClick"> & import('react').RefAttributes<HTMLButtonElement>>;
+    /**
+     * Calendar.Month component for displaying the month grid.
+     *
+     * Features:
+     * - Displays calendar days in a table format
+     * - Handles day selection and navigation
+     * - Supports range selection mode
+     * - Accessible with proper ARIA attributes
+     * - Data tracking integration for analytics
+     *
+     * @example
+     * <Calendar.Month />
+     */
+    Month: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, "ref"> & import('react').RefAttributes<HTMLTableElement>>;
+    /**
+     * Calendar.Next component for navigating to the next month.
+     *
+     * Features:
+     * - Navigation to next month
+     * - Accessible button with proper ARIA labels
+     * - Integrates with calendar context
+     * - Data tracking integration for analytics
+     *
+     * @example
+     * <Calendar.Next />
+     */
+    Next: import('react').ForwardRefExoticComponent<import('..').ButtonProps & import('react').RefAttributes<HTMLButtonElement>>;
+    /**
+     * Calendar.Prev component for navigating to the previous month.
+     *
+     * Features:
+     * - Navigation to previous month
+     * - Accessible button with proper ARIA labels
+     * - Integrates with calendar context
+     * - Data tracking integration for analytics
+     *
+     * @example
+     * <Calendar.Prev />
+     */
+    Prev: import('react').ForwardRefExoticComponent<import('..').ButtonProps & import('react').RefAttributes<HTMLButtonElement>>;
+    /**
+     * Calendar.MonthButton component for switching to month selection view.
+     *
+     * Features:
+     * - Switches calendar to month selection mode
+     * - Accessible button with proper ARIA labels
+     * - Integrates with calendar context
+     * - Data tracking integration for analytics
+     *
+     * @example
+     * <Calendar.MonthButton />
+     */
+    MonthButton: import('react').ForwardRefExoticComponent<import('./CalendarMonthButton').CalendarMonthButtonProps & import('react').RefAttributes<HTMLButtonElement>>;
+    /**
+     * Calendar.YearButton component for switching to year selection view.
+     *
+     * Features:
+     * - Switches calendar to year selection mode
+     * - Accessible button with proper ARIA labels
+     * - Integrates with calendar context
+     * - Data tracking integration for analytics
+     *
+     * @example
+     * <Calendar.YearButton />
+     */
+    YearButton: import('react').ForwardRefExoticComponent<import('./CalendarYearButton').CalendarYearButtonProps & import('react').RefAttributes<HTMLButtonElement>>;
+};
 export {};

package/dist/components/Card/Card.d.ts

@@ -20,9 +20,14 @@ export type CardProps = ComponentPropsWithoutRef<"div"> & LayoutUtilProps & {
 /**
  * Card component for displaying content in a contained, elevated container.
  *
+ * Features:
+ * - Optional background variants (strong, stronger)
+ * - Configurable padding sizes
+ * - Supports layout utilities for positioning and spacing
+ *
  * @example
  * <Card padding="large" background="strong">
- *   <h2>Card Title</h2>
+ *   <Text variant="headline" el="h2">Card Title</Text>
  *   <p>Card content goes here</p>
  * </Card>
  */

package/dist/components/Checkbox/Checkbox.d.ts

@@ -61,10 +61,12 @@ export declare const Checkbox: import('react').ForwardRefExoticComponent<Omit<Co
     Group: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').FieldsetHTMLAttributes<HTMLFieldSetElement>, HTMLFieldSetElement>, "ref"> & import('..').LayoutUtilProps & Omit<import('../../internal').FieldLabelProps, "labelProps"> & {
         required?: boolean;
         legend: string | import('react').ReactElement;
+        legendProps?: Omit<import('..').FieldLabelProps, "el">;
         error?: boolean | string | import('react').ReactElement | string[];
         errorAriaLive?: import('../../internal').HelperProps["errorAriaLive"];
         warning?: string | string[];
         description?: import('../../internal').HelperProps["description"];
         hint?: import('../../internal').HelperProps["hint"];
+        hideLabel?: boolean;
     } & import('react').RefAttributes<HTMLFieldSetElement>>;
 };

package/dist/components/Checkbox/CheckboxGroup.d.ts

@@ -1,14 +1,15 @@
 import { ComponentPropsWithoutRef, ReactElement } from 'react';
 import { LayoutUtilProps } from '../../types';
-import { FieldLabelProps } from '../../internal/types';
+import { FieldLabelProps as FieldLabelElementProps } from '../FieldLabel';
+import { FieldLabelProps as InternalFieldLabelProps } from '../../internal/types';
 import { HelperProps } from '../../internal/components';
 /**
  * Props for the CheckboxGroup component
  * @extends ComponentPropsWithoutRef<"fieldset">
  * @extends LayoutUtilProps
- * @extends Omit<FieldLabelProps, "labelProps">
+ * @extends Omit<InternalFieldLabelProps, "labelProps">
  */
-export type CheckboxGroupProps = ComponentPropsWithoutRef<"fieldset"> & LayoutUtilProps & Omit<FieldLabelProps, "labelProps"> & {
+export type CheckboxGroupProps = ComponentPropsWithoutRef<"fieldset"> & LayoutUtilProps & Omit<InternalFieldLabelProps, "labelProps"> & {
     /**
      * required flag for label
      * @accessibility This does not enforce error when nothing is selected.
@@ -16,9 +17,14 @@ export type CheckboxGroupProps = ComponentPropsWithoutRef<"fieldset"> & LayoutUt
      */
     required?: boolean;
     /**
-     * legend for the fieldset
+     * Legend for the fieldset.
+     * Passing `ReactNode` is deprecated — use a plain string with inline markdown instead.
      */
     legend: string | ReactElement;
+    /**
+     * Additional props for the legend `FieldLabel` (for example `aiMark`, `className`).
+     */
+    legendProps?: Omit<FieldLabelElementProps, "el">;
     /**
      * Error state for the field. Pass `true` to indicate error styling without a message.
      * Pass a string, string[], or ReactElement (deprecated) for error messages.
@@ -40,6 +46,11 @@ export type CheckboxGroupProps = ComponentPropsWithoutRef<"fieldset"> & LayoutUt
      * Hint text to display below the field.
      */
     hint?: HelperProps["hint"];
+    /**
+     * When `true`, hides the visual label row. The sr-only `<legend>` always remains for screen readers.
+     * @default false
+     */
+    hideLabel?: boolean;
 };
 /**
  * CheckboxGroup component for grouping related checkboxes together.
@@ -61,7 +72,7 @@ export type CheckboxGroupProps = ComponentPropsWithoutRef<"fieldset"> & LayoutUt
  *   <Checkbox label="Music" />
  * </CheckboxGroup>
  */
-export declare const CheckboxGroup: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').FieldsetHTMLAttributes<HTMLFieldSetElement>, HTMLFieldSetElement>, "ref"> & LayoutUtilProps & Omit<FieldLabelProps, "labelProps"> & {
+export declare const CheckboxGroup: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').FieldsetHTMLAttributes<HTMLFieldSetElement>, HTMLFieldSetElement>, "ref"> & LayoutUtilProps & Omit<InternalFieldLabelProps, "labelProps"> & {
     /**
      * required flag for label
      * @accessibility This does not enforce error when nothing is selected.
@@ -69,9 +80,14 @@ export declare const CheckboxGroup: import('react').ForwardRefExoticComponent<Om
      */
     required?: boolean;
     /**
-     * legend for the fieldset
+     * Legend for the fieldset.
+     * Passing `ReactNode` is deprecated — use a plain string with inline markdown instead.
      */
     legend: string | ReactElement;
+    /**
+     * Additional props for the legend `FieldLabel` (for example `aiMark`, `className`).
+     */
+    legendProps?: Omit<FieldLabelElementProps, "el">;
     /**
      * Error state for the field. Pass `true` to indicate error styling without a message.
      * Pass a string, string[], or ReactElement (deprecated) for error messages.
@@ -93,4 +109,9 @@ export declare const CheckboxGroup: import('react').ForwardRefExoticComponent<Om
      * Hint text to display below the field.
      */
     hint?: HelperProps["hint"];
+    /**
+     * When `true`, hides the visual label row. The sr-only `<legend>` always remains for screen readers.
+     * @default false
+     */
+    hideLabel?: boolean;
 } & import('react').RefAttributes<HTMLFieldSetElement>>;

package/dist/components/Chip/Chip.d.ts

@@ -2,11 +2,13 @@ import { ChipProps as CoreChipProps } from './internal/Chip';
 import { IconProps as CoreIconProps } from '../Icon';
 import { AvatarProps as CoreAvatarProps } from '../Avatar/internal/Avatar';
 import { DataTrackingId, DistributiveOmit } from '../../types';
+import { AiMarkBooleanProps } from '../../types/ai-marks';
 /**
  * Props for the Chip component
  * @property {string} label - The text that displays in the chip
  * @property {"small" | "medium"} [size] - The size of the chip
  * @property {string} [color] - Color of the Chip
+ * @property {boolean} [aiMark] - Whether to display an AI mark icon in the chip
  * @property {(e?: MouseEvent<HTMLSpanElement> | KeyboardEvent<HTMLSpanElement>) => void} [onClick] - Callback for when the Chip is clicked
  * @property {(e: MouseEvent<HTMLSpanElement> | KeyboardEvent<HTMLSpanElement>) => void} [onClose] - Called when the component is closed
  * @property {boolean} [textWrap] - Wraps text when it overflows
@@ -14,8 +16,9 @@ import { DataTrackingId, DistributiveOmit } from '../../types';
  * @property {string} [avatar] - Image URL to display in an avatar before the chip text.
  * @extends CoreChipProps
  * @extends DataTrackingId
+ * @extends AiMarkBooleanProps
  */
-export type ChipProps = DistributiveOmit<CoreChipProps, "prefix" | "avatar"> & DataTrackingId & ({
+export type ChipProps = DistributiveOmit<CoreChipProps, "prefix" | "avatar" | "suffix"> & DataTrackingId & AiMarkBooleanProps & ({
     icon?: CoreIconProps["svg"];
     avatar?: never;
 } | {
@@ -30,6 +33,9 @@ export type ChipProps = DistributiveOmit<CoreChipProps, "prefix" | "avatar"> & D
  * - Custom color support with automatic contrast calculation
  * - Optional click handler for interactive chips
  * - Optional close button for removable chips
+ * - Optional AI mark icon to indicate AI-generated content
+ * - Automatic AI mark type selection: gradient on default chips, inherited color on colored chips
+ * - AI mark on clickable chips (hover/focus morph temporarily disabled; see @TODO in source)
  * - Text wrapping support for long labels
  * - Full accessibility support with ARIA attributes
  * - Keyboard navigation (Enter/Space to click, Delete/Backspace to close)
@@ -45,5 +51,8 @@ export type ChipProps = DistributiveOmit<CoreChipProps, "prefix" | "avatar"> & D
  *   onClose={(e) => console.log('Chip removed')}
  *   onClick={(e) => console.log('Chip clicked')}
  * />
+ *
+ * @example
+ * <Chip label="AI Generated" aiMark />
  */
 export declare const Chip: import('react').ForwardRefExoticComponent<ChipProps & import('react').RefAttributes<HTMLSpanElement>>;

package/dist/components/Chip/internal/Chip.d.ts

@@ -27,6 +27,10 @@ export type ChipBaseProps = Omit<ComponentPropsWithoutRef<"span">, "prefix"> & O
      * Image URL to display in an avatar before the chip text.
      */
     avatar?: AvatarProps["image"];
+    /**
+     * Content displayed in the chip, after the text.
+     */
+    suffix?: ReactNode;
 };
 type ChipClickHandler = (e?: MouseEvent<HTMLSpanElement> | KeyboardEvent<HTMLSpanElement>) => void;
 type ChipCloseHandler = (e: MouseEvent<HTMLSpanElement> | KeyboardEvent<HTMLSpanElement>) => void;