@servicetitan/anvil2 1.37.2 → 1.38.0

package/dist/components/SelectCard/SelectCard.d.ts

@@ -1,6 +1,66 @@
 import { SelectCardProps as CoreSelectCardProps } from '@servicetitan/hammer-react';
+/**
+ * Props for the SelectCard component
+ * @property {Omit<CheckboxProps, "label">} [checkboxProps] - Passes props to the underlying Checkbox component
+ * @property {boolean} [checked] - Controlled state. When provided, the component becomes controlled
+ * @property {boolean} [defaultChecked] - Uncontrolled state
+ * @property {boolean} [disabled] - When true, disables the card
+ * @property {boolean} [errored] - When true, sets error styling on the card
+ * @property {string | number} id - A unique identifier for the card, used to track the selection state
+ * @property {(value: boolean) => void} onChange - Function called on selection state change
+ * @property {Omit<RadioProps, "label">} [radioProps] - Passes props to the underlying Radio component
+ * @extends CoreSelectCardProps
+ */
 export type SelectCardProps = CoreSelectCardProps;
 export declare const SelectCardElement: import('react').ForwardRefExoticComponent<CoreSelectCardProps & import('react').RefAttributes<HTMLInputElement>>;
+/**
+ * SelectCard component for creating interactive card-based selection interfaces.
+ *
+ * Features:
+ * - Supports both single selection (radio) and multiple selection (checkbox) modes
+ * - Automatic context detection for selection behavior
+ * - Visual feedback for selected, disabled, and error states
+ * - Accessible with proper ARIA roles and keyboard navigation
+ * - Customizable styling through Card component props
+ * - Hover and focus states with smooth transitions
+ * - Integration with SelectCardGroup for grouped selection
+ * - Automatic tracking ID generation for analytics
+ *
+ * @example
+ * <SelectCard
+ *   id="option-1"
+ *   onChange={(checked) => console.log('Selected:', checked)}
+ * >
+ *   <Text variant="headline" size="small">Option 1</Text>
+ *   <Text>Description of option 1</Text>
+ * </SelectCard>
+ */
 export declare const SelectCard: import('react').ForwardRefExoticComponent<CoreSelectCardProps & import('react').RefAttributes<HTMLInputElement>> & {
+    /**
+     * SelectCardGroup component for managing groups of selectable cards.
+     *
+     * Features:
+     * - Manages selection state for multiple SelectCard components
+     * - Supports both single and multiple selection modes
+     * - Provides proper accessibility with legends and ARIA labels
+     * - Handles required field validation
+     * - Automatic radio button grouping for single selection
+     * - Context provider for child SelectCard components
+     * - Automatic tracking ID generation for analytics
+     *
+     * @example
+     * <SelectCard.Group
+     *   legend="Choose your plan"
+     *   selectionMode="single"
+     *   onChange={(e, state) => console.log('Selection changed:', state)}
+     * >
+     *   <SelectCard id="basic" onChange={() => {}}>
+     *     <Text variant="headline" size="small">Basic Plan</Text>
+     *   </SelectCard>
+     *   <SelectCard id="premium" onChange={() => {}}>
+     *     <Text variant="headline" size="small">Premium Plan</Text>
+     *   </SelectCard>
+     * </SelectCard.Group>
+     */
     Group: import('react').ForwardRefExoticComponent<import('@servicetitan/hammer-react').SelectCardGroupProps & import('react').RefAttributes<HTMLInputElement>>;
 };

package/dist/components/SelectCard/SelectCardGroup.d.ts

@@ -1,3 +1,40 @@
 import { SelectCardGroupProps as CoreSelectCardGroupProps } from '@servicetitan/hammer-react';
+/**
+ * Props for the SelectCardGroup component
+ * @property {string} [ariaLabelledBy] - Associates the legend with content below
+ * @property {ReactNode} [children] - Child SelectCard components
+ * @property {CheckboxGroupProps["legend"]} legend - Sets the legend on the group
+ * @property {boolean} [required] - When true, sets "required" text in label. This does not enforce error when nothing is selected
+ * @property {(e?: ChangeEvent<HTMLInputElement>, state?: ISelectCardState) => void} onChange - Callback function that is triggered when the selection state changes
+ * @property {"single" | "multiple"} selectionMode - Sets how many cards the user can select, either 'single' (radio buttons) or 'multiple' (checkboxes)
+ * @extends CoreSelectCardGroupProps
+ */
 export type SelectCardGroupProps = CoreSelectCardGroupProps;
+/**
+ * SelectCardGroup component for managing groups of selectable cards.
+ *
+ * Features:
+ * - Manages selection state for multiple SelectCard components
+ * - Supports both single and multiple selection modes
+ * - Provides proper accessibility with legends and ARIA labels
+ * - Handles required field validation
+ * - Automatic radio button grouping for single selection
+ * - Context provider for child SelectCard components
+ * - Integrates with CheckboxGroup and RadioGroup for proper form semantics
+ * - Automatic tracking ID generation for analytics
+ *
+ * @example
+ * <SelectCardGroup
+ *   legend="Choose your plan"
+ *   selectionMode="single"
+ *   onChange={(e, state) => console.log('Selection changed:', state)}
+ * >
+ *   <SelectCard id="basic" onChange={() => {}}>
+ *     <Text variant="headline" size="small">Basic Plan</Text>
+ *   </SelectCard>
+ *   <SelectCard id="premium" onChange={() => {}}>
+ *     <Text variant="headline" size="small">Premium Plan</Text>
+ *   </SelectCard>
+ * </SelectCardGroup>
+ */
 export declare const SelectCardGroup: import('react').ForwardRefExoticComponent<CoreSelectCardGroupProps & import('react').RefAttributes<HTMLInputElement>>;

package/dist/components/SideNav/SideNav.d.ts

@@ -1,7 +1,44 @@
 import { SideNavProps as CoreSideNavProps, SideNavCollapsibleProps as CoreSideNavCollapsibleProps, SideNavGroupProps as CoreSideNavGroupProps, SideNavLinkProps as CoreSideNavLinkProps } from '@servicetitan/hammer-react';
-export type SideNavProps = CoreSideNavProps;
+import { DataTrackingId } from '../../types';
+/**
+ * Props for the SideNav component
+ */
+export type SideNavProps = CoreSideNavProps & DataTrackingId;
+/**
+ * Props for the SideNavCollapsible component
+ * @property {string} label - The label text displayed for the collapsible section
+ * @property {boolean} [defaultExpanded] - Initial expansion state for uncontrolled usage
+ * @property {boolean} [expanded] - Controlled expansion state
+ */
 export type SideNavCollapsibleProps = CoreSideNavCollapsibleProps;
+/**
+ * Props for the SideNavGroup component
+ * @property {string} label - The label text displayed for the navigation group
+ */
 export type SideNavGroupProps = CoreSideNavGroupProps;
+/**
+ * SideNavCollapsible component for expandable navigation sections within a SideNav.
+ *
+ * Features:
+ * - Expandable/collapsible navigation sections
+ * - Controlled and uncontrolled expansion states
+ * - Keyboard navigation with arrow keys for expansion
+ * - Automatic expansion when child links are active
+ * - Accessible with proper ARIA expanded states
+ * - Visual indicators for active children
+ * - Integration with SideNav keyboard navigation
+ * - Automatic tracking ID generation for analytics
+ *
+ * @example
+ * <SideNav.Collapsible label="Components">
+ *   <SideNav.Link id="button" href="/components/button">
+ *     Button
+ *   </SideNav.Link>
+ *   <SideNav.Link id="input" href="/components/input">
+ *     Input
+ *   </SideNav.Link>
+ * </SideNav.Collapsible>
+ */
 export declare const SideNavCollapsible: import('react').ForwardRefExoticComponent<Omit<Omit<import('react').DetailedHTMLProps<import('react').LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref">, "onClick"> & {
     label: string;
     onClick?: import('react').ComponentPropsWithoutRef<"button">["onClick"];
@@ -9,16 +46,149 @@ export declare const SideNavCollapsible: import('react').ForwardRefExoticCompone
     defaultExpanded?: boolean;
     expanded?: boolean;
 } & import('react').RefAttributes<HTMLLIElement>>;
+/**
+ * SideNavGroup component for grouping related navigation links within a SideNav.
+ *
+ * Features:
+ * - Groups related navigation links with labels
+ * - Accessible with proper ARIA labeling
+ * - Semantic grouping for screen readers
+ * - Consistent styling and spacing
+ * - Unique ID generation for accessibility
+ * - Automatic tracking ID generation for analytics
+ *
+ * @example
+ * <SideNav.Group label="Getting Started">
+ *   <SideNav.Link id="intro" href="/intro">
+ *     Introduction
+ *   </SideNav.Link>
+ *   <SideNav.Link id="installation" href="/installation">
+ *     Installation
+ *   </SideNav.Link>
+ * </SideNav.Group>
+ */
 export declare const SideNavGroup: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & {
     label: string;
 } & import('react').RefAttributes<HTMLLIElement>>;
+/**
+ * Props for SideNavLink with routing support
+ * @property {string} [href] - URL for the link (used when pathname is not provided)
+ * @property {string} pathname - Pathname for client-side routing
+ * @property {string} [search] - Optional search parameters for the URL
+ * @property {boolean} [active] - When true, marks the link as the current active page
+ * @property {boolean} [disabled] - When true, disables the link and prevents interaction
+ * @extends CoreSideNavLinkProps
+ */
 type SideNavLinkWithRoutingProps = CoreSideNavLinkProps & {
+    /**
+     * Pathname for client-side routing
+     */
     pathname: string;
+    /**
+     * Optional search parameters for the URL
+     */
     search?: string;
 };
+/**
+ * SideNavLink component for individual navigation links within a SideNav.
+ *
+ * Features:
+ * - Individual navigation links with active state support
+ * - Keyboard navigation integration with arrow keys
+ * - Focus management and tabindex handling
+ * - Accessible with proper ARIA attributes
+ * - Click and keyboard event handling
+ * - Disabled state support
+ * - Automatic active state tracking through context
+ * - Client-side routing support with pathname prop
+ * - Automatic tracking ID generation for analytics
+ *
+ * @example
+ * <SideNav.Link id="intro" href="/intro" active>
+ *   Introduction
+ * </SideNav.Link>
+ *
+ * <SideNav.Link id="intro" pathname="/intro" active>
+ *   Introduction (with routing)
+ * </SideNav.Link>
+ */
 export declare const SideNavLink: import('react').ForwardRefExoticComponent<(CoreSideNavLinkProps | SideNavLinkWithRoutingProps) & import('react').RefAttributes<HTMLLIElement>>;
-export declare const SideNav: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & import('@servicetitan/hammer-react').LayoutUtilProps & import('react').RefAttributes<HTMLDivElement>> & {
+/**
+ * SideNav component for creating hierarchical navigation menus.
+ *
+ * Features:
+ * - Hierarchical navigation structure with links, groups, and collapsible sections
+ * - Keyboard navigation support with arrow keys and focus management
+ * - Active state tracking for current page/section
+ * - Accessible with proper ARIA roles and labels
+ * - Automatic link recalculation for dynamic content
+ * - Context provider for child components
+ * - Layout utility props for positioning and spacing
+ * - Client-side routing integration
+ * - Automatic tracking ID generation for analytics
+ *
+ * @example
+ * <SideNav>
+ *   <SideNav.Group label="Getting Started">
+ *     <SideNav.Link id="intro" href="/intro" active>
+ *       Introduction
+ *     </SideNav.Link>
+ *     <SideNav.Link id="installation" href="/installation">
+ *       Installation
+ *     </SideNav.Link>
+ *   </SideNav.Group>
+ *   <SideNav.Collapsible label="Components">
+ *     <SideNav.Link id="button" href="/components/button">
+ *       Button
+ *     </SideNav.Link>
+ *     <SideNav.Link id="input" href="/components/input">
+ *       Input
+ *     </SideNav.Link>
+ *   </SideNav.Collapsible>
+ * </SideNav>
+ */
+export declare const SideNav: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & import('@servicetitan/hammer-react').LayoutUtilProps & DataTrackingId & import('react').RefAttributes<HTMLDivElement>> & {
+    /**
+     * SideNavLink component for individual navigation links.
+     *
+     * Features:
+     * - Individual navigation links with active state support
+     * - Keyboard navigation integration with arrow keys
+     * - Focus management and tabindex handling
+     * - Accessible with proper ARIA attributes
+     * - Click and keyboard event handling
+     * - Disabled state support
+     * - Client-side routing support with pathname prop
+     * - Automatic tracking ID generation for analytics
+     *
+     * @example
+     * <SideNav.Link id="intro" href="/intro" active>
+     *   Introduction
+     * </SideNav.Link>
+     */
     Link: import('react').ForwardRefExoticComponent<(CoreSideNavLinkProps | SideNavLinkWithRoutingProps) & import('react').RefAttributes<HTMLLIElement>>;
+    /**
+     * SideNavCollapsible component for expandable navigation sections.
+     *
+     * Features:
+     * - Expandable/collapsible navigation sections
+     * - Controlled and uncontrolled expansion states
+     * - Keyboard navigation with arrow keys for expansion
+     * - Automatic expansion when child links are active
+     * - Accessible with proper ARIA expanded states
+     * - Visual indicators for active children
+     * - Automatic tracking ID generation for analytics
+     *
+     * @example
+     * <SideNav.Collapsible label="Components">
+     *   <SideNav.Link id="button" href="/components/button">
+     *     Button
+     *   </SideNav.Link>
+     *   <SideNav.Link id="input" href="/components/input">
+     *     Input
+     *   </SideNav.Link>
+     * </SideNav.Collapsible>
+     */
     Collapsible: import('react').ForwardRefExoticComponent<Omit<Omit<import('react').DetailedHTMLProps<import('react').LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref">, "onClick"> & {
         label: string;
         onClick?: import('react').ComponentPropsWithoutRef<"button">["onClick"];
@@ -26,6 +196,26 @@ export declare const SideNav: import('react').ForwardRefExoticComponent<Omit<imp
         defaultExpanded?: boolean;
         expanded?: boolean;
     } & import('react').RefAttributes<HTMLLIElement>>;
+    /**
+     * SideNavGroup component for grouping related navigation links.
+     *
+     * Features:
+     * - Groups related navigation links with labels
+     * - Accessible with proper ARIA labeling
+     * - Semantic grouping for screen readers
+     * - Consistent styling and spacing
+     * - Automatic tracking ID generation for analytics
+     *
+     * @example
+     * <SideNav.Group label="Getting Started">
+     *   <SideNav.Link id="intro" href="/intro">
+     *     Introduction
+     *   </SideNav.Link>
+     *   <SideNav.Link id="installation" href="/installation">
+     *     Installation
+     *   </SideNav.Link>
+     * </SideNav.Group>
+     */
     Group: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & {
         label: string;
     } & import('react').RefAttributes<HTMLLIElement>>;

package/dist/components/SideNav/SideNavProvider.d.ts

@@ -1,8 +1,38 @@
 import { PropsWithChildren } from 'react';
+/**
+ * Interface for the side navigation context
+ */
 interface ISideNavContext {
+    /**
+     * Current location pathname for routing
+     */
     location: string;
+    /**
+     * Function to update the current location
+     */
     setLocation: (location: string) => void;
 }
+/**
+ * Custom hook for accessing the SideNav context.
+ * @returns The SideNav context with location and setLocation
+ */
 export declare const useSideNavContext: () => ISideNavContext;
+/**
+ * SideNavProvider component for managing routing state in SideNav components.
+ *
+ * Features:
+ * - Provides routing context for SideNav components
+ * - Manages current location state
+ * - Enables client-side routing without page reloads
+ * - Integrates with browser history API
+ * - Context provider for child components
+ *
+ * @example
+ * <SideNavProvider>
+ *   <SideNav>
+ *     <SideNav.Link pathname="/intro">Introduction</SideNav.Link>
+ *   </SideNav>
+ * </SideNavProvider>
+ */
 export declare const SideNavProvider: ({ children }: PropsWithChildren) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Skeleton/Skeleton.d.ts

@@ -1,23 +1,153 @@
 import { SkeletonTextProps as CoreSkeletonTextProps } from '@servicetitan/hammer-react';
+/**
+ * Props for the SkeletonCircle component
+ * @property {string} [diameter] - The diameter of the circular skeleton in CSS units
+ * @property {string} [aria-label] - Accessible label for screen readers
+ */
 export declare const SkeletonCircle: import('react').ForwardRefExoticComponent<Omit<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "children"> & Omit<import('@servicetitan/hammer-react').LayoutUtilProps, "flex" | "flexGrow" | "flexShrink" | "flexBasis"> & {
     diameter?: string;
 } & import('react').RefAttributes<HTMLDivElement>>;
+/**
+ * Props for the SkeletonPill component
+ * @property {string} [width] - The width of the pill skeleton in CSS units
+ * @property {string} [aria-label] - Accessible label for screen readers
+ */
 export declare const SkeletonPill: import('react').ForwardRefExoticComponent<Omit<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "children"> & Omit<import('@servicetitan/hammer-react').LayoutUtilProps, "flex" | "flexGrow" | "flexShrink" | "flexBasis"> & {
     width?: string;
 } & import('react').RefAttributes<HTMLDivElement>>;
+/**
+ * Props for the SkeletonRectangle component
+ * @property {string} [height] - The height of the rectangular skeleton in CSS units
+ * @property {string} [aria-label] - Accessible label for screen readers
+ */
 export declare const SkeletonRectangle: import('react').ForwardRefExoticComponent<Omit<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "children"> & Omit<import('@servicetitan/hammer-react').LayoutUtilProps, "flex" | "flexGrow" | "flexShrink" | "flexBasis"> & {
     height?: string;
 } & import('react').RefAttributes<HTMLDivElement>>;
+/**
+ * Props for the SkeletonText component
+ * @property {"body" | "headline"} [variant] - Text variant for body or headline skeleton
+ * @property {number} [rows] - Number of text lines to display (body variant only)
+ * @property {string} [aria-label] - Accessible label for screen readers
+ */
 export declare const SkeletonText: import('react').ForwardRefExoticComponent<CoreSkeletonTextProps & import('react').RefAttributes<HTMLDivElement>>;
+/**
+ * Skeleton component for displaying loading placeholders.
+ *
+ * Features:
+ * - Multiple skeleton variants for different content types
+ * - Animated pulsing effect for loading indication
+ * - Accessible with proper ARIA attributes
+ * - Layout utility props for positioning and spacing
+ * - Customizable styling through className and style props
+ * - Progress bar role for screen readers
+ * - Compound component pattern with dot exports
+ * - Automatic tracking ID generation for analytics
+ *
+ * @example
+ * <Skeleton.Text variant="body" rows={3} />
+ * <Skeleton.Circle diameter="40px" />
+ * <Skeleton.Rectangle height="100px" />
+ * <Skeleton.Pill width="120px" />
+ */
 export declare const Skeleton: {
+    /**
+     * SkeletonCircle component for displaying circular loading placeholders.
+     *
+     * Features:
+     * - Circular skeleton placeholder with customizable diameter
+     * - Animated pulsing effect for loading indication
+     * - Accessible with proper ARIA attributes
+     * - Layout utility props for positioning and spacing
+     * - Customizable styling through className and style props
+     * - Progress bar role for screen readers
+     * - Automatic tracking ID generation for analytics
+     *
+     * @example
+     * <Skeleton.Circle diameter="40px" />
+     *
+     * <Skeleton.Circle
+     *   diameter="60px"
+     *   className="custom-skeleton"
+     *   aria-label="Loading avatar"
+     * />
+     */
     Circle: import('react').ForwardRefExoticComponent<Omit<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "children"> & Omit<import('@servicetitan/hammer-react').LayoutUtilProps, "flex" | "flexGrow" | "flexShrink" | "flexBasis"> & {
         diameter?: string;
     } & import('react').RefAttributes<HTMLDivElement>>;
+    /**
+     * SkeletonPill component for displaying pill-shaped loading placeholders.
+     *
+     * Features:
+     * - Pill-shaped skeleton placeholder with customizable width
+     * - Animated pulsing effect for loading indication
+     * - Accessible with proper ARIA attributes
+     * - Layout utility props for positioning and spacing
+     * - Customizable styling through className and style props
+     * - Progress bar role for screen readers
+     * - Large border radius for pill appearance
+     * - Fixed height for consistent styling
+     * - Automatic tracking ID generation for analytics
+     *
+     * @example
+     * <Skeleton.Pill width="120px" />
+     *
+     * <Skeleton.Pill
+     *   width="8rem"
+     *   className="custom-skeleton"
+     *   aria-label="Loading tag"
+     * />
+     */
     Pill: import('react').ForwardRefExoticComponent<Omit<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "children"> & Omit<import('@servicetitan/hammer-react').LayoutUtilProps, "flex" | "flexGrow" | "flexShrink" | "flexBasis"> & {
         width?: string;
     } & import('react').RefAttributes<HTMLDivElement>>;
+    /**
+     * SkeletonRectangle component for displaying rectangular loading placeholders.
+     *
+     * Features:
+     * - Rectangular skeleton placeholder with customizable height
+     * - Animated pulsing effect for loading indication
+     * - Accessible with proper ARIA attributes
+     * - Layout utility props for positioning and spacing
+     * - Customizable styling through className and style props
+     * - Progress bar role for screen readers
+     * - Medium border radius for consistent styling
+     * - Automatic tracking ID generation for analytics
+     *
+     * @example
+     * <Skeleton.Rectangle height="100px" />
+     *
+     * <Skeleton.Rectangle
+     *   height="2rem"
+     *   className="custom-skeleton"
+     *   aria-label="Loading image"
+     * />
+     */
     Rectangle: import('react').ForwardRefExoticComponent<Omit<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "children"> & Omit<import('@servicetitan/hammer-react').LayoutUtilProps, "flex" | "flexGrow" | "flexShrink" | "flexBasis"> & {
         height?: string;
     } & import('react').RefAttributes<HTMLDivElement>>;
+    /**
+     * SkeletonText component for displaying text loading placeholders.
+     *
+     * Features:
+     * - Text skeleton placeholder with body and headline variants
+     * - Configurable number of rows for body variant
+     * - Animated pulsing effect for loading indication
+     * - Accessible with proper ARIA attributes
+     * - Layout utility props for positioning and spacing
+     * - Customizable styling through className and style props
+     * - Progress bar role for screen readers
+     * - Different line heights for body vs headline variants
+     * - Last line shorter for body variant to simulate natural text
+     * - Automatic tracking ID generation for analytics
+     *
+     * @example
+     * <Skeleton.Text variant="body" rows={3} />
+     *
+     * <Skeleton.Text
+     *   variant="headline"
+     *   className="custom-skeleton"
+     *   aria-label="Loading title"
+     * />
+     */
     Text: import('react').ForwardRefExoticComponent<CoreSkeletonTextProps & import('react').RefAttributes<HTMLDivElement>>;
 };

package/dist/components/Spinner/Spinner.d.ts

@@ -1,5 +1,30 @@
 import { SpinnerProps as CoreSpinnerProps } from '@servicetitan/hammer-react';
+/**
+ * Props for the Spinner component
+ * @property {boolean} [inherit] - When true, the spinner inherits the current text color instead of using the default primary background color
+ */
 export type SpinnerProps = CoreSpinnerProps;
+/**
+ * A loading spinner component that displays an animated circular indicator.
+ *
+ * The Spinner component provides a visual indication that content is loading or processing.
+ * It renders as a circular animation that continuously rotates to show activity.
+ * This is an anvil2 wrapper around the hammer-react Spinner component with additional tracking capabilities.
+ *
+ * Features:
+ * - Animated circular loading indicator
+ * - Configurable color inheritance
+ * - Accessible with proper ARIA attributes
+ * - Customizable styling through className and style props
+ * - Forwarded ref support
+ * - Anvil2 tracking integration
+ * - Automatic data-anv attribute for analytics
+ *
+ * @example
+ * <Spinner />
+ *
+ * <Spinner inherit />
+ */
 export declare const Spinner: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
     inherit?: boolean;
 } & import('react').RefAttributes<HTMLSpanElement>>;

package/dist/components/SrOnly/SrOnly.d.ts

@@ -1,2 +1,21 @@
 import { SrOnly as CoreSrOnly } from '@servicetitan/hammer-react';
+/**
+ * Screen reader only component for providing accessible content that is visually hidden.
+ *
+ * Features:
+ * - Visually hidden content that remains accessible to screen readers
+ * - Preserves all standard span element functionality
+ * - Supports custom styling and className overrides
+ * - Maintains proper semantic structure
+ * - Essential for accessibility compliance
+ * - Works with all screen reader technologies
+ * - Supports all standard HTML span attributes
+ * - Automatic tracking ID generation for analytics
+ *
+ * @example
+ * <div>
+ *   <span aria-hidden="true">$100</span>
+ *   <SrOnly>One hundred dollars</SrOnly>
+ * </div>
+ */
 export declare function SrOnly(props: Parameters<typeof CoreSrOnly>[0]): import("react/jsx-runtime").JSX.Element;