@servicetitan/anvil2 2.7.1 → 2.8.0

package/dist/beta/components/Table/DataTable/internal/usePageDataCache.d.ts

@@ -0,0 +1,29 @@
+import { TableRow } from '../../types';
+import { DataTableCacheOptions, SortedColumn } from '../types';
+/**
+ * Hook for caching resolved page data in DataTable.
+ *
+ * Features:
+ * - Caches resolved page data per page index using a Map stored in a ref
+ * - Returns cached data synchronously on cache hit, avoiding unnecessary API calls
+ * - Synchronously clears cache during render when invalidation triggers change
+ * - Size-based eviction (FIFO) when cache exceeds maxSize: oldest entry is dropped to make room
+ *
+ * @param config - Configuration including loadPageData function, cache options, and invalidation triggers
+ * @returns Object containing getOrLoad function and clearCache function
+ */
+export declare function usePageDataCache<T>(config: {
+    loadPageData?: (params: {
+        pageIndex: number;
+        pageSize: number;
+        sorting?: SortedColumn;
+    }) => TableRow<T>[] | Promise<TableRow<T>[]>;
+    cache?: DataTableCacheOptions;
+    refreshKey?: string | number;
+    refreshCounter: number;
+    rowsPerPage: number;
+    sorting?: SortedColumn;
+}): {
+    getOrLoad: (pageIndex: number, pageSize: number, sorting?: SortedColumn) => TableRow<T>[] | Promise<TableRow<T>[]>;
+    clearCache: () => void;
+};

package/dist/beta/components/Table/DataTable/types.d.ts

@@ -32,6 +32,26 @@ export type DataTableEmptyState = {
      */
     content?: ReactNode;
 };
+/**
+ * Configuration for caching loadPageData results in DataTable.
+ * When enabled, resolved page data is cached per page index, allowing
+ * instant restoration when returning to a previously loaded page.
+ * @property {boolean} [enabled] - Whether caching is enabled. Defaults to true.
+ * @property {number} [maxSize] - Maximum number of pages to cache. Oldest entry is evicted (FIFO) when the limit is reached. Defaults to 15.
+ */
+export type DataTableCacheOptions = {
+    /**
+     * Whether caching is enabled.
+     * @default true
+     */
+    enabled?: boolean;
+    /**
+     * Maximum number of pages to cache. When the limit is reached, the oldest cached page is
+     * evicted (FIFO) to make room for the new entry.
+     * @default 15
+     */
+    maxSize?: number;
+};
 /**
  * Configuration for pagination in DataTable
  */
@@ -92,10 +112,16 @@ export type DataTablePaginationConfig<T> = {
      * When changed, the page index automatically resets to 0.
      */
     refreshKey?: string | number;
+    /**
+     * Configuration for caching loadPageData results.
+     * Caching is enabled by default. Set `{ enabled: false }` to disable.
+     */
+    cache?: DataTableCacheOptions;
 };
 /**
  * Ref handle for DataTable component
  * @property {function} refresh - Triggers a data refetch and resets the page index to 0. Useful for manually refreshing data after external changes (e.g., after a mutation).
+ * @property {function} clearCache - Clears the page data cache without triggering a refetch.
  */
 export type DataTableRef = {
     /**
@@ -104,4 +130,8 @@ export type DataTableRef = {
      * When using controlled pagination, this will call `onPageChange(0)`.
      */
     refresh: () => void;
+    /**
+     * Clears the page data cache without triggering a refetch.
+     */
+    clearCache: () => void;
 };

package/dist/beta/components/Toolbar/Toolbar.d.ts

@@ -158,7 +158,8 @@ export declare const Toolbar: import('react').ForwardRefExoticComponent<Omit<imp
      *   onChange={(id) => setFont(id)}
      * />
      */
-    Select: import('react').ForwardRefExoticComponent<Omit<Omit<Omit<Omit<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref">, "children"> & LayoutUtilProps & {
+    Select: import('react').ForwardRefExoticComponent<Omit<Omit<Omit<Omit<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref">, "children"> & LayoutUtilProps & import('../../..').DataTrackingId & {
+        aiMark?: boolean | import('../../..').AiIconName;
         appearance?: import('../../..').ButtonAppearance;
         size?: Extract<import('../../..').Size, "xsmall" | "small" | "medium" | "large">;
         loading?: boolean;
@@ -169,14 +170,15 @@ export declare const Toolbar: import('react').ForwardRefExoticComponent<Omit<imp
         } | {
             before: import('../../..').IconProps["svg"];
         };
-    } & import('../../..').DataTrackingId & import('react').RefAttributes<HTMLButtonElement>, "ref"> | Omit<Omit<Omit<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref">, "children"> & LayoutUtilProps & {
+    } & import('react').RefAttributes<HTMLButtonElement>, "ref"> | Omit<Omit<Omit<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref">, "children"> & LayoutUtilProps & import('../../..').DataTrackingId & {
+        aiMark?: boolean | import('../../..').AiIconName;
         appearance?: import('../../..').ButtonAppearance;
         size?: Extract<import('../../..').Size, "xsmall" | "small" | "medium" | "large">;
         loading?: boolean;
     } & {
         children?: never;
         icon?: import('../../..').IconProps["svg"];
-    } & import('../../..').DataTrackingId & import('react').RefAttributes<HTMLButtonElement>, "ref">, "onChange" | "appearance"> & {
+    } & import('react').RefAttributes<HTMLButtonElement>, "ref">, "onChange" | "appearance"> & {
         appearance?: import('./types').ToolbarItemAppearance;
         onChange?: (optionId: string) => void;
         selected?: string;
@@ -348,7 +350,8 @@ export declare const ToolbarElement: import('react').ForwardRefExoticComponent<O
      *   onChange={(id) => setFont(id)}
      * />
      */
-    Select: import('react').ForwardRefExoticComponent<Omit<Omit<Omit<Omit<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref">, "children"> & LayoutUtilProps & {
+    Select: import('react').ForwardRefExoticComponent<Omit<Omit<Omit<Omit<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref">, "children"> & LayoutUtilProps & import('../../..').DataTrackingId & {
+        aiMark?: boolean | import('../../..').AiIconName;
         appearance?: import('../../..').ButtonAppearance;
         size?: Extract<import('../../..').Size, "xsmall" | "small" | "medium" | "large">;
         loading?: boolean;
@@ -359,14 +362,15 @@ export declare const ToolbarElement: import('react').ForwardRefExoticComponent<O
         } | {
             before: import('../../..').IconProps["svg"];
         };
-    } & import('../../..').DataTrackingId & import('react').RefAttributes<HTMLButtonElement>, "ref"> | Omit<Omit<Omit<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref">, "children"> & LayoutUtilProps & {
+    } & import('react').RefAttributes<HTMLButtonElement>, "ref"> | Omit<Omit<Omit<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref">, "children"> & LayoutUtilProps & import('../../..').DataTrackingId & {
+        aiMark?: boolean | import('../../..').AiIconName;
         appearance?: import('../../..').ButtonAppearance;
         size?: Extract<import('../../..').Size, "xsmall" | "small" | "medium" | "large">;
         loading?: boolean;
     } & {
         children?: never;
         icon?: import('../../..').IconProps["svg"];
-    } & import('../../..').DataTrackingId & import('react').RefAttributes<HTMLButtonElement>, "ref">, "onChange" | "appearance"> & {
+    } & import('react').RefAttributes<HTMLButtonElement>, "ref">, "onChange" | "appearance"> & {
         appearance?: import('./types').ToolbarItemAppearance;
         onChange?: (optionId: string) => void;
         selected?: string;

package/dist/beta/components/Toolbar/ToolbarSelect.d.ts

@@ -63,7 +63,8 @@ export type ToolbarSelectProps<T = Record<string, unknown>> = Omit<React.Compone
  *   accessibleLabel="Text color"
  * />
  */
-export declare const ToolbarSelect: import('react').ForwardRefExoticComponent<Omit<Omit<Omit<Omit<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref">, "children"> & import('../../..').LayoutUtilProps & {
+export declare const ToolbarSelect: import('react').ForwardRefExoticComponent<Omit<Omit<Omit<Omit<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref">, "children"> & import('../../..').LayoutUtilProps & DataTrackingId & {
+    aiMark?: boolean | import('../../..').AiIconName;
     appearance?: import('../../..').ButtonAppearance;
     size?: Extract<import('../../..').Size, "xsmall" | "small" | "medium" | "large">;
     loading?: boolean;
@@ -74,14 +75,15 @@ export declare const ToolbarSelect: import('react').ForwardRefExoticComponent<Om
     } | {
         before: import('../../..').IconProps["svg"];
     };
-} & DataTrackingId & import('react').RefAttributes<HTMLButtonElement>, "ref"> | Omit<Omit<Omit<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref">, "children"> & import('../../..').LayoutUtilProps & {
+} & import('react').RefAttributes<HTMLButtonElement>, "ref"> | Omit<Omit<Omit<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref">, "children"> & import('../../..').LayoutUtilProps & DataTrackingId & {
+    aiMark?: boolean | import('../../..').AiIconName;
     appearance?: import('../../..').ButtonAppearance;
     size?: Extract<import('../../..').Size, "xsmall" | "small" | "medium" | "large">;
     loading?: boolean;
 } & {
     children?: never;
     icon?: import('../../..').IconProps["svg"];
-} & DataTrackingId & import('react').RefAttributes<HTMLButtonElement>, "ref">, "onChange" | "appearance"> & {
+} & import('react').RefAttributes<HTMLButtonElement>, "ref">, "onChange" | "appearance"> & {
     /**
      * Visual appearance of the select button
      * @default ghost

package/dist/beta.js

@@ -1,11 +1,11 @@
-export { C as COLUMN_TYPE_DEFAULTS, D as DataTable, b as booleanFormatter, a as chipsFormatter, c as createColumnHelper, d as currencyFormatter, h as dateFormatPresets, e as dateFormatter, f as dateTimeFormatter, g as getColumnTypeDefaults, n as numberFormatter, p as percentFormatter, r as resolveColumnTypeConfig, t as timeFormatPresets, i as timeFormatter, y as yearlessDateFormatter } from './DataTable-BmVPjMMg.js';
-export { T as Toolbar, a as ToolbarButton, c as ToolbarButtonLink, b as ToolbarButtonToggle, e as ToolbarControlGroup, g as ToolbarElement, f as ToolbarSearchField, d as ToolbarSelect } from './Toolbar-0EKhrvZN.js';
-export { u as useCalendarBetaProps } from './Calendar-Frpv5rRY.js';
-export { C as Calendar } from './Calendar-BTStJPV1.js';
-export { S as SelectField, a as SelectFieldSync } from './SelectFieldSync-DA54WXOk.js';
-export { M as MultiSelectField, a as MultiSelectFieldSync } from './MultiSelectFieldSync-CSOitvtu.js';
-export { S as SelectMenu, a as SelectMenuSync } from './SelectMenuSync-BQaSTcaN.js';
-export { M as MultiSelectMenu, a as MultiSelectMenuSync } from './MultiSelectMenuSync-62OeGmkz.js';
+export { C as COLUMN_TYPE_DEFAULTS, D as DataTable, b as booleanFormatter, a as chipsFormatter, c as createColumnHelper, d as currencyFormatter, h as dateFormatPresets, e as dateFormatter, f as dateTimeFormatter, g as getColumnTypeDefaults, n as numberFormatter, p as percentFormatter, r as resolveColumnTypeConfig, t as timeFormatPresets, i as timeFormatter, y as yearlessDateFormatter } from './DataTable-DK9xRjnq.js';
+export { T as Toolbar, a as ToolbarButton, c as ToolbarButtonLink, b as ToolbarButtonToggle, e as ToolbarControlGroup, g as ToolbarElement, f as ToolbarSearchField, d as ToolbarSelect } from './Toolbar-CWRk523l.js';
+export { u as useCalendarBetaProps } from './Calendar-Bd_WELZC.js';
+export { C as Calendar } from './Calendar-d2owsYe9.js';
+export { S as SelectField, a as SelectFieldSync } from './SelectFieldSync-DGK8F2G9.js';
+export { M as MultiSelectField, a as MultiSelectFieldSync } from './MultiSelectFieldSync-Ei7DXzvs.js';
+export { S as SelectMenu, a as SelectMenuSync } from './SelectMenuSync-CuZp9mnt.js';
+export { M as MultiSelectMenu, a as MultiSelectMenuSync } from './MultiSelectMenuSync-B_mXpTEe.js';
 export { I as InteractiveCard } from './InteractiveCard-GTYbR6Xy.js';
-export { u as useAdaptiveView } from './syncFilterUtils-B03Pc941.js';
+export { u as useAdaptiveView } from './syncFilterUtils-CsbCnI1-.js';
 //# sourceMappingURL=beta.js.map

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/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/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;

package/dist/components/DateFieldRange/internal/MaskedDateRangeInput.d.ts

@@ -32,7 +32,7 @@ export type MaskedDateRangeInputRef = HTMLInputElement & {
  * @param props.endDate - The end date.
  * @param props.disableHint - Whether to disable the hint.
  */
-export declare const MaskedDateRangeInput: import('react').ForwardRefExoticComponent<Omit<TextFieldProps, "ref" | "value" | "onChange" | "prefix" | "hint" | "showCounter"> & {
+export declare const MaskedDateRangeInput: import('react').ForwardRefExoticComponent<Omit<TextFieldProps, "onChange" | "ref" | "value" | "prefix" | "hint" | "showCounter"> & {
     onChange: MaskedDateRangeInputChangeHandler;
     mode?: DateMode;
     startDate: DateTime | null;

package/dist/components/DateFieldRange/internal/useDateFieldRangeConversion.d.ts

@@ -20,7 +20,7 @@ export declare const useDateFieldRangeConversion: (props: DateFieldRangeProps) =
     maxDate: DateTime<boolean> | null | undefined;
     unavailable: {
         dates: DateTime<boolean>[] | undefined;
-        daysOfWeek: (3 | 1 | 6 | 2 | 4 | 5 | 7)[] | undefined;
+        daysOfWeek: (1 | 2 | 3 | 6 | 4 | 5 | 7)[] | undefined;
     };
     onChange: (change: Omit<DateFieldRangeChange, "startDate" | "endDate"> & {
         startDate: DateTime | null;