@servicetitan/anvil2 1.37.2 → 1.38.0

package/dist/components/Flex/Flex.d.ts

@@ -1,5 +1,53 @@
 import { FlexProps as CoreFlexProps } from '@servicetitan/hammer-react';
+/**
+ * Props for the Flex component
+ * @property {boolean} [inline] - Applies display: inline-flex instead of flex
+ * @property {string} [direction] - The flex direction of the container
+ * @property {string | number} [grow] - The flex grow value for the container
+ * @property {string | number} [shrink] - The flex shrink value for the container
+ * @property {string | number} [basis] - The flex basis value for the container
+ * @property {string} [wrap] - The flex wrap value for the container
+ * @property {object} [sm] - Responsive props for small screens (sm breakpoint)
+ * @property {object} [md] - Responsive props for medium screens (md breakpoint)
+ * @property {object} [lg] - Responsive props for large screens (lg breakpoint)
+ * @property {object} [xl] - Responsive props for extra large screens (xl breakpoint)
+ * @property {object} [xxl] - Responsive props for extra extra large screens (xxl breakpoint)
+ * @extends ComponentPropsWithoutRef<"div">
+ * @extends LayoutUtilProps
+ */
 export type FlexProps = CoreFlexProps;
+/**
+ * Flex component for creating flexible layouts using CSS Flexbox.
+ *
+ * Features:
+ * - CSS Flexbox layout with full control over flex properties
+ * - Support for both flex and inline-flex display modes
+ * - Responsive design with breakpoint-specific props (sm, md, lg, xl, xxl)
+ * - Comprehensive layout utilities for spacing, alignment, and positioning
+ * - Automatic style generation and class management
+ * - Support for all standard div element props
+ * - Flexible direction, grow, shrink, basis, and wrap controls
+ * - Deprecated flexShrink prop with modern shrink alternative
+ * - Automatic tracking ID generation for analytics
+ *
+ * @example
+ * <Flex direction="row" gap="4" alignItems="center">
+ *   <div>Item 1</div>
+ *   <div>Item 2</div>
+ *   <div>Item 3</div>
+ * </Flex>
+ *
+ * @example
+ * <Flex
+ *   direction="column"
+ *   gap="2"
+ *   md={{ direction: "row", gap: "4" }}
+ * >
+ *   <div>Item 1</div>
+ *   <div>Item 2</div>
+ *   <div>Item 3</div>
+ * </Flex>
+ */
 export declare const Flex: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & Omit<import('@servicetitan/hammer-react').LayoutUtilProps, "flexDirection" | "flexGrow" | "flexShrink" | "flexBasis" | "flexWrap"> & {
     inline?: boolean;
     direction?: import('react').CSSProperties["flexDirection"];

package/dist/components/Grid/Grid.d.ts

@@ -1,6 +1,61 @@
 import { GridProps as CoreGridProps, GridItemProps as CoreGridItemProps } from '@servicetitan/hammer-react';
+/**
+ * Props for the Grid component
+ * @property {boolean} [inline] - Applies display: inline-grid instead of grid
+ * @property {string} [templateColumns] - The grid template columns definition
+ * @property {string} [templateRows] - The grid template rows definition
+ * @property {string} [templateAreas] - The grid template areas definition
+ * @property {string} [autoColumns] - The grid auto columns definition
+ * @property {string} [autoRows] - The grid auto rows definition
+ * @property {object} [sm] - Responsive props for small screens (sm breakpoint)
+ * @property {object} [md] - Responsive props for medium screens (md breakpoint)
+ * @property {object} [lg] - Responsive props for large screens (lg breakpoint)
+ * @property {object} [xl] - Responsive props for extra large screens (xl breakpoint)
+ * @property {object} [xxl] - Responsive props for extra extra large screens (xxl breakpoint)
+ * @extends ComponentPropsWithoutRef<"div">
+ * @extends LayoutUtilProps
+ */
 export type GridProps = CoreGridProps;
+/**
+ * Props for the GridItem component
+ * @extends ComponentPropsWithoutRef<"div">
+ * @extends LayoutUtilProps
+ */
 export type GridItemProps = CoreGridItemProps;
+/**
+ * Grid component for creating CSS Grid layouts with responsive design.
+ *
+ * Features:
+ * - CSS Grid layout with full control over grid properties
+ * - Support for both grid and inline-grid display modes
+ * - Responsive design with breakpoint-specific props (sm, md, lg, xl, xxl)
+ * - Comprehensive layout utilities for spacing, alignment, and positioning
+ * - Template columns, rows, and areas configuration
+ * - Auto columns and rows sizing
+ * - Automatic style generation and class management
+ * - Support for all standard div element props
+ * - Flexible grid template and auto-sizing controls
+ * - Automatic tracking ID generation for analytics
+ * - Compound component structure with Item sub-component
+ *
+ * @example
+ * <Grid templateColumns="repeat(3, 1fr)" gap="4">
+ *   <Grid.Item>Grid Item 1</Grid.Item>
+ *   <Grid.Item>Grid Item 2</Grid.Item>
+ *   <Grid.Item>Grid Item 3</Grid.Item>
+ * </Grid>
+ *
+ * @example
+ * <Grid
+ *   templateColumns="repeat(1, 1fr)"
+ *   gap="2"
+ *   md={{ templateColumns: "repeat(3, 1fr)", gap: "4" }}
+ * >
+ *   <Grid.Item>Grid Item 1</Grid.Item>
+ *   <Grid.Item>Grid Item 2</Grid.Item>
+ *   <Grid.Item>Grid Item 3</Grid.Item>
+ * </Grid>
+ */
 export declare const Grid: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     inline?: boolean;
 } & import('@servicetitan/hammer-react').LayoutUtilProps & {
@@ -16,5 +71,24 @@ export declare const Grid: import('react').ForwardRefExoticComponent<Omit<import
     xl?: import('@servicetitan/hammer-react/dist/components/Grid/Grid').GridSpecificProps;
     xxl?: import('@servicetitan/hammer-react/dist/components/Grid/Grid').GridSpecificProps;
 } & import('react').RefAttributes<HTMLDivElement>> & {
+    /**
+     * GridItem component for individual items within a CSS Grid layout.
+     *
+     * Features:
+     * - Individual grid item with full layout utility support
+     * - Automatic grid item styling and class management
+     * - Comprehensive layout utilities for positioning and sizing
+     * - Support for all standard div element props
+     * - Flexible grid positioning and sizing controls
+     * - Automatic style generation and class management
+     * - Works seamlessly with Grid component
+     * - Automatic tracking ID generation for analytics
+     *
+     * @example
+     * <Grid templateColumns="repeat(2, 1fr)" gap="4">
+     *   <Grid.Item>Grid Item 1</Grid.Item>
+     *   <Grid.Item>Grid Item 2</Grid.Item>
+     * </Grid>
+     */
     Item: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import('@servicetitan/hammer-react').LayoutUtilProps & import('react').RefAttributes<HTMLDivElement>>;
 };

package/dist/components/Icon/Icon.d.ts

@@ -1,5 +1,44 @@
 import { IconProps as CoreIconProps } from '@servicetitan/hammer-react';
+/**
+ * Props for the Icon component
+ * @property {string} [color] - Apply a specific color to the icon
+ * @property {string} [size] - The size of the icon (small, medium, large, xlarge)
+ * @property {Svg} svg - Assets passed in using svgr
+ * @property {boolean} [inherit] - Whether the icon should inherit the color from its parent element
+ * @extends Omit<ComponentPropsWithoutRef<"span">, "children">
+ * @extends Omit<LayoutUtilProps, "flex" | "flexBasis" | "flexGrow" | "flexShrink">
+ */
 export type IconProps = CoreIconProps;
+/**
+ * Icon component for displaying SVG icons with consistent styling and sizing.
+ *
+ * Features:
+ * - SVG icon rendering with consistent styling
+ * - Four predefined sizes: small, medium, large, xlarge
+ * - Custom color support with optional inheritance
+ * - Layout utilities for positioning and spacing
+ * - Focus management with visible focus indicators
+ * - Automatic style generation and class management
+ * - Support for all standard span element props
+ * - Flexible color inheritance and custom color options
+ * - Consistent sizing across different icon sets
+ * - Automatic tracking ID generation for analytics
+ *
+ * @example
+ * import Close from "@servicetitan/hammer-icon/mdi/round/close.svg";
+ *
+ * <Icon svg={Close} size="medium" />
+ *
+ * @example
+ * import Info from "@servicetitan/hammer-icon/mdi/round/info.svg";
+ *
+ * <Icon
+ *   svg={Info}
+ *   size="large"
+ *   color="#007bff"
+ *   inherit={false}
+ * />
+ */
 export declare const Icon: import('react').ForwardRefExoticComponent<Omit<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref">, "children"> & Omit<import('@servicetitan/hammer-react').LayoutUtilProps, "flex" | "flexGrow" | "flexShrink" | "flexBasis"> & {
     color?: string;
     size?: Extract<import('@servicetitan/hammer-react').Size, "small" | "medium" | "large" | "xlarge">;

package/dist/components/InputMask/InputMask.d.ts

@@ -1,5 +1,62 @@
 import { InputMaskProps as CoreInputMaskProps } from '@servicetitan/hammer-react';
+/**
+ * Props for the InputMask component
+ * @property {string} mask - The mask pattern to apply to the input (9 for digits, a for letters, * for alphanumeric)
+ * @property {string} [defaultMaskCharacter] - Character to display for unfilled mask positions
+ * @property {array} [customMaskHandler] - Array of custom mask handlers for advanced transformations
+ * @property {object} [inputProps] - Props to pass to the input component
+ * @property {ReactElement} [children] - Custom input element to be wrapped with mask functionality
+ * @property {string} [data-tracking-id] - Custom tracking ID for analytics
+ */
 export type InputMaskProps = CoreInputMaskProps & {
     ["data-tracking-id"]?: string;
 };
+/**
+ * InputMask component for applying input masks and formatting to text inputs.
+ *
+ * Features:
+ * - Input masking with configurable patterns (9, a, *, fixed characters)
+ * - Support for both controlled and uncontrolled inputs
+ * - Custom input elements or default TextField integration
+ * - Advanced cursor positioning and selection management
+ * - Custom mask handlers for complex transformations
+ * - Paste and keyboard event handling
+ * - Automatic mask character replacement
+ * - Focus and blur event management
+ * - Accessible with proper ARIA attributes
+ * - Support for all standard input element props
+ * - Flexible mask pattern configuration
+ * - Real-time input validation and formatting
+ * - Automatic tracking ID generation for analytics
+ *
+ * @example
+ * <InputMask
+ *   mask="99/99/9999"
+ *   inputProps={{ label: "Date", hint: "mm/dd/yyyy" }}
+ * />
+ *
+ * @example
+ * <InputMask mask="(999) 999-9999">
+ *   <TextField label="Phone Number" hint="(555) 123-4567" />
+ * </InputMask>
+ *
+ * @example
+ * <InputMask
+ *   mask="99/99/9999"
+ *   customMaskHandler={[
+ *     {
+ *       match: {
+ *         matchPattern: /^(\d)\//,
+ *         startPosition: 0,
+ *         endPosition: 2,
+ *       },
+ *       apply: {
+ *         applyPattern: "0$1",
+ *         caretOffset: 2,
+ *       },
+ *     },
+ *   ]}
+ *   inputProps={{ label: "Date with custom handler" }}
+ * />
+ */
 export declare const InputMask: import('react').ForwardRefExoticComponent<InputMaskProps & import('react').RefAttributes<HTMLInputElement>>;

package/dist/components/Layout/Layout.d.ts

@@ -1,41 +1,172 @@
 import { ComponentPropsWithoutRef } from 'react';
+/**
+ * Props for the Layout component.
+ */
 export type LayoutProps = ComponentPropsWithoutRef<"div"> & {
+    /** Whether the layout should be fluid (full width) instead of constrained */
     fluid?: boolean;
+    /** The spacing variant for the layout grid */
     variant?: "default" | "wide" | "narrow";
 };
+/**
+ * Layout container component that provides a responsive grid system.
+ *
+ * Features:
+ * - CSS Grid-based responsive layout system
+ * - Container with max-width constraint (1280px) by default
+ * - Fluid option for full-width layouts
+ * - Three spacing variants: default, wide, and narrow
+ * - Container queries for responsive behavior
+ * - Automatic tracking ID generation for analytics
+ * - Semantic HTML structure with proper accessibility
+ * - Flexible content area for child Layout.Item components
+ * - Consistent spacing and alignment across breakpoints
+ *
+ * @example
+ * <Layout>
+ *   <Layout.Item span={6}>Left Column</Layout.Item>
+ *   <Layout.Item span={6}>Right Column</Layout.Item>
+ * </Layout>
+ *
+ * @example
+ * <Layout fluid variant="wide">
+ *   <Layout.Item span={4}>Column 1</Layout.Item>
+ *   <Layout.Item span={4}>Column 2</Layout.Item>
+ *   <Layout.Item span={4}>Column 3</Layout.Item>
+ * </Layout>
+ *
+ * @example
+ * <Layout variant="narrow">
+ *   <Layout.Item span={12}>
+ *     <h1>Full Width Content</h1>
+ *     <p>This content spans the full width of the layout.</p>
+ *   </Layout.Item>
+ * </Layout>
+ */
 export declare const LayoutElement: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    /** Whether the layout should be fluid (full width) instead of constrained */
     fluid?: boolean;
+    /** The spacing variant for the layout grid */
     variant?: "default" | "wide" | "narrow";
 } & import('react').RefAttributes<HTMLDivElement>>;
+/**
+ * Props for the Layout.Item component.
+ */
 export type LayoutItemProps = ComponentPropsWithoutRef<"div"> & {
+    /** Default span across all breakpoints (1-12) */
     span?: number;
+    /** Extra small breakpoint span (1-12) */
     xs?: number;
+    /** Small breakpoint span (1-12) */
     sm?: number;
+    /** Medium breakpoint span (1-12) */
     md?: number;
+    /** Large breakpoint span (1-12) */
     lg?: number;
+    /** Extra large breakpoint span (1-12) */
     xl?: number;
+    /** Extra extra large breakpoint span (1-12) */
     xxl?: number;
 };
+/**
+ * Layout item component that defines grid columns within a Layout container.
+ *
+ * Features:
+ * - Responsive grid columns with breakpoint-specific spans
+ * - 12-column grid system for flexible layouts
+ * - Breakpoint-specific span controls (xs, sm, md, lg, xl, xxl)
+ * - Default span fallback for all breakpoints
+ * - Automatic responsive behavior using container queries
+ * - Semantic HTML structure with proper accessibility
+ * - Flexible content area for any child components
+ * - Consistent spacing and alignment with parent Layout
+ * - Automatic tracking ID generation for analytics
+ *
+ * Breakpoints:
+ * - xs: Extra small (mobile)
+ * - sm: Small (tablet portrait)
+ * - md: Medium (tablet landscape)
+ * - lg: Large (desktop)
+ * - xl: Extra large (large desktop)
+ * - xxl: Extra extra large (ultra-wide)
+ *
+ * @example
+ * <Layout>
+ *   <Layout.Item span={6} md={4} lg={3}>
+ *     <Card>Responsive Card</Card>
+ *   </Layout.Item>
+ *   <Layout.Item span={6} md={8} lg={9}>
+ *     <Card>Main Content</Card>
+ *   </Layout.Item>
+ * </Layout>
+ *
+ * @example
+ * <Layout>
+ *   <Layout.Item span={12} md={6}>
+ *     <h2>Left Column</h2>
+ *     <p>This takes full width on mobile, half width on medium+ screens.</p>
+ *   </Layout.Item>
+ *   <Layout.Item span={12} md={6}>
+ *     <h2>Right Column</h2>
+ *     <p>This also takes full width on mobile, half width on medium+ screens.</p>
+ *   </Layout.Item>
+ * </Layout>
+ *
+ * @example
+ * <Layout variant="wide">
+ *   <Layout.Item span={1} sm={2} md={3} lg={4}>
+ *     <Button>Small Button</Button>
+ *   </Layout.Item>
+ *   <Layout.Item span={11} sm={10} md={9} lg={8}>
+ *     <TextField placeholder="Search..." />
+ *   </Layout.Item>
+ * </Layout>
+ */
 export declare const LayoutItem: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    /** Default span across all breakpoints (1-12) */
     span?: number;
+    /** Extra small breakpoint span (1-12) */
     xs?: number;
+    /** Small breakpoint span (1-12) */
     sm?: number;
+    /** Medium breakpoint span (1-12) */
     md?: number;
+    /** Large breakpoint span (1-12) */
     lg?: number;
+    /** Extra large breakpoint span (1-12) */
     xl?: number;
+    /** Extra extra large breakpoint span (1-12) */
     xxl?: number;
 } & import('react').RefAttributes<HTMLDivElement>>;
+/**
+ * Layout component with compound component pattern.
+ *
+ * @example
+ * <Layout>
+ *   <Layout.Item span={6}>Left</Layout.Item>
+ *   <Layout.Item span={6}>Right</Layout.Item>
+ * </Layout>
+ */
 export declare const Layout: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    /** Whether the layout should be fluid (full width) instead of constrained */
     fluid?: boolean;
+    /** The spacing variant for the layout grid */
     variant?: "default" | "wide" | "narrow";
 } & import('react').RefAttributes<HTMLDivElement>> & {
     Item: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+        /** Default span across all breakpoints (1-12) */
         span?: number;
+        /** Extra small breakpoint span (1-12) */
         xs?: number;
+        /** Small breakpoint span (1-12) */
         sm?: number;
+        /** Medium breakpoint span (1-12) */
         md?: number;
+        /** Large breakpoint span (1-12) */
         lg?: number;
+        /** Extra large breakpoint span (1-12) */
         xl?: number;
+        /** Extra extra large breakpoint span (1-12) */
         xxl?: number;
     } & import('react').RefAttributes<HTMLDivElement>>;
 };

package/dist/components/Link/Link.d.ts

@@ -1,5 +1,10 @@
 import { LinkProps as CoreLinkProps } from '@servicetitan/hammer-react';
 import { DataTrackingId } from '../../types/DataTrackingId';
+/**
+ * Props for the Link component.
+ * @extends Omit<CoreLinkProps, "href">
+ * @extends DataTrackingId
+ */
 export type LinkProps = Omit<CoreLinkProps, "href"> & DataTrackingId & ({
     pathname?: never;
     search?: never;
@@ -14,12 +19,54 @@ export type LinkProps = Omit<CoreLinkProps, "href"> & DataTrackingId & ({
     href?: never;
 }) & ({
     /**
+     * The visual appearance of the link.
      * @default "primary"
      */
     appearance?: "primary";
+    /** Whether the link should have a quieter, less prominent appearance */
     quiet?: boolean;
 } | {
+    /** The visual appearance of the link. Secondary appearance cannot be quiet. */
     appearance: "secondary";
     quiet?: false;
 });
+/**
+ * Link component for creating accessible, styled hyperlinks with tracking support.
+ *
+ * Features:
+ * - Two visual appearances: primary (default) and secondary
+ * - Quiet mode for less prominent styling
+ * - Automatic external link icon for target="_blank" links
+ * - Security attributes (rel="noopener noreferrer") for external links
+ * - Full accessibility support with proper focus management
+ * - Supports layout utilities for positioning and spacing
+ * - Flexible content support for text and other elements
+ * - Responsive design with consistent typography
+ * - Hover and focus states with proper visual feedback
+ * - Screen reader support for external link announcements
+ * - Automatic tracking ID generation for analytics
+ * - Client-side navigation support with pathname and search params
+ * - History API integration for single-page application navigation
+ *
+ * @example
+ * <Link href="/dashboard" appearance="primary">
+ *   Go to Dashboard
+ * </Link>
+ *
+ * @example
+ * <Link pathname="/settings" search="?tab=profile">
+ *   Profile Settings
+ * </Link>
+ *
+ * @example
+ * <Link href="https://example.com" target="_blank" quiet>
+ *   External Documentation
+ * </Link>
+ *
+ * @example
+ * <Link href="/profile" gap="2" alignItems="center">
+ *   <Avatar name="John Doe" size="small" />
+ *   View Profile
+ * </Link>
+ */
 export declare const Link: import('react').ForwardRefExoticComponent<LinkProps & import('react').RefAttributes<HTMLAnchorElement>>;

package/dist/components/ListView/ListView.d.ts

@@ -1,15 +1,100 @@
 import { ListViewProps as CoreListViewProps, ListViewOptionProps as CoreListViewOptionProps } from '@servicetitan/hammer-react';
 import { ForwardedRef } from 'react';
 import { DataTrackingId } from '../../types/DataTrackingId';
+/**
+ * Props for the ListView component
+ * @property {function} [onSelectionChange] - Callback when selection changes
+ * @property {Array} [selected] - Currently selected items (controlled)
+ * @property {Array} [items] - Array of items to render
+ * @property {Array} [defaultSelected] - Default selected items (uncontrolled)
+ * @property {function} [children] - Optional render function for items
+ * @extends LayoutUtilProps
+ */
 export type ListViewProps<T> = CoreListViewProps<T>;
+/**
+ * Props for the ListViewOption component
+ * @property {boolean} [disabled] - Whether the option is disabled
+ * @property {function} [onChange] - Callback when the option changes
+ * @property {object} [item] - The item object when using items prop
+ * @property {string} [label] - The display label for the option
+ * @extends ComponentPropsWithoutRef<"div">
+ */
 export type ListViewOptionProps = CoreListViewOptionProps & DataTrackingId;
 declare const ListViewElement: <T>(props: ListViewProps<T>, ref: ForwardedRef<HTMLUListElement>) => import("react/jsx-runtime").JSX.Element;
+/**
+ * ListViewOption component for individual selectable items within a listview.
+ *
+ * Features:
+ * - Displays selectable options with proper ARIA attributes
+ * - Supports disabled state for non-selectable options
+ * - Keyboard navigation support
+ * - Accessible with screen reader support
+ * - Automatic tracking ID generation for analytics
+ *
+ * @example
+ * <ListView.Option item={{ label: "Option 1" }} />
+ */
 export declare const ListViewOption: import('react').ForwardRefExoticComponent<ListViewOptionProps & import('react').RefAttributes<HTMLDivElement>>;
+/**
+ * ListViewOptionCell component for rendering a cell within a listview option.
+ *
+ * Features:
+ * - Renders a grid cell for option content
+ * - Supports custom content and layout
+ * - Accessible with proper ARIA attributes
+ *
+ * @example
+ * <ListView.OptionCell>Custom cell content</ListView.OptionCell>
+ */
 export declare const ListViewOptionCell: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+/**
+ * ListView component for displaying a list of selectable items in a grid layout.
+ *
+ * Features:
+ * - Supports single and multiple selection modes
+ * - Keyboard navigation with arrow keys
+ * - Customizable item rendering
+ * - Controlled and uncontrolled modes
+ * - Accessible with proper ARIA attributes
+ * - Focus management for interactive elements
+ * - Layout utilities for positioning and spacing
+ * - Automatic tracking ID generation for analytics
+ *
+ * @example
+ * <ListView items={[{ label: "Item 1" }, { label: "Item 2" }]} onSelectionChange={handleSelection}>
+ *   {({ items }) => items.map(item => (
+ *     <ListView.Option key={item.label} item={item} />
+ *   ))}
+ * </ListView>
+ */
 export declare const ListView: (<T>(props: ListViewProps<T> & {
     ref?: React.ForwardedRef<HTMLUListElement>;
 }) => ReturnType<typeof ListViewElement>) & {
+    /**
+     * ListViewOption component for individual selectable items within a listview.
+     *
+     * Features:
+     * - Displays selectable options with proper ARIA attributes
+     * - Supports disabled state for non-selectable options
+     * - Keyboard navigation support
+     * - Accessible with screen reader support
+     * - Automatic tracking ID generation for analytics
+     *
+     * @example
+     * <ListView.Option item={{ label: "Option 1" }} />
+     */
     Option: import('react').ForwardRefExoticComponent<ListViewOptionProps & import('react').RefAttributes<HTMLDivElement>>;
+    /**
+     * ListViewOptionCell component for rendering a cell within a listview option.
+     *
+     * Features:
+     * - Renders a grid cell for option content
+     * - Supports custom content and layout
+     * - Accessible with proper ARIA attributes
+     *
+     * @example
+     * <ListView.OptionCell>Custom cell content</ListView.OptionCell>
+     */
     OptionCell: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
 };
 export {};