@servicetitan/anvil2 1.37.1 → 1.38.0

package/dist/components/Popover/Popover.d.ts

@@ -1,21 +1,289 @@
 import { PopoverProps as CorePopoverProps, PopoverTriggerProps as CorePopoverTriggerProps, PopoverContentProps as CorePopoverContentProps, PopoverCloseProps as CorePopoverCloseProps, PopoverButtonProps as CorePopoverButtonProps } from '@servicetitan/hammer-react';
 import { DataTrackingId } from '../../types/DataTrackingId';
+/**
+ * Props for the Popover component
+ * @property {ReactNode} [children] - The content to be rendered inside the popover
+ * @property {string} [id] - Unique identifier for the popover
+ * @property {boolean} [modal] - Whether the popover should be modal (traps focus)
+ * @property {boolean} [openOnHover] - Changes interaction to use hover instead of click
+ * @property {boolean} [fillAvailableHeight] - Changes height and positioning for select/combobox
+ * @property {number | string} [maxHeight] - Maximum height of the popover content
+ * @property {boolean} [fitScreen] - Whether the popover should fit within the screen bounds
+ * @property {number | string} [minHeight] - Minimum height of the popover content
+ * @property {boolean} [matchReferenceWidth] - Whether the popover width should match the trigger element
+ * @property {boolean} [fixedWidth] - Whether the popover should have a fixed width
+ * @property {string} [placement] - Placement of the popover relative to the trigger
+ * @property {boolean} [open] - Controlled open state
+ * @property {boolean} [defaultOpen] - Default open state for uncontrolled mode
+ * @property {Function} [onOpenChange] - Callback when open state changes
+ * @property {Function} [onOutsidePress] - Callback when clicking outside the popover
+ * @property {Function} [onClose] - Fires when the floating element is requested to be closed
+ * @property {boolean} [disableCaret] - Whether to disable the caret/arrow indicator
+ * @property {boolean} [noPadding] - Whether to remove default padding from content
+ * @property {boolean} [disableAutoUpdate] - Whether to disable automatic position updates
+ * @property {boolean} [disableTriggerFocus] - Whether to disable focus on the trigger element
+ * @property {number} [delay] - Delay before opening the popover (for hover mode)
+ * @property {boolean} [disableCloseOnClickOutside] - Whether to disable closing on outside click
+ * @property {boolean} [disableCloseOnEscape] - Whether to disable closing on escape key
+ */
 export type PopoverProps = CorePopoverProps;
+/**
+ * Props for the PopoverTrigger component
+ * @property {Function} children - Render function that receives trigger props and returns a React element
+ */
 export type PopoverTriggerProps = CorePopoverTriggerProps & DataTrackingId;
+/**
+ * Props for the PopoverContent component
+ * @property {ReactNode} [children] - The content to be displayed in the popover
+ * @property {RefObject<HTMLDivElement>} [scrollerRef] - Reference to the scrollable content area
+ */
 export type PopoverContentProps = CorePopoverContentProps;
+/**
+ * Props for the PopoverClose component
+ * @property {ReactNode} [children] - The close button content
+ * @property {string} [appearance] - The button appearance
+ * @property {string} [size] - The button size
+ * @property {string} [type] - The button type
+ * @property {Function} [onClick] - Click handler for the close button
+ */
 export type PopoverCloseProps = CorePopoverCloseProps & DataTrackingId;
+/**
+ * Props for the PopoverButton component
+ * @property {ReactNode} [children] - The button content
+ * @property {string} [appearance] - The button appearance
+ * @property {string} [icon] - The button icon
+ * @property {string} [size] - The button size
+ * @property {string} [type] - The button type
+ * @property {Function} [onClick] - Click handler for the button
+ */
 export type PopoverButtonProps = CorePopoverButtonProps & DataTrackingId;
+/**
+ * PopoverTrigger component for creating custom trigger elements.
+ *
+ * Features:
+ * - Supports custom trigger elements via render prop pattern
+ * - Automatic focus management and keyboard interaction
+ * - Hover and click event handling
+ * - Accessibility attributes (aria-haspopup, aria-expanded, aria-details)
+ * - Legacy popover support with fallback
+ * - Context integration with parent popover
+ * - Automatic tracking ID generation for analytics
+ *
+ * @example
+ * <Popover>
+ *   <Popover.Trigger>
+ *     {(props) => (
+ *       <button {...props}>
+ *         Click to open popover
+ *       </button>
+ *     )}
+ *   </Popover.Trigger>
+ *   <Popover.Content>
+ *     <p>Content here</p>
+ *   </Popover.Content>
+ * </Popover>
+ */
 export declare function PopoverTrigger(props: PopoverTriggerProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * PopoverContent component for the main popover content area.
+ *
+ * Features:
+ * - Automatic positioning and sizing based on trigger
+ * - Screen boundary detection and fitting
+ * - Scroll handling with custom scroller reference
+ * - Focus management and keyboard navigation
+ * - Hover interaction support for tooltip mode
+ * - Escape key handling for closing
+ * - Tab key trapping for modal popovers
+ * - Arrow/caret indicator with automatic positioning
+ * - Legacy popover support with fallback
+ * - Context integration with parent popover
+ * - Accessibility support with proper ARIA roles
+ *
+ * @example
+ * <Popover>
+ *   <Popover.Button>Click to open</Popover.Button>
+ *   <Popover.Content>
+ *     <p>This is the popover content</p>
+ *     <Popover.Close>Close</Popover.Close>
+ *   </Popover.Content>
+ * </Popover>
+ */
 export declare const PopoverContent: import('react').ForwardRefExoticComponent<Omit<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "popover"> & {
     scrollerRef?: import('react').RefObject<HTMLDivElement>;
 } & import('react').RefAttributes<HTMLDivElement>>;
+/**
+ * PopoverClose component for closing the popover.
+ *
+ * Features:
+ * - Automatic popover closing on click
+ * - Supports all Button component props and styling
+ * - Controlled and uncontrolled mode support
+ * - Legacy popover support with fallback
+ * - Context integration with parent popover
+ * - Accessibility support with proper button semantics
+ * - Delayed closing for controlled mode
+ * - Automatic tracking ID generation for analytics
+ *
+ * @example
+ * <Popover>
+ *   <Popover.Button>Click to open</Popover.Button>
+ *   <Popover.Content>
+ *     <p>Content here</p>
+ *     <Popover.Close>Close</Popover.Close>
+ *   </Popover.Content>
+ * </Popover>
+ */
 export declare const PopoverClose: import('react').ForwardRefExoticComponent<PopoverCloseProps & import('react').RefAttributes<HTMLButtonElement>>;
+/**
+ * PopoverButton component for creating button-style triggers.
+ *
+ * Features:
+ * - Button styling and behavior with all Button props
+ * - Automatic popover opening on click
+ * - Hover interaction support for tooltip mode
+ * - Focus management and keyboard navigation
+ * - Accessibility attributes (aria-haspopup, aria-expanded, aria-details)
+ * - Legacy popover support with fallback
+ * - Context integration with parent popover
+ * - Event handling for mouse, keyboard, and focus events
+ * - Automatic tracking ID generation for analytics
+ *
+ * @example
+ * <Popover>
+ *   <Popover.Button>Click to open</Popover.Button>
+ *   <Popover.Content>
+ *     <p>Content here</p>
+ *   </Popover.Content>
+ * </Popover>
+ */
 export declare const PopoverButton: import('react').ForwardRefExoticComponent<PopoverButtonProps & import('react').RefAttributes<HTMLButtonElement>>;
+/**
+ * Popover component for displaying floating content relative to a trigger element.
+ *
+ * Features:
+ * - Supports both controlled and uncontrolled modes
+ * - Automatic positioning with fallback strategies
+ * - Hover and click interaction modes
+ * - Modal and non-modal variants
+ * - Custom trigger elements
+ * - Automatic height and width management
+ * - Screen boundary detection and fitting
+ * - Keyboard navigation and accessibility
+ * - Popover API support with legacy fallback
+ * - Outside click detection and handling
+ * - Focus management and trapping
+ * - Arrow/caret indicators
+ * - Delay support for hover interactions
+ * - Automatic tracking ID generation for analytics
+ *
+ * @example
+ * <Popover>
+ *   <Popover.Button>Click to open</Popover.Button>
+ *   <Popover.Content>
+ *     <p>This is the popover content</p>
+ *     <Popover.Close>Close</Popover.Close>
+ *   </Popover.Content>
+ * </Popover>
+ *
+ * @example
+ * <Popover openOnHover delay={1000}>
+ *   <Popover.Button>Hover to open</Popover.Button>
+ *   <Popover.Content>Tooltip content</Popover.Content>
+ * </Popover>
+ *
+ * @example
+ * <Popover modal>
+ *   <Popover.Trigger>
+ *     {(props) => <button {...props}>Custom trigger</button>}
+ *   </Popover.Trigger>
+ *   <Popover.Content>
+ *     <TextField label="Form field" />
+ *     <Popover.Close>Done</Popover.Close>
+ *   </Popover.Content>
+ * </Popover>
+ */
 export declare const Popover: ((props: PopoverProps) => import("react/jsx-runtime").JSX.Element) & {
+    /**
+     * PopoverTrigger component for creating custom trigger elements.
+     *
+     * Features:
+     * - Supports custom trigger elements via render prop pattern
+     * - Automatic focus management and keyboard interaction
+     * - Hover and click event handling
+     * - Accessibility attributes (aria-haspopup, aria-expanded, aria-details)
+     * - Legacy popover support with fallback
+     * - Context integration with parent popover
+     * - Automatic tracking ID generation for analytics
+     *
+     * @example
+     * <Popover.Trigger>
+     *   {(props) => (
+     *     <button {...props}>
+     *       Click to open popover
+     *     </button>
+     *   )}
+     * </Popover.Trigger>
+     */
     Trigger: typeof PopoverTrigger;
+    /**
+     * PopoverContent component for the main popover content area.
+     *
+     * Features:
+     * - Automatic positioning and sizing based on trigger
+     * - Screen boundary detection and fitting
+     * - Scroll handling with custom scroller reference
+     * - Focus management and keyboard navigation
+     * - Hover interaction support for tooltip mode
+     * - Escape key handling for closing
+     * - Tab key trapping for modal popovers
+     * - Arrow/caret indicator with automatic positioning
+     * - Legacy popover support with fallback
+     * - Context integration with parent popover
+     * - Accessibility support with proper ARIA roles
+     *
+     * @example
+     * <Popover.Content>
+     *   <p>This is the popover content</p>
+     *   <Popover.Close>Close</Popover.Close>
+     * </Popover.Content>
+     */
     Content: import('react').ForwardRefExoticComponent<Omit<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "popover"> & {
         scrollerRef?: import('react').RefObject<HTMLDivElement>;
     } & import('react').RefAttributes<HTMLDivElement>>;
+    /**
+     * PopoverClose component for closing the popover.
+     *
+     * Features:
+     * - Automatic popover closing on click
+     * - Supports all Button component props and styling
+     * - Controlled and uncontrolled mode support
+     * - Legacy popover support with fallback
+     * - Context integration with parent popover
+     * - Accessibility support with proper button semantics
+     * - Delayed closing for controlled mode
+     * - Automatic tracking ID generation for analytics
+     *
+     * @example
+     * <Popover.Close>Close</Popover.Close>
+     */
     Close: import('react').ForwardRefExoticComponent<PopoverCloseProps & import('react').RefAttributes<HTMLButtonElement>>;
+    /**
+     * PopoverButton component for creating button-style triggers.
+     *
+     * Features:
+     * - Button styling and behavior with all Button props
+     * - Automatic popover opening on click
+     * - Hover interaction support for tooltip mode
+     * - Focus management and keyboard navigation
+     * - Accessibility attributes (aria-haspopup, aria-expanded, aria-details)
+     * - Legacy popover support with fallback
+     * - Context integration with parent popover
+     * - Event handling for mouse, keyboard, and focus events
+     * - Automatic tracking ID generation for analytics
+     *
+     * @example
+     * <Popover.Button>Click to open</Popover.Button>
+     */
     Button: import('react').ForwardRefExoticComponent<PopoverButtonProps & import('react').RefAttributes<HTMLButtonElement>>;
 };

package/dist/components/ProgressBar/ProgressBar.d.ts

@@ -1,3 +1,55 @@
 import { ProgressBarProps as CoreProgressBarProps } from '@servicetitan/hammer-react';
+/**
+ * Props for the ProgressBar component
+ * @property {ReactElement | string | boolean} [error] - Error state or error message to display
+ * @property {string} [errorAriaLive] - ARIA live region setting for error announcements
+ * @property {string} [description] - Description text to display below the progress bar
+ * @property {string} [label] - Label text for the progress bar
+ * @property {object} [labelProps] - Additional props for the label component
+ * @property {string} [aria-label] - Accessible label for the progress bar (alternative to label)
+ * @property {string} [aria-labelledby] - ID of element that labels the progress bar (alternative to label)
+ * @property {string | number} [value] - Current progress value (0-100 or 0-max)
+ * @property {boolean} [indeterminate] - Whether the progress bar is in indeterminate state
+ * @property {number} [max] - Maximum value for the progress bar
+ * @extends Omit<ComponentPropsWithoutRef<"progress">, "value">
+ * @extends LayoutUtilProps
+ */
 export type ProgressBarProps = CoreProgressBarProps;
+/**
+ * ProgressBar component for displaying progress indicators.
+ *
+ * Features:
+ * - Supports both determinate and indeterminate progress states
+ * - Optional label with customizable label props
+ * - Error state with error message display
+ * - Success state with check icon when value equals max
+ * - Description text support
+ * - Accessibility support with proper ARIA attributes
+ * - Layout utility props for positioning and spacing
+ * - Automatic tracking ID generation for analytics
+ * - Flexible labeling options (label, aria-label, aria-labelledby)
+ * - Error and success visual indicators
+ *
+ * @example
+ * <ProgressBar
+ *   label="Upload Progress"
+ *   value={75}
+ *   max={100}
+ *   description="Uploading files..."
+ * />
+ *
+ * @example
+ * <ProgressBar
+ *   label="Processing"
+ *   indeterminate
+ *   description="Please wait..."
+ * />
+ *
+ * @example
+ * <ProgressBar
+ *   aria-label="Download progress"
+ *   value={50}
+ *   error="Download failed"
+ * />
+ */
 export declare const ProgressBar: import('react').ForwardRefExoticComponent<CoreProgressBarProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/components/Radio/Radio.d.ts

@@ -1,12 +1,133 @@
 import { RadioProps as CoreRadioProps, RadioGroupProps as CoreRadioGroupProps } from '@servicetitan/hammer-react';
 import { DataTrackingId } from '../../types/DataTrackingId';
+/**
+ * Props for the Radio component
+ * @property {boolean} [checked] - Controlled state
+ * @property {boolean} [defaultChecked] - Uncontrolled state
+ * @property {Function} [onChange] - Callback when radio is changed
+ * @property {ReactElement | string} [label] - Label for Radio
+ * @property {boolean} [error] - Error state for the radio
+ * @property {object} [icons] - Icon overrides for checked and unchecked states
+ * @property {string} [description] - Description text to display below the radio
+ * @property {string} [aria-label] - Accessible label for the radio
+ * @property {string} [aria-labelledby] - ID of element that labels the radio
+ * @property {string} [name] - Name attribute for the radio
+ * @property {string} [data-tracking-id] - Custom tracking ID for analytics
+ * @extends DataTrackingId
+ */
 export type RadioProps = Omit<CoreRadioProps, "hideRadio"> & DataTrackingId;
+/**
+ * Props for the RadioGroup component
+ * @property {string | ReactElement} [legend] - Legend for the fieldset
+ * @property {boolean} [required] - Required flag for label
+ * @property {string} [moreInfo] - Additional information for the group
+ */
 export type RadioGroupProps = CoreRadioGroupProps;
+/**
+ * RadioGroup component for grouping related radio options.
+ *
+ * Features:
+ * - Groups multiple radio options together
+ * - Legend support for group labeling
+ * - Required field indication
+ * - Accessibility support with proper fieldset semantics
+ * - Layout utility props for positioning and spacing
+ * - Focus and blur event handling
+ * - More info support for additional context
+ * - Automatic alignment based on flex direction
+ *
+ * @example
+ * <RadioGroup legend="Choose your preference" required>
+ *   <Radio label="Option A" value="a" />
+ *   <Radio label="Option B" value="b" />
+ *   <Radio label="Option C" value="c" />
+ * </RadioGroup>
+ *
+ * @example
+ * <RadioGroup
+ *   legend="Horizontal layout"
+ *   flexDirection="row"
+ *   gap="4"
+ * >
+ *   <Radio label="Yes" value="yes" />
+ *   <Radio label="No" value="no" />
+ * </RadioGroup>
+ */
 export declare const RadioGroup: 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>>;
+/**
+ * Radio component for single selection from a group of options.
+ *
+ * Features:
+ * - Supports both controlled and uncontrolled modes
+ * - Customizable icons for checked and unchecked states
+ * - Error state with visual indicators
+ * - Description text support
+ * - Accessibility support with proper ARIA attributes
+ * - Layout utility props for positioning and spacing
+ * - Flexible labeling options
+ * - Group support via Radio.Group
+ * - Automatic tracking ID generation for analytics
+ *
+ * @example
+ * <Radio
+ *   label="Option 1"
+ *   value="option1"
+ *   checked={selectedValue === "option1"}
+ *   onChange={(e, state) => setSelectedValue(state?.value)}
+ * />
+ *
+ * @example
+ * <Radio
+ *   label="Custom styled option"
+ *   value="custom"
+ *   icons={{
+ *     checked: CustomCheckedIcon,
+ *     unchecked: CustomUncheckedIcon
+ *   }}
+ *   description="This option has custom styling"
+ * />
+ *
+ * @example
+ * <Radio.Group legend="Choose your preference" required>
+ *   <Radio label="Option A" value="a" />
+ *   <Radio label="Option B" value="b" />
+ *   <Radio label="Option C" value="c" />
+ * </Radio.Group>
+ */
 export declare const Radio: import('react').ForwardRefExoticComponent<Omit<CoreRadioProps, "hideRadio"> & DataTrackingId & import('react').RefAttributes<HTMLInputElement>> & {
+    /**
+     * RadioGroup component for grouping related radio options.
+     *
+     * Features:
+     * - Groups multiple radio options together
+     * - Legend support for group labeling
+     * - Required field indication
+     * - Accessibility support with proper fieldset semantics
+     * - Layout utility props for positioning and spacing
+     * - Focus and blur event handling
+     * - More info support for additional context
+     * - Automatic alignment based on flex direction
+     *
+     * @example
+     * <RadioGroup legend="Choose your preference" required>
+     *   <Radio label="Option A" value="a" />
+     *   <Radio label="Option B" value="b" />
+     *   <Radio label="Option C" value="c" />
+     * </RadioGroup>
+     *
+     * @example
+     * <RadioGroup
+     *   legend="Horizontal layout"
+     *   flexDirection="row"
+     *   gap="4"
+     * >
+     *   <Radio label="Yes" value="yes" />
+     *   <Radio label="No" value="no" />
+     * </RadioGroup>
+     */
     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/SearchField/SearchField.d.ts

@@ -1,6 +1,43 @@
 import { SearchFieldProps as CoreSearchFieldProps } from '@servicetitan/hammer-react';
 import { DataTrackingId } from '../../types/DataTrackingId';
+/**
+ * Props for the SearchField component
+ * @property {string} [size] - Size of the search field (small, medium, large)
+ * @property {Function} [onClear] - Callback when the clear button is clicked
+ * @extends DataTrackingId
+ */
 export type SearchFieldProps = CoreSearchFieldProps & DataTrackingId;
+/**
+ * SearchField component for text input with search functionality.
+ *
+ * Features:
+ * - Search icon prefix for visual clarity
+ * - Clear button that appears when input has value
+ * - Multiple size variants (small, medium, large)
+ * - Controlled and uncontrolled modes
+ * - Disabled and read-only states
+ * - Accessibility support with proper ARIA attributes
+ * - Layout utility props for positioning and spacing
+ * - Automatic value detection for clear button visibility
+ * - Search-specific input type and autocomplete settings
+ * - Screen reader support with placeholder announcements
+ * - Automatic tracking ID generation for analytics
+ *
+ * @example
+ * <SearchField
+ *   placeholder="Search users..."
+ *   onChange={(e) => setSearchTerm(e.target.value)}
+ *   onClear={() => setSearchTerm("")}
+ * />
+ *
+ * @example
+ * <SearchField
+ *   size="large"
+ *   value={searchValue}
+ *   onChange={(e) => setSearchValue(e.target.value)}
+ *   disabled={isLoading}
+ * />
+ */
 export declare const SearchField: import('react').ForwardRefExoticComponent<Omit<Omit<import('react').DetailedHTMLProps<import('react').InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "children" | "prefix" | "size" | "required"> & import('@servicetitan/hammer-react').LayoutUtilProps & {
     size?: Extract<import('@servicetitan/hammer-react').Size, "small" | "medium" | "large">;
     disabled?: boolean;

package/dist/components/SegmentedControl/SegmentedControl.d.ts

@@ -1,14 +1,112 @@
 import { SegmentedControlProps as CoreSegmentedControlProps, SegmentedControlSegmentProps as CoreSegmentedControlSegmentProps } from '@servicetitan/hammer-react';
 import { DataTrackingId } from '../../types/DataTrackingId';
+/**
+ * Props for the SegmentedControl component
+ * @property {string} [size] - Size of the segment (small, medium)
+ * @property {boolean} [fill] - Whether to fill available width
+ * @property {string} [name] - Name attribute for radio inputs
+ * @property {Function} [onChange] - Callback when segment is changed
+ * @property {string} [selected] - Selected segment (controlled mode)
+ * @property {string} [defaultSelected] - Initial selection (uncontrolled mode)
+ * @property {string} [data-tracking-id] - Custom tracking ID for analytics
+ * @extends DataTrackingId
+ */
 export type SegmentedControlProps = CoreSegmentedControlProps & DataTrackingId;
+/**
+ * Props for the SegmentedControlSegment component
+ * @property {string} value - Value of the segment
+ * @property {object} [icon] - Optional icon to display in the segment
+ * @property {string} [data-tracking-id] - Custom tracking ID for analytics
+ * @extends DataTrackingId
+ */
 export type SegmentedControlSegmentProps = CoreSegmentedControlSegmentProps & DataTrackingId;
+/**
+ * SegmentedControlSegment component for individual segments within a segmented control.
+ *
+ * Features:
+ * - Individual segment with radio input
+ * - Optional icon support
+ * - Animated selection indicator
+ * - Accessibility support with proper ARIA attributes
+ * - Context integration with parent SegmentedControl
+ * - Motion animations with reduced motion support
+ * - Icon-only mode when no children provided
+ * - Automatic tracking ID generation for analytics
+ *
+ * @example
+ * <SegmentedControl.Segment value="option1" icon={Icon1}>
+ *   Option 1
+ * </SegmentedControl.Segment>
+ *
+ * @example
+ * <SegmentedControl.Segment value="icon-only" icon={IconOnly} />
+ */
 export declare const SegmentedControlSegment: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref"> & {
     icon?: import('@servicetitan/hammer-react').IconProps["svg"];
     value: string;
+    children?: React.ReactNode;
 } & DataTrackingId & import('react').RefAttributes<HTMLLabelElement>>;
+/**
+ * SegmentedControl component for selecting one option from a group of related choices.
+ *
+ * Features:
+ * - Supports both controlled and uncontrolled modes
+ * - Multiple size variants (small, medium)
+ * - Optional fill width mode
+ * - Smooth animations with motion
+ * - Accessibility support with proper radio group semantics
+ * - Layout utility props for positioning and spacing
+ * - Context-based state management
+ * - Auto-generated or custom name attributes
+ * - Segment support via SegmentedControl.Segment
+ * - Automatic tracking ID generation for analytics
+ *
+ * @example
+ * <SegmentedControl
+ *   selected={selectedValue}
+ *   onChange={setSelectedValue}
+ *   size="medium"
+ * >
+ *   <SegmentedControl.Segment value="option1">Option 1</SegmentedControl.Segment>
+ *   <SegmentedControl.Segment value="option2">Option 2</SegmentedControl.Segment>
+ *   <SegmentedControl.Segment value="option3">Option 3</SegmentedControl.Segment>
+ * </SegmentedControl>
+ *
+ * @example
+ * <SegmentedControl
+ *   defaultSelected="small"
+ *   size="small"
+ *   fill
+ * >
+ *   <SegmentedControl.Segment value="small" icon={SmallIcon}>Small</SegmentedControl.Segment>
+ *   <SegmentedControl.Segment value="large" icon={LargeIcon}>Large</SegmentedControl.Segment>
+ * </SegmentedControl>
+ */
 export declare const SegmentedControl: import('react').ForwardRefExoticComponent<SegmentedControlProps & import('react').RefAttributes<HTMLDivElement>> & {
+    /**
+     * SegmentedControlSegment component for individual segments within a segmented control.
+     *
+     * Features:
+     * - Individual segment with radio input
+     * - Optional icon support
+     * - Animated selection indicator
+     * - Accessibility support with proper ARIA attributes
+     * - Context integration with parent SegmentedControl
+     * - Motion animations with reduced motion support
+     * - Icon-only mode when no children provided
+     * - Automatic tracking ID generation for analytics
+     *
+     * @example
+     * <SegmentedControl.Segment value="option1" icon={Icon1}>
+     *   Option 1
+     * </SegmentedControl.Segment>
+     *
+     * @example
+     * <SegmentedControl.Segment value="icon-only" icon={IconOnly} />
+     */
     Segment: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref"> & {
         icon?: import('@servicetitan/hammer-react').IconProps["svg"];
         value: string;
+        children?: React.ReactNode;
     } & DataTrackingId & import('react').RefAttributes<HTMLLabelElement>>;
 };