@servicetitan/anvil2 1.37.2 → 1.38.0

package/dist/components/ButtonLink/ButtonLink.d.ts

@@ -1,6 +1,36 @@
 import { ButtonLinkProps as CoreButtonLinkProps } from '@servicetitan/hammer-react';
 import { DataTrackingId } from '../../types/DataTrackingId';
+/**
+ * Props for the ButtonLink component
+ * @property {ButtonAppearance} [appearance] - The visual variant of the button link
+ * @property {"small" | "medium" | "large"} [size] - The size of the button link
+ * @property {IconProps["svg"] | { after: IconProps["svg"] } | { before: IconProps["svg"] }} [icon] - The icons of the button link
+ * @property {boolean} [loading] - The loading state of the button link
+ * @extends CoreButtonLinkProps
+ * @extends DataTrackingId
+ */
 export type ButtonLinkProps = CoreButtonLinkProps & DataTrackingId;
+/**
+ * ButtonLink component for creating clickable links that look like buttons.
+ *
+ * Features:
+ * - Multiple visual appearances (primary, secondary, ghost, danger variants)
+ * - Three size options (small, medium, large)
+ * - Loading state with spinner animation
+ * - Icon support (before, after, or icon-only)
+ * - Full accessibility support with proper ARIA attributes
+ * - Supports layout utilities for positioning and spacing
+ * - Keyboard navigation support (Space and Enter keys)
+ * - Automatic disabled state when loading
+ * - Prevents navigation when disabled or loading
+ * - Flexible content with text and/or icons
+ * - Automatic tracking ID generation for analytics
+ *
+ * @example
+ * <ButtonLink href="/dashboard" appearance="primary" size="medium">
+ *   Go to Dashboard
+ * </ButtonLink>
+ */
 export declare const ButtonLink: import('react').ForwardRefExoticComponent<import('@servicetitan/hammer-react').LayoutUtilProps & Omit<import('react').DetailedHTMLProps<import('react').AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> & {
     disabled?: boolean;
     appearance?: import('@servicetitan/hammer-react').ButtonAppearance;

package/dist/components/ButtonToggle/ButtonToggle.d.ts

@@ -1,6 +1,38 @@
 import { ButtonToggleProps as CoreButtonToggleProps } from '@servicetitan/hammer-react';
 import { DataTrackingId } from '../../types/DataTrackingId';
+/**
+ * Props for the ButtonToggle component
+ * @property {boolean} [defaultChecked] - The default pressed(selected) state of the toggle button
+ * @property {boolean} [checked] - The controlled pressed(selected) state of the toggle button
+ * @property {string} [value] - The value of the toggle button
+ * @property {(e: MouseEvent<HTMLButtonElement> | KeyboardEvent<HTMLButtonElement>, state: ButtonToggleState) => void} [onChange] - Callback for when pressed(selected) changes
+ * @extends CoreButtonToggleProps
+ * @extends DataTrackingId
+ */
 export type ButtonToggleProps = CoreButtonToggleProps & DataTrackingId;
+/**
+ * ButtonToggle component for creating toggleable button states.
+ *
+ * Features:
+ * - Supports both controlled and uncontrolled state management
+ * - Toggle state with pressed/selected visual feedback
+ * - Full accessibility support with aria-pressed attribute
+ * - Callback support for state changes
+ * - Supports layout utilities for positioning and spacing
+ * - Inherits all button features except appearance and loading
+ * - Flexible content with text and/or icons
+ * - Keyboard interaction support
+ * - Value association for form-like behavior
+ * - Automatic tracking ID generation for analytics
+ *
+ * @example
+ * <ButtonToggle
+ *   defaultChecked={false}
+ *   onChange={(e, state) => console.log('Toggle state:', state.pressed)}
+ * >
+ *   Toggle Me
+ * </ButtonToggle>
+ */
 export declare const ButtonToggle: import('react').ForwardRefExoticComponent<Omit<import('@servicetitan/hammer-react').ButtonProps, "appearance" | "loading"> & {
     defaultChecked?: boolean;
     checked?: boolean;

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

@@ -1,4 +1,20 @@
 import { CalendarProps as CoreCalendarProps, CalendarContextProps as CoreCalendarContextProps, CalendarNowProps as CoreCalendarNowProps, CalendarMonthProps as CoreCalendarMonthProps, CalendarNextProps as CoreCalendarNextProps, CalendarPrevProps as CoreCalendarPrevProps, CalendarMonthButtonProps as CoreCalendarMonthButtonProps, CalendarYearButtonProps as CoreCalendarYearButtonProps } from '@servicetitan/hammer-react';
+/**
+ * Props for the Calendar component
+ * @property {string} [value] - The selected date value for controlled mode
+ * @property {{ start?: string; end?: string }} [defaultValue] - The default date value for uncontrolled mode
+ * @property {string | null} [focusedDate] - The focused date for determining current month/year view
+ * @property {string | null} [defaultFocusedDate] - The default focused date
+ * @property {string} [minDate] - The minimum selectable date
+ * @property {string} [maxDate] - The maximum selectable date
+ * @property {string[]} [unavailableDates] - Dates that are not selectable (deprecated)
+ * @property {{ daysOfWeek?: number[]; dates?: string[] }} [unavailable] - Unavailable dates and days of week
+ * @property {Locale} [locale] - The locale for date formatting
+ * @property {IanaZone} [defaultTimeZone] - The timezone for date calculations
+ * @property {"Sunday" | "Monday"} [startDay] - The day to start the week on
+ * @property {boolean} [range] - Whether to enable date range selection
+ * @property {(data: { value: CalendarValue | CalendarRangeValue }) => void} [onSelection] - Selection change handler
+ */
 export type CalendarProps = CoreCalendarProps;
 export type CalendarContextProps = CoreCalendarContextProps;
 export type CalendarNowProps = CoreCalendarNowProps;
@@ -15,13 +31,111 @@ export declare const CalendarNext: import('react').ForwardRefExoticComponent<imp
 export declare const CalendarPrev: import('react').ForwardRefExoticComponent<import('@servicetitan/hammer-react').ButtonProps & import('react').RefAttributes<HTMLButtonElement>>;
 export declare const CalendarMonthButton: import('react').ForwardRefExoticComponent<CoreCalendarMonthButtonProps & import('react').RefAttributes<HTMLButtonElement>>;
 export declare const CalendarYearButton: import('react').ForwardRefExoticComponent<CoreCalendarYearButtonProps & import('react').RefAttributes<HTMLButtonElement>>;
+/**
+ * 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<CoreCalendarProps & 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;
     } & Omit<import('@servicetitan/hammer-react').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('@servicetitan/hammer-react').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('@servicetitan/hammer-react').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<CoreCalendarMonthButtonProps & 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<CoreCalendarYearButtonProps & import('react').RefAttributes<HTMLButtonElement>>;
 };

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

@@ -1,5 +1,29 @@
 import { CardProps as CoreCardProps } from '@servicetitan/hammer-react';
+/**
+ * Props for the Card component
+ * @property {"strong" | "stronger"} [background] - The background variant of the card
+ * @property {"0" | "xsmall" | "small" | "medium" | "large"} [padding] - The padding size of the card
+ * @extends CoreCardProps
+ */
 export type CardProps = CoreCardProps;
+/**
+ * Card component for displaying content in a contained, elevated container.
+ *
+ * Features:
+ * - Configurable padding sizes (0, xsmall, small, medium, large)
+ * - Background variants (strong, stronger) for visual emphasis
+ * - Responsive design with automatic layout utilities
+ * - Consistent border radius and styling
+ * - Support for all standard div props
+ * - Layout utility props for positioning and spacing
+ * - Data tracking integration for analytics
+ *
+ * @example
+ * <Card padding="large" background="strong">
+ *   <h2>Card Title</h2>
+ *   <p>Card content goes here</p>
+ * </Card>
+ */
 export declare const Card: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import('@servicetitan/hammer-react').LayoutUtilProps & {
     background?: "strong" | "stronger";
     padding?: Extract<import('@servicetitan/hammer-react').Size, "0" | "xsmall" | "small" | "medium" | "large">;

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

@@ -1,12 +1,89 @@
 import { CheckboxProps as CoreCheckboxProps, CheckboxGroupProps as CoreCheckboxGroupProps } from '@servicetitan/hammer-react';
 import { DataTrackingId } from '../../types/DataTrackingId';
+/**
+ * Props for the Checkbox component
+ * @property {boolean} [checked] - Controlled state
+ * @property {boolean} [defaultChecked] - Uncontrolled state
+ * @property {boolean} [indeterminate] - Indeterminate state of the checkbox
+ * @property {boolean} [error] - Error state for the checkbox
+ * @property {string | ReactElement} [label] - Label for checkbox
+ * @property {string} [description] - Helper text description
+ * @property {Object} [icons] - Icon overrides for different states
+ * @property {(e?: ChangeEvent<HTMLInputElement>, state?: CheckboxState) => void} [onChange] - Change callback
+ * @property {(e?: MouseEvent<HTMLInputElement>, state?: CheckboxState) => void} [onClick] - Click callback
+ * @extends Omit<CoreCheckboxProps, "hideCheckbox">
+ * @extends DataTrackingId
+ */
 export type CheckboxProps = Omit<CoreCheckboxProps, "hideCheckbox"> & DataTrackingId;
 export type CheckboxGroupProps = CoreCheckboxGroupProps;
+/**
+ * CheckboxGroup component for grouping related checkboxes together.
+ *
+ * Features:
+ * - Groups multiple checkboxes with a common legend
+ * - Supports required field indication
+ * - Optional helper text and descriptions
+ * - Full accessibility support with fieldset/legend
+ * - Focus management for keyboard navigation
+ * - Layout utility props for positioning and spacing
+ * - Flexible layout direction (row/column)
+ * - Screen reader support with hidden labels
+ * - Automatic tracking ID generation for analytics
+ *
+ * @example
+ * <CheckboxGroup legend="Select your interests" required>
+ *   <Checkbox label="Technology" />
+ *   <Checkbox label="Sports" />
+ *   <Checkbox label="Music" />
+ * </CheckboxGroup>
+ */
 export declare const CheckboxGroup: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').FieldsetHTMLAttributes<HTMLFieldSetElement>, HTMLFieldSetElement>, "ref"> & import('@servicetitan/hammer-react').LayoutUtilProps & Omit<import('@servicetitan/hammer-react').FieldLabelProps, "labelProps"> & {
     required?: boolean;
     legend: string | import('react').ReactElement;
 } & import('react').RefAttributes<HTMLFieldSetElement>>;
+/**
+ * Checkbox component for selecting one or more options from a list.
+ *
+ * Features:
+ * - Controlled and uncontrolled state management
+ * - Indeterminate state for partial selections
+ * - Customizable icons for different states
+ * - Error state with accessibility support
+ * - Optional helper text and descriptions
+ * - Full accessibility support with ARIA attributes
+ * - Keyboard navigation support
+ * - Layout utility props for positioning and spacing
+ * - Automatic tracking ID generation for analytics
+ *
+ * @example
+ * <Checkbox
+ *   label="Accept terms and conditions"
+ *   onChange={(e, state) => console.log('Checked:', state.checked)}
+ *   required
+ * />
+ */
 export declare const Checkbox: import('react').ForwardRefExoticComponent<Omit<CoreCheckboxProps, "hideCheckbox"> & DataTrackingId & import('react').RefAttributes<HTMLInputElement>> & {
+    /**
+     * CheckboxGroup component for grouping related checkboxes together.
+     *
+     * Features:
+     * - Groups multiple checkboxes with a common legend
+     * - Supports required field indication
+     * - Optional helper text and descriptions
+     * - Full accessibility support with fieldset/legend
+     * - Focus management for keyboard navigation
+     * - Layout utility props for positioning and spacing
+     * - Flexible layout direction (row/column)
+     * - Screen reader support with hidden labels
+     * - Automatic tracking ID generation for analytics
+     *
+     * @example
+     * <CheckboxGroup legend="Select your interests" required>
+     *   <Checkbox label="Technology" />
+     *   <Checkbox label="Sports" />
+     *   <Checkbox label="Music" />
+     * </CheckboxGroup>
+     */
     Group: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').FieldsetHTMLAttributes<HTMLFieldSetElement>, HTMLFieldSetElement>, "ref"> & import('@servicetitan/hammer-react').LayoutUtilProps & Omit<import('@servicetitan/hammer-react').FieldLabelProps, "labelProps"> & {
         required?: boolean;
         legend: string | import('react').ReactElement;

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

@@ -1,6 +1,40 @@
 import { ChipProps as CoreChipProps } from '@servicetitan/hammer-react';
 import { DataTrackingId } from '../../types/DataTrackingId';
+/**
+ * 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 {(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
+ * @extends CoreChipProps
+ * @extends DataTrackingId
+ */
 export type ChipProps = CoreChipProps & DataTrackingId;
+/**
+ * Chip component for displaying compact information or tags.
+ *
+ * Features:
+ * - Configurable sizes (small, medium)
+ * - Custom color support with automatic contrast calculation
+ * - Optional click handler for interactive chips
+ * - Optional close button for removable chips
+ * - Text wrapping support for long labels
+ * - Full accessibility support with ARIA attributes
+ * - Keyboard navigation (Enter to click, Delete/Backspace to close)
+ * - Theme-aware color adaptation
+ * - Layout utility props for positioning and spacing
+ * - Automatic tracking ID generation for analytics
+ *
+ * @example
+ * <Chip
+ *   label="JavaScript"
+ *   color="#f7df1e"
+ *   onClose={(e) => console.log('Chip removed')}
+ *   onClick={(e) => console.log('Chip clicked')}
+ * />
+ */
 export declare const Chip: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & Omit<import('@servicetitan/hammer-react').LayoutUtilProps, "flex" | "flexGrow" | "flexShrink" | "flexBasis"> & {
     label: string;
     size?: Extract<import('@servicetitan/hammer-react').Size, "small" | "medium">;