@arbidocs/blocks 0.3.185 → 0.4.1

package/dist/settings/Projects.d.ts

@@ -0,0 +1,108 @@
+import { type ReactNode } from 'react';
+/** Every fixed string of the project list states. */
+export interface ProjectListLabels {
+    loading: string;
+    empty: string;
+    filteredOut: string;
+}
+export declare const DEFAULT_PROJECT_LIST_LABELS: ProjectListLabels;
+/** Every fixed string of the shared-projects section. `title` prop wins. */
+export interface SharedProjectsSectionLabels {
+    title: string;
+}
+export declare const DEFAULT_SHARED_PROJECTS_SECTION_LABELS: SharedProjectsSectionLabels;
+/** Every fixed string of the project detail header. */
+export interface ProjectDetailHeaderLabels {
+    renameProject: string;
+}
+export declare const DEFAULT_PROJECT_DETAIL_HEADER_LABELS: ProjectDetailHeaderLabels;
+/** Every fixed string of the rename dialog. `title` prop wins. */
+export interface RenameDialogLabels {
+    title: string;
+    description: string;
+    cancel: string;
+    save: string;
+}
+export declare const DEFAULT_RENAME_DIALOG_LABELS: RenameDialogLabels;
+export interface ProjectRowProps {
+    testId?: string;
+    /** Opens the project (click, Enter or Space on the row). */
+    onOpen: () => void;
+    /** Name + relation mark. */
+    identity: ReactNode;
+    /** Plan badge beside the name; shown from the `md` breakpoint up. */
+    summary?: ReactNode;
+    /** Full-width usage readout under the line (a `QuotaMeter size="lg"`). */
+    usage?: ReactNode;
+    /** Row actions (upgrade, invoices). */
+    actions?: ReactNode;
+}
+/** One project in the list: a single clickable line; its actions are always visible. */
+export declare function ProjectRow({ testId, onOpen, identity, summary, usage, actions }: ProjectRowProps): import("react").JSX.Element;
+export interface ProjectListProps {
+    isLoading: boolean;
+    /** The user owns no projects at all. */
+    isEmpty: boolean;
+    /** Projects exist but none pass the active filter. */
+    isFilteredOut: boolean;
+    children: ReactNode;
+    testId?: string;
+    labels?: Partial<ProjectListLabels>;
+}
+/** The list of projects with its loading / empty / no-match states. */
+export declare function ProjectList({ isLoading, isEmpty, isFilteredOut, children, testId, labels, }: ProjectListProps): import("react").JSX.Element;
+export interface SharedProjectsSectionProps {
+    title?: string;
+    footnote?: string;
+    children: ReactNode;
+    testId?: string;
+    labels?: Partial<SharedProjectsSectionLabels>;
+}
+/** "Shared with you": projects other people run, with the caller's own allowance in each. */
+export declare function SharedProjectsSection({ title, footnote, children, testId, labels, }: SharedProjectsSectionProps): import("react").JSX.Element;
+/** One shared project: identity on the left, the caller's allowance on the right. */
+export declare function SharedProjectRow({ testId, identity, allowance, }: {
+    testId?: string;
+    identity: ReactNode;
+    allowance: ReactNode;
+}): import("react").JSX.Element;
+export interface ProjectDetailHeaderProps {
+    /** Large entity icon. */
+    icon: ReactNode;
+    name: string;
+    /** Plan badge beside the name. */
+    badge?: ReactNode;
+    onRename: () => void;
+    /** The primary action on the right (e.g. "Update Plan"). */
+    action?: ReactNode;
+    labels?: Partial<ProjectDetailHeaderLabels>;
+}
+/** Header of an opened project: icon, name with a rename pencil, plan badge, primary action. */
+export declare function ProjectDetailHeader({ icon, name, badge, onRename, action, labels, }: ProjectDetailHeaderProps): import("react").JSX.Element;
+/** Tonal tile with a heading inside a project's detail. */
+export declare function ProjectDetailSection({ title, className, children, }: {
+    title: string;
+    className?: string;
+    children: ReactNode;
+}): import("react").JSX.Element;
+export interface RenameDialogProps {
+    open: boolean;
+    onClose: () => void;
+    title?: string;
+    value: string;
+    onChange: (value: string) => void;
+    onSave: () => void;
+    isSaving?: boolean;
+    /** Test id of the name input. */
+    testId?: string;
+    /** Test id of the dialog itself. */
+    dialogTestId?: string;
+    /** Caption above the input (omitted: the input stands alone). */
+    fieldLabel?: string;
+    placeholder?: string;
+    /** Save is disabled while false (e.g. an empty name). Defaults to true. */
+    canSave?: boolean;
+    labels?: Partial<RenameDialogLabels>;
+}
+/** Single-field rename: Enter saves, Escape cancels. */
+export declare function RenameDialog({ open, onClose, title, value, onChange, onSave, isSaving, testId, dialogTestId, fieldLabel, placeholder, canSave, labels, }: RenameDialogProps): import("react").JSX.Element;

package/dist/settings/QuotaMeter.d.ts

@@ -0,0 +1,31 @@
+import { type ElementType } from 'react';
+export interface QuotaMeterItem {
+    key: string;
+    icon: ElementType;
+    label: string;
+    /** Compact display: used only (the limit lives in the tooltip). */
+    used: string;
+    /** Prominent display: "used / limit". */
+    usedOfLimit: string;
+    /** 0-100+ percentage of the limit consumed. */
+    pct: number;
+}
+export interface QuotaMeterProps {
+    items: QuotaMeterItem[];
+    /** `sm`: icon + counter row. `lg`: stat tiles with progress bars. */
+    size?: 'sm' | 'lg';
+    /** Per-item tooltip with used / limit (sm only). Off when a parent owns the tooltip. */
+    showTooltips?: boolean;
+    /** The usage tint and percentage (sm only). Off on deployments without limits. */
+    showBars?: boolean;
+    /** The "(pct%)" after each number (sm only). */
+    showPercent?: boolean;
+    className?: string;
+    /**
+     * Ids; defaults are the current ids. `root` defaults per size (`quota-badges-lg` / `quota-badges-sm`);
+     * `badge` is a prefix (`<prefix>-<key>`, `<prefix>-<key>-fill` for the lg bar).
+     */
+    testIds?: Partial<Record<'root' | 'badge', string>>;
+}
+/** Credits / storage / collaborators readout, in a compact row or as stat tiles. */
+export declare function QuotaMeter({ items, size, showTooltips, showBars, showPercent, className, testIds, }: QuotaMeterProps): import("react").JSX.Element;

package/dist/settings/ReferralCredit.d.ts

@@ -0,0 +1,46 @@
+/** Every fixed string of the referral-credit parts. `amount` is the formatted reward. */
+export interface ReferralCreditLabels {
+    badgeTitle: string;
+    badge: (amount: string) => string;
+    subtotal: string;
+    reward: string;
+    youPayNow: string;
+    rollover: (amount: string) => string;
+    applied: (amount: string) => string;
+    note: (amount: string) => string;
+}
+export declare const DEFAULT_REFERRAL_CREDIT_LABELS: ReferralCreditLabels;
+/** Standing pill: the user's available referral reward. */
+export declare function ReferralCreditBadge({ amountLabel, labels, testId, }: {
+    amountLabel: string;
+    labels?: Partial<ReferralCreditLabels>;
+    /** Default `referral-credit-badge` / `referral-credit-note` per part. */
+    testId?: string;
+}): import("react").JSX.Element;
+export interface ReferralCreditBreakdown {
+    subtotal: string;
+    reward: string;
+    youPay: string;
+    /** Set when part of the reward rolls over to the next invoice. */
+    rollover?: string;
+}
+export interface ReferralCreditSummaryProps {
+    /** The reward amount, formatted. */
+    amountLabel: string;
+    /** When the exact charge is known; otherwise a one-line note is shown. */
+    breakdown?: ReferralCreditBreakdown;
+    labels?: Partial<ReferralCreditLabels>;
+    /** Root test id (default `referral-credit-summary`). */
+    testId?: string;
+    /** Breakdown rows; defaults are the current ids. */
+    testIds?: Partial<Record<'applied' | 'youPay', string>>;
+}
+/** Reward applied to a purchase: subtotal / reward / you pay now, or a one-line note. */
+export declare function ReferralCreditSummary({ amountLabel, breakdown, labels, testId, testIds, }: ReferralCreditSummaryProps): import("react").JSX.Element;
+/** One-line note for charges whose exact amount is a proration computed server-side. */
+export declare function ReferralCreditNote({ amountLabel, labels, testId, }: {
+    amountLabel: string;
+    labels?: Partial<ReferralCreditLabels>;
+    /** Default `referral-credit-badge` / `referral-credit-note` per part. */
+    testId?: string;
+}): import("react").JSX.Element;

package/dist/settings/SegmentedControl.d.ts

@@ -0,0 +1,20 @@
+import type { ReactNode } from 'react';
+export interface SegmentedOption<T extends string> {
+    value: T;
+    label: string;
+    icon?: ReactNode;
+    testId?: string;
+}
+export interface SegmentedControlProps<T extends string> {
+    value: T;
+    onChange: (value: T) => void;
+    options: SegmentedOption<T>[];
+    /** Accessible name of the radio group. */
+    ariaLabel: string;
+    className?: string;
+}
+/**
+ * Single-choice radio group rendered as joined segments (selected = accent tone). Radix
+ * RadioGroup: one tab stop, arrow keys move AND select, Space selects.
+ */
+export declare function SegmentedControl<T extends string>({ value, onChange, options, ariaLabel, className, }: SegmentedControlProps<T>): import("react").JSX.Element;

package/dist/settings/ServerConnectionControls.d.ts

@@ -0,0 +1,31 @@
+export type ServerConnectionState = 'connected' | 'connecting' | 'disconnected' | 'offline';
+export interface ServerConnectionButtonProps {
+    state: ServerConnectionState;
+    /** Visible text next to the dot ("Connected", "Working offline"...). */
+    label: string;
+    isRefreshing: boolean;
+    onRefresh: () => void;
+    testId?: string;
+}
+/** Status pill that doubles as the "refresh session" button. */
+export declare function ServerConnectionButton({ state, label, isRefreshing, onRefresh, testId, }: ServerConnectionButtonProps): import("react").JSX.Element;
+export interface WorkOfflineToggleProps {
+    isOffline: boolean;
+    onToggle: (offline: boolean) => void;
+    /** Accessible name and tooltip while online / offline. */
+    labels?: {
+        goOnline: string;
+        workOffline: string;
+        goOnlineHint: string;
+        workOfflineHint: string;
+    };
+    testId?: string;
+}
+export declare const DEFAULT_WORK_OFFLINE_LABELS: {
+    goOnline: string;
+    workOffline: string;
+    goOnlineHint: string;
+    workOfflineHint: string;
+};
+/** Icon toggle that forces the app offline even while the server is reachable. */
+export declare function WorkOfflineToggle({ isOffline, onToggle, labels, testId, }: WorkOfflineToggleProps): import("react").JSX.Element;

package/dist/settings/SettingsPanel.d.ts

@@ -0,0 +1,61 @@
+import { type ComponentProps, type ReactNode } from 'react';
+/** Every fixed string of the danger zone. `label` prop wins. */
+export interface SettingsDangerZoneLabels {
+    dangerZone: string;
+}
+export declare const DEFAULT_SETTINGS_DANGER_ZONE_LABELS: SettingsDangerZoneLabels;
+export interface SettingsPanelProps extends ComponentProps<'div'> {
+    /** Stable test id of the panel. */
+    testId?: string;
+}
+/** Centred column of {@link SettingsSection}s with a readable measure. */
+export declare function SettingsPanel({ className, testId, ...props }: SettingsPanelProps): import("react").JSX.Element;
+export interface SettingsSectionProps extends Omit<ComponentProps<'section'>, 'title'> {
+    /** Small muted icon before the title. */
+    icon?: ReactNode;
+    title?: ReactNode;
+    description?: ReactNode;
+    /** Right-aligned control in the heading row (e.g. a Reset button). */
+    action?: ReactNode;
+    testId?: string;
+}
+/** Titled group of settings: heading row, optional description, then the controls. */
+export declare function SettingsSection({ icon, title, description, action, testId, className, children, ...props }: SettingsSectionProps): import("react").JSX.Element;
+export interface SettingsRowProps extends Omit<ComponentProps<'div'>, 'title'> {
+    label: ReactNode;
+    /** Id of the control: renders the label as a `<label htmlFor>` so it toggles the control. */
+    labelFor?: string;
+    description?: ReactNode;
+    /** The control: switch, select, button. Sits at the end of the row. */
+    children?: ReactNode;
+    testId?: string;
+}
+/** One setting: label + help text on the left, its control on the right (stacks on phones). */
+export declare function SettingsRow({ label, labelFor, description, children, testId, className, ...props }: SettingsRowProps): import("react").JSX.Element;
+export interface SettingsCardProps extends ComponentProps<'div'> {
+    /** `md` for form-like content, `sm` when the card holds a list of full-bleed action rows. */
+    padding?: 'md' | 'sm';
+}
+/** Tonal tile that groups related settings (surface by tone, no border). */
+export declare function SettingsCard({ padding, className, ...props }: SettingsCardProps): import("react").JSX.Element;
+export interface SettingsActionRowProps {
+    title: ReactNode;
+    description?: ReactNode;
+    onClick: () => void;
+    testId?: string;
+}
+/** Full-width row that opens a dialog or sub-page: title, help text and a chevron. */
+export declare function SettingsActionRow({ title, description, onClick, testId }: SettingsActionRowProps): import("react").JSX.Element;
+export interface SettingsDangerZoneProps {
+    isOpen: boolean;
+    onToggle: () => void;
+    /** Heading of the collapsed zone. */
+    label?: string;
+    title: ReactNode;
+    description: ReactNode;
+    /** The destructive control (a Button). */
+    action: ReactNode;
+    labels?: Partial<SettingsDangerZoneLabels>;
+}
+/** Collapsed-by-default zone for irreversible actions. */
+export declare function SettingsDangerZone({ isOpen, onToggle, label, title, description, action, labels, }: SettingsDangerZoneProps): import("react").JSX.Element;

package/dist/settings/SettingsSwitchRow.d.ts

@@ -0,0 +1,21 @@
+import type { ReactNode } from 'react';
+export interface SettingsSwitchRowProps {
+    /** Id of the switch; also the `htmlFor` of the label so clicking the label toggles it. */
+    id: string;
+    title: ReactNode;
+    /** Leading glyph of the title. */
+    icon?: ReactNode;
+    description?: ReactNode;
+    checked: boolean;
+    onCheckedChange: (checked: boolean) => void;
+    testId?: string;
+    disabled?: boolean;
+    className?: string;
+}
+/** One on/off setting: icon + title + help text at the start, the switch at the end. */
+export declare function SettingsSwitchRow({ id, title, icon, description, checked, onCheckedChange, testId, disabled, className, }: SettingsSwitchRowProps): import("react").JSX.Element;
+/** Indented group of rows that belong to the row above (e.g. the connectors of "Connectors"). */
+export declare function SettingsSwitchGroup({ className, children, }: {
+    className?: string;
+    children: ReactNode;
+}): import("react").JSX.Element;

package/dist/settings/SubscriptionParts.d.ts

@@ -0,0 +1,215 @@
+import type { ComponentProps, MouseEvent, ReactNode } from 'react';
+import type { LucideIcon } from 'lucide-react';
+import { Button } from '@arbidocs/react/ui';
+/** A single line of status text (loading, empty, error) inside a plan flow. */
+export declare function PlanNotice({ tone, className, testId, children, }: {
+    tone?: 'muted' | 'error';
+    className?: string;
+    testId?: string;
+    children: ReactNode;
+}): import("react").JSX.Element;
+/** Vertical rhythm of a plan flow's sections. */
+export declare function PlanStack({ gap, testId, className, children, }: {
+    gap?: 2 | 3 | 4 | 5;
+    testId?: string;
+    className?: string;
+    children: ReactNode;
+}): import("react").JSX.Element;
+/** "Free -> Pro x2": the transition the plan picker is about to make. */
+export declare function PlanTransition({ from, to }: {
+    from: string;
+    to: string;
+}): import("react").JSX.Element;
+/** Title + explainer on the left, billing toggle on the right; the toggle wraps when narrow. */
+export declare function PlanPickerHeader({ title, info, infoPlacement, toggle, className, }: {
+    title: ReactNode;
+    info?: ReactNode;
+    /** `title`: the info trigger sits beside the title; `toggle`: grouped with the toggle. */
+    infoPlacement?: 'title' | 'toggle';
+    toggle?: ReactNode;
+    className?: string;
+}): import("react").JSX.Element;
+/** Tinted card holding the tier picker (header + quantity grid). */
+export declare function PlanPickerCard({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;
+/** Decline on the left, commit on the right; stacked reversed so commit leads on narrow screens. */
+export declare function PlanActionRow({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;
+/** Full-width button of a plan flow (`fill` makes it share a row equally on wide screens). */
+export declare function PlanActionButton({ tone, fill, ...props }: Omit<ComponentProps<typeof Button>, 'variant'> & {
+    tone?: 'primary' | 'muted';
+    fill?: boolean;
+}): import("react").JSX.Element;
+export interface SubscriptionMeterView {
+    key: string;
+    icon: LucideIcon;
+    label: string;
+    value: string;
+    pct: number;
+}
+export interface SubscriptionStatusViewProps {
+    /** Formatted reset date ("Aug 31"); falsy when unknown. */
+    resetDate?: string | null;
+    isCanceling: boolean;
+    meters: SubscriptionMeterView[];
+    /** Prefix of each meter's test id (`<prefix>-<key>`); defaults to `project-quota`. */
+    testIdPrefix?: string;
+    labels?: Partial<SubscriptionStatusLabels>;
+}
+export interface SubscriptionStatusLabels {
+    creditsReset: (date: string) => string;
+    cancelsAtPeriodEnd: string;
+    cancelsAtEndOfBillingPeriod: string;
+}
+export declare const DEFAULT_SUBSCRIPTION_STATUS_LABELS: SubscriptionStatusLabels;
+/** Expanded project status: reset date, canceling notice, stacked quota meters. */
+export declare function SubscriptionStatusView({ resetDate, isCanceling, meters, testIdPrefix, labels, }: SubscriptionStatusViewProps): import("react").JSX.Element;
+export interface PlanDialogFrameProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    title: ReactNode;
+    description: ReactNode;
+    /** Keep the description for screen readers only. */
+    isDescriptionHidden?: boolean;
+    /** Name of the project the plan applies to, right of the title. */
+    projectName?: string;
+    /** Test id of the project name; defaults to `change-plan-project`. */
+    projectTestId?: string;
+    children?: ReactNode;
+    labels?: Partial<{
+        project: string;
+    }>;
+}
+/** The one plan-picker dialog: offer title + reason, the project it applies to, then the flow. */
+export declare function PlanDialogFrame({ open, onOpenChange, title, description, isDescriptionHidden, projectName, projectTestId, children, labels, }: PlanDialogFrameProps): import("react").JSX.Element;
+export interface CheckoutDialogFrameProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    /** Stripe is not available: show the explanation instead of the checkout. */
+    isUnavailable?: boolean;
+    isLoading?: boolean;
+    hasError?: boolean;
+    /** The embedded payment form (host-owned: needs the payment provider). */
+    children?: ReactNode;
+    labels?: Partial<CheckoutDialogLabels>;
+}
+export interface CheckoutDialogLabels {
+    unavailableTitle: string;
+    unavailableDescription: string;
+    title: string;
+    description: string;
+    loading: string;
+    error: string;
+}
+export declare const DEFAULT_CHECKOUT_DIALOG_LABELS: CheckoutDialogLabels;
+/**
+ * Checkout dialog chrome. Flex column capped at 90vh: the header is pinned and ONLY the checkout
+ * region scrolls, so the embedded payment iframe (often taller than the viewport) never clips its
+ * pay button. Outside click and Escape are blocked: a half-paid checkout must be closed on purpose.
+ */
+export declare function CheckoutDialogFrame({ open, onOpenChange, isUnavailable, isLoading, hasError, children, labels, }: CheckoutDialogFrameProps): import("react").JSX.Element;
+export interface QuotaExceededDialogViewProps {
+    open: boolean;
+    onClose: () => void;
+    onUpgrade: () => void;
+    message: string;
+    /** Absent while the dialog closes (no usage to show). */
+    usage?: {
+        percent: number;
+        /** "1,200 credits of 2,000 credits". */
+        readout: string;
+        projectId?: string | null;
+    };
+    labels?: Partial<QuotaExceededDialogLabels>;
+}
+export interface QuotaExceededDialogLabels {
+    title: string;
+    projectUsage: string;
+    progress: string;
+    project: string;
+    close: string;
+    upgrade: string;
+}
+export declare const DEFAULT_QUOTA_EXCEEDED_DIALOG_LABELS: QuotaExceededDialogLabels;
+/** Shown when a project's AI budget is exhausted: how much was used, then close or upgrade. */
+export declare function QuotaExceededDialogView({ open, onClose, onUpgrade, message, usage, labels, }: QuotaExceededDialogViewProps): import("react").JSX.Element;
+export interface WelcomeProjectPickerProps {
+    value: string;
+    options: {
+        id: string;
+        name: string;
+    }[];
+    onChange: (id: string) => void;
+    testId?: string;
+}
+/** Compact project switcher in the welcome dialog's quota header. */
+export declare function WelcomeProjectPicker({ value, options, onChange, testId, }: WelcomeProjectPickerProps): import("react").JSX.Element;
+export interface SubscriptionSectionViewProps {
+    intro: ReactNode;
+    isLoading?: boolean;
+    isEmpty?: boolean;
+    /** Project groups (use {@link ProjectGroup}). */
+    children?: ReactNode;
+    labels?: Partial<SubscriptionSectionLabels>;
+}
+export interface SubscriptionSectionLabels {
+    loading: string;
+    empty: string;
+}
+export declare const DEFAULT_SUBSCRIPTION_SECTION_LABELS: SubscriptionSectionLabels;
+/** The projects list of settings: intro line, then groups, loading or empty state. */
+export declare function SubscriptionSectionView({ intro, isLoading, isEmpty, children, labels, }: SubscriptionSectionViewProps): import("react").JSX.Element;
+/** A stack of project cards. */
+export declare function ProjectGroup({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;
+/** Plan picker area inside an expanded project card. */
+export declare function ProjectPlanPicker({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;
+/** Project name in a card row. */
+export declare function ProjectNameLabel({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;
+/** Row of icon actions on a project card. */
+export declare function ProjectRowActions({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;
+export interface RowIconActionProps {
+    label: string;
+    /** Tooltip text; defaults to `label`. */
+    tooltip?: string;
+    icon: ReactNode;
+    tone?: 'primary' | 'destructive';
+    disabled?: boolean;
+    onClick?: () => void;
+}
+/** Small icon action with a tooltip (rename, delete). 44px on touch. */
+export declare function RowIconAction({ label, tooltip, icon, tone, disabled, onClick, }: RowIconActionProps): import("react").JSX.Element;
+/** Compact outline button with a leading icon on a project card row. */
+export declare function RowButton({ icon, children, onClick, }: {
+    icon: ReactNode;
+    children: ReactNode;
+    onClick: (e: MouseEvent) => void;
+}): import("react").JSX.Element;
+/** Icon-only tooltip button of the usage panel's action slot (download, print). */
+export declare function UsageActionButton({ label, icon, onClick, }: {
+    label: string;
+    icon: ReactNode;
+    onClick: () => void;
+}): import("react").JSX.Element;
+/** "(12% of quota)" after the credits stat label. */
+export declare function UsageQuotaHint({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;
+/** Titled block of the usage panel (chart, breakdown) with an optional control on the right. */
+export declare function UsageSection({ title, action, children, footer, gap, }: {
+    title: ReactNode;
+    action?: ReactNode;
+    children: ReactNode;
+    /** Below the content, e.g. a chart legend. */
+    footer?: ReactNode;
+    gap?: 'sm' | 'md';
+}): import("react").JSX.Element;

package/dist/settings/SupportPanel.d.ts

@@ -0,0 +1,32 @@
+import { type ReactNode } from 'react';
+export type SupportTab = 'feedback' | 'guide';
+/** Every fixed string of the support panel (tab names and their tooltips). */
+export interface SupportPanelLabels {
+    support: string;
+    userGuide: string;
+}
+export declare const DEFAULT_SUPPORT_PANEL_LABELS: SupportPanelLabels;
+export interface SupportPanelProps {
+    activeTab: SupportTab;
+    onTabChange: (tab: SupportTab) => void;
+    /** Pinned build / version lines (right of the tabs), e.g. `frontend · date · hash`. */
+    buildInfo?: string[];
+    /** The mode switcher + close button, placed after the build info. */
+    modeSwitcher?: ReactNode;
+    /** Support form (e.g. an embedded survey) or its "not configured" notice. */
+    feedback: ReactNode;
+    /** Shown over the form while it loads. */
+    isFeedbackLoading?: boolean;
+    loadingIndicator?: ReactNode;
+    /** The rendered user guide. */
+    guide: ReactNode;
+    testId?: string;
+    labels?: Partial<SupportPanelLabels>;
+}
+/** Support panel: a "Support" form tab and a "User Guide" tab, with build info in the header. */
+export declare function SupportPanel({ activeTab, onTabChange, buildInfo, modeSwitcher, feedback, isFeedbackLoading, loadingIndicator, guide, testId, labels, }: SupportPanelProps): import("react").JSX.Element;
+/** Notice shown in place of the form when it is not configured. */
+export declare function SupportUnavailable({ title, message }: {
+    title: string;
+    message: string;
+}): import("react").JSX.Element;