@servicetitan/anvil2 1.37.2 → 1.38.0

package/dist/components/Details/Details.d.ts

@@ -1,13 +1,81 @@
 import { DetailsProps as CoreDetailsProps, DetailsSummaryProps as CoreDetailsSummaryProps, DetailsContentProps as CoreDetailsContentProps } from '@servicetitan/hammer-react';
 import { DataTrackingId } from '../../types/DataTrackingId';
+/**
+ * Props for the Details component
+ * @property {boolean} [expanded] - Determines the controlled expanded state of the details. Use this to make the details expanded state controlled.
+ * @default false
+ * @property {boolean} [defaultExpanded] - Determines the default expanded state of the details. Use this to make the details expanded state uncontrolled.
+ * @default false
+ */
 export type DetailsProps = CoreDetailsProps;
+/**
+ * Props for the DetailsSummary component
+ * @extends DataTrackingId
+ */
 export type DetailsSummaryProps = CoreDetailsSummaryProps & DataTrackingId;
+/**
+ * Props for the DetailsContent component
+ * @property {string | number} [height] - Fixed height for the content area
+ * @property {string | number} [maxHeight] - Maximum height for the content area
+ */
 export type DetailsContentProps = CoreDetailsContentProps;
+/**
+ * DetailsSummary component for the clickable header of a Details section.
+ *
+ * Features:
+ * - Clickable button that toggles the Details expanded state
+ * - Automatic ARIA attributes for accessibility
+ * - Includes animated arrow indicator
+ * - Supports custom onClick handlers
+ * - Keyboard navigation support (Enter, Space)
+ * - Styled with consistent typography and spacing
+ * - Automatic tracking ID generation for analytics
+ *
+ * @example
+ * <Details.Summary onClick={() => console.log('Summary clicked')}>
+ *   Click to expand content
+ * </Details.Summary>
+ */
 export declare const DetailsSummary: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & DataTrackingId & import('react').RefAttributes<HTMLButtonElement>>;
+/**
+ * DetailsContent component for the expandable content area of a Details section.
+ *
+ * Features:
+ * - Expandable and collapsible content area
+ * - Smooth animations for height transitions
+ * - Configurable height and maxHeight constraints
+ * - Automatic overflow handling when height is constrained
+ * - Proper ARIA associations with the summary
+ * - Responsive design with flexible layout
+ *
+ * @example
+ * <Details.Content maxHeight={300}>
+ *   <p>This content will be constrained to 300px max height</p>
+ * </Details.Content>
+ */
 export declare const DetailsContent: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     height?: string | number;
     maxHeight?: string | number;
 } & import('react').RefAttributes<HTMLDivElement>>;
+/**
+ * Details component for creating expandable/collapsible content sections.
+ *
+ * Features:
+ * - Expandable and collapsible content sections
+ * - Controlled and uncontrolled state management
+ * - Accessible with proper ARIA attributes
+ * - Smooth animations for expand/collapse
+ * - Keyboard navigation support
+ * - Layout utility props for positioning and spacing
+ * - Compound component pattern with Summary, Content, and Arrow sub-components
+ * - Automatic tracking ID generation for analytics
+ *
+ * @example
+ * <Details defaultExpanded>
+ *   <Details.Summary>Click to expand</Details.Summary>
+ *   <Details.Content>This content is now visible</Details.Content>
+ * </Details>
+ */
 export declare const Details: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import('@servicetitan/hammer-react').LayoutUtilProps & {
     expanded?: boolean;
     defaultExpanded?: boolean;

package/dist/components/Dialog/Dialog.d.ts

@@ -1,16 +1,135 @@
 import { DialogProps as CoreDialogProps, DialogHeaderProps as CoreDialogHeaderProps, DialogFooterProps as CoreDialogFooterProps, DialogContentProps as CoreDialogContentProps, DialogCancelButtonProps as CoreDialogCancelButtonProps } from '@servicetitan/hammer-react';
 import { DataTrackingId } from '../../types/DataTrackingId';
+/**
+ * Props for the Dialog component
+ * @property {boolean} [fullScreen] - Whether the dialog should be displayed in fullscreen mode
+ * @default false
+ * @property {"medium" | "large"} [size] - The size of the dialog
+ * @default medium
+ * @property {boolean} [open] - Whether the dialog is open
+ * @default false
+ * @property {() => void} [onClose] - Callback fired when the dialog is closed
+ * @property {() => void} [onOpen] - Callback fired when the dialog opens (deprecated)
+ * @property {(open: boolean) => void} [onOpenChange] - Callback fired when the dialog open state changes (deprecated)
+ * @property {boolean} [enableScrollChaining] - Enables scroll chaining
+ * @property {boolean} [disableCloseOnEscape] - Whether to disable closing on escape key
+ * @property {boolean} [disableCloseOnClickOutside] - Whether to disable closing on click outside
+ * @property {() => void} [onOpenAnimationStart] - Callback fired when open animation starts
+ * @property {() => void} [onOpenAnimationComplete] - Callback fired when open animation completes
+ * @property {() => void} [onCloseAnimationStart] - Callback fired when close animation starts
+ * @property {() => void} [onCloseAnimationComplete] - Callback fired when close animation completes
+ */
 export type DialogProps = CoreDialogProps;
+/**
+ * Props for the DialogHeader component
+ * @extends DataTrackingId
+ */
 export type DialogHeaderProps = CoreDialogHeaderProps & DataTrackingId;
+/**
+ * Props for the DialogFooter component
+ * @property {boolean} [sticky] - Whether the footer should be sticky
+ * @default false
+ */
 export type DialogFooterProps = CoreDialogFooterProps;
+/**
+ * Props for the DialogContent component
+ */
 export type DialogContentProps = CoreDialogContentProps;
+/**
+ * Props for the DialogCancelButton component
+ * @extends DataTrackingId
+ */
 export type DialogCancelButtonProps = CoreDialogCancelButtonProps & DataTrackingId;
+/**
+ * DialogHeader component for the header section of a Dialog.
+ *
+ * Features:
+ * - Displays dialog title with headline typography
+ * - Includes close button with proper accessibility
+ * - Sticky positioning for long content
+ * - Consistent spacing and styling
+ * - Automatic focus management
+ * - Automatic tracking ID generation for analytics
+ *
+ * @example
+ * <Dialog.Header>Confirm Delete</Dialog.Header>
+ */
 export declare const DialogHeader: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & DataTrackingId & import('react').RefAttributes<HTMLDivElement>>;
+/**
+ * DialogFooter component for the footer section of a Dialog.
+ *
+ * Features:
+ * - Container for dialog action buttons
+ * - Optional sticky positioning for long content
+ * - Consistent spacing and alignment
+ * - Right-aligned button layout by default
+ * - Flexible content area for custom layouts
+ *
+ * @example
+ * <Dialog.Footer sticky>
+ *   <Dialog.CancelButton>Cancel</Dialog.CancelButton>
+ *   <Button appearance="primary">Save</Button>
+ * </Dialog.Footer>
+ */
 export declare const DialogFooter: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & {
     sticky?: boolean;
 } & import('react').RefAttributes<HTMLDivElement>>;
+/**
+ * DialogContent component for the main content area of a Dialog.
+ *
+ * Features:
+ * - Main content container for dialog body
+ * - Flexible height with overflow handling
+ * - Consistent padding and spacing
+ * - Responsive design
+ * - Proper content scrolling for long content
+ *
+ * @example
+ * <Dialog.Content>
+ *   <p>This is the main content of the dialog.</p>
+ * </Dialog.Content>
+ */
 export declare const DialogContent: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+/**
+ * DialogCancelButton component for cancel/close actions in a Dialog.
+ *
+ * Features:
+ * - Button that automatically closes the dialog when clicked
+ * - Extends all Button component props and functionality
+ * - Proper accessibility with close dialog semantics
+ * - Automatic focus management
+ * - Consistent styling with other dialog elements
+ * - Automatic tracking ID generation for analytics
+ *
+ * @example
+ * <Dialog.CancelButton appearance="ghost">Cancel</Dialog.CancelButton>
+ */
 export declare const DialogCancelButton: import('react').ForwardRefExoticComponent<DialogCancelButtonProps & import('react').RefAttributes<HTMLButtonElement>>;
+/**
+ * Dialog component for creating modal dialogs and overlays.
+ *
+ * Features:
+ * - Modal dialog with backdrop overlay
+ * - Controlled and uncontrolled open state
+ * - Smooth open/close animations
+ * - Keyboard navigation and focus management
+ * - Escape key and click outside to close
+ * - Multiple size variants (medium, large, fullscreen)
+ * - Scroll chaining support
+ * - Toast integration for notifications
+ * - Compound component pattern with Header, Footer, Content, and CancelButton sub-components
+ * - Automatic tracking ID generation for analytics
+ *
+ * @example
+ * <Dialog open={isOpen} onClose={() => setIsOpen(false)}>
+ *   <Dialog.Header>Confirm Action</Dialog.Header>
+ *   <Dialog.Content>Are you sure you want to proceed?</Dialog.Content>
+ *   <Dialog.Footer>
+ *     <Dialog.CancelButton>Cancel</Dialog.CancelButton>
+ *     <Button appearance="primary">Confirm</Button>
+ *   </Dialog.Footer>
+ * </Dialog>
+ */
 export declare const Dialog: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').DialogHTMLAttributes<HTMLDialogElement>, HTMLDialogElement>, "ref"> & import('@servicetitan/hammer-react/dist/hooks/useDialogTransitionStates').DialogTransitionStateEffects & import('@servicetitan/hammer-react').DisableCloseOnEscapeOrClickProps & {
     fullScreen?: boolean;
     size?: Extract<import('@servicetitan/hammer-react').Size, "medium" | "large">;
@@ -20,10 +139,69 @@ export declare const Dialog: import('react').ForwardRefExoticComponent<Omit<impo
     onOpenChange?: (open: boolean) => void;
     enableScrollChaining?: boolean;
 } & import('react').RefAttributes<HTMLDialogElement>> & {
+    /**
+     * DialogHeader component for the header section of a Dialog.
+     *
+     * Features:
+     * - Displays dialog title with headline typography
+     * - Includes close button with proper accessibility
+     * - Sticky positioning for long content
+     * - Consistent spacing and styling
+     * - Automatic focus management
+     * - Automatic tracking ID generation for analytics
+     *
+     * @example
+     * <Dialog.Header>Confirm Delete</Dialog.Header>
+     */
     Header: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & DataTrackingId & import('react').RefAttributes<HTMLDivElement>>;
+    /**
+     * DialogFooter component for the footer section of a Dialog.
+     *
+     * Features:
+     * - Container for dialog action buttons
+     * - Optional sticky positioning for long content
+     * - Consistent spacing and alignment
+     * - Right-aligned button layout by default
+     * - Flexible content area for custom layouts
+     *
+     * @example
+     * <Dialog.Footer sticky>
+     *   <Dialog.CancelButton>Cancel</Dialog.CancelButton>
+     *   <Button appearance="primary">Save</Button>
+     * </Dialog.Footer>
+     */
     Footer: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & {
         sticky?: boolean;
     } & import('react').RefAttributes<HTMLDivElement>>;
+    /**
+     * DialogContent component for the main content area of a Dialog.
+     *
+     * Features:
+     * - Main content container for dialog body
+     * - Flexible height with overflow handling
+     * - Consistent padding and spacing
+     * - Responsive design
+     * - Proper content scrolling for long content
+     *
+     * @example
+     * <Dialog.Content>
+     *   <p>This is the main content of the dialog.</p>
+     * </Dialog.Content>
+     */
     Content: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+    /**
+     * DialogCancelButton component for cancel/close actions in a Dialog.
+     *
+     * Features:
+     * - Button that automatically closes the dialog when clicked
+     * - Extends all Button component props and functionality
+     * - Proper accessibility with close dialog semantics
+     * - Automatic focus management
+     * - Consistent styling with other dialog elements
+     * - Automatic tracking ID generation for analytics
+     *
+     * @example
+     * <Dialog.CancelButton appearance="ghost">Cancel</Dialog.CancelButton>
+     */
     CancelButton: import('react').ForwardRefExoticComponent<DialogCancelButtonProps & import('react').RefAttributes<HTMLButtonElement>>;
 };

package/dist/components/Divider/Divider.d.ts

@@ -1,5 +1,29 @@
 import { DividerProps as CoreDividerProps } from '@servicetitan/hammer-react';
+/**
+ * Props for the Divider component
+ * @property {"start" | "center" | "end"} [alignContent] - Controls the alignment of content within the divider
+ * @property {"0" | "half" | "1" | "2" | "3" | "4" | "5" | "6" | "8" | "12" | 0 | 0.5 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 12} [spacing] - Controls the spacing around the divider
+ * @property {boolean} [vertical] - When true, renders the divider vertically instead of horizontally
+ */
 export type DividerProps = CoreDividerProps;
+/**
+ * Divider component for creating visual separators between content sections.
+ *
+ * Features:
+ * - Horizontal and vertical divider orientations
+ * - Optional content display within the divider
+ * - Three content alignment options (start, center, end)
+ * - Configurable spacing with predefined size tokens
+ * - Supports layout utilities for positioning and spacing
+ * - Flexible content placement with automatic line positioning
+ * - Responsive design that adapts to container width
+ * - Automatic tracking ID generation for analytics
+ *
+ * @example
+ * <Divider spacing="2" alignContent="center">
+ *   <b>Section Title</b>
+ * </Divider>
+ */
 export declare const Divider: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import('@servicetitan/hammer-react').LayoutUtilProps & {
     alignContent?: "start" | "center" | "end";
     spacing?: "0" | "half" | "1" | "2" | "3" | "4" | "5" | "6" | "8" | "12" | 0 | 0.5 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 12;

package/dist/components/Drawer/Drawer.d.ts

@@ -1,16 +1,145 @@
 import { DrawerProps as CoreDrawerProps, DrawerCancelButtonProps as CoreDrawerCancelButtonProps, DrawerFooterProps as CoreDrawerFooterProps, DrawerHeaderProps as CoreDrawerHeaderProps, DrawerContentProps as CoreDrawerContentProps } from '@servicetitan/hammer-react';
 import { DataTrackingId } from '../../types/DataTrackingId';
+/**
+ * Props for the Drawer component
+ * @property {"medium" | "large"} [size] - The size of the drawer
+ * @property {boolean} [open] - Controls whether the drawer is open or closed
+ * @property {() => void} [onClose] - Callback function called after the drawer is animated closed
+ * @property {() => void} [onOpen] - Callback function called when the drawer opens (deprecated)
+ * @property {(open: boolean) => void} [onOpenChange] - Callback fired when the drawer open state changes (deprecated)
+ * @property {boolean} [enableScrollChaining] - Enables scroll chaining behavior
+ * @property {boolean} [disableCloseOnEscape] - Whether to disable closing on escape key
+ * @property {boolean} [disableCloseOnClickOutside] - Whether to disable closing on click outside
+ * @property {() => void} [onOpenAnimationStart] - Callback fired when open animation starts
+ * @property {() => void} [onOpenAnimationComplete] - Callback fired when open animation completes
+ * @property {() => void} [onCloseAnimationStart] - Callback fired when close animation starts
+ * @property {() => void} [onCloseAnimationComplete] - Callback fired when close animation completes
+ */
 export type DrawerProps = CoreDrawerProps;
+/**
+ * Props for the DrawerCancelButton component
+ * @property {string} [appearance] - The visual appearance of the button
+ * @property {string} [size] - The size of the button
+ * @property {string} [type] - The type of the button
+ */
 export type DrawerCancelButtonProps = CoreDrawerCancelButtonProps & DataTrackingId;
+/**
+ * Props for the DrawerFooter component
+ * @property {boolean} [sticky] - When true, the footer will stick to the bottom of the drawer
+ */
 export type DrawerFooterProps = CoreDrawerFooterProps;
+/**
+ * Props for the DrawerHeader component
+ * @property {ReactNode} children - The content to be displayed in the header
+ */
 export type DrawerHeaderProps = CoreDrawerHeaderProps & DataTrackingId;
+/**
+ * Props for the DrawerContent component
+ */
 export type DrawerContentProps = CoreDrawerContentProps;
+/**
+ * A button component that automatically closes the drawer when clicked.
+ *
+ * Features:
+ * - Automatically closes the drawer when clicked
+ * - Extends Button component functionality
+ * - Accessible with proper ARIA attributes
+ * - Consistent styling with the design system
+ * - Supports all standard button props
+ * - Proper focus management
+ * - Can be used anywhere within the drawer context
+ * - Automatic tracking ID generation for analytics
+ *
+ * @example
+ * <Drawer.CancelButton appearance="ghost" size="small">
+ *   Cancel
+ * </Drawer.CancelButton>
+ */
 export declare const DrawerCancelButton: import('react').ForwardRefExoticComponent<DrawerCancelButtonProps & import('react').RefAttributes<HTMLButtonElement>>;
+/**
+ * Footer component for the drawer that displays action buttons and controls.
+ *
+ * Features:
+ * - Flexible layout for action buttons and controls
+ * - Optional sticky positioning at the bottom
+ * - Proper semantic HTML structure
+ * - Accessible with proper ARIA attributes
+ * - Consistent styling with the design system
+ * - Supports all standard footer element props
+ * - Responsive design that adapts to content
+ *
+ * @example
+ * <Drawer.Footer sticky>
+ *   <Button onClick={handleSave}>Save</Button>
+ *   <Drawer.CancelButton>Cancel</Drawer.CancelButton>
+ * </Drawer.Footer>
+ */
 export declare const DrawerFooter: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & {
     sticky?: boolean;
 } & import('react').RefAttributes<HTMLDivElement>>;
+/**
+ * Header component for the drawer that displays a title and close button.
+ *
+ * Features:
+ * - Displays the drawer title as a headline
+ * - Includes an accessible close button
+ * - Sticky positioning at the top of the drawer
+ * - Proper semantic HTML structure
+ * - Accessible with proper ARIA attributes
+ * - Consistent styling with the design system
+ * - Automatic close functionality
+ * - Automatic tracking ID generation for analytics
+ *
+ * @example
+ * <Drawer.Header>Settings</Drawer.Header>
+ */
 export declare const DrawerHeader: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & DataTrackingId & import('react').RefAttributes<HTMLDivElement>>;
+/**
+ * Content container for the drawer that holds the main content area.
+ *
+ * Features:
+ * - Flexible content area with proper spacing
+ * - Scrollable content when needed
+ * - Proper semantic HTML structure
+ * - Accessible with proper ARIA attributes
+ * - Consistent styling with the design system
+ * - Supports all standard div element props
+ * - Responsive design that adapts to content
+ * - Proper focus management
+ *
+ * @example
+ * <Drawer.Content>
+ *   <p>This is the main content of the drawer.</p>
+ *   <p>It can contain any type of content.</p>
+ * </Drawer.Content>
+ */
 export declare const DrawerContent: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+/**
+ * A slide-out drawer component that provides a modal-like experience from the side of the screen.
+ *
+ * Features:
+ * - Slide-in animation from the side of the screen
+ * - Keyboard navigation with focus trapping
+ * - Escape key and click outside to close
+ * - Configurable size variants (medium, large)
+ * - Built-in toast support for notifications
+ * - Automatic scroll locking when open
+ * - Accessible with proper ARIA attributes
+ * - Compound component structure with Header, Footer, Content, and CancelButton
+ * - Transition state callbacks for animation control
+ * - Optional scroll chaining support
+ * - Automatic tracking ID generation for analytics
+ *
+ * @example
+ * <Drawer open={isOpen} onClose={handleClose} size="medium">
+ *   <Drawer.Header>Settings</Drawer.Header>
+ *   <Drawer.Content>Drawer content goes here</Drawer.Content>
+ *   <Drawer.Footer>
+ *     <Button onClick={handleSave}>Save</Button>
+ *     <Drawer.CancelButton>Cancel</Drawer.CancelButton>
+ *   </Drawer.Footer>
+ * </Drawer>
+ */
 export declare const Drawer: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').DialogHTMLAttributes<HTMLDialogElement>, HTMLDialogElement>, "ref"> & import('@servicetitan/hammer-react/dist/hooks/useDialogTransitionStates').DialogTransitionStateEffects & import('@servicetitan/hammer-react').DisableCloseOnEscapeOrClickProps & {
     size?: Extract<import('@servicetitan/hammer-react').Size, "medium" | "large">;
     open?: boolean;
@@ -18,10 +147,81 @@ export declare const Drawer: import('react').ForwardRefExoticComponent<Omit<impo
     onOpen?: () => void;
     enableScrollChaining?: boolean;
 } & import('react').RefAttributes<HTMLDialogElement>> & {
+    /**
+     * Header component for the drawer that displays a title and close button.
+     *
+     * Features:
+     * - Displays the drawer title as a headline
+     * - Includes an accessible close button
+     * - Sticky positioning at the top of the drawer
+     * - Proper semantic HTML structure
+     * - Accessible with proper ARIA attributes
+     * - Consistent styling with the design system
+     * - Automatic close functionality
+     * - Automatic tracking ID generation for analytics
+     *
+     * @example
+     * <Drawer.Header>Settings</Drawer.Header>
+     */
     Header: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & DataTrackingId & import('react').RefAttributes<HTMLDivElement>>;
+    /**
+     * Footer component for the drawer that displays action buttons and controls.
+     *
+     * Features:
+     * - Flexible layout for action buttons and controls
+     * - Optional sticky positioning at the bottom
+     * - Proper semantic HTML structure
+     * - Accessible with proper ARIA attributes
+     * - Consistent styling with the design system
+     * - Supports all standard footer element props
+     * - Responsive design that adapts to content
+     *
+     * @example
+     * <Drawer.Footer sticky>
+     *   <Button onClick={handleSave}>Save</Button>
+     *   <Drawer.CancelButton>Cancel</Drawer.CancelButton>
+     * </Drawer.Footer>
+     */
     Footer: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & {
         sticky?: boolean;
     } & import('react').RefAttributes<HTMLDivElement>>;
+    /**
+     * Content container for the drawer that holds the main content area.
+     *
+     * Features:
+     * - Flexible content area with proper spacing
+     * - Scrollable content when needed
+     * - Proper semantic HTML structure
+     * - Accessible with proper ARIA attributes
+     * - Consistent styling with the design system
+     * - Supports all standard div element props
+     * - Responsive design that adapts to content
+     * - Proper focus management
+     *
+     * @example
+     * <Drawer.Content>
+     *   <p>This is the main content of the drawer.</p>
+     *   <p>It can contain any type of content.</p>
+     * </Drawer.Content>
+     */
     Content: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+    /**
+     * A button component that automatically closes the drawer when clicked.
+     *
+     * Features:
+     * - Automatically closes the drawer when clicked
+     * - Extends Button component functionality
+     * - Accessible with proper ARIA attributes
+     * - Consistent styling with the design system
+     * - Supports all standard button props
+     * - Proper focus management
+     * - Can be used anywhere within the drawer context
+     * - Automatic tracking ID generation for analytics
+     *
+     * @example
+     * <Drawer.CancelButton appearance="ghost" size="small">
+     *   Cancel
+     * </Drawer.CancelButton>
+     */
     CancelButton: import('react').ForwardRefExoticComponent<DrawerCancelButtonProps & import('react').RefAttributes<HTMLButtonElement>>;
 };

package/dist/components/EditCard/EditCard.d.ts

@@ -1,7 +1,57 @@
 import { EditCardProps as CoreEditCardProps, EditCardChange as CoreEditCardChange, EditCardState as CoreEditCardState } from '@servicetitan/hammer-react';
+/**
+ * Props for the EditCard component
+ * @property {string | object} headerText - The header text to display. Can be a string or an object mapping states to different text
+ * @property {EditCardState} state - The current state of the edit card
+ * @property {string} [saveButtonText] - Text to display on the save button
+ * @property {string} [editButtonText] - Text to display on the edit button
+ * @property {boolean} [disableEdit] - Whether to disable the edit button
+ * @property {boolean} [disableSave] - Whether to disable the save button
+ * @property {function} [onStateChange] - Callback function called when the state changes
+ * @extends ComponentPropsWithoutRef<"div">
+ * @extends LayoutUtilProps
+ */
 export type EditCardProps = CoreEditCardProps;
+/**
+ * The type of state change that can occur.
+ * @property {"edit"} edit - User clicked the edit button to start editing
+ * @property {"save"} save - User clicked the save button to save changes
+ * @property {"cancel"} cancel - User clicked the cancel button to discard changes
+ */
 export type EditCardChange = CoreEditCardChange;
+/**
+ * The current state of the edit card.
+ * @property {"not started"} not started - Initial state, content is not being edited
+ * @property {"in progress"} in progress - User is currently editing the content
+ * @property {"error"} error - An error occurred during the edit process
+ * @property {"complete"} complete - Edit was successfully completed
+ */
 export type EditCardState = CoreEditCardState;
+/**
+ * EditCard component for managing editable content with different states and actions.
+ *
+ * Features:
+ * - Four distinct states: not started, in progress, error, and complete
+ * - Visual indicators for each state with appropriate icons
+ * - Dynamic header text that can change based on state
+ * - Edit and save buttons with customizable text
+ * - Optional button disabling for different states
+ * - State change callbacks for handling user interactions
+ * - Built on Card component with consistent styling
+ * - Supports layout utilities for positioning and spacing
+ * - Accessible with proper ARIA attributes
+ * - Visual state indicators with color-coded borders
+ * - Automatic tracking ID generation for analytics
+ *
+ * @example
+ * <EditCard
+ *   headerText="User Profile"
+ *   state="not started"
+ *   onStateChange={(change) => console.log(change)}
+ * >
+ *   <Text>Profile information goes here</Text>
+ * </EditCard>
+ */
 export declare const EditCard: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import('@servicetitan/hammer-react').LayoutUtilProps & {
     headerText: string | {
         "not started": string;

package/dist/components/FieldMessage/FieldMessage.d.ts

@@ -1,5 +1,36 @@
 import { FieldMessageProps as CoreFieldMessageProps } from '@servicetitan/hammer-react';
+/**
+ * Props for the FieldMessage component
+ * @property {string} [id] - Unique identifier for the field message container
+ * @property {ReactElement | string} [hint] - Hint text or element to display when there's no error
+ * @property {ReactElement | string} [description] - Description text or element to display below the main message
+ * @property {ReactElement | string} [errorMessage] - Error message or element to display when there's an error
+ * @property {string} [errorAriaLive] - aria-live attribute value for the error message. Controls how screen readers announce error messages
+ * @extends ComponentPropsWithoutRef<"div">
+ */
 export type FieldMessageProps = CoreFieldMessageProps;
+/**
+ * FieldMessage component for displaying hints, descriptions, and error messages for form fields.
+ *
+ * Features:
+ * - Displays hint text when no error is present
+ * - Shows error messages with warning icon when errors occur
+ * - Supports both string and React element content
+ * - Configurable aria-live behavior for screen readers
+ * - Optional description text for additional context
+ * - Accessible with proper ARIA attributes
+ * - Visual error indicators with warning icons
+ * - Conditional rendering based on error state
+ * - Supports layout utilities for positioning and spacing
+ * - Automatic tracking ID generation for analytics
+ *
+ * @example
+ * <FieldMessage
+ *   hint="Enter your email address"
+ *   description="We'll use this to send you updates"
+ *   errorMessage="Please enter a valid email address"
+ * />
+ */
 export declare const FieldMessage: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     id?: string;
     hint?: import('react').ReactElement | string;