@servicetitan/anvil2 1.37.2 → 1.38.0

package/dist/components/Stepper/Stepper.d.ts

@@ -1,29 +1,242 @@
 import { StepperProps as CoreStepperProps, StepperListProps as CoreStepperListProps, StepperStepProps as CoreStepperStepProps, StepperPanelProps as CoreStepperPanelProps, StepperNextButtonProps as CoreStepperNextButtonProps, StepperPrevButtonProps as CoreStepperPrevButtonProps, StepperFinalPanelProps as CoreStepperFinalPanelProps } from '@servicetitan/hammer-react';
 import { DataTrackingId } from '../../types/DataTrackingId';
+/**
+ * Props for the Stepper component
+ * @property {number} [defaultIndex] - Default step to start on
+ * @property {boolean} [allowNavigateToPrevStep] - Allows users to navigate to previous steps
+ * @property {function} [onChange] - Returns current step data when step changes
+ * @property {function} [onComplete] - Called when all steps are completed
+ * @extends ComponentPropsWithoutRef<"div">
+ * @extends LayoutUtilProps
+ */
 export type StepperProps = CoreStepperProps;
+/**
+ * Props for the StepperList component
+ * @extends ComponentPropsWithoutRef<"div">
+ */
 export type StepperListProps = CoreStepperListProps;
+/**
+ * Props for the StepperStep component
+ * @property {string} controls - ID of the panel that this step is controlling
+ * @property {function} [onClick] - Called when the step is clicked
+ * @extends ComponentPropsWithoutRef<"button">
+ */
 export type StepperStepProps = CoreStepperStepProps;
+/**
+ * Props for the StepperPanel component
+ * @property {string} id - Unique identifier for the panel
+ * @extends ComponentPropsWithoutRef<"div">
+ * @extends LayoutUtilProps
+ */
 export type StepperPanelProps = CoreStepperPanelProps;
+/**
+ * Props for the StepperNextButton component
+ * @property {string} [nextLabel] - Label for the next button
+ * @property {string} [completeLabel] - Label for the complete button
+ * @property {function} [onClick] - Called when the "Next" button is clicked
+ * @extends ButtonProps
+ * @extends DataTrackingId
+ */
 export type StepperNextButtonProps = CoreStepperNextButtonProps & DataTrackingId;
+/**
+ * Props for the StepperPrevButton component
+ * @property {string} [label] - Label for the previous button
+ * @extends ButtonProps
+ * @extends DataTrackingId
+ */
 export type StepperPrevButtonProps = CoreStepperPrevButtonProps & DataTrackingId;
+/**
+ * Props for the StepperFinalPanel component
+ * @extends ComponentPropsWithoutRef<"div">
+ * @extends LayoutUtilProps
+ */
 export type StepperFinalPanelProps = CoreStepperFinalPanelProps;
+/**
+ * Container component for organizing and displaying stepper steps.
+ *
+ * Features:
+ * - Groups multiple stepper steps together
+ * - Displays current step label
+ * - Responsive design with mobile-friendly layout
+ * - Accessible with proper ARIA roles
+ * - Automatic step organization
+ * - Visual step indicators
+ * - Context-based current step display
+ * - Flexible layout with CSS Grid/Flexbox
+ * - Container queries for responsive behavior
+ *
+ * @example
+ * <Stepper.List>
+ *   <Stepper.Step controls="step1">Step 1</Stepper.Step>
+ *   <Stepper.Step controls="step2">Step 2</Stepper.Step>
+ *   <Stepper.Step controls="step3">Step 3</Stepper.Step>
+ * </Stepper.List>
+ */
 export declare const StepperList: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+/**
+ * Individual step component for the Stepper.
+ *
+ * Features:
+ * - Visual progress indicator with animated bar
+ * - Check icon for completed steps
+ * - Keyboard navigation support
+ * - Accessible with proper ARIA attributes
+ * - Click handling for step navigation
+ * - Visual states for current, completed, and future steps
+ * - Responsive design with mobile-friendly layout
+ * - Focus management for keyboard users
+ * - Custom styling support
+ *
+ * @example
+ * <Stepper.Step controls="step1">
+ *   Personal Information
+ * </Stepper.Step>
+ */
 export declare const StepperStep: import('react').ForwardRefExoticComponent<Omit<Omit<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref">, "onClick" | "disabled"> & {
     controls: string;
     onClick?: (e: import('react').MouseEvent<HTMLButtonElement>, index?: number) => void;
 } & import('react').RefAttributes<HTMLButtonElement>>;
+/**
+ * Content panel component for displaying step content in the Stepper.
+ *
+ * Features:
+ * - Displays content for the current step only
+ * - Smooth fade-in/fade-out animations
+ * - Automatic overflow handling with scroll support
+ * - Accessible with proper ARIA roles
+ * - Layout utilities for positioning and spacing
+ * - Motion animations for smooth transitions
+ * - Focus management for keyboard navigation
+ * - Responsive design with flexible layout
+ * - Context-based visibility control
+ *
+ * @example
+ * <Stepper.Panel id="step1">
+ *   <h2>Personal Information</h2>
+ *   <form>
+ *     <label htmlFor="name">Name:</label>
+ *     <input id="name" type="text" />
+ *   </form>
+ * </Stepper.Panel>
+ */
 export declare const StepperPanel: import('react').ForwardRefExoticComponent<Omit<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "onDrag" | "onDragEnd" | "onDragStart" | "onAnimationStart"> & import('@servicetitan/hammer-react').LayoutUtilProps & {
     id: string;
 } & import('react').RefAttributes<HTMLDivElement>>;
+/**
+ * Final panel component displayed when all stepper steps are completed.
+ *
+ * Features:
+ * - Displays only when all steps are completed
+ * - Smooth fade-in animation on completion
+ * - Automatic overflow handling with scroll support
+ * - Accessible with proper ARIA roles
+ * - Layout utilities for positioning and spacing
+ * - Motion animations for smooth transitions
+ * - Focus management for keyboard navigation
+ * - Responsive design with flexible layout
+ * - Context-based visibility control
+ *
+ * @example
+ * <Stepper.FinalPanel>
+ *   <h2>Congratulations!</h2>
+ *   <p>You have successfully completed all steps.</p>
+ *   <Button onClick={handleSubmit}>Submit</Button>
+ * </Stepper.FinalPanel>
+ */
 export declare const StepperFinalPanel: import('react').ForwardRefExoticComponent<Omit<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "onDrag" | "onDragEnd" | "onDragStart" | "onAnimationStart"> & import('@servicetitan/hammer-react').LayoutUtilProps & import('react').RefAttributes<HTMLDivElement>>;
+/**
+ * Next button component for navigating to the next step in the Stepper.
+ *
+ * Features:
+ * - Automatically advances to the next step
+ * - Changes label to "Complete" on the final step
+ * - Supports async validation with Promise return
+ * - Prevents navigation when validation fails
+ * - Hides when all steps are completed
+ * - Accessible with proper button semantics
+ * - Customizable appearance and styling
+ * - Integration with stepper context
+ * - Automatic completion handling
+ * - Automatic tracking ID generation for analytics
+ *
+ * @example
+ * <Stepper.NextButton
+ *   nextLabel="Continue"
+ *   completeLabel="Finish"
+ * />
+ */
 export declare const StepperNextButton: import('react').ForwardRefExoticComponent<Omit<import('@servicetitan/hammer-react').ButtonProps, "children"> & {
     nextLabel?: string;
     completeLabel?: string;
     onClick?: (e: import('react').MouseEvent<HTMLButtonElement>) => void | boolean | Promise<boolean>;
 } & DataTrackingId & import('react').RefAttributes<HTMLButtonElement>>;
+/**
+ * Previous button component for navigating to the previous step in the Stepper.
+ *
+ * Features:
+ * - Navigates to the previous step when available
+ * - Hides when on the first step
+ * - Restores navigation when returning from completion
+ * - Accessible with proper button semantics
+ * - Customizable label and styling
+ * - Integration with stepper context
+ * - Automatic focus management
+ * - Support for completion state handling
+ * - Automatic tracking ID generation for analytics
+ *
+ * @example
+ * <Stepper.PrevButton label="Go Back" />
+ */
 export declare const StepperPrevButton: import('react').ForwardRefExoticComponent<Omit<import('@servicetitan/hammer-react').ButtonProps, "children"> & {
     label?: string;
 } & DataTrackingId & import('react').RefAttributes<HTMLButtonElement>>;
+/**
+ * Stepper component for creating multi-step workflows and forms.
+ *
+ * Features:
+ * - Multi-step navigation with visual progress indicators
+ * - Keyboard navigation support with arrow keys
+ * - Optional navigation to previous steps
+ * - Smooth animations and transitions
+ * - Accessible with proper ARIA roles and attributes
+ * - Customizable step labels and content
+ * - Completion state handling
+ * - Layout utilities for positioning and spacing
+ * - Motion animations for step transitions
+ * - Context-based state management
+ *
+ * @example
+ * <Stepper defaultIndex={0} allowNavigateToPrevStep>
+ *   <Stepper.List>
+ *     <Stepper.Step controls="step1">Step 1</Stepper.Step>
+ *     <Stepper.Step controls="step2">Step 2</Stepper.Step>
+ *     <Stepper.Step controls="step3">Step 3</Stepper.Step>
+ *   </Stepper.List>
+ *
+ *   <Stepper.Panel id="step1">
+ *     <h2>Step 1 Content</h2>
+ *     <p>This is the first step content.</p>
+ *   </Stepper.Panel>
+ *
+ *   <Stepper.Panel id="step2">
+ *     <h2>Step 2 Content</h2>
+ *     <p>This is the second step content.</p>
+ *   </Stepper.Panel>
+ *
+ *   <Stepper.Panel id="step3">
+ *     <h2>Step 3 Content</h2>
+ *     <p>This is the final step content.</p>
+ *   </Stepper.Panel>
+ *
+ *   <Stepper.FinalPanel>
+ *     <h2>Completed!</h2>
+ *     <p>All steps have been completed successfully.</p>
+ *   </Stepper.FinalPanel>
+ *
+ *   <Stepper.PrevButton />
+ *   <Stepper.NextButton />
+ * </Stepper>
+ */
 export declare const Stepper: import('react').ForwardRefExoticComponent<Omit<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "onChange" | "onDrag" | "onDragEnd" | "onDragStart" | "onAnimationStart"> & import('@servicetitan/hammer-react').LayoutUtilProps & {
     defaultIndex?: number;
     allowNavigateToPrevStep?: boolean;
@@ -33,20 +246,142 @@ export declare const Stepper: import('react').ForwardRefExoticComponent<Omit<Omi
     }) => void;
     onComplete?: () => void;
 } & import('react').RefAttributes<HTMLDivElement>> & {
+    /**
+     * Container component for organizing and displaying stepper steps.
+     *
+     * Features:
+     * - Groups multiple stepper steps together
+     * - Displays current step label
+     * - Responsive design with mobile-friendly layout
+     * - Accessible with proper ARIA roles
+     * - Automatic step organization
+     * - Visual step indicators
+     * - Context-based current step display
+     * - Flexible layout with CSS Grid/Flexbox
+     * - Container queries for responsive behavior
+     *
+     * @example
+     * <Stepper.List>
+     *   <Stepper.Step controls="step1">Step 1</Stepper.Step>
+     *   <Stepper.Step controls="step2">Step 2</Stepper.Step>
+     *   <Stepper.Step controls="step3">Step 3</Stepper.Step>
+     * </Stepper.List>
+     */
     List: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+    /**
+     * Individual step component for the Stepper.
+     *
+     * Features:
+     * - Visual progress indicator with animated bar
+     * - Check icon for completed steps
+     * - Keyboard navigation support
+     * - Accessible with proper ARIA attributes
+     * - Click handling for step navigation
+     * - Visual states for current, completed, and future steps
+     * - Responsive design with mobile-friendly layout
+     * - Focus management for keyboard users
+     * - Custom styling support
+     *
+     * @example
+     * <Stepper.Step controls="step1">
+     *   Personal Information
+     * </Stepper.Step>
+     */
     Step: import('react').ForwardRefExoticComponent<Omit<Omit<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref">, "onClick" | "disabled"> & {
         controls: string;
         onClick?: (e: import('react').MouseEvent<HTMLButtonElement>, index?: number) => void;
     } & import('react').RefAttributes<HTMLButtonElement>>;
+    /**
+     * Content panel component for displaying step content in the Stepper.
+     *
+     * Features:
+     * - Displays content for the current step only
+     * - Smooth fade-in/fade-out animations
+     * - Automatic overflow handling with scroll support
+     * - Accessible with proper ARIA roles
+     * - Layout utilities for positioning and spacing
+     * - Motion animations for smooth transitions
+     * - Focus management for keyboard navigation
+     * - Responsive design with flexible layout
+     * - Context-based visibility control
+     *
+     * @example
+     * <Stepper.Panel id="step1">
+     *   <h2>Personal Information</h2>
+     *   <form>
+     *     <label htmlFor="name">Name:</label>
+     *     <input id="name" type="text" />
+     *   </form>
+     * </Stepper.Panel>
+     */
     Panel: import('react').ForwardRefExoticComponent<Omit<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "onDrag" | "onDragEnd" | "onDragStart" | "onAnimationStart"> & import('@servicetitan/hammer-react').LayoutUtilProps & {
         id: string;
     } & import('react').RefAttributes<HTMLDivElement>>;
+    /**
+     * Final panel component displayed when all stepper steps are completed.
+     *
+     * Features:
+     * - Displays only when all steps are completed
+     * - Smooth fade-in animation on completion
+     * - Automatic overflow handling with scroll support
+     * - Accessible with proper ARIA roles
+     * - Layout utilities for positioning and spacing
+     * - Motion animations for smooth transitions
+     * - Focus management for keyboard navigation
+     * - Responsive design with flexible layout
+     * - Context-based visibility control
+     *
+     * @example
+     * <Stepper.FinalPanel>
+     *   <h2>Congratulations!</h2>
+     *   <p>You have successfully completed all steps.</p>
+     *   <Button onClick={handleSubmit}>Submit</Button>
+     * </Stepper.FinalPanel>
+     */
     FinalPanel: import('react').ForwardRefExoticComponent<Omit<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "onDrag" | "onDragEnd" | "onDragStart" | "onAnimationStart"> & import('@servicetitan/hammer-react').LayoutUtilProps & import('react').RefAttributes<HTMLDivElement>>;
+    /**
+     * Next button component for navigating to the next step in the Stepper.
+     *
+     * Features:
+     * - Automatically advances to the next step
+     * - Changes label to "Complete" on the final step
+     * - Supports async validation with Promise return
+     * - Prevents navigation when validation fails
+     * - Hides when all steps are completed
+     * - Accessible with proper button semantics
+     * - Customizable appearance and styling
+     * - Integration with stepper context
+     * - Automatic completion handling
+     * - Automatic tracking ID generation for analytics
+     *
+     * @example
+     * <Stepper.NextButton
+     *   nextLabel="Continue"
+     *   completeLabel="Finish"
+     * />
+     */
     NextButton: import('react').ForwardRefExoticComponent<Omit<import('@servicetitan/hammer-react').ButtonProps, "children"> & {
         nextLabel?: string;
         completeLabel?: string;
         onClick?: (e: import('react').MouseEvent<HTMLButtonElement>) => void | boolean | Promise<boolean>;
     } & DataTrackingId & import('react').RefAttributes<HTMLButtonElement>>;
+    /**
+     * Previous button component for navigating to the previous step in the Stepper.
+     *
+     * Features:
+     * - Navigates to the previous step when available
+     * - Hides when on the first step
+     * - Restores navigation when returning from completion
+     * - Accessible with proper button semantics
+     * - Customizable label and styling
+     * - Integration with stepper context
+     * - Automatic focus management
+     * - Support for completion state handling
+     * - Automatic tracking ID generation for analytics
+     *
+     * @example
+     * <Stepper.PrevButton label="Go Back" />
+     */
     PrevButton: import('react').ForwardRefExoticComponent<Omit<import('@servicetitan/hammer-react').ButtonProps, "children"> & {
         label?: string;
     } & DataTrackingId & import('react').RefAttributes<HTMLButtonElement>>;

package/dist/components/Switch/Switch.d.ts

@@ -1,7 +1,40 @@
 import { SwitchProps as CoreSwitchProps } from '@servicetitan/hammer-react';
 import { DataTrackingId } from '../../types/DataTrackingId';
+/**
+ * Props for the Switch component
+ * @property {function} [onChange] - Callback when switch is changed
+ * @property {ReactElement | string} [label] - Label for the switch
+ * @property {boolean} [checked] - Controlled checked state
+ * @property {boolean} [defaultChecked] - Default checked state
+ * @extends ComponentPropsWithoutRef<"input">
+ * @extends LayoutUtilProps
+ * @extends DataTrackingId
+ */
 export type SwitchProps = CoreSwitchProps & DataTrackingId;
+/**
+ * Switch component for toggling between on/off states.
+ *
+ * Features:
+ * - Toggle switch with smooth animations
+ * - Check icon indicator when active
+ * - Accessible with proper ARIA roles and attributes
+ * - Keyboard navigation support (Space/Enter)
+ * - Controlled and uncontrolled state management
+ * - Customizable label and styling
+ * - Layout utilities for positioning and spacing
+ * - Focus management with visible focus indicators
+ * - Hover states and visual feedback
+ * - Disabled state support
+ * - Automatic tracking ID generation for analytics
+ *
+ * @example
+ * <Switch
+ *   label="Enable notifications"
+ *   onChange={(e, state) => console.log('Switch toggled:', state.checked)}
+ * />
+ */
 export declare const Switch: import('react').ForwardRefExoticComponent<Omit<Omit<import('react').DetailedHTMLProps<import('react').InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "onChange"> & import('@servicetitan/hammer-react').LayoutUtilProps & {
     onChange?: (e: import('react').ChangeEvent<HTMLInputElement>, state: import('@servicetitan/hammer-react/dist/components/Switch/Switch').SwitchState) => void;
     label?: import('react').ReactElement | string;
+    description?: string;
 } & DataTrackingId & import('react').RefAttributes<HTMLInputElement>>;

package/dist/components/Tab/Tab.d.ts

@@ -1,28 +1,180 @@
 import { TabProps as CoreTabProps, TabListProps as CoreTabListProps, TabButtonProps as CoreTabButtonProps, TabPanelProps as CoreTabPanelProps } from '@servicetitan/hammer-react';
 import { DataTrackingId } from '../../types/DataTrackingId';
+/**
+ * Props for the Tab component
+ * @property {number} defaultIndex - The index of the tab that should be active by default
+ * @property {boolean} [fill] - Whether the tabs should fill the available width
+ * @extends Omit<ComponentPropsWithoutRef<"div">, "onAnimationStart" | "onDragStart" | "onDragEnd" | "onDrag">
+ * @extends LayoutUtilProps
+ */
 export type TabProps = CoreTabProps;
+/**
+ * Props for the TabList component
+ * @extends ComponentPropsWithoutRef<"div">
+ */
 export type TabListProps = CoreTabListProps;
+/**
+ * Props for the TabButton component
+ * @property {string} id - Unique identifier for the tab button
+ * @property {string} controls - ID of the tab panel that this button controls
+ * @property {(e: MouseEvent<HTMLButtonElement>, index?: number) => void} [onClick] - Callback function called when the tab button is clicked
+ * @extends Omit<ComponentPropsWithoutRef<"button">, "onClick" | "disabled">
+ */
 export type TabButtonProps = CoreTabButtonProps & DataTrackingId;
+/**
+ * Props for the TabPanel component
+ * @property {string} id - Unique identifier for the tab panel
+ * @extends Omit<ComponentPropsWithoutRef<"div">, "onAnimationStart" | "onDragStart" | "onDragEnd" | "onDrag">
+ */
 export type TabPanelProps = CoreTabPanelProps;
+/**
+ * TabButton component for individual tab navigation buttons.
+ *
+ * Features:
+ * - Automatic ARIA attributes for accessibility
+ * - Visual indicator for active state
+ * - Keyboard navigation support
+ * - Smooth animations with reduced motion support
+ * - Proper focus management
+ * - RTL language support
+ * - Automatic tracking ID generation for analytics
+ *
+ * @example
+ * <Tab.Button id="tab1" controls="panel1" onClick={(e, index) => console.log('Tab clicked:', index)}>
+ *   First Tab
+ * </Tab.Button>
+ */
 export declare const TabButton: import('react').ForwardRefExoticComponent<Omit<Omit<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref">, "onClick" | "disabled"> & {
     id: string;
     controls: string;
     onClick?: (e: import('react').MouseEvent<HTMLButtonElement>, index?: number) => void;
 } & DataTrackingId & import('react').RefAttributes<HTMLButtonElement>>;
+/**
+ * TabList component for containing and managing tab buttons.
+ *
+ * Features:
+ * - Horizontal scrolling for overflow tabs
+ * - Navigation arrows for overflow content
+ * - RTL language support
+ * - Automatic overflow detection
+ * - Proper ARIA roles for accessibility
+ * - Smooth scrolling behavior
+ * - Visual indicator positioning
+ *
+ * @example
+ * <Tab.List>
+ *   <Tab.Button id="tab1" controls="panel1">First Tab</Tab.Button>
+ *   <Tab.Button id="tab2" controls="panel2">Second Tab</Tab.Button>
+ *   <Tab.Button id="tab3" controls="panel3">Third Tab</Tab.Button>
+ * </Tab.List>
+ */
 export declare const TabList: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+/**
+ * TabPanel component for displaying tab content.
+ *
+ * Features:
+ * - Automatic visibility based on active tab
+ * - Smooth fade animations
+ * - Proper ARIA attributes for accessibility
+ * - Automatic association with tab buttons
+ * - Focus management
+ * - Layout animations
+ *
+ * @example
+ * <Tab.Panel id="panel1">
+ *   <h2>First Tab Content</h2>
+ *   <p>This is the content for the first tab.</p>
+ * </Tab.Panel>
+ */
 export declare const TabPanel: import('react').ForwardRefExoticComponent<Omit<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "onDrag" | "onDragEnd" | "onDragStart" | "onAnimationStart"> & {
     id: string;
 } & import('react').RefAttributes<HTMLDivElement>>;
+/**
+ * Tab component for organizing content into multiple sections with navigation.
+ *
+ * Features:
+ * - Keyboard navigation support (arrow keys, Enter, Space)
+ * - Accessible with proper ARIA roles and attributes
+ * - Smooth animations and transitions
+ * - RTL language support
+ * - Automatic focus management
+ * - Scroll behavior for overflow tabs
+ * - Compound component pattern with Tab.Button, Tab.List, and Tab.Panel
+ * - Supports layout utilities for positioning and spacing
+ *
+ * @example
+ * <Tab defaultIndex={0}>
+ *   <Tab.List>
+ *     <Tab.Button id="tab1" controls="panel1">First Tab</Tab.Button>
+ *     <Tab.Button id="tab2" controls="panel2">Second Tab</Tab.Button>
+ *   </Tab.List>
+ *   <Tab.Panel id="panel1">Content for first tab</Tab.Panel>
+ *   <Tab.Panel id="panel2">Content for second tab</Tab.Panel>
+ * </Tab>
+ */
 export declare const Tab: import('react').ForwardRefExoticComponent<Omit<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "onDrag" | "onDragEnd" | "onDragStart" | "onAnimationStart"> & import('@servicetitan/hammer-react').LayoutUtilProps & {
     defaultIndex: number;
     fill?: boolean;
 } & import('react').RefAttributes<HTMLDivElement>> & {
+    /**
+     * TabButton component for individual tab navigation buttons.
+     *
+     * Features:
+     * - Automatic ARIA attributes for accessibility
+     * - Visual indicator for active state
+     * - Keyboard navigation support
+     * - Smooth animations with reduced motion support
+     * - Proper focus management
+     * - RTL language support
+     * - Automatic tracking ID generation for analytics
+     *
+     * @example
+     * <Tab.Button id="tab1" controls="panel1" onClick={(e, index) => console.log('Tab clicked:', index)}>
+     *   First Tab
+     * </Tab.Button>
+     */
     Button: import('react').ForwardRefExoticComponent<Omit<Omit<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref">, "onClick" | "disabled"> & {
         id: string;
         controls: string;
         onClick?: (e: import('react').MouseEvent<HTMLButtonElement>, index?: number) => void;
     } & DataTrackingId & import('react').RefAttributes<HTMLButtonElement>>;
+    /**
+     * TabList component for containing and managing tab buttons.
+     *
+     * Features:
+     * - Horizontal scrolling for overflow tabs
+     * - Navigation arrows for overflow content
+     * - RTL language support
+     * - Automatic overflow detection
+     * - Proper ARIA roles for accessibility
+     * - Smooth scrolling behavior
+     * - Visual indicator positioning
+     *
+     * @example
+     * <Tab.List>
+     *   <Tab.Button id="tab1" controls="panel1">First Tab</Tab.Button>
+     *   <Tab.Button id="tab2" controls="panel2">Second Tab</Tab.Button>
+     *   <Tab.Button id="tab3" controls="panel3">Third Tab</Tab.Button>
+     * </Tab.List>
+     */
     List: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+    /**
+     * TabPanel component for displaying tab content.
+     *
+     * Features:
+     * - Automatic visibility based on active tab
+     * - Smooth fade animations
+     * - Proper ARIA attributes for accessibility
+     * - Automatic association with tab buttons
+     * - Focus management
+     * - Layout animations
+     *
+     * @example
+     * <Tab.Panel id="panel1">
+     *   <h2>First Tab Content</h2>
+     *   <p>This is the content for the first tab.</p>
+     * </Tab.Panel>
+     */
     Panel: import('react').ForwardRefExoticComponent<Omit<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "onDrag" | "onDragEnd" | "onDragStart" | "onAnimationStart"> & {
         id: string;
     } & import('react').RefAttributes<HTMLDivElement>>;

package/dist/components/Text/Text.d.ts

@@ -1,3 +1,40 @@
 import { TextProps as CoreTextProps } from '@servicetitan/hammer-react';
+/**
+ * Props for the Text component
+ * @property {"headline"} [variant] - Headline text variant
+ * @property {"eyebrow"} [variant] - Eyebrow text variant
+ * @property {"body"} [variant] - Body text variant (default)
+ * @property {"h1" | "h2" | "h3" | "h4" | "h5" | "h6"} [el] - Set the wrapping element's tagname for headlines
+ * @property {"small" | "medium" | "large" | "xlarge"} [size] - Size of the text
+ * @property {boolean} [subdued] - Deemphasized text styling
+ * @property {boolean} [inline] - Inline flag used for nesting BodyText inside BodyText
+ * @extends ComponentPropsWithoutRef<"h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span">
+ * @extends LayoutUtilProps
+ */
 export type TextProps = CoreTextProps;
+/**
+ * Text component for displaying various types of text content with consistent styling.
+ *
+ * Features:
+ * - Multiple text variants (headline, eyebrow, body)
+ * - Semantic HTML elements (h1-h6, p, span)
+ * - Multiple size options for each variant
+ * - Deemphasized text styling option
+ * - Inline text support for nesting
+ * - Supports layout utilities for positioning and spacing
+ * - Accessible with proper semantic markup
+ * - Responsive typography scaling
+ *
+ * @example
+ * <Text variant="headline" el="h1" size="large">Main Heading</Text>
+ * <Text variant="headline" el="h2" size="medium">Sub Heading</Text>
+ *
+ * @example
+ * <Text variant="eyebrow" size="small">Category Label</Text>
+ *
+ * @example
+ * <Text size="large">Large body text</Text>
+ * <Text subdued>Deemphasized text</Text>
+ * <Text inline>Inline text within other text</Text>
+ */
 export declare const Text: import('react').ForwardRefExoticComponent<CoreTextProps & import('react').RefAttributes<HTMLSpanElement | HTMLHeadingElement | HTMLParagraphElement>>;