@servicetitan/anvil2 1.37.2 → 1.38.0

package/dist/components/Page/Page.d.ts

@@ -5,84 +5,527 @@ import { ButtonProps } from '../Button';
 import { ButtonLinkProps } from '../ButtonLink';
 import { ChipProps } from '../Chip';
 import { LayoutProps } from '../Layout';
+/**
+ * Props for the PageSidebar component
+ * @extends ComponentPropsWithoutRef<"div">
+ */
 export type PageSidebarProps = ComponentPropsWithoutRef<"div"> & {
+    /**
+     * Key for storing sidebar collapsed state in localStorage
+     * @default "sidebar-collapsed"
+     */
     localStorageKey?: string;
+    /**
+     * Custom tracking ID for analytics
+     */
     ["data-tracking-id"]?: string;
+    /**
+     * Title to display in the adaptive trigger button
+     */
     currentPageTitle?: string;
 };
+/**
+ * PageSidebar component for creating collapsible navigation sidebars.
+ *
+ * Features:
+ * - Collapsible sidebar with localStorage persistence
+ * - Responsive design with adaptive popover on mobile
+ * - Automatic tracking ID generation for analytics
+ * - Keyboard navigation and accessibility support
+ * - Toggle button with tooltip
+ * - Context provider for sidebar state
+ * - Mobile-friendly popover navigation
+ *
+ * @example
+ * <Page.Sidebar currentPageTitle="Navigation">
+ *   <Page.SidebarHeader>
+ *     <Text variant="headline" el="h2">Sidebar Title</Text>
+ *   </Page.SidebarHeader>
+ *   <SideNav>
+ *     <SideNavLink pathname="/">Home</SideNavLink>
+ *   </SideNav>
+ * </Page.Sidebar>
+ */
 export declare const PageSidebar: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    /**
+     * Key for storing sidebar collapsed state in localStorage
+     * @default "sidebar-collapsed"
+     */
     localStorageKey?: string;
+    /**
+     * Custom tracking ID for analytics
+     */
     "data-tracking-id"?: string;
+    /**
+     * Title to display in the adaptive trigger button
+     */
     currentPageTitle?: string;
 } & import('react').RefAttributes<HTMLDivElement>>;
+/**
+ * Props for the PageSidebarHeader component
+ * @extends ComponentPropsWithoutRef<"div">
+ */
 export type PageSidebarHeaderProps = ComponentPropsWithoutRef<"div">;
+/**
+ * PageSidebarHeader component for creating header sections within sidebars.
+ *
+ * Features:
+ * - Container for sidebar header content
+ * - Automatic visibility handling based on sidebar collapsed state
+ * - Supports all standard div props
+ * - Context-aware styling
+ *
+ * @example
+ * <Page.SidebarHeader>
+ *   <Text variant="headline" el="h2" size="medium">
+ *     Sidebar Title
+ *   </Text>
+ * </Page.SidebarHeader>
+ */
 export declare const PageSidebarHeader: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+/**
+ * Props for the PagePanel component
+ * @extends ComponentPropsWithoutRef<"div">
+ */
 export type PagePanelProps = ComponentPropsWithoutRef<"div"> & {
+    /**
+     * Whether the panel is open
+     * @default true
+     */
     open?: boolean;
+    /**
+     * Size of the panel
+     * @default "medium"
+     */
     size?: "small" | "medium" | "large";
+    /**
+     * Whether to remove default padding from the panel
+     * @default false
+     */
     noPadding?: boolean;
 };
+/**
+ * PagePanel component for creating slide-out panels or dialogs.
+ *
+ * Features:
+ * - Responsive design with dialog fallback on mobile
+ * - Multiple size variants (small, medium, large)
+ * - Optional padding control
+ * - Persistent or controlled open state
+ * - Automatic mobile dialog conversion
+ * - Keyboard navigation and accessibility support
+ * - Smooth animations and transitions
+ *
+ * @example
+ * <Page.Panel open={isOpen} size="medium">
+ *   <Text variant="headline" el="h3">Panel Content</Text>
+ *   <Button onClick={() => setIsOpen(false)}>Close</Button>
+ * </Page.Panel>
+ */
 export declare const PagePanel: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    /**
+     * Whether the panel is open
+     * @default true
+     */
     open?: boolean;
+    /**
+     * Size of the panel
+     * @default "medium"
+     */
     size?: "small" | "medium" | "large";
+    /**
+     * Whether to remove default padding from the panel
+     * @default false
+     */
     noPadding?: boolean;
 } & import('react').RefAttributes<HTMLDivElement>>;
+/**
+ * Props for page header action buttons
+ */
 type PageHeaderActionProps = Omit<ButtonProps, "appearance"> & {
+    /**
+     * Label text for the action button
+     */
     label: string;
 };
+/**
+ * Props for page header actions configuration
+ */
 type PageHeaderActionsProps = {
+    /**
+     * Primary action button
+     */
     primary?: PageHeaderActionProps;
+    /**
+     * Array of secondary action buttons
+     */
     secondary?: PageHeaderActionProps[];
 };
+/**
+ * Base props for preference actions
+ */
 type BasePreferenceProps = {
+    /**
+     * Accessible label for the preference action
+     */
     "aria-label": string;
 };
+/**
+ * Props for preference button actions
+ */
 type PreferenceButtonProps = Omit<ButtonProps, "aria-label" | "icon" | "appearance" | "size" | "className"> & BasePreferenceProps;
+/**
+ * Props for preference link actions
+ */
 type PreferenceLinkProps = Omit<ButtonLinkProps, "aria-label" | "icon" | "appearance" | "size" | "className"> & BasePreferenceProps;
+/**
+ * Props for the PageHeader component
+ * @extends ComponentPropsWithoutRef<"header">
+ */
 export type PageHeaderProps = ComponentPropsWithoutRef<"header"> & {
+    /**
+     * Main title of the page
+     */
     title: string;
+    /**
+     * Breadcrumb navigation links
+     */
     breadcrumbs?: BreadcrumbsLinkProps[];
+    /**
+     * Status chips to display
+     */
     chips?: ChipProps[];
+    /**
+     * Description text or content below the title
+     */
     description?: ReactNode;
+    /**
+     * Primary and secondary action buttons
+     */
     actions?: PageHeaderActionsProps;
+    /**
+     * Preference action button or link
+     */
     preferenceAction?: PreferenceButtonProps | PreferenceLinkProps;
+    /**
+     * Layout configuration for the header
+     */
     layout?: LayoutProps;
 };
+/**
+ * PageHeader component for creating page headers with navigation and actions.
+ *
+ * Features:
+ * - Page title with semantic heading
+ * - Breadcrumb navigation support
+ * - Status chips display
+ * - Primary and secondary action buttons
+ * - Preference action button/link
+ * - Responsive layout with fluid grid
+ * - Accessibility support with proper ARIA labels
+ * - Flexible layout configuration
+ * - Description content support
+ *
+ * @example
+ * <Page.Header
+ *   title="Page Title"
+ *   breadcrumbs={[
+ *     { href: "/", children: "Home" },
+ *     { children: "Current Page" }
+ *   ]}
+ *   chips={[{ label: "Status" }]}
+ *   actions={{
+ *     primary: { label: "Save", onClick: handleSave },
+ *     secondary: [{ label: "Cancel", onClick: handleCancel }]
+ *   }}
+ * />
+ */
 export declare const PageHeader: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & {
+    /**
+     * Main title of the page
+     */
     title: string;
+    /**
+     * Breadcrumb navigation links
+     */
     breadcrumbs?: BreadcrumbsLinkProps[];
+    /**
+     * Status chips to display
+     */
     chips?: ChipProps[];
+    /**
+     * Description text or content below the title
+     */
     description?: ReactNode;
+    /**
+     * Primary and secondary action buttons
+     */
     actions?: PageHeaderActionsProps;
+    /**
+     * Preference action button or link
+     */
     preferenceAction?: PreferenceButtonProps | PreferenceLinkProps;
+    /**
+     * Layout configuration for the header
+     */
     layout?: LayoutProps;
 } & import('react').RefAttributes<HTMLHeadElement>>;
+/**
+ * Props for the PageContent component
+ * @extends ComponentPropsWithoutRef<"main">
+ */
 export type PageContentProps = ComponentPropsWithoutRef<"main">;
+/**
+ * PageContent component for the main content area of a page.
+ *
+ * Features:
+ * - Semantic main element for page content
+ * - Virtual scrolling support for long content
+ * - Automatic scroll synchronization
+ * - Responsive design
+ * - Accessibility support with proper main landmark
+ * - Scroll position management
+ *
+ * @example
+ * <Page.Content>
+ *   <Text>Main page content goes here</Text>
+ *   <Button>Action Button</Button>
+ * </Page.Content>
+ */
 export declare const PageContent: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & import('react').RefAttributes<HTMLAreaElement>>;
+/**
+ * Props for the Page component
+ * @extends ComponentPropsWithoutRef<"div">
+ */
 export type PageProps = ComponentPropsWithoutRef<"div">;
+/**
+ * Props for the PageFooter component
+ * @extends ComponentPropsWithoutRef<"div">
+ * @extends LayoutUtilProps
+ */
 export type PageFooterProps = ComponentPropsWithoutRef<"div"> & LayoutUtilProps;
+/**
+ * Page component for creating full-page layouts with navigation and content areas.
+ *
+ * Features:
+ * - Container for complete page layouts
+ * - Supports sidebar navigation with collapsible state
+ * - Header with breadcrumbs, chips, and action buttons
+ * - Main content area with virtual scrolling
+ * - Optional slide-out panels with responsive dialog fallback
+ * - Footer with layout utilities
+ * - Responsive design with mobile adaptations
+ * - Accessibility support with proper landmarks
+ * - Automatic tracking ID generation for analytics
+ * - Local storage persistence for sidebar state
+ *
+ * @example
+ * <Page>
+ *   <Page.Sidebar currentPageTitle="Navigation">
+ *     <Page.SidebarHeader>
+ *       <Text variant="headline" el="h2">Navigation</Text>
+ *     </Page.SidebarHeader>
+ *     <SideNav>
+ *       <SideNavLink pathname="/">Home</SideNavLink>
+ *     </SideNav>
+ *   </Page.Sidebar>
+ *   <Page.Header
+ *     title="Page Title"
+ *     breadcrumbs={[{ href: "/", children: "Home" }]}
+ *     actions={{ primary: { label: "Save", onClick: handleSave } }}
+ *   />
+ *   <Page.Content>
+ *     <Text>Main content</Text>
+ *   </Page.Content>
+ *   <Page.Panel open={isPanelOpen} size="medium">
+ *     <Text>Panel content</Text>
+ *   </Page.Panel>
+ *   <Page.Footer>
+ *     <Text>Footer content</Text>
+ *   </Page.Footer>
+ * </Page>
+ */
 export declare const Page: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>> & {
+    /**
+     * PageSidebar component for creating collapsible navigation sidebars.
+     *
+     * Features:
+     * - Collapsible sidebar with localStorage persistence
+     * - Responsive design with adaptive popover on mobile
+     * - Automatic tracking ID generation for analytics
+     * - Keyboard navigation and accessibility support
+     * - Toggle button with tooltip
+     * - Context provider for sidebar state
+     * - Mobile-friendly popover navigation
+     *
+     * @example
+     * <Page.Sidebar currentPageTitle="Navigation">
+     *   <Page.SidebarHeader>
+     *     <Text variant="headline" el="h2">Sidebar Title</Text>
+     *   </Page.SidebarHeader>
+     *   <SideNav>
+     *     <SideNavLink pathname="/">Home</SideNavLink>
+     *   </SideNav>
+     * </Page.Sidebar>
+     */
     Sidebar: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+        /**
+         * Key for storing sidebar collapsed state in localStorage
+         * @default "sidebar-collapsed"
+         */
         localStorageKey?: string;
+        /**
+         * Custom tracking ID for analytics
+         */
         "data-tracking-id"?: string;
+        /**
+         * Title to display in the adaptive trigger button
+         */
         currentPageTitle?: string;
     } & import('react').RefAttributes<HTMLDivElement>>;
+    /**
+     * PageSidebarHeader component for creating header sections within sidebars.
+     *
+     * Features:
+     * - Container for sidebar header content
+     * - Automatic visibility handling based on sidebar collapsed state
+     * - Supports all standard div props
+     * - Context-aware styling
+     *
+     * @example
+     * <Page.SidebarHeader>
+     *   <Text variant="headline" el="h2" size="medium">
+     *     Sidebar Title
+     *   </Text>
+     * </Page.SidebarHeader>
+     */
     SidebarHeader: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+    /**
+     * PageHeader component for creating page headers with navigation and actions.
+     *
+     * Features:
+     * - Page title with semantic heading
+     * - Breadcrumb navigation support
+     * - Status chips display
+     * - Primary and secondary action buttons
+     * - Preference action button/link
+     * - Responsive layout with fluid grid
+     * - Accessibility support with proper ARIA labels
+     * - Flexible layout configuration
+     * - Description content support
+     *
+     * @example
+     * <Page.Header
+     *   title="Page Title"
+     *   breadcrumbs={[
+     *     { href: "/", children: "Home" },
+     *     { children: "Current Page" }
+     *   ]}
+     *   chips={[{ label: "Status" }]}
+     *   actions={{
+     *     primary: { label: "Save", onClick: handleSave },
+     *     secondary: [{ label: "Cancel", onClick: handleCancel }]
+     *   }}
+     * />
+     */
     Header: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & {
+        /**
+         * Main title of the page
+         */
         title: string;
+        /**
+         * Breadcrumb navigation links
+         */
         breadcrumbs?: BreadcrumbsLinkProps[];
+        /**
+         * Status chips to display
+         */
         chips?: ChipProps[];
+        /**
+         * Description text or content below the title
+         */
         description?: ReactNode;
+        /**
+         * Primary and secondary action buttons
+         */
         actions?: PageHeaderActionsProps;
+        /**
+         * Preference action button or link
+         */
         preferenceAction?: PreferenceButtonProps | PreferenceLinkProps;
+        /**
+         * Layout configuration for the header
+         */
         layout?: LayoutProps;
     } & import('react').RefAttributes<HTMLHeadElement>>;
+    /**
+     * PageContent component for the main content area of a page.
+     *
+     * Features:
+     * - Semantic main element for page content
+     * - Virtual scrolling support for long content
+     * - Automatic scroll synchronization
+     * - Responsive design
+     * - Accessibility support with proper main landmark
+     * - Scroll position management
+     *
+     * @example
+     * <Page.Content>
+     *   <Text>Main page content goes here</Text>
+     *   <Button>Action Button</Button>
+     * </Page.Content>
+     */
     Content: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & import('react').RefAttributes<HTMLAreaElement>>;
+    /**
+     * PagePanel component for creating slide-out panels or dialogs.
+     *
+     * Features:
+     * - Responsive design with dialog fallback on mobile
+     * - Multiple size variants (small, medium, large)
+     * - Optional padding control
+     * - Persistent or controlled open state
+     * - Automatic mobile dialog conversion
+     * - Keyboard navigation and accessibility support
+     * - Smooth animations and transitions
+     *
+     * @example
+     * <Page.Panel open={isOpen} size="medium">
+     *   <Text variant="headline" el="h3">Panel Content</Text>
+     *   <Button onClick={() => setIsOpen(false)}>Close</Button>
+     * </Page.Panel>
+     */
     Panel: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+        /**
+         * Whether the panel is open
+         * @default true
+         */
         open?: boolean;
+        /**
+         * Size of the panel
+         * @default "medium"
+         */
         size?: "small" | "medium" | "large";
+        /**
+         * Whether to remove default padding from the panel
+         * @default false
+         */
         noPadding?: boolean;
     } & import('react').RefAttributes<HTMLDivElement>>;
+    /**
+     * PageFooter component for creating page footers with layout utilities.
+     *
+     * Features:
+     * - Semantic footer element
+     * - Layout utility props support
+     * - Responsive design
+     * - Accessibility support with proper footer landmark
+     * - Flexible content positioning
+     *
+     * @example
+     * <Page.Footer>
+     *   <Text>Footer content with layout utilities</Text>
+     * </Page.Footer>
+     */
     Footer: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & LayoutUtilProps & import('react').RefAttributes<HTMLDivElement>>;
 };
 export {};