@aircall/blocks
Version:
Aircall Blocks — higher-level UI compositions built on @aircall/ds
6,445 lines • 443 kB
TypeScript
import { Alert, Badge, Button, Calendar, Card, CardAction, CardContent, CardDescription, CardHeader, CardTitle, CarouselApi, Combobox, CounterBadge, DataCombobox, DialogClose, DialogContent, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, Field, Popover, SidebarProvider, Skeleton, StepDefinition, Stepper, StepperContent, TabsList, ToggleGroup, useSidebar } from "@aircall/ds";
import * as React$1 from "react";
import { VariantProps } from "class-variance-authority";
import { useRender } from "@base-ui/react/use-render";
import { CountryCode } from "@aircall/numbers";
import { Popover as Popover$1 } from "@base-ui/react/popover";
import { DeepKeys, DeepKeysOfType, DeepValue, FieldAsyncValidateOrFn, FieldListeners, FieldValidateOrFn, FieldValidators } from "@tanstack/react-form";
//#region src/components/empty-state.d.ts
/** Generic root. Anchor of the family + escape hatch for ad-hoc empty states. */
declare const EmptyState: React$1.ForwardRefExoticComponent<Omit<EmptyStateProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
interface EmptyStateProps extends React$1.ComponentProps<typeof Empty> {}
declare namespace EmptyState {
type Props = EmptyStateProps;
}
/** Groups the media, title and description with the design's spacing. */
declare const EmptyStateHeader: React$1.ForwardRefExoticComponent<Omit<EmptyStateHeaderProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
interface EmptyStateHeaderProps extends React$1.ComponentProps<typeof EmptyHeader> {}
declare namespace EmptyStateHeader {
type Props = EmptyStateHeaderProps;
}
/** Decorative media slot (icon/avatar). Hidden from assistive tech. */
declare const EmptyStateMedia: React$1.ForwardRefExoticComponent<Omit<EmptyStateMediaProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
type EmptyStateMediaProps = Omit<React$1.ComponentProps<typeof EmptyMedia>, 'variant'>;
declare namespace EmptyStateMedia {
type Props = EmptyStateMediaProps;
}
/** Title line of an empty state. Wraps the DS `EmptyTitle`. */
declare const EmptyStateTitle: React$1.ForwardRefExoticComponent<Omit<EmptyStateTitleProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
interface EmptyStateTitleProps extends React$1.ComponentProps<typeof EmptyTitle> {}
declare namespace EmptyStateTitle {
type Props = EmptyStateTitleProps;
}
/** Supporting description text of an empty state. Wraps the DS `EmptyDescription`. */
declare const EmptyStateDescription: React$1.ForwardRefExoticComponent<Omit<EmptyStateDescriptionProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
interface EmptyStateDescriptionProps extends React$1.ComponentProps<typeof EmptyDescription> {}
declare namespace EmptyStateDescription {
type Props = EmptyStateDescriptionProps;
}
/**
* Row of action buttons below the header. Lays buttons out horizontally
* (wrapping when needed), matching the design. Place an `EmptyStateExternalLink`
* link as a sibling after it — not inside — to sit on its own line below.
*/
declare const EmptyStateActions: React$1.ForwardRefExoticComponent<Omit<EmptyStateActionsProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
interface EmptyStateActionsProps extends React$1.ComponentProps<typeof EmptyContent> {}
declare namespace EmptyStateActions {
type Props = EmptyStateActionsProps;
}
type EmptyStateButtonProps = Omit<React$1.ComponentProps<typeof Button>, 'size'>;
/**
* Action button for an empty state — the only button allowed inside one. Wraps
* the DS `Button` with `size` locked to `default` for visual consistency across
* empty states; consumers still choose the `variant`.
*/
declare const EmptyStateButton: React$1.ForwardRefExoticComponent<Omit<EmptyStateButtonProps, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
declare namespace EmptyStateButton {
type Props = EmptyStateButtonProps;
}
type EmptyStateExternalLinkProps = Omit<EmptyStateButtonProps, 'variant' | 'render'> & {
href: string;
};
/**
* External "Learn more"-style link for an empty state. Renders a real `<a>` (via
* `EmptyStateButton` with `variant="link"`) that opens in a new tab. Pass
* `children` to override the default "Learn more" label, including any icon.
*
* @default children "Learn more"
*/
declare const EmptyStateExternalLink: React$1.ForwardRefExoticComponent<Omit<EmptyStateExternalLinkProps, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
declare namespace EmptyStateExternalLink {
type Props = EmptyStateExternalLinkProps;
}
//#endregion
//#region src/components/coming-soon.d.ts
/**
* Root of the "Coming soon" empty state — shown when a feature exists in the UI
* but is not yet available. Renders a `<div>` (the DS `Empty` container); compose
* it from its parts.
*
* @example
* ```tsx
* <ComingSoonEmptyState>
* <EmptyStateHeader>
* <ComingSoonMedia />
* <ComingSoonTitle />
* <ComingSoonDescription />
* </EmptyStateHeader>
* <EmptyStateActions>
* <EmptyStateButton variant="outline" onClick={goBack}>Go back</EmptyStateButton>
* <EmptyStateExternalLink href={docsUrl} />
* </EmptyStateActions>
* </ComingSoonEmptyState>
* ```
*/
declare const ComingSoonEmptyState: import("react").ForwardRefExoticComponent<Omit<EmptyStateProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
/** Decorative media slot of the "Coming soon" empty state (a sprout icon). Renders a `<div>`, hidden from assistive tech. */
declare const ComingSoonMedia: import("react").ForwardRefExoticComponent<Omit<Omit<EmptyStateMediaProps, "children">, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
/** Title line of the "Coming soon" empty state. Renders a `<div>` with the design copy by default; pass children to override. */
declare const ComingSoonTitle: import("react").ForwardRefExoticComponent<Omit<EmptyStateTitleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
/** Supporting description text of the "Coming soon" empty state. Renders a `<div>` with the design copy by default; pass children to override. */
declare const ComingSoonDescription: import("react").ForwardRefExoticComponent<Omit<EmptyStateDescriptionProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
//#endregion
//#region src/components/restricted-access.d.ts
/**
* Root of the "Restricted access" empty state — shown when the user lacks
* permission to view a page. Renders a `<div>` (the DS `Empty` container); pair
* it with an `EmptyStateExternalLink` for the "Learn more" action.
*
* @example
* ```tsx
* <RestrictedAccessEmptyState>
* <EmptyStateHeader>
* <RestrictedAccessMedia />
* <RestrictedAccessTitle />
* <RestrictedAccessDescription />
* </EmptyStateHeader>
* <EmptyStateActions>
* <EmptyStateExternalLink href={docsUrl} />
* </EmptyStateActions>
* </RestrictedAccessEmptyState>
* ```
*/
declare const RestrictedAccessEmptyState: import("react").ForwardRefExoticComponent<Omit<EmptyStateProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
/** Decorative media slot of the "Restricted access" empty state (a locked padlock icon). Renders a `<div>`, hidden from assistive tech. */
declare const RestrictedAccessMedia: import("react").ForwardRefExoticComponent<Omit<Omit<EmptyStateMediaProps, "children">, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
/** Title line of the "Restricted access" empty state. Renders a `<div>` with the design copy by default; pass children to override. */
declare const RestrictedAccessTitle: import("react").ForwardRefExoticComponent<Omit<EmptyStateTitleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
/** Supporting description text of the "Restricted access" empty state. Renders a `<div>` with the design copy by default; pass children to override. */
declare const RestrictedAccessDescription: import("react").ForwardRefExoticComponent<Omit<EmptyStateDescriptionProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
//#endregion
//#region src/components/not-found.d.ts
/**
* Root of the "Not found" empty state — shown when a page or route cannot be
* found. Renders a `<div>` (the DS `Empty` container); pair it with an
* `EmptyStateButton` for the navigation action (e.g. "Go to inbox").
*
* @example
* ```tsx
* <NotFoundEmptyState>
* <EmptyStateHeader>
* <NotFoundMedia />
* <NotFoundTitle />
* <NotFoundDescription />
* </EmptyStateHeader>
* <EmptyStateActions>
* <EmptyStateButton onClick={goToInbox}>Go to inbox</EmptyStateButton>
* </EmptyStateActions>
* </NotFoundEmptyState>
* ```
*/
declare const NotFoundEmptyState: import("react").ForwardRefExoticComponent<Omit<EmptyStateProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
/** Decorative media slot of the "Not found" empty state (a search icon). Renders a `<div>`, hidden from assistive tech. */
declare const NotFoundMedia: import("react").ForwardRefExoticComponent<Omit<Omit<EmptyStateMediaProps, "children">, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
/** Title line of the "Not found" empty state. Renders a `<div>` with the design copy by default; pass children to override. */
declare const NotFoundTitle: import("react").ForwardRefExoticComponent<Omit<EmptyStateTitleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
/** Supporting description text of the "Not found" empty state. Renders a `<div>` with the design copy by default; pass children to override. */
declare const NotFoundDescription: import("react").ForwardRefExoticComponent<Omit<EmptyStateDescriptionProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
//#endregion
//#region src/components/no-data.d.ts
/**
* Root of the "No data" empty state — shown when a search or filter returns no
* results. Renders a `<div>` (the DS `Empty` container) with `role="status"` so
* it announces politely after a user action; pair it with an `EmptyStateButton`
* for the "Reset" action.
*
* @example
* ```tsx
* <NoDataEmptyState>
* <EmptyStateHeader>
* <NoDataMedia />
* <NoDataTitle />
* <NoDataDescription />
* </EmptyStateHeader>
* <EmptyStateActions>
* <EmptyStateButton variant="outline" onClick={resetFilters}>Reset</EmptyStateButton>
* </EmptyStateActions>
* </NoDataEmptyState>
* ```
*/
declare const NoDataEmptyState: import("react").ForwardRefExoticComponent<Omit<EmptyStateProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
/** Decorative media slot of the "No data" empty state (a search icon). Renders a `<div>`, hidden from assistive tech. */
declare const NoDataMedia: import("react").ForwardRefExoticComponent<Omit<Omit<EmptyStateMediaProps, "children">, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
/** Title line of the "No data" empty state. Renders a `<div>` with the design copy by default; pass children to override. */
declare const NoDataTitle: import("react").ForwardRefExoticComponent<Omit<EmptyStateTitleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
/** Supporting description text of the "No data" empty state. Renders a `<div>` with the design copy by default; pass children to override. */
declare const NoDataDescription: import("react").ForwardRefExoticComponent<Omit<EmptyStateDescriptionProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
//#endregion
//#region src/components/no-support.d.ts
/**
* Root of the "No support" empty state — shown when the current browser can't
* render a page. Renders a `<div>` (the DS `Empty` container); pair it with an
* `EmptyStateExternalLink` for the "Learn more" action.
*
* @example
* ```tsx
* <NoSupportEmptyState>
* <EmptyStateHeader>
* <NoSupportMedia />
* <NoSupportTitle />
* <NoSupportDescription />
* </EmptyStateHeader>
* <EmptyStateActions>
* <EmptyStateExternalLink href={docsUrl} />
* </EmptyStateActions>
* </NoSupportEmptyState>
* ```
*/
declare const NoSupportEmptyState: import("react").ForwardRefExoticComponent<Omit<EmptyStateProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
/** Decorative media slot of the "No support" empty state (a settings icon). Renders a `<div>`, hidden from assistive tech. */
declare const NoSupportMedia: import("react").ForwardRefExoticComponent<Omit<Omit<EmptyStateMediaProps, "children">, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
/** Title line of the "No support" empty state. Renders a `<div>` with the design copy by default; pass children to override. */
declare const NoSupportTitle: import("react").ForwardRefExoticComponent<Omit<EmptyStateTitleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
/** Supporting description text of the "No support" empty state. Renders a `<div>` with the design copy by default; pass children to override. */
declare const NoSupportDescription: import("react").ForwardRefExoticComponent<Omit<EmptyStateDescriptionProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
//#endregion
//#region src/components/unknown-error.d.ts
/**
* Root of the "Unknown error" empty state — shown when content fails to load
* unexpectedly. Renders a `<div>` (the DS `Empty` container) with `role="alert"`
* so it announces assertively; pair it with a primary `EmptyStateButton` for the
* "Try again" action.
*
* @example
* ```tsx
* <UnknownErrorEmptyState>
* <EmptyStateHeader>
* <UnknownErrorMedia />
* <UnknownErrorTitle />
* <UnknownErrorDescription />
* </EmptyStateHeader>
* <EmptyStateActions>
* <EmptyStateButton onClick={retry}>Try again</EmptyStateButton>
* </EmptyStateActions>
* </UnknownErrorEmptyState>
* ```
*/
declare const UnknownErrorEmptyState: import("react").ForwardRefExoticComponent<Omit<EmptyStateProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
/** Decorative media slot of the "Unknown error" empty state (a warning triangle icon). Renders a `<div>`, hidden from assistive tech. */
declare const UnknownErrorMedia: import("react").ForwardRefExoticComponent<Omit<Omit<EmptyStateMediaProps, "children">, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
/** Title line of the "Unknown error" empty state. Renders a `<div>` with the design copy by default; pass children to override. */
declare const UnknownErrorTitle: import("react").ForwardRefExoticComponent<Omit<EmptyStateTitleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
/** Supporting description text of the "Unknown error" empty state. Renders a `<div>` with the design copy by default; pass children to override. */
declare const UnknownErrorDescription: import("react").ForwardRefExoticComponent<Omit<EmptyStateDescriptionProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
//#endregion
//#region src/components/chatbot-response-block.d.ts
/** Feedback state for a response: thumbs up, thumbs down, or none. */
type ChatbotResponseBlockFeedback = 'up' | 'down' | null;
/** A cited source shown in the response's sources hover card. */
type ChatbotResponseBlockSource = {
title: string;
url: string;
};
type ChatbotResponseBlockProps = {
/** Stable identity for the displayed message. When provided, feedback resets
* whenever this value changes — even if the markdown text is identical to the
* previous message. Without it, identical consecutive texts won't reset state. */
messageId?: string;
markdown: string;
streaming?: boolean;
sources?: ChatbotResponseBlockSource[];
onFeedback?: (value: ChatbotResponseBlockFeedback) => void;
onSourceClick?: (source: ChatbotResponseBlockSource) => void;
onCopy?: () => void;
className?: string;
};
/**
* Renders a chatbot response from markdown, splitting it into markdown text and
* embedded component blocks (table, audio, transcript, loading), with a sources
* hover card and copy / thumbs-up / thumbs-down feedback controls. Renders a
* `<div>` (`data-slot="chatbot-response-block"`).
*
* @example
* ```tsx
* <ChatbotResponseBlock
* messageId="msg-1"
* markdown="**Hello** from the assistant"
* sources={[{ title: 'Help center', url: 'https://help.aircall.io' }]}
* onFeedback={value => console.log(value)}
* />
* ```
*/
declare function ChatbotResponseBlock({ messageId, markdown, streaming, sources, onFeedback, onSourceClick, onCopy, className }: ChatbotResponseBlockProps): React$1.JSX.Element;
//#endregion
//#region src/components/chatbot-response-loading.d.ts
interface ChatbotResponseLoadingProps {
/**
* Text shown next to the animation while the response is being generated.
* Defaults to the i18n translation of "Thinking...".
*/
text?: string;
className?: string;
}
/**
* Loading indicator rendered inside `ChatbotPageConversation` while the backend
* is still streaming a response. Shows the Aircall animated logo next to a
* customisable shimmer text label.
*
* @example
* ```tsx
* <ChatbotPageConversation>
* <ChatbotUserMessage>How do I set my phone line?</ChatbotUserMessage>
* {isLoading && <ChatbotResponseLoading text="Thinking..." />}
* </ChatbotPageConversation>
* ```
*/
declare function ChatbotResponseLoading({ text, className }: ChatbotResponseLoadingProps): import("react").JSX.Element;
//#endregion
//#region src/components/chatbot-page.d.ts
/**
* Root layout shell for the AI chatbot experience; provides the `SidebarProvider`
* context required by `ChatbotSidebar` and lays out the sidebar and content
* columns. Renders a `SidebarProvider` (a `<div>` wrapper) with the sidebar width
* preset and full-height overrides for panel/modal contexts.
*
* @example
* ```tsx
* <ChatbotPage>
* <ChatbotSidebar conversations={[...]} />
* <ChatbotPageContent>
* <ChatbotPageBody>
* <ChatbotPageHeading>Need help?</ChatbotPageHeading>
* <ChatbotInput />
* </ChatbotPageBody>
* <ChatbotPageFooter betaTermsHref="https://legal.aircall.io/..." />
* </ChatbotPageContent>
* </ChatbotPage>
* ```
*/
declare const ChatbotPage: React$1.ForwardRefExoticComponent<ChatbotPageProps & React$1.RefAttributes<HTMLDivElement>>;
interface ChatbotPageProps {
children?: React$1.ReactNode;
className?: string;
}
declare namespace ChatbotPage {
type Props = ChatbotPageProps;
}
/**
* Content area that fills the right side of `ChatbotPage`. Use alongside
* `ChatbotSidebar` as a direct child of `ChatbotPage`.
*
* In the **idle state** place `ChatbotPageBody`, then `ChatbotPageFooter`.
* In the **active conversation state** place `ChatbotPageConversation`,
* `ChatbotPageInputBar`, then `ChatbotPageFooter`.
*
* @example
* ```tsx
* <ChatbotPage>
* <ChatbotSidebar conversations={[...]} />
* <ChatbotPageContent>
* <ChatbotPageBody>
* <ChatbotPageHeading>Need help with Aircall?</ChatbotPageHeading>
* <ChatbotInput />
* <ChatbotExpandSuggestion categories={[...]} suggestions={[...]} />
* </ChatbotPageBody>
* <ChatbotPageFooter betaTermsHref="https://legal.aircall.io/..." />
* </ChatbotPageContent>
* </ChatbotPage>
* ```
*/
declare const ChatbotPageContent: React$1.ForwardRefExoticComponent<Omit<ChatbotPageContentProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
interface ChatbotPageContentProps extends React$1.ComponentProps<'div'> {}
declare namespace ChatbotPageContent {
type Props = ChatbotPageContentProps;
}
/**
* Centered content area for the idle/empty state inside `ChatbotPageContent`.
* Constrains children to a max-width of 896px and vertically centers them.
* Place `ChatbotPageHeading`, `ChatbotInput`, and `ChatbotExpandSuggestion`
* as children.
*/
declare const ChatbotPageBody: React$1.ForwardRefExoticComponent<Omit<ChatbotPageBodyProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
interface ChatbotPageBodyProps extends React$1.ComponentProps<'div'> {}
declare namespace ChatbotPageBody {
type Props = ChatbotPageBodyProps;
}
/**
* Centered heading displayed above the input area in the idle state.
* Renders an `<h2>` element styled at 24px / medium weight.
*
* @example
* ```tsx
* <ChatbotPageHeading>Need help with Aircall?</ChatbotPageHeading>
* ```
*/
declare const ChatbotPageHeading: React$1.ForwardRefExoticComponent<Omit<ChatbotPageHeadingProps, "ref"> & React$1.RefAttributes<HTMLHeadingElement>>;
interface ChatbotPageHeadingProps extends React$1.ComponentProps<'h2'> {}
declare namespace ChatbotPageHeading {
type Props = ChatbotPageHeadingProps;
}
/**
* Footer bar showing the AI beta disclaimer. By default it renders the i18n
* notice — "Ask Aircall uses AI and can make mistakes. Since it's in beta,
* using it means accepting Aircall's Beta terms." — where "Beta terms" links to
* `betaTermsHref` and "Ask Aircall" links to `learnMoreHref` when provided.
* Pass `disclaimer` to replace the whole notice with custom content.
*
* @example
* ```tsx
* <ChatbotPageFooter
* betaTermsHref="https://legal.aircall.io/#template-9jw4r0usl"
* learnMoreHref="https://support.aircall.io/en-gb/articles/38002629571869"
* />
* ```
*/
declare const ChatbotPageFooter: React$1.ForwardRefExoticComponent<Omit<ChatbotPageFooterProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
interface ChatbotPageFooterProps extends React$1.ComponentProps<'div'> {
/**
* URL for the "Beta terms" external link in the disclaimer. Ignored when `disclaimer` is set.
*/
betaTermsHref?: string;
/**
* URL for the "Ask Aircall" knowledge-base article link. Ignored when `disclaimer` is set.
*/
learnMoreHref?: string;
/**
* Replace the entire disclaimer with custom content. Pass `null` to hide it.
* Defaults to the AI/beta notice built from i18n.
*/
disclaimer?: React$1.ReactNode;
}
declare namespace ChatbotPageFooter {
type Props = ChatbotPageFooterProps;
}
/**
* Scrollable conversation thread for the active chatbot state. Place
* `ChatbotUserMessage` and `ChatbotResponseBlock` as alternating children.
* Use alongside `ChatbotPageInputBar` and `ChatbotPageFooter` inside
* `ChatbotPageContent`.
*
* The component is `relative` so consumers can absolutely-position a
* scroll-to-bottom FAB inside it.
*
* @example
* ```tsx
* <ChatbotPageContent>
* <ChatbotPageConversation>
* <ChatbotUserMessage>How do I set my phone line?</ChatbotUserMessage>
* <ChatbotResponseBlock messageId="1" markdown="..." />
* </ChatbotPageConversation>
* <ChatbotPageInputBar>
* <ChatbotInput size="large" />
* </ChatbotPageInputBar>
* <ChatbotPageFooter betaTermsHref="https://legal.aircall.io/..." />
* </ChatbotPageContent>
* ```
*/
declare const ChatbotPageConversation: React$1.ForwardRefExoticComponent<Omit<ChatbotPageConversationProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
interface ChatbotPageConversationProps extends React$1.ComponentProps<'div'> {
/** When true, renders the animated loading indicator after the last message. */
loading?: boolean;
/** Label shown next to the loading animation. Defaults to "Thinking…". */
loadingText?: string;
}
declare namespace ChatbotPageConversation {
type Props = ChatbotPageConversationProps;
}
/**
* Wrapper that anchors `ChatbotInput` to the bottom of `ChatbotPageContent`
* at the correct max-width. Place between `ChatbotPageConversation` and
* `ChatbotPageFooter`.
*
* @example
* ```tsx
* <ChatbotPageInputBar>
* <ChatbotInput size="large" />
* </ChatbotPageInputBar>
* ```
*/
declare const ChatbotPageInputBar: React$1.ForwardRefExoticComponent<Omit<ChatbotPageInputBarProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
interface ChatbotPageInputBarProps extends React$1.ComponentProps<'div'> {}
declare namespace ChatbotPageInputBar {
type Props = ChatbotPageInputBarProps;
}
//#endregion
//#region src/components/chatbot-panel-header.d.ts
type ChatbotPanelHeaderProps = React$1.ComponentProps<'div'> & {
/** Title displayed in the header. Defaults to "Ask Aircall"; pass an empty
* string to hide it. */
title?: string;
/** Fires when the menu (☰) button is pressed. Omit to hide the button. */
onMenu?: () => void;
/** When provided, the menu (☰) opens a Popover rendering this content (e.g. the
* conversation-history sidebar). The button shows even without `onMenu`. */
menuContent?: React$1.ReactNode;
/** Controls the `menuContent` Popover's open state. Omit to leave it
* uncontrolled. Provide together with `onMenuOpenChange` to close it
* programmatically (e.g. on conversation select). */
menuOpen?: boolean;
/** Fires when the `menuContent` Popover requests an open-state change (trigger
* press, outside press, Escape). */
onMenuOpenChange?: (open: boolean) => void;
/** Fires when the "Send feedback" button is pressed. Omit to hide it. */
onFeedback?: () => void;
/** Fires when the expand (fullscreen) button is pressed. Omit to hide it. */
onExpand?: () => void;
/** Whether the panel body is currently expanded. Provide with `onOpenChange`
* to show the collapse/expand (—/+) toggle. */
open?: boolean;
/** Fires when the collapse/expand (—/+) toggle is pressed. Omit to hide it. */
onOpenChange?: (open: boolean) => void;
/** Fires when the collapse (—) button is pressed. Omit to hide it. */
onClose?: () => void;
};
/**
* Header bar for the chatbot panel. Each control renders only when its handler is
* provided. The leading ☰ opens a Popover (conversation history) when
* `menuContent` is set, otherwise fires `onMenu`; with no menu handler it falls
* back to a non-interactive panel indicator. Title is optional — pass an empty
* string to hide it. The expand and close/collapse buttons show a hover
* tooltip; requires a `TooltipProvider` in the tree.
*/
declare function ChatbotPanelHeader({ title, onMenu, menuContent, menuOpen, onMenuOpenChange, onFeedback, onExpand, open, onOpenChange, onClose, className, ...props }: ChatbotPanelHeaderProps): React$1.JSX.Element;
//#endregion
//#region src/components/chatbot-sidebar.d.ts
/** A single conversation row in the `ChatbotSidebar` recent list. */
interface ChatbotSidebarConversation {
id: string;
/** Display title — truncated with ellipsis when it overflows. */
title: string;
}
interface ChatbotSidebarProps {
/** Recent conversation list shown under the section label. */
conversations: ChatbotSidebarConversation[];
/** Highlights the matching conversation row. When set, New Chat loses its accent. */
activeConversationId?: string;
/** Called when the user clicks "+ New Chat". */
onNewChat?: () => void;
/** Called when the user clicks a conversation row. */
onSelectConversation?: (id: string) => void;
/**
* Render prop for the trailing ellipsis menu items on each conversation row.
* The block renders the Ellipsis trigger and DropdownMenu wrapper automatically.
* Return the menu items (DropdownMenuItems, separators, etc.) for this conversation.
* Omit to hide the ellipsis icon entirely.
*
* @example
* renderConversationMenuContent={conv => (
* <>
* <DropdownMenuItem onClick={() => handleRename(conv.id)}>Rename</DropdownMenuItem>
* <DropdownMenuItem onClick={() => handleDelete(conv.id)}>Delete</DropdownMenuItem>
* </>
* )}
*/
renderConversationMenuContent?: (conversation: ChatbotSidebarConversation) => React$1.ReactNode;
/** Label above the conversation list. Defaults to "Recent"*/
recentLabel?: string;
/**
* When false, hides the "+ New Chat" entry at the top of the list.
* Useful in read-only history views (e.g. the `ChatbotInput` history popover).
* @default true
*/
showNewChat?: boolean;
popup?: boolean;
className?: string;
}
/**
* Conversation-history sidebar: an optional "New Chat" entry plus a scrollable,
* resizable list of recent conversations, each with an optional trailing ⋯ menu.
* Renders the DS `Sidebar` (a `<div>`), or a plain `<div>` when `popup`. Must be
* rendered inside a `SidebarProvider`.
*
* @example
* ```tsx
* <SidebarProvider>
* <ChatbotSidebar conversations={items} onSelectConversation={open} />
* </SidebarProvider>
* ```
*/
declare const ChatbotSidebar: React$1.ForwardRefExoticComponent<ChatbotSidebarProps & React$1.RefAttributes<HTMLDivElement>>;
declare namespace ChatbotSidebar {
type Props = ChatbotSidebarProps;
}
//#endregion
//#region src/components/chatbot-input.d.ts
/** A suggestion pill shown in a row below the `ChatbotInput`. */
interface ChatbotInputSuggestion {
id: string;
/** Text shown on the pill button. */
label: string;
}
declare const textareaVariants: (props?: ({
size?: "default" | "large" | null | undefined;
expanded?: boolean | null | undefined;
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
type ChatbotInputProps = Omit<React$1.ComponentProps<'textarea'>, 'onChange' | 'value' | 'size' | 'onSubmit'> & VariantProps<typeof textareaVariants> & {
/** Current text value (controlled). */
value?: string;
/** Called with the new text whenever the user types. */
onValueChange?: (value: string) => void;
/** Called when the user submits — clicks the send button or presses Enter. */
onSubmit?: (value: string) => void;
/** Called when the user clicks the stop button while `loading`. */
onStop?: () => void;
/** Placeholder shown when empty. */
placeholder?: string;
/** When true, shows the stop button instead of send, and disables typing submission. */
loading?: boolean;
/**
* When true, the textarea starts at 80px tall even when empty.
* Use in the idle/home state where a prominent input is desired.
* @default false
*/
expanded?: boolean;
/**
* Optional suggestion pills shown in a row below the input.
* Clicking a pill calls `onSuggestionClick`. Omit to hide the row.
*/
suggestions?: ChatbotInputSuggestion[];
/** Called when the user clicks a suggestion pill. */
onSuggestionClick?: (suggestion: ChatbotInputSuggestion) => void;
/**
* When provided, renders a history icon button that opens a conversation list
* popover. Pass an empty array to show the button with an empty-state message.
* Omit to hide the button entirely.
*/
conversations?: ChatbotSidebarConversation[];
/** Highlights the matching row in the history popover. */
activeConversationId?: string;
/** Called when the user selects a conversation from the history popover. */
onSelectConversation?: (id: string) => void;
};
/**
* Chatbot message composer: an auto-growing `InputGroup` textarea with a send/stop
* button, plus optional suggestion pills and a conversation-history popover. Works
* controlled (`value` + `onValueChange`) or uncontrolled. Enter submits;
* Shift+Enter inserts a newline. Renders the DS `InputGroup` (a `<div>`) wrapping a
* `<textarea>`.
*
* @example
* ```tsx
* <ChatbotInput value={text} onValueChange={setText} onSubmit={send} />
* ```
*/
declare function ChatbotInput({ className, value, onValueChange, onSubmit, onStop, placeholder, loading, size, expanded, disabled, suggestions, onSuggestionClick, conversations, activeConversationId, onSelectConversation, ...textareaProps }: ChatbotInputProps): React$1.JSX.Element;
//#endregion
//#region src/components/copy-button.d.ts
/**
* Copy-to-clipboard button. Composes DS `Button`; copies `value` on click and
* exposes a `copied` state (auto-reset after `timeout`) to its `CopyButtonIcon`
* and `CopyButtonLabel` children via context. Renders a `<button>`.
*
* @example
* ```tsx
* <CopyButton value="npm i @aircall/ds">
* <CopyButtonIcon />
* <CopyButtonLabel />
* </CopyButton>
* ```
*/
declare const CopyButton: React$1.ForwardRefExoticComponent<Omit<CopyButtonProps, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
interface CopyButtonProps extends Omit<React$1.ComponentProps<typeof Button>, 'onClick' | 'variant'> {
value: string;
timeout?: number;
onCopied?: () => void;
/** Visual style of the underlying Button. Limited to non-primary variants suitable for copy actions. */
variant?: 'outline' | 'ghost';
}
declare namespace CopyButton {
type Props = CopyButtonProps;
}
/**
* Icon for `CopyButton` that swaps between a copy glyph and a check glyph based on
* the parent's copied state. Renders an `<svg>`. Must be used inside a `CopyButton`.
*/
declare const CopyButtonIcon: React$1.ForwardRefExoticComponent<CopyButtonIconProps & React$1.RefAttributes<SVGSVGElement>>;
interface CopyButtonIconProps {
className?: string;
}
declare namespace CopyButtonIcon {
type Props = CopyButtonIconProps;
}
/**
* Text label for `CopyButton` that shows `label` normally and `copiedLabel` after a
* successful copy. Renders a `<span>`. Must be used inside a `CopyButton`.
*/
declare const CopyButtonLabel: React$1.ForwardRefExoticComponent<CopyButtonLabelProps & React$1.RefAttributes<HTMLSpanElement>>;
interface CopyButtonLabelProps {
label?: string;
copiedLabel?: string;
className?: string;
}
declare namespace CopyButtonLabel {
type Props = CopyButtonLabelProps;
}
//#endregion
//#region src/components/chatbot-panel-suggestion.d.ts
type ChatbotPanelSuggestionProps = Omit<React.ComponentProps<typeof Button>, 'variant' | 'size'>;
/**
* Pill-shaped prompt suggestion shown in the chatbot panel; a preset styling of
* `Button` with a green border and surface background. Renders a `<button>`.
*
* @example
* ```tsx
* <ChatbotPanelSuggestion onClick={() => ask('How do I set my phone line?')}>
* How do I set my phone line?
* </ChatbotPanelSuggestion>
* ```
*/
declare function ChatbotPanelSuggestion({ className, ...props }: ChatbotPanelSuggestionProps): import("react").JSX.Element;
//#endregion
//#region src/components/chatbot-user-message.d.ts
type ChatbotUserMessageProps = React.ComponentProps<'div'>;
/**
* Right-aligned chat bubble for a user's message; clamps long content to six
* lines with a "Show more" / "Show less" toggle. Renders a `<div>`
* (`data-slot="chatbot-user-message"`).
*
* @example
* ```tsx
* <ChatbotUserMessage>How do I set up my phone number?</ChatbotUserMessage>
* ```
*/
declare function ChatbotUserMessage({ className, children, ...props }: ChatbotUserMessageProps): import("react").JSX.Element;
//#endregion
//#region src/components/dashboard-standalone-page.d.ts
/**
* Full-screen takeover shell for focused, sidebar-less flows; renders a flex-row `<div>`
* holding one or more `DashboardStandalonePageContent` panels side by side.
*
* @example
* ```tsx
* <DashboardStandalonePage>
* <DashboardStandalonePageContent>
* <DashboardStandalonePageHeader>
* <DashboardStandalonePageTitle>Create user</DashboardStandalonePageTitle>
* <DashboardStandalonePageActions side="start">
* <DashboardStandalonePageAction>Cancel</DashboardStandalonePageAction>
* </DashboardStandalonePageActions>
* </DashboardStandalonePageHeader>
* <DashboardStandalonePageMain>…</DashboardStandalonePageMain>
* </DashboardStandalonePageContent>
* </DashboardStandalonePage>
* ```
*/
declare const DashboardStandalonePage: React$1.ForwardRefExoticComponent<Omit<DashboardStandalonePageProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
interface DashboardStandalonePageProps extends React$1.ComponentProps<'div'> {}
declare namespace DashboardStandalonePage {
type Props = DashboardStandalonePageProps;
}
/**
* Rounded, bordered content panel that fills the shell; renders a `<div>`.
* Typically wraps a `DashboardStandalonePageHeader` above a `DashboardStandalonePageMain`.
*/
declare const DashboardStandalonePageContent: React$1.ForwardRefExoticComponent<Omit<DashboardStandalonePageContentProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
interface DashboardStandalonePageContentProps extends React$1.ComponentProps<'div'> {}
declare namespace DashboardStandalonePageContent {
type Props = DashboardStandalonePageContentProps;
}
/**
* Fixed-height (64px) header bar with an optically centered title and absolutely
* positioned action slots; renders a `<header>`.
*/
declare const DashboardStandalonePageHeader: React$1.ForwardRefExoticComponent<Omit<DashboardStandalonePageHeaderProps, "ref"> & React$1.RefAttributes<HTMLElement>>;
interface DashboardStandalonePageHeaderProps extends React$1.ComponentProps<'header'> {}
declare namespace DashboardStandalonePageHeader {
type Props = DashboardStandalonePageHeaderProps;
}
/**
* Centered, truncated page title in the header; renders an `<h1>`.
*/
declare const DashboardStandalonePageTitle: React$1.ForwardRefExoticComponent<Omit<DashboardStandalonePageTitleProps, "ref"> & React$1.RefAttributes<HTMLHeadingElement>>;
interface DashboardStandalonePageTitleProps extends React$1.ComponentProps<'h1'> {}
declare namespace DashboardStandalonePageTitle {
type Props = DashboardStandalonePageTitleProps;
}
/**
* Optional subtitle stacked beneath the title in the header; renders a `<p>`.
*/
declare const DashboardStandalonePageDescription: React$1.ForwardRefExoticComponent<Omit<DashboardStandalonePageDescriptionProps, "ref"> & React$1.RefAttributes<HTMLParagraphElement>>;
interface DashboardStandalonePageDescriptionProps extends React$1.ComponentProps<'p'> {}
declare namespace DashboardStandalonePageDescription {
type Props = DashboardStandalonePageDescriptionProps;
}
/**
* Action slot absolutely pinned to the header's left or right edge; renders a `<div>`.
* Sitting outside the flow, it never shifts the centered title.
*/
declare const DashboardStandalonePageActions: React$1.ForwardRefExoticComponent<Omit<DashboardStandalonePageActionsProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
interface DashboardStandalonePageActionsProps extends React$1.ComponentProps<'div'> {
side?: 'start' | 'end';
}
declare namespace DashboardStandalonePageActions {
type Props = DashboardStandalonePageActionsProps;
}
/**
* Header action button rendering a ds `Button` (ghost, `lg` by default); renders a `<button>`.
*/
declare const DashboardStandalonePageAction: React$1.ForwardRefExoticComponent<Omit<DashboardStandalonePageActionProps, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
interface DashboardStandalonePageActionProps extends React$1.ComponentProps<typeof Button> {}
declare namespace DashboardStandalonePageAction {
type Props = DashboardStandalonePageActionProps;
}
/**
* Scrollable, transparent content area below the header inside the panel; renders a `<main>`.
*/
declare const DashboardStandalonePageMain: React$1.ForwardRefExoticComponent<Omit<DashboardStandalonePageMainProps, "ref"> & React$1.RefAttributes<HTMLElement>>;
interface DashboardStandalonePageMainProps extends React$1.ComponentProps<'main'> {}
declare namespace DashboardStandalonePageMain {
type Props = DashboardStandalonePageMainProps;
}
//#endregion
//#region src/components/dashboard-page.d.ts
/**
* Full-screen outer shell for a dashboard view; renders a `<div>`.
* Stacks an optional `DashboardPageBanner` above a `DashboardSidebarProvider`
* that holds the sidebar and a `DashboardPageContent`.
*
* @example
* ```tsx
* <DashboardPage>
* <DashboardSidebarProvider>
* <DashboardSidebar>…</DashboardSidebar>
* <DashboardPageContent>…</DashboardPageContent>
* </DashboardSidebarProvider>
* </DashboardPage>
* ```
*/
declare const DashboardPage: React$1.ForwardRefExoticComponent<Omit<DashboardPageProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
interface DashboardPageProps extends React$1.ComponentProps<'div'> {}
declare namespace DashboardPage {
type Props = DashboardPageProps;
}
/**
* Full-width top row that sits flush above the sidebar/content row; renders a `<div>`.
* Use to host trial notices, announcements, or any ds `Banner`.
*/
declare const DashboardPageBanner: React$1.ForwardRefExoticComponent<Omit<DashboardPageBannerProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
interface DashboardPageBannerProps extends React$1.ComponentProps<'div'> {}
declare namespace DashboardPageBanner {
type Props = DashboardPageBannerProps;
}
/**
* White content card filling the right column beside the sidebar; renders a `<div>`.
*/
declare const DashboardPageContent: React$1.ForwardRefExoticComponent<Omit<DashboardPageContentProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
interface DashboardPageContentProps extends React$1.ComponentProps<'div'> {}
declare namespace DashboardPageContent {
type Props = DashboardPageContentProps;
}
/**
* Scrollable content area inside `DashboardPageContent`; renders a `<main>`.
*/
declare const DashboardPageMain: React$1.ForwardRefExoticComponent<Omit<DashboardPageMainProps, "ref"> & React$1.RefAttributes<HTMLElement>>;
interface DashboardPageMainProps extends React$1.ComponentProps<'main'> {}
declare namespace DashboardPageMain {
type Props = DashboardPageMainProps;
}
/**
* Left-aligned tab bar placed as a sibling of `DashboardPageHeader`; renders a ds `TabsList`.
*/
declare const DashboardPageTabs: React$1.ForwardRefExoticComponent<Omit<DashboardPageTabsProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
interface DashboardPageTabsProps extends React$1.ComponentProps<typeof TabsList> {}
declare namespace DashboardPageTabs {
type Props = DashboardPageTabsProps;
}
//#endregion
//#region src/components/dashboard-page-header.d.ts
/**
* Header for a `DashboardPageContent`; renders a `<div>` that establishes a
* `@container` context with an inner CSS-grid its sub-components self-place into.
*
* @example
* ```tsx
* <DashboardPageHeader>
* <DashboardPageHeaderTitle>Team</DashboardPageHeaderTitle>
* <DashboardPageHeaderActions>
* <DashboardPageHeaderAction>Invite</DashboardPageHeaderAction>
* </DashboardPageHeaderActions>
* </DashboardPageHeader>
* ```
*/
declare const DashboardPageHeader: React$1.ForwardRefExoticComponent<Omit<DashboardPageHeaderProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
interface DashboardPageHeaderProps extends React$1.ComponentProps<'div'> {}
declare namespace DashboardPageHeader {
type Props = DashboardPageHeaderProps;
}
/**
* Back-navigation row for Level 2 headers; renders a `<div>` in the grid `nav` area.
*/
declare const DashboardPageHeaderNav: React$1.ForwardRefExoticComponent<Omit<DashboardPageHeaderNavProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
interface DashboardPageHeaderNavProps extends React$1.ComponentProps<'div'> {}
declare namespace DashboardPageHeaderNav {
type Props = DashboardPageHeaderNavProps;
}
/**
* Back button rendering a ghost, small ds `Button` with a leading chevron icon.
* Accepts a render prop so it can become an `<a>` or router `<Link>`.
*/
declare const DashboardPageHeaderNavBack: React$1.ForwardRefExoticComponent<Omit<DashboardPageHeaderNavBackProps, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
interface DashboardPageHeaderNavBackProps extends Omit<React$1.ComponentProps<typeof Button>, 'variant' | 'size'> {}
declare namespace DashboardPageHeaderNavBack {
type Props = DashboardPageHeaderNavBackProps;
}
/**
* Icon/flag slot shown left of the title; renders a `<div>` in the grid `prefix` area.
*/
declare const DashboardPageHeaderPrefix: React$1.ForwardRefExoticComponent<Omit<DashboardPageHeaderPrefixProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
interface DashboardPageHeaderPrefixProps extends React$1.ComponentProps<'div'> {}
declare namespace DashboardPageHeaderPrefix {
type Props = DashboardPageHeaderPrefixProps;
}
/**
* Wrapper that stacks the title and subtitle; renders a `<div>` in the grid `info` area.
*/
declare const DashboardPageHeaderTitleGroup: React$1.ForwardRefExoticComponent<Omit<DashboardPageHeaderTitleGroupProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
interface DashboardPageHeaderTitleGroupProps extends React$1.ComponentProps<'div'> {}
declare namespace DashboardPageHeaderTitleGroup {
type Props = DashboardPageHeaderTitleGroupProps;
}
/**
* Page title; renders an `<h1>`, self-placing in the grid `info` area or deferring
* layout to `DashboardPageHeaderTitleGroup` when nested inside one.
*/
declare const DashboardPageHeaderTitle: React$1.ForwardRefExoticComponent<Omit<DashboardPageHeaderTitleProps, "ref"> & React$1.RefAttributes<HTMLHeadingElement>>;
interface DashboardPageHeaderTitleProps extends React$1.ComponentProps<'h1'> {
size?: 'lg' | 'sm';
}
declare namespace DashboardPageHeaderTitle {
type Props = DashboardPageHeaderTitleProps;
}
/**
* Optional subtitle line/block placed beneath the title; renders a `<div>`.
*/
declare const DashboardPageHeaderSubtitle: React$1.ForwardRefExoticComponent<Omit<DashboardPageHeaderSubtitleProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
interface DashboardPageHeaderSubtitleProps extends React$1.ComponentProps<'div'> {}
declare namespace DashboardPageHeaderSubtitle {
type Props = DashboardPageHeaderSubtitleProps;
}
/**
* Muted, clamped description text under the title; renders a `<div>`.
*/
declare const DashboardPageHeaderDescription: React$1.ForwardRefExoticComponent<Omit<DashboardPageHeaderDescriptionProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
interface DashboardPageHeaderDescriptionProps extends React$1.ComponentProps<'div'> {}
declare namespace DashboardPageHeaderDescription {
type Props = DashboardPageHeaderDescriptionProps;
}
/**
* Flex container for header actions; renders a `<div>` in the grid `actions` area.
*/
declare const DashboardPageHeaderActions: React$1.ForwardRefExoticComponent<Omit<DashboardPageHeaderActionsProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
interface DashboardPageHeaderActionsProps extends React$1.ComponentProps<'div'> {}
declare namespace DashboardPageHeaderActions {
type Props = DashboardPageHeaderActionsProps;
}
/**
* Header action button rendering a ds `Button` locked to the actions area sizes;
* renders a `<button>` (defaults to a labeled `lg` CTA, or `icon-lg` for icon-only triggers).
*/
declare const DashboardPageHeaderAction: React$1.ForwardRefExoticComponent<Omit<DashboardPageHeaderActionProps, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
interface DashboardPageHeaderActionProps extends Omit<React$1.ComponentProps<typeof Button>, 'size'> {
size?: 'lg' | 'icon-lg';
}
declare namespace DashboardPageHeaderAction {
type Props = DashboardPageHeaderActionProps;
}
//#endregion
//#region src/components/dashboard-filters.d.ts
/**
* How many filters a `DashboardFiltersRow` shows inline before it starts holding the untouched ones
* back for the sheet. At or below this count everything is inline; above it, only the filters that
* have a value applied stay on the row.
*
* Not a prop. The number is a design decision about how wide a filter row may read, and a page that
* could raise it would be re-deciding the thing this component exists to settle.
*/
declare const DASHBOARD_FILTERS_INLINE_LIMIT = 3;
/**
* Phantom marker carrying a filter id's value type. Never read at runtime and never emitted.
*/
declare const DASHBOARD_FILTER_VALUE: unique symbol;
/**
* A filter id that remembers what its filter's value looks like.
*
* Structurally a `string`, and the phantom property is OPTIONAL, so a plain `'country'` is assignable
* to it and every id in the codebase can stay a plain string. The value type rides along only when
* one is attached with {@link createDashboardFilterId}.
*/
type DashboardFilterId<TValue> = string & {
readonly [DASHBOARD_FILTER_VALUE]?: TValue;
};
/**
* Attaches a value type to a filter id, the way `atom()` pins an atom's.
*
* **The presets do not need this.** `FilterCombobox`, `FilterRange`, `FilterLanguage` and
* `FilterCountry` each pin their own value type on their `id` prop, so for them a plain string and a
* branded id type-check identically - the COMPONENT pins the type, not the id. Use a plain string
* there; it reads better and says the same thing.
*
* Where it pays is a filter composed by hand, calling `useDashboardFilterStaging` with no explicit
* type argument. Then the id is the only thing that can type the staged value:
*
* ```tsx
* // Plain id: nothing types the staged value, so indexing it fails to compile.
* const { stagedValue } = useDashboardFilterStaging('teamSize');
*
* // Branded id: `stagedValue` is [number, number] | undefined.
* const teamSize = createDashboardFilterId<[number, number]>('teamSize');
* const { stagedValue } = useDashboardFilterStaging(teamSize);
* ```
*
* And where it does NOT help, so nobody reaches for it expecting more: the presets all pass an
* explicit type argument to that hook, so the id's brand is irrelevant to them.
*
* It also catches a mismatch: hand a `DashboardFilterId<A>` to something expecting a
* `DashboardFilterId<B>` and the two phantom types conflict, so it fails to compile. That protection
* only bites between two BRANDED ids - a plain string is assignable to either, by design.
*
* @example
* ```tsx
* const durationFilter = createDashboardFilterId<[number, number]>('duration');
* ```
*/
declare function createDashboardFilterId<TValue>(id: string): DashboardFilterId<TValue>;
/**
* What one filter reports UP to the enclosing `DashboardFilters`, so the row can decide whether to
* offer Clear, which filters to inline, and what to apply when the sheet is applied - without ever
* holding a filter's value.
*/
interface DashboardFilterRegistration {
/**
* Whether a value is applied AT ALL, the page's default or the user's own. This is the PLACEMENT
* fact: a filter holding a value is filtering the page's data, so it stays on the row above the
* inline limit whether or not the user has touched it.
*/
hasValue: boolean;
/**
* Whether the user has changed this filter away from its default. This is the CLEAR fact, and it is
* a different question from `hasValue`: a chip showing the page's default value reports
* `hasValue: true` with `isDirty: false`, so it shows on the row and still leaves Clear all hidden.
*/
isDirty: boolean;
}
/**
* Reports a filter's state up to the enclosing `DashboardFilters` row, so the row can decide which
* filters to inline and whether Clear is worth offering - without ever storing a filter's value.
*
* No-ops when there is no enclosing `DashboardFilters`, so a filter stays usable on its own - which
* is the normal case: most filters do not live in a dashboard row.
*
* Already called for you by the `Filter` root, so a chip built from the filter family needs
* nothing. Call it directly only when building a filter that is not a `Filter`.
*
* The row learns only what it needs to decide VISIBILITY. It never learns how to change a filter:
* applying and clearing are the consumer's, through one callback each.
*
* Reports having a value and being dirty SEPARATELY, because the row asks two different questions of
* them: placement reads `hasValue`, Clear all reads `isDirty`. Collapsing the two into one flag is what
* once dropped a chip holding the page's default value off the row entirely.
*
* @param id - The filter's declared `id`, by convention the query-param name it owns.
* @param state - The filter's current state. Read field by field, so passing a fresh object literal
* every render is fine: only a change to `hasValue` or `isDirty` re-reports.
*
* @example
* ```tsx
* useDashboardFilterRegistration(id, { hasValue, isDirty });
* ```
*/
declare function useDashboardFilterRegistration(id: string, state: DashboardFilterRegistration): void;
/** Props for {@link DashboardFilters}. */
/**
* Deliberately NOT extending a `<div>`'s props, matching `Filter` and the DS `Data*` family this
* feature is built on. A container in this family declares what it accepts, so a reader does not
* have to work out which of a div's 200 attributes are meant to do something here. Nothing passes
* DOM attributes to this today; add the one you need explicitly when something does.
*/
interface DashboardFiltersProps {
/**
* The row's parts: a `DashboardFiltersRow` holding the filters, and a `DashboardFiltersClear`.
* Filters go inside the row, never here, because the row is what decides which of them show.
*/
children?: React$1.ReactNode;
/**
* Clears every filter. Called ONCE by `DashboardFiltersClear`, and it does the whole job: blocks
* performs no writes of its own, so whatever this does not clear stays applied.
*
* One call, deliberately. The row used to loop each filter's own clear handler, and because a
* page's setters are typically a read-modify-write over one shared snapshot (a `useSearchParams`
* object), N sibling writes in a single tick clobbered each other and all but the last silently
* did nothing. The page knows how to write its own state once; blocks does not.
*
* REQUIRED. Blocks performs no writes at all, so a row without this cannot clear anything - and a
* Clear button that silently does nothing is the exact failure this API was reshaped to prevent. The
* runtime guard stays (`DashboardFiltersClear` renders nothing without a handler) for callers who
* reach this from JavaScript, but in TypeScript it is no longer expressible.
*
* Distinct from the sheet's `onReset`, which only discards an unapplied draft.
*/
onClearAll: () => void;
className?: string;
}
/**
* State root for a dashboard filter row. Owns the filter registry, and holds no layout of its own
* beyond keeping its parts on one line - the row's rules and its clipping live in
* `DashboardFiltersRow`.
*
* The model is one DECLARATION per filter with TWO renderings. A filter is written once, inside the
* row; the container decides whether it appears as a chip on the row or as a field in the sheet, and
* the filter itself renders whichever surface it finds itself on. So a filter's state, its label and
* its option list are stated once and cannot drift between the two.
*
* The root holds no filter VALUES. Each filter reports whether it is applied, whether that value is
* its default, how to clear itself and how to apply a staged value, through
* {@link useDashboardFilterRegistration}, which the `Filter` root already calls. A consumer keeps
* its filter state exactly where it already keeps it.
*
* @example
* ```tsx
* <DashboardFilters onClearAll={() => setSearchParams({})}>
* <DashboardFiltersRow>
* <DashboardFiltersSheet resultCount={results.length} onApply={applyToSearchParams} />
* <FilterCountry id="country" selectedKeys={countries} onChange={setCountries} />
* <FilterLanguage id="language" selectedKeys={languages} onChange={setLanguages} />
* </DashboardFiltersRow>
* <DashboardFiltersClear />
* </DashboardFilters>
* ```
*/
declare const DashboardFilters: React$1.ForwardRefExoticComponent<DashboardFiltersProps & React$1.RefAttributes<HTMLDivElement>>;
declare namespace DashboardFilters {
type Props = DashboardFiltersProps;
}
/**
* Which of a filter's two renderings is being asked for.
*
* - `row`: the chip in a `DashboardFiltersRow`. This copy is the one that registers.
* - `sheet`: the field form inside a `DashboardFiltersSheet`.
*/
type DashboardFilterSurface = 'row' | 'sheet';
/**
* Reads which surface the enclosing container is asking a filter to render: a chip for the row, or a
* field form for the sheet.
*
* Defaults to `'row'` outside any `DashboardFilters`, because a filter on its own is a chip - that
* is the common case, and a filter must never depend on a row existing.
*
* @example
* ```tsx
* if (useDashboardFilterSurface() === 'sheet') {
* return <DashboardFilterField label="Country">...</DashboardFilterField>;
* }
* ```
*/
declare function useDashboardFilterSurface(): DashboardFilterSurface;
/** Props for {@link DashboardFiltersRow}. */
/** Declares its own props rather than a `<div>`'s. See {@link DashboardFiltersProps}. */
interface DashboardFiltersRowProps {
/**
* The filters, plus optionally a `DashboardFiltersSheet` to open them all. Written once here: the
* sheet renders these same children on its own surface rather than taking a second copy.
*/
children?: React$1.ReactNode;
className?: string;
}
/**
* The filter row itself: the progressive-disclosure rules, and the single clipping line the chips
* live on.
*
* The rules, both driven by what the filters report rather than by anything the page passes:
* at or below {@link DASHBOARD_FILTERS_INLINE_LIMIT} filters every one shows inline; above it only
* the filters with a value applied stay on the row, and the untouched ones are reachable through
* `DashboardFiltersSheet`. A filter held back is still mounted and still registered - it just draws
* nothing - which is what keeps it counted and clearable.
*
* "With a value applied" means ANY value, the page's default included: a chip the user has not touched
* still shows what the page is filtering by. A filter the user CHANGED also stays, even when the
* change was to empty it - otherwise the one filter they most need to undo is the one that vanishes.
* Whether a filter has been changed is a separate question from whether it holds a value, and only
* `DashboardFiltersClear` asks the first one.
*
* Layout is a single non-wrapping 40px line. The row takes the width it is given and CLIPS, scrolling
* horizontally, so it can never push the page's trailing actions off screen and a chip that does not
* fit stays reachable by scrolling. It cannot grow.
*
* NARROW-WIDTH GUARANTEE, and it is the row's own contract rather than the consumer's problem: however
* little room this is given, the "All filters" trigger and `DashboardFiltersClear` stay visible and
* reachable, and ONLY the chips scroll or clip.
*
* What actually holds it, established by mutating each piece and seeing which stories fail: the chips
* area's `min-w-24` floor combined with the row NOT carrying `min-w-0`, so the row keeps a content-based
* minimum that a greedy neighbour has to yield to; and the trigger being portalled out of the scrolling
* area, so it cannot scroll away. The `min-w-min` on this element and on the row are explicit
* statements of that same intent rather than separate mechanisms - removing either alone does not break
* the stories, removing the floor does.
*
* It did not hold before, and the failure was backwards: with `min-w-0` the row collapsed, so the
* escape hatch for narrow widths was the first thing clipped away. Measured in a real app beside a
* search input - 700px lost the first chip, 660px left a 27px viewport hiding 480px of content, 620px
* left a 0px viewport, and 560px lost the trigger and Clear entirely. Pinned now at all five widths by
* `NarrowWidthGuaranteeAtMeasuredViewports`.
*
* Publishes its children so `DashboardFiltersSheet` can render the SAME filter declarations with a
* different surface. That is what makes one declaration serve both renderings.
*/
declare const DashboardFiltersRow: React$1.ForwardRefExoticComponent<DashboardFiltersRowProps & React$1.RefAttributes<HTMLDivElement>>;
declare namespace DashboardFiltersRow {
type Props = DashboardFiltersRowProps;
}
/** Props for {@link DashboardFiltersClear}. */
interface DashboardFiltersClearProps extends Omit<Button.Props, 'variant' | 'size' | 'onClick'> {
/** Overrides the button's label. Defaults to the `dashboardFilters.clearAll` translation. */
children?: React$1.ReactNode;
className?: string;
}
/**
* Clears every filter in the row, and renders ONLY when that would change something: some filter has
* to be applied and away from its default value, so this is never offered as a no-op.
*
* Belongs OUTSIDE `DashboardFiltersRow`, and that placement is the point: inside it, this would sit
* in the clipping scroll content and scroll out of reach at exactly the widths where a user has the
* most filters applied and most wants it.
*
* Clearing itself is the CONSUMER's, through the row's `onClearAll`, in one call. Blocks performs no
* writes: it decides whether the action is worth offering, never what it does. Renders nothing
* without that handler, because an action that cannot act should not be offered.
*
* About COMMITTED values - what the page is actually filtered by. Not to be confused with the sheet's
* Reset, which only discards a draft the user has not applied yet; the two carry different labels for
* that reason.
*/
declare const DashboardFiltersClear: React$1.ForwardRefExoticComponent<Omit<DashboardFiltersClearProps, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
declare namespace DashboardFiltersClear {
type Props = DashboardFiltersClearProps;
}
/**
* Reads and writes one filter's SHEET draft entry.
*
* A filter rendering its sheet field shows `stagedValue` when something is staged and its own
* committed prop value otherwise, and routes every edit to `stage` instead of to the consumer's
* `onChange`. That is the whole "nothing reaches the page until Apply" rule, expressed once.
*
* `hasStagedValue` matters separately from `stagedValue`: a filter can legitimately stage an EMPTY
* value (an emptied selection, a cleared range), and `undefined` alone cannot tell "staged nothing"
* apart from "not staged".
*
* @example
* ```tsx
* const { stagedValue, hasStagedValue, stage } = useDashboardFilterStaging<Set<string>>(id);
* const shown = hasStagedValue ? stagedValue : selectedKeys;
* ```
*/
declare function useDashboardFilterStaging<TValue>(id: DashboardFilterId<TValue>): {
stagedValue: TValue | undefined;
hasStagedValue: boolean;
stage: (value: TValue) => void;
};
/** Props for {@link DashboardFilterField}. */
interface DashboardFilterFieldProps extends React$1.ComponentProps<typeof Field> {
/** The filter's name, shown above the control. Normally the same text as the chip's placeholder. */
label?: React$1.ReactNode;
/** The control: a select, a combobox list, a pair of range inputs. */
children?: React$1.ReactNode;
className?: string;
}
/**
* One labelled field in the sheet: a filter's name above its control (Figma node 7959-8635, where
* every row of the sheet body is a "Label" over one control).
*
* The label is VISUAL. Each control names itself for assistive technology - `LanguageCombobox` from its
* placeholder, `DataCombobox` from `aria-label` - because these controls are `role="combobox"`,
* which is never named by surrounding text, so an `htmlFor` label alone would leave them unnamed.
*/
declare const DashboardFilterField: React$1.ForwardRefExoticComponent<Omit<DashboardFilterFieldProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
declare namespace DashboardFilterField {
type Props = DashboardFilterFieldProps;
}
/** Props for {@link DashboardFiltersSheet}. */
interface DashboardFiltersSheetProps {
/**
* How many results the CURRENTLY APPLIED filters return, shown at the left of the footer. Omit it
* and the footer collapses to its buttons.
*
* Deliberately not derived from the draft: the count describes what the page is showing now, and a
* staged-but-unapplied filter has by definition not changed that.
*/
resultCount?: number;
/**
* Applies the sheet's staged values. Receives EVERY staged filter in ONE call, keyed by filter id,
* and it does the whole job: blocks performs no writes of its own.
*
* One call, deliberately. Apply used to loop each filter's own change handler, and because a page's
* setters are typically a read-modify-write over one shared snapshot (a `useSearchParams` object),
* N sibling writes in a single tick clobbered each other: staging four filters and pressing Apply
* left ONE applied, with no error. So the page gets everything at once and writes once.
*
* Values are `unknown` because one row holds filters of different value shapes; narrow per id.
* Only STAGED filters appear - a filter the user did not touch is absent, not undefined.
*
* REQUIRED, for the same reason `onClearAll` is: blocks writes nothing, so a sheet without this has
* an Apply button that silently discards the user's edits.
*
* The draft is discarded once this returns, so a handler that throws or bails out loses what was
* staged. Write first, then do anything that can fail.
*
* @example
* ```tsx
* onApply={staged => setSearchParams(current => {
* const next = new URLSearchParams(current);
* for (const [id, value] of Object.entries(staged)) next.set(id, serialize(value));
* return next;
* })}
* ```
*/
onApply: (stagedValues: Readonly<Record<string, unknown>>) => void;
/** Called after Reset has discarded the draft. The sheet stays OPEN. */
onReset?: () => void;
/** Overrides the trigger's label. Defaults to the `dashboardFilters.allFilters` translation. */
children?: React$1.ReactNode;
className?: string;
}
/**
* The "All filters" trigger (Figma node 7959-5922) and the sheet it opens (Figma node 7959-8635):
* every filter in the row as a labelled field, over a footer with the applied result count on the
* left and Reset then Apply on the right.
*
* Renders the row's OWN children on the sheet surface rather than taking a second list of filters, so
* a filter is declared once and cannot drift between its chip and its field. It renders `null` on the
* sheet surface, which is what stops it recursing into itself when the sheet re-renders those
* children.
*
* Nothing a user changes here reaches the page until Apply: edits are staged in the root's draft, and
* Apply pushes each staged value back through the filter that staged it. Reset discards the draft and
* leaves the sheet open, so it is about UNAPPLIED changes - unlike `DashboardFiltersClear`, which
* clears what the page is actually filtered by.
*
* Dismissing the sheet without applying discards the draft too, matching what Escape does inside a
* filter chip: a change the user walked away from was not a change.
*
* Belongs INSIDE `DashboardFiltersRow`, as its first child, so the trigger reads ahead of the chips.
*/
declare function DashboardFiltersSheet({ resultCount, onApply, onReset, children, className }: DashboardFiltersSheetProps): React$1.JSX.Element | null;
declare namespace DashboardFiltersSheet {
type Props = DashboardFiltersSheetProps;
}
//#endregion
//#region src/components/product-badges.d.ts
type BadgeBaseProps$1 = Omit<React$1.ComponentProps<typeof Badge>, 'variant' | 'children' | 'size'>;
/** Blue pill — feature in beta, not yet GA */
declare const BetaBadge: React$1.ForwardRefExoticComponent<Omit<BadgeBaseProps$1, "ref"> & React$1.RefAttributes<HTMLSpanElement>>;
/** Green pill — recently launched feature */
declare const NewBadge: React$1.ForwardRefExoticComponent<Omit<BadgeBaseProps$1, "ref"> & React$1.RefAttributes<HTMLSpanElement>>;
/** Amber pill — feature being phased out */
declare const DeprecatedBadge: React$1.ForwardRefExoticComponent<Omit<BadgeBaseProps$1, "ref"> & React$1.RefAttributes<HTMLSpanElement>>;
/** Blue pill — user is in a trial period (same blue family as Beta) */
declare const TrialBadge: React$1.ForwardRefExoticComponent<Omit<BadgeBaseProps$1, "ref"> & React$1.RefAttributes<HTMLSpanElement>>;
/** Charcoal pill — Professional tier (no gradient; solid secondary Badge) */
declare const ProfessionalBadge: React$1.ForwardRefExoticComponent<Omit<BadgeBaseProps$1, "ref"> & React$1.RefAttributes<HTMLSpanElement>>;
type ProfessionalBadgeProps = BadgeBaseProps$1;
declare namespace ProfessionalBadge {
type Props = ProfessionalBadgeProps;
}
declare const roleBadgeVariants: (props?: ({
role?: "agent" | "supervisor" | "admin" | "owner" | null | undefined;
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
type RoleBadgeRole = NonNullable<VariantProps<typeof roleBadgeVariants>['role']>;
declare const RoleBadge: React$1.ForwardRefExoticComponent<Omit<RoleBadgeProps, "ref"> & React$1.RefAttributes<HTMLSpanElement>>;
type RoleBadgeProps = BadgeBaseProps$1 & {
/** The user's role within Aircall. */
role: RoleBadgeRole;
};
declare namespace RoleBadge {
type Props = RoleBadgeProps;
}
//#endregion
//#region src/components/license-badge.d.ts
declare const licenseBadgeVariants: (props?: ({
license?: "ai_assist_pro" | "analytics_plus" | "whatsapp" | "surveys" | "ai_assist" | null | undefined;
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
type LicenseBadgeLicense = NonNullable<VariantProps<typeof licenseBadgeVariants>['license']>;
type BadgeBaseProps = Omit<React$1.ComponentProps<typeof Badge>, 'variant' | 'children' | 'size'>;
declare const LicenseBadge: React$1.ForwardRefExoticComponent<Omit<LicenseBadgeProps, "ref"> & React$1.RefAttributes<HTMLSpanElement>>;
type LicenseBadgeProps = BadgeBaseProps & {
/** The paid licence the gated feature requires. */
license: LicenseBadgeLicense;
};
declare namespace LicenseBadge {
type Props = LicenseBadgeProps;
}
//#endregion
//#region src/components/license-alert.d.ts
/** The paid licences the design draws an alert for. */
type LicenseAlertLicense = 'ai_assist_pro' | 'analytics_plus' | 'whatsapp' | 'surveys' | 'ai_agents';
declare const LicenseAlert: React$1.ForwardRefExoticComponent<Omit<LicenseAlertProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
type LicenseAlertProps = Omit<React$1.ComponentProps<typeof Alert>, 'variant' | 'title'> & {
/** The paid licence being pitched. Sets the colour, the icon and the title. */
license: LicenseAlertLicense;
/** Body copy — what the licence buys the customer. */
children: React$1.ReactNode;
/** Overrides the licence name in the heading. Defaults to the localized name. */
title?: React$1.ReactNode;
/** Call to action, typically a {@link LicenseAlertAction}. */
action?: React$1.ReactNode;
/** Adds a dismiss button to the action row. */
onDismiss?: () => void;
};
declare namespace LicenseAlert {
type Props = LicenseAlertProps;
}
/**
* The call to action inside a {@link LicenseAlert} — the licence's accent under
* a near-opaque film, which is what makes it read as a tint rather than a solid,
* in the shape of a `lg` DS button.
*
* Takes its colours from the custom properties its alert sets, so it needs no
* licence of its own, and falls back to the primary colour when used outside
* one.
*
* Wears `buttonVariants` rather than rendering a DS `Button`, so that `render`
* can turn it into a real link. The DS `Button` is a Base UI button primitive:
* handed an anchor it keeps `role="button"`, which announces "button" for
* something that navigates. Here an anchor stays an anchor. The trade is that
* only the styles come across, not the primitive's behaviour — `disabled` in
* particular is whatever the rendered element does with it, which for an anchor
* is nothing. No upsell CTA in the design is ever disabled.
*
* @example
* ```tsx
* <LicenseAlertAction onClick={openUpgradeDialog}>Discover AI Assist Pro</LicenseAlertAction>
* <LicenseAlertAction render={<a href="/upgrade" />}>Discover AI Assist Pro</LicenseAlertAction>
* ```
*/
declare const LicenseAlertAction: React$1.ForwardRefExoticComponent<Omit<LicenseAlertActionProps, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
type LicenseAlertActionProps = useRender.ComponentProps<'button'>;
declare namespace LicenseAlertAction {
type Props = LicenseAlertActionProps;
}
//#endregion
//#region src/components/score-badge.d.ts
/**
* The fixed semantic score palette. Each tone maps to a DS `Badge` `color` +
* `tone` pair, so every ScoreBadge stays on the design-system palette (dark-mode
* + contrast handled by `Badge`). The colors are not consumer-customisable — only
* the band boundaries are (see {@link ScoreThresholds}).
*/
type ScoreTone = 'success' | 'success-alt' | 'warning' | 'destructive' | 'destructive-strong' | 'muted';
/** A single color band: a value at or above `from` (and below the next band) renders with `tone`. */
type ScoreThreshold = {
/** Inclusive lower bound of the band. */
from: number;
/** Which semantic {@link ScoreTone} the band paints. */
tone: ScoreTone;
};
/** An ordered set of color bands mapping a numeric score to a {@link ScoreTone}. */
type ScoreThresholds = ScoreThreshold[];
/** How a {@link ScoreBadge} formats its number: a bare number or a percentage. */
type ScoreKind = 'number' | 'percent';
/**
* The default color bands, from the Figma ScoreBadge spec (0–100 scale):
* `≥85` excellent, `70–84` good, `50–69` fair, `20–49` poor, `<20` very poor.
*/
declare const PERCENTAGE_THRESHOLDS: ScoreThresholds;
type ScoreBadgeProps = Omit<React$1.ComponentProps<typeof Badge>, 'color' | 'tone' | 'children'> & {
/**
* The numeric score. Drives both the pill color (via `thresholds`) and the
* displayed number. `null`/`undefined` or a non-finite value (`NaN`/`±Infinity`)
* renders a muted `"--"`. Finite out-of-range values render as-is (not clamped).
*/
value?: number | null;
/**
* How the value is formatted — a bare number, or a `%` percentage (0–100 scale).
* @default 'number'
*/
kind?: ScoreKind;
/**
* Color bands mapping the value to a tone.
* @default PERCENTAGE_THRESHOLDS
*/
thresholds?: ScoreThresholds;
/**
* Extra `Intl.NumberFormat` options merged over the per-kind defaults — e.g.
* `{ maximumFractionDigits: 0 }` for no decimals, `{ signDisplay: 'always' }`.
* For `kind='percent'` the value is scaled to a 0–1 fraction, so don't override `style`.
*/
formatOptions?: Intl.NumberFormatOptions;
};
declare namespace ScoreBadge {
type Props = ScoreBadgeProps;
}
/**
* A score pill. Composes DS `Badge`: derives its color from `value` against
* `thresholds` and renders the value, locale-formatted per `kind`.
*
* @example
* ```tsx
* <ScoreBadge value={90.66666} /> // "90.7"
* <ScoreBadge value={90.66666} kind="percent" /> // "90.7%"
* <ScoreBadge value={4} thresholds={CSAT} formatOptions={{ maximumFractionDigits: 0 }} /> // "4"
* ```
*/
declare const ScoreBadge: React$1.ForwardRefExoticComponent<Omit<ScoreBadgeProps, "ref"> & React$1.RefAttributes<HTMLSpanElement>>;
//#endregion
//#region src/helpers/format-kpi.d.ts
/**
* KPI formatting helpers — private to `@aircall/blocks`.
* Number/percent formatting aligns with ScoreBadge `kind` / `formatOptions`.
*/
type KpiKind = 'number' | 'percent' | 'duration' | 'text';
/**
* How `kind="duration"` is displayed.
* - `long` — `"1h 2min 3s"`
* - `clock` — zero-padded `"20:53"` / `"05:04"` per {@link KpiDurationScale}
*/
type KpiDurationStyle = 'long' | 'clock';
/**
* Clock scale when {@link KpiDurationStyle} is `"clock"`.
* - `hours` — `HH:MM` with default unit `hr/min`
* - `minutes` — `MM:SS` with default unit `min/sec`
*/
type KpiDurationScale = 'hours' | 'minutes';
//#endregion
//#region src/components/kpi.d.ts
/**
* Direction of change — controls the trend **icon** only.
* Color comes from {@link KpiTone}, so an upward change can be good or bad.
*/
type KpiTrend = 'up' | 'down' | 'neutral';
/**
* Semantic meaning of the change — controls **color** only.
* Same vocabulary as {@link SentimentBadge} (`positive` / `negative` / `neutral`).
* Never inferred from {@link KpiTrend}: an "up" abandoned-calls metric stays red
* when `tone="negative"`.
*/
type KpiTone = 'positive' | 'negative' | 'neutral';
/**
* KPI tile container. Thin wrapper around DS `Card` (`size="sm"` by default)
* that provides a `disabled` context for nested {@link KpiValue}s.
* When `disabled`, applies `opacity-50` and `cursor-not-allowed`, and blocks
* activation of nested interactive values.
* Compose with DS `CardHeader` / `CardTitle` / `CardContent` / `CardAction`,
* {@link KpiValue}, and {@link KpiDescription}.
*
* @example
* ```tsx
* import { CardHeader, CardTitle, CardContent } from '@aircall/ds';
* import { KpiCard, KpiValue, KpiDescription } from '@aircall/blocks';
*
* <KpiCard>
* <CardHeader>
* <CardTitle>Answered</CardTitle>
* </CardHeader>
* <CardContent className="flex flex-col gap-1">
* <KpiValue value={123.1} kind="percent" trend="up" tone="positive" />
* <KpiDescription trend="up" tone="positive">+2.48% vs previous period</KpiDescription>
* </CardContent>
* </KpiCard>
* ```
*/
declare const KpiCard: React$1.ForwardRefExoticComponent<Omit<KpiCardProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
interface KpiCardProps extends React$1.ComponentProps<typeof Card> {
/**
* When `true`, applies `opacity-50` and `cursor-not-allowed`, and cascades
* so nested {@link KpiValue}s cannot be activated.
* @default false
*/
disabled?: boolean;
}
declare namespace KpiCard {
type Props = KpiCardProps;
}
/**
* KPI metric value. Formats via `useDsLocale` and renders primary (and optional
* secondary) typography, with trend variants. Passing `onClick` makes the value
* interactive (button + dotted underline). Prefer {@link KpiCard}`s `disabled`
* for tile-level muting; a local `disabled` still works for standalone use.
* Compose inside DS `CardContent` with {@link KpiDescription}.
*
* Prop naming: `kind` + `formatOptions` for formatting; `trend` is direction
* (icon); `tone` is meaning (color) — "up" is not always good.
*
* @example
* ```tsx
* <KpiValue value={123.1} kind="percent" trend="up" tone="positive" />
* ```
*/
declare const KpiValue: React$1.ForwardRefExoticComponent<Omit<KpiValueProps, "ref"> & React$1.RefAttributes<HTMLElement>>;
type KpiValueProps = Omit<useRender.ComponentProps<'div'>, 'children'> & {
/**
* Raw value. `null` / `undefined` (or non-finite number) renders `"--"`.
* Ignored when `children` is passed.
*
* - `number` — formatted by {@link KpiValueProps.kind} (`number` / `percent` / `duration`)
* - `string` — always rendered as-is (`kind` is ignored). Coerce numeric API
* strings before passing if you need number formatting.
*/
value?: number | string | null;
/**
* How a **numeric** `value` is formatted. Ignored when `value` is a `string`
* (opaque text) or when `children` is passed.
* @default 'number' when value is a number; 'text' when value is a string
*/
kind?: KpiKind;
/**
* Extra `Intl.NumberFormat` options merged over the per-kind defaults.
* Ignored for `kind="duration"` / `kind="text"`.
*/
formatOptions?: Intl.NumberFormatOptions;
/**
* How `kind="duration"` is displayed.
* @default 'long' — `"1h 2min 3s"`
* `'clock'` — zero-padded `"20:53"` / `"05:04"` per {@link KpiValueProps.durationScale}
*/
durationStyle?: KpiDurationStyle;
/**
* Clock scale when {@link KpiValueProps.durationStyle} is `"clock"`.
* @default 'minutes' — `MM:SS` + unit `min/sec`
* `'hours'` — `HH:MM` + unit `hr/min`
*/
durationScale?: KpiDurationScale;
/**
* Secondary unit after the value (Additional variant) — e.g. `avg`.
* For `kind="number"`, fractional digits also use this style; `unit` is
* appended after them. Prefer `kind="percent"` when the unit is `%`.
* For `durationStyle="clock"`, defaults to `hr/min` / `min/sec` from
* {@link KpiValueProps.durationScale}; pass `unit=""` to suppress.
*/
unit?: React$1.ReactNode;
/**
* Direction of change — icon only (`up` / `down` / `neutral`).
* Does **not** pick color; pair with {@link KpiValueProps.tone}.
*/
trend?: KpiTrend;
/**
* Whether the change is good or bad — color only.
* @default 'neutral'
*/
tone?: KpiTone;
/**
* Marks a clickable value as selected (solid underline + `text-primary`).
* Only applies when `onClick` is set.
* @default false
*/
active?: boolean;
/**
* Mutes the value (`text-muted-foreground`) for standalone use. Prefer
* {@link KpiCard}`s `disabled` when composing a tile — that fades the whole
* card via `opacity-50` and still blocks interactive activation.
* @default false
*/
disabled?: boolean;
/**
* Escape hatch: custom primary content instead of `value` formatting.
* `unit` / `trend` / `tone` still apply.
*/
children?: React$1.ReactNode;
};
declare namespace KpiValue {
type Props = KpiValueProps;
}
interface KpiDescriptionProps extends React$1.ComponentProps<'div'> {
/**
* Trailing trend icon direction (`up` / `down` / `neutral`).
* Does **not** pick color; pair with {@link KpiDescriptionProps.tone}.
*/
trend?: KpiTrend;
/**
* Icon color only — whether the change is good or bad. Text stays foreground.
* @default 'neutral'
*/
tone?: KpiTone;
}
declare namespace KpiDescription {
type Props = KpiDescriptionProps;
}
/**
* Supporting comparison / context line under a {@link KpiValue}. Compose as a
* sibling inside DS `CardContent` — not the metric title (`CardTitle` owns that).
*
* Text stays foreground; `trend` / `tone` only color the trailing icon so an
* upward change that is bad uses `trend="up" tone="negative"`.
*
* @example
* ```tsx
* <KpiDescription trend="up" tone="positive">+2.48% vs previous period</KpiDescription>
* <KpiDescription trend="up" tone="negative">+12% abandoned</KpiDescription>
* ```
*/
declare const KpiDescription: React$1.ForwardRefExoticComponent<Omit<KpiDescriptionProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
/**
* Loading placeholder sized for a {@link KpiValue} row. Thin wrapper around
* DS `Skeleton` (`h-4 w-[45px]` with vertical margin to match the value row).
* Swap in place of {@link KpiValue} while data loads.
*
* @example
* ```tsx
* <CardContent>
* {loading ? <KpiValueSkeleton /> : <KpiValue value={123} />}
* </CardContent>
* ```
*/
declare const KpiValueSkeleton: React$1.ForwardRefExoticComponent<Omit<KpiValueSkeletonProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
interface KpiValueSkeletonProps extends React$1.ComponentProps<typeof Skeleton> {}
declare namespace KpiValueSkeleton {
type Props = KpiValueSkeletonProps;
}
/**
* Loading placeholder sized for a {@link KpiDescription} row. Thin wrapper
* around DS `Skeleton` (`12×144`, matching `text-xs` comparison copy).
* Swap in place of {@link KpiDescription} while data loads.
*
* @example
* ```tsx
* <CardContent className="flex flex-col gap-1">
* {loading ? (
* <>
* <KpiValueSkeleton />
* <KpiDescriptionSkeleton />
* </>
* ) : (
* <>
* <KpiValue value={123} />
* <KpiDescription>+2.48% vs previous period</KpiDescription>
* </>
* )}
* </CardContent>
* ```
*/
declare const KpiDescriptionSkeleton: React$1.ForwardRefExoticComponent<Omit<KpiDescriptionSkeletonProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
interface KpiDescriptionSkeletonProps extends React$1.ComponentProps<typeof Skeleton> {}
declare namespace KpiDescriptionSkeleton {
type Props = KpiDescriptionSkeletonProps;
}
//#endregion
//#region src/components/sentiment-badge.d.ts
/**
* The three conversation sentiments a {@link SentimentBadge} can display. Each
* maps to a fixed DS `Badge` color+tone, a lucide emoticon, and a localized
* default label — none are consumer-customisable (override only the label, via
* `children`).
*/
type Sentiment = 'positive' | 'negative' | 'neutral';
type SentimentBadgeProps = Omit<React$1.ComponentProps<typeof Badge>, 'color' | 'tone'> & {
/** Which sentiment the pill represents — sets its color, emoticon, and default label. */
sentiment: Sentiment;
};
declare namespace SentimentBadge {
type Props = SentimentBadgeProps;
}
/**
* A sentiment pill for conversation mood (positive / negative / neutral).
* Composes DS `Badge`: the `sentiment` picks the color+tone and leading
* emoticon, and the label defaults to a localized word for that sentiment.
* Pass `children` to override the label (the icon and color stay). The icon is
* decorative (`aria-hidden`) — the text label is the accessible name.
*
* @example
* ```tsx
* <SentimentBadge sentiment="positive" /> // 🙂 Positive
* <SentimentBadge sentiment="negative">Angry</SentimentBadge> // 🙁 Angry
* ```
*/
declare const SentimentBadge: React$1.ForwardRefExoticComponent<Omit<SentimentBadgeProps, "ref"> & React$1.RefAttributes<HTMLSpanElement>>;
//#endregion
//#region src/components/chatbot-panel-trigger.d.ts
type ChatbotPanelTriggerProps = Omit<React$1.ComponentProps<typeof Button>, 'variant' | 'size' | 'disabled'> & {
/** The copy revealed when the trigger expands (hover / focus / pressed). */
children?: React$1.ReactNode;
/** Leading icon. Defaults to the Aircall logo mark. */
icon?: React$1.ReactNode;
};
/**
* Floating trigger that shows / hides the chatbot panel.
*
* Rests as a 40px icon-only circle and expands into a pill that reveals its
* label on hover and keyboard focus. The four Figma states map to real CSS
* pseudo-states: default (rest), hover, focus (`:focus-visible` ring) and
* pressed (`:active`, dimmed to 60%).
*/
declare function ChatbotPanelTrigger({ children, icon, className, ...buttonProps }: ChatbotPanelTriggerProps): React$1.JSX.Element;
//#endregion
//#region src/helpers/timezones.helpers.d.ts
/** A raw timezone entry before offset enrichment. */
interface TimezoneEntry {
/** IANA zone id, e.g. `"Europe/Madrid"`. */
value: string;
/** Human-friendly name, e.g. `"Europe - Madrid"`. */
name: string;
}
/** A timezone option with its resolved UTC offset. */
interface TimezoneOption extends TimezoneEntry {
/** Offset from UTC in minutes (e.g. `330` for `+05:30`). */
offsetMinutes: number;
/** Formatted offset, e.g. `"UTC+05:30"`. */
formattedOffset: string;
}
/**
* Default zone list, matching the dashboard-modules library: the browser's IANA
* zones (prettified) unioned with {@link LEGACY_TIMEZONES} by `value` (browser wins
* on duplicates), so legacy-only aliases still appear with their friendly names.
*/
declare function getDefaultTimezones(): TimezoneEntry[];
//#endregion
//#region src/components/timezone-combobox.d.ts
/**
* A searchable IANA timezone picker built on the DS `Combobox`, showing each zone's
* name and its `UTC±HH:MM` offset. Offsets are computed with the native
* `Intl.DateTimeFormat` — no timezone library dependency.
*
* The trigger shows the zone name; the offset appears in the dropdown and stays
* searchable. The selected value is the IANA zone id (e.g. `"Europe/Madrid"`).
*
* @example
* ```tsx
* const [tz, setTz] = React.useState<string | null>('Europe/Madrid');
* <TimezoneCombobox value={tz} onValueChange={setTz} />
* ```
*/
declare const TimezoneCombobox: React$1.ForwardRefExoticComponent<TimezoneComboboxProps & React$1.RefAttributes<HTMLDivElement>>;
interface TimezoneComboboxProps {
/** Selected IANA zone id, e.g. `"Europe/Madrid"`. */
value?: string | null;
/** Fires with the newly selected zone id, or `null` when cleared. */
onValueChange?: (value: string | null) => void;
/**
* When uncontrolled and no value is set, default the selection to the browser's
* guessed timezone (if it is in the list). Read once at mount, like `defaultValue`
* on a native input - toggling this after mount has no effect.
*/
guessTimezone?: boolean;
/** Override the zone list. Defaults to the dashboard-library-equivalent default list. */
items?: TimezoneEntry[];
/**
* Message shown when the search yields no matches. Defaults to the localized
* `select.noResults` blocks translation.
*/
emptyMessage?: string;
disabled?: boolean;
/** Placeholder shown in the input when no value is selected. */
placeholder?: string;
className?: string;
/** Accessible label for the input (use when there is no visible label). */
'aria-label'?: string;
/**
* Test id applied to the input; the dropdown gets `${dataTest}-content` and each
* option gets `${dataTest}-item-<zoneId>`.
* @default 'timezone-select'
*/
'data-test'?: string;
}
declare namespace TimezoneCombobox {
type Props = TimezoneComboboxProps;
}
//#endregion
//#region src/components/phone-input.d.ts
/**
* Phone number field: a country picker inside an input that formats the number as it is typed.
*
* `strict` (the default) rejects characters a number cannot contain. `permissive` accepts any text
* and reports through `onValueChange` whether it still parses, which lets a dialer fall back to
* searching contacts by name.
*
* The country is a separate controlled value, so a consumer keeps holding it where it already does
* and can validate against it. It follows what is typed: pasting a dial prefix moves the picker,
* and changing the picker rewrites the prefix.
*
* @example
* ```tsx
* const [value, setValue] = React.useState('');
* const [country, setCountry] = React.useState<CountryCode>(user.defaultCountry);
* <PhoneInput
* value={value}
* onValueChange={setValue}
* country={country}
* onCountryChange={setCountry}
* defaultCountry={user.defaultCountry}
* />
* ```
*
* @example Permissive, for a dialer that also searches by name
* ```tsx
* <PhoneInput
* mode="permissive"
* value={query}
* defaultCountry={user.defaultCountry}
* onValueChange={(next, meta) => { setQuery(next); setSearchingByName(!meta.isPhoneNumber); }}
* />
* ```
*/
declare const PhoneInput: React$1.ForwardRefExoticComponent<Omit<PhoneInputProps, "ref"> & React$1.RefAttributes<HTMLInputElement>>;
/** Passed as a second argument to `onValueChange`, so a keystroke stays one notification. */
interface PhoneInputChangeMeta {
/**
* Whether the value is still shaped like a phone number, half-typed ones included. This is the
* dialling-versus-name-search signal, not a validity check: a consumer that needs to know the
* number is complete should parse it at submit time.
*/
isPhoneNumber: boolean;
/** The country the value is being interpreted against. */
country: CountryCode;
}
interface PhoneInputProps extends Omit<React$1.ComponentProps<'input'>, 'value' | 'defaultValue' | 'onChange' | 'type'> {
/** The number as text. Controlled; pair with `onValueChange`. */
value?: string;
/** Initial number when uncontrolled. */
defaultValue?: string;
/**
* Fires with the formatted text and, as a second argument, whether it still parses as a number
* and against which country. In `permissive` mode that flag is the point: it tells the consumer
* the user has switched from dialling to searching.
*/
onValueChange?: (value: string, meta: PhoneInputChangeMeta) => void;
/** Selected country. Controlled; pair with `onCountryChange`. */
country?: CountryCode;
/**
* The country the field starts on, what detection falls back to, and the one pinned to the top
* of the list. Required, because no country is a neutral guess.
*/
defaultCountry: CountryCode;
/** Fires when the user picks a country, or when one is detected from what was typed. */
onCountryChange?: (country: CountryCode) => void;
/**
* Fires when the user stars a country to make it their default. Omit to hide the star, leaving
* the default pinned to the top of the list but not changeable from here. The block only reports
* the intent; persisting it and feeding the new value back is the consumer's job.
*/
onDefaultCountryChange?: (country: CountryCode) => void;
/**
* `strict` refuses characters a phone number cannot contain. `permissive` accepts any text and
* reports through `onValueChange` whether it is still a number.
*
* A field that also searches contacts by name needs `permissive`. On `strict` the letters never
* reach the field, so the search never starts.
* @default 'strict'
*/
mode?: 'strict' | 'permissive';
/**
* Format as the user types. Turn off for values that must stay verbatim, e.g. emergency numbers
* where `911` must not become `(911)`.
* @default true
*/
format?: boolean;
/**
* Placeholder for the country search box. Defaults to the localized `phoneInput.searchCountry`
* blocks translation.
*/
searchPlaceholder?: string;
/**
* Message shown when the country search yields no matches. Defaults to the localized
* `select.noResults` blocks translation.
*/
emptyMessage?: string;
/**
* Test id for the wrapper; the input gets `${dataTest}-field` and the country trigger
* `${dataTest}-country-trigger`.
* @default 'phone-input'
*/
'data-test'?: string;
}
declare namespace PhoneInput {
type Props = PhoneInputProps;
type ChangeMeta = PhoneInputChangeMeta;
}
//#endregion
//#region src/helpers/phone.helpers.d.ts
/**
* Where the caret belongs after as-you-type formatting rewrote the value under it.
*
* Formatting inserts and removes brackets and spaces, so the same logical position moves. Counting
* digits rather than characters is what survives that: find how many digits sat left of the caret,
* then walk the new string until the same number have gone by.
*
* @param cursorPosition Caret offset in `previousValue`, before the reformat.
* @param previousValue The value as it was rendered when the caret was measured.
* @param currentValue The freshly formatted value the caret has to land in.
*/
declare function getUpdatedCursorPosition(cursorPosition: number, previousValue: string, currentValue: string): number;
/**
* Swaps the dial prefix when the user picks a different country, so `+33 1 23` on France becomes
* `+1 1 23` on the US.
*
* Anything without the old prefix is returned untouched. Reformatting it here would run a
* formatter over values that must not be formatted, a name in permissive mode or an emergency
* number, and the caller derives the display from the new country anyway.
*/
declare function getPhoneNumberWithCountry(phoneNumber: string, previousCountry: CountryCode, nextCountry: CountryCode): string;
//#endregion
//#region src/components/chatbot-expand-suggestion.d.ts
/** A selectable category filter pill shown above the suggestions list. */
interface ChatbotExpandSuggestionCategory {
value: string;
label: string;
}
/** A single clickable suggestion row. */
interface ChatbotExpandSuggestionItem {
id: string;
text: string;
}
interface ChatbotExpandSuggestionProps {
/** Category filter pills rendered above the suggestions list. Hidden when empty or undefined. */
categories?: ChatbotExpandSuggestionCategory[];
/** Controlled selected category value. Pass undefined to clear. */
selectedCategory?: string;
/** Fired when the user presses a category pill. Receives undefined when deselected. */
onCategoryChange?: (value: string | undefined) => void;
/** Label above the suggestion rows. Defaults to "Suggestions". */
label?: string;
/** Clickable suggestion rows. Hidden when empty or undefined. */
suggestions?: ChatbotExpandSuggestionItem[];
/** Fired when the user clicks a suggestion row. */
onSuggestionClick?: (suggestion: ChatbotExpandSuggestionItem) => void;
className?: string;
}
/**
* Displays category filter pills and a list of clickable suggestion rows for the
* chatbot idle state. Renders a `<div>` wrapping an optional `ToggleGroup` of
* category pills and a list of `Item` rows separated by `Separator`.
*
* @example
* ```tsx
* <ChatbotExpandSuggestion
* categories={[{ value: 'billing', label: 'Billing' }]}
* suggestions={[{ id: '1', text: 'How do I reset my password?' }]}
* onSuggestionClick={suggestion => console.log(suggestion.text)}
* />
* ```
*/
declare const ChatbotExpandSuggestion: React$1.ForwardRefExoticComponent<ChatbotExpandSuggestionProps & React$1.RefAttributes<HTMLDivElement>>;
declare namespace ChatbotExpandSuggestion {
type Props = ChatbotExpandSuggestionProps;
}
//#endregion
//#region src/components/chatbot-panel.d.ts
/** A suggestion pill shown in the panel's empty state. */
type ChatbotPanelSuggestionItem = {
/** Stable id; falls back to the label when omitted. */
id?: string;
/** Pill copy, also used as the message text on select. */
label: string;
};
type ChatbotPanelProps = Omit<React$1.ComponentProps<'div'>, 'title' | 'onSubmit'> & {
/** Title shown in the header. Defaults to the i18n "Ask Aircall". */
title?: string;
/** Fires when the header menu (☰) is pressed. Omit to hide the button. */
onMenu?: () => void;
/** Recent conversations. When provided (even `[]`), the header ☰ opens a Popover
* with the conversation history (reuses ChatbotSidebar). */
conversations?: ChatbotSidebarProps['conversations'];
/** Highlights the active conversation row in the menu. */
activeConversationId?: ChatbotSidebarProps['activeConversationId'];
/** Fires when "New chat" is selected in the menu. */
onNewChat?: ChatbotSidebarProps['onNewChat'];
/** Fires when a conversation row is selected in the menu. */
onSelectConversation?: ChatbotSidebarProps['onSelectConversation'];
/** Render prop for each conversation row's trailing ⋯ menu items. */
renderConversationMenuContent?: ChatbotSidebarProps['renderConversationMenuContent'];
/** Fires when the header expand (fullscreen) is pressed. Omit to hide it. */
onExpand?: () => void;
/** Fires when the header close (×) is pressed. Omit to hide the close button. */
onClose?: () => void;
/** Empty-state heading. Defaults to the i18n "Need help with Aircall?". */
emptyTitle?: React$1.ReactNode;
/** Empty-state subheading. Defaults to the i18n description. */
emptyDescription?: React$1.ReactNode;
/** Suggestion pills shown in the empty state. */
suggestions?: ChatbotPanelSuggestionItem[];
/** Fires when a suggestion pill is selected. */
onSuggestionSelect?: (suggestion: ChatbotPanelSuggestionItem) => void;
/** Composer value (controlled). */
inputValue?: string;
/** Fires as the composer value changes. */
onInputValueChange?: (value: string) => void;
/** Fires when the composer is submitted (Enter or send button). */
onSubmit?: (value: string) => void;
/** Fires when the stop button is pressed while `loading`. */
onStop?: () => void;
/** Shows the stop button instead of send and renders the loading indicator
* at the bottom of the active conversation. */
loading?: boolean;
/** Label shown next to the loading animation. Defaults to "Thinking…". */
loadingText?: string;
/** Composer placeholder. */
placeholder?: string;
/**
* Focus the composer when the panel mounts. Use this when the panel is
* mounted on open (e.g. `{open && <ChatbotPanel autoFocus />}`).
*/
autoFocus?: boolean;
/** Footer disclaimer. Pass `null` to hide; defaults to the AI beta notice. */
disclaimer?: React$1.ReactNode;
/** Enable the left-edge resize handle. Defaults to true. */
resizable?: boolean;
/** Initial width in px (uncontrolled). Defaults to 400. */
defaultWidth?: number;
/** Minimum width in px. Defaults to 320. */
minWidth?: number;
/** Maximum width in px. Defaults to 768. */
maxWidth?: number;
/** Fires with the new width (px) as the panel is resized. */
onWidthChange?: (width: number) => void;
/** Conversation content. When empty, the empty state renders instead. */
children?: React$1.ReactNode;
};
/**
* Presentational chatbot surface — header, scrollable conversation area (or a
* built-in empty state), composer, and disclaimer — in a width-resizable shell.
* Owns no visibility state (the consumer controls show/hide); pass the conversation
* as `children`, and no children renders the empty state. Renders a `<div>`
* container.
*
* @example
* ```tsx
* <ChatbotPanel onClose={close} onSubmit={send}>
* <ChatbotUserMessage>Hi</ChatbotUserMessage>
* <ChatbotResponseBlock>Hello!</ChatbotResponseBlock>
* </ChatbotPanel>
* ```
*/
declare function ChatbotPanel({ title, onMenu, conversations, activeConversationId, onNewChat, onSelectConversation, renderConversationMenuContent, onExpand, onClose, emptyTitle, emptyDescription, suggestions, onSuggestionSelect, inputValue, onInputValueChange, onSubmit, onStop, loading, loadingText, placeholder, autoFocus, disclaimer, resizable, defaultWidth, minWidth, maxWidth, onWidthChange, className, style, children, ...props }: ChatbotPanelProps): React$1.JSX.Element;
//#endregion
//#region src/components/filter.d.ts
/**
* Whether the user has changed this filter away from its default - the form model, and nothing more.
* Derived from the root's `value` and `atDefaultValue`, never passed in as a prop.
*
* - `pristine`: untouched. Covers BOTH a filter with nothing applied and one sitting on the default
* value the page applied for it. Offers no way to clear, because there is nothing to go back to.
* - `dirty`: a value the user chose. `FilterClear` renders, and an enclosing `DashboardFilters` offers
* Clear all.
*
* Deliberately says nothing about whether a value is APPLIED: that is a separate question, answered by
* `value` itself. It drives the label - a chip with no value shows its placeholder, muted - and it
* drives whether an enclosing `DashboardFilters` keeps the chip on its row. A chip showing the default
* value the page queries by is `pristine` AND applied, which is exactly the case that made this two
* axes rather than one.
*/
type FilterStatus = 'pristine' | 'dirty';
/** Dimension scale of a filter chip: `lg` is 40px (dashboard), `sm` is 24px (aw-web). Never a type scale. */
type FilterSize = 'lg' | 'sm';
/** Value shared by a `Filter` root with its parts. Read it with {@link useFilter}. */
interface FilterContextValue {
/** The applied value's summary label, e.g. `'6 numbers'`. */
value?: React$1.ReactNode;
/** Whether the user has changed this filter away from its default. Derived, never a prop. */
status: FilterStatus;
/** Whether a value is applied at all, default or user-chosen. The other axis, beside `status`. */
hasValue: boolean;
/** Dimension scale shared with the trigger and the clear button. */
size: FilterSize;
/** Whether the whole chip is non-interactive. */
disabled: boolean;
/** Called by `FilterClear`. Returns the filter to its default value, or to empty when it has none. */
onClear?: () => void;
/** Ref to the chip container (the `ButtonGroup`), used as the popup's positioner anchor. */
anchorRef: React$1.RefObject<HTMLDivElement | null>;
/** Id put on the trigger, so the popup can name itself after the chip's label. */
triggerId: string;
}
/**
* Reads the state of the enclosing `Filter` (status, size, disabled, value).
* Throws when called outside a `Filter` root.
*
* @example
* ```tsx
* const { status } = useFilter();
* ```
*/
declare function useFilter(): FilterContextValue;
/**
* `cva` variant definitions for the trigger's label region - resolves the label color.
*
* Keys on whether a value is APPLIED rather than on `status`: a chip showing the page's default value
* reads as applied, so it takes the same foreground as one the user chose. Only an empty chip, showing
* its placeholder, is muted.
*
* `cap-center` (from `@aircall/ds`) is what makes the label read centred against the trigger's icon.
* Without it the label's line box is centred but its GLYPHS are not: Chrome rounds Fellix's ascent
* and descent to whole pixels, and at 14px that rounding leaves 1.8px more room below the baseline
* than above the cap, half of which the text takes as an upward shift. The utility owns this
* element's `padding-block-end` / `margin-block-end`, so do not add `pb-*` / `mb-*` here.
*/
declare const filterLabelVariants: (props?: ({
hasValue?: boolean | null | undefined;
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
/**
* The chip SHELL: a `ButtonGroup` that joins a trigger and `FilterClear` into one bordered chip,
* plus the state every part reads. Derives `status` from `value` + `atDefaultValue` - status is
* never a prop - and reports the filter to an enclosing `DashboardFilters`.
*
* It owns no popup and no open state, deliberately. A chip's popup belongs to whatever renders its
* CONTENT, for one reason that admits no exception: a popup root has to enclose both the trigger and
* the popup, so only the thing that owns the popup can wrap the trigger. Three shapes follow from
* that, and all three compose here:
*
* - No popup at all - a chip that only displays a value and clears it. Trigger plus `FilterClear`.
* - A combobox popup - `FilterCombobox` hands a trigger to a DS `DataCombobox`, which brings its own
* popup, dismiss layer and open state. A Combobox root cannot be rendered inside someone else's
* popup, so this is the only arrangement that works.
* - An arbitrary panel - {@link FilterPanel}, which owns a `Popover` and renders the trigger for
* you. `FilterRange` is this.
*
* Anchoring stays correct in every case because the shell owns `anchorRef` (the whole chip, trigger
* and clear button together) and publishes it through {@link useFilter}.
*
* The status is exposed as `data-status` (and `data-size`) on the group, and through
* {@link useFilter}.
*
* @example
* ```tsx
* <Filter id="team-size" value="4 to 12" onClear={() => setRange(null)}>
* <FilterTrigger placeholder="Team size" />
* <FilterClear />
* </Filter>
* ```
*/
declare function Filter(componentProps: Filter.Props): React$1.JSX.Element | null;
/**
* Deliberately NOT extending the props of any DOM element or primitive. The presets build their own
* props by `Omit`ing from these, so anything inherited here leaks into all of them - and a native
* `<div>`'s `value`, `onChange` and `popover` collide head-on with what a filter preset means by
* those names.
*/
interface FilterProps {
/**
* Stable identity for this filter, by convention the query-param name it owns (`'country'`).
*
* This is the key that links the filter's THREE appearances: its chip in a `DashboardFiltersRow`,
* its field in a `DashboardFiltersSheet`, and its staged value in that sheet's draft. Two filters
* sharing an id in one row would overwrite each other's registration.
*
* NOT a DOM id: nothing renders it as an `id` attribute, so it does not have to be unique in the
* document, and the same filter may legitimately carry the same id in two different rows.
*
* A plain string. The row uses it as the key it registers this filter under, and the sheet as the
* key it stages its value under.
*/
id: string;
/** The chip's parts: a trigger (plain, or a `FilterPanel`) and `FilterClear`. */
children?: React$1.ReactNode;
/**
* The summary label the chip SHOWS, e.g. `'6 numbers'`. Nullish or `''` renders the placeholder.
*
* A chip whose popup edits a draft passes the draft's label here while open, so the label tracks
* what the user is doing. Pass {@link FilterProps.committedValue} as well in that case.
*/
value?: React$1.ReactNode;
/**
* The label of the value the page has actually APPLIED, when that differs from what the chip is
* showing. Defaults to `value`.
*
* This is what `status` and an enclosing `DashboardFilters` read, and the distinction is not
* cosmetic: a chip showing a live draft would otherwise report itself empty the moment the user
* unticked the last option, and the row would pull the chip and its open popup off screen mid-edit
* while the committed value carried on filtering the page.
*/
committedValue?: React$1.ReactNode;
/**
* Called when `FilterClear` is activated, and by an enclosing `DashboardFilters` on Clear all.
* Returns the filter to its DEFAULT value - or to empty when it has none. The page performs that
* write; blocks only decides when the action is worth offering.
*/
onClear?: () => void;
/**
* Whether the applied `value` is this filter's DEFAULT - what the page queries by before the user
* touches anything, such as the current week on a date filter.
*
* `true` makes the chip `pristine`: it shows its value and stays on the row, but offers no way to
* clear, because clearing means going back to the default and it is already there. Neither
* `FilterClear` nor an enclosing `DashboardFilters`' Clear all appears until the user changes it.
*
* Only the page knows what default means for a filter, so there is no sensible default for this
* prop. Omit it for a filter that has no default value, and any value the user applies then counts
* as a change.
*/
atDefaultValue?: boolean;
/**
* Dimension scale: `lg` is 40px (dashboard), `sm` is 24px (aw-web). Controls dimensions only.
* @default 'lg'
*/
size?: FilterSize;
/** Makes the whole chip non-interactive. Independent of `status`. */
disabled?: boolean;
/** Extra classes for the chip container (the `ButtonGroup`). */
className?: string;
}
declare namespace Filter {
type Props = FilterProps;
}
/**
* The chip's main button, as a plain outline `Button` showing the filter name or the applied value.
* Renders a `<button>` and nothing around it.
*
* The ONE trigger in the family, and deliberately not a popup trigger itself. Use it directly for a
* chip with no popup, or hand it to whichever component owns the popup - {@link FilterPanel}'s
* `trigger`, or a `DataCombobox`'s. Each of those wraps it in its own trigger primitive and merges
* its props through, which works because this builds its content inside its own render where that
* merge cannot reach it.
*
* Renders `children ?? value ?? placeholder`. `children` overrides the label TEXT only, never
* its COLOR: the color comes from the root's `value`, so `children` with no root `value` still
* renders muted.
*
* The label is capped at 180px and truncates; when it is actually truncated the full text is
* revealed in a tooltip on hover. A label that fits never gets one.
*
* @example
* ```tsx
* <FilterTrigger placeholder="Duration" icon={<ClockIcon />} />
* ```
*/
declare const FilterTrigger: React$1.ForwardRefExoticComponent<Omit<FilterTriggerProps, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
interface FilterTriggerProps extends Omit<React$1.ComponentProps<typeof Button>, 'variant' | 'size'> {
/**
* Id put on the LABEL element, so this button can be named after its own visible text with
* `aria-labelledby`. Pass both together.
*
* Needed when whatever wraps this gives it a role that is NOT named by its content. `FilterCombobox`
* is the case: a `DataCombobox` trigger reports `role="combobox"`, and that role takes its name
* only from `aria-label` / `aria-labelledby`, so the visible label would name nothing. Naming it
* after the label keeps the announced name equal to the visible one - the applied value - which an
* `aria-label` of the filter's name would not.
*
* Leave it unset inside a {@link FilterPanel}: there the button keeps `role="button"` and is
* named by its content already. Setting it anyway would also put this id on the label element and
* displace the one Base UI puts there when the label becomes a truncation tooltip's trigger.
*/
labelId?: string;
/**
* Leading icon, from `@aircall/react-icons` only. Rendered at 16px at both chip sizes; pass
* your own `size-*` class on the icon to override that.
*
* Omit it, or pass `null`, for no icon: either way no wrapper element is rendered, so the
* trigger's gap does not open an empty slot. The domain presets build on that distinction -
* `FilterLanguage` and `FilterCountry` treat omitted as "use my default icon" and `null` as
* "no icon at all".
*/
icon?: React$1.ReactNode | null;
/** The filter's name, shown while no value is applied. */
placeholder?: React$1.ReactNode;
}
declare namespace FilterTrigger {
type Props = FilterTriggerProps;
}
/**
* A chip whose popup is an arbitrary panel: owns the `Popover`, renders the chip's trigger, and
* anchors the popup to the WHOLE chip (the shell's `ButtonGroup`), not just the trigger.
*
* This is the part that replaced the old `FilterTrigger` + `FilterContent` pair, and the merge is the
* point rather than a convenience. A popup root has to enclose both the trigger and the popup, so
* whatever owns the popup must render the trigger - splitting them forced the SHELL to own a
* `Popover` for every chip, including the ones with no popup at all and the ones whose content brings
* its own (`FilterCombobox`). Keeping the pair together is what lets the shell own none.
*
* Reach for it when the panel is not a list of options: a range, a calendar, a bespoke form.
* For a list, use `FilterCombobox`, whose `DataCombobox` owns its popup and gives you selection,
* search, virtualisation and keyboard navigation.
*
* Named for the PANEL rather than for the popover it happens to use, because everywhere else in DS
* `Popover` is the root of a three-part set - `Popover` / `PopoverTrigger` / `PopoverContent` - and
* a `FilterPopover` reads like one piece of that set rather than all of it. This is the whole
* thing: root, trigger and popup in one component, which is not a convenience but the only shape
* Base UI allows here.
*
* Padding-neutral by design: the popup adds no insets of its own, so list content supplies
* its own padding and a range panel can add `p-4`. `children` is required and arbitrary.
*
* SCROLL-NEUTRAL by design, and this one is load-bearing: never give this popup its own
* `overflow-auto`. A list it hosts (down to `ComboboxList`) is already the scroll container, and a
* second scroll box around it takes the scrolling instead, leaving the inner one stuck at
* `scrollTop: 0`. That is a double scrollbar at best; with virtualised rows the virtualizer reads
* exactly that frozen `scrollTop` and silently renders only its first window. No error, just a list
* that will not scroll past its first screen.
*
* The popup is a dialog, so by default it names itself after the trigger via `aria-labelledby`.
* Pass `aria-label` or `aria-labelledby` to override that name: an explicit `aria-label`
* SUPPRESSES the trigger fallback, because `aria-labelledby` otherwise wins the accessible-name
* computation and the override would do nothing.
*
* @example
* ```tsx
* <FilterPanel placeholder="Duration" icon={<ClockIcon />} open={open} onOpenChange={setOpen}>
* <div className="p-4">...</div>
* </FilterPanel>
* ```
*/
declare function FilterPanel(componentProps: FilterPanel.Props): React$1.JSX.Element;
type FilterPanelProps = Omit<Popover$1.Popup.Props, 'render'> & Pick<Popover$1.Positioner.Props, 'side' | 'align' | 'sideOffset' | 'alignOffset' | 'anchor'> & Pick<Popover.Props, 'open' | 'defaultOpen' | 'onOpenChange'> & {
/**
* Leading icon on the trigger. See `FilterTriggerProps.icon`.
*
* These four props describe the trigger rather than accepting a `trigger` ELEMENT the way
* `DataCombobox` does, and the difference is Base UI's rather than a choice. `PopoverTrigger`
* asserts that what it is given in `render` is a native `<button>` and cannot see through a
* component boundary to find one: handed a `FilterTrigger` it warns, never attaches its click
* handler, and the popup does not open. The function form of `render` fares no better. So this
* component builds the button itself and takes the content as props.
*
* `ComboboxTrigger` is more permissive, which is why `FilterCombobox` CAN hand `DataCombobox` a
* whole `FilterTrigger`. Both paths still render the same button, because both go through the
* same internal content.
*/
icon?: React$1.ReactNode | null;
/** The filter's name, shown on the trigger while nothing is applied. */
placeholder?: React$1.ReactNode;
/** Overrides the trigger's label text. Defaults to the root's `value`, then `placeholder`. */
triggerLabel?: React$1.ReactNode;
/** Extra classes for the trigger button. `className` styles the POPUP. */
triggerClassName?: string;
};
declare namespace FilterPanel {
type Props = FilterPanelProps;
}
/**
* Returns the filter to its default value. Renders an outline icon `Button` with an X, joined to the
* trigger's right edge by the root's `ButtonGroup`.
*
* Renders nothing unless the status is `dirty` - so an untouched chip has nothing to clear, and
* neither does one showing the page's own default value, which is already where a clear would put it.
*
* It DOES render on a dirty chip with nothing applied, which looks odd for half a second and is
* deliberate: that is a filter the user emptied away from the page's default, so this button is the
* only way back to it from the chip itself.
*
* Absent from the DOM rather than hidden, so the `ButtonGroup` sibling selectors see a single child
* and the chip keeps its fully rounded shape while `pristine`.
*
* @example
* ```tsx
* <FilterClear />
* ```
*/
declare const FilterClear: React$1.ForwardRefExoticComponent<Omit<FilterClearProps, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
interface FilterClearProps extends Omit<Button.Props, 'variant' | 'size'> {
/** Overrides the X icon. */
children?: React$1.ReactNode;
/** Accessible label. Defaults to the `filter.clear` translation ("Clear filter"). */
'aria-label'?: string;
}
declare namespace FilterClear {
type Props = FilterClearProps;
}
//#endregion
//#region src/components/filter-combobox.d.ts
/**
* How many items a `FilterCombobox` applies at once. Both modes share one trigger and one list
* (Figma node 7959-10970), so this is a prop rather than a second component - the same shape
* every data-driven DS component uses (`DataCombobox`, `DataTree`).
*/
type FilterSelectionMode = 'single' | 'multiple';
/**
* Props a `FilterCombobox` shares with `DataCombobox`, forwarded straight through to it.
* `onSearch` and `onFetchMore` are excluded here: their relationship is constrained by
* {@link FilterComboboxSearchProps}.
*/
interface FilterComboboxListProps<T> {
/** The items to show, already prepared as a page or result set. */
items: T[];
/** Resolves an item's stable key, used for selection. */
getItemValue: (item: T) => string;
/** Resolves an item's display label, also the typeahead and accessibility text. */
getItemLabel: (item: T) => string;
/** Optional rich row content (flag, description). Defaults to `getItemLabel`. */
renderItem?: (item: T) => React$1.ReactNode;
/** Groups rows under headers; return the group key for an item. */
getGroupKey?: (item: T) => string;
/** Maps a group key to its header label. Defaults to the key. */
getGroupLabel?: (groupKey: string) => React$1.ReactNode;
/** Item keys that cannot be selected - rendered disabled and dimmed. */
disabledKeys?: Set<string>;
/**
* Items behind the current selection, for keys whose item is NOT in `items`.
*
* Needed by any list whose `items` is one PAGE or one search result: a key selected on an
* earlier page has no row to read a label from once the page moves, and the selection would
* render as a bare id. Pass the selected items themselves - never alias this to `items`, which
* seeds nothing and is the bug this prop exists to prevent.
*/
selectedItems?: T[];
/** The list's async state. Omit when nothing is loading. */
loadingState?: React$1.ComponentProps<typeof DataCombobox>['loadingState'];
/** Number of skeleton rows shown while loading. */
skeletonCount?: number;
/** Shown when there are no items and nothing is loading. */
emptyState?: React$1.ReactNode;
/**
* Placeholder for the popup's search input. Ignored when `searchable` is `false`, and on the
* sheet surface, whose collapsed field has no separate search box and shows its own prompt.
* @default the translated "Search"
*/
searchPlaceholder?: string;
/**
* Renders only the visible rows. Forwarded verbatim to `DataCombobox`, which owns the
* behaviour - blocks passes the flag and nothing else. Worth turning on for a list of
* hundreds of rows.
*
* Safe in both surfaces: the popup is the `DataCombobox`'s own `ComboboxContent`, which adds no
* scroll container of its own, so `ComboboxList` stays the only one - and that is the element the
* virtualizer tracks.
* @default 'auto' - on past a row threshold, or as soon as the list paginates
*/
virtualizeRows?: boolean | 'auto';
/**
* Assumed row height in px before measurement, when `virtualizeRows` is set. Leave unset for a
* one-line row; declare it for a taller shape such as an avatar row.
*/
estimateRowHeight?: number;
}
/**
* The search / pagination contract, as a discriminated union rather than a comment.
*
* DS disables its client-side filter while a list paginates, because filtering a single page
* would hide matches that live on later pages. A searchable paginated list must therefore
* search server-side, so `onSearch` is REQUIRED whenever `onFetchMore` is set and search is
* not switched off. Passing one without the other is a compile error, not a runtime surprise.
*/
type FilterComboboxSearchProps = {
/** Search is on (the default) and the list is NOT paginated, so DS filters client-side. */
searchable?: true;
onSearch?: (query: string) => void;
onFetchMore?: undefined;
hasMore?: undefined;
} | {
/** Search is on AND the list paginates, so server-side search is mandatory. */
searchable?: true;
onSearch: (query: string) => void;
onFetchMore: () => void;
hasMore?: boolean;
} | {
/** Search is off, so pagination needs no query handler. */
searchable: false;
onSearch?: undefined;
onFetchMore?: () => void;
hasMore?: boolean;
};
/**
* A filter chip whose popup is a searchable, selectable list: the `Filter` chip plus a DS
* `DataCombobox`. One component for both selection modes, and for both surfaces - on a
* `DashboardFiltersRow` it is a chip, inside a `DashboardFiltersSheet` a labelled field.
*
* Blocks owns the draft while DS `Filter` stays neutral about it. The chip label renders the
* DRAFT, so picking a row updates the chip immediately, but `onChange` fires only on COMMIT -
* when the popup closes. Escape discards the draft and restores the committed value, matching
* the interaction diagram in Figma node 8247-51724.
*
* @example
* ```tsx
* <FilterCombobox id="numbers"
* placeholder="Numbers"
* items={numbers}
* getItemValue={n => n.id}
* getItemLabel={n => n.label}
* selectionMode="multiple"
* selectedKeys={applied}
* onChange={setApplied}
* formatValue={keys => `${keys.size} numbers`}
* />
* ```
*/
declare function FilterCombobox<T>(componentProps: FilterCombobox.Props<T>): React$1.JSX.Element;
type FilterComboboxProps<T> = FilterComboboxListProps<T> & FilterComboboxSearchProps & Omit<Filter.Props, 'value' | 'onClear' | 'open' | 'onOpenChange' | 'children' | 'atDefaultValue'> & {
/** How many items can be applied at once. @default 'single' */
selectionMode?: FilterSelectionMode;
/** The COMMITTED selection. The chip shows the draft while the popup is open. */
selectedKeys: Set<string>;
/**
* The page's DEFAULT selection - what the filter queries by before the user touches anything.
*
* Given this, the chip answers pristine-versus-dirty for itself by comparing it with
* `selectedKeys`, and clearing RESTORES it rather than emptying the filter. Omit it for a filter
* with no default: any selection then counts as a change, and clearing empties it.
*
* This is deliberately a VALUE rather than `Filter`'s boolean `atDefaultValue`, which this
* component does not accept. A page that only says "the current selection is the default" leaves
* nothing to restore on clear, so the filter would empty instead - and inside a
* `DashboardFiltersRow` past its inline limit, an emptied filter drops off the row, so a chip the
* page defaulted would disappear the moment the user cleared it.
*/
defaultKeys?: Set<string>;
/** Called on COMMIT only (popup close), never on every keystroke inside the popup. */
onChange: (keys: Set<string>) => void;
/**
* Renders the chip's summary label from the current selection. Return `undefined` (or an
* empty string) for the empty selection so the chip falls back to `placeholder` and its
* empty styling: a muted placeholder.
*/
formatValue: (keys: Set<string>) => React$1.ReactNode;
/** The filter's name, shown while nothing is applied. */
placeholder?: React$1.ReactNode;
/**
* Leading icon on the trigger, from `@aircall/react-icons`.
*
* A FUNCTION derives the icon from the selection the chip is showing, the same value
* `formatValue` receives - so an icon that stands for the current pick (a flag, an avatar)
* changes with the label rather than a beat behind it. It is called on every render of the
* trigger, including while the popup is open and the selection is still a draft.
*/
icon?: React$1.ReactNode | ((keys: Set<string>) => React$1.ReactNode);
/** Extra classes for the popup, typically a width. */
contentClassName?: string;
};
declare namespace FilterCombobox {
type Props<T> = FilterComboboxProps<T>;
}
//#endregion
//#region src/components/filter-range.d.ts
/** An inclusive `[from, to]` range, or `null` when nothing is applied. */
type FilterRangeValue = [number, number] | null;
/**
* A filter chip whose popup is a two-thumb range: the `Filter` chip plus a padded popup holding
* a DS `Slider` and, optionally, a pair of `Field` inputs (Figma node 7959-10838).
*
* The DS `Slider` renders one thumb per value when `value` is an array, so the two-thumb range
* comes for free - there is no custom slider here.
*
* Covers all three Figma variants through one API: Duration is the slider alone, CSAT adds
* numeric inputs (`showInputs`), and Hours adds time inputs by supplying `formatInput` /
* `parseInput` that map a clock label to minutes since midnight. Open-ended ranges are just a
* bound sitting at `min` or `max`; there is no presets API (see the MR description).
*
* Like `FilterCombobox`, the chip label tracks the DRAFT while the popup is open and `onChange`
* fires on COMMIT (popup close). Escape discards.
*
* @example
* ```tsx
* <FilterRange id="duration"
* placeholder="Duration"
* min={0}
* max={60}
* value={[5, 15]}
* onChange={setDuration}
* formatValue={([from, to]) => `${from} - ${to} min`}
* />
* ```
*/
declare function FilterRange(componentProps: FilterRange.Props): React$1.JSX.Element;
type FilterRangeProps = Omit<Filter.Props, 'value' | 'onClear' | 'children' | 'atDefaultValue'> & {
/** Lowest selectable value. @default 0 */
min?: number;
/** Highest selectable value. @default 100 */
max?: number;
/** Thumb increment. @default 1 */
step?: number;
/** The COMMITTED range, or `null` when unset. The chip shows the draft while open. */
value: FilterRangeValue;
/**
* Called on COMMIT only (popup close), and with {@link FilterRangeProps.defaultValue} - or `null`
* when there is none - on clear.
*/
onChange: (value: FilterRangeValue) => void;
/**
* The page's DEFAULT range - what the filter queries by before the user touches anything.
*
* Given this, the chip answers pristine-versus-dirty for itself by comparing it with `value`, and
* clearing RESTORES it rather than unsetting the filter. Omit it and the whole span counts as the
* default instead, since a range covering everything narrows nothing.
*
* A VALUE rather than `Filter`'s boolean `atDefaultValue`, which this component does not accept: a
* page that only says "the current range is the default" leaves nothing to restore on clear, so the
* filter would unset instead - and inside a `DashboardFiltersRow` past its inline limit, an unset
* filter drops off the row, so a chip the page defaulted would disappear when cleared.
*/
defaultValue?: FilterRangeValue;
/**
* Renders both the chip label and the popup readout from a range. Defaults to `from - to`.
* This is where units live (`5 - 15 min`), and where a full-bounds range can read as
* something like "Whole day".
*/
formatValue?: (value: [number, number]) => React$1.ReactNode;
/**
* The `Label` line above the slider, e.g. "Call duration". Also names the slider, so it defaults
* to `placeholder` rather than to nothing.
*/
contentLabel?: React$1.ReactNode;
/** Shows a pair of from/to inputs under the slider. @default false */
showInputs?: boolean;
/**
* Label above the lower-bound input, and its real `<label>` - a screen reader announces it as
* the input's name. Defaults to the `filterRange.from` translation ("From" in English); passing
* it replaces that translation entirely, which is the point for a domain filter that wants
* "Minimum" or "Earliest". Only rendered when `showInputs` is set.
*/
fromLabel?: React$1.ReactNode;
/**
* Label above the upper-bound input, and its real `<label>`. Defaults to the `filterRange.to`
* translation ("To" in English). Only rendered when `showInputs` is set.
*/
toLabel?: React$1.ReactNode;
/**
* Renders a bound into the input's text. Defaults to the plain number. Pair with
* `parseInput` for non-numeric scales, e.g. minutes since midnight shown as `9:00`.
*/
formatInput?: (value: number) => string;
/**
* Parses input text back into a number. Return `null` for unparseable text, which restores
* the previous value. Defaults to `Number`.
*/
parseInput?: (raw: string) => number | null;
/** The filter's name, shown while nothing is applied. */
placeholder?: React$1.ReactNode;
/** Leading icon on the trigger, from `@aircall/react-icons`. */
icon?: React$1.ReactNode;
/** Extra classes for the popup. */
contentClassName?: string;
};
declare namespace FilterRange {
type Props = FilterRangeProps;
}
//#endregion
//#region src/components/date-range-shortcuts.d.ts
/**
* The date shortcuts a dashboard offers, in the order they read.
*
* Exactly the seven `conversation-center-ext` ships today
* (`src/utilities/date/predefined_options.constants.ts`), so a customer moving onto this component
* finds the same choices producing the same ranges.
*
* Note for anyone comparing with the extension: its `getPredefinedOptions()` defines an EIGHTH,
* `last_seven_days`, which is absent from the shipped `PREDEFINED_OPTION_KEYS` list and so has never
* been offered. It is deliberately not here either.
*/
declare const DATE_RANGE_SHORTCUTS: readonly ["today", "yesterday", "this_week", "last_week", "this_month", "last_month", "last_six_months"];
/** One of the seven shortcuts. */
type DateRangeShortcut = (typeof DATE_RANGE_SHORTCUTS)[number];
/**
* A selected date range, and which shortcut produced it when one did.
*
* `shortcut` matters beyond bookkeeping: it is what lets a reopened picker show which chip is active,
* rather than making the user recognise their own range in a calendar. A plain `string` rather than
* `DateRangeShortcut`, because a consumer-defined shortcut (see `DateRangeShortcutDefinition`) can
* carry any key.
*/
interface DateRangeValue {
from: Date;
to: Date;
/** The shortcut that produced this range. Absent when the range was picked on the calendar. */
shortcut?: string;
}
/**
* The range a shortcut means, relative to a reference day.
*
* The boundary rules are copied from `conversation-center-ext`'s `getPredefinedOptions()` rather than
* re-derived, and it uses the same `date-fns` functions, so the two agree by construction rather than
* by my reading of them. Two of those rules are surprising enough to be worth stating, because they
* look like bugs and are not - they are what customers see today:
*
* - `this_week` and `last_week` start on MONDAY. `date-fns` `startOfWeek` defaults to Sunday, and the
* extension adds a day to it. Changing that would silently move every weekly filter by a day.
* - the ranges that end "now" end at the end of TODAY, not at the current instant, so a range stays
* stable for the rest of the day instead of shifting under the user.
* - `last_week` ends at MIDNIGHT on its final Sunday, not at the end of it, so it excludes almost all
* of that Sunday. That reads like an off-by-one and is preserved on purpose: it is the range
* customers are filtering by today, and quietly widening it would change their numbers.
*
* KNOWN DEFECT, reproduced deliberately. On a SUNDAY, `startOfWeek` returns that same Sunday, so the
* `+ 1 day` puts the start of `this_week` on TOMORROW while its end stays today - the range comes back
* INVERTED, with `from` after `to`. Customers hit this one day in seven today. It is reproduced rather
* than fixed because matching current behaviour was the requirement, and `weekStartsOn: 1` would fix it
* in one line but would also move every weekly range for everyone - a product decision. Pinned by a
* test named after it, so it is visible rather than waiting to be rediscovered.
*
* @param shortcut - Which shortcut to resolve.
* @param today - Reference day, defaulting to now. Injectable so this is testable without mocking
* the clock, which is also how the tests pin the boundaries against fixed dates.
*/
declare function dateRangeFromShortcut(shortcut: DateRangeShortcut, today?: Date): DateRangeValue;
/** Whether two ranges cover the same instants, so a reopened picker can mark its active shortcut. */
declare function isSameDateRange(one: DateRangeValue | null, two: DateRangeValue | null): boolean;
/** A translate function, structurally compatible with `@aircall/ds`'s `useDsTranslation` result. */
type DateRangeShortcutTranslate = (key: string) => string;
/**
* One chip in the shortcut row: a stable id, a label, and how to compute its range.
*
* `shortcuts` on `DateRangeCalendar` takes an array of these, so a consumer can narrow, reorder, or
* splice their own definitions in alongside (or instead of) `DEFAULT_DATE_RANGE_SHORTCUTS`.
*/
interface DateRangeShortcutDefinition {
/**
* Stable id. Becomes `DateRangeValue.shortcut` when this definition produced the range. Must be
* unique within the `shortcuts` array passed to `DateRangeCalendar` - a duplicate breaks the React
* list key and makes more than one chip read as active for the same range.
*/
key: string;
/**
* The chip's label. A built-in passes a function of the ds translate function, so it stays
* localized through the `blocks` i18n namespace; a consumer-defined shortcut passes a plain string
* and owns its own translation.
*/
label: string | ((t: DateRangeShortcutTranslate) => string);
/**
* Computes this shortcut's range for a given reference day. Return whole-day boundaries (midnight
* to `23:59:59.999`) unless the chip is meant to never match a calendar pick: `DateRangeCalendar`
* widens every manual pick to whole days before comparing, so a `getRange` with a narrower time
* window - a specific hour, say - can never light back up once the same days are picked by hand.
*/
getRange: (today: Date) => {
from: Date;
to: Date;
};
}
/**
* One `DateRangeShortcutDefinition` per built-in shortcut, in the same order as
* `DATE_RANGE_SHORTCUTS`. The default for `DateRangeCalendar`'s `shortcuts` prop.
*/
declare const DEFAULT_DATE_RANGE_SHORTCUTS: readonly DateRangeShortcutDefinition[];
/**
* Which shortcut, if any, currently describes a range.
*
* Compares INSTANTS rather than trusting `value.shortcut`, so a range restored from a URL - where the
* shortcut was never persisted - still lights up its chip. Checked against the `shortcuts` list
* actually offered, so a custom definition can light up its own chip too. If two definitions in the
* list resolve to the same range, the first one in list order wins - avoid offering two shortcuts
* that can produce identical ranges if which one lights up matters.
*/
declare function matchDateRangeShortcut(value: DateRangeValue | null, shortcuts: readonly DateRangeShortcutDefinition[], today?: Date): string | undefined;
//#endregion
//#region src/components/date-range-calendar.d.ts
/** Props for {@link DateRangeCalendar}. */
interface DateRangeCalendarProps extends Omit<React$1.ComponentProps<'div'>, 'onChange'> {
/** The selected range, or `null` for none. */
value: DateRangeValue | null;
/**
* Called with a whole-day range: a range picked on the calendar is widened to midnight-to-midnight
* so it matches what the shortcuts produce, rather than depending on the time the click happened.
*/
onChange: (value: DateRangeValue) => void;
/**
* Which shortcuts to offer, and in what order. Defaults to all seven built-ins. Pass a subset or
* reordering of `DEFAULT_DATE_RANGE_SHORTCUTS` to narrow them, splice your own
* `{ key, label, getRange }` definitions in anywhere, or replace the defaults entirely.
* @default DEFAULT_DATE_RANGE_SHORTCUTS
*/
shortcuts?: readonly DateRangeShortcutDefinition[];
/**
* Reference day the shortcuts resolve against. Defaults to now; pass it to make a story or a test
* deterministic without mocking the clock.
*/
today?: Date;
/** Dates the inner DS Calendar and any shortcut range leave unavailable. */
disabled?: Calendar.Props['disabled'];
}
/**
* A date-range calendar with shortcut chips, in one bordered card (Figma node 8502-40329).
*
* ONE bordered container: the ds `Calendar` on top, then a visually distinct shaded footer strip
* inside that same container holding the shortcuts as outlined Toggle pills, wrapping onto two rows. Not a
* column of buttons beside the calendar, which is what the staging UI does and what this deliberately
* does not copy.
*
* Built against 8502-40329, NOT the earlier 7959-10949. That node had a timezone `Select` between the
* calendar and the chips, so it had a middle section this does not: there are two regions here, not
* three. 8502-40329 lives on a Figma branch and is not reachable through the API, so it was worked
* from an exported screenshot.
*
* Blocks-owned because it is a genuine composite: the calendar, the shortcut vocabulary and the rule
* that a picked range covers whole days all have to agree, and every consumer assembling that from ds
* primitives would have to get the same three things right. A `DataCombobox` or a `ToggleGroup` on its
* own belongs in the consumer instead.
*
* Exactly one shortcut can be active, and which one is derived from the RANGE rather than remembered:
* a range restored from query params, where no shortcut was ever persisted, still lights up its chip.
*
* No timezone control, by instruction. The older node drew one; it is out of scope and deliberately
* not stubbed.
*
* Offers all SEVEN default shortcuts unless `shortcuts` narrows, reorders, or extends them with
* consumer-defined ones. The reference screenshot draws six - it stops at `Last month` - but the
* seventh, `last_six_months`, is in the shipped vocabulary, so it is offered by default and simply
* wraps. Worth knowing if the design and this ever look one chip apart.
*
* @example
* ```tsx
* <DateRangeCalendar value={range} onChange={setRange} />
* ```
*/
declare function DateRangeCalendar(componentProps: DateRangeCalendarProps): React$1.JSX.Element;
//#endregion
//#region src/components/language-combobox.d.ts
/**
* The BCP 47 language codes offered by default. Aircall's product surfaces settle around this
* set; pass `codes` to narrow or extend it.
*/
declare const LANGUAGE_CODES: readonly ["ar", "ca", "cs", "da", "de", "el", "en", "es", "fi", "fr", "he", "hi", "hu", "id", "it", "ja", "ko", "nb", "nl", "pl", "pt", "ro", "ru", "sk", "sv", "th", "tr", "uk", "vi", "zh"];
/** One selectable language: its code plus the label resolved for the current label style. */
interface LanguageOption {
/** BCP 47 code, e.g. `'fr'`. */
code: string;
/** Display label, either the endonym or the viewer-locale name. */
label: string;
/** Visible and canonical aliases used by accent-insensitive search. */
searchLabels?: readonly string[];
}
/** Overrides displayed labels by their BCP 47 code. */
type LanguageLabelOverrides = Readonly<Record<string, string>>;
/** Options for resolving one language option label. */
type LanguageOptionLabelOptions = {
code: string;
displayLocale: string;
offeredCodes: readonly string[];
labelOverrides?: LanguageLabelOverrides;
};
/**
* Resolves one language option label. A lone semantic language uses its generic name, while a
* qualifier is shown only when multiple variants of that semantic language are offered.
*/
declare function resolveLanguageOptionLabel({ code, displayLocale, offeredCodes, labelOverrides }: LanguageOptionLabelOptions): string;
/**
* Upper-cases the first GRAPHEME of a label in a given locale.
*
* `Intl.DisplayNames` returns endonyms in each language's own casing convention, and several
* languages do not capitalise their own name: `es` gives "espanol" and `fr` gives "francais" while
* `de` gives "Deutsch" and `en` gives "English". Rendered in one list that reads as a bug, so the
* first letter is raised for all of them.
*
* Grapheme-safe and locale-aware, both deliberately: `slice(0, 1)` splits a surrogate pair or an
* emoji-style cluster down the middle, and `toUpperCase()` on a Turkish "i" gives "I" rather than
* the correct "Istanbul"-style dotted capital that `toLocaleUpperCase('tr')` produces.
*/
declare function capitalizeFirstGrapheme(label: string, locale: string): string;
/**
* Resolves a language's display name through `Intl.DisplayNames`.
*
* One code path serves both label styles: the display locale is either the language's OWN code
* (an endonym, so `fr` reads "Francais") or the viewer's locale (so `fr` reads "French" for an
* English viewer).
*
* `Intl.DisplayNames` returns the input code unchanged when it knows no name for it, so an
* unrecognised code falls back to its upper-cased form rather than rendering a bare lowercase
* tag.
*
* The first letter is always raised, in the label's OWN locale - see
* {@link capitalizeFirstGrapheme} for why Spanish and French would otherwise render lowercase
* beside German and English.
*/
declare function resolveLanguageLabel(code: string, displayLocale: string): string;
/** Options added to the stable positional `useLanguageOptions` hook contract. */
type LanguageOptionsOptions = {
labelOverrides?: LanguageLabelOverrides;
};
/** Builds semantic labels, search aliases, and sorting for the offered language codes. */
declare function useLanguageOptions(codes: readonly string[], translateItems: boolean, options?: LanguageOptionsOptions): {
code: string;
label: string;
searchLabels: readonly string[];
}[];
/**
* Searchable language picker composed from the DS `Combobox` family. Labels come from
* `Intl.DisplayNames`, so no curated name table ships with it. Options are the language name
* alone: language surfaces carry no flag, since a language is not a country. Semantic aliases
* prevent vendor wording such as `Chinese (Hong Kong)` from leaking into the UI.
*
* By default each language is labelled in its OWN language (endonyms: English, Francais,
* Deutsch). Set `translateItems={false}` to label every option in the viewer's DS locale
* instead (English, French, German).
*
* `multiple` picks several languages at once, shown as removable chips in the input. The value
* widens to a list of codes with it, so the two forms are separate prop types.
*
* @example
* ```tsx
* <LanguageCombobox value={language} onValueChange={setLanguage} />
* <LanguageCombobox translateItems={false} value={language} onValueChange={setLanguage} />
* <LanguageCombobox multiple value={languages} onValueChange={setLanguages} />
* ```
*/
declare function LanguageCombobox(componentProps: LanguageCombobox.Props): React$1.JSX.Element;
/** A choice offered by {@link LanguageCombobox} that is not a language. */
type LanguageComboboxExtraOption = {
/** Reported through `onValueChange`. Must not collide with a language code in `codes`. */
value: string;
label: React$1.ReactNode;
};
/** The DS `Combobox` root props, pinned to one BCP 47 string value. */
type LanguageComboboxRootProps = React$1.ComponentProps<typeof Combobox<string>>;
type LanguageComboboxValueChange = NonNullable<LanguageComboboxRootProps['onValueChange']>;
/**
* `onValueChange` for the multiple form. The change-reason payload is the root's, so a host can
* still tell a pick apart from a clear; only the value it carries widens to a list.
*/
type LanguageComboboxMultipleValueChange = (value: string[], details: Parameters<LanguageComboboxValueChange>[1]) => void;
/** Everything that does not depend on how many languages can be picked. */
type LanguageComboboxBaseProps = Omit<LanguageComboboxRootProps, 'children' | 'items' | 'multiple' | 'value' | 'defaultValue' | 'onValueChange' | 'itemToStringLabel' | 'itemToStringValue' | 'isItemEqualToValue' | 'filter' | 'disabled'> & {
/** Language codes to offer. @default LANGUAGE_CODES */
codes?: readonly string[];
/**
* Label each language in its own language (endonyms). `false` labels every option in the
* viewer's DS locale instead.
* @default true
*/
translateItems?: boolean;
/** Exact displayed labels by BCP 47 code; overrides the shared semantic policy. */
labelOverrides?: LanguageLabelOverrides;
/**
* Choices offered above the languages, for the answers that are not a language - "None",
* "Auto-detect", "Same as primary". They render in the order given, unsorted, and their
* `value` comes back through `onValueChange` like any other.
*
* A `value` must not collide with a code in `codes`, or the popup would offer two items for it.
* @default []
*/
extraOptions?: readonly LanguageComboboxExtraOption[];
/** Text shown in the search input while no language is selected. */
placeholder?: string;
/** Disables the search input and option selection. @default false */
disabled?: boolean;
/** Marks the search input invalid for accessibility and DS error styling. */
'aria-invalid'?: React$1.AriaAttributes['aria-invalid'];
/** Identifies elements that describe the search input. */
'aria-describedby'?: React$1.AriaAttributes['aria-describedby'];
/** Identifies elements that label the search input. */
'aria-labelledby'?: React$1.AriaAttributes['aria-labelledby'];
/**
* Accessible name for the input. Defaults to `placeholder` when that is a string. Required in
* practice: the input is `role="combobox"`, which is never named by its own contents.
*/
'aria-label'?: string;
/** Extra classes for the input group. */
className?: string;
/** Extra classes for the popup. */
contentClassName?: string;
/**
* Test id applied to the search input. The dropdown gets `${dataTest}-content` and each option
* gets `${dataTest}-item-<code>`. With `multiple`, the chips container gets
* `${dataTest}-chips` and each chip `${dataTest}-chip-<code>`.
* @default 'language-select'
*/
'data-test'?: string;
};
/** One language at a time, reported as a single code. The default. */
type LanguageComboboxSingleProps = LanguageComboboxBaseProps & {
/** Pick several languages at once. @default false */
multiple?: false;
/** Selected BCP 47 language code. */
value?: string | null;
/** Initial BCP 47 language code for uncontrolled use. */
defaultValue?: string | null;
/** Fires with the selected BCP 47 language code, or `null` when cleared. */
onValueChange?: LanguageComboboxValueChange;
};
/** Several languages at once, shown as removable chips and reported as a list of codes. */
type LanguageComboboxMultipleProps = LanguageComboboxBaseProps & {
/** Pick several languages at once. @default false */
multiple: true;
/** Selected BCP 47 language codes. */
value?: readonly string[];
/** Initial BCP 47 language codes for uncontrolled use. */
defaultValue?: readonly string[];
/** Fires with every selected BCP 47 language code, empty when cleared. */
onValueChange?: LanguageComboboxMultipleValueChange;
};
/**
* `multiple` picks the shape of the selection: omit it for one code, set it for a list. The two
* are separate types rather than a widened `string | string[]`, so a consumer never has to narrow
* a value whose shape it already decided.
*/
type LanguageComboboxProps = LanguageComboboxSingleProps | LanguageComboboxMultipleProps;
declare namespace LanguageCombobox {
type Props = LanguageComboboxProps;
type SingleProps = LanguageComboboxSingleProps;
type MultipleProps = LanguageComboboxMultipleProps;
}
//#endregion
//#region src/components/filter-language.d.ts
/**
* Language filter chip: a thin preset over `FilterCombobox` carrying the language option list.
*
* Both surfaces come from ONE declaration. There is deliberately no `surface === 'sheet'` branch:
* the drawer field is the same `FilterCombobox` field as everything else, with the same rows and the
* same accent-insensitive search, because `items` and `onSearch` are forwarded to both surfaces.
*
* It used to render `LanguageCombobox` in the drawer for single selection. That produced the same
* field from a second code path, and the two drifted - the drawer inherited `LanguageCombobox`'s
* hardcoded English "Select a language" prompt, and the two surfaces searched differently, since
* only `LanguageCombobox` normalized accents. The normalizing filter now lives in
* `filterLanguagesByQuery`, so both surfaces share it and neither needs the override.
* Same labelling rules as `LanguageCombobox` - endonyms by default, viewer-locale names with
* `translateItems={false}` - and options are the language name alone, since language surfaces
* carry no flag.
*
* The trigger keeps the generic `Languages` glyph whatever is selected. Pass `icon={null}` for
* none, or a node to pin a different one.
*
* @example
* ```tsx
* <FilterLanguage id="language" selectedKeys={languages} onChange={setLanguages} selectionMode="multiple" />
* ```
*/
declare function FilterLanguage(componentProps: FilterLanguage.Props): React$1.JSX.Element;
/**
* Every key of `FilterComboboxSearchProps` is omitted together, not one at a time: `Omit` flattens
* the discriminated union into `searchable?: boolean`, which then matches no member of it. The
* preset owns search outright, so dropping the whole group is also the honest API.
*/
type FilterLanguageProps = Omit<FilterCombobox.Props<LanguageOption>, 'items' | 'getItemValue' | 'getItemLabel' | 'renderItem' | 'formatValue' | 'icon' | 'searchable' | 'onSearch' | 'onFetchMore' | 'hasMore'> & {
/**
* Leading icon on the trigger. Omit for the preset's generic glyph, which stays put whatever is
* selected. Pass `null` to render no icon at all, or a node to pin a different one.
* @default `<Languages />`
*/
icon?: React$1.ReactNode | null;
/** Language codes to offer. @default LANGUAGE_CODES */
codes?: readonly string[];
/**
* Label each language in its own language (endonyms). `false` labels every option in the
* viewer's DS locale instead.
* @default true
*/
translateItems?: boolean;
/** Exact displayed labels by BCP 47 code; overrides the shared semantic policy. */
labelOverrides?: Readonly<Record<string, string>>;
/** Overrides the chip's summary label. Defaults to the language name, or a count. */
formatValue?: (keys: Set<string>) => React$1.ReactNode;
};
declare namespace FilterLanguage {
type Props = FilterLanguageProps;
}
//#endregion
//#region src/helpers/language-semantics.d.ts
/** Semantic identity for a vendor language tag. */
type LanguageSemanticDefinition = {
/** Semantic language group used to qualify sibling variants. */
group: string;
/** Language code used for the localized display name. */
displayCode: string;
/** Region qualifier, when the vendor tag represents a regional variant. */
region?: string;
/** Script qualifier, when the vendor tag represents a script variant. */
script?: string;
/** Translation key used when the runtime has no CLDR language name. */
fallbackKey?: string;
};
/**
* Deepgram language semantics that CLDR cannot infer from the vendor tag alone. In particular,
* `zh-HK` is Cantonese, while `zh-CN` is Mandarin/Simplified Chinese.
*/
declare const LANGUAGE_SEMANTIC_MAP: Readonly<Record<string, LanguageSemanticDefinition>>;
/** Canonicalizes a BCP 47 tag while preserving malformed vendor values unchanged. */
declare function canonicalizeLanguageCode(code: string): string;
/** Returns a semantic language definition, with a locale-derived fallback for new vendor tags. */
declare function getLanguageSemanticDefinition(code: string): LanguageSemanticDefinition;
/** Returns the variant identity used to count siblings inside one semantic language group. */
declare function getLanguageSemanticVariantKey(definition: LanguageSemanticDefinition): string;
//#endregion
//#region src/helpers/countries.helpers.d.ts
/** One selectable country: ISO2 code, localized name, and (optionally) a dial prefix. */
interface CountryOption {
/** ISO 3166-1 alpha-2 code, e.g. `'FR'`. Drives the flag. */
code: string;
/** Country name in the viewer's locale. */
name: string;
/**
* Dial prefix including the plus, e.g. `'+33'`. Omit for a territory with no dial code of
* its own (e.g. Antarctica).
*/
phonePrefix?: string;
}
/**
* Resolves a country's name in a locale through `Intl.DisplayNames`.
*
* Deliberately NOT `COUNTRIES.localizedCountryName`: that field is a misnomer, every one of its
* entries is hardcoded English. It is used only as the fallback when a region code has no
* display name.
*/
declare function resolveCountryName(code: string, displayLocale: string, fallback: string): string;
/**
* Matches a country against a query on THREE fields, so `France`, `FR` and `+33` all find
* France. Diacritics are folded, and a leading plus on the query is optional.
*/
declare function matchesCountryQuery(option: CountryOption, query: string): boolean;
/**
* Narrows a country list to a query with {@link matchesCountryQuery}. Shared with `FilterCountry`
* so both surfaces search identically.
*/
declare function filterCountriesByQuery(options: CountryOption[], query: string): CountryOption[];
//#endregion
//#region src/components/country-combobox.d.ts
/**
* `renderItem` for a country list, so `CountryCombobox` and `FilterCountry` render the same row.
*/
declare const renderCountryOption: (option: CountryOption) => React$1.JSX.Element;
/**
* Searchable country list built on the DS `DataCombobox`, with the DS `CountryFlag` per row.
* A combobox rather than a select because there are 244 countries.
*
* Search matches the localized name, the ISO2 code and the dial prefix.
*
* Rows are VIRTUALIZED: there are 244 countries and each row mounts a flag, which is enough to
* make opening the list and typing in it visibly lag. Pass `virtualizeRows={false}` to opt out,
* e.g. for a test that wants every row in the DOM.
*
* `virtualizeRows` is passed explicitly even though `DataCombobox`'s auto threshold would switch
* it on anyway at 244 rows. Kept deliberately, as documentation rather than as mechanism: this
* component has a KNOWN performance reason to virtualise, and that should not silently depend on
* where a shared threshold happens to sit. If the threshold is ever raised above 244, this list
* must not quietly go back to mounting every flag.
*
* No `estimateRowHeight` override: a country row is one line (flag, name, dial prefix), which is
* exactly the plain row `DataCombobox` already assumes. Only taller shapes - an avatar row, a
* two-line item - need to declare a height.
*
* @example
* ```tsx
* <CountryCombobox selectedKeys={countries} onSelectionChange={setCountries} />
* ```
*/
declare function CountryCombobox(componentProps: CountryCombobox.Props): React$1.JSX.Element;
type CountryComboboxProps = Omit<React$1.ComponentProps<typeof DataCombobox<CountryOption>>, 'items' | 'getItemValue' | 'getItemLabel' | 'renderItem' | 'onSearch'> & {
/**
* Where a country's dial prefix appears.
*
* - `'row'` (default) - in the option row only, right-aligned after the name. The selected
* country then reads as `France` in the field.
* - `'label'` - in the row AND in the field, which reads `France (+33)`.
*
* Use `'label'` beside anything where the dial code is part of what the user is choosing, such
* as a phone-number field. This is the shape the removed `CountrySelect` had, and it is a prop
* rather than a second component because it changes one string.
*
* It changes the ACCESSIBLE name and the typeahead text with it, since `DataCombobox` takes both
* from the same label. Searching is unaffected either way: this component searches by name, ISO2
* code and dial prefix regardless.
* @default 'row'
*/
dialPrefix?: 'row' | 'label';
};
declare namespace CountryCombobox {
type Props = CountryComboboxProps;
}
//#endregion
//#region src/components/filter-country.d.ts
/**
* Country filter chip: a thin preset over `FilterCombobox` carrying the country list, the flag
* rows and the three-field search (localized name, ISO2 code, dial prefix), so `France`, `FR`
* and `+33` all find France.
*
* Both surfaces come from ONE declaration. There is deliberately no `surface === 'sheet'` branch:
* everything the drawer field needs - `renderItem` for the flag rows, `onSearch` for the
* three-field search, `virtualizeRows` for 244 rows - is forwarded by `FilterCombobox` to both its
* chip popup and its drawer field. An override rendering `CountryCombobox` here produced the same
* field from a second code path, which is how the two drifted apart on their placeholder.
*
* The trigger's icon FOLLOWS the selection: the selected country's flag once one country is applied,
* and a `Globe` glyph while none or several are. Pass `icon={null}` for none, or a node to pin one
* glyph regardless of the selection. See {@link resolveCountryIcon}.
*
* @example
* ```tsx
* <FilterCountry id="country" selectedKeys={countries} onChange={setCountries} selectionMode="multiple" />
* ```
*/
declare function FilterCountry(componentProps: FilterCountry.Props): React$1.JSX.Element;
/**
* Every key of `FilterComboboxSearchProps` is omitted together, not one at a time: `Omit` flattens
* the discriminated union into `searchable?: boolean`, which then matches no member of it. The
* preset owns search outright, so dropping the whole group is also the honest API.
*/
type FilterCountryProps = Omit<FilterCombobox.Props<CountryOption>, 'items' | 'getItemValue' | 'getItemLabel' | 'renderItem' | 'formatValue' | 'icon' | 'searchable' | 'onSearch' | 'onFetchMore' | 'hasMore'> & {
/**
* Leading icon on the trigger. Omit for the preset default, which FOLLOWS the selection: the
* selected country's flag once one country is applied, a `Globe` glyph while none or several are.
* Pass `null` to render no icon at all, or a node to pin that one node whatever is selected.
* @default the selected country's flag, or `<Globe />`
*/
icon?: React$1.ReactNode | null;
/** Overrides the chip's summary label. Defaults to the country name, or a count. */
formatValue?: (keys: Set<string>) => React$1.ReactNode;
};
declare namespace FilterCountry {
type Props = FilterCountryProps;
}
//#endregion
//#region src/hooks/use-copy-to-clipboard.d.ts
interface UseCopyToClipboardOptions {
timeout?: number;
onCopied?: () => void;
}
declare function useCopyToClipboard(value: string, { timeout, onCopied }?: UseCopyToClipboardOptions): {
copy: () => Promise<void>;
copied: boolean;
};
//#endregion
//#region src/hooks/use-is-text-truncated.d.ts
/**
* Reports whether an element's text is currently truncated, i.e. whether its text is clipped
* by `text-overflow: ellipsis` because the content is wider than the box. Compares
* `scrollWidth` against `clientWidth` and re-measures on resize via a `ResizeObserver`, so it
* stays correct when the container or the text changes.
*
* Attach the returned ref to the element that carries the truncation classes (`truncate`, or
* `overflow-hidden text-ellipsis whitespace-nowrap`) and use `isTruncated` to decide whether
* to reveal the full text, typically in a tooltip.
*
* @example
* ```tsx
* const { ref, isTruncated } = useIsTextTruncated<HTMLSpanElement>();
* return (
* <span ref={ref} className="max-w-45 truncate">
* {label}
* </span>
* );
* ```
*/
declare function useIsTextTruncated<T extends HTMLElement = HTMLElement>(): {
ref: React$1.RefObject<T | null>;
isTruncated: boolean;
};
//#endregion
//#region src/hooks/use-country-options.d.ts
/**
* The country option list, localized and collated for the viewer's DS locale.
* Sourced from `@aircall/numbers` so the codes and dial prefixes stay in one place.
*/
declare function useCountryOptions(): CountryOption[];
//#endregion
//#region src/hooks/use-detected-country-code.d.ts
/**
* Follows what the user types and reports the country it implies, so pasting `+4915112345678`
* lands on Germany without touching the country control.
*
* Typing and pasting are told apart on purpose: a paste is trusted to carry its own dial prefix,
* while a keystroke must not flip the country on every digit. See {@link isTyping}.
*
* Returns the detected country, falling back to the selected one, and calls `onDetect` only on an
* actual change so a consumer can mirror it into its own state.
*
* @example
* ```tsx
* const country = useDetectedCountryCode(value, selectedCountry, defaultCountry, setSelectedCountry);
* ```
*/
declare function useDetectedCountryCode(inputValue: string, selectedCountry: CountryCode, defaultCountry: CountryCode, onDetect?: (country: CountryCode) => void): CountryCode;
//#endregion
//#region src/components/card-save-bar.d.ts
type CardSaveBarProps = {
submitLabel?: string;
savingLabel?: string;
resetLabel?: string;
};
/**
* Save/discard bar for card-layout forms — the TanStack Form adapter around
* `SaveBar`. Reads `isDirty`, `isSubmitting`, and `canSubmit` from form context
* and renders `SaveBar` (which owns the animation, buttons, and the
* `data-slot="card-footer"` that flushes it to the card edge).
*
* Must be placed **inside** the `<form>` element and wrapped by `form.AppForm`
* (or any `formContext` provider).
*
* @example
* <form.AppForm>
* <form.CardSaveBar submitLabel="Save" resetLabel="Discard" />
* </form.AppForm>
*/
declare function CardSaveBar({ submitLabel, savingLabel, resetLabel }: CardSaveBarProps): import("react").JSX.Element;
//#endregion
//#region src/components/submit-button.d.ts
type SubmitButtonProps = Omit<React.ComponentProps<typeof Button>, 'type' | 'disabled'> & {
loadingLabel?: string;
};
/**
* Context-aware submit button. Disables itself when the form cannot be submitted or is submitting.
* Shows `loadingLabel` (default `"Saving…"`) while submitting.
*
* Renders a DS `<Button type="submit">` (a `<button>` element).
* Must be a descendant of `form.AppForm` (or any `formContext` provider).
* Use for inline/flat layouts where `CardSaveBar` is not needed.
* Accepts all `Button` props except `type` and `disabled` (managed internally).
*
* @example
* <form.AppForm>
* <form.SubmitButton loadingLabel="Saving…">Save</form.SubmitButton>
* </form.AppForm>
*/
declare function SubmitButton({ children, loadingLabel, className, ...buttonProps }: SubmitButtonProps): import("react").JSX.Element;
//#endregion
//#region src/form/use-form.d.ts
/**
* Pre-configured TanStack Form hook for `@aircall/blocks`.
*
* Fields are built with the composable, typed `Form*Field` wrappers (e.g. `FormSelectField`),
* which take the `form` as a prop — there are no registered `fieldComponents`. Only the
* form-level UI (`SubmitButton`, `CardSaveBar`) is registered, so it's available as
* `form.SubmitButton` / `form.CardSaveBar` inside `form.AppForm`.
*
* `CommonForm` is the full form object — use it directly or extend it:
* - `CommonForm.useAppForm` — primary hook; types inferred from `defaultValues`
* - `CommonForm.withForm` — HOC equivalent for higher-order function patterns
*
* @example
* const form = useForm({ defaultValues: { name: '' }, onSubmit: async ({ value }) => save(value) })
*/
declare const CommonForm: {
useAppForm: <TFormData, TOnMount extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnChange extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnChangeAsync extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnBlur extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnBlurAsync extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnSubmit extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnSubmitAsync extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnDynamic extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnDynamicAsync extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnServer extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TSubmitMeta>(props: import("@tanstack/react-form").FormOptions<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta>) => import("@tanstack/react-form").AppFieldExtendedReactFormApi<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta, {}, {
readonly SubmitButton: typeof SubmitButton;
readonly CardSaveBar: typeof CardSaveBar;
}>;
withForm: <TFormData, TOnMount extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnChange extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnChangeAsync extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnBlur extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnBlurAsync extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnSubmit extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnSubmitAsync extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnDynamic extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnDynamicAsync extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnServer extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TSubmitMeta, TRenderProps extends object = {}>({ render, props }: import("@tanstack/react-form").WithFormProps<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta, {}, {
readonly SubmitButton: typeof SubmitButton;
readonly CardSaveBar: typeof CardSaveBar;
}, TRenderProps>) => import("react").FunctionComponent<import("react").PropsWithChildren<NoInfer<[unknown] extends [TRenderProps] ? any : TRenderProps> & {
form: import("@tanstack/react-form").AppFieldExtendedReactFormApi<[unknown] extends [TFormData] ? any : TFormData, [import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined] extends [TOnMount] ? [TOnMount] extends [TOnMount & (import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined)] ? any : TOnMount : TOnMount, [import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined] extends [TOnChange] ? [TOnChange] extends [TOnChange & (import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined)] ? any : TOnChange : TOnChange, [import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined] extends [TOnChangeAsync] ? [TOnChangeAsync] extends [TOnChangeAsync & (import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined)] ? any : TOnChangeAsync : TOnChangeAsync, [import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined] extends [TOnBlur] ? [TOnBlur] extends [TOnBlur & (import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined)] ? any : TOnBlur : TOnBlur, [import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined] extends [TOnBlurAsync] ? [TOnBlurAsync] extends [TOnBlurAsync & (import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined)] ? any : TOnBlurAsync : TOnBlurAsync, [import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined] extends [TOnSubmit] ? [TOnSubmit] extends [TOnSubmit & (import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined)] ? any : TOnSubmit : TOnSubmit, [import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined] extends [TOnSubmitAsync] ? [TOnSubmitAsync] extends [TOnSubmitAsync & (import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined)] ? any : TOnSubmitAsync : TOnSubmitAsync, [import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined] extends [TOnDynamic] ? [TOnDynamic] extends [TOnDynamic & (import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined)] ? any : TOnDynamic : TOnDynamic, [import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined] extends [TOnDynamicAsync] ? [TOnDynamicAsync] extends [TOnDynamicAsync & (import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined)] ? any : TOnDynamicAsync : TOnDynamicAsync, [import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined] extends [TOnServer] ? [TOnServer] extends [TOnServer & (import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined)] ? any : TOnServer : TOnServer, [unknown] extends [TSubmitMeta] ? any : TSubmitMeta, {}, {
readonly SubmitButton: typeof SubmitButton;
readonly CardSaveBar: typeof CardSaveBar;
}>;
}>>;
withFieldGroup: <TFieldGroupData, TSubmitMeta, TRenderProps extends object = {}>({ render, props, defaultValues }: import("@tanstack/react-form").WithFieldGroupProps<TFieldGroupData, {}, {
readonly SubmitButton: typeof SubmitButton;
readonly CardSaveBar: typeof CardSaveBar;
}, TSubmitMeta, TRenderProps>) => <TFormData, TFields extends import("@tanstack/react-form").DeepKeysOfType<TFormData, TFieldGroupData | null | undefined> | import("@tanstack/react-form").FieldsMap<TFormData, TFieldGroupData>, TOnMount extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnChange extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnChangeAsync extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnBlur extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnBlurAsync extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnSubmit extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnSubmitAsync extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnDynamic extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnDynamicAsync extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnServer extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TFormSubmitMeta>(params: import("react").PropsWithChildren<NoInfer<TRenderProps> & {
form: import("@tanstack/react-form").AppFieldExtendedReactFormApi<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, unknown extends TSubmitMeta ? TFormSubmitMeta : TSubmitMeta, {}, {
readonly SubmitButton: typeof SubmitButton;
readonly CardSaveBar: typeof CardSaveBar;
}> | import("@tanstack/react-form").AppFieldExtendedReactFieldGroupApi<unknown, TFormData, string | import("@tanstack/react-form").FieldsMap<unknown, TFormData>, any, any, any, any, any, any, any, any, any, any, unknown extends TSubmitMeta ? TFormSubmitMeta : TSubmitMeta, {}, {
readonly SubmitButton: typeof SubmitButton;
readonly CardSaveBar: typeof CardSaveBar;
}>;
fields: TFields;
}>) => ReturnType<import("react").FunctionComponent>;
useTypedAppFormContext: <TFormData, TOnMount extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnChange extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnChangeAsync extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnBlur extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnBlurAsync extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnSubmit extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnSubmitAsync extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnDynamic extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnDynamicAsync extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnServer extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TSubmitMeta>(_props: import("@tanstack/react-form").FormOptions<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta>) => import("@tanstack/react-form").AppFieldExtendedReactFormApi<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta, {}, {
readonly SubmitButton: typeof SubmitButton;
readonly CardSaveBar: typeof CardSaveBar;
}>;
extendForm: <const TNewField extends Record<string, import("react").ComponentType<any>> & {}, const TNewForm extends Record<string, import("react").ComponentType<any>> & {
readonly SubmitButton?: "Error: form component names must be unique — this key already exists in the base form" | undefined;
readonly CardSaveBar?: "Error: form component names must be unique — this key already exists in the base form" | undefined;
}>(extension: {
fieldComponents?: TNewField | undefined;
formComponents?: TNewForm | undefined;
}) => {
useAppForm: <TFormData, TOnMount extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnChange extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnChangeAsync extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnBlur extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnBlurAsync extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnSubmit extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnSubmitAsync extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnDynamic extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnDynamicAsync extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnServer extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TSubmitMeta>(props: import("@tanstack/react-form").FormOptions<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta>) => import("@tanstack/react-form").AppFieldExtendedReactFormApi<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta, {} & TNewField, {
readonly SubmitButton: typeof SubmitButton;
readonly CardSaveBar: typeof CardSaveBar;
} & TNewForm>;
withForm: <TFormData, TOnMount_1 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnChange_1 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnChangeAsync_1 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnBlur_1 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnBlurAsync_1 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnSubmit_1 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnSubmitAsync_1 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnDynamic_1 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnDynamicAsync_1 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnServer_1 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TSubmitMeta_1, TRenderProps extends object = {}>({ render, props }: import("@tanstack/react-form").WithFormProps<TFormData, TOnMount_1, TOnChange_1, TOnChangeAsync_1, TOnBlur_1, TOnBlurAsync_1, TOnSubmit_1, TOnSubmitAsync_1, TOnDynamic_1, TOnDynamicAsync_1, TOnServer_1, TSubmitMeta_1, {} & TNewField, {
readonly SubmitButton: typeof SubmitButton;
readonly CardSaveBar: typeof CardSaveBar;
} & TNewForm, TRenderProps>) => import("react").FunctionComponent<import("react").PropsWithChildren<NoInfer<[unknown] extends [TRenderProps] ? any : TRenderProps> & {
form: import("@tanstack/react-form").AppFieldExtendedReactFormApi<[unknown] extends [TFormData] ? any : TFormData, [import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined] extends [TOnMount_1] ? [TOnMount_1] extends [TOnMount_1 & (import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined)] ? any : TOnMount_1 : TOnMount_1, [import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined] extends [TOnChange_1] ? [TOnChange_1] extends [TOnChange_1 & (import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined)] ? any : TOnChange_1 : TOnChange_1, [import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined] extends [TOnChangeAsync_1] ? [TOnChangeAsync_1] extends [TOnChangeAsync_1 & (import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined)] ? any : TOnChangeAsync_1 : TOnChangeAsync_1, [import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined] extends [TOnBlur_1] ? [TOnBlur_1] extends [TOnBlur_1 & (import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined)] ? any : TOnBlur_1 : TOnBlur_1, [import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined] extends [TOnBlurAsync_1] ? [TOnBlurAsync_1] extends [TOnBlurAsync_1 & (import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined)] ? any : TOnBlurAsync_1 : TOnBlurAsync_1, [import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined] extends [TOnSubmit_1] ? [TOnSubmit_1] extends [TOnSubmit_1 & (import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined)] ? any : TOnSubmit_1 : TOnSubmit_1, [import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined] extends [TOnSubmitAsync_1] ? [TOnSubmitAsync_1] extends [TOnSubmitAsync_1 & (import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined)] ? any : TOnSubmitAsync_1 : TOnSubmitAsync_1, [import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined] extends [TOnDynamic_1] ? [TOnDynamic_1] extends [TOnDynamic_1 & (import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined)] ? any : TOnDynamic_1 : TOnDynamic_1, [import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined] extends [TOnDynamicAsync_1] ? [TOnDynamicAsync_1] extends [TOnDynamicAsync_1 & (import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined)] ? any : TOnDynamicAsync_1 : TOnDynamicAsync_1, [import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined] extends [TOnServer_1] ? [TOnServer_1] extends [TOnServer_1 & (import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined)] ? any : TOnServer_1 : TOnServer_1, [unknown] extends [TSubmitMeta_1] ? any : TSubmitMeta_1, [unknown] extends [{} & TNewField] ? any : {} & TNewField, [unknown] extends [{
readonly SubmitButton: typeof SubmitButton;
readonly CardSaveBar: typeof CardSaveBar;
} & TNewForm] ? any : {
readonly SubmitButton: typeof SubmitButton;
readonly CardSaveBar: typeof CardSaveBar;
} & TNewForm>;
}>>;
withFieldGroup: <TFieldGroupData, TSubmitMeta_2, TRenderProps_1 extends object = {}>({ render, props, defaultValues }: import("@tanstack/react-form").WithFieldGroupProps<TFieldGroupData, {} & TNewField, {
readonly SubmitButton: typeof SubmitButton;
readonly CardSaveBar: typeof CardSaveBar;
} & TNewForm, TSubmitMeta_2, TRenderProps_1>) => <TFormData, TFields extends import("@tanstack/react-form").DeepKeysOfType<TFormData, TFieldGroupData | null | undefined> | import("@tanstack/react-form").FieldsMap<TFormData, TFieldGroupData>, TOnMount_2 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnChange_2 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnChangeAsync_2 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnBlur_2 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnBlurAsync_2 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnSubmit_2 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnSubmitAsync_2 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnDynamic_2 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnDynamicAsync_2 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnServer_2 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TFormSubmitMeta>(params: import("react").PropsWithChildren<NoInfer<TRenderProps_1> & {
form: import("@tanstack/react-form").AppFieldExtendedReactFormApi<TFormData, TOnMount_2, TOnChange_2, TOnChangeAsync_2, TOnBlur_2, TOnBlurAsync_2, TOnSubmit_2, TOnSubmitAsync_2, TOnDynamic_2, TOnDynamicAsync_2, TOnServer_2, unknown extends TSubmitMeta_2 ? TFormSubmitMeta : TSubmitMeta_2, {} & TNewField, {
readonly SubmitButton: typeof SubmitButton;
readonly CardSaveBar: typeof CardSaveBar;
} & TNewForm> | import("@tanstack/react-form").AppFieldExtendedReactFieldGroupApi<unknown, TFormData, string | import("@tanstack/react-form").FieldsMap<unknown, TFormData>, any, any, any, any, any, any, any, any, any, any, unknown extends TSubmitMeta_2 ? TFormSubmitMeta : TSubmitMeta_2, {} & TNewField, {
readonly SubmitButton: typeof SubmitButton;
readonly CardSaveBar: typeof CardSaveBar;
} & TNewForm>;
fields: TFields;
}>) => ReturnType<import("react").FunctionComponent>;
useTypedAppFormContext: <TFormData, TOnMount_3 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnChange_3 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnChangeAsync_3 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnBlur_3 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnBlurAsync_3 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnSubmit_3 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnSubmitAsync_3 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnDynamic_3 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnDynamicAsync_3 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnServer_3 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TSubmitMeta_3>(_props: import("@tanstack/react-form").FormOptions<TFormData, TOnMount_3, TOnChange_3, TOnChangeAsync_3, TOnBlur_3, TOnBlurAsync_3, TOnSubmit_3, TOnSubmitAsync_3, TOnDynamic_3, TOnDynamicAsync_3, TOnServer_3, TSubmitMeta_3>) => import("@tanstack/react-form").AppFieldExtendedReactFormApi<TFormData, TOnMount_3, TOnChange_3, TOnChangeAsync_3, TOnBlur_3, TOnBlurAsync_3, TOnSubmit_3, TOnSubmitAsync_3, TOnDynamic_3, TOnDynamicAsync_3, TOnServer_3, TSubmitMeta_3, {} & TNewField, {
readonly SubmitButton: typeof SubmitButton;
readonly CardSaveBar: typeof CardSaveBar;
} & TNewForm>;
extendForm: <const TNewField_1 extends Record<string, import("react").ComponentType<any>> & ({} & TNewField extends (infer T) ? { [K in keyof T]?: "Error: field component names must be unique — this key already exists in the base form" | undefined; } : never), const TNewForm_1 extends Record<string, import("react").ComponentType<any>> & ({
readonly SubmitButton: typeof SubmitButton;
readonly CardSaveBar: typeof CardSaveBar;
} & TNewForm extends (infer T_1) ? { [K_1 in keyof T_1]?: "Error: form component names must be unique — this key already exists in the base form" | undefined; } : never)>(extension: {
fieldComponents?: TNewField_1 | undefined;
formComponents?: TNewForm_1 | undefined;
}) => {
useAppForm: <TFormData, TOnMount_4 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnChange_4 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnChangeAsync_4 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnBlur_4 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnBlurAsync_4 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnSubmit_4 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnSubmitAsync_4 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnDynamic_4 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnDynamicAsync_4 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnServer_4 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TSubmitMeta_4>(props: import("@tanstack/react-form").FormOptions<TFormData, TOnMount_4, TOnChange_4, TOnChangeAsync_4, TOnBlur_4, TOnBlurAsync_4, TOnSubmit_4, TOnSubmitAsync_4, TOnDynamic_4, TOnDynamicAsync_4, TOnServer_4, TSubmitMeta_4>) => import("@tanstack/react-form").AppFieldExtendedReactFormApi<TFormData, TOnMount_4, TOnChange_4, TOnChangeAsync_4, TOnBlur_4, TOnBlurAsync_4, TOnSubmit_4, TOnSubmitAsync_4, TOnDynamic_4, TOnDynamicAsync_4, TOnServer_4, TSubmitMeta_4, {} & TNewField & TNewField_1, {
readonly SubmitButton: typeof SubmitButton;
readonly CardSaveBar: typeof CardSaveBar;
} & TNewForm & TNewForm_1>;
withForm: <TFormData, TOnMount_1_1 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnChange_1_1 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnChangeAsync_1_1 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnBlur_1_1 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnBlurAsync_1_1 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnSubmit_1_1 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnSubmitAsync_1_1 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnDynamic_1_1 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnDynamicAsync_1_1 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnServer_1_1 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TSubmitMeta_1_1, TRenderProps_2 extends object = {}>({ render, props }: import("@tanstack/react-form").WithFormProps<TFormData, TOnMount_1_1, TOnChange_1_1, TOnChangeAsync_1_1, TOnBlur_1_1, TOnBlurAsync_1_1, TOnSubmit_1_1, TOnSubmitAsync_1_1, TOnDynamic_1_1, TOnDynamicAsync_1_1, TOnServer_1_1, TSubmitMeta_1_1, {} & TNewField & TNewField_1, {
readonly SubmitButton: typeof SubmitButton;
readonly CardSaveBar: typeof CardSaveBar;
} & TNewForm & TNewForm_1, TRenderProps_2>) => import("react").FunctionComponent<import("react").PropsWithChildren<NoInfer<[unknown] extends [TRenderProps_2] ? any : TRenderProps_2> & {
form: import("@tanstack/react-form").AppFieldExtendedReactFormApi<[unknown] extends [TFormData] ? any : TFormData, [import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined] extends [TOnMount_1_1] ? [TOnMount_1_1] extends [TOnMount_1_1 & (import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined)] ? any : TOnMount_1_1 : TOnMount_1_1, [import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined] extends [TOnChange_1_1] ? [TOnChange_1_1] extends [TOnChange_1_1 & (import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined)] ? any : TOnChange_1_1 : TOnChange_1_1, [import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined] extends [TOnChangeAsync_1_1] ? [TOnChangeAsync_1_1] extends [TOnChangeAsync_1_1 & (import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined)] ? any : TOnChangeAsync_1_1 : TOnChangeAsync_1_1, [import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined] extends [TOnBlur_1_1] ? [TOnBlur_1_1] extends [TOnBlur_1_1 & (import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined)] ? any : TOnBlur_1_1 : TOnBlur_1_1, [import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined] extends [TOnBlurAsync_1_1] ? [TOnBlurAsync_1_1] extends [TOnBlurAsync_1_1 & (import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined)] ? any : TOnBlurAsync_1_1 : TOnBlurAsync_1_1, [import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined] extends [TOnSubmit_1_1] ? [TOnSubmit_1_1] extends [TOnSubmit_1_1 & (import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined)] ? any : TOnSubmit_1_1 : TOnSubmit_1_1, [import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined] extends [TOnSubmitAsync_1_1] ? [TOnSubmitAsync_1_1] extends [TOnSubmitAsync_1_1 & (import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined)] ? any : TOnSubmitAsync_1_1 : TOnSubmitAsync_1_1, [import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined] extends [TOnDynamic_1_1] ? [TOnDynamic_1_1] extends [TOnDynamic_1_1 & (import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined)] ? any : TOnDynamic_1_1 : TOnDynamic_1_1, [import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined] extends [TOnDynamicAsync_1_1] ? [TOnDynamicAsync_1_1] extends [TOnDynamicAsync_1_1 & (import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined)] ? any : TOnDynamicAsync_1_1 : TOnDynamicAsync_1_1, [import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined] extends [TOnServer_1_1] ? [TOnServer_1_1] extends [TOnServer_1_1 & (import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined)] ? any : TOnServer_1_1 : TOnServer_1_1, [unknown] extends [TSubmitMeta_1_1] ? any : TSubmitMeta_1_1, [unknown] extends [{} & TNewField & TNewField_1] ? any : {} & TNewField & TNewField_1, [unknown] extends [{
readonly SubmitButton: typeof SubmitButton;
readonly CardSaveBar: typeof CardSaveBar;
} & TNewForm & TNewForm_1] ? any : {
readonly SubmitButton: typeof SubmitButton;
readonly CardSaveBar: typeof CardSaveBar;
} & TNewForm & TNewForm_1>;
}>>;
withFieldGroup: <TFieldGroupData, TSubmitMeta_2_1, TRenderProps_1_1 extends object = {}>({ render, props, defaultValues }: import("@tanstack/react-form").WithFieldGroupProps<TFieldGroupData, {} & TNewField & TNewField_1, {
readonly SubmitButton: typeof SubmitButton;
readonly CardSaveBar: typeof CardSaveBar;
} & TNewForm & TNewForm_1, TSubmitMeta_2_1, TRenderProps_1_1>) => <TFormData, TFields_1 extends import("@tanstack/react-form").DeepKeysOfType<TFormData, TFieldGroupData | null | undefined> | import("@tanstack/react-form").FieldsMap<TFormData, TFieldGroupData>, TOnMount_2_1 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnChange_2_1 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnChangeAsync_2_1 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnBlur_2_1 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnBlurAsync_2_1 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnSubmit_2_1 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnSubmitAsync_2_1 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnDynamic_2_1 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnDynamicAsync_2_1 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnServer_2_1 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TFormSubmitMeta_1>(params: import("react").PropsWithChildren<NoInfer<TRenderProps_1_1> & {
form: import("@tanstack/react-form").AppFieldExtendedReactFormApi<TFormData, TOnMount_2_1, TOnChange_2_1, TOnChangeAsync_2_1, TOnBlur_2_1, TOnBlurAsync_2_1, TOnSubmit_2_1, TOnSubmitAsync_2_1, TOnDynamic_2_1, TOnDynamicAsync_2_1, TOnServer_2_1, unknown extends TSubmitMeta_2_1 ? TFormSubmitMeta_1 : TSubmitMeta_2_1, {} & TNewField & TNewField_1, {
readonly SubmitButton: typeof SubmitButton;
readonly CardSaveBar: typeof CardSaveBar;
} & TNewForm & TNewForm_1> | import("@tanstack/react-form").AppFieldExtendedReactFieldGroupApi<unknown, TFormData, string | import("@tanstack/react-form").FieldsMap<unknown, TFormData>, any, any, any, any, any, any, any, any, any, any, unknown extends TSubmitMeta_2_1 ? TFormSubmitMeta_1 : TSubmitMeta_2_1, {} & TNewField & TNewField_1, {
readonly SubmitButton: typeof SubmitButton;
readonly CardSaveBar: typeof CardSaveBar;
} & TNewForm & TNewForm_1>;
fields: TFields_1;
}>) => ReturnType<import("react").FunctionComponent>;
useTypedAppFormContext: <TFormData, TOnMount_3_1 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnChange_3_1 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnChangeAsync_3_1 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnBlur_3_1 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnBlurAsync_3_1 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnSubmit_3_1 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnSubmitAsync_3_1 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnDynamic_3_1 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnDynamicAsync_3_1 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnServer_3_1 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TSubmitMeta_3_1>(_props: import("@tanstack/react-form").FormOptions<TFormData, TOnMount_3_1, TOnChange_3_1, TOnChangeAsync_3_1, TOnBlur_3_1, TOnBlurAsync_3_1, TOnSubmit_3_1, TOnSubmitAsync_3_1, TOnDynamic_3_1, TOnDynamicAsync_3_1, TOnServer_3_1, TSubmitMeta_3_1>) => import("@tanstack/react-form").AppFieldExtendedReactFormApi<TFormData, TOnMount_3_1, TOnChange_3_1, TOnChangeAsync_3_1, TOnBlur_3_1, TOnBlurAsync_3_1, TOnSubmit_3_1, TOnSubmitAsync_3_1, TOnDynamic_3_1, TOnDynamicAsync_3_1, TOnServer_3_1, TSubmitMeta_3_1, {} & TNewField & TNewField_1, {
readonly SubmitButton: typeof SubmitButton;
readonly CardSaveBar: typeof CardSaveBar;
} & TNewForm & TNewForm_1>;
extendForm: <const TNewField_2 extends Record<string, import("react").ComponentType<any>> & ({} & TNewField & TNewField_1 extends (infer T_2) ? { [K_2 in keyof T_2]?: "Error: field component names must be unique — this key already exists in the base form" | undefined; } : never), const TNewForm_2 extends Record<string, import("react").ComponentType<any>> & ({
readonly SubmitButton: typeof SubmitButton;
readonly CardSaveBar: typeof CardSaveBar;
} & TNewForm & TNewForm_1 extends (infer T_3) ? { [K_3 in keyof T_3]?: "Error: form component names must be unique — this key already exists in the base form" | undefined; } : never)>(extension: {
fieldComponents?: TNewField_2 | undefined;
formComponents?: TNewForm_2 | undefined;
}) => {
useAppForm: <TFormData, TOnMount_5 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnChange_5 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnChangeAsync_5 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnBlur_5 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnBlurAsync_5 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnSubmit_5 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnSubmitAsync_5 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnDynamic_5 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnDynamicAsync_5 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnServer_5 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TSubmitMeta_5>(props: import("@tanstack/react-form").FormOptions<TFormData, TOnMount_5, TOnChange_5, TOnChangeAsync_5, TOnBlur_5, TOnBlurAsync_5, TOnSubmit_5, TOnSubmitAsync_5, TOnDynamic_5, TOnDynamicAsync_5, TOnServer_5, TSubmitMeta_5>) => import("@tanstack/react-form").AppFieldExtendedReactFormApi<TFormData, TOnMount_5, TOnChange_5, TOnChangeAsync_5, TOnBlur_5, TOnBlurAsync_5, TOnSubmit_5, TOnSubmitAsync_5, TOnDynamic_5, TOnDynamicAsync_5, TOnServer_5, TSubmitMeta_5, {} & TNewField & TNewField_1 & TNewField_2, {
readonly SubmitButton: typeof SubmitButton;
readonly CardSaveBar: typeof CardSaveBar;
} & TNewForm & TNewForm_1 & TNewForm_2>;
withForm: <TFormData, TOnMount_1_2 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnChange_1_2 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnChangeAsync_1_2 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnBlur_1_2 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnBlurAsync_1_2 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnSubmit_1_2 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnSubmitAsync_1_2 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnDynamic_1_2 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnDynamicAsync_1_2 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnServer_1_2 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TSubmitMeta_1_2, TRenderProps_3 extends object = {}>({ render, props }: import("@tanstack/react-form").WithFormProps<TFormData, TOnMount_1_2, TOnChange_1_2, TOnChangeAsync_1_2, TOnBlur_1_2, TOnBlurAsync_1_2, TOnSubmit_1_2, TOnSubmitAsync_1_2, TOnDynamic_1_2, TOnDynamicAsync_1_2, TOnServer_1_2, TSubmitMeta_1_2, {} & TNewField & TNewField_1 & TNewField_2, {
readonly SubmitButton: typeof SubmitButton;
readonly CardSaveBar: typeof CardSaveBar;
} & TNewForm & TNewForm_1 & TNewForm_2, TRenderProps_3>) => import("react").FunctionComponent<import("react").PropsWithChildren<NoInfer<[unknown] extends [TRenderProps_3] ? any : TRenderProps_3> & {
form: import("@tanstack/react-form").AppFieldExtendedReactFormApi<[unknown] extends [TFormData] ? any : TFormData, [import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined] extends [TOnMount_1_2] ? [TOnMount_1_2] extends [TOnMount_1_2 & (import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined)] ? any : TOnMount_1_2 : TOnMount_1_2, [import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined] extends [TOnChange_1_2] ? [TOnChange_1_2] extends [TOnChange_1_2 & (import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined)] ? any : TOnChange_1_2 : TOnChange_1_2, [import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined] extends [TOnChangeAsync_1_2] ? [TOnChangeAsync_1_2] extends [TOnChangeAsync_1_2 & (import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined)] ? any : TOnChangeAsync_1_2 : TOnChangeAsync_1_2, [import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined] extends [TOnBlur_1_2] ? [TOnBlur_1_2] extends [TOnBlur_1_2 & (import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined)] ? any : TOnBlur_1_2 : TOnBlur_1_2, [import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined] extends [TOnBlurAsync_1_2] ? [TOnBlurAsync_1_2] extends [TOnBlurAsync_1_2 & (import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined)] ? any : TOnBlurAsync_1_2 : TOnBlurAsync_1_2, [import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined] extends [TOnSubmit_1_2] ? [TOnSubmit_1_2] extends [TOnSubmit_1_2 & (import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined)] ? any : TOnSubmit_1_2 : TOnSubmit_1_2, [import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined] extends [TOnSubmitAsync_1_2] ? [TOnSubmitAsync_1_2] extends [TOnSubmitAsync_1_2 & (import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined)] ? any : TOnSubmitAsync_1_2 : TOnSubmitAsync_1_2, [import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined] extends [TOnDynamic_1_2] ? [TOnDynamic_1_2] extends [TOnDynamic_1_2 & (import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined)] ? any : TOnDynamic_1_2 : TOnDynamic_1_2, [import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined] extends [TOnDynamicAsync_1_2] ? [TOnDynamicAsync_1_2] extends [TOnDynamicAsync_1_2 & (import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined)] ? any : TOnDynamicAsync_1_2 : TOnDynamicAsync_1_2, [import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined] extends [TOnServer_1_2] ? [TOnServer_1_2] extends [TOnServer_1_2 & (import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined)] ? any : TOnServer_1_2 : TOnServer_1_2, [unknown] extends [TSubmitMeta_1_2] ? any : TSubmitMeta_1_2, [unknown] extends [{} & TNewField & TNewField_1 & TNewField_2] ? any : {} & TNewField & TNewField_1 & TNewField_2, [unknown] extends [{
readonly SubmitButton: typeof SubmitButton;
readonly CardSaveBar: typeof CardSaveBar;
} & TNewForm & TNewForm_1 & TNewForm_2] ? any : {
readonly SubmitButton: typeof SubmitButton;
readonly CardSaveBar: typeof CardSaveBar;
} & TNewForm & TNewForm_1 & TNewForm_2>;
}>>;
withFieldGroup: <TFieldGroupData, TSubmitMeta_2_2, TRenderProps_1_2 extends object = {}>({ render, props, defaultValues }: import("@tanstack/react-form").WithFieldGroupProps<TFieldGroupData, {} & TNewField & TNewField_1 & TNewField_2, {
readonly SubmitButton: typeof SubmitButton;
readonly CardSaveBar: typeof CardSaveBar;
} & TNewForm & TNewForm_1 & TNewForm_2, TSubmitMeta_2_2, TRenderProps_1_2>) => <TFormData, TFields_2 extends import("@tanstack/react-form").DeepKeysOfType<TFormData, TFieldGroupData | null | undefined> | import("@tanstack/react-form").FieldsMap<TFormData, TFieldGroupData>, TOnMount_2_2 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnChange_2_2 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnChangeAsync_2_2 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnBlur_2_2 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnBlurAsync_2_2 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnSubmit_2_2 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnSubmitAsync_2_2 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnDynamic_2_2 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnDynamicAsync_2_2 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnServer_2_2 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TFormSubmitMeta_2>(params: import("react").PropsWithChildren<NoInfer<TRenderProps_1_2> & {
form: import("@tanstack/react-form").AppFieldExtendedReactFormApi<TFormData, TOnMount_2_2, TOnChange_2_2, TOnChangeAsync_2_2, TOnBlur_2_2, TOnBlurAsync_2_2, TOnSubmit_2_2, TOnSubmitAsync_2_2, TOnDynamic_2_2, TOnDynamicAsync_2_2, TOnServer_2_2, unknown extends TSubmitMeta_2_2 ? TFormSubmitMeta_2 : TSubmitMeta_2_2, {} & TNewField & TNewField_1 & TNewField_2, {
readonly SubmitButton: typeof SubmitButton;
readonly CardSaveBar: typeof CardSaveBar;
} & TNewForm & TNewForm_1 & TNewForm_2> | import("@tanstack/react-form").AppFieldExtendedReactFieldGroupApi<unknown, TFormData, string | import("@tanstack/react-form").FieldsMap<unknown, TFormData>, any, any, any, any, any, any, any, any, any, any, unknown extends TSubmitMeta_2_2 ? TFormSubmitMeta_2 : TSubmitMeta_2_2, {} & TNewField & TNewField_1 & TNewField_2, {
readonly SubmitButton: typeof SubmitButton;
readonly CardSaveBar: typeof CardSaveBar;
} & TNewForm & TNewForm_1 & TNewForm_2>;
fields: TFields_2;
}>) => ReturnType<import("react").FunctionComponent>;
useTypedAppFormContext: <TFormData, TOnMount_3_2 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnChange_3_2 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnChangeAsync_3_2 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnBlur_3_2 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnBlurAsync_3_2 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnSubmit_3_2 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnSubmitAsync_3_2 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnDynamic_3_2 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnDynamicAsync_3_2 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnServer_3_2 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TSubmitMeta_3_2>(_props: import("@tanstack/react-form").FormOptions<TFormData, TOnMount_3_2, TOnChange_3_2, TOnChangeAsync_3_2, TOnBlur_3_2, TOnBlurAsync_3_2, TOnSubmit_3_2, TOnSubmitAsync_3_2, TOnDynamic_3_2, TOnDynamicAsync_3_2, TOnServer_3_2, TSubmitMeta_3_2>) => import("@tanstack/react-form").AppFieldExtendedReactFormApi<TFormData, TOnMount_3_2, TOnChange_3_2, TOnChangeAsync_3_2, TOnBlur_3_2, TOnBlurAsync_3_2, TOnSubmit_3_2, TOnSubmitAsync_3_2, TOnDynamic_3_2, TOnDynamicAsync_3_2, TOnServer_3_2, TSubmitMeta_3_2, {} & TNewField & TNewField_1 & TNewField_2, {
readonly SubmitButton: typeof SubmitButton;
readonly CardSaveBar: typeof CardSaveBar;
} & TNewForm & TNewForm_1 & TNewForm_2>;
extendForm: <const TNewField_3 extends Record<string, import("react").ComponentType<any>> & ({} & TNewField & TNewField_1 & TNewField_2 extends (infer T_4) ? { [K_4 in keyof T_4]?: "Error: field component names must be unique — this key already exists in the base form" | undefined; } : never), const TNewForm_3 extends Record<string, import("react").ComponentType<any>> & ({
readonly SubmitButton: typeof SubmitButton;
readonly CardSaveBar: typeof CardSaveBar;
} & TNewForm & TNewForm_1 & TNewForm_2 extends (infer T_5) ? { [K_5 in keyof T_5]?: "Error: form component names must be unique — this key already exists in the base form" | undefined; } : never)>(extension: {
fieldComponents?: TNewField_3 | undefined;
formComponents?: TNewForm_3 | undefined;
}) => {
useAppForm: <TFormData, TOnMount_6 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnChange_6 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnChangeAsync_6 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnBlur_6 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnBlurAsync_6 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnSubmit_6 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnSubmitAsync_6 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnDynamic_6 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnDynamicAsync_6 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnServer_6 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TSubmitMeta_6>(props: import("@tanstack/react-form").FormOptions<TFormData, TOnMount_6, TOnChange_6, TOnChangeAsync_6, TOnBlur_6, TOnBlurAsync_6, TOnSubmit_6, TOnSubmitAsync_6, TOnDynamic_6, TOnDynamicAsync_6, TOnServer_6, TSubmitMeta_6>) => import("@tanstack/react-form").AppFieldExtendedReactFormApi<TFormData, TOnMount_6, TOnChange_6, TOnChangeAsync_6, TOnBlur_6, TOnBlurAsync_6, TOnSubmit_6, TOnSubmitAsync_6, TOnDynamic_6, TOnDynamicAsync_6, TOnServer_6, TSubmitMeta_6, {} & TNewField & TNewField_1 & TNewField_2 & TNewField_3, {
readonly SubmitButton: typeof SubmitButton;
readonly CardSaveBar: typeof CardSaveBar;
} & TNewForm & TNewForm_1 & TNewForm_2 & TNewForm_3>;
withForm: <TFormData, TOnMount_1_3 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnChange_1_3 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnChangeAsync_1_3 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnBlur_1_3 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnBlurAsync_1_3 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnSubmit_1_3 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnSubmitAsync_1_3 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnDynamic_1_3 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnDynamicAsync_1_3 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnServer_1_3 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TSubmitMeta_1_3, TRenderProps_4 extends object = {}>({ render, props }: import("@tanstack/react-form").WithFormProps<TFormData, TOnMount_1_3, TOnChange_1_3, TOnChangeAsync_1_3, TOnBlur_1_3, TOnBlurAsync_1_3, TOnSubmit_1_3, TOnSubmitAsync_1_3, TOnDynamic_1_3, TOnDynamicAsync_1_3, TOnServer_1_3, TSubmitMeta_1_3, {} & TNewField & TNewField_1 & TNewField_2 & TNewField_3, {
readonly SubmitButton: typeof SubmitButton;
readonly CardSaveBar: typeof CardSaveBar;
} & TNewForm & TNewForm_1 & TNewForm_2 & TNewForm_3, TRenderProps_4>) => import("react").FunctionComponent<import("react").PropsWithChildren<NoInfer<[unknown] extends [TRenderProps_4] ? any : TRenderProps_4> & {
form: import("@tanstack/react-form").AppFieldExtendedReactFormApi<[unknown] extends [TFormData] ? any : TFormData, [import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined] extends [TOnMount_1_3] ? [TOnMount_1_3] extends [TOnMount_1_3 & (import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined)] ? any : TOnMount_1_3 : TOnMount_1_3, [import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined] extends [TOnChange_1_3] ? [TOnChange_1_3] extends [TOnChange_1_3 & (import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined)] ? any : TOnChange_1_3 : TOnChange_1_3, [import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined] extends [TOnChangeAsync_1_3] ? [TOnChangeAsync_1_3] extends [TOnChangeAsync_1_3 & (import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined)] ? any : TOnChangeAsync_1_3 : TOnChangeAsync_1_3, [import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined] extends [TOnBlur_1_3] ? [TOnBlur_1_3] extends [TOnBlur_1_3 & (import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined)] ? any : TOnBlur_1_3 : TOnBlur_1_3, [import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined] extends [TOnBlurAsync_1_3] ? [TOnBlurAsync_1_3] extends [TOnBlurAsync_1_3 & (import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined)] ? any : TOnBlurAsync_1_3 : TOnBlurAsync_1_3, [import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined] extends [TOnSubmit_1_3] ? [TOnSubmit_1_3] extends [TOnSubmit_1_3 & (import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined)] ? any : TOnSubmit_1_3 : TOnSubmit_1_3, [import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined] extends [TOnSubmitAsync_1_3] ? [TOnSubmitAsync_1_3] extends [TOnSubmitAsync_1_3 & (import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined)] ? any : TOnSubmitAsync_1_3 : TOnSubmitAsync_1_3, [import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined] extends [TOnDynamic_1_3] ? [TOnDynamic_1_3] extends [TOnDynamic_1_3 & (import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined)] ? any : TOnDynamic_1_3 : TOnDynamic_1_3, [import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined] extends [TOnDynamicAsync_1_3] ? [TOnDynamicAsync_1_3] extends [TOnDynamicAsync_1_3 & (import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined)] ? any : TOnDynamicAsync_1_3 : TOnDynamicAsync_1_3, [import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined] extends [TOnServer_1_3] ? [TOnServer_1_3] extends [TOnServer_1_3 & (import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined)] ? any : TOnServer_1_3 : TOnServer_1_3, [unknown] extends [TSubmitMeta_1_3] ? any : TSubmitMeta_1_3, [unknown] extends [{} & TNewField & TNewField_1 & TNewField_2 & TNewField_3] ? any : {} & TNewField & TNewField_1 & TNewField_2 & TNewField_3, [unknown] extends [{
readonly SubmitButton: typeof SubmitButton;
readonly CardSaveBar: typeof CardSaveBar;
} & TNewForm & TNewForm_1 & TNewForm_2 & TNewForm_3] ? any : {
readonly SubmitButton: typeof SubmitButton;
readonly CardSaveBar: typeof CardSaveBar;
} & TNewForm & TNewForm_1 & TNewForm_2 & TNewForm_3>;
}>>;
withFieldGroup: <TFieldGroupData, TSubmitMeta_2_3, TRenderProps_1_3 extends object = {}>({ render, props, defaultValues }: import("@tanstack/react-form").WithFieldGroupProps<TFieldGroupData, {} & TNewField & TNewField_1 & TNewField_2 & TNewField_3, {
readonly SubmitButton: typeof SubmitButton;
readonly CardSaveBar: typeof CardSaveBar;
} & TNewForm & TNewForm_1 & TNewForm_2 & TNewForm_3, TSubmitMeta_2_3, TRenderProps_1_3>) => <TFormData, TFields_3 extends import("@tanstack/react-form").DeepKeysOfType<TFormData, TFieldGroupData | null | undefined> | import("@tanstack/react-form").FieldsMap<TFormData, TFieldGroupData>, TOnMount_2_3 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnChange_2_3 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnChangeAsync_2_3 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnBlur_2_3 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnBlurAsync_2_3 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnSubmit_2_3 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnSubmitAsync_2_3 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnDynamic_2_3 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnDynamicAsync_2_3 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnServer_2_3 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TFormSubmitMeta_3>(params: import("react").PropsWithChildren<NoInfer<TRenderProps_1_3> & {
form: import("@tanstack/react-form").AppFieldExtendedReactFormApi<TFormData, TOnMount_2_3, TOnChange_2_3, TOnChangeAsync_2_3, TOnBlur_2_3, TOnBlurAsync_2_3, TOnSubmit_2_3, TOnSubmitAsync_2_3, TOnDynamic_2_3, TOnDynamicAsync_2_3, TOnServer_2_3, unknown extends TSubmitMeta_2_3 ? TFormSubmitMeta_3 : TSubmitMeta_2_3, {} & TNewField & TNewField_1 & TNewField_2 & TNewField_3, {
readonly SubmitButton: typeof SubmitButton;
readonly CardSaveBar: typeof CardSaveBar;
} & TNewForm & TNewForm_1 & TNewForm_2 & TNewForm_3> | import("@tanstack/react-form").AppFieldExtendedReactFieldGroupApi<unknown, TFormData, string | import("@tanstack/react-form").FieldsMap<unknown, TFormData>, any, any, any, any, any, any, any, any, any, any, unknown extends TSubmitMeta_2_3 ? TFormSubmitMeta_3 : TSubmitMeta_2_3, {} & TNewField & TNewField_1 & TNewField_2 & TNewField_3, {
readonly SubmitButton: typeof SubmitButton;
readonly CardSaveBar: typeof CardSaveBar;
} & TNewForm & TNewForm_1 & TNewForm_2 & TNewForm_3>;
fields: TFields_3;
}>) => ReturnType<import("react").FunctionComponent>;
useTypedAppFormContext: <TFormData, TOnMount_3_3 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnChange_3_3 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnChangeAsync_3_3 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnBlur_3_3 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnBlurAsync_3_3 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnSubmit_3_3 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnSubmitAsync_3_3 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnDynamic_3_3 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnDynamicAsync_3_3 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnServer_3_3 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TSubmitMeta_3_3>(_props: import("@tanstack/react-form").FormOptions<TFormData, TOnMount_3_3, TOnChange_3_3, TOnChangeAsync_3_3, TOnBlur_3_3, TOnBlurAsync_3_3, TOnSubmit_3_3, TOnSubmitAsync_3_3, TOnDynamic_3_3, TOnDynamicAsync_3_3, TOnServer_3_3, TSubmitMeta_3_3>) => import("@tanstack/react-form").AppFieldExtendedReactFormApi<TFormData, TOnMount_3_3, TOnChange_3_3, TOnChangeAsync_3_3, TOnBlur_3_3, TOnBlurAsync_3_3, TOnSubmit_3_3, TOnSubmitAsync_3_3, TOnDynamic_3_3, TOnDynamicAsync_3_3, TOnServer_3_3, TSubmitMeta_3_3, {} & TNewField & TNewField_1 & TNewField_2 & TNewField_3, {
readonly SubmitButton: typeof SubmitButton;
readonly CardSaveBar: typeof CardSaveBar;
} & TNewForm & TNewForm_1 & TNewForm_2 & TNewForm_3>;
extendForm: <const TNewField_4 extends Record<string, import("react").ComponentType<any>> & ({} & TNewField & TNewField_1 & TNewField_2 & TNewField_3 extends (infer T_6) ? { [K_6 in keyof T_6]?: "Error: field component names must be unique — this key already exists in the base form" | undefined; } : never), const TNewForm_4 extends Record<string, import("react").ComponentType<any>> & ({
readonly SubmitButton: typeof SubmitButton;
readonly CardSaveBar: typeof CardSaveBar;
} & TNewForm & TNewForm_1 & TNewForm_2 & TNewForm_3 extends (infer T_7) ? { [K_7 in keyof T_7]?: "Error: form component names must be unique — this key already exists in the base form" | undefined; } : never)>(extension: {
fieldComponents?: TNewField_4 | undefined;
formComponents?: TNewForm_4 | undefined;
}) => {
useAppForm: <TFormData, TOnMount_7 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnChange_7 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnChangeAsync_7 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnBlur_7 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnBlurAsync_7 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnSubmit_7 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnSubmitAsync_7 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnDynamic_7 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnDynamicAsync_7 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnServer_7 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TSubmitMeta_7>(props: import("@tanstack/react-form").FormOptions<TFormData, TOnMount_7, TOnChange_7, TOnChangeAsync_7, TOnBlur_7, TOnBlurAsync_7, TOnSubmit_7, TOnSubmitAsync_7, TOnDynamic_7, TOnDynamicAsync_7, TOnServer_7, TSubmitMeta_7>) => import("@tanstack/react-form").AppFieldExtendedReactFormApi<TFormData, TOnMount_7, TOnChange_7, TOnChangeAsync_7, TOnBlur_7, TOnBlurAsync_7, TOnSubmit_7, TOnSubmitAsync_7, TOnDynamic_7, TOnDynamicAsync_7, TOnServer_7, TSubmitMeta_7, {} & TNewField & TNewField_1 & TNewField_2 & TNewField_3 & TNewField_4, {
readonly SubmitButton: typeof SubmitButton;
readonly CardSaveBar: typeof CardSaveBar;
} & TNewForm & TNewForm_1 & TNewForm_2 & TNewForm_3 & TNewForm_4>;
withForm: <TFormData, TOnMount_1_4 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnChange_1_4 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnChangeAsync_1_4 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnBlur_1_4 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnBlurAsync_1_4 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnSubmit_1_4 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnSubmitAsync_1_4 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnDynamic_1_4 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnDynamicAsync_1_4 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnServer_1_4 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TSubmitMeta_1_4, TRenderProps_5 extends object = {}>({ render, props }: import("@tanstack/react-form").WithFormProps<TFormData, TOnMount_1_4, TOnChange_1_4, TOnChangeAsync_1_4, TOnBlur_1_4, TOnBlurAsync_1_4, TOnSubmit_1_4, TOnSubmitAsync_1_4, TOnDynamic_1_4, TOnDynamicAsync_1_4, TOnServer_1_4, TSubmitMeta_1_4, {} & TNewField & TNewField_1 & TNewField_2 & TNewField_3 & TNewField_4, {
readonly SubmitButton: typeof SubmitButton;
readonly CardSaveBar: typeof CardSaveBar;
} & TNewForm & TNewForm_1 & TNewForm_2 & TNewForm_3 & TNewForm_4, TRenderProps_5>) => import("react").FunctionComponent<import("react").PropsWithChildren<NoInfer<[unknown] extends [TRenderProps_5] ? any : TRenderProps_5> & {
form: import("@tanstack/react-form").AppFieldExtendedReactFormApi<[unknown] extends [TFormData] ? any : TFormData, [import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined] extends [TOnMount_1_4] ? [TOnMount_1_4] extends [TOnMount_1_4 & (import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined)] ? any : TOnMount_1_4 : TOnMount_1_4, [import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined] extends [TOnChange_1_4] ? [TOnChange_1_4] extends [TOnChange_1_4 & (import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined)] ? any : TOnChange_1_4 : TOnChange_1_4, [import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined] extends [TOnChangeAsync_1_4] ? [TOnChangeAsync_1_4] extends [TOnChangeAsync_1_4 & (import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined)] ? any : TOnChangeAsync_1_4 : TOnChangeAsync_1_4, [import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined] extends [TOnBlur_1_4] ? [TOnBlur_1_4] extends [TOnBlur_1_4 & (import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined)] ? any : TOnBlur_1_4 : TOnBlur_1_4, [import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined] extends [TOnBlurAsync_1_4] ? [TOnBlurAsync_1_4] extends [TOnBlurAsync_1_4 & (import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined)] ? any : TOnBlurAsync_1_4 : TOnBlurAsync_1_4, [import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined] extends [TOnSubmit_1_4] ? [TOnSubmit_1_4] extends [TOnSubmit_1_4 & (import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined)] ? any : TOnSubmit_1_4 : TOnSubmit_1_4, [import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined] extends [TOnSubmitAsync_1_4] ? [TOnSubmitAsync_1_4] extends [TOnSubmitAsync_1_4 & (import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined)] ? any : TOnSubmitAsync_1_4 : TOnSubmitAsync_1_4, [import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined] extends [TOnDynamic_1_4] ? [TOnDynamic_1_4] extends [TOnDynamic_1_4 & (import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined)] ? any : TOnDynamic_1_4 : TOnDynamic_1_4, [import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined] extends [TOnDynamicAsync_1_4] ? [TOnDynamicAsync_1_4] extends [TOnDynamicAsync_1_4 & (import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined)] ? any : TOnDynamicAsync_1_4 : TOnDynamicAsync_1_4, [import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined] extends [TOnServer_1_4] ? [TOnServer_1_4] extends [TOnServer_1_4 & (import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined)] ? any : TOnServer_1_4 : TOnServer_1_4, [unknown] extends [TSubmitMeta_1_4] ? any : TSubmitMeta_1_4, [unknown] extends [{} & TNewField & TNewField_1 & TNewField_2 & TNewField_3 & TNewField_4] ? any : {} & TNewField & TNewField_1 & TNewField_2 & TNewField_3 & TNewField_4, [unknown] extends [{
readonly SubmitButton: typeof SubmitButton;
readonly CardSaveBar: typeof CardSaveBar;
} & TNewForm & TNewForm_1 & TNewForm_2 & TNewForm_3 & TNewForm_4] ? any : {
readonly SubmitButton: typeof SubmitButton;
readonly CardSaveBar: typeof CardSaveBar;
} & TNewForm & TNewForm_1 & TNewForm_2 & TNewForm_3 & TNewForm_4>;
}>>;
withFieldGroup: <TFieldGroupData, TSubmitMeta_2_4, TRenderProps_1_4 extends object = {}>({ render, props, defaultValues }: import("@tanstack/react-form").WithFieldGroupProps<TFieldGroupData, {} & TNewField & TNewField_1 & TNewField_2 & TNewField_3 & TNewField_4, {
readonly SubmitButton: typeof SubmitButton;
readonly CardSaveBar: typeof CardSaveBar;
} & TNewForm & TNewForm_1 & TNewForm_2 & TNewForm_3 & TNewForm_4, TSubmitMeta_2_4, TRenderProps_1_4>) => <TFormData, TFields_4 extends import("@tanstack/react-form").DeepKeysOfType<TFormData, TFieldGroupData | null | undefined> | import("@tanstack/react-form").FieldsMap<TFormData, TFieldGroupData>, TOnMount_2_4 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnChange_2_4 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnChangeAsync_2_4 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnBlur_2_4 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnBlurAsync_2_4 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnSubmit_2_4 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnSubmitAsync_2_4 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnDynamic_2_4 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnDynamicAsync_2_4 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnServer_2_4 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TFormSubmitMeta_4>(params: import("react").PropsWithChildren<NoInfer<TRenderProps_1_4> & {
form: import("@tanstack/react-form").AppFieldExtendedReactFormApi<TFormData, TOnMount_2_4, TOnChange_2_4, TOnChangeAsync_2_4, TOnBlur_2_4, TOnBlurAsync_2_4, TOnSubmit_2_4, TOnSubmitAsync_2_4, TOnDynamic_2_4, TOnDynamicAsync_2_4, TOnServer_2_4, unknown extends TSubmitMeta_2_4 ? TFormSubmitMeta_4 : TSubmitMeta_2_4, {} & TNewField & TNewField_1 & TNewField_2 & TNewField_3 & TNewField_4, {
readonly SubmitButton: typeof SubmitButton;
readonly CardSaveBar: typeof CardSaveBar;
} & TNewForm & TNewForm_1 & TNewForm_2 & TNewForm_3 & TNewForm_4> | import("@tanstack/react-form").AppFieldExtendedReactFieldGroupApi<unknown, TFormData, string | import("@tanstack/react-form").FieldsMap<unknown, TFormData>, any, any, any, any, any, any, any, any, any, any, unknown extends TSubmitMeta_2_4 ? TFormSubmitMeta_4 : TSubmitMeta_2_4, {} & TNewField & TNewField_1 & TNewField_2 & TNewField_3 & TNewField_4, {
readonly SubmitButton: typeof SubmitButton;
readonly CardSaveBar: typeof CardSaveBar;
} & TNewForm & TNewForm_1 & TNewForm_2 & TNewForm_3 & TNewForm_4>;
fields: TFields_4;
}>) => ReturnType<import("react").FunctionComponent>;
useTypedAppFormContext: <TFormData, TOnMount_3_4 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnChange_3_4 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnChangeAsync_3_4 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnBlur_3_4 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnBlurAsync_3_4 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnSubmit_3_4 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnSubmitAsync_3_4 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnDynamic_3_4 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnDynamicAsync_3_4 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnServer_3_4 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TSubmitMeta_3_4>(_props: import("@tanstack/react-form").FormOptions<TFormData, TOnMount_3_4, TOnChange_3_4, TOnChangeAsync_3_4, TOnBlur_3_4, TOnBlurAsync_3_4, TOnSubmit_3_4, TOnSubmitAsync_3_4, TOnDynamic_3_4, TOnDynamicAsync_3_4, TOnServer_3_4, TSubmitMeta_3_4>) => import("@tanstack/react-form").AppFieldExtendedReactFormApi<TFormData, TOnMount_3_4, TOnChange_3_4, TOnChangeAsync_3_4, TOnBlur_3_4, TOnBlurAsync_3_4, TOnSubmit_3_4, TOnSubmitAsync_3_4, TOnDynamic_3_4, TOnDynamicAsync_3_4, TOnServer_3_4, TSubmitMeta_3_4, {} & TNewField & TNewField_1 & TNewField_2 & TNewField_3 & TNewField_4, {
readonly SubmitButton: typeof SubmitButton;
readonly CardSaveBar: typeof CardSaveBar;
} & TNewForm & TNewForm_1 & TNewForm_2 & TNewForm_3 & TNewForm_4>;
extendForm: <const TNewField_5 extends Record<string, import("react").ComponentType<any>> & ({} & TNewField & TNewField_1 & TNewField_2 & TNewField_3 & TNewField_4 extends (infer T_8) ? { [K_8 in keyof T_8]?: "Error: field component names must be unique — this key already exists in the base form" | undefined; } : never), const TNewForm_5 extends Record<string, import("react").ComponentType<any>> & ({
readonly SubmitButton: typeof SubmitButton;
readonly CardSaveBar: typeof CardSaveBar;
} & TNewForm & TNewForm_1 & TNewForm_2 & TNewForm_3 & TNewForm_4 extends (infer T_9) ? { [K_9 in keyof T_9]?: "Error: form component names must be unique — this key already exists in the base form" | undefined; } : never)>(extension: {
fieldComponents?: TNewField_5 | undefined;
formComponents?: TNewForm_5 | undefined;
}) => {
useAppForm: <TFormData, TOnMount_8 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnChange_8 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnChangeAsync_8 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnBlur_8 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnBlurAsync_8 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnSubmit_8 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnSubmitAsync_8 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnDynamic_8 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnDynamicAsync_8 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnServer_8 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TSubmitMeta_8>(props: import("@tanstack/react-form").FormOptions<TFormData, TOnMount_8, TOnChange_8, TOnChangeAsync_8, TOnBlur_8, TOnBlurAsync_8, TOnSubmit_8, TOnSubmitAsync_8, TOnDynamic_8, TOnDynamicAsync_8, TOnServer_8, TSubmitMeta_8>) => import("@tanstack/react-form").AppFieldExtendedReactFormApi<TFormData, TOnMount_8, TOnChange_8, TOnChangeAsync_8, TOnBlur_8, TOnBlurAsync_8, TOnSubmit_8, TOnSubmitAsync_8, TOnDynamic_8, TOnDynamicAsync_8, TOnServer_8, TSubmitMeta_8, {} & TNewField & TNewField_1 & TNewField_2 & TNewField_3 & TNewField_4 & TNewField_5, {
readonly SubmitButton: typeof SubmitButton;
readonly CardSaveBar: typeof CardSaveBar;
} & TNewForm & TNewForm_1 & TNewForm_2 & TNewForm_3 & TNewForm_4 & TNewForm_5>;
withForm: <TFormData, TOnMount_1_5 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnChange_1_5 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnChangeAsync_1_5 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnBlur_1_5 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnBlurAsync_1_5 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnSubmit_1_5 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnSubmitAsync_1_5 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnDynamic_1_5 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnDynamicAsync_1_5 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnServer_1_5 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TSubmitMeta_1_5, TRenderProps_6 extends object = {}>({ render, props }: import("@tanstack/react-form").WithFormProps<TFormData, TOnMount_1_5, TOnChange_1_5, TOnChangeAsync_1_5, TOnBlur_1_5, TOnBlurAsync_1_5, TOnSubmit_1_5, TOnSubmitAsync_1_5, TOnDynamic_1_5, TOnDynamicAsync_1_5, TOnServer_1_5, TSubmitMeta_1_5, {} & TNewField & TNewField_1 & TNewField_2 & TNewField_3 & TNewField_4 & TNewField_5, {
readonly SubmitButton: typeof SubmitButton;
readonly CardSaveBar: typeof CardSaveBar;
} & TNewForm & TNewForm_1 & TNewForm_2 & TNewForm_3 & TNewForm_4 & TNewForm_5, TRenderProps_6>) => import("react").FunctionComponent<import("react").PropsWithChildren<NoInfer<[unknown] extends [TRenderProps_6] ? any : TRenderProps_6> & {
form: import("@tanstack/react-form").AppFieldExtendedReactFormApi<[unknown] extends [TFormData] ? any : TFormData, [import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined] extends [TOnMount_1_5] ? [TOnMount_1_5] extends [TOnMount_1_5 & (import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined)] ? any : TOnMount_1_5 : TOnMount_1_5, [import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined] extends [TOnChange_1_5] ? [TOnChange_1_5] extends [TOnChange_1_5 & (import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined)] ? any : TOnChange_1_5 : TOnChange_1_5, [import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined] extends [TOnChangeAsync_1_5] ? [TOnChangeAsync_1_5] extends [TOnChangeAsync_1_5 & (import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined)] ? any : TOnChangeAsync_1_5 : TOnChangeAsync_1_5, [import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined] extends [TOnBlur_1_5] ? [TOnBlur_1_5] extends [TOnBlur_1_5 & (import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined)] ? any : TOnBlur_1_5 : TOnBlur_1_5, [import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined] extends [TOnBlurAsync_1_5] ? [TOnBlurAsync_1_5] extends [TOnBlurAsync_1_5 & (import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined)] ? any : TOnBlurAsync_1_5 : TOnBlurAsync_1_5, [import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined] extends [TOnSubmit_1_5] ? [TOnSubmit_1_5] extends [TOnSubmit_1_5 & (import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined)] ? any : TOnSubmit_1_5 : TOnSubmit_1_5, [import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined] extends [TOnSubmitAsync_1_5] ? [TOnSubmitAsync_1_5] extends [TOnSubmitAsync_1_5 & (import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined)] ? any : TOnSubmitAsync_1_5 : TOnSubmitAsync_1_5, [import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined] extends [TOnDynamic_1_5] ? [TOnDynamic_1_5] extends [TOnDynamic_1_5 & (import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined)] ? any : TOnDynamic_1_5 : TOnDynamic_1_5, [import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined] extends [TOnDynamicAsync_1_5] ? [TOnDynamicAsync_1_5] extends [TOnDynamicAsync_1_5 & (import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined)] ? any : TOnDynamicAsync_1_5 : TOnDynamicAsync_1_5, [import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined] extends [TOnServer_1_5] ? [TOnServer_1_5] extends [TOnServer_1_5 & (import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined)] ? any : TOnServer_1_5 : TOnServer_1_5, [unknown] extends [TSubmitMeta_1_5] ? any : TSubmitMeta_1_5, [unknown] extends [{} & TNewField & TNewField_1 & TNewField_2 & TNewField_3 & TNewField_4 & TNewField_5] ? any : {} & TNewField & TNewField_1 & TNewField_2 & TNewField_3 & TNewField_4 & TNewField_5, [unknown] extends [{
readonly SubmitButton: typeof SubmitButton;
readonly CardSaveBar: typeof CardSaveBar;
} & TNewForm & TNewForm_1 & TNewForm_2 & TNewForm_3 & TNewForm_4 & TNewForm_5] ? any : {
readonly SubmitButton: typeof SubmitButton;
readonly CardSaveBar: typeof CardSaveBar;
} & TNewForm & TNewForm_1 & TNewForm_2 & TNewForm_3 & TNewForm_4 & TNewForm_5>;
}>>;
withFieldGroup: <TFieldGroupData, TSubmitMeta_2_5, TRenderProps_1_5 extends object = {}>({ render, props, defaultValues }: import("@tanstack/react-form").WithFieldGroupProps<TFieldGroupData, {} & TNewField & TNewField_1 & TNewField_2 & TNewField_3 & TNewField_4 & TNewField_5, {
readonly SubmitButton: typeof SubmitButton;
readonly CardSaveBar: typeof CardSaveBar;
} & TNewForm & TNewForm_1 & TNewForm_2 & TNewForm_3 & TNewForm_4 & TNewForm_5, TSubmitMeta_2_5, TRenderProps_1_5>) => <TFormData, TFields_5 extends import("@tanstack/react-form").DeepKeysOfType<TFormData, TFieldGroupData | null | undefined> | import("@tanstack/react-form").FieldsMap<TFormData, TFieldGroupData>, TOnMount_2_5 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnChange_2_5 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnChangeAsync_2_5 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnBlur_2_5 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnBlurAsync_2_5 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnSubmit_2_5 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnSubmitAsync_2_5 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnDynamic_2_5 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnDynamicAsync_2_5 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnServer_2_5 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TFormSubmitMeta_5>(params: import("react").PropsWithChildren<NoInfer<TRenderProps_1_5> & {
form: import("@tanstack/react-form").AppFieldExtendedReactFormApi<TFormData, TOnMount_2_5, TOnChange_2_5, TOnChangeAsync_2_5, TOnBlur_2_5, TOnBlurAsync_2_5, TOnSubmit_2_5, TOnSubmitAsync_2_5, TOnDynamic_2_5, TOnDynamicAsync_2_5, TOnServer_2_5, unknown extends TSubmitMeta_2_5 ? TFormSubmitMeta_5 : TSubmitMeta_2_5, {} & TNewField & TNewField_1 & TNewField_2 & TNewField_3 & TNewField_4 & TNewField_5, {
readonly SubmitButton: typeof SubmitButton;
readonly CardSaveBar: typeof CardSaveBar;
} & TNewForm & TNewForm_1 & TNewForm_2 & TNewForm_3 & TNewForm_4 & TNewForm_5> | import("@tanstack/react-form").AppFieldExtendedReactFieldGroupApi<unknown, TFormData, string | import("@tanstack/react-form").FieldsMap<unknown, TFormData>, any, any, any, any, any, any, any, any, any, any, unknown extends TSubmitMeta_2_5 ? TFormSubmitMeta_5 : TSubmitMeta_2_5, {} & TNewField & TNewField_1 & TNewField_2 & TNewField_3 & TNewField_4 & TNewField_5, {
readonly SubmitButton: typeof SubmitButton;
readonly CardSaveBar: typeof CardSaveBar;
} & TNewForm & TNewForm_1 & TNewForm_2 & TNewForm_3 & TNewForm_4 & TNewForm_5>;
fields: TFields_5;
}>) => ReturnType<import("react").FunctionComponent>;
useTypedAppFormContext: <TFormData, TOnMount_3_5 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnChange_3_5 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnChangeAsync_3_5 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnBlur_3_5 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnBlurAsync_3_5 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnSubmit_3_5 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnSubmitAsync_3_5 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnDynamic_3_5 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnDynamicAsync_3_5 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnServer_3_5 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TSubmitMeta_3_5>(_props: import("@tanstack/react-form").FormOptions<TFormData, TOnMount_3_5, TOnChange_3_5, TOnChangeAsync_3_5, TOnBlur_3_5, TOnBlurAsync_3_5, TOnSubmit_3_5, TOnSubmitAsync_3_5, TOnDynamic_3_5, TOnDynamicAsync_3_5, TOnServer_3_5, TSubmitMeta_3_5>) => import("@tanstack/react-form").AppFieldExtendedReactFormApi<TFormData, TOnMount_3_5, TOnChange_3_5, TOnChangeAsync_3_5, TOnBlur_3_5, TOnBlurAsync_3_5, TOnSubmit_3_5, TOnSubmitAsync_3_5, TOnDynamic_3_5, TOnDynamicAsync_3_5, TOnServer_3_5, TSubmitMeta_3_5, {} & TNewField & TNewField_1 & TNewField_2 & TNewField_3 & TNewField_4 & TNewField_5, {
readonly SubmitButton: typeof SubmitButton;
readonly CardSaveBar: typeof CardSaveBar;
} & TNewForm & TNewForm_1 & TNewForm_2 & TNewForm_3 & TNewForm_4 & TNewForm_5>;
extendForm: <const TNewField_6 extends Record<string, import("react").ComponentType<any>> & ({} & TNewField & TNewField_1 & TNewField_2 & TNewField_3 & TNewField_4 & TNewField_5 extends (infer T_10) ? { [K_10 in keyof T_10]?: "Error: field component names must be unique — this key already exists in the base form" | undefined; } : never), const TNewForm_6 extends Record<string, import("react").ComponentType<any>> & ({
readonly SubmitButton: typeof SubmitButton;
readonly CardSaveBar: typeof CardSaveBar;
} & TNewForm & TNewForm_1 & TNewForm_2 & TNewForm_3 & TNewForm_4 & TNewForm_5 extends (infer T_11) ? { [K_11 in keyof T_11]?: "Error: form component names must be unique — this key already exists in the base form" | undefined; } : never)>(extension: {
fieldComponents?: TNewField_6 | undefined;
formComponents?: TNewForm_6 | undefined;
}) => {
useAppForm: <TFormData, TOnMount_9 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnChange_9 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnChangeAsync_9 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnBlur_9 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnBlurAsync_9 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnSubmit_9 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnSubmitAsync_9 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnDynamic_9 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnDynamicAsync_9 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnServer_9 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TSubmitMeta_9>(props: import("@tanstack/react-form").FormOptions<TFormData, TOnMount_9, TOnChange_9, TOnChangeAsync_9, TOnBlur_9, TOnBlurAsync_9, TOnSubmit_9, TOnSubmitAsync_9, TOnDynamic_9, TOnDynamicAsync_9, TOnServer_9, TSubmitMeta_9>) => import("@tanstack/react-form").AppFieldExtendedReactFormApi<TFormData, TOnMount_9, TOnChange_9, TOnChangeAsync_9, TOnBlur_9, TOnBlurAsync_9, TOnSubmit_9, TOnSubmitAsync_9, TOnDynamic_9, TOnDynamicAsync_9, TOnServer_9, TSubmitMeta_9, {} & TNewField & TNewField_1 & TNewField_2 & TNewField_3 & TNewField_4 & TNewField_5 & TNewField_6, {
readonly SubmitButton: typeof SubmitButton;
readonly CardSaveBar: typeof CardSaveBar;
} & TNewForm & TNewForm_1 & TNewForm_2 & TNewForm_3 & TNewForm_4 & TNewForm_5 & TNewForm_6>;
withForm: <TFormData, TOnMount_1_6 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnChange_1_6 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnChangeAsync_1_6 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnBlur_1_6 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnBlurAsync_1_6 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnSubmit_1_6 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnSubmitAsync_1_6 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnDynamic_1_6 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnDynamicAsync_1_6 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnServer_1_6 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TSubmitMeta_1_6, TRenderProps_7 extends object = {}>({ render, props }: import("@tanstack/react-form").WithFormProps<TFormData, TOnMount_1_6, TOnChange_1_6, TOnChangeAsync_1_6, TOnBlur_1_6, TOnBlurAsync_1_6, TOnSubmit_1_6, TOnSubmitAsync_1_6, TOnDynamic_1_6, TOnDynamicAsync_1_6, TOnServer_1_6, TSubmitMeta_1_6, {} & TNewField & TNewField_1 & TNewField_2 & TNewField_3 & TNewField_4 & TNewField_5 & TNewField_6, {
readonly SubmitButton: typeof SubmitButton;
readonly CardSaveBar: typeof CardSaveBar;
} & TNewForm & TNewForm_1 & TNewForm_2 & TNewForm_3 & TNewForm_4 & TNewForm_5 & TNewForm_6, TRenderProps_7>) => import("react").FunctionComponent<import("react").PropsWithChildren<NoInfer<[unknown] extends [TRenderProps_7] ? any : TRenderProps_7> & {
form: import("@tanstack/react-form").AppFieldExtendedReactFormApi<[unknown] extends [TFormData] ? any : TFormData, [import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined] extends [TOnMount_1_6] ? [TOnMount_1_6] extends [TOnMount_1_6 & (import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined)] ? any : TOnMount_1_6 : TOnMount_1_6, [import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined] extends [TOnChange_1_6] ? [TOnChange_1_6] extends [TOnChange_1_6 & (import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined)] ? any : TOnChange_1_6 : TOnChange_1_6, [import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined] extends [TOnChangeAsync_1_6] ? [TOnChangeAsync_1_6] extends [TOnChangeAsync_1_6 & (import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined)] ? any : TOnChangeAsync_1_6 : TOnChangeAsync_1_6, [import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined] extends [TOnBlur_1_6] ? [TOnBlur_1_6] extends [TOnBlur_1_6 & (import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined)] ? any : TOnBlur_1_6 : TOnBlur_1_6, [import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined] extends [TOnBlurAsync_1_6] ? [TOnBlurAsync_1_6] extends [TOnBlurAsync_1_6 & (import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined)] ? any : TOnBlurAsync_1_6 : TOnBlurAsync_1_6, [import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined] extends [TOnSubmit_1_6] ? [TOnSubmit_1_6] extends [TOnSubmit_1_6 & (import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined)] ? any : TOnSubmit_1_6 : TOnSubmit_1_6, [import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined] extends [TOnSubmitAsync_1_6] ? [TOnSubmitAsync_1_6] extends [TOnSubmitAsync_1_6 & (import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined)] ? any : TOnSubmitAsync_1_6 : TOnSubmitAsync_1_6, [import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined] extends [TOnDynamic_1_6] ? [TOnDynamic_1_6] extends [TOnDynamic_1_6 & (import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined)] ? any : TOnDynamic_1_6 : TOnDynamic_1_6, [import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined] extends [TOnDynamicAsync_1_6] ? [TOnDynamicAsync_1_6] extends [TOnDynamicAsync_1_6 & (import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined)] ? any : TOnDynamicAsync_1_6 : TOnDynamicAsync_1_6, [import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined] extends [TOnServer_1_6] ? [TOnServer_1_6] extends [TOnServer_1_6 & (import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined)] ? any : TOnServer_1_6 : TOnServer_1_6, [unknown] extends [TSubmitMeta_1_6] ? any : TSubmitMeta_1_6, [unknown] extends [{} & TNewField & TNewField_1 & TNewField_2 & TNewField_3 & TNewField_4 & TNewField_5 & TNewField_6] ? any : {} & TNewField & TNewField_1 & TNewField_2 & TNewField_3 & TNewField_4 & TNewField_5 & TNewField_6, [unknown] extends [{
readonly SubmitButton: typeof SubmitButton;
readonly CardSaveBar: typeof CardSaveBar;
} & TNewForm & TNewForm_1 & TNewForm_2 & TNewForm_3 & TNewForm_4 & TNewForm_5 & TNewForm_6] ? any : {
readonly SubmitButton: typeof SubmitButton;
readonly CardSaveBar: typeof CardSaveBar;
} & TNewForm & TNewForm_1 & TNewForm_2 & TNewForm_3 & TNewForm_4 & TNewForm_5 & TNewForm_6>;
}>>;
withFieldGroup: <TFieldGroupData, TSubmitMeta_2_6, TRenderProps_1_6 extends object = {}>({ render, props, defaultValues }: import("@tanstack/react-form").WithFieldGroupProps<TFieldGroupData, {} & TNewField & TNewField_1 & TNewField_2 & TNewField_3 & TNewField_4 & TNewField_5 & TNewField_6, {
readonly SubmitButton: typeof SubmitButton;
readonly CardSaveBar: typeof CardSaveBar;
} & TNewForm & TNewForm_1 & TNewForm_2 & TNewForm_3 & TNewForm_4 & TNewForm_5 & TNewForm_6, TSubmitMeta_2_6, TRenderProps_1_6>) => <TFormData, TFields_6 extends import("@tanstack/react-form").DeepKeysOfType<TFormData, TFieldGroupData | null | undefined> | import("@tanstack/react-form").FieldsMap<TFormData, TFieldGroupData>, TOnMount_2_6 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnChange_2_6 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnChangeAsync_2_6 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnBlur_2_6 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnBlurAsync_2_6 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnSubmit_2_6 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnSubmitAsync_2_6 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnDynamic_2_6 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnDynamicAsync_2_6 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnServer_2_6 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TFormSubmitMeta_6>(params: import("react").PropsWithChildren<NoInfer<TRenderProps_1_6> & {
form: import("@tanstack/react-form").AppFieldExtendedReactFormApi<TFormData, TOnMount_2_6, TOnChange_2_6, TOnChangeAsync_2_6, TOnBlur_2_6, TOnBlurAsync_2_6, TOnSubmit_2_6, TOnSubmitAsync_2_6, TOnDynamic_2_6, TOnDynamicAsync_2_6, TOnServer_2_6, unknown extends TSubmitMeta_2_6 ? TFormSubmitMeta_6 : TSubmitMeta_2_6, {} & TNewField & TNewField_1 & TNewField_2 & TNewField_3 & TNewField_4 & TNewField_5 & TNewField_6, {
readonly SubmitButton: typeof SubmitButton;
readonly CardSaveBar: typeof CardSaveBar;
} & TNewForm & TNewForm_1 & TNewForm_2 & TNewForm_3 & TNewForm_4 & TNewForm_5 & TNewForm_6> | import("@tanstack/react-form").AppFieldExtendedReactFieldGroupApi<unknown, TFormData, string | import("@tanstack/react-form").FieldsMap<unknown, TFormData>, any, any, any, any, any, any, any, any, any, any, unknown extends TSubmitMeta_2_6 ? TFormSubmitMeta_6 : TSubmitMeta_2_6, {} & TNewField & TNewField_1 & TNewField_2 & TNewField_3 & TNewField_4 & TNewField_5 & TNewField_6, {
readonly SubmitButton: typeof SubmitButton;
readonly CardSaveBar: typeof CardSaveBar;
} & TNewForm & TNewForm_1 & TNewForm_2 & TNewForm_3 & TNewForm_4 & TNewForm_5 & TNewForm_6>;
fields: TFields_6;
}>) => ReturnType<import("react").FunctionComponent>;
useTypedAppFormContext: <TFormData, TOnMount_3_6 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnChange_3_6 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnChangeAsync_3_6 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnBlur_3_6 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnBlurAsync_3_6 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnSubmit_3_6 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnSubmitAsync_3_6 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnDynamic_3_6 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnDynamicAsync_3_6 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnServer_3_6 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TSubmitMeta_3_6>(_props: import("@tanstack/react-form").FormOptions<TFormData, TOnMount_3_6, TOnChange_3_6, TOnChangeAsync_3_6, TOnBlur_3_6, TOnBlurAsync_3_6, TOnSubmit_3_6, TOnSubmitAsync_3_6, TOnDynamic_3_6, TOnDynamicAsync_3_6, TOnServer_3_6, TSubmitMeta_3_6>) => import("@tanstack/react-form").AppFieldExtendedReactFormApi<TFormData, TOnMount_3_6, TOnChange_3_6, TOnChangeAsync_3_6, TOnBlur_3_6, TOnBlurAsync_3_6, TOnSubmit_3_6, TOnSubmitAsync_3_6, TOnDynamic_3_6, TOnDynamicAsync_3_6, TOnServer_3_6, TSubmitMeta_3_6, {} & TNewField & TNewField_1 & TNewField_2 & TNewField_3 & TNewField_4 & TNewField_5 & TNewField_6, {
readonly SubmitButton: typeof SubmitButton;
readonly CardSaveBar: typeof CardSaveBar;
} & TNewForm & TNewForm_1 & TNewForm_2 & TNewForm_3 & TNewForm_4 & TNewForm_5 & TNewForm_6>;
extendForm: <const TNewField_7 extends Record<string, import("react").ComponentType<any>> & ({} & TNewField & TNewField_1 & TNewField_2 & TNewField_3 & TNewField_4 & TNewField_5 & TNewField_6 extends (infer T_12) ? { [K_12 in keyof T_12]?: "Error: field component names must be unique — this key already exists in the base form" | undefined; } : never), const TNewForm_7 extends Record<string, import("react").ComponentType<any>> & ({
readonly SubmitButton: typeof SubmitButton;
readonly CardSaveBar: typeof CardSaveBar;
} & TNewForm & TNewForm_1 & TNewForm_2 & TNewForm_3 & TNewForm_4 & TNewForm_5 & TNewForm_6 extends (infer T_13) ? { [K_13 in keyof T_13]?: "Error: form component names must be unique — this key already exists in the base form" | undefined; } : never)>(extension: {
fieldComponents?: TNewField_7 | undefined;
formComponents?: TNewForm_7 | undefined;
}) => {
useAppForm: <TFormData, TOnMount_10 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnChange_10 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnChangeAsync_10 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnBlur_10 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnBlurAsync_10 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnSubmit_10 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnSubmitAsync_10 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnDynamic_10 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnDynamicAsync_10 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnServer_10 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TSubmitMeta_10>(props: import("@tanstack/react-form").FormOptions<TFormData, TOnMount_10, TOnChange_10, TOnChangeAsync_10, TOnBlur_10, TOnBlurAsync_10, TOnSubmit_10, TOnSubmitAsync_10, TOnDynamic_10, TOnDynamicAsync_10, TOnServer_10, TSubmitMeta_10>) => import("@tanstack/react-form").AppFieldExtendedReactFormApi<TFormData, TOnMount_10, TOnChange_10, TOnChangeAsync_10, TOnBlur_10, TOnBlurAsync_10, TOnSubmit_10, TOnSubmitAsync_10, TOnDynamic_10, TOnDynamicAsync_10, TOnServer_10, TSubmitMeta_10, {} & TNewField & TNewField_1 & TNewField_2 & TNewField_3 & TNewField_4 & TNewField_5 & TNewField_6 & TNewField_7, {
readonly SubmitButton: typeof SubmitButton;
readonly CardSaveBar: typeof CardSaveBar;
} & TNewForm & TNewForm_1 & TNewForm_2 & TNewForm_3 & TNewForm_4 & TNewForm_5 & TNewForm_6 & TNewForm_7>;
withForm: <TFormData, TOnMount_1_7 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnChange_1_7 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnChangeAsync_1_7 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnBlur_1_7 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnBlurAsync_1_7 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnSubmit_1_7 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnSubmitAsync_1_7 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnDynamic_1_7 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnDynamicAsync_1_7 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnServer_1_7 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TSubmitMeta_1_7, TRenderProps_8 extends object = {}>({ render, props }: import("@tanstack/react-form").WithFormProps<TFormData, TOnMount_1_7, TOnChange_1_7, TOnChangeAsync_1_7, TOnBlur_1_7, TOnBlurAsync_1_7, TOnSubmit_1_7, TOnSubmitAsync_1_7, TOnDynamic_1_7, TOnDynamicAsync_1_7, TOnServer_1_7, TSubmitMeta_1_7, {} & TNewField & TNewField_1 & TNewField_2 & TNewField_3 & TNewField_4 & TNewField_5 & TNewField_6 & TNewField_7, {
readonly SubmitButton: typeof SubmitButton;
readonly CardSaveBar: typeof CardSaveBar;
} & TNewForm & TNewForm_1 & TNewForm_2 & TNewForm_3 & TNewForm_4 & TNewForm_5 & TNewForm_6 & TNewForm_7, TRenderProps_8>) => import("react").FunctionComponent<import("react").PropsWithChildren<NoInfer<[unknown] extends [TRenderProps_8] ? any : TRenderProps_8> & {
form: import("@tanstack/react-form").AppFieldExtendedReactFormApi<[unknown] extends [TFormData] ? any : TFormData, [import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined] extends [TOnMount_1_7] ? [TOnMount_1_7] extends [TOnMount_1_7 & (import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined)] ? any : TOnMount_1_7 : TOnMount_1_7, [import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined] extends [TOnChange_1_7] ? [TOnChange_1_7] extends [TOnChange_1_7 & (import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined)] ? any : TOnChange_1_7 : TOnChange_1_7, [import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined] extends [TOnChangeAsync_1_7] ? [TOnChangeAsync_1_7] extends [TOnChangeAsync_1_7 & (import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined)] ? any : TOnChangeAsync_1_7 : TOnChangeAsync_1_7, [import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined] extends [TOnBlur_1_7] ? [TOnBlur_1_7] extends [TOnBlur_1_7 & (import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined)] ? any : TOnBlur_1_7 : TOnBlur_1_7, [import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined] extends [TOnBlurAsync_1_7] ? [TOnBlurAsync_1_7] extends [TOnBlurAsync_1_7 & (import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined)] ? any : TOnBlurAsync_1_7 : TOnBlurAsync_1_7, [import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined] extends [TOnSubmit_1_7] ? [TOnSubmit_1_7] extends [TOnSubmit_1_7 & (import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined)] ? any : TOnSubmit_1_7 : TOnSubmit_1_7, [import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined] extends [TOnSubmitAsync_1_7] ? [TOnSubmitAsync_1_7] extends [TOnSubmitAsync_1_7 & (import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined)] ? any : TOnSubmitAsync_1_7 : TOnSubmitAsync_1_7, [import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined] extends [TOnDynamic_1_7] ? [TOnDynamic_1_7] extends [TOnDynamic_1_7 & (import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined)] ? any : TOnDynamic_1_7 : TOnDynamic_1_7, [import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined] extends [TOnDynamicAsync_1_7] ? [TOnDynamicAsync_1_7] extends [TOnDynamicAsync_1_7 & (import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined)] ? any : TOnDynamicAsync_1_7 : TOnDynamicAsync_1_7, [import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined] extends [TOnServer_1_7] ? [TOnServer_1_7] extends [TOnServer_1_7 & (import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined)] ? any : TOnServer_1_7 : TOnServer_1_7, [unknown] extends [TSubmitMeta_1_7] ? any : TSubmitMeta_1_7, [unknown] extends [{} & TNewField & TNewField_1 & TNewField_2 & TNewField_3 & TNewField_4 & TNewField_5 & TNewField_6 & TNewField_7] ? any : {} & TNewField & TNewField_1 & TNewField_2 & TNewField_3 & TNewField_4 & TNewField_5 & TNewField_6 & TNewField_7, [unknown] extends [{
readonly SubmitButton: typeof SubmitButton;
readonly CardSaveBar: typeof CardSaveBar;
} & TNewForm & TNewForm_1 & TNewForm_2 & TNewForm_3 & TNewForm_4 & TNewForm_5 & TNewForm_6 & TNewForm_7] ? any : {
readonly SubmitButton: typeof SubmitButton;
readonly CardSaveBar: typeof CardSaveBar;
} & TNewForm & TNewForm_1 & TNewForm_2 & TNewForm_3 & TNewForm_4 & TNewForm_5 & TNewForm_6 & TNewForm_7>;
}>>;
withFieldGroup: <TFieldGroupData, TSubmitMeta_2_7, TRenderProps_1_7 extends object = {}>({ render, props, defaultValues }: import("@tanstack/react-form").WithFieldGroupProps<TFieldGroupData, {} & TNewField & TNewField_1 & TNewField_2 & TNewField_3 & TNewField_4 & TNewField_5 & TNewField_6 & TNewField_7, {
readonly SubmitButton: typeof SubmitButton;
readonly CardSaveBar: typeof CardSaveBar;
} & TNewForm & TNewForm_1 & TNewForm_2 & TNewForm_3 & TNewForm_4 & TNewForm_5 & TNewForm_6 & TNewForm_7, TSubmitMeta_2_7, TRenderProps_1_7>) => <TFormData, TFields_7 extends import("@tanstack/react-form").DeepKeysOfType<TFormData, TFieldGroupData | null | undefined> | import("@tanstack/react-form").FieldsMap<TFormData, TFieldGroupData>, TOnMount_2_7 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnChange_2_7 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnChangeAsync_2_7 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnBlur_2_7 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnBlurAsync_2_7 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnSubmit_2_7 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnSubmitAsync_2_7 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnDynamic_2_7 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnDynamicAsync_2_7 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnServer_2_7 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TFormSubmitMeta_7>(params: import("react").PropsWithChildren<NoInfer<TRenderProps_1_7> & {
form: import("@tanstack/react-form").AppFieldExtendedReactFormApi<TFormData, TOnMount_2_7, TOnChange_2_7, TOnChangeAsync_2_7, TOnBlur_2_7, TOnBlurAsync_2_7, TOnSubmit_2_7, TOnSubmitAsync_2_7, TOnDynamic_2_7, TOnDynamicAsync_2_7, TOnServer_2_7, unknown extends TSubmitMeta_2_7 ? TFormSubmitMeta_7 : TSubmitMeta_2_7, {} & TNewField & TNewField_1 & TNewField_2 & TNewField_3 & TNewField_4 & TNewField_5 & TNewField_6 & TNewField_7, {
readonly SubmitButton: typeof SubmitButton;
readonly CardSaveBar: typeof CardSaveBar;
} & TNewForm & TNewForm_1 & TNewForm_2 & TNewForm_3 & TNewForm_4 & TNewForm_5 & TNewForm_6 & TNewForm_7> | import("@tanstack/react-form").AppFieldExtendedReactFieldGroupApi<unknown, TFormData, string | import("@tanstack/react-form").FieldsMap<unknown, TFormData>, any, any, any, any, any, any, any, any, any, any, unknown extends TSubmitMeta_2_7 ? TFormSubmitMeta_7 : TSubmitMeta_2_7, {} & TNewField & TNewField_1 & TNewField_2 & TNewField_3 & TNewField_4 & TNewField_5 & TNewField_6 & TNewField_7, {
readonly SubmitButton: typeof SubmitButton;
readonly CardSaveBar: typeof CardSaveBar;
} & TNewForm & TNewForm_1 & TNewForm_2 & TNewForm_3 & TNewForm_4 & TNewForm_5 & TNewForm_6 & TNewForm_7>;
fields: TFields_7;
}>) => ReturnType<import("react").FunctionComponent>;
useTypedAppFormContext: <TFormData, TOnMount_3_7 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnChange_3_7 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnChangeAsync_3_7 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnBlur_3_7 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnBlurAsync_3_7 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnSubmit_3_7 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnSubmitAsync_3_7 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnDynamic_3_7 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnDynamicAsync_3_7 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnServer_3_7 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TSubmitMeta_3_7>(_props: import("@tanstack/react-form").FormOptions<TFormData, TOnMount_3_7, TOnChange_3_7, TOnChangeAsync_3_7, TOnBlur_3_7, TOnBlurAsync_3_7, TOnSubmit_3_7, TOnSubmitAsync_3_7, TOnDynamic_3_7, TOnDynamicAsync_3_7, TOnServer_3_7, TSubmitMeta_3_7>) => import("@tanstack/react-form").AppFieldExtendedReactFormApi<TFormData, TOnMount_3_7, TOnChange_3_7, TOnChangeAsync_3_7, TOnBlur_3_7, TOnBlurAsync_3_7, TOnSubmit_3_7, TOnSubmitAsync_3_7, TOnDynamic_3_7, TOnDynamicAsync_3_7, TOnServer_3_7, TSubmitMeta_3_7, {} & TNewField & TNewField_1 & TNewField_2 & TNewField_3 & TNewField_4 & TNewField_5 & TNewField_6 & TNewField_7, {
readonly SubmitButton: typeof SubmitButton;
readonly CardSaveBar: typeof CardSaveBar;
} & TNewForm & TNewForm_1 & TNewForm_2 & TNewForm_3 & TNewForm_4 & TNewForm_5 & TNewForm_6 & TNewForm_7>;
extendForm: <const TNewField_8 extends Record<string, import("react").ComponentType<any>> & ({} & TNewField & TNewField_1 & TNewField_2 & TNewField_3 & TNewField_4 & TNewField_5 & TNewField_6 & TNewField_7 extends (infer T_14) ? { [K_14 in keyof T_14]?: "Error: field component names must be unique — this key already exists in the base form" | undefined; } : never), const TNewForm_8 extends Record<string, import("react").ComponentType<any>> & ({
readonly SubmitButton: typeof SubmitButton;
readonly CardSaveBar: typeof CardSaveBar;
} & TNewForm & TNewForm_1 & TNewForm_2 & TNewForm_3 & TNewForm_4 & TNewForm_5 & TNewForm_6 & TNewForm_7 extends (infer T_15) ? { [K_15 in keyof T_15]?: "Error: form component names must be unique — this key already exists in the base form" | undefined; } : never)>(extension: {
fieldComponents?: TNewField_8 | undefined;
formComponents?: TNewForm_8 | undefined;
}) => {
useAppForm: <TFormData, TOnMount_11 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnChange_11 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnChangeAsync_11 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnBlur_11 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnBlurAsync_11 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnSubmit_11 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnSubmitAsync_11 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnDynamic_11 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnDynamicAsync_11 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnServer_11 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TSubmitMeta_11>(props: import("@tanstack/react-form").FormOptions<TFormData, TOnMount_11, TOnChange_11, TOnChangeAsync_11, TOnBlur_11, TOnBlurAsync_11, TOnSubmit_11, TOnSubmitAsync_11, TOnDynamic_11, TOnDynamicAsync_11, TOnServer_11, TSubmitMeta_11>) => import("@tanstack/react-form").AppFieldExtendedReactFormApi<TFormData, TOnMount_11, TOnChange_11, TOnChangeAsync_11, TOnBlur_11, TOnBlurAsync_11, TOnSubmit_11, TOnSubmitAsync_11, TOnDynamic_11, TOnDynamicAsync_11, TOnServer_11, TSubmitMeta_11, {} & TNewField & TNewField_1 & TNewField_2 & TNewField_3 & TNewField_4 & TNewField_5 & TNewField_6 & TNewField_7 & TNewField_8, {
readonly SubmitButton: typeof SubmitButton;
readonly CardSaveBar: typeof CardSaveBar;
} & TNewForm & TNewForm_1 & TNewForm_2 & TNewForm_3 & TNewForm_4 & TNewForm_5 & TNewForm_6 & TNewForm_7 & TNewForm_8>;
withForm: <TFormData, TOnMount_1_8 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnChange_1_8 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnChangeAsync_1_8 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnBlur_1_8 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnBlurAsync_1_8 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnSubmit_1_8 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnSubmitAsync_1_8 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnDynamic_1_8 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnDynamicAsync_1_8 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnServer_1_8 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TSubmitMeta_1_8, TRenderProps_9 extends object = {}>({ render, props }: import("@tanstack/react-form").WithFormProps<TFormData, TOnMount_1_8, TOnChange_1_8, TOnChangeAsync_1_8, TOnBlur_1_8, TOnBlurAsync_1_8, TOnSubmit_1_8, TOnSubmitAsync_1_8, TOnDynamic_1_8, TOnDynamicAsync_1_8, TOnServer_1_8, TSubmitMeta_1_8, {} & TNewField & TNewField_1 & TNewField_2 & TNewField_3 & TNewField_4 & TNewField_5 & TNewField_6 & TNewField_7 & TNewField_8, {
readonly SubmitButton: typeof SubmitButton;
readonly CardSaveBar: typeof CardSaveBar;
} & TNewForm & TNewForm_1 & TNewForm_2 & TNewForm_3 & TNewForm_4 & TNewForm_5 & TNewForm_6 & TNewForm_7 & TNewForm_8, TRenderProps_9>) => import("react").FunctionComponent<import("react").PropsWithChildren<NoInfer<[unknown] extends [TRenderProps_9] ? any : TRenderProps_9> & {
form: import("@tanstack/react-form").AppFieldExtendedReactFormApi<[unknown] extends [TFormData] ? any : TFormData, [import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined] extends [TOnMount_1_8] ? [TOnMount_1_8] extends [TOnMount_1_8 & (import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined)] ? any : TOnMount_1_8 : TOnMount_1_8, [import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined] extends [TOnChange_1_8] ? [TOnChange_1_8] extends [TOnChange_1_8 & (import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined)] ? any : TOnChange_1_8 : TOnChange_1_8, [import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined] extends [TOnChangeAsync_1_8] ? [TOnChangeAsync_1_8] extends [TOnChangeAsync_1_8 & (import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined)] ? any : TOnChangeAsync_1_8 : TOnChangeAsync_1_8, [import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined] extends [TOnBlur_1_8] ? [TOnBlur_1_8] extends [TOnBlur_1_8 & (import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined)] ? any : TOnBlur_1_8 : TOnBlur_1_8, [import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined] extends [TOnBlurAsync_1_8] ? [TOnBlurAsync_1_8] extends [TOnBlurAsync_1_8 & (import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined)] ? any : TOnBlurAsync_1_8 : TOnBlurAsync_1_8, [import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined] extends [TOnSubmit_1_8] ? [TOnSubmit_1_8] extends [TOnSubmit_1_8 & (import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined)] ? any : TOnSubmit_1_8 : TOnSubmit_1_8, [import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined] extends [TOnSubmitAsync_1_8] ? [TOnSubmitAsync_1_8] extends [TOnSubmitAsync_1_8 & (import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined)] ? any : TOnSubmitAsync_1_8 : TOnSubmitAsync_1_8, [import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined] extends [TOnDynamic_1_8] ? [TOnDynamic_1_8] extends [TOnDynamic_1_8 & (import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined)] ? any : TOnDynamic_1_8 : TOnDynamic_1_8, [import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined] extends [TOnDynamicAsync_1_8] ? [TOnDynamicAsync_1_8] extends [TOnDynamicAsync_1_8 & (import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined)] ? any : TOnDynamicAsync_1_8 : TOnDynamicAsync_1_8, [import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined] extends [TOnServer_1_8] ? [TOnServer_1_8] extends [TOnServer_1_8 & (import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined)] ? any : TOnServer_1_8 : TOnServer_1_8, [unknown] extends [TSubmitMeta_1_8] ? any : TSubmitMeta_1_8, [unknown] extends [{} & TNewField & TNewField_1 & TNewField_2 & TNewField_3 & TNewField_4 & TNewField_5 & TNewField_6 & TNewField_7 & TNewField_8] ? any : {} & TNewField & TNewField_1 & TNewField_2 & TNewField_3 & TNewField_4 & TNewField_5 & TNewField_6 & TNewField_7 & TNewField_8, [unknown] extends [{
readonly SubmitButton: typeof SubmitButton;
readonly CardSaveBar: typeof CardSaveBar;
} & TNewForm & TNewForm_1 & TNewForm_2 & TNewForm_3 & TNewForm_4 & TNewForm_5 & TNewForm_6 & TNewForm_7 & TNewForm_8] ? any : {
readonly SubmitButton: typeof SubmitButton;
readonly CardSaveBar: typeof CardSaveBar;
} & TNewForm & TNewForm_1 & TNewForm_2 & TNewForm_3 & TNewForm_4 & TNewForm_5 & TNewForm_6 & TNewForm_7 & TNewForm_8>;
}>>;
withFieldGroup: <TFieldGroupData, TSubmitMeta_2_8, TRenderProps_1_8 extends object = {}>({ render, props, defaultValues }: import("@tanstack/react-form").WithFieldGroupProps<TFieldGroupData, {} & TNewField & TNewField_1 & TNewField_2 & TNewField_3 & TNewField_4 & TNewField_5 & TNewField_6 & TNewField_7 & TNewField_8, {
readonly SubmitButton: typeof SubmitButton;
readonly CardSaveBar: typeof CardSaveBar;
} & TNewForm & TNewForm_1 & TNewForm_2 & TNewForm_3 & TNewForm_4 & TNewForm_5 & TNewForm_6 & TNewForm_7 & TNewForm_8, TSubmitMeta_2_8, TRenderProps_1_8>) => <TFormData, TFields_8 extends import("@tanstack/react-form").DeepKeysOfType<TFormData, TFieldGroupData | null | undefined> | import("@tanstack/react-form").FieldsMap<TFormData, TFieldGroupData>, TOnMount_2_8 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnChange_2_8 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnChangeAsync_2_8 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnBlur_2_8 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnBlurAsync_2_8 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnSubmit_2_8 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnSubmitAsync_2_8 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnDynamic_2_8 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnDynamicAsync_2_8 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnServer_2_8 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TFormSubmitMeta_8>(params: import("react").PropsWithChildren<NoInfer<TRenderProps_1_8> & {
form: import("@tanstack/react-form").AppFieldExtendedReactFormApi<TFormData, TOnMount_2_8, TOnChange_2_8, TOnChangeAsync_2_8, TOnBlur_2_8, TOnBlurAsync_2_8, TOnSubmit_2_8, TOnSubmitAsync_2_8, TOnDynamic_2_8, TOnDynamicAsync_2_8, TOnServer_2_8, unknown extends TSubmitMeta_2_8 ? TFormSubmitMeta_8 : TSubmitMeta_2_8, {} & TNewField & TNewField_1 & TNewField_2 & TNewField_3 & TNewField_4 & TNewField_5 & TNewField_6 & TNewField_7 & TNewField_8, {
readonly SubmitButton: typeof SubmitButton;
readonly CardSaveBar: typeof CardSaveBar;
} & TNewForm & TNewForm_1 & TNewForm_2 & TNewForm_3 & TNewForm_4 & TNewForm_5 & TNewForm_6 & TNewForm_7 & TNewForm_8> | import("@tanstack/react-form").AppFieldExtendedReactFieldGroupApi<unknown, TFormData, string | import("@tanstack/react-form").FieldsMap<unknown, TFormData>, any, any, any, any, any, any, any, any, any, any, unknown extends TSubmitMeta_2_8 ? TFormSubmitMeta_8 : TSubmitMeta_2_8, {} & TNewField & TNewField_1 & TNewField_2 & TNewField_3 & TNewField_4 & TNewField_5 & TNewField_6 & TNewField_7 & TNewField_8, {
readonly SubmitButton: typeof SubmitButton;
readonly CardSaveBar: typeof CardSaveBar;
} & TNewForm & TNewForm_1 & TNewForm_2 & TNewForm_3 & TNewForm_4 & TNewForm_5 & TNewForm_6 & TNewForm_7 & TNewForm_8>;
fields: TFields_8;
}>) => ReturnType<import("react").FunctionComponent>;
useTypedAppFormContext: <TFormData, TOnMount_3_8 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnChange_3_8 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnChangeAsync_3_8 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnBlur_3_8 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnBlurAsync_3_8 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnSubmit_3_8 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnSubmitAsync_3_8 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnDynamic_3_8 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnDynamicAsync_3_8 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnServer_3_8 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TSubmitMeta_3_8>(_props: import("@tanstack/react-form").FormOptions<TFormData, TOnMount_3_8, TOnChange_3_8, TOnChangeAsync_3_8, TOnBlur_3_8, TOnBlurAsync_3_8, TOnSubmit_3_8, TOnSubmitAsync_3_8, TOnDynamic_3_8, TOnDynamicAsync_3_8, TOnServer_3_8, TSubmitMeta_3_8>) => import("@tanstack/react-form").AppFieldExtendedReactFormApi<TFormData, TOnMount_3_8, TOnChange_3_8, TOnChangeAsync_3_8, TOnBlur_3_8, TOnBlurAsync_3_8, TOnSubmit_3_8, TOnSubmitAsync_3_8, TOnDynamic_3_8, TOnDynamicAsync_3_8, TOnServer_3_8, TSubmitMeta_3_8, {} & TNewField & TNewField_1 & TNewField_2 & TNewField_3 & TNewField_4 & TNewField_5 & TNewField_6 & TNewField_7 & TNewField_8, {
readonly SubmitButton: typeof SubmitButton;
readonly CardSaveBar: typeof CardSaveBar;
} & TNewForm & TNewForm_1 & TNewForm_2 & TNewForm_3 & TNewForm_4 & TNewForm_5 & TNewForm_6 & TNewForm_7 & TNewForm_8>;
extendForm: <const TNewField_9 extends Record<string, import("react").ComponentType<any>> & ({} & TNewField & TNewField_1 & TNewField_2 & TNewField_3 & TNewField_4 & TNewField_5 & TNewField_6 & TNewField_7 & TNewField_8 extends (infer T_16) ? { [K_16 in keyof T_16]?: "Error: field component names must be unique — this key already exists in the base form" | undefined; } : never), const TNewForm_9 extends Record<string, import("react").ComponentType<any>> & ({
readonly SubmitButton: typeof SubmitButton;
readonly CardSaveBar: typeof CardSaveBar;
} & TNewForm & TNewForm_1 & TNewForm_2 & TNewForm_3 & TNewForm_4 & TNewForm_5 & TNewForm_6 & TNewForm_7 & TNewForm_8 extends (infer T_17) ? { [K_17 in keyof T_17]?: "Error: form component names must be unique — this key already exists in the base form" | undefined; } : never)>(extension: {
fieldComponents?: TNewField_9 | undefined;
formComponents?: TNewForm_9 | undefined;
}) => {
useAppForm: <TFormData, TOnMount_12 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnChange_12 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnChangeAsync_12 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnBlur_12 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnBlurAsync_12 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnSubmit_12 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnSubmitAsync_12 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnDynamic_12 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnDynamicAsync_12 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnServer_12 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TSubmitMeta_12>(props: import("@tanstack/react-form").FormOptions<TFormData, TOnMount_12, TOnChange_12, TOnChangeAsync_12, TOnBlur_12, TOnBlurAsync_12, TOnSubmit_12, TOnSubmitAsync_12, TOnDynamic_12, TOnDynamicAsync_12, TOnServer_12, TSubmitMeta_12>) => import("@tanstack/react-form").AppFieldExtendedReactFormApi<TFormData, TOnMount_12, TOnChange_12, TOnChangeAsync_12, TOnBlur_12, TOnBlurAsync_12, TOnSubmit_12, TOnSubmitAsync_12, TOnDynamic_12, TOnDynamicAsync_12, TOnServer_12, TSubmitMeta_12, {} & TNewField & TNewField_1 & TNewField_2 & TNewField_3 & TNewField_4 & TNewField_5 & TNewField_6 & TNewField_7 & TNewField_8 & TNewField_9, {
readonly SubmitButton: typeof SubmitButton;
readonly CardSaveBar: typeof CardSaveBar;
} & TNewForm & TNewForm_1 & TNewForm_2 & TNewForm_3 & TNewForm_4 & TNewForm_5 & TNewForm_6 & TNewForm_7 & TNewForm_8 & TNewForm_9>;
withForm: <TFormData, TOnMount_1_9 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnChange_1_9 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnChangeAsync_1_9 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnBlur_1_9 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnBlurAsync_1_9 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnSubmit_1_9 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnSubmitAsync_1_9 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnDynamic_1_9 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnDynamicAsync_1_9 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnServer_1_9 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TSubmitMeta_1_9, TRenderProps_10 extends object = {}>({ render, props }: import("@tanstack/react-form").WithFormProps<TFormData, TOnMount_1_9, TOnChange_1_9, TOnChangeAsync_1_9, TOnBlur_1_9, TOnBlurAsync_1_9, TOnSubmit_1_9, TOnSubmitAsync_1_9, TOnDynamic_1_9, TOnDynamicAsync_1_9, TOnServer_1_9, TSubmitMeta_1_9, {} & TNewField & TNewField_1 & TNewField_2 & TNewField_3 & TNewField_4 & TNewField_5 & TNewField_6 & TNewField_7 & TNewField_8 & TNewField_9, {
readonly SubmitButton: typeof SubmitButton;
readonly CardSaveBar: typeof CardSaveBar;
} & TNewForm & TNewForm_1 & TNewForm_2 & TNewForm_3 & TNewForm_4 & TNewForm_5 & TNewForm_6 & TNewForm_7 & TNewForm_8 & TNewForm_9, TRenderProps_10>) => import("react").FunctionComponent<import("react").PropsWithChildren<NoInfer<[unknown] extends [TRenderProps_10] ? any : TRenderProps_10> & {
form: import("@tanstack/react-form").AppFieldExtendedReactFormApi<[unknown] extends [TFormData] ? any : TFormData, [import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined] extends [TOnMount_1_9] ? [TOnMount_1_9] extends [TOnMount_1_9 & (import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined)] ? any : TOnMount_1_9 : TOnMount_1_9, [import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined] extends [TOnChange_1_9] ? [TOnChange_1_9] extends [TOnChange_1_9 & (import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined)] ? any : TOnChange_1_9 : TOnChange_1_9, [import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined] extends [TOnChangeAsync_1_9] ? [TOnChangeAsync_1_9] extends [TOnChangeAsync_1_9 & (import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined)] ? any : TOnChangeAsync_1_9 : TOnChangeAsync_1_9, [import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined] extends [TOnBlur_1_9] ? [TOnBlur_1_9] extends [TOnBlur_1_9 & (import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined)] ? any : TOnBlur_1_9 : TOnBlur_1_9, [import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined] extends [TOnBlurAsync_1_9] ? [TOnBlurAsync_1_9] extends [TOnBlurAsync_1_9 & (import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined)] ? any : TOnBlurAsync_1_9 : TOnBlurAsync_1_9, [import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined] extends [TOnSubmit_1_9] ? [TOnSubmit_1_9] extends [TOnSubmit_1_9 & (import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined)] ? any : TOnSubmit_1_9 : TOnSubmit_1_9, [import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined] extends [TOnSubmitAsync_1_9] ? [TOnSubmitAsync_1_9] extends [TOnSubmitAsync_1_9 & (import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined)] ? any : TOnSubmitAsync_1_9 : TOnSubmitAsync_1_9, [import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined] extends [TOnDynamic_1_9] ? [TOnDynamic_1_9] extends [TOnDynamic_1_9 & (import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined)] ? any : TOnDynamic_1_9 : TOnDynamic_1_9, [import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined] extends [TOnDynamicAsync_1_9] ? [TOnDynamicAsync_1_9] extends [TOnDynamicAsync_1_9 & (import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined)] ? any : TOnDynamicAsync_1_9 : TOnDynamicAsync_1_9, [import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined] extends [TOnServer_1_9] ? [TOnServer_1_9] extends [TOnServer_1_9 & (import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined)] ? any : TOnServer_1_9 : TOnServer_1_9, [unknown] extends [TSubmitMeta_1_9] ? any : TSubmitMeta_1_9, [unknown] extends [{} & TNewField & TNewField_1 & TNewField_2 & TNewField_3 & TNewField_4 & TNewField_5 & TNewField_6 & TNewField_7 & TNewField_8 & TNewField_9] ? any : {} & TNewField & TNewField_1 & TNewField_2 & TNewField_3 & TNewField_4 & TNewField_5 & TNewField_6 & TNewField_7 & TNewField_8 & TNewField_9, [unknown] extends [{
readonly SubmitButton: typeof SubmitButton;
readonly CardSaveBar: typeof CardSaveBar;
} & TNewForm & TNewForm_1 & TNewForm_2 & TNewForm_3 & TNewForm_4 & TNewForm_5 & TNewForm_6 & TNewForm_7 & TNewForm_8 & TNewForm_9] ? any : {
readonly SubmitButton: typeof SubmitButton;
readonly CardSaveBar: typeof CardSaveBar;
} & TNewForm & TNewForm_1 & TNewForm_2 & TNewForm_3 & TNewForm_4 & TNewForm_5 & TNewForm_6 & TNewForm_7 & TNewForm_8 & TNewForm_9>;
}>>;
withFieldGroup: <TFieldGroupData, TSubmitMeta_2_9, TRenderProps_1_9 extends object = {}>({ render, props, defaultValues }: import("@tanstack/react-form").WithFieldGroupProps<TFieldGroupData, {} & TNewField & TNewField_1 & TNewField_2 & TNewField_3 & TNewField_4 & TNewField_5 & TNewField_6 & TNewField_7 & TNewField_8 & TNewField_9, {
readonly SubmitButton: typeof SubmitButton;
readonly CardSaveBar: typeof CardSaveBar;
} & TNewForm & TNewForm_1 & TNewForm_2 & TNewForm_3 & TNewForm_4 & TNewForm_5 & TNewForm_6 & TNewForm_7 & TNewForm_8 & TNewForm_9, TSubmitMeta_2_9, TRenderProps_1_9>) => <TFormData, TFields_9 extends import("@tanstack/react-form").DeepKeysOfType<TFormData, TFieldGroupData | null | undefined> | import("@tanstack/react-form").FieldsMap<TFormData, TFieldGroupData>, TOnMount_2_9 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnChange_2_9 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnChangeAsync_2_9 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnBlur_2_9 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnBlurAsync_2_9 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnSubmit_2_9 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnSubmitAsync_2_9 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnDynamic_2_9 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnDynamicAsync_2_9 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnServer_2_9 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TFormSubmitMeta_9>(params: import("react").PropsWithChildren<NoInfer<TRenderProps_1_9> & {
form: import("@tanstack/react-form").AppFieldExtendedReactFormApi<TFormData, TOnMount_2_9, TOnChange_2_9, TOnChangeAsync_2_9, TOnBlur_2_9, TOnBlurAsync_2_9, TOnSubmit_2_9, TOnSubmitAsync_2_9, TOnDynamic_2_9, TOnDynamicAsync_2_9, TOnServer_2_9, unknown extends TSubmitMeta_2_9 ? TFormSubmitMeta_9 : TSubmitMeta_2_9, {} & TNewField & TNewField_1 & TNewField_2 & TNewField_3 & TNewField_4 & TNewField_5 & TNewField_6 & TNewField_7 & TNewField_8 & TNewField_9, {
readonly SubmitButton: typeof SubmitButton;
readonly CardSaveBar: typeof CardSaveBar;
} & TNewForm & TNewForm_1 & TNewForm_2 & TNewForm_3 & TNewForm_4 & TNewForm_5 & TNewForm_6 & TNewForm_7 & TNewForm_8 & TNewForm_9> | import("@tanstack/react-form").AppFieldExtendedReactFieldGroupApi<unknown, TFormData, string | import("@tanstack/react-form").FieldsMap<unknown, TFormData>, any, any, any, any, any, any, any, any, any, any, unknown extends TSubmitMeta_2_9 ? TFormSubmitMeta_9 : TSubmitMeta_2_9, {} & TNewField & TNewField_1 & TNewField_2 & TNewField_3 & TNewField_4 & TNewField_5 & TNewField_6 & TNewField_7 & TNewField_8 & TNewField_9, {
readonly SubmitButton: typeof SubmitButton;
readonly CardSaveBar: typeof CardSaveBar;
} & TNewForm & TNewForm_1 & TNewForm_2 & TNewForm_3 & TNewForm_4 & TNewForm_5 & TNewForm_6 & TNewForm_7 & TNewForm_8 & TNewForm_9>;
fields: TFields_9;
}>) => ReturnType<import("react").FunctionComponent>;
useTypedAppFormContext: <TFormData, TOnMount_3_9 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnChange_3_9 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnChangeAsync_3_9 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnBlur_3_9 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnBlurAsync_3_9 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnSubmit_3_9 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnSubmitAsync_3_9 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnDynamic_3_9 extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnDynamicAsync_3_9 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnServer_3_9 extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TSubmitMeta_3_9>(_props: import("@tanstack/react-form").FormOptions<TFormData, TOnMount_3_9, TOnChange_3_9, TOnChangeAsync_3_9, TOnBlur_3_9, TOnBlurAsync_3_9, TOnSubmit_3_9, TOnSubmitAsync_3_9, TOnDynamic_3_9, TOnDynamicAsync_3_9, TOnServer_3_9, TSubmitMeta_3_9>) => import("@tanstack/react-form").AppFieldExtendedReactFormApi<TFormData, TOnMount_3_9, TOnChange_3_9, TOnChangeAsync_3_9, TOnBlur_3_9, TOnBlurAsync_3_9, TOnSubmit_3_9, TOnSubmitAsync_3_9, TOnDynamic_3_9, TOnDynamicAsync_3_9, TOnServer_3_9, TSubmitMeta_3_9, {} & TNewField & TNewField_1 & TNewField_2 & TNewField_3 & TNewField_4 & TNewField_5 & TNewField_6 & TNewField_7 & TNewField_8 & TNewField_9, {
readonly SubmitButton: typeof SubmitButton;
readonly CardSaveBar: typeof CardSaveBar;
} & TNewForm & TNewForm_1 & TNewForm_2 & TNewForm_3 & TNewForm_4 & TNewForm_5 & TNewForm_6 & TNewForm_7 & TNewForm_8 & TNewForm_9>;
extendForm: <const TNewField_10 extends Record<string, import("react").ComponentType<any>> & ({} & TNewField & TNewField_1 & TNewField_2 & TNewField_3 & TNewField_4 & TNewField_5 & TNewField_6 & TNewField_7 & TNewField_8 & TNewField_9 extends (infer T_18) ? { [K_18 in keyof T_18]?: "Error: field component names must be unique — this key already exists in the base form" | undefined; } : never), const TNewForm_10 extends Record<string, import("react").ComponentType<any>> & ({
readonly SubmitButton: typeof SubmitButton;
readonly CardSaveBar: typeof CardSaveBar;
} & TNewForm & TNewForm_1 & TNewForm_2 & TNewForm_3 & TNewForm_4 & TNewForm_5 & TNewForm_6 & TNewForm_7 & TNewForm_8 & TNewForm_9 extends (infer T_19) ? { [K_19 in keyof T_19]?: "Error: form component names must be unique — this key already exists in the base form" | undefined; } : never)>(extension: {
fieldComponents?: TNewField_10 | undefined;
formComponents?: TNewForm_10 | undefined;
}) => any;
};
};
};
};
};
};
};
};
};
};
};
declare const useForm: <TFormData, TOnMount extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnChange extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnChangeAsync extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnBlur extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnBlurAsync extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnSubmit extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnSubmitAsync extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnDynamic extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnDynamicAsync extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnServer extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TSubmitMeta>(props: import("@tanstack/react-form").FormOptions<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta>) => import("@tanstack/react-form").AppFieldExtendedReactFormApi<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta, {}, {
readonly SubmitButton: typeof SubmitButton;
readonly CardSaveBar: typeof CardSaveBar;
}>;
declare const withForm: <TFormData, TOnMount extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnChange extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnChangeAsync extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnBlur extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnBlurAsync extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnSubmit extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnSubmitAsync extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnDynamic extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnDynamicAsync extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnServer extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TSubmitMeta, TRenderProps extends object = {}>({ render, props }: import("@tanstack/react-form").WithFormProps<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta, {}, {
readonly SubmitButton: typeof SubmitButton;
readonly CardSaveBar: typeof CardSaveBar;
}, TRenderProps>) => import("react").FunctionComponent<import("react").PropsWithChildren<NoInfer<[unknown] extends [TRenderProps] ? any : TRenderProps> & {
form: import("@tanstack/react-form").AppFieldExtendedReactFormApi<[unknown] extends [TFormData] ? any : TFormData, [import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined] extends [TOnMount] ? [TOnMount] extends [TOnMount & (import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined)] ? any : TOnMount : TOnMount, [import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined] extends [TOnChange] ? [TOnChange] extends [TOnChange & (import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined)] ? any : TOnChange : TOnChange, [import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined] extends [TOnChangeAsync] ? [TOnChangeAsync] extends [TOnChangeAsync & (import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined)] ? any : TOnChangeAsync : TOnChangeAsync, [import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined] extends [TOnBlur] ? [TOnBlur] extends [TOnBlur & (import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined)] ? any : TOnBlur : TOnBlur, [import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined] extends [TOnBlurAsync] ? [TOnBlurAsync] extends [TOnBlurAsync & (import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined)] ? any : TOnBlurAsync : TOnBlurAsync, [import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined] extends [TOnSubmit] ? [TOnSubmit] extends [TOnSubmit & (import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined)] ? any : TOnSubmit : TOnSubmit, [import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined] extends [TOnSubmitAsync] ? [TOnSubmitAsync] extends [TOnSubmitAsync & (import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined)] ? any : TOnSubmitAsync : TOnSubmitAsync, [import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined] extends [TOnDynamic] ? [TOnDynamic] extends [TOnDynamic & (import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined)] ? any : TOnDynamic : TOnDynamic, [import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined] extends [TOnDynamicAsync] ? [TOnDynamicAsync] extends [TOnDynamicAsync & (import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined)] ? any : TOnDynamicAsync : TOnDynamicAsync, [import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined] extends [TOnServer] ? [TOnServer] extends [TOnServer & (import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined)] ? any : TOnServer : TOnServer, [unknown] extends [TSubmitMeta] ? any : TSubmitMeta, {}, {
readonly SubmitButton: typeof SubmitButton;
readonly CardSaveBar: typeof CardSaveBar;
}>;
}>>, withFieldGroup: <TFieldGroupData, TSubmitMeta, TRenderProps extends object = {}>({ render, props, defaultValues }: import("@tanstack/react-form").WithFieldGroupProps<TFieldGroupData, {}, {
readonly SubmitButton: typeof SubmitButton;
readonly CardSaveBar: typeof CardSaveBar;
}, TSubmitMeta, TRenderProps>) => <TFormData, TFields extends import("@tanstack/react-form").DeepKeysOfType<TFormData, TFieldGroupData | null | undefined> | import("@tanstack/react-form").FieldsMap<TFormData, TFieldGroupData>, TOnMount extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnChange extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnChangeAsync extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnBlur extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnBlurAsync extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnSubmit extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnSubmitAsync extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnDynamic extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnDynamicAsync extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnServer extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TFormSubmitMeta>(params: import("react").PropsWithChildren<NoInfer<TRenderProps> & {
form: import("@tanstack/react-form").AppFieldExtendedReactFormApi<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, unknown extends TSubmitMeta ? TFormSubmitMeta : TSubmitMeta, {}, {
readonly SubmitButton: typeof SubmitButton;
readonly CardSaveBar: typeof CardSaveBar;
}> | import("@tanstack/react-form").AppFieldExtendedReactFieldGroupApi<unknown, TFormData, string | import("@tanstack/react-form").FieldsMap<unknown, TFormData>, any, any, any, any, any, any, any, any, any, any, unknown extends TSubmitMeta ? TFormSubmitMeta : TSubmitMeta, {}, {
readonly SubmitButton: typeof SubmitButton;
readonly CardSaveBar: typeof CardSaveBar;
}>;
fields: TFields;
}>) => ReturnType<import("react").FunctionComponent>;
//#endregion
//#region src/form/form-context.d.ts
/**
* TanStack Form contexts for `@aircall/blocks`.
*
* - `fieldContext` / `formContext` — pass to `createFormHook` when extending `useForm` with custom field or form components.
* - `useFieldContext<T>()` — read the bound field's value, meta, and handlers inside a custom field component.
* - `useFormContext()` — read form-level state (isDirty, isSubmitting, …) inside a custom form component.
*
* @example
* // Extending useForm with a custom SwitchField
* const { useAppForm } = createFormHook({ fieldContext, formContext, fieldComponents: { SwitchField }, formComponents: {} })
*/
declare const fieldContext: import("react").Context<import("@tanstack/react-form").AnyFieldApi>, formContext: import("react").Context<import("@tanstack/react-form").AnyFormApi>, useFieldContext: <TData>() => import("@tanstack/react-form").FieldApi<any, string, TData, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any>, useFormContext: () => import("@tanstack/react-form").ReactFormExtendedApi<Record<string, never>, any, any, any, any, any, any, any, any, any, any, any>;
//#endregion
//#region src/components/form-field.d.ts
/**
* Label prop shared by every wrapper. A bare string is the label text; the object form adds
* right-aligned `aside` content (a link, a popover, …) and an `(i)` `info` popover on the label
* row. `aside`/`info` are free-form — you pass the node, blocks only positions it.
*/
type LabelProp = string | {
content: string;
aside?: React$1.ReactNode;
info?: React$1.ReactNode;
};
/**
* Description prop shared by every wrapper. A bare string renders as an `instructional`
* description (under the label, always visible). The object form sets the `variant`:
* `'instructional'` (default) or `'contextual'` (below the control, hidden when the field is
* invalid — the error message takes its slot).
*/
type DescriptionProp = string | {
content: React$1.ReactNode;
variant?: 'instructional' | 'contextual';
};
/**
* Layout props shared by every wrapper. Both default to the vertical layout (label stacked above
* the control), so existing fields are unchanged.
*
* - `orientation`: `'vertical'` (default) stacks label → control. `'horizontal'` places the
* label/description beside the control. `'responsive'` is vertical on narrow screens and
* horizontal at the `@md` container width — it requires a `FieldGroup` ancestor (which provides
* `@container/field-group`), matching the shadcn Field responsive pattern.
* - `controlPosition`: in horizontal/responsive layouts, which side the control sits on. Defaults
* per control — `FormSwitchField` → `'start'` (switch left of its label), text/select/etc. →
* `'end'` (control right of its label).
*/
type LayoutProps = {
orientation?: 'vertical' | 'horizontal' | 'responsive';
controlPosition?: 'start' | 'end';
};
/**
* How the control fills its side of a horizontal/responsive row. Internal — set by each wrapper,
* not exposed to consumers.
* - `'fill'` (default): the control takes a full flex column next to the label column, with the
* error/contextual description stacked under it (text inputs, selects, textareas, …).
* - `'inline'`: the control is a bare, natural-width element (a switch); the label, descriptions
* and error share one growing column on the opposite side.
*/
type ControlVariant = 'inline' | 'fill';
/** Props for `FormFieldShell` — the normalized label / description / layout inputs it renders from. */
type FormFieldShellProps = {
label?: LabelProp;
description?: DescriptionProp;
necessityIndicator?: 'required' | 'optional';
/**
* `htmlFor` target for the rendered `FieldLabel`, so clicking the label focuses the field's
* control. Single-control wrappers set this to the same `id` they put on the control itself
* (see `FormFieldBase`); group/array wrappers (RadioGroup, ToggleGroup, ArrayField) have no one
* focusable target, so they pass an `id` with nothing matching it — same as omitting `htmlFor`.
*/
id: string;
children: React$1.ReactNode;
orientation?: LayoutProps['orientation'];
controlPosition?: LayoutProps['controlPosition'];
controlVariant?: ControlVariant;
};
/**
* Internal layout shell shared by every `Form*Field` wrapper. Normalizes the
* `label` / `description` props, lays out the `Field → label row → description →
* control → error` skeleton per `orientation` / `controlVariant`, and applies the
* error-display policy plus `data-invalid`. Reads the bound field from context,
* so it must render inside `form.AppField`. Renders a DS `Field`.
*/
declare function FormFieldShell({ label, description, necessityIndicator, id, children, orientation, controlPosition, controlVariant }: FormFieldShellProps): React$1.JSX.Element;
/**
* Precisely-typed view of the bound field handed to a wrapper's `children`.
* `TData` is `DeepValue<TFormData, TName>` — so `value` and `handleChange` are the field's
* real value type, derived from the threaded `form`.
*/
type TypedField<TData> = {
state: {
value: TData;
meta: {
errors: readonly unknown[];
isTouched: boolean;
};
};
handleChange: (value: TData) => void;
handleBlur: () => void;
};
/**
* Minimal structural view of a `createFormHook` form. `state.values` is the typed source the
* wrappers read the field-name union from; `AppField` is the binder we render into.
*
* `AppField` is intentionally loose (`(...args: never[]) => unknown`). A tight signature like
* `(props: never) => React.ReactNode` is NOT satisfied by `useForm`'s `AppField` once the form
* data is deeply nested (arrays of objects, etc.) — TS can't prove the form's generic `AppField`
* assignable, so `TForm extends BoundForm` fails and `name` cascades to `never`. The loose form
* accepts any `createFormHook` form for any data shape; `FormFieldBase` casts `AppField` to the
* concrete component type before use, so nothing downstream relies on the precise signature.
*
* `state.values` is `Record<string, any>`, not `unknown`, for a separate reason: every `Form*Field`
* wrapper is generic over `<TForm extends BoundForm, TName extends DeepKeysOfType<TForm['state']['values'], V>>`
* with no default type arguments. When TS checks whether such a generic function is a valid JSX
* element type, it evaluates the *unconstrained* signature — `TForm` falls back to `BoundForm`
* itself. With `values: unknown`, `DeepKeysOfType<unknown, V>` can't find any key whose value
* extends `V`, so it collapses to `never`, making the unconstrained `name: never` — under
* `strictFunctionTypes: true` (the TS default; this repo's shared tsconfig disables it, but most
* external consumers don't) that trips `TS2786: 'FormXField' cannot be used as a JSX component`.
* `Record<string, any>` fixes it because `any extends V` resolves to `true` for every `V` in a
* conditional type, so no key gets filtered out — the unconstrained fallback resolves to a real,
* inhabited `string` instead of `never` (same reason react-hook-form defaults
* `TFieldValues = Record<string, any>`). Real call sites are unaffected: TS infers `TForm`/`TName`
* from the actual threaded `form`, never from this fallback.
*
* Safe to tighten (unlike `AppField`): `state.values` is *data*, checked structurally/covariantly,
* so any real form's values object — however deeply nested or array-shaped — is still assignable
* to `Record<string, any>`. `AppField` is a *function signature*, checked contravariantly, which is
* why tightening it (see above) breaks real forms but tightening `values` does not.
*/
type BoundForm = {
state: {
values: Record<string, any>;
};
AppField: (...args: never[]) => unknown;
};
/**
* Field validators typed against the field's value — the `validators` prop of every wrapper.
*
* Reuses TanStack's own `FieldValidators` (the exact interface `AppField` accepts) instead of a
* hand-rolled mirror, so every slot AppField supports is exposed with identical typing:
* `onMount`, `onChange`/`onChangeAsync`/`onChangeListenTo`, `onBlur`/`onBlurAsync`/`onBlurListenTo`,
* `onSubmit`/`onSubmitAsync`, `onDynamic`/`onDynamicAsync`, plus the `*DebounceMs` knobs.
*
* The per-slot validator generics can't be inferred here (the wrapper is generic over `TForm`/
* `TName`, not a generic *function* like `AppField`), so each is instantiated to its widest
* `FieldValidateOrFn`/`FieldAsyncValidateOrFn`. `value` still infers as the field's real type
* because `TData` (`DeepValue<TFormData, TName>`) is concrete. The outer conditional keeps `TName`
* unconstrained at the boundary so `DeepKeysOfType` subsets (e.g. the string-only Select keys)
* resolve without a constraint clash, exactly like the previous guard.
*/
type FormFieldValidators<TFormData, TName> = TName extends DeepKeys<TFormData> ? FieldValidators<TFormData, TName, DeepValue<TFormData, TName>, FieldValidateOrFn<TFormData, TName>, FieldValidateOrFn<TFormData, TName>, FieldAsyncValidateOrFn<TFormData, TName>, FieldValidateOrFn<TFormData, TName>, FieldAsyncValidateOrFn<TFormData, TName>, FieldValidateOrFn<TFormData, TName>, FieldAsyncValidateOrFn<TFormData, TName>, FieldValidateOrFn<TFormData, TName>, FieldAsyncValidateOrFn<TFormData, TName>> : never;
/**
* The full `AppField` binding surface every wrapper forwards, typed against the field's value.
*
* This is the **single source of truth** for which `form.AppField` props the `Form*Field` wrappers
* pass through — spread it into each wrapper's props so the set can't drift per-wrapper.
*
* Forwarded: `validators`, `listeners`, `defaultValue`, `asyncDebounceMs`, `asyncAlways`.
* Deliberately omitted: `name`/`children` (owned by the wrapper), `mode` (owned by `FormArrayField`,
* which is the only wrapper that drives an `AppField` in `mode="array"`), and
* `defaultMeta`/`disableErrorFlat` (advanced escape hatches that fight the shared shell).
*/
type FieldBindingProps<TFormData, TName> = TName extends DeepKeys<TFormData> ? {
validators?: FormFieldValidators<TFormData, TName>;
listeners?: FieldListeners<TFormData, TName>;
defaultValue?: DeepValue<TFormData, TName>;
asyncDebounceMs?: number;
asyncAlways?: boolean;
} : never;
/**
* Presentational necessity prop every wrapper exposes, forwarded to the DS `FieldLabel`. Follows
* the "mark the exceptions" convention: tag only the minority necessity in a form (`'optional'` in
* a mostly-mandatory form, `'required'` in a mostly-optional one), never both. Label-only —
* enforcement stays in `validators`. Shared so the set can't drift per-wrapper.
*/
type NecessityProps = {
necessityIndicator?: 'required' | 'optional';
};
type FormFieldBaseProps<TData, TControl> = {
form: Pick<BoundForm, 'AppField'>;
name: string;
validators?: unknown;
listeners?: unknown;
defaultValue?: unknown;
asyncDebounceMs?: number;
asyncAlways?: boolean;
label?: LabelProp;
description?: DescriptionProp;
necessityIndicator?: 'required' | 'optional';
orientation?: LayoutProps['orientation'];
controlPosition?: LayoutProps['controlPosition'];
/** Internal — set by the wrapper (switch → 'inline', others → 'fill'). Not a consumer prop. */
controlVariant?: ControlVariant;
/**
* Builds the primitive-specific wiring bundle handed to `children`. `id` is `name` (see
* `FormFieldBase`) — attach it to the control's actual DOM element so the shell's `FieldLabel`
* (`htmlFor={id}`) focuses it on click. Group controls with no single focusable target (radio
* group, toggle group) can ignore the parameter.
*/
buildControl: (field: TypedField<TData>, id: string) => TControl;
children: (field: TypedField<TData>, control: TControl) => React$1.ReactNode;
};
/**
* Shared runtime binder for the per-primitive wrappers (FormSelectField, FormInputField, …).
* Field-name/value/validator typing is enforced at each wrapper's boundary; this just renders
* the AppField + shared shell. `TData`/`TControl` carry the precise field + bundle shapes through.
*/
declare function FormFieldBase<TData, TControl>(props: FormFieldBaseProps<TData, TControl>): React$1.JSX.Element;
//#endregion
//#region src/components/form-select-field.d.ts
/**
* Wiring bundles handed to a `FormSelectField` child. Spread each onto the matching
* primitive — this encodes the Select-specific quirks (the `'' ↔ null` value dance,
* `aria-invalid`) so consumers don't re-derive them. `id` lands on `selectTriggerProps`, not
* `selectProps` — the trigger is the actual focusable button, matching the shell's `FieldLabel`
* `htmlFor`.
*/
type SelectControl = {
selectProps: {
value: string | null;
onValueChange: (value: string | null) => void;
};
selectTriggerProps: {
id: string;
onBlur: () => void;
'aria-invalid': true | undefined;
};
};
type FormSelectFieldProps<TForm extends BoundForm, TName extends DeepKeysOfType<TForm['state']['values'], string>> = {
/** The form instance from `useForm()` — threaded as a prop so `name`/`validators` are typed. */
form: TForm;
name: TName;
label?: LabelProp;
description?: DescriptionProp;
/** Compose the Select yourself; spread the bundles. Trigger/content stay fully customizable. */
children: (field: TypedField<string>, control: SelectControl) => React$1.ReactNode;
} & FieldBindingProps<TForm['state']['values'], TName> & NecessityProps & LayoutProps;
/**
* Select field wrapper. Owns the binding + shared `Field/Label/Error` shell, and hands the
* consumer pre-wired `selectProps` / `selectTriggerProps` to spread onto `@aircall/ds` Select
* primitives — trigger, value, and content stay fully composable (Combobox-style triggers too).
*
* Typing is derived from the threaded `form`: `name` is restricted to the form's **string**
* fields, and `validators` infer the field value — identical to using `form.AppField` directly.
*
* @example
* <FormSelectField form={form} name="language" label="Language" validators={{ onChange }}>
* {(field, { selectProps, selectTriggerProps }) => (
* <Select {...selectProps}>
* <SelectTrigger {...selectTriggerProps}><SelectValue placeholder="Pick one" /></SelectTrigger>
* <SelectContent>{options}</SelectContent>
* </Select>
* )}
* </FormSelectField>
*/
declare function FormSelectField<TForm extends BoundForm, TName extends DeepKeysOfType<TForm['state']['values'], string>>(props: FormSelectFieldProps<TForm, TName>): React$1.JSX.Element;
//#endregion
//#region src/components/form-input-field.d.ts
/**
* Wiring bundle handed to a `FormInputField` child. Spread `inputProps` onto a DS `Input`
* (or any native-input-shaped control) — value/onChange/onBlur/id/aria are pre-wired; `id`
* matches the shell's `FieldLabel` `htmlFor` so clicking the label focuses the input.
*/
type InputControl = {
inputProps: {
id: string;
value: string;
onChange: (event: React$1.ChangeEvent<HTMLInputElement>) => void;
onBlur: () => void;
'aria-invalid': true | undefined;
};
};
type FormInputFieldProps<TForm extends BoundForm, TName extends DeepKeysOfType<TForm['state']['values'], string>> = {
form: TForm;
name: TName;
label?: LabelProp;
description?: DescriptionProp;
children: (field: TypedField<string>, control: InputControl) => React$1.ReactNode;
} & FieldBindingProps<TForm['state']['values'], TName> & NecessityProps & LayoutProps;
/**
* Text-input field wrapper — same threaded-`form` typing and shared shell as `FormSelectField`,
* with an `inputProps` bundle. Compose the input yourself (add adornments, counters, prefixes).
* `name` is restricted to the form's **string** fields.
*
* @example
* <FormInputField form={form} name="email" label="Email" validators={{ onChange }}>
* {(field, { inputProps }) => <Input {...inputProps} type="email" placeholder="you@co.com" />}
* </FormInputField>
*/
declare function FormInputField<TForm extends BoundForm, TName extends DeepKeysOfType<TForm['state']['values'], string>>(props: FormInputFieldProps<TForm, TName>): React$1.JSX.Element;
//#endregion
//#region src/components/form-combobox-field.d.ts
/**
* Wiring bundles handed to a `FormComboboxField` child. The Combobox is structurally different
* from a Select (search input instead of a trigger), so the bundles target its parts:
* `comboboxProps` on the `<Combobox>` root, `comboboxInputProps` on `<ComboboxInput>`. `id` lands
* on `comboboxInputProps` — the input is the actual focusable element, matching the shell's
* `FieldLabel` `htmlFor`.
*/
type ComboboxControl = {
comboboxProps: {
value: string | null;
onValueChange: (value: string | null) => void;
};
comboboxInputProps: {
id: string;
onBlur: () => void;
'aria-invalid': true | undefined;
};
};
type FormComboboxFieldProps<TForm extends BoundForm, TName extends DeepKeysOfType<TForm['state']['values'], string>> = {
form: TForm;
name: TName;
label?: LabelProp;
description?: DescriptionProp;
children: (field: TypedField<string>, control: ComboboxControl) => React$1.ReactNode;
} & FieldBindingProps<TForm['state']['values'], TName> & NecessityProps & LayoutProps;
/**
* Combobox (searchable single-select) field wrapper for **string-valued** fields. Same threaded-
* `form` typing and shared shell as the other wrappers; the render-prop hands you `comboboxProps`
* and `comboboxInputProps` to spread, leaving the input, trigger, grouping, and item rendering
* entirely up to you — the case that motivated the render-prop API.
*
* @example
* <FormComboboxField form={form} name="framework" label="Framework" validators={{ onChange }}>
* {(field, { comboboxProps, comboboxInputProps }) => (
* <Combobox items={FRAMEWORKS} {...comboboxProps}>
* <ComboboxInput {...comboboxInputProps} placeholder="Search…" />
* <ComboboxContent>
* <ComboboxEmpty>No match.</ComboboxEmpty>
* <ComboboxList>{item => <ComboboxItem key={item} value={item}>{item}</ComboboxItem>}</ComboboxList>
* </ComboboxContent>
* </Combobox>
* )}
* </FormComboboxField>
*/
declare function FormComboboxField<TForm extends BoundForm, TName extends DeepKeysOfType<TForm['state']['values'], string>>(props: FormComboboxFieldProps<TForm, TName>): React$1.JSX.Element;
//#endregion
//#region src/components/form-multi-combobox-field.d.ts
/**
* Wiring bundles handed to a `FormMultiComboboxField` child. Spread `comboboxProps` onto the
* `Combobox` root and `comboboxInputProps` onto its input — value/onValueChange live on the
* root, while blur/id/`aria-invalid` belong to the input. `id` matches the shell's `FieldLabel`
* `htmlFor` so clicking the label focuses the chips input.
*/
type MultiComboboxControl = {
comboboxProps: {
value: string[];
onValueChange: (value: string[]) => void;
};
comboboxInputProps: {
id: string;
onBlur: () => void;
'aria-invalid': true | undefined;
};
};
type FormMultiComboboxFieldProps<TForm extends BoundForm, TName extends DeepKeysOfType<TForm['state']['values'], string[]>> = {
form: TForm;
name: TName;
label?: LabelProp;
description?: DescriptionProp;
children: (field: TypedField<string[]>, control: MultiComboboxControl) => React$1.ReactNode;
} & FieldBindingProps<TForm['state']['values'], TName> & NecessityProps & LayoutProps;
/**
* Multi-select combobox field wrapper — same threaded-`form` typing and shared shell as
* `FormSelectField`, with `comboboxProps` / `comboboxInputProps` bundles. `name` is restricted
* to the form's **string[]** fields — a string/number `name` is a type error.
*
* @example
* <FormMultiComboboxField form={form} name="tags" label="Tags" validators={{ onChange }}>
* {(field, { comboboxProps, comboboxInputProps }) => (
* <Combobox multiple items={items} {...comboboxProps}>
* <ComboboxChips><ComboboxInput {...comboboxInputProps} /></ComboboxChips>
* </Combobox>
* )}
* </FormMultiComboboxField>
*/
declare function FormMultiComboboxField<TForm extends BoundForm, TName extends DeepKeysOfType<TForm['state']['values'], string[]>>(props: FormMultiComboboxFieldProps<TForm, TName>): React$1.JSX.Element;
//#endregion
//#region src/components/form-array-field.d.ts
/**
* The element type of the bound array field — `DeepValue<TFormData, TName>` unwrapped one level.
* `contacts: { label: string; value: string }[]` ⇒ `{ label: string; value: string }`.
*/
type ArrayItem<TFormData, TName> = DeepValue<TFormData, TName> extends ReadonlyArray<infer TItem> ? TItem : never;
/**
* Precisely-typed view of an array-mode field handed to a `FormArrayField` child.
*
* Unlike the single-control `TypedField`, this exposes TanStack's array mutators (kept under their
* native names so it's a transparent pass-through of `form.AppField` in `mode="array"`). The
* `options?` argument each mutator also accepts upstream is intentionally elided — the common path
* is index/value only; reach for `form.AppField` directly if you need it.
*
* Children read `state.value` to map over the rows and render nested `Form*Field`s with **indexed**
* names (`contacts[${i}].label`), and call the mutators from add/remove/reorder controls.
*/
type ArrayField<TItem> = {
state: {
value: TItem[];
meta: {
errors: readonly unknown[];
isTouched: boolean;
};
};
/** Append `value` to the end of the array. */
pushValue: (value: TItem) => void;
/** Insert `value` at `index`, shifting later items right. */
insertValue: (index: number, value: TItem) => void;
/** Replace the item at `index` in place. */
replaceValue: (index: number, value: TItem) => void;
/** Remove the item at `index`, shifting later items left. */
removeValue: (index: number) => void;
/** Swap the items at `aIndex` and `bIndex`. */
swapValues: (aIndex: number, bIndex: number) => void;
/** Move the item at `aIndex` to `bIndex`, shifting the rest to fill. */
moveValue: (aIndex: number, bIndex: number) => void;
/** Remove every item. */
clearValues: () => void;
/** Mark the array field touched (e.g. on blur of the whole group). */
handleBlur: () => void;
};
type FormArrayFieldProps<TForm extends BoundForm, TName extends DeepKeysOfType<TForm['state']['values'], unknown[]>> = {
/** The form instance from `useForm()` — threaded as a prop so `name`/`validators` are typed. */
form: TForm;
name: TName;
label?: LabelProp;
description?: DescriptionProp;
/**
* Render the list. Map over `field.state.value`, render a nested `Form*Field` per row (same
* `form`, indexed `name`), and wire add/remove/reorder controls to the array mutators.
*/
children: (field: ArrayField<ArrayItem<TForm['state']['values'], TName>>) => React$1.ReactNode;
} & FieldBindingProps<TForm['state']['values'], TName> & NecessityProps;
/**
* Array field wrapper — drives a `form.AppField` in `mode="array"` and owns the shared
* `Field/Label/Description/Error` shell, so an array-level validator (e.g. "add at least one")
* surfaces under the list. `name` is restricted to the form's **array** fields, and the child's
* `field` is typed to the element type, with TanStack's array mutators (`pushValue`, `removeValue`,
* `moveValue`, …) exposed for add/remove/reorder.
*
* It deliberately has **no control bundle**: an array is a container of rows, not a single input.
* Each row is composed from the existing single-control wrappers with an indexed `name`.
*
* @example
* <FormArrayField form={form} name="webhooks" label="Webhooks" description={{ content: 'Endpoints to notify', variant: 'contextual' }}>
* {field => (
* <>
* {field.state.value.map((_row, i) => (
* <div key={i} className="flex items-end gap-2">
* <FormInputField form={form} name={`webhooks[${i}].url`} label="URL">
* {(_f, { inputProps }) => <Input {...inputProps} placeholder="https://…" />}
* </FormInputField>
* <Button variant="ghost" onClick={() => field.removeValue(i)}>Remove</Button>
* </div>
* ))}
* <Button variant="outline" onClick={() => field.pushValue({ url: '' })}>Add webhook</Button>
* </>
* )}
* </FormArrayField>
*/
declare function FormArrayField<TForm extends BoundForm, TName extends DeepKeysOfType<TForm['state']['values'], unknown[]>>(props: FormArrayFieldProps<TForm, TName>): React$1.JSX.Element;
//#endregion
//#region src/components/form-textarea-field.d.ts
/**
* Wiring bundle handed to a `FormTextareaField` child. Spread `textareaProps` onto a DS
* `Textarea` (or any native-textarea-shaped control) — value/onChange/onBlur/id/aria are
* pre-wired; `id` matches the shell's `FieldLabel` `htmlFor` so clicking the label focuses it.
*/
type TextareaControl = {
textareaProps: {
id: string;
value: string;
onChange: (event: React$1.ChangeEvent<HTMLTextAreaElement>) => void;
onBlur: () => void;
'aria-invalid': true | undefined;
};
};
type FormTextareaFieldProps<TForm extends BoundForm, TName extends DeepKeysOfType<TForm['state']['values'], string>> = {
form: TForm;
name: TName;
label?: LabelProp;
description?: DescriptionProp;
children: (field: TypedField<string>, control: TextareaControl) => React$1.ReactNode;
} & FieldBindingProps<TForm['state']['values'], TName> & NecessityProps & LayoutProps;
/**
* Multiline text-input field wrapper — same threaded-`form` typing and shared shell as
* `FormSelectField`, with a `textareaProps` bundle. Compose the textarea yourself (rows,
* counters, auto-grow). `name` is restricted to the form's **string** fields.
*
* @example
* <FormTextareaField form={form} name="bio" label="Bio" validators={{ onChange }}>
* {(field, { textareaProps }) => <Textarea {...textareaProps} rows={4} />}
* </FormTextareaField>
*/
declare function FormTextareaField<TForm extends BoundForm, TName extends DeepKeysOfType<TForm['state']['values'], string>>(props: FormTextareaFieldProps<TForm, TName>): React$1.JSX.Element;
//#endregion
//#region src/components/form-rich-textarea-field.d.ts
/**
* Wiring bundle handed to a `FormRichTextareaField` child. Spread `richTextareaProps` onto a
* DS `RichTextarea` (from `@aircall/ds`). Unlike the native-input bundles, RichTextarea is
* **uncontrolled** and reports a value object, so the bundle wires `defaultValue` (seeded once
* at mount from the field value) and `onValueChange` (pushes `plainText` back to the field).
*
* Current limitations (RichTextarea does not yet forward these to its editable, tracked as DS
* follow-ups), so they are intentionally NOT in the bundle:
* - no `id` -> the shell's `FieldLabel` (`htmlFor`) cannot focus the editor on click; give the
* editor an accessible name with `aria-label` at the call site.
* - no `onBlur` -> validation runs on change, not on blur (use `validators.onChange`).
* - no `aria-invalid` -> no invalid ring on the control (the `FieldError` message still shows).
*/
type RichTextareaControl = {
richTextareaProps: {
defaultValue: string;
onValueChange: (value: {
plainText: string;
json: unknown;
markdown?: string;
}) => void;
};
};
type FormRichTextareaFieldProps<TForm extends BoundForm, TName extends DeepKeysOfType<TForm['state']['values'], string>> = {
form: TForm;
name: TName;
label?: LabelProp;
description?: DescriptionProp;
children: (field: TypedField<string>, control: RichTextareaControl) => React$1.ReactNode;
} & FieldBindingProps<TForm['state']['values'], TName> & NecessityProps & LayoutProps;
/**
* Rich-text field wrapper for the `@aircall/ds` `RichTextarea` — same threaded-`form` typing and
* shared shell (`FieldLabel` / `FieldError` / necessity / layout) as the other `Form*Field`
* wrappers, with a `richTextareaProps` bundle. The field stores the editor's **plain text**
* (`name` is restricted to the form's string fields); read `json`/`markdown` off the value object
* yourself if you need them. Prefer `validators.onChange` (there is no blur event; see
* `RichTextareaControl`).
*
* @example
* <FormRichTextareaField form={form} name="note" label="Note" validators={{ onChange }}>
* {(_field, { richTextareaProps }) => (
* <RichTextarea {...richTextareaProps} aria-label="Note" placeholder="Leave a note…" />
* )}
* </FormRichTextareaField>
*/
declare function FormRichTextareaField<TForm extends BoundForm, TName extends DeepKeysOfType<TForm['state']['values'], string>>(props: FormRichTextareaFieldProps<TForm, TName>): React$1.JSX.Element;
//#endregion
//#region src/components/form-radio-group-field.d.ts
/**
* Wiring bundle handed to a `FormRadioGroupField` child. Spread `radioGroupProps` onto a DS
* `RadioGroup` — this encodes the radio-specific quirks (the `'' ↔ null` value dance,
* `aria-invalid`) so consumers don't re-derive them.
*
* No `id` here, unlike the single-control wrappers: a radio group has several focusable items,
* not one, so there's no single target for the shell's `FieldLabel` `htmlFor` to focus — native
* `<label>` click-to-focus doesn't apply to grouped controls the way it does to a single input.
*/
type RadioGroupControl = {
radioGroupProps: {
value: string | null;
onValueChange: (value: string | null) => void;
onBlur: () => void;
'aria-invalid': true | undefined;
};
};
type FormRadioGroupFieldProps<TForm extends BoundForm, TName extends DeepKeysOfType<TForm['state']['values'], string>> = {
form: TForm;
name: TName;
label?: LabelProp;
description?: DescriptionProp;
children: (field: TypedField<string>, control: RadioGroupControl) => React$1.ReactNode;
} & FieldBindingProps<TForm['state']['values'], TName> & NecessityProps & LayoutProps;
/**
* Radio-group field wrapper — same threaded-`form` typing and shared shell as `FormSelectField`,
* with a `radioGroupProps` bundle. Compose the items yourself. `name` is restricted to the
* form's **string** fields.
*
* @example
* <FormRadioGroupField form={form} name="plan" label="Plan" validators={{ onChange }}>
* {(field, { radioGroupProps }) => (
* <RadioGroup {...radioGroupProps}>
* <RadioGroupItem value="a" />
* </RadioGroup>
* )}
* </FormRadioGroupField>
*/
declare function FormRadioGroupField<TForm extends BoundForm, TName extends DeepKeysOfType<TForm['state']['values'], string>>(props: FormRadioGroupFieldProps<TForm, TName>): React$1.JSX.Element;
//#endregion
//#region src/components/form-otp-field.d.ts
/**
* Wiring bundle handed to a `FormOTPField` child. Spread `otpProps` onto a DS `InputOTP` —
* value/onChange/onBlur/id/aria are pre-wired (`InputOTP` reports its value as a plain string;
* it renders one real input under its visual slots, so `id` lands there and matches the shell's
* `FieldLabel` `htmlFor`).
*/
type OTPControl = {
otpProps: {
id: string;
value: string;
onChange: (value: string) => void;
onBlur: () => void;
'aria-invalid': true | undefined;
};
};
type FormOTPFieldProps<TForm extends BoundForm, TName extends DeepKeysOfType<TForm['state']['values'], string>> = {
form: TForm;
name: TName;
label?: LabelProp;
description?: DescriptionProp;
children: (field: TypedField<string>, control: OTPControl) => React$1.ReactNode;
} & FieldBindingProps<TForm['state']['values'], TName> & NecessityProps & LayoutProps;
/**
* One-time-code field wrapper — same threaded-`form` typing and shared shell as `FormSelectField`,
* with an `otpProps` bundle. Compose the slots yourself. `name` is restricted to the form's
* **string** fields.
*
* @example
* <FormOTPField form={form} name="code" label="Code" validators={{ onChange }}>
* {(field, { otpProps }) => <InputOTP maxLength={6} {...otpProps}>{slots}</InputOTP>}
* </FormOTPField>
*/
declare function FormOTPField<TForm extends BoundForm, TName extends DeepKeysOfType<TForm['state']['values'], string>>(props: FormOTPFieldProps<TForm, TName>): React$1.JSX.Element;
//#endregion
//#region src/components/form-phone-input-field.d.ts
/**
* Wiring bundle handed to a `FormPhoneInputField` child. Spread `phoneInputProps` onto a
* `PhoneInput` — value/onValueChange/onBlur/id/aria are pre-wired.
*
* Only the NUMBER is bound, because only the number is the form's value. The country is left to
* the child: bind it to a second form field when a validator needs it, or hold it in state when
* nothing does. See `PhoneInput`, which takes the country as a separate controlled value.
*/
type PhoneInputControl = {
phoneInputProps: {
id: string;
value: string;
onValueChange: (value: string) => void;
onBlur: () => void;
'aria-invalid': true | undefined;
};
};
type FormPhoneInputFieldProps<TForm extends BoundForm, TName extends DeepKeysOfType<TForm['state']['values'], string>> = {
form: TForm;
name: TName;
label?: LabelProp;
description?: DescriptionProp;
children: (field: TypedField<string>, control: PhoneInputControl) => React$1.ReactNode;
} & FieldBindingProps<TForm['state']['values'], TName> & NecessityProps & LayoutProps;
/**
* Phone-number field wrapper — same threaded-`form` typing and shared shell as `FormInputField`,
* with a `phoneInputProps` bundle. `name` is restricted to the form's **string** fields.
*
* A validator that has to know the country reads it from wherever the child holds it, which is
* the reason the country is not bound here: it keeps the wrapper the same shape as every other
* one instead of inventing a second binding only this field would have.
*
* @example
* <FormPhoneInputField form={form} name="phone" label="Phone" validators={{ onChange }}>
* {(field, { phoneInputProps }) => (
* <PhoneInput
* {...phoneInputProps}
* country={country}
* onCountryChange={setCountry}
* defaultCountry={user.defaultCountry}
* />
* )}
* </FormPhoneInputField>
*/
declare function FormPhoneInputField<TForm extends BoundForm, TName extends DeepKeysOfType<TForm['state']['values'], string>>(props: FormPhoneInputFieldProps<TForm, TName>): React$1.JSX.Element;
//#endregion
//#region src/components/form-switch-field.d.ts
/**
* Wiring bundle handed to a `FormSwitchField` child. Spread `switchProps` onto a DS `Switch` —
* checked/onCheckedChange/onBlur/id/aria are pre-wired; `id` matches the shell's `FieldLabel`
* `htmlFor` so clicking the label toggles the switch.
*/
type SwitchControl = {
switchProps: {
id: string;
checked: boolean;
onCheckedChange: (checked: boolean) => void;
onBlur: () => void;
'aria-invalid': true | undefined;
};
};
type FormSwitchFieldProps<TForm extends BoundForm, TName extends DeepKeysOfType<TForm['state']['values'], boolean>> = {
form: TForm;
name: TName;
label?: LabelProp;
description?: DescriptionProp;
children: (field: TypedField<boolean>, control: SwitchControl) => React$1.ReactNode;
} & FieldBindingProps<TForm['state']['values'], TName> & NecessityProps & LayoutProps;
/**
* Toggle field wrapper — same threaded-`form` typing and shared shell as `FormSelectField`,
* with a `switchProps` bundle. `name` is restricted to the form's **boolean** fields — a
* string/number `name` is a type error.
*
* In a horizontal/responsive layout the switch is a bare, natural-width control beside its label
* (`controlPosition` picks the side — defaults to `'start'`, i.e. switch on the left).
*
* @example
* <FormSwitchField form={form} name="enabled" label="Enabled" validators={{ onChange }}>
* {(field, { switchProps }) => <Switch {...switchProps} />}
* </FormSwitchField>
*/
declare function FormSwitchField<TForm extends BoundForm, TName extends DeepKeysOfType<TForm['state']['values'], boolean>>(props: FormSwitchFieldProps<TForm, TName>): React$1.JSX.Element;
//#endregion
//#region src/components/form-numeric-field.d.ts
/**
* Wiring bundle handed to a `FormNumericField` child. Spread `numericProps` onto a DS
* `NumericInput` — value/onValueChange/onBlur/id/aria are pre-wired (a cleared input coerces to
* `0`); `id` matches the shell's `FieldLabel` `htmlFor` so clicking the label focuses the input.
*/
type NumericControl = {
numericProps: {
id: string;
value: number;
onValueChange: (value: number | null) => void;
onBlur: () => void;
'aria-invalid': true | undefined;
};
};
type FormNumericFieldProps<TForm extends BoundForm, TName extends DeepKeysOfType<TForm['state']['values'], number>> = {
form: TForm;
name: TName;
label?: LabelProp;
description?: DescriptionProp;
children: (field: TypedField<number>, control: NumericControl) => React$1.ReactNode;
} & FieldBindingProps<TForm['state']['values'], TName> & NecessityProps & LayoutProps;
/**
* Numeric field wrapper — same threaded-`form` typing and shared shell as `FormSelectField`,
* with a `numericProps` bundle for the DS `NumericInput` (prefer it over `Input type="number"`).
* `name` is restricted to the form's **number** fields — a string/boolean `name` is a type error.
*
* @example
* <FormNumericField form={form} name="age" label="Age" validators={{ onChange }}>
* {(field, { numericProps }) => <NumericInput {...numericProps} />}
* </FormNumericField>
*/
declare function FormNumericField<TForm extends BoundForm, TName extends DeepKeysOfType<TForm['state']['values'], number>>(props: FormNumericFieldProps<TForm, TName>): React$1.JSX.Element;
//#endregion
//#region src/components/form-slider-field.d.ts
/**
* Wiring bundle handed to a `FormSliderField` child. Spread `sliderProps` onto a DS `Slider` —
* this encodes the single-value ↔ `number[]` dance the underlying range primitive expects.
*
* `onValueChange`'s parameter is `number | readonly number[]`, not just `number[]`: DS's
* `Slider` doesn't pin the `@base-ui/react` `Value` generic, so its declared `onValueChange`
* type is the union default. Always setting `value` to a 1-element array below does make the
* primitive call back with an array at runtime, but a handler typed to accept only `number[]`
* isn't contravariantly assignable to one the union requires — that's a real
* `strictFunctionTypes` violation, not a false positive, so the handler accepts (and narrows)
* both shapes instead of narrowing the prop.
*/
type SliderControl = {
sliderProps: {
id: string;
value: number[];
onValueChange: (value: number | readonly number[]) => void;
onBlur: () => void;
};
};
type FormSliderFieldProps<TForm extends BoundForm, TName extends DeepKeysOfType<TForm['state']['values'], number>> = {
form: TForm;
name: TName;
label?: LabelProp;
description?: DescriptionProp;
children: (field: TypedField<number>, control: SliderControl) => React$1.ReactNode;
} & FieldBindingProps<TForm['state']['values'], TName> & NecessityProps & LayoutProps;
/**
* Slider field wrapper — same threaded-`form` typing and shared shell as `FormSelectField`,
* with a `sliderProps` bundle. `name` is restricted to the form's **number** fields; the bundle
* converts to/from the `number[]` the range primitive uses internally.
*
* @example
* <FormSliderField form={form} name="volume" label="Volume" validators={{ onChange }}>
* {(field, { sliderProps }) => <Slider min={0} max={100} step={1} {...sliderProps} />}
* </FormSliderField>
*/
declare function FormSliderField<TForm extends BoundForm, TName extends DeepKeysOfType<TForm['state']['values'], number>>(props: FormSliderFieldProps<TForm, TName>): React$1.JSX.Element;
//#endregion
//#region src/components/form-toggle-group-field.d.ts
/**
* Wiring bundle handed to a `FormToggleGroupField` child. Spread `toggleGroupProps` onto a DS
* `ToggleGroup` — this encodes the single-value ↔ `string[]` dance the multi-select primitive
* expects (last pressed item wins; cleared selection maps to `null`).
*
* No `id` here, unlike the single-control wrappers: a toggle group has several focusable items,
* not one, so there's no single target for the shell's `FieldLabel` `htmlFor` to focus — native
* `<label>` click-to-focus doesn't apply to grouped controls the way it does to a single input.
*/
type ToggleGroupControl = {
toggleGroupProps: {
value: string[];
onValueChange: (value: string[]) => void;
onBlur: () => void;
};
};
type FormToggleGroupFieldProps<TForm extends BoundForm, TName extends DeepKeysOfType<TForm['state']['values'], string | null>> = {
form: TForm;
name: TName;
label?: LabelProp;
description?: DescriptionProp;
children: (field: TypedField<string | null>, control: ToggleGroupControl) => React$1.ReactNode;
} & FieldBindingProps<TForm['state']['values'], TName> & NecessityProps & LayoutProps;
/**
* Single-select toggle-group field wrapper — same threaded-`form` typing and shared shell as
* `FormSelectField`, with a `toggleGroupProps` bundle. `name` is restricted to the form's
* **string | null** fields; the bundle converts to/from the `string[]` the multi-select
* primitive uses internally.
*
* @example
* <FormToggleGroupField form={form} name="align" label="Align" validators={{ onChange }}>
* {(field, { toggleGroupProps }) => (
* <ToggleGroup {...toggleGroupProps}>
* <ToggleGroupItem value="a">A</ToggleGroupItem>
* </ToggleGroup>
* )}
* </FormToggleGroupField>
*/
declare function FormToggleGroupField<TForm extends BoundForm, TName extends DeepKeysOfType<TForm['state']['values'], string | null>>(props: FormToggleGroupFieldProps<TForm, TName>): React$1.JSX.Element;
//#endregion
//#region src/form/field-errors.d.ts
/**
* Normalize a TanStack Form field's `meta.errors` into the `{ message }[]` shape
* that `@aircall/ds`'s `FieldError` expects.
*
* Errors come from two validator sources with different shapes:
* - per-field validators return plain strings (e.g. `'Email is required'`)
* - standard-schema validators (e.g. Zod on `useForm`) return issue **objects** with a `message`
*
* Both must render their human-readable text — never `"[object Object]"`.
*/
declare function toFieldErrors(errors: readonly unknown[]): Array<{
message: string;
}>;
//#endregion
//#region src/components/setting-card.d.ts
/**
* Root container for a setting card. Renders the DS `Card`.
*
* By default the level (and therefore the background) is detected automatically:
* a top-level card is level 1 (muted background, borderless); a card nested
* inside another card's `SettingCardContent` becomes level 2 (white background,
* border). Pass `level` to force a specific level — needed for the rare third
* nesting level, which reuses the level-1 look (`level={1}`).
*
* Pass `disabled` to dim the whole card and make its subtree non-interactive;
* the `Switch` or `Button` inside `SettingCardAction` needs no `disabled` of
* its own.
*
* @example
* ```tsx
* <SettingCard>
* <SettingCardHeader>
* <SettingCardTitle>Call recording</SettingCardTitle>
* <SettingCardDescription>Record inbound and outbound calls.</SettingCardDescription>
* <SettingCardAction>
* <Switch checked={enabled} onCheckedChange={setEnabled} />
* </SettingCardAction>
* </SettingCardHeader>
* {enabled && <SettingCardContent>…</SettingCardContent>}
* </SettingCard>
* ```
*
* @example
* ```tsx
* // With a save/discard bar: put the form on the OUTER level and drop
* // `form.CardSaveBar` in as the last child. It reads dirty/submitting/canSubmit
* // from form context, slides in when dirty, and carries `data-slot="card-footer"`
* // so the card flushes it to the edge automatically. No `className` needed.
* <form onSubmit={e => { e.preventDefault(); void form.handleSubmit(); }}>
* <SettingCard>
* <SettingCardHeader>
* <SettingCardTitle>Profile</SettingCardTitle>
* <SettingCardDescription>Update your display name.</SettingCardDescription>
* </SettingCardHeader>
* <SettingCardContent>…</SettingCardContent>
* <form.AppForm>
* <form.CardSaveBar resetLabel="Undo" />
* </form.AppForm>
* </SettingCard>
* </form>
* ```
*/
declare const SettingCard: React$1.ForwardRefExoticComponent<Omit<SettingCardProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
interface SettingCardProps extends React$1.ComponentProps<typeof Card> {
/**
* Force the visual level instead of auto-detecting from nesting.
* `1` = muted background, borderless. `2` = white background, border.
* Leave undefined to detect automatically (top-level → 1, nested → 2).
*/
level?: 1 | 2;
/**
* Dims the card to 50% and makes its entire subtree non-interactive via
* `inert`, so the `Switch` or `Button` inside `SettingCardAction` needs no
* `disabled` of its own.
*
* `inert` also removes the subtree from the accessibility tree. For a
* setting that must stay readable by a screen reader, leave this off and
* pass `disabled` to the individual controls instead.
*
* On React 18 the `inert` attribute is dropped, so pointer events are still
* blocked but keyboard activation is not — Tab and Space will reach the
* control. Pass `disabled` to the control as well if you support React 18.
*
* Don't set it on a nested card whose parent is already disabled — the
* opacities compound.
* @default false
*/
disabled?: boolean;
}
declare namespace SettingCard {
type Props = SettingCardProps;
}
/**
* Header row of a setting card. Wraps DS `CardHeader`, which lays out the
* title/description on the left and the `SettingCardAction` on the right.
*/
declare const SettingCardHeader: React$1.ForwardRefExoticComponent<Omit<SettingCardHeaderProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
interface SettingCardHeaderProps extends React$1.ComponentProps<typeof CardHeader> {}
declare namespace SettingCardHeader {
type Props = SettingCardHeaderProps;
}
/**
* Title of a setting card. Wraps DS `CardTitle`, overriding its type ramp so
* weight and size follow the card's level (auto-detected from nesting, like the
* background): level 1 is 18px bold, level 2 (nested) is 16px medium. A forced
* level-1 card that is still nested (the rare 3rd level) keeps the 16px-medium
* title, matching the design guidance for that case.
*/
declare const SettingCardTitle: React$1.ForwardRefExoticComponent<Omit<SettingCardTitleProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
interface SettingCardTitleProps extends React$1.ComponentProps<typeof CardTitle> {}
declare namespace SettingCardTitle {
type Props = SettingCardTitleProps;
}
/**
* Supporting description under the title. Wraps DS `CardDescription` (14px muted).
* Inline links (e.g. "Learn more") can be placed inside its children.
*/
declare const SettingCardDescription: React$1.ForwardRefExoticComponent<Omit<SettingCardDescriptionProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
interface SettingCardDescriptionProps extends React$1.ComponentProps<typeof CardDescription> {}
declare namespace SettingCardDescription {
type Props = SettingCardDescriptionProps;
}
/**
* Top-right control slot of the header — holds a single control, either a
* `<Switch>` (toggle card) or a `<Button>` (action card). Wraps DS `CardAction`.
* The two never co-occur, so this is one slot, not two.
*/
declare const SettingCardAction: React$1.ForwardRefExoticComponent<Omit<SettingCardActionProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
interface SettingCardActionProps extends React$1.ComponentProps<typeof CardAction> {}
declare namespace SettingCardAction {
type Props = SettingCardActionProps;
}
/**
* Body of a setting card. Wraps DS `CardContent` and carries the
* `data-setting-card-content` marker that drives nesting detection: any
* `SettingCard` rendered inside here auto-detects level 2.
*
* For progressive disclosure, render this conditionally — mount it only when
* the header's toggle is on — so gated fields never mount while disabled.
*/
declare const SettingCardContent: React$1.ForwardRefExoticComponent<Omit<SettingCardContentProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
interface SettingCardContentProps extends React$1.ComponentProps<typeof CardContent> {}
declare namespace SettingCardContent {
type Props = SettingCardContentProps;
}
//#endregion
//#region src/components/save-bar.d.ts
/**
* Headless animated save/discard bar — the shared UI behind `CardSaveBar`.
* Slides in when `isDirty`, collapses when clean (animates real content height
* via a grid-rows transition, so appear and disappear are both smooth).
*
* Form-library agnostic: wire the state yourself (via `form.Subscribe`, a store,
* or local state). Its root carries `data-slot="card-footer"`, so a surrounding
* `Card` collapses its bottom padding (`has-data-[slot=card-footer]:pb-0`) and
* the bar sits flush at the card edge. For TanStack Form, prefer `CardSaveBar`,
* which reads the state from context and renders this.
*
* @example
* // Note: `s.isDirty` is a sticky "ever touched" flag that stays true even after a
* // field is reverted to its original value — use `!s.isDefaultValue` (a live deep-equal
* // against defaultValues) so the bar hides once the form is back to baseline.
* <form.Subscribe selector={s => ({ isDirty: !s.isDefaultValue, isSubmitting: s.isSubmitting, canSubmit: s.canSubmit })}>
* {state => <SaveBar {...state} onReset={() => form.reset()} />}
* </form.Subscribe>
*/
type SaveBarProps = {
isDirty: boolean;
isSubmitting: boolean;
canSubmit: boolean;
onReset: () => void;
submitLabel?: string;
savingLabel?: string;
resetLabel?: string;
className?: string;
};
declare function SaveBar({ isDirty, isSubmitting, canSubmit, onReset, submitLabel, savingLabel, resetLabel, className }: SaveBarProps): import("react").JSX.Element;
//#endregion
//#region src/components/dashboard-sidebar-nav.d.ts
type DashboardSidebarNavSubmenuSeparator = {
kind: 'separator';
};
/** Section heading inside a dropdown submenu. */
type DashboardSidebarNavSubmenuGroupLabel = {
kind: 'label';
label: string;
};
type DashboardSidebarNavSubmenuLink = {
kind?: 'link';
label: string;
href?: string;
isActive?: boolean;
/** Trailing badge — rendered inside <DropdownMenuAddon>. */
badge?: React$1.ReactNode;
};
type DashboardSidebarNavSubmenuItem = DashboardSidebarNavSubmenuLink | DashboardSidebarNavSubmenuSeparator | DashboardSidebarNavSubmenuGroupLabel;
type DashboardSidebarNavItemBase = {
/** Stable key. */
id: string;
label: string;
/** Leading icon (required). */
icon: React$1.ReactNode;
isActive?: boolean;
/**
* Mutes the item visually (opacity, no hover) without removing interactivity.
* Use for upsell items that still need a tooltip or dropdown.
*/
disabled?: boolean;
/**
* Trailing badge (<ProfessionalBadge />, <BetaBadge />, etc.).
* Rendered inside <DashboardSidebarMenuAddon>. Hidden when collapsed.
*/
badge?: React$1.ReactNode;
/**
* Right-side action icon.
* - Active submenu items default to <ChevronRight />.
* - Disabled submenu items default to nothing — pass e.g. <LockKeyhole /> explicitly.
*/
action?: React$1.ReactNode;
/**
* Tooltip shown on hover. When set, wraps the button in a Tooltip.
* Pairs naturally with disabled + a lock action icon.
* Requires <TooltipProvider> in the tree (the DashboardSidebar stories decorator provides one).
*/
tooltip?: React$1.ReactNode;
};
/** Navigates on click. Renders as <a> (or custom element via `renderLink`). */
type DashboardSidebarNavItemLink = DashboardSidebarNavItemBase & {
kind: 'link';
href: string;
/** Count rendered as <DashboardSidebarMenuBadge>. Repositions when collapsed. */
count?: number;
};
/** Opens a dropdown submenu (sidebar-06 pattern). */
type DashboardSidebarNavItemSubmenu = DashboardSidebarNavItemBase & {
kind: 'submenu';
items: DashboardSidebarNavSubmenuItem[];
};
/** Fires a callback — e.g. opens a modal or command palette. */
type DashboardSidebarNavItemAction = DashboardSidebarNavItemBase & {
kind: 'action';
onClick: () => void;
count?: number;
};
type DashboardSidebarNavItem = DashboardSidebarNavItemLink | DashboardSidebarNavItemSubmenu | DashboardSidebarNavItemAction;
type DashboardSidebarNavGroup = {
id: string;
label?: string;
items: DashboardSidebarNavItem[];
};
type DashboardSidebarNavProps = {
groups: DashboardSidebarNavGroup[];
/**
* Custom link renderer — integrates with React Router, Next.js, etc.
* The returned element is passed to DashboardSidebarMenuButton's `render` prop.
*
* @example
* renderLink={(href) => <Link to={href} />}
*/
renderLink?: (href: string) => React$1.ReactElement;
};
/**
* Data-driven sidebar navigation. Maps a `groups` array into the
* `DashboardSidebar` primitives, rendering each item as a link, a dropdown
* submenu, or an action button (with optional badges, counts, and tooltips).
*
* Renders a fragment of `DashboardSidebarGroup` sections — it has no wrapper
* element of its own, so place it inside a `DashboardSidebarContent`.
*
* @example
* <DashboardSidebarNav
* groups={groups}
* renderLink={href => <Link to={href} />}
* />
*/
declare function DashboardSidebarNav({ groups, renderLink }: DashboardSidebarNavProps): React$1.JSX.Element;
//#endregion
//#region src/components/dashboard-sidebar.d.ts
/**
* Context provider and flex-row layout wrapping the sidebar and page content;
* renders a ds `SidebarProvider`. Provides the state consumed by `useDashboardSidebar`.
*
* @example
* ```tsx
* <DashboardSidebarProvider>
* <DashboardSidebar>
* <DashboardSidebarContent>
* <DashboardSidebarMenu>
* <DashboardSidebarMenuItem>
* <DashboardSidebarMenuButton icon={<Home />}>Home</DashboardSidebarMenuButton>
* </DashboardSidebarMenuItem>
* </DashboardSidebarMenu>
* </DashboardSidebarContent>
* </DashboardSidebar>
* <DashboardPageContent>…</DashboardPageContent>
* </DashboardSidebarProvider>
* ```
*/
declare const DashboardSidebarProvider: React$1.ForwardRefExoticComponent<Omit<DashboardSidebarProviderProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
interface DashboardSidebarProviderProps extends React$1.ComponentProps<typeof SidebarProvider> {}
declare namespace DashboardSidebarProvider {
type Props = DashboardSidebarProviderProps;
}
/**
* Root sidebar column that grows/shrinks with the collapse state; renders a `<div>`.
* Holds `DashboardSidebarHeader`, `DashboardSidebarContent`, and `DashboardSidebarFooter`.
*/
declare const DashboardSidebar: React$1.ForwardRefExoticComponent<Omit<DashboardSidebarProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
interface DashboardSidebarProps extends React$1.ComponentProps<'div'> {}
declare namespace DashboardSidebar {
type Props = DashboardSidebarProps;
}
/**
* Top bar of the sidebar that houses the collapse toggle; renders a `<div>`.
*/
declare const DashboardSidebarHeader: React$1.ForwardRefExoticComponent<Omit<DashboardSidebarHeaderProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
interface DashboardSidebarHeaderProps extends React$1.ComponentProps<'div'> {}
declare namespace DashboardSidebarHeader {
type Props = DashboardSidebarHeaderProps;
}
/**
* Collapse/expand toggle rendering a ghost, icon ds `Button`; renders a `<button>`.
* Swaps its icon and aria-label based on the sidebar state.
*/
declare const DashboardSidebarTrigger: React$1.ForwardRefExoticComponent<Omit<DashboardSidebarTriggerProps, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
interface DashboardSidebarTriggerProps extends React$1.ComponentProps<typeof Button> {}
declare namespace DashboardSidebarTrigger {
type Props = DashboardSidebarTriggerProps;
}
/**
* Scrollable middle section of the sidebar (scrollbar hidden); renders a `<div>`.
*/
declare const DashboardSidebarContent: React$1.ForwardRefExoticComponent<Omit<DashboardSidebarContentProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
interface DashboardSidebarContentProps extends React$1.ComponentProps<'div'> {}
declare namespace DashboardSidebarContent {
type Props = DashboardSidebarContentProps;
}
/**
* Frosted-glass bottom section of the sidebar; renders a `<div>`.
*/
declare const DashboardSidebarFooter: React$1.ForwardRefExoticComponent<Omit<DashboardSidebarFooterProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
interface DashboardSidebarFooterProps extends React$1.ComponentProps<'div'> {}
declare namespace DashboardSidebarFooter {
type Props = DashboardSidebarFooterProps;
}
/**
* Groups a set of menu items (optionally labelled); renders a `<div>`.
*/
declare const DashboardSidebarGroup: React$1.ForwardRefExoticComponent<Omit<DashboardSidebarGroupProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
interface DashboardSidebarGroupProps extends React$1.ComponentProps<'div'> {}
declare namespace DashboardSidebarGroup {
type Props = DashboardSidebarGroupProps;
}
/**
* Section heading for a group, hidden when the sidebar is collapsed; renders a `<div>`
* by default, overridable via the `render` prop.
*/
declare const DashboardSidebarGroupLabel: React$1.ForwardRefExoticComponent<Omit<DashboardSidebarGroupLabelProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
type DashboardSidebarGroupLabelProps = useRender.ComponentProps<'div'> & React$1.ComponentProps<'div'>;
declare namespace DashboardSidebarGroupLabel {
type Props = DashboardSidebarGroupLabelProps;
}
/**
* List container for menu items; renders a `<ul>`.
*/
declare const DashboardSidebarMenu: React$1.ForwardRefExoticComponent<Omit<DashboardSidebarMenuProps, "ref"> & React$1.RefAttributes<HTMLUListElement>>;
interface DashboardSidebarMenuProps extends React$1.ComponentProps<'ul'> {}
declare namespace DashboardSidebarMenu {
type Props = DashboardSidebarMenuProps;
}
/**
* Wrapper for a single menu row; renders a `<li>` (relative, for badge positioning).
*/
declare const DashboardSidebarMenuItem: React$1.ForwardRefExoticComponent<Omit<DashboardSidebarMenuItemProps, "ref"> & React$1.RefAttributes<HTMLLIElement>>;
interface DashboardSidebarMenuItemProps extends React$1.ComponentProps<'li'> {}
declare namespace DashboardSidebarMenuItem {
type Props = DashboardSidebarMenuItemProps;
}
/**
* Pill-shaped navigation item with a leading icon circle and optional trailing action;
* renders a `<button>` by default, overridable via the `render` prop (e.g. a router `<Link>`).
*/
declare const DashboardSidebarMenuButton: React$1.ForwardRefExoticComponent<Omit<DashboardSidebarMenuButtonProps, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
type DashboardSidebarMenuButtonProps = useRender.ComponentProps<'button'> & React$1.ComponentProps<'button'> & {
isActive?: boolean;
/** Visual-only disabled state. The button remains clickable (e.g. to show an
* upgrade dialog). Does NOT forward to the HTML disabled attribute. */
disabled?: boolean;
icon?: React$1.ReactNode;
/**
* Trailing "addon" rendered after the label span — mirrors the InputGroup
* right-addon pattern. Typically a chevron, lock, or similar icon.
* Hidden automatically when the sidebar is collapsed.
*
* @example
* <DashboardSidebarMenuButton icon={<Bot />} action={<ChevronRight />}>
* AI Agents
* </DashboardSidebarMenuButton>
*/
action?: React$1.ReactNode;
};
declare namespace DashboardSidebarMenuButton {
type Props = DashboardSidebarMenuButtonProps;
}
/**
* Right-aligned slot (ml-auto) for trailing content inside a menu row; renders a `<div>`.
*/
declare const DashboardSidebarMenuAddon: React$1.ForwardRefExoticComponent<Omit<DashboardSidebarMenuAddonProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
interface DashboardSidebarMenuAddonProps extends React$1.ComponentProps<'div'> {}
declare namespace DashboardSidebarMenuAddon {
type Props = DashboardSidebarMenuAddonProps;
}
/**
* Notification count badge for a menu item; renders a ds `CounterBadge` positioned
* absolutely at the row's right edge (moves to the icon corner when collapsed).
* Place it inside `DashboardSidebarMenuItem`, as a sibling of the button.
*/
declare const DashboardSidebarMenuBadge: React$1.ForwardRefExoticComponent<Omit<DashboardSidebarMenuBadgeProps, "ref"> & React$1.RefAttributes<HTMLSpanElement>>;
interface DashboardSidebarMenuBadgeProps extends React$1.ComponentProps<typeof CounterBadge> {}
declare namespace DashboardSidebarMenuBadge {
type Props = DashboardSidebarMenuBadgeProps;
}
/**
* Popover-style panel (white card with border and shadow) opening beside a trigger;
* renders a `<div>`. Hosts `DashboardSidebarSubmenuItem` and `DashboardSidebarSubmenuSeparator`.
*/
declare const DashboardSidebarSubmenu: React$1.ForwardRefExoticComponent<Omit<DashboardSidebarSubmenuProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
interface DashboardSidebarSubmenuProps extends React$1.ComponentProps<'div'> {}
declare namespace DashboardSidebarSubmenu {
type Props = DashboardSidebarSubmenuProps;
}
/**
* One row inside a submenu; renders a `<div>` by default, overridable via the `render`
* prop (e.g. an `<a>` or router `<Link>` for navigation).
*/
declare const DashboardSidebarSubmenuItem: React$1.ForwardRefExoticComponent<Omit<DashboardSidebarSubmenuItemProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
type DashboardSidebarSubmenuItemProps = useRender.ComponentProps<'div'> & React$1.ComponentProps<'div'> & {
isActive?: boolean;
};
declare namespace DashboardSidebarSubmenuItem {
type Props = DashboardSidebarSubmenuItemProps;
}
/**
* Thin horizontal divider between submenu items; renders a `<div>`.
*/
declare const DashboardSidebarSubmenuSeparator: React$1.ForwardRefExoticComponent<DashboardSidebarSubmenuSeparatorProps & React$1.RefAttributes<HTMLDivElement>>;
interface DashboardSidebarSubmenuSeparatorProps {
className?: string;
}
declare namespace DashboardSidebarSubmenuSeparator {
type Props = DashboardSidebarSubmenuSeparatorProps;
}
//#endregion
//#region src/components/days-picker.d.ts
/**
* Day of week key -- fixed Mon->Sun order per Figma spec.
* Owned by `@aircall/blocks` (DaysPicker lives here, not in `@aircall/ds`).
*/
type DayOfWeek = 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat' | 'sun';
/**
* A row of 7 independently-toggleable day buttons (Mon -> Sun), built directly on
* the DS `ToggleGroup` primitive (multiple mode, always multi-select).
*
* Localizes internally via the blocks i18n instance (`useDsTranslation('blocks')`):
* single-letter visible labels and full-name `aria-label` values are derived from
* `daysPicker.*` keys in the blocks i18n namespace. Supports en / fr / es / de / it.
*
* Supports controlled (`value` + `onValueChange`) and uncontrolled (`defaultValue`) modes,
* mirroring `ToggleGroup`.
*
* @example
* ```tsx
* import { DaysPicker, type DayOfWeek } from '@aircall/blocks';
*
* // Localized out of the box -- no labels prop needed
* const [days, setDays] = React.useState<DayOfWeek[]>(['mon', 'wed', 'fri']);
* <DaysPicker value={days} onValueChange={setDays} />
* ```
*/
declare const DaysPicker: React$1.ForwardRefExoticComponent<Omit<DaysPickerProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
/**
* Props for the `DaysPicker` component.
*
* Extends `ToggleGroup` props, omitting the props that `DaysPicker` controls
* internally (`value`, `defaultValue`, `onValueChange`, `children`, `multiple`).
*/
interface DaysPickerProps extends Omit<React$1.ComponentProps<typeof ToggleGroup>, 'value' | 'defaultValue' | 'onValueChange' | 'children' | 'multiple'> {
/**
* Currently selected days (controlled).
* Pass an empty array for no selection.
*/
value?: DayOfWeek[];
/**
* Initially selected days (uncontrolled).
*/
defaultValue?: DayOfWeek[];
/**
* Called when the selection changes. Receives the full updated list of selected days.
*/
onValueChange?: (days: DayOfWeek[]) => void;
/**
* Disables all day toggles.
* @default false
*/
disabled?: boolean;
/**
* Visible label length. `letter` renders a single letter from the blocks translations;
* `short` renders the locale's own abbreviation via `Intl` (`Mon`, `lun.`, `Mo`).
* The `aria-label` is the full day name either way.
* @default 'letter'
*/
labelFormat?: 'letter' | 'short';
/**
* Prefix for `data-testid` attributes on each toggle button.
* Results in: `data-testid="${testIdPrefix}-mon"`, `data-testid="${testIdPrefix}-tue"`, etc.
* @default 'days-picker'
*/
testIdPrefix?: string;
}
declare namespace DaysPicker {
type Props = DaysPickerProps;
}
//#endregion
//#region src/components/wizard.d.ts
/** Describes one step of a wizard: identity and copy, never behaviour. */
interface WizardStepDefinition extends StepDefinition {
/** Step heading, rendered by `WizardStepTitle`. Mandatory by design rule. */
title: string;
/** Marks the step skippable, which is what makes `WizardSkip` render. */
optional?: boolean;
}
/** `'pending'` while an async navigation guard is in flight. */
type WizardStatus = 'idle' | 'pending';
interface WizardContextValue {
/** The visible steps, in order. Conditional flows pass an already-filtered array. */
steps: WizardStepDefinition[];
/** The step matching `activeId`. */
activeStep: WizardStepDefinition;
activeId: string;
/** 0-based position of the active step within `steps`. */
index: number;
/** `steps.length`, i.e. the "of N" the counter shows. */
count: number;
isFirst: boolean;
isLast: boolean;
status: WizardStatus;
/** Publishes guard pending-ness so every nav control can disable while one runs. */
setStatus: (status: WizardStatus) => void;
/**
* The active step id at call time. A guard that awaits needs to know whether the
* flow moved while it ran, which a captured `activeId` cannot tell it.
*/
getActiveStepId: () => string | undefined;
/** Ids the user skipped, so a completeness check can exclude them. */
skipped: ReadonlySet<string>;
/** Goes back one step. Runs no guard: rule 3 says Back never re-validates. */
back: () => void;
/** Advances one step. Pure navigation, runs no guard. */
next: () => void;
/** Advances one step and records the current id in `skipped`. */
skip: () => void;
/** Jumps to any step. Sanctioned use is "edit this section" links on a review step. */
goTo: (id: string) => void;
/** Calls the `onComplete` passed to `Wizard`. */
complete: () => void;
}
/**
* Reads the current `Wizard` context: step list, position, navigation and status.
* Use it to drive your own controls when `WizardBack` / `WizardNext` and friends
* do not fit - that is a first-class option, not an escape hatch.
*
* @throws if used outside a `Wizard`.
*/
declare function useWizard(): WizardContextValue;
/**
* Root of a wizard flow. Renders no DOM: it provides step state to `WizardLayout`,
* to the navigation controls, and to anything else on the page that needs the
* flow's position (typically a Publish button in the page header).
*
* @example
* ```tsx
* <Wizard steps={steps} onComplete={() => form.handleSubmit()}>
* <DashboardStandalonePage>…<WizardLayout>…</WizardLayout>…</DashboardStandalonePage>
* </Wizard>
* ```
*/
declare function Wizard(componentProps: Wizard.Props): React$1.JSX.Element;
interface WizardProps {
/**
* The visible steps, in order. Conditional flows filter this array themselves,
* so the step count and the progress segments follow automatically.
*/
steps: WizardStepDefinition[];
/** Active step id for controlled usage. */
value?: string;
/**
* Initially active step id for uncontrolled usage.
* @default steps[0]?.id
*/
defaultValue?: string;
/** Called with the new step id whenever the active step changes. */
onValueChange?: (value: string) => void;
/** Called by `WizardComplete` (and `useWizard().complete()`). */
onComplete?: () => void;
children?: React$1.ReactNode;
}
declare namespace Wizard {
type Props = WizardProps;
}
/**
* Grid that arranges `WizardMain`, `WizardAside` and `WizardActions`, and mounts the
* underlying ds `Stepper`; renders a `<div>` (the grid) inside the Stepper's `<div>`.
* Place it inside the page's scroll area.
*/
declare const WizardLayout: React$1.ForwardRefExoticComponent<Omit<WizardLayoutProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
interface WizardLayoutProps extends Omit<Stepper.Props, 'steps' | 'value' | 'defaultValue' | 'onValueChange'> {}
declare namespace WizardLayout {
type Props = WizardLayoutProps;
}
/**
* The step column: progress, step header, step bodies. Scrolls independently of
* `WizardAside` on wide layouts and resets to the top on step change; renders a `<div>`.
*/
declare const WizardMain: React$1.ForwardRefExoticComponent<Omit<WizardMainProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
interface WizardMainProps extends React$1.ComponentProps<'div'> {}
declare namespace WizardMain {
type Props = WizardMainProps;
}
/**
* Optional secondary column for contextual help or a summary card; renders a `<div>`.
* Put any ds `Card` inside it.
*
* On wide layouts it sticks to the top of the nearest scrolling ancestor, so it needs the
* wizard to sit inside a scroll area (`DashboardStandalonePageMain` is one). Without one
* it simply scrolls with the page.
*/
declare const WizardAside: React$1.ForwardRefExoticComponent<Omit<WizardAsideProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
interface WizardAsideProps extends React$1.ComponentProps<'div'> {}
declare namespace WizardAside {
type Props = WizardAsideProps;
}
/**
* Action row for the step: Back on the left, the rest on the right; renders a `<div>`.
* Sits after the step content, inside the page's single scroll area.
*/
declare const WizardActions: React$1.ForwardRefExoticComponent<Omit<WizardActionsProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
interface WizardActionsProps extends React$1.ComponentProps<'div'> {}
declare namespace WizardActions {
type Props = WizardActionsProps;
}
/**
* Progress segments plus the "Step x of y" line, both derived from the wizard's
* step list; renders a `<div>`. Non-interactive by design: it reports position,
* it is not navigation. Must sit inside `WizardLayout`, which mounts the ds `Stepper`.
*/
declare const WizardProgress: React$1.ForwardRefExoticComponent<Omit<WizardProgressProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
interface WizardProgressProps extends React$1.ComponentProps<'div'> {}
declare namespace WizardProgress {
type Props = WizardProgressProps;
}
/**
* Title and description of the active step; renders a `<div>`. With no children it
* renders `WizardStepTitle` and `WizardStepDescription` from the step definition.
*/
declare const WizardStepHeader: React$1.ForwardRefExoticComponent<Omit<WizardStepHeaderProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
interface WizardStepHeaderProps extends React$1.ComponentProps<'div'> {}
declare namespace WizardStepHeader {
type Props = WizardStepHeaderProps;
}
/**
* Heading of the active step, and the focus target when the step changes; renders an `<h2>`.
* Falls back to `activeStep.title` when given no children.
*/
declare const WizardStepTitle: React$1.ForwardRefExoticComponent<Omit<WizardStepTitleProps, "ref"> & React$1.RefAttributes<HTMLHeadingElement>>;
interface WizardStepTitleProps extends React$1.ComponentProps<'h2'> {}
declare namespace WizardStepTitle {
type Props = WizardStepTitleProps;
}
/**
* Sub-heading of the active step; renders a `<p>`, or nothing when the step has no
* description and no children.
*/
declare const WizardStepDescription: React$1.ForwardRefExoticComponent<Omit<WizardStepDescriptionProps, "ref"> & React$1.RefAttributes<HTMLParagraphElement>>;
interface WizardStepDescriptionProps extends React$1.ComponentProps<'p'> {}
declare namespace WizardStepDescription {
type Props = WizardStepDescriptionProps;
}
/**
* One section of a step: a ds `Card` exposed as a labelled group; renders a `<div>`.
* Compose it with `WizardSectionHeader` / `WizardSectionTitle` / `WizardSectionDescription`
* / `WizardSectionContent`, or with the ds `Card` parts directly when you do not need
* the heading - in that case it stays a plain card rather than a labelled group, since
* a group with no accessible name is noise. Pass your own `aria-label` to name one
* anyway.
*
* @example
* ```tsx
* <WizardSection>
* <WizardSectionHeader>
* <WizardSectionTitle>Campaign identity</WizardSectionTitle>
* <WizardSectionDescription>Name and describe it.</WizardSectionDescription>
* </WizardSectionHeader>
* <WizardSectionContent>…fields…</WizardSectionContent>
* </WizardSection>
* ```
*/
declare const WizardSection: React$1.ForwardRefExoticComponent<Omit<WizardSectionProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
type WizardSectionProps = Omit<React$1.ComponentProps<typeof Card>, 'size'>;
declare namespace WizardSection {
type Props = WizardSectionProps;
}
/** Header row of a section; renders the ds `CardHeader` `<div>`. */
declare const WizardSectionHeader: React$1.ForwardRefExoticComponent<Omit<import("@aircall/ds/components/card").CardHeaderProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
/**
* Heading of a section, and the label its group is named by; renders an `<h3>` carrying
* the ds card-title styling, so `CardHeader`'s layout rules still apply.
*/
declare const WizardSectionTitle: React$1.ForwardRefExoticComponent<Omit<WizardSectionTitleProps, "ref"> & React$1.RefAttributes<HTMLHeadingElement>>;
interface WizardSectionTitleProps extends React$1.ComponentProps<'h3'> {}
declare namespace WizardSectionTitle {
type Props = WizardSectionTitleProps;
}
/** Supporting copy under a section title; renders the ds `CardDescription` `<div>`. */
declare const WizardSectionDescription: React$1.ForwardRefExoticComponent<Omit<import("@aircall/ds/components/card").CardDescriptionProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
/**
* Body of a section; renders the ds `CardContent` `<div>`. Use `WizardSectionFields`
* when the body is a form.
*/
declare const WizardSectionContent: React$1.ForwardRefExoticComponent<Omit<import("@aircall/ds/components/card").CardContentProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
/** Body of a section made of form fields, wrapped in a ds `FieldGroup`; renders a `<div>`. */
declare const WizardSectionFields: React$1.ForwardRefExoticComponent<Omit<WizardSectionFieldsProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
interface WizardSectionFieldsProps extends React$1.ComponentProps<typeof CardContent> {}
declare namespace WizardSectionFields {
type Props = WizardSectionFieldsProps;
}
/**
* Body of one step, shown when its `value` matches the active step; renders a `<div>`
* (or nothing when inactive). Put the step's `WizardSection`s inside it. Must sit inside
* `WizardLayout`, which mounts the ds `Stepper`.
*/
declare const WizardStep: React$1.ForwardRefExoticComponent<Omit<WizardStepProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
interface WizardStepProps extends React$1.ComponentProps<typeof StepperContent> {}
declare namespace WizardStep {
type Props = WizardStepProps;
}
/**
* Back button, disabled on the first step; renders a ds `Button` (ghost). Runs no
* validation unless you pass `onBeforeBack` - rule 3 is that going back never
* re-triggers validation.
*/
declare const WizardBack: React$1.ForwardRefExoticComponent<Omit<WizardBackProps, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
interface WizardBackProps extends Omit<React$1.ComponentProps<typeof Button>, 'type'> {
/**
* Return `false` to stay on the current step, e.g. after a "discard changes?" confirm.
* Throwing also stays put and surfaces to the nearest error boundary.
*/
onBeforeBack?: () => boolean | Promise<boolean>;
}
declare namespace WizardBack {
type Props = WizardBackProps;
}
/**
* Skip button; renders a ds `Button` (ghost) only when the active step is `optional`,
* and nothing otherwise. Skipping never validates and never affects other steps: the
* step id lands in `useWizard().skipped` so a completeness check can exclude it.
*/
declare const WizardSkip: React$1.ForwardRefExoticComponent<Omit<WizardSkipProps, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
interface WizardSkipProps extends Omit<React$1.ComponentProps<typeof Button>, 'type'> {}
declare namespace WizardSkip {
type Props = WizardSkipProps;
}
/**
* Next button; renders a ds `Button`, and nothing on the last step (where
* `WizardComplete` takes over). Pass `onBeforeNext` to gate the move: returning
* `false` keeps the user here, which is how validation errors get surfaced by the
* step's own fields rather than by the wizard.
*
* @example
* ```tsx
* <WizardNext onBeforeNext={async () => (await form.validateAllFields('submit')).length === 0} />
* ```
*/
declare const WizardNext: React$1.ForwardRefExoticComponent<Omit<WizardNextProps, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
interface WizardNextProps extends Omit<React$1.ComponentProps<typeof Button>, 'type'> {
/**
* Return `false` (or a promise resolving `false`) to block the advance. Throwing also
* blocks it and surfaces to the nearest error boundary; catch inside the guard and
* return `false` to handle the failure yourself.
*/
onBeforeNext?: () => boolean | Promise<boolean>;
}
declare namespace WizardNext {
type Props = WizardNextProps;
}
/**
* Primary CTA that finishes the flow (Publish, Launch, Create); renders a ds `Button`.
* Shows on the last step only, unless `always` is set - the page header instance
* passes `always` so the CTA is present throughout the flow. Its enabled state is
* yours: pass `disabled`, since only the product knows what "complete" means.
*/
declare const WizardComplete: React$1.ForwardRefExoticComponent<Omit<WizardCompleteProps, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
interface WizardCompleteProps extends Omit<React$1.ComponentProps<typeof Button>, 'type'> {
/**
* Render on every step, not just the last one. Use it for the page-header instance.
* @default false
*/
always?: boolean;
}
declare namespace WizardComplete {
type Props = WizardCompleteProps;
}
//#endregion
//#region src/components/bubble/bubble.d.ts
/**
* `class-variance-authority` config for {@link Bubble}. `variant` (`neutral`
* | `info` | `critical` | `success`, default `neutral`) sets `BubbleContent`'s
* surface background/border via a descendant selector, and cascades into
* `BubbleIcon`'s fill and `BubbleTitle`'s text colour the same way - moved
* here from `BubbleContent` itself (spec §10) so the `data-variant` the root
* `Bubble` carries is readable by every sibling of `BubbleContent`
* (`BubbleSenderLabel`, `BubbleQuickActions`, `BubbleHint`, `BubbleMeta`) via
* e.g. an `in-data-[variant=critical]:` rule - the same idiom
* `BubbleSenderLabel` already uses for `in-data-[align=end]` - without any of
* those siblings inheriting the tint themselves, since the selectors below
* only ever target `[data-slot=bubble-content]`/`bubble-icon`/`bubble-title`.
* Colours are Figma-literal, not `Alert`-derived (spec §12 - a Phase 6 audit
* reversal). Every variant's border is the flat neutral `border-border`
* (`base/border` #e4e6ea), because that is the token Figma binds on every
* message, AIVA and inbound-call state; the earlier tinted `border-info/35` /
* `border-success/35` came from `alertVariants`, not from this node, and
* matched nothing in it. `BubbleIcon` is the variant token at 40% (`bg-*\/40`)
* with the glyph in that same token at full strength, which is how Figma paints
* it (a white 60% film - `alpha/40` - over a solid variant fill); expressing it
* as alpha-on-a-token rather than the previous hardcoded
* `rgba(255,255,255,0.16)` film is also what makes it survive a theme flip,
* since a literal cannot.
*/
declare const bubbleVariants: (props?: ({
variant?: "info" | "success" | "neutral" | "critical" | null | undefined;
clickable?: boolean | null | undefined;
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
/**
* Root row of a conversation-timeline item. Owns thread-edge alignment, the
* click target, the hover context that reveals `BubbleQuickActions`, and (as
* of spec §10) the `variant` that tints `BubbleContent`.
*
* Pass `clickTarget` to make the whole bubble one click target - "open the call
* details sheet" and the like. It renders an absolutely positioned `<button>`
* **sibling** covering the sender-label/content/meta stack, with every
* interactive descendant raised above it, and switches on the Figma Hover and
* Active treatments (spec §14). One prop carries both the handler and the
* button's accessible name so the affordance and the action cannot drift apart;
* without it the bubble is inert and stays visually static, because a bubble
* that lights up under the cursor and then does nothing is a false affordance.
* The `<div>`'s own `onClick` is untouched and still passes through.
*
* Renders a `<div>` as a 2-column CSS grid, sized to fit its own content
* (`w-fit`) rather than stretching to its parent's width. `BubbleContent` and
* `BubbleHint` auto-place into column 1 / column 2 in document order, so they
* share a row exactly as wide as themselves; `BubbleSenderLabel` and
* `BubbleMeta` span both columns (`col-span-2`), so they render **exactly** as
* wide as `BubbleContent` + `BubbleHint` together, never the width of
* `Bubble`'s own parent (spec §10 - the previous flex-wrap layout let a
* `w-full` sender label or meta row stretch to the surrounding timeline
* container instead of the bubble itself). Edge alignment is `ml-auto` /
* `mr-auto`, not `justify-content` - `justify-content` only aligns content
* *inside* a box, and once `Bubble` is content-sized there is no leftover
* space inside it to justify; pushing the whole content-sized box to one
* edge of its own parent is a margin-auto job. Direct children are
* `BubbleSenderLabel`, `BubbleQuickActions`, `BubbleContent`, `BubbleHint`
* and `BubbleMeta` - all siblings, in that order (see spec §3.3).
*
* @example
* ```tsx
* <Bubble align="end" variant="info">
* <BubbleContent>
* <BubbleText>Sure, sending it right now</BubbleText>
* </BubbleContent>
* </Bubble>
*
* <Bubble
* align="start"
* variant="info"
* clickTarget={{ label: 'Open call details', onClick: openDetailsSheet }}
* >
* <BubbleContent>…</BubbleContent>
* </Bubble>
* ```
*/
declare const Bubble: React$1.ForwardRefExoticComponent<Omit<BubbleProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
/**
* Props for {@link Bubble} - `<div>` props plus the required `align` and the
* `bubbleVariants` `variant` (moved here from `BubbleContent`, spec §10).
*/
interface BubbleProps extends React$1.ComponentProps<'div'>, Omit<VariantProps<typeof bubbleVariants>, 'clickable'> {
/** Which edge of the thread this bubble hugs. No default - always pass one. */
align: 'start' | 'end';
/**
* Makes the whole bubble one click target and switches on the Figma Hover and
* Active treatments (spec §14). Omit it and the bubble is inert: no pointer
* cursor, no hover surface, no tab stop.
*
* Deliberately one object rather than a handler plus a separate `clickable`
* boolean - the affordance and the action are the same fact, and two props
* would let them drift. `label` is required, not optional: the overlay button
* renders no content of its own, so without it a screen reader announces an
* unnamed button.
*/
clickTarget?: BubbleClickTarget;
}
/** The action behind {@link BubbleProps.clickTarget}. */
interface BubbleClickTarget {
/** Accessible name for the overlay button, e.g. `'Open call details'`. */
label: string;
onClick: React$1.MouseEventHandler<HTMLButtonElement>;
}
declare namespace Bubble {
type Props = BubbleProps;
type ClickTarget = BubbleClickTarget;
}
/**
* Rule-Today-rule row that groups a run of `Bubble`s in a conversation
* timeline. Renders a `<div>` with a `<hr>`-like rule either side of
* `children`. NOT nested inside `Bubble` - it is a sibling of a run of
* `Bubble`s in the consumer's own thread/list container, the same
* timeline-level chrome as the day separator any messaging UI needs.
* Previously left unbuilt as "resolved, not escalated" (spec §9); rebuilt as
* a real part once a story had to hand-roll it to demonstrate a timeline
* (spec §10).
*
* @example
* ```tsx
* <BubbleDaySeparator>Today</BubbleDaySeparator>
* <Bubble align="start">…</Bubble>
* <Bubble align="end">…</Bubble>
* ```
*/
declare const BubbleDaySeparator: React$1.ForwardRefExoticComponent<Omit<BubbleDaySeparatorProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
interface BubbleDaySeparatorProps extends React$1.ComponentProps<'div'> {}
declare namespace BubbleDaySeparator {
type Props = BubbleDaySeparatorProps;
}
/**
* Sender/participant name shown above the bubble. Renders a `<div>` in small
* muted text. Optional - most bubbles in a single-participant thread omit it.
*
* @example
* ```tsx
* <BubbleSenderLabel>John Doe</BubbleSenderLabel>
* ```
*/
declare const BubbleSenderLabel: React$1.ForwardRefExoticComponent<Omit<BubbleSenderLabelProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
interface BubbleSenderLabelProps extends React$1.ComponentProps<'div'> {}
declare namespace BubbleSenderLabel {
type Props = BubbleSenderLabelProps;
}
/**
* Hover-reveal toolbar (copy / download / reply) overlaid on the top-right
* corner of `BubbleContent` - 8px in from that surface's top and right edges,
* matching Figma's `State=Hover` frame (`27904:8247`), and anchored to
* `BubbleContent`'s own grid cell rather than to the row, so it stays put on a
* bubble that also renders `BubbleHint`/`BubbleSenderLabel`/`BubbleMeta` (see
* the `col-end-2`/`row-end-3` note on `Bubble`'s className).
* Renders a `<div>`, `opacity-0` fading to `opacity-100` while any
* descendant of `Bubble` is hovered or focused - CSS only, no JS state.
* `pointer-events-none` while hidden (paired `pointer-events-auto` on
* reveal) so the invisible toolbar never intercepts clicks meant for the
* bubble underneath it - the same guard `EngagementPreviewBubble`
* (conversations-ui) already applies to its equivalent toolbar (spec §11).
* Consumer composes DS `<Button variant="ghost" size="icon">` (+ `<Tooltip>`)
* children directly; there is no `actions: Action[]` descriptor prop
* (spec §3.4).
*
* @example
* ```tsx
* <BubbleQuickActions>
* <Button variant="ghost" size="icon" aria-label="Copy"><Copy /></Button>
* </BubbleQuickActions>
* ```
*/
declare const BubbleQuickActions: React$1.ForwardRefExoticComponent<Omit<BubbleQuickActionsProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
interface BubbleQuickActionsProps extends React$1.ComponentProps<'div'> {}
declare namespace BubbleQuickActions {
type Props = BubbleQuickActionsProps;
}
/**
* The colored/bordered surface that carries the bubble's content. Renders a
* `<div>`. The only required child besides `Bubble` itself (spec §3).
* Background/border tint (`variant`) is no longer a prop here - it lives on
* the parent `Bubble` and reaches this part via a descendant selector in
* {@link bubbleVariants}, so `Bubble`'s other children can never inherit it
* (spec §10). Every other anatomy part nests inside `BubbleContent`, in the
* order documented in spec §3.1.
*
* @example
* ```tsx
* <Bubble align="end" variant="critical">
* <BubbleContent>
* <BubbleText>Aircall is more than a business phone...</BubbleText>
* <BubbleErrorMessage icon={<CircleAlert />}>Not delivered.</BubbleErrorMessage>
* </BubbleContent>
* </Bubble>
* ```
*/
declare const BubbleContent: React$1.ForwardRefExoticComponent<Omit<BubbleContentProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
/** Props for {@link BubbleContent} - plain `<div>` props; `variant` lives on {@link Bubble} (spec §10). */
interface BubbleContentProps extends React$1.ComponentProps<'div'> {}
declare namespace BubbleContent {
type Props = BubbleContentProps;
}
/**
* Header region of `BubbleContent`, siblings of the content and
* {@link BubbleFooter} regions (spec §10 - mirrors `CardHeader`'s split from
* `CardContent`/`CardFooter`). Renders a `<div>` as a two-column grid: a
* {@link BubbleIcon} in column 1 (spanning both rows only when a
* {@link BubbleSubtitle} is present), a stacked {@link BubbleTitle} /
* `BubbleSubtitle` pair in column 2. Pass `action` for a trailing element
* (menu button, timestamp) - not a child, matching the `action`-prop-over-
* children pattern in `packages/blocks/AGENTS.md`.
*
* @example
* ```tsx
* <BubbleHeader>
* <BubbleIcon><PhoneOutgoing /></BubbleIcon>
* <BubbleTitle>Call ended</BubbleTitle>
* <BubbleSubtitle><span>made by Alex Finn</span><span>01:23</span></BubbleSubtitle>
* </BubbleHeader>
* ```
*/
declare const BubbleHeader: React$1.ForwardRefExoticComponent<Omit<BubbleHeaderProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
/** Props for {@link BubbleHeader} - `<div>` props plus a trailing `action` slot. */
interface BubbleHeaderProps extends React$1.ComponentProps<'div'> {
/** Trailing element (menu button, timestamp) - not a child, see the component's JSDoc. */
action?: React$1.ReactNode;
}
declare namespace BubbleHeader {
type Props = BubbleHeaderProps;
}
/**
* 32px icon-avatar circle for call/system bubbles. Renders a `<div>`; the
* consumer passes the icon as `children`. Background colour is **not** a
* prop - it reads the parent `Bubble`'s `variant` via a descendant selector
* on `bubbleVariants` (spec §5 - moved there from `BubbleContent` in spec
* §10), so it can never disagree with the bubble's own variant.
*
* @example
* ```tsx
* <BubbleIcon><PhoneOutgoing /></BubbleIcon>
* ```
*/
declare const BubbleIcon: React$1.ForwardRefExoticComponent<Omit<BubbleIconProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
interface BubbleIconProps extends React$1.ComponentProps<'div'> {}
declare namespace BubbleIcon {
type Props = BubbleIconProps;
}
/**
* 14px semibold call/system-bubble headline ("Call ended", "Voicemail"...).
* Renders a `<div>`. Present whenever `BubbleIcon` is. Not Figma's "Title"
* layer - see `BubbleSectionLabel` and spec §7 #4 for that naming conflict.
*
* @example
* ```tsx
* <BubbleTitle>Call ended</BubbleTitle>
* ```
*/
declare const BubbleTitle: React$1.ForwardRefExoticComponent<Omit<BubbleTitleProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
interface BubbleTitleProps extends React$1.ComponentProps<'div'> {}
declare namespace BubbleTitle {
type Props = BubbleTitleProps;
}
/**
* Bullet-joined secondary line under `BubbleTitle` (e.g. "made by X • 01:23").
* Renders a `<div>`; direct children are auto-joined with `•` via CSS - no
* manual separator markup.
*
* @example
* ```tsx
* <BubbleSubtitle>
* <span>made by Alex Finn</span>
* <span>01:23</span>
* </BubbleSubtitle>
* ```
*/
declare const BubbleSubtitle: React$1.ForwardRefExoticComponent<Omit<BubbleSubtitleProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
interface BubbleSubtitleProps extends React$1.ComponentProps<'div'> {}
declare namespace BubbleSubtitle {
type Props = BubbleSubtitleProps;
}
/**
* Flex-wrap row of {@link BubbleDetailItem}s (the "from X" / IVR-branch rows).
* Renders a `<div>`.
*
* @example
* ```tsx
* <BubbleDetailList>
* <BubbleDetailItem icon={<ArrowRight />}>from Number Support Level 1</BubbleDetailItem>
* </BubbleDetailList>
* ```
*/
declare const BubbleDetailList: React$1.ForwardRefExoticComponent<Omit<BubbleDetailListProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
interface BubbleDetailListProps extends React$1.ComponentProps<'div'> {}
declare namespace BubbleDetailList {
type Props = BubbleDetailListProps;
}
/**
* Icon + label leaf, reused both inside {@link BubbleDetailList} (from-number
* / IVR rows) and inside a {@link BubbleFooter} cluster (AI-insight chips) -
* the same shape in both places, not a separate `BubbleInsightItem` (spec
* §3.3). Renders a `<div>`.
*
* @example
* ```tsx
* <BubbleDetailItem icon={<StickyNote />}>1 note</BubbleDetailItem>
* ```
*/
declare const BubbleDetailItem: React$1.ForwardRefExoticComponent<Omit<BubbleDetailItemProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
/** Props for {@link BubbleDetailItem} - `<div>` props plus a leading `icon`. */
interface BubbleDetailItemProps extends React$1.ComponentProps<'div'> {
/** Leading icon, rendered before `children`. */
icon?: React$1.ReactNode;
}
declare namespace BubbleDetailItem {
type Props = BubbleDetailItemProps;
}
/**
* Thin row wrapper for a call recording. Renders a `<div>`; the consumer
* drops a DS `<AudioPlayer>` (`Audio` + `AudioPlayerRow` + friends) straight
* in - `Bubble` does not wrap, re-export, or configure it
* (`packages/blocks/AGENTS.md`: import DS primitives directly).
*
* @example
* ```tsx
* <BubbleMedia>
* <Audio src={recordingUrl}>
* <AudioPlayerRow>
* <AudioPlayerButton />
* <AudioPlayerBar />
* <AudioPlayerTime />
* </AudioPlayerRow>
* </Audio>
* </BubbleMedia>
* ```
*/
declare const BubbleMedia: React$1.ForwardRefExoticComponent<Omit<BubbleMediaProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
interface BubbleMediaProps extends React$1.ComponentProps<'div'> {}
declare namespace BubbleMedia {
type Props = BubbleMediaProps;
}
/**
* Message media grid. Every child - image, `file` or `unavailable` - packs into
* a two-column mosaic as an identically sized tile. Renders a `<div>`.
*
* The mosaic is **span-fill**: a uniform two-column track where the three-item
* hero spans both columns. That is what fixes the three-item case, which a fixed
* `grid-cols-2` cannot pack - it left one tile and a hole, measured at 26.7% of
* the block's area.
*
* It is **orientation-blind on purpose.** Nothing here asks how tall or wide a
* source is: every cell is one fixed box, and an image is shown WHOLE inside it
* with `object-contain`. Nothing is ever cropped. That matters because the real
* attachments in this product are screenshots, and cropping a screenshot destroys
* the text that made it worth sending.
*
* The trade is letterbox rather than crop: a source whose shape differs from the
* cell's leaves background on two sides. In exchange the layout needs NOTHING
* from the consumer, packs identically for every set of sources, and has no
* post-load reflow. The two real consumers pass only a file name and a URL, so a
* declared aspect would have gone unfilled and a measured one would have shifted
* the layout a paint after load.
*
* Tile geometry comes from the grid, never from the tile's own content, which is
* what retires the old `self-start py-6` branch: a `file` tile has no height of
* its own to disagree with its neighbours about. It is in the mosaic, at the same
* dimensions as a photo. The `+N` overlay sits directly ON its tile, with no
* intermediate wrapper to disagree with it about where the hit target is.
*
* @example
* ```tsx
* <BubbleMediaGrid maxVisible={4}>
* <BubbleMediaItem kind="image" src={photo1} alt="" />
* <BubbleMediaItem kind="image" src={photo2} alt="" />
* <BubbleMediaItem kind="file" fileName="invoice.pdf" />
* </BubbleMediaGrid>
* ```
*/
declare const BubbleMediaGrid: React$1.ForwardRefExoticComponent<Omit<BubbleMediaGridProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
/** Props for {@link BubbleMediaGrid} - `<div>` props plus the overflow cap. */
interface BubbleMediaGridProps extends React$1.ComponentProps<'div'> {
/**
* How many tiles render before the rest collapse into the last visible tile's
* `+N` overlay. It counts ITEMS, not images: a `file` or `unavailable` child
* occupies a tile exactly as a photo does, so four photos and a PDF render the
* first four and a `+1`. The overlay lands on whichever tile is last visible,
* whatever its kind.
* @default 4
*/
maxVisible?: number;
}
declare namespace BubbleMediaGrid {
type Props = BubbleMediaGridProps;
}
/** Which shape a {@link BubbleMediaItem} or {@link BubbleMediaViewerItem} tile renders. */
type BubbleMediaKind = 'image' | 'file' | 'unavailable';
/**
* One item inside a {@link BubbleMediaGrid}: an image, a file, or an
* unavailable-media placeholder. Renders a `<div>` by default (swap via
* `render`). Interactive when `onClick` is passed - opening
* {@link BubbleMediaViewer} (or any other lightbox/gallery) is entirely the
* consumer's job; `Bubble` only fires the callback.
*
* Geometry is the GRID's, not the item's: an `image` fills the mosaic cell it
* was given and crops to it, a `file`/`unavailable` renders as a full-width row,
* and the one exception is a single item, which is sized to itself and crops
* nothing. There is deliberately no dimension or orientation prop - the layout
* asks the consumer for nothing beyond `kind` and `src`.
*
* @example
* ```tsx
* <BubbleMediaItem kind="image" src={photo} alt="" onClick={() => openViewer(0)} />
* <BubbleMediaItem kind="file" fileName="invoice.pdf" />
* <BubbleMediaItem kind="unavailable" />
* ```
*/
declare const BubbleMediaItem: React$1.ForwardRefExoticComponent<Omit<BubbleMediaItemProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
/** Props for {@link BubbleMediaItem}. */
type BubbleMediaItemProps = useRender.ComponentProps<'div'> & {
/** Which of the three item shapes to render. */
kind: BubbleMediaKind;
/** `kind="image"` only. */
src?: string;
/** `kind="image"` only. */
alt?: string;
/** `kind="file"` only - the displayed file name. */
fileName?: string;
/**
* `kind="unavailable"` only. Overrides the default
* `t('Bubble.unavailableMedia', 'Unavailable media')`.
*/
label?: React$1.ReactNode;
/** Opening a lightbox/gallery is the consumer's job - this only fires the callback. */
onClick?: () => void;
};
declare namespace BubbleMediaItem {
type Props = BubbleMediaItemProps;
}
/**
* Full-screen media viewer surface: a styled {@link DialogContent} sized to
* the viewport, laid out as a flex column for
* {@link BubbleMediaViewerHeader} / {@link BubbleMediaViewerCanvas} /
* {@link BubbleMediaViewerThumbnails} (spec §17 - no Figma node backs this
* chrome). `Bubble` does not wrap `Dialog`/`Carousel` themselves - the
* consumer places `<Dialog>` around this and owns `open`/index state, same
* split as `BubbleMediaItem`'s `onClick`.
*
* Escape-to-close and the backdrop come free from Base UI's `Dialog` and are
* not reimplemented. Arrow-key paging does NOT: DS `Carousel` binds
* `ArrowLeft`/`ArrowRight` on its own root, and a dialog puts initial focus on
* the popup - an ANCESTOR of that root - so the keys never reached it. Pass
* `onPrevious`/`onNext` (straight from `useBubbleMediaViewer`) and this
* component binds them, on TWO paths for one reason worth knowing about:
* a bubble-phase handler on the popup covers focus anywhere inside the viewer
* (bailing on `event.defaultPrevented` so the carousel's own capture handler
* pages one slide rather than two), and a capture-phase listener on the
* document covers the case where focus has fallen out to `<body>` - which it
* does, every time paging to the last slide disables `CarouselNext` under the
* user's own focus. See the comments on each for why the phases differ.
*
* `showCloseButton` defaults to `false` here, unlike `DialogContent`: the
* built-in close sits at `absolute top-3 right-4`, over the action row, and
* the viewer's own close is {@link BubbleMediaViewerClose} at the far left of
* the header instead. Renders a `sr-only` `DialogTitle`
* (`t('bubble.mediaViewerTitle')`) so the dialog has an accessible name even
* when the consumer omits the header (spec §11).
*
* @example
* ```tsx
* const viewer = useBubbleMediaViewer(openIndex);
*
* <Dialog open={open} onOpenChange={setOpen}>
* <BubbleMediaViewer onPrevious={viewer.previous} onNext={viewer.next}>
* <BubbleMediaViewerHeader>
* <BubbleMediaViewerClose />
* <BubbleMediaViewerAuthor name="Alex Finn" fileName="photo.jpg" timestamp="11:04am" />
* <BubbleMediaViewerActions>
* <Button variant="ghost" size="icon" onClick={download}><Download /></Button>
* </BubbleMediaViewerActions>
* </BubbleMediaViewerHeader>
* <BubbleMediaViewerCanvas>
* <Carousel setApi={viewer.setApi} opts={{ startIndex: openIndex }}>…</Carousel>
* </BubbleMediaViewerCanvas>
* <BubbleMediaViewerThumbnails>…</BubbleMediaViewerThumbnails>
* </BubbleMediaViewer>
* </Dialog>
* ```
*/
declare const BubbleMediaViewer: React$1.ForwardRefExoticComponent<Omit<BubbleMediaViewerProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
interface BubbleMediaViewerProps extends React$1.ComponentProps<typeof DialogContent> {
/** Bound to `ArrowLeft` anywhere inside the viewer. Pass `useBubbleMediaViewer().previous`. */
onPrevious?: () => void;
/** Bound to `ArrowRight` anywhere inside the viewer. Pass `useBubbleMediaViewer().next`. */
onNext?: () => void;
}
declare namespace BubbleMediaViewer {
type Props = BubbleMediaViewerProps;
}
/**
* Top row of {@link BubbleMediaViewer}, in reading order:
* {@link BubbleMediaViewerClose} flush left, then
* {@link BubbleMediaViewerAuthor} beside it, then whatever space is left, then
* {@link BubbleMediaViewerActions} against the right edge. Renders a `<div>`.
*
* Close leads the row rather than trailing it (spec §17.10 - the captain's
* ruling on the conflict flagged in §17.5, resolved toward his words and
* toward what WhatsApp Web, Google Photos, Telegram and macOS Quick Look all
* do). `BubbleMediaViewerActions` carries its own `ml-auto`, so the row is a
* plain flex line rather than `justify-between` - with three children the
* latter would have parked the author in the middle of the viewport.
*
* `sm:px-8` is not the usual `sm:px-6`: 32px is exactly where
* {@link BubbleMediaViewerCanvas} puts the carousel chevrons, so close lines up
* with the prev chevron and the last action with the next one, instead of the
* header sitting 8px proud of the controls beneath it.
*/
declare const BubbleMediaViewerHeader: React$1.ForwardRefExoticComponent<Omit<BubbleMediaViewerHeaderProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
interface BubbleMediaViewerHeaderProps extends React$1.ComponentProps<'div'> {}
declare namespace BubbleMediaViewerHeader {
type Props = BubbleMediaViewerHeaderProps;
}
/**
* The dismiss control, and the first thing in
* {@link BubbleMediaViewerHeader}. Renders the `DialogClose` `<button>`, so it
* needs no wiring - `Dialog` closes itself. Escape still works independently.
*
* It is a part of its own rather than a child of
* {@link BubbleMediaViewerActions} because it is no longer in that group: the
* actions act ON the asset, close leaves. Putting it far left is where every
* viewer this one was compared against puts it, and it keeps the destructive-
* ish control away from the ones a user reaches for repeatedly.
*/
declare const BubbleMediaViewerClose: React$1.ForwardRefExoticComponent<Omit<BubbleMediaViewerCloseProps, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
interface BubbleMediaViewerCloseProps extends React$1.ComponentProps<typeof DialogClose> {}
declare namespace BubbleMediaViewerClose {
type Props = BubbleMediaViewerCloseProps;
}
/**
* Left half of {@link BubbleMediaViewerHeader}: an optional avatar beside the
* sender's name, with the file name and the message time on a second, muted
* line. Renders a `<div>`.
*
* Everything is optional and each piece is a `ReactNode`, so a caller with no
* avatar, or with a `<Tooltip>`-wrapped timestamp, composes rather than
* fights the part. `avatar` is deliberately not a DS `<Avatar>` baked in
* here - blocks does not know whether the consumer has an image, initials, or
* a presence badge to show.
*/
declare const BubbleMediaViewerAuthor: React$1.ForwardRefExoticComponent<Omit<BubbleMediaViewerAuthorProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
/** Props for {@link BubbleMediaViewerAuthor}. */
interface BubbleMediaViewerAuthorProps extends React$1.ComponentProps<'div'> {
/** Rendered as-is before the name - a DS `<Avatar>`, an icon, or nothing. */
avatar?: React$1.ReactNode;
/** Sender name, first line. */
name?: React$1.ReactNode;
/** File name, second line. */
fileName?: React$1.ReactNode;
/** Message time, second line, after the file name. */
timestamp?: React$1.ReactNode;
}
declare namespace BubbleMediaViewerAuthor {
type Props = BubbleMediaViewerAuthorProps;
}
/**
* The action row at the right end of {@link BubbleMediaViewerHeader}:
* everything a user can do TO the asset in view - download, and zoom if it is
* ever added - in the order the consumer passes them. Renders a `<div>`.
*
* It carries `ml-auto` itself rather than relying on the header to space it,
* so the header stays a plain flex line that reads left to right and a
* consumer can drop parts in or out without the arrangement collapsing.
*
* Close is deliberately NOT here any more; it is
* {@link BubbleMediaViewerClose}, at the far left of the header (spec §17.10).
*/
declare const BubbleMediaViewerActions: React$1.ForwardRefExoticComponent<Omit<BubbleMediaViewerActionsProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
interface BubbleMediaViewerActionsProps extends React$1.ComponentProps<'div'> {}
declare namespace BubbleMediaViewerActions {
type Props = BubbleMediaViewerActionsProps;
}
/**
* The middle band of {@link BubbleMediaViewer} - wrap the consumer's DS
* `<Carousel>` in it. Renders a `<div>` that takes the leftover column height
* and, crucially, carries the horizontal padding that keeps
* `CarouselPrevious`/`CarouselNext` OFF the viewport edge.
*
* That padding is the whole reason this part exists rather than being folded
* into the viewer root. Those buttons position themselves at `-left-12` /
* `-right-12` relative to the carousel, so with a full-bleed carousel they
* land flush against the screen border. `px-16 sm:px-20` pushes the carousel
* in by 64px/80px, which leaves the 32px buttons sitting 16px/32px inside the
* edge. The numbers are a judgement call, not a spec: no Figma node covers
* this chrome (spec §17).
*/
declare const BubbleMediaViewerCanvas: React$1.ForwardRefExoticComponent<Omit<BubbleMediaViewerCanvasProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
interface BubbleMediaViewerCanvasProps extends React$1.ComponentProps<'div'> {}
declare namespace BubbleMediaViewerCanvas {
type Props = BubbleMediaViewerCanvasProps;
}
/**
* Bottom strip of {@link BubbleMediaViewer}: a centred, horizontally
* scrollable row of {@link BubbleMediaViewerThumbnail}s. Renders a `<div>`
* wrapping a DS `<ScrollArea>` - **or nothing at all** when it holds fewer
* than two children, which is the legacy `Thumbnails`' `items.length > 1`
* rule (`MessageBubbleV2/components/Gallery`): one asset has nothing to page
* between, so a strip of one is chrome that only takes height away from the
* asset.
*
* `ScrollArea` is the captain's own suggestion and it holds up: it renders a
* horizontal `ScrollBar` as well as a vertical one, and both are `opacity-0`
* until hover or scroll, so a strip that fits carries no permanent visual
* weight. The inner row is `mx-auto w-max` rather than `justify-center` on
* purpose - centring a flex row that overflows its scroll container makes the
* FIRST items unreachable, because the overflow lands on the start edge where
* scrolling cannot reach it.
*/
declare const BubbleMediaViewerThumbnails: React$1.ForwardRefExoticComponent<Omit<BubbleMediaViewerThumbnailsProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
interface BubbleMediaViewerThumbnailsProps extends React$1.ComponentProps<'div'> {}
declare namespace BubbleMediaViewerThumbnails {
type Props = BubbleMediaViewerThumbnailsProps;
}
/**
* One item in {@link BubbleMediaViewerThumbnails}. Renders a `<button>`
* showing the image itself, or the same paperclip / broken-image glyph its
* {@link BubbleMediaViewerItem} slide uses. Mark the one in view with
* `selected` and it takes the primary ring and scrolls itself back into the
* strip.
*
* Keeping the selection visible is the one thing the legacy `Thumbnail` had to
* hand-roll - it nudged `containerRef.current.scrollLeft` by a fixed 40px off
* `getBoundingClientRect` readings. None of that arithmetic is reproduced
* here, and it could not be: DS `ScrollArea` renders its own viewport
* internally and forwards its ref to the Root, so there is no viewport handle
* to write `scrollLeft` on. `scrollIntoView` needs none - it walks to the
* nearest scrollable ancestor, which IS that viewport - and `block: 'nearest',
* inline: 'nearest'` means it moves the strip only when the thumbnail is
* actually out of view, and never scrolls the page vertically. Instant, not
* smooth: a smooth scroll mid-capture is a Chromatic flake.
*/
declare const BubbleMediaViewerThumbnail: React$1.ForwardRefExoticComponent<Omit<BubbleMediaViewerThumbnailProps, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
/** Props for {@link BubbleMediaViewerThumbnail}. */
interface BubbleMediaViewerThumbnailProps extends Omit<React$1.ComponentProps<'button'>, 'children'> {
/** Which of the three shapes to render - matches its slide's `kind`. */
kind: BubbleMediaKind;
/** `kind="image"` only. */
src?: string;
/** `kind="image"` only - also the default accessible name. */
alt?: string;
/** `kind="file"` only - not displayed at this size, used as the accessible name. */
fileName?: string;
/**
* Marks the thumbnail whose slide is in view: primary ring, full opacity,
* and scrolled back into the strip.
* @default false
*/
selected?: boolean;
}
declare namespace BubbleMediaViewerThumbnail {
type Props = BubbleMediaViewerThumbnailProps;
}
/**
* One full-viewport slide inside a {@link BubbleMediaViewer}'s `<Carousel>`.
* Same three `kind`s as {@link BubbleMediaItem}, sized for a full-screen
* slide rather than a grid tile: an image scales to fit, a file or
* unavailable-media placeholder centers its icon and label.
*
* It carries no download button any more. That moved into
* {@link BubbleMediaViewerActions} at the top right (spec §17) - one action
* row for the viewer, rather than a button floating over the bottom-right
* corner of whichever slide happens to be showing. The consumer renders the
* button and knows which item is current from `useBubbleMediaViewer`, so the
* per-item contract that replaced the legacy batch
* `MessageBubbleV2Props.onDownloadClick(media: Media[])` is unchanged in
* substance - only its position moved.
*
* @example
* ```tsx
* <BubbleMediaViewerItem kind="file" fileName="invoice.pdf" />
* ```
*/
declare const BubbleMediaViewerItem: React$1.ForwardRefExoticComponent<Omit<BubbleMediaViewerItemProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
/** Props for {@link BubbleMediaViewerItem}. */
interface BubbleMediaViewerItemProps extends React$1.ComponentProps<'div'> {
/** Which of the three slide shapes to render. */
kind: BubbleMediaKind;
/** `kind="image"` only. */
src?: string;
/** `kind="image"` only. */
alt?: string;
/** `kind="file"` only - the displayed file name. */
fileName?: string;
/** `kind="unavailable"` only. Overrides the default `t('Bubble.unavailableMedia', 'Unavailable media')`. */
label?: React$1.ReactNode;
}
declare namespace BubbleMediaViewerItem {
type Props = BubbleMediaViewerItemProps;
}
/**
* Quoted-message preview. Renders a `<div>`.
*
* @remarks
* **PROVISIONAL** - no Figma node backs this component anywhere in node
* `27904-3255` (spec §7 #3). Styled by inference from the rest of the
* anatomy pending a design pass; do not treat this visual as final.
*
* @example
* ```tsx
* <BubbleReply author="Alex Finn">Can you send the invoice again?</BubbleReply>
* ```
*/
declare const BubbleReply: React$1.ForwardRefExoticComponent<Omit<BubbleReplyProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
/** Props for {@link BubbleReply} - PROVISIONAL, see the component's `@remarks`. */
interface BubbleReplyProps extends React$1.ComponentProps<'div'> {
/** Name of the quoted message's author. */
author?: string;
children: React$1.ReactNode;
}
declare namespace BubbleReply {
type Props = BubbleReplyProps;
}
/**
* Small label above a text block ("Summary", "Transcript", a WhatsApp
* template title). Renders a `<div>`. Takes children, full stop - no
* `type: 'summary' | 'transcript' | 'note'` enum, since the label text is
* always consumer-owned localized copy (spec §5).
*
* @example
* ```tsx
* <BubbleSectionLabel>Summary</BubbleSectionLabel>
* ```
*/
declare const BubbleSectionLabel: React$1.ForwardRefExoticComponent<Omit<BubbleSectionLabelProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
interface BubbleSectionLabelProps extends React$1.ComponentProps<'div'> {}
declare namespace BubbleSectionLabel {
type Props = BubbleSectionLabelProps;
}
/**
* Plain body text - message content, a section body, or template body/
* footer text. Renders a `<p>`. Always full content; a consumer wanting
* truncation wraps it in their own `line-clamp-*` + toggle (spec §5).
*
* @example
* ```tsx
* <BubbleText>Sure, sending it right now</BubbleText>
* ```
*/
declare const BubbleText: React$1.ForwardRefExoticComponent<Omit<BubbleTextProps, "ref"> & React$1.RefAttributes<HTMLParagraphElement>>;
interface BubbleTextProps extends React$1.ComponentProps<'p'> {}
declare namespace BubbleText {
type Props = BubbleTextProps;
}
/**
* Destructive icon+text row for a delivery failure or unavailable media.
* Renders a `<div>`. Right-alignment for `align="end"` bubbles is inherited
* from `Bubble`'s own layout, not a separate prop here.
*
* @example
* ```tsx
* <BubbleErrorMessage icon={<CircleAlert />}>
* Not delivered. Recipient's number doesn't support SMS.
* </BubbleErrorMessage>
* ```
*/
declare const BubbleErrorMessage: React$1.ForwardRefExoticComponent<Omit<BubbleErrorMessageProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
/** Props for {@link BubbleErrorMessage} - `<div>` props plus a leading `icon`. */
interface BubbleErrorMessageProps extends React$1.ComponentProps<'div'> {
/** Leading icon, rendered before `children` (e.g. `<CircleAlert />`). */
icon?: React$1.ReactNode;
}
declare namespace BubbleErrorMessage {
type Props = BubbleErrorMessageProps;
}
/**
* Static in-content action row (e.g. "Generate email"). Renders a `<div>`;
* consumer passes DS `<Button>`(s) as children.
*
* @example
* ```tsx
* <BubbleActions>
* <Button variant="outline" size="sm">Generate email</Button>
* </BubbleActions>
* ```
*/
declare const BubbleActions: React$1.ForwardRefExoticComponent<Omit<BubbleActionsProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
interface BubbleActionsProps extends React$1.ComponentProps<'div'> {}
declare namespace BubbleActions {
type Props = BubbleActionsProps;
}
/**
* Two-cluster grid row INSIDE `BubbleContent` only, a sibling of
* {@link BubbleHeader} (tags/labels start, AI-insight chips end). Renders a
* `<div>` as a 2-column grid; place a {@link BubbleFooterStart} and/or
* {@link BubbleFooterEnd} directly inside - each owns its own cluster's
* `flex`/`gap`, so a consumer never repeats that layout (see the
* `write-ds-story` skill's "stories do not do the component's job"). Not
* interchangeable with {@link BubbleMeta}, which is the sibling shape OUTSIDE
* `BubbleContent` (spec §7 #5) - different cross-axis alignment, different
* padding, different fixed-height behaviour.
*
* @example
* ```tsx
* <BubbleFooter>
* <BubbleFooterStart><Badge color="purple">Label</Badge></BubbleFooterStart>
* <BubbleFooterEnd>
* <BubbleDetailItem icon={<StickyNote />}>1 note</BubbleDetailItem>
* </BubbleFooterEnd>
* </BubbleFooter>
* ```
*/
declare const BubbleFooter: React$1.ForwardRefExoticComponent<Omit<BubbleFooterProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
interface BubbleFooterProps extends React$1.ComponentProps<'div'> {}
declare namespace BubbleFooter {
type Props = BubbleFooterProps;
}
/** Start (left) cluster of a {@link BubbleFooter}. Renders a `<div>`, `flex flex-wrap items-center gap-1`. */
declare const BubbleFooterStart: React$1.ForwardRefExoticComponent<Omit<BubbleFooterStartProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
interface BubbleFooterStartProps extends React$1.ComponentProps<'div'> {}
declare namespace BubbleFooterStart {
type Props = BubbleFooterStartProps;
}
/** End (right) cluster of a {@link BubbleFooter}. Renders a `<div>`, `flex flex-wrap items-center gap-2`. */
declare const BubbleFooterEnd: React$1.ForwardRefExoticComponent<Omit<BubbleFooterEndProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
interface BubbleFooterEndProps extends React$1.ComponentProps<'div'> {}
declare namespace BubbleFooterEnd {
type Props = BubbleFooterEndProps;
}
/**
* Info icon beside `BubbleContent`, sibling of it inside `Bubble`, for
* contextual tooltips (missed-call reason, undelivered reason). Renders the
* default icon (an `<Info>` svg) unless `render` swaps it for a different
* icon - `render` here swaps the *visual*, not a wrapping host tag, so the
* rendered element is never actually the `<div>` `defaultTagName` implies.
* Always carries `tabIndex={0}` (overridable) so it stays keyboard-reachable
* regardless of which icon renders - an `<svg>` has no implicit tabindex the
* way a `<button>` does, and this part is meant to compose as a DS
* `<TooltipTrigger render={<BubbleHint />}>`, which swaps out
* `TooltipTrigger`'s own naturally-focusable default `<button>` host without
* carrying its interactivity along (spec §11) - `Bubble` never wraps
* `Tooltip` itself (spec §3.4). Also carries the `bubble-hint-slot` class
* alongside `data-slot="bubble-hint"` - `TooltipTrigger`'s own `mergeProps`
* call overwrites `data-slot` on the final rendered element (a plain
* attribute, last-merge-wins) but concatenates `className`, so `Bubble`'s
* grid-placement selector for this part targets the class, not the data
* attribute, and still finds it under a `TooltipTrigger` wrapper (spec §11).
*
* @example
* ```tsx
* <Tooltip>
* <TooltipTrigger render={<BubbleHint />} />
* <TooltipContent>Line busy</TooltipContent>
* </Tooltip>
* ```
*/
declare const BubbleHint: React$1.ForwardRefExoticComponent<Omit<BubbleHintProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
/** Props for {@link BubbleHint}. */
type BubbleHintProps = useRender.ComponentProps<'div'> & {
/**
* Accessible label. Defaults to `t('Bubble.hint', 'More info')` when
* omitted - never a hardcoded English string.
*/
'aria-label'?: string;
};
declare namespace BubbleHint {
type Props = BubbleHintProps;
}
/**
* Two-cluster grid row OUTSIDE `BubbleContent`, sibling of it inside `Bubble`
* (channel + label start, timestamp + status end). Renders a `<div>` as a
* 2-column grid; place a {@link BubbleMetaStart} and/or {@link BubbleMetaEnd}
* directly inside, or `BubbleDetailItem` for a single icon+label cluster. A
* lone `BubbleMetaEnd` (a bare trailing timestamp, no channel) still lands in
* the end column - explicit slot targeting, not `justify-between`, which
* cannot right-align a single flex child. See {@link BubbleFooter} for why
* this is a distinct part rather than a reuse of it (spec §7 #5).
*
* @example
* ```tsx
* <BubbleMeta>
* <BubbleDetailItem icon={<SocialWhatsappOriginal />}>WhatsApp</BubbleDetailItem>
* <BubbleMetaEnd>10:59am <CheckCheck className="size-4" /></BubbleMetaEnd>
* </BubbleMeta>
* ```
*/
declare const BubbleMeta: React$1.ForwardRefExoticComponent<Omit<BubbleMetaProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
interface BubbleMetaProps extends React$1.ComponentProps<'div'> {}
declare namespace BubbleMeta {
type Props = BubbleMetaProps;
}
/** Start (left) cluster of a {@link BubbleMeta}. Renders a `<div>`, `flex items-center gap-1`. */
declare const BubbleMetaStart: React$1.ForwardRefExoticComponent<Omit<BubbleMetaStartProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
interface BubbleMetaStartProps extends React$1.ComponentProps<'div'> {}
declare namespace BubbleMetaStart {
type Props = BubbleMetaStartProps;
}
/**
* End (right) cluster of a {@link BubbleMeta} - also the part that makes a
* bare trailing timestamp (no channel cluster) land right-aligned rather
* than at the row's start (spec §10). Renders a `<div>`, `flex items-center
* justify-self-end gap-1`.
*/
declare const BubbleMetaEnd: React$1.ForwardRefExoticComponent<Omit<BubbleMetaEndProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
interface BubbleMetaEndProps extends React$1.ComponentProps<'div'> {}
declare namespace BubbleMetaEnd {
type Props = BubbleMetaEndProps;
}
//#endregion
//#region src/components/bubble/use-bubble-media-viewer.d.ts
/**
* Live carousel index plus the three commands the viewer chrome issues
* against it. Wire `setApi` to a DS `<Carousel setApi={...}>`; everything
* else is derived from that instance.
*/
interface UseBubbleMediaViewerResult {
/** Pass straight to `<Carousel setApi={...}>`. Stable across renders. */
setApi: (api: CarouselApi) => void;
/** Index of the slide currently in view, kept in sync with Embla's `select`. */
selectedIndex: number;
/** Jump to a slide - what a thumbnail click calls. */
select: (index: number) => void;
/** Page forward. Bound to ArrowRight by `BubbleMediaViewer`. */
next: () => void;
/** Page back. Bound to ArrowLeft by `BubbleMediaViewer`. */
previous: () => void;
}
/**
* Reads the live slide index out of a DS `<Carousel>` and hands back the
* commands {@link BubbleMediaViewer}'s chrome needs.
*
* Pass the index the viewer is opening at - the SAME state that drives
* `open`, so `number` while open and `null`/`undefined` while closed - and
* pass it to the carousel too (`opts={{ startIndex }}`), which is what
* actually scrolls it. This hook does not scroll anything; it makes the index
* authoritative for the chrome from the first render of each open.
*
* **Why it is read on every render and not just seeded once.** A consumer
* normally keeps this hook mounted alongside the bubble, above the `Dialog`
* that unmounts, so it outlives each open. Seeded once, it kept the last
* index until Embla emitted `select` - which lands a full paint later,
* measured at TWO painted frames in Chrome. For that flash the header named
* the previously viewed asset, the strip marked and scrolled to the wrong
* thumbnail, and the feature read as broken on the one interaction it exists
* for: opening on the tile you clicked. So a change in `startIndex` resets
* the index during render, before anything commits, which is React's own
* pattern for state that has to follow a prop.
*
* `null` is meaningful, not just "absent": it marks the viewer closed, and
* closing must reset the comparison so that reopening on the SAME index the
* user last paged away from still re-asserts it.
*
* @example
* ```tsx
* const [openIndex, setOpenIndex] = useState<number | null>(null);
* const viewer = useBubbleMediaViewer(openIndex);
*
* <Dialog open={openIndex !== null} onOpenChange={o => !o && setOpenIndex(null)}>
* <BubbleMediaViewer onPrevious={viewer.previous} onNext={viewer.next}>
* <Carousel setApi={viewer.setApi} opts={{ startIndex: openIndex }}>…</Carousel>
* </BubbleMediaViewer>
* </Dialog>
* ```
*/
declare function useBubbleMediaViewer(startIndex?: number | null): UseBubbleMediaViewerResult;
//#endregion
export { type ArrayField, type ArrayItem, BetaBadge, type BoundForm, Bubble, BubbleActions, BubbleContent, BubbleDaySeparator, BubbleDetailItem, BubbleDetailList, BubbleErrorMessage, BubbleFooter, BubbleFooterEnd, BubbleFooterStart, BubbleHeader, BubbleHint, BubbleIcon, BubbleMedia, BubbleMediaGrid, BubbleMediaItem, BubbleMediaViewer, BubbleMediaViewerActions, BubbleMediaViewerAuthor, BubbleMediaViewerCanvas, BubbleMediaViewerClose, BubbleMediaViewerHeader, BubbleMediaViewerItem, BubbleMediaViewerThumbnail, BubbleMediaViewerThumbnails, BubbleMeta, BubbleMetaEnd, BubbleMetaStart, BubbleQuickActions, BubbleReply, BubbleSectionLabel, BubbleSenderLabel, BubbleSubtitle, BubbleText, BubbleTitle, CardSaveBar, type CardSaveBarProps, ChatbotExpandSuggestion, type ChatbotExpandSuggestionProps, ChatbotInput, type ChatbotInputProps, type ChatbotInputSuggestion, ChatbotPage, ChatbotPageBody, type ChatbotPageBodyProps, ChatbotPageContent, type ChatbotPageContentProps, ChatbotPageConversation, type ChatbotPageConversationProps, ChatbotPageFooter, type ChatbotPageFooterProps, ChatbotPageHeading, type ChatbotPageHeadingProps, ChatbotPageInputBar, type ChatbotPageInputBarProps, type ChatbotPageProps, ChatbotPanel, ChatbotPanelHeader, type ChatbotPanelHeaderProps, type ChatbotPanelProps, ChatbotPanelSuggestion, type ChatbotPanelSuggestionItem, type ChatbotPanelSuggestionProps, ChatbotPanelTrigger, type ChatbotPanelTriggerProps, ChatbotResponseBlock, type ChatbotResponseBlockFeedback, type ChatbotResponseBlockProps, ChatbotResponseLoading, type ChatbotResponseLoadingProps, ChatbotSidebar, type ChatbotSidebarConversation, ChatbotUserMessage, type ChatbotUserMessageProps, type ComboboxControl, ComingSoonDescription, ComingSoonEmptyState, ComingSoonMedia, ComingSoonTitle, CommonForm, CopyButton, CopyButtonIcon, CopyButtonLabel, CountryCombobox, type CountryOption, DASHBOARD_FILTERS_INLINE_LIMIT, DATE_RANGE_SHORTCUTS, DEFAULT_DATE_RANGE_SHORTCUTS, DashboardFilterField, type DashboardFilterId, type DashboardFilterRegistration, type DashboardFilterSurface, DashboardFilters, DashboardFiltersClear, DashboardFiltersRow, DashboardFiltersSheet, DashboardPage, DashboardPageBanner, DashboardPageContent, DashboardPageHeader, DashboardPageHeaderAction, DashboardPageHeaderActions, DashboardPageHeaderDescription, DashboardPageHeaderNav, DashboardPageHeaderNavBack, DashboardPageHeaderPrefix, DashboardPageHeaderSubtitle, DashboardPageHeaderTitle, DashboardPageHeaderTitleGroup, DashboardPageMain, DashboardPageTabs, DashboardSidebar, DashboardSidebarContent, DashboardSidebarFooter, DashboardSidebarGroup, DashboardSidebarGroupLabel, DashboardSidebarHeader, DashboardSidebarMenu, DashboardSidebarMenuAddon, DashboardSidebarMenuBadge, DashboardSidebarMenuButton, DashboardSidebarMenuItem, DashboardSidebarNav, type DashboardSidebarNavGroup, type DashboardSidebarNavItem, type DashboardSidebarNavItemAction, type DashboardSidebarNavItemLink, type DashboardSidebarNavItemSubmenu, type DashboardSidebarNavSubmenuItem, DashboardSidebarProvider, DashboardSidebarSubmenu, DashboardSidebarSubmenuItem, DashboardSidebarSubmenuSeparator, DashboardSidebarTrigger, DashboardStandalonePage, DashboardStandalonePageAction, DashboardStandalonePageActions, DashboardStandalonePageContent, DashboardStandalonePageDescription, DashboardStandalonePageHeader, DashboardStandalonePageMain, DashboardStandalonePageTitle, DateRangeCalendar, type DateRangeCalendarProps, type DateRangeShortcut, type DateRangeShortcutDefinition, type DateRangeValue, type DayOfWeek, DaysPicker, DeprecatedBadge, EmptyState, EmptyStateActions, EmptyStateButton, EmptyStateDescription, EmptyStateExternalLink, EmptyStateHeader, EmptyStateMedia, EmptyStateTitle, type FieldBindingProps, Filter, FilterClear, FilterCombobox, type FilterComboboxSearchProps, type FilterContextValue, FilterCountry, FilterLanguage, FilterPanel, FilterRange, type FilterRangeValue, type FilterSelectionMode, type FilterSize, type FilterStatus, FilterTrigger, FormArrayField, type FormArrayFieldProps, FormComboboxField, type FormComboboxFieldProps, FormFieldBase, FormFieldShell, type FormFieldShellProps, type FormFieldValidators, FormInputField, type FormInputFieldProps, FormMultiComboboxField, type FormMultiComboboxFieldProps, FormNumericField, type FormNumericFieldProps, FormOTPField, type FormOTPFieldProps, FormPhoneInputField, type FormPhoneInputFieldProps, FormRadioGroupField, type FormRadioGroupFieldProps, FormRichTextareaField, type FormRichTextareaFieldProps, FormSelectField, type FormSelectFieldProps, FormSliderField, type FormSliderFieldProps, FormSwitchField, type FormSwitchFieldProps, FormTextareaField, type FormTextareaFieldProps, FormToggleGroupField, type FormToggleGroupFieldProps, type InputControl, KpiCard, KpiDescription, KpiDescriptionSkeleton, type KpiDurationScale, type KpiDurationStyle, type KpiKind, type KpiTone, type KpiTrend, KpiValue, KpiValueSkeleton, LANGUAGE_CODES, LANGUAGE_SEMANTIC_MAP, LanguageCombobox, type LanguageComboboxExtraOption, type LanguageLabelOverrides, type LanguageOption, type LanguageOptionLabelOptions, type LanguageOptionsOptions, type LanguageSemanticDefinition, LicenseAlert, LicenseAlertAction, type LicenseAlertLicense, LicenseBadge, type LicenseBadgeLicense, type MultiComboboxControl, type NecessityProps, NewBadge, NoDataDescription, NoDataEmptyState, NoDataMedia, NoDataTitle, NoSupportDescription, NoSupportEmptyState, NoSupportMedia, NoSupportTitle, NotFoundDescription, NotFoundEmptyState, NotFoundMedia, NotFoundTitle, type NumericControl, type OTPControl, PERCENTAGE_THRESHOLDS, PhoneInput, type PhoneInputChangeMeta, type PhoneInputControl, type PhoneInputProps, ProfessionalBadge, type RadioGroupControl, RestrictedAccessDescription, RestrictedAccessEmptyState, RestrictedAccessMedia, RestrictedAccessTitle, type RichTextareaControl, RoleBadge, type RoleBadgeRole, SaveBar, type SaveBarProps, ScoreBadge, type ScoreKind, type ScoreThreshold, type ScoreThresholds, type ScoreTone, type SelectControl, type Sentiment, SentimentBadge, SettingCard, SettingCardAction, SettingCardContent, SettingCardDescription, SettingCardHeader, SettingCardTitle, type SliderControl, SubmitButton, type SubmitButtonProps, type SwitchControl, type TextareaControl, TimezoneCombobox, type TimezoneComboboxProps, type TimezoneEntry, type TimezoneOption, type ToggleGroupControl, TrialBadge, type TypedField, UnknownErrorDescription, UnknownErrorEmptyState, UnknownErrorMedia, UnknownErrorTitle, type UseBubbleMediaViewerResult, Wizard, WizardActions, WizardAside, WizardBack, WizardComplete, WizardLayout, WizardMain, WizardNext, WizardProgress, WizardSection, WizardSectionContent, WizardSectionDescription, WizardSectionFields, WizardSectionHeader, WizardSectionTitle, WizardSkip, type WizardStatus, WizardStep, type WizardStepDefinition, WizardStepDescription, WizardStepHeader, WizardStepTitle, bubbleVariants, canonicalizeLanguageCode, capitalizeFirstGrapheme, createDashboardFilterId, dateRangeFromShortcut, fieldContext, filterCountriesByQuery, filterLabelVariants, formContext, getDefaultTimezones, getLanguageSemanticDefinition, getLanguageSemanticVariantKey, getPhoneNumberWithCountry, getUpdatedCursorPosition, isSameDateRange, matchDateRangeShortcut, matchesCountryQuery, renderCountryOption, resolveCountryName, resolveLanguageLabel, resolveLanguageOptionLabel, toFieldErrors, useBubbleMediaViewer, useCopyToClipboard, useCountryOptions, useDashboardFilterRegistration, useDashboardFilterStaging, useDashboardFilterSurface, useSidebar as useDashboardSidebar, useDetectedCountryCode, useFieldContext, useFilter, useForm, useFormContext, useIsTextTruncated, useLanguageOptions, useWizard, withFieldGroup, withForm };