@arbidocs/blocks 0.3.184 → 0.4.0

package/dist/settings/LogoutDialog.d.ts

@@ -0,0 +1,51 @@
+import { type ReactNode } from 'react';
+/** Every fixed string of the logout dialog. */
+export interface LogoutDialogLabels {
+    title: string;
+    descriptionAll: string;
+    descriptionThis: string;
+    cancel: string;
+    allSessions: string;
+    offlineTooltip: string;
+    thisSession: string;
+    offlineNote: string;
+    /** Disclosure trigger: "3 active sessions". */
+    activeSessions: (count: number) => string;
+    /** Session row: "2 workspaces". */
+    workspaces: (count: number) => string;
+    /** Session row: "TTL 2h". */
+    ttl: (ttlLabel: string) => string;
+}
+export declare const DEFAULT_LOGOUT_DIALOG_LABELS: LogoutDialogLabels;
+export interface LogoutSessionView {
+    id: string;
+    /** `agent` sessions are shown with the primary badge. */
+    status: string;
+    ipAddress?: string | null;
+    /** Pre-formatted remaining lifetime, e.g. "2h". */
+    ttlLabel: string;
+    workspaceCount: number;
+}
+export interface LogoutDialogProps {
+    open: boolean;
+    onClose: () => void;
+    onLogoutThis: () => void;
+    onLogoutAll: () => void;
+    /** False for agent accounts: "All sessions" is not offered. */
+    canLogoutAll: boolean;
+    isOnline: boolean;
+    sessions: LogoutSessionView[];
+    /** Icon for a session row (monitor / bot). */
+    renderSessionIcon?: (status: string) => ReactNode;
+    labels?: Partial<LogoutDialogLabels>;
+    /** Dialog test id (default `logout-modal`). */
+    testId?: string;
+    /** Part ids; defaults are the current ids. */
+    testIds?: Partial<Record<'cancel' | 'all' | 'this' | 'offlineNote', string>>;
+}
+/**
+ * Logout confirmation: end this session or all sessions, with the list of the
+ * user's active sessions (including agent sessions) under a disclosure.
+ * "All sessions" is disabled while offline because it must reach the server.
+ */
+export declare function LogoutDialog({ open, onClose, onLogoutThis, onLogoutAll, canLogoutAll, isOnline, sessions, renderSessionIcon, labels, testId, testIds, }: LogoutDialogProps): import("react").JSX.Element;

package/dist/settings/ModalBreadcrumbHeader.d.ts

@@ -0,0 +1,32 @@
+import type { ReactNode } from 'react';
+export interface ModalBreadcrumbHeaderProps {
+    /** Workspace crumb (optional): its icon node and name; without it just the title shows. */
+    workspaceName?: string;
+    workspaceIcon?: ReactNode;
+    /** Icon before the title (should match the button that opened the modal). */
+    icon?: ReactNode;
+    /** Section name (should match the opening button's caption). */
+    title: string;
+    /** Accessible description, visually hidden. Defaults to the title. */
+    description?: string;
+    /** Extra node after the title (a count badge). */
+    titleExtra?: ReactNode;
+    /** Context line under the title (see {@link ModalCrumbs}); replaces the workspace line. */
+    subtitle?: ReactNode;
+    /** Replaces the default spacing (e.g. `p-6 pb-3 pr-12` inside a padding-free dialog). */
+    className?: string;
+}
+/**
+ * Dialog header: `[icon] Title`, with the workspace as a small subtitle line beneath it
+ * (`[workspace icon] Workspace name`). One plain title at every width: the name never competes
+ * with, or squeezes, the title, and a long name truncates on its own line (full name on hover).
+ */
+export declare function ModalBreadcrumbHeader({ workspaceName, workspaceIcon, icon, title, description, titleExtra, subtitle, className, }: ModalBreadcrumbHeaderProps): import("react").JSX.Element;
+export interface ModalCrumb {
+    icon?: ReactNode;
+    label: string;
+}
+/** `[icon] Workspace / [icon] Chats / Thread`: a context line that truncates instead of wrapping. */
+export declare function ModalCrumbs({ items }: {
+    items: ModalCrumb[];
+}): import("react").JSX.Element;

package/dist/settings/ModalScaffold.d.ts

@@ -0,0 +1,60 @@
+import type { ComponentProps, ReactNode, RefObject } from 'react';
+import { DialogFooter, DialogHeader, type DialogPresentation } from '@arbidocs/react/ui';
+/** Tailwind classes for a modal section heading (also usable on a `Label`). */
+export declare const MODAL_SECTION_TITLE_CLASS = "mb-2 flex items-center gap-1 text-sm font-medium text-muted-foreground";
+/** Header of a hand-assembled modal: no tinted band, just space. */
+export declare function ModalHeader({ className, ...props }: ComponentProps<typeof DialogHeader>): import("react").JSX.Element;
+/** A padded group inside a modal body. */
+export declare function ModalSection({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
+/** Muted label above the content of a {@link ModalSection}. */
+export declare function ModalSectionTitle({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
+export type ModalSize = 'sm' | 'md' | 'lg' | 'xl';
+export interface ModalScaffoldProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    title: ReactNode;
+    /** Accessible description; visually hidden unless `showDescription`. */
+    description?: ReactNode;
+    showDescription?: boolean;
+    /** Icon shown before the title. */
+    icon?: ReactNode;
+    size?: ModalSize;
+    /** Phone presentation; defaults to a bottom sheet for `lg`/`xl`, a centred box otherwise. */
+    presentation?: DialogPresentation;
+    className?: string;
+    testId?: string;
+    /**
+     * `alertdialog` for a destructive or blocking confirmation: announced as an alert, dismissed
+     * only through its own buttons or Escape (not by clicking outside).
+     */
+    role?: 'dialog' | 'alertdialog';
+    /**
+     * Block dismissal by outside click AND Escape; only the dialog's own buttons close it. For a
+     * dialog that shows a secret once (a new API key). Default false. An `alertdialog` already
+     * ignores outside clicks.
+     */
+    dismissible?: boolean;
+    /** Called on a pointer/focus interaction outside; `preventDefault()` keeps the dialog open. */
+    onInteractOutside?: (event: Event) => void;
+    /** Called on Escape; `preventDefault()` keeps the dialog open. */
+    onEscapeKeyDown?: (event: KeyboardEvent) => void;
+    /** Element that receives focus when the dialog opens (an alert dialog focuses its safe action). */
+    initialFocusRef?: RefObject<HTMLElement | null>;
+    children?: ReactNode;
+}
+declare function ModalBody({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
+/**
+ * Action row. Stacked full-width on phones (primary action on top), right-aligned on wider
+ * screens. Sticks to the bottom of the scrolling dialog body so the actions stay reachable.
+ */
+declare function ModalFooter({ className, ...props }: ComponentProps<typeof DialogFooter>): import("react").JSX.Element;
+/**
+ * Standard dialog: icon + title + description header, then the compound
+ * `ModalScaffold.Body` / `ModalScaffold.Footer` slots.
+ */
+export declare function ModalScaffold({ open, onOpenChange, title, description, showDescription, icon, size, presentation, className, testId, role, initialFocusRef, dismissible, onInteractOutside, onEscapeKeyDown, children, }: ModalScaffoldProps): import("react").JSX.Element;
+export declare namespace ModalScaffold {
+    var Body: typeof ModalBody;
+    var Footer: typeof ModalFooter;
+}
+export {};

package/dist/settings/MultiSelect.d.ts

@@ -0,0 +1,111 @@
+import * as React from 'react';
+/**
+ * Variants for the multi-select component to handle different styles.
+ * Uses class-variance-authority (cva) to define different styles based on "variant" prop.
+ */
+/**
+ * Props for MultiSelect component
+ */
+interface MultiSelectProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onChange'> {
+    /**
+     * An array of option objects to be displayed in the multi-select component.
+     * Each option object has a label, value, and an optional icon.
+     */
+    data: {
+        /** The text to display for the option. */
+        label: string;
+        /** The unique value associated with the option. */
+        value: string;
+        /** Optional icon component to display alongside the option. */
+        icon?: React.ComponentType<{
+            className?: string;
+        }>;
+    }[];
+    /**
+     * Current selected values.
+     */
+    value: string[];
+    /**
+     * Callback function triggered when the selected values change.
+     * Receives an array of the new selected values.
+     */
+    onChange: (value: string[]) => void;
+    /**
+     * Current search value for filtering options.
+     */
+    searchValue?: string;
+    /**
+     * Callback function triggered when the search value changes.
+     */
+    onSearchChange?: (value: string) => void;
+    /**
+     * Placeholder text to be displayed when no values are selected.
+     * Optional, defaults to "Select options".
+     */
+    placeholder?: string;
+    /**
+     * Whether the component is searchable.
+     */
+    searchable?: boolean;
+    /**
+     * Whether the component is clearable.
+     */
+    clearable?: boolean;
+    /**
+     * Size of the component.
+     */
+    size?: 'sm' | 'md' | 'lg';
+    /**
+     * Whether the component should auto focus.
+     */
+    autoFocus?: boolean;
+    /**
+     * Callback triggered when dropdown opens.
+     */
+    onDropdownOpen?: () => void;
+    /**
+     * Callback triggered when dropdown closes.
+     */
+    onDropdownClose?: () => void;
+    /**
+     * Custom render function for options.
+     */
+    renderOption?: (params: {
+        option: {
+            label: string;
+            value: string;
+            icon?: React.ComponentType<{
+                className?: string;
+            }>;
+        };
+        checked: boolean;
+    }) => React.ReactNode;
+    /**
+     * Animation duration in seconds for the visual effects (e.g., bouncing badges).
+     * Optional, defaults to 0 (no animation).
+     */
+    animation?: number;
+    /**
+     * Maximum number of items to display. Extra selected items will be summarized.
+     * Optional, defaults to 3.
+     */
+    maxCount?: number;
+    /**
+     * The modality of the popover. When set to true, interaction with outside elements
+     * will be disabled and only popover content will be visible to screen readers.
+     * Optional, defaults to false.
+     */
+    modalPopover?: boolean;
+    /**
+     * If true, renders the multi-select component as a child of another component.
+     * Optional, defaults to false.
+     */
+    asChild?: boolean;
+    /**
+     * Additional class names to apply custom styles to the multi-select component.
+     * Optional, can be used to add custom styles.
+     */
+    className?: string;
+}
+export declare const MultiSelect: React.ForwardRefExoticComponent<MultiSelectProps & React.RefAttributes<HTMLButtonElement>>;
+export {};

package/dist/settings/NotificationCategoryList.d.ts

@@ -0,0 +1,26 @@
+export interface NotificationCategory {
+    key: string;
+    label: string;
+    description: string;
+    checked: boolean;
+}
+export interface NotificationCategoryListProps {
+    /** Master switch: on while at least one category is on. */
+    masterId: string;
+    masterTitle: string;
+    masterDescription: string;
+    masterChecked: boolean;
+    onMasterChange: (checked: boolean) => void;
+    masterTestId?: string;
+    categories: NotificationCategory[];
+    onCategoryChange: (key: string, checked: boolean) => void;
+    /** Prefix of the checkbox ids (`<prefix>-<key>`); default the master id. */
+    idPrefix?: string;
+    /** Prefix of the checkbox test ids (`<prefix>-<key>`); default `toggle-email`. */
+    testIdPrefix?: string;
+}
+/**
+ * A master switch with per-category checkboxes under it. The checkboxes are greyed out and
+ * disabled while the master is off.
+ */
+export declare function NotificationCategoryList({ masterId, masterTitle, masterDescription, masterChecked, onMasterChange, masterTestId, categories, onCategoryChange, idPrefix, testIdPrefix, }: NotificationCategoryListProps): import("react").JSX.Element;

package/dist/settings/PanelFrame.d.ts

@@ -0,0 +1,47 @@
+import type { ReactNode } from 'react';
+export interface PanelFrameProps {
+    testId?: string;
+    className?: string;
+    children: ReactNode;
+}
+/** Column that fills a side/floating panel: a header slot above a body that takes the rest. */
+export declare function PanelFrame({ testId, className, children }: PanelFrameProps): import("react").JSX.Element;
+export interface PanelFrameBodyProps {
+    className?: string;
+    children: ReactNode;
+}
+/** The panel's body: fills what the header leaves and clips; children scroll themselves. */
+export declare function PanelFrameBody({ className, children }: PanelFrameBodyProps): import("react").JSX.Element;
+export interface PanelScrollProps {
+    /** `padded` is a list page (spaced sections); `flush` is a detail view that pads itself. */
+    variant?: 'padded' | 'flush';
+    className?: string;
+    children: ReactNode;
+}
+/** Scrolling content of a panel body. */
+export declare function PanelScroll({ variant, className, children }: PanelScrollProps): import("react").JSX.Element;
+/** Right-aligned row of list-level actions. */
+export declare function PanelActionsRow({ className, children, }: {
+    className?: string;
+    children: ReactNode;
+}): import("react").JSX.Element;
+export interface PanelAddButtonProps {
+    label: string;
+    onClick: () => void;
+    /** Icon only (a narrow header); the label stays as title/aria-label. */
+    isCompact?: boolean;
+    icon: ReactNode;
+    testId?: string;
+}
+/** "+ New" button that sits right after the tabs of a panel header. */
+export declare function PanelAddButton({ label, onClick, isCompact, icon, testId }: PanelAddButtonProps): import("react").JSX.Element;
+/** Header of a single-purpose panel: icon + title at the start, the mode switcher at the end. */
+export declare function PanelTitleBar({ icon, title, end, }: {
+    icon?: ReactNode;
+    title: string;
+    end?: ReactNode;
+}): import("react").JSX.Element;
+/** Centred muted note in a panel body ("Loading…"). */
+export declare function PanelNote({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;

package/dist/settings/PasswordChangeDialog.d.ts

@@ -0,0 +1,64 @@
+import { type ReactNode } from 'react';
+import { type PasswordStrengthInputLabels, type PasswordStrengthInputTestIds } from '../auth/PasswordStrengthInput';
+/** Every fixed string of the password-change dialog. */
+export interface PasswordChangeDialogLabels {
+    setNewPasswordTitle: string;
+    changeMasterPasswordTitle: string;
+    recoveryDescription: string;
+    changeDescription: string;
+    passwordChanged: string;
+    done: string;
+    recoverySuccessful: string;
+    currentPassword: string;
+    currentPasswordPlaceholder: string;
+    masterPassword: string;
+    newPassword: string;
+    confirmPassword: string;
+    confirmNewPassword: string;
+    /** Re-key notice: "3 workspaces will be re-keyed with your new password." */
+    workspacesRekeyed: (count: number) => string;
+    cancel: string;
+    settingPassword: string;
+    changingPassword: string;
+    continue: string;
+    changePassword: string;
+}
+export declare const DEFAULT_PASSWORD_CHANGE_DIALOG_LABELS: PasswordChangeDialogLabels;
+export interface PasswordChangeDialogProps {
+    labels?: Partial<PasswordChangeDialogLabels>;
+    /** Labels forwarded to the embedded password input. */
+    passwordInputLabels?: Partial<PasswordStrengthInputLabels>;
+    /** Dialog test id (default `change-password-dialog`). */
+    testId?: string;
+    /** Part ids; defaults are the current ids. */
+    testIds?: Partial<Record<'done' | 'currentInput' | 'workspaceCount' | 'error' | 'cancel' | 'submit', string>>;
+    /** Ids forwarded to the embedded password input. */
+    passwordInputTestIds?: PasswordStrengthInputTestIds;
+    open: boolean;
+    /** Dismiss (also fired by Cancel and the close button). */
+    onClose: () => void;
+    /** After recovery with a key: no current password, no Cancel, full-width Continue. */
+    recoveryMode: boolean;
+    currentPassword: string;
+    onCurrentPasswordChange: (value: string) => void;
+    newPassword: string;
+    onNewPasswordChange: (value: string) => void;
+    confirmPassword: string;
+    onConfirmPasswordChange: (value: string) => void;
+    /** The host's password policy (see `PasswordStrengthInput`). */
+    getUnmetRequirement: (password: string) => string | null;
+    /** Number of workspaces that will be re-keyed; the notice is hidden at 0. */
+    workspaceCount: number;
+    error: string | null;
+    isProcessing: boolean;
+    isSubmitDisabled: boolean;
+    onSubmit: () => void;
+    /**
+     * Success state: shown instead of the form once the password changed (the new recovery key
+     * download). `null` while the form is showing.
+     */
+    success: ReactNode | null;
+    onDone: () => void;
+}
+/** Change (or set, after recovery) the master password, then offer the new recovery key. */
+export declare function PasswordChangeDialog({ open, onClose, recoveryMode, currentPassword, onCurrentPasswordChange, newPassword, onNewPasswordChange, confirmPassword, onConfirmPasswordChange, getUnmetRequirement, workspaceCount, error, isProcessing, isSubmitDisabled, onSubmit, success, onDone, labels, passwordInputLabels, testId, testIds, passwordInputTestIds, }: PasswordChangeDialogProps): import("react").JSX.Element;

package/dist/settings/PlanBadge.d.ts

@@ -0,0 +1,14 @@
+import { type VariantProps } from 'class-variance-authority';
+declare const planBadgeVariants: (props?: ({
+    tone?: "pending" | "paid" | "free" | "dev" | null | undefined;
+    size?: "sm" | "md" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface PlanBadgeProps extends VariantProps<typeof planBadgeVariants> {
+    /** Tier name, e.g. "Free", "Pro x2". */
+    label: string;
+    className?: string;
+    testId?: string;
+}
+/** A project's plan tier as a small coloured pill. */
+export declare function PlanBadge({ label, tone, size, className, testId, }: PlanBadgeProps): import("react").JSX.Element;
+export {};

package/dist/settings/PlanCard.d.ts

@@ -0,0 +1,97 @@
+/** Every fixed string of the plan cards and their controls. */
+export interface PlanCardLabels {
+    currentPlan: string;
+    popular: string;
+    noMonthlyCost: string;
+    perMonth: string;
+    /** Short "Current" pill on a tier option. */
+    current: string;
+    monthly: string;
+    annual: string;
+    annualBilling: string;
+    /** Savings pill: "Save 20%". */
+    save: (percent: number) => string;
+    havePromoCode: string;
+    promoCode: string;
+    enterCode: string;
+    pricingExplainer: string;
+    explainerTiers: string;
+    explainerCredits: string;
+    seeModelList: string;
+}
+export declare const DEFAULT_PLAN_CARD_LABELS: PlanCardLabels;
+/** Pre-formatted price lines for a paid plan card. */
+export interface PlanCardPrice {
+    annual: boolean;
+    /** Struck-through no-discount yearly total (annual billing). */
+    yearlyStrike?: string;
+    /** Yearly total (annual billing). */
+    yearlyTotal?: string;
+    /** Interval suffix beside the yearly total, e.g. "/yr". */
+    intervalLabel?: string;
+    /** Struck-through no-discount monthly price. */
+    monthlyStrike?: string;
+    /** Effective monthly price. */
+    monthly: string;
+}
+export interface PlanCardView {
+    /** Pack count: the stable id of the tier. */
+    id: number;
+    name: string;
+    /** Free plan: shows "No monthly cost" instead of a price. */
+    isFree?: boolean;
+    isCurrent?: boolean;
+    isSelected?: boolean;
+    isPopular?: boolean;
+    price?: PlanCardPrice;
+    /** Entitlement lines, e.g. "2,000 AI Credits / mo". */
+    features: string[];
+}
+export interface PlanCardProps {
+    plan: PlanCardView;
+    onSelect: (id: number) => void;
+    labels?: Partial<PlanCardLabels>;
+}
+/** Selectable plan tile. The current plan is marked and not selectable. */
+export declare function PlanCard({ plan, onSelect, labels }: PlanCardProps): import("react").JSX.Element;
+/** Responsive grid of {@link PlanCard}s: one column on phones, stepping up with width. */
+export declare function PlanCardGrid({ plans, onSelect, labels, }: {
+    plans: PlanCardView[];
+    onSelect: (id: number) => void;
+    labels?: Partial<PlanCardLabels>;
+}): import("react").JSX.Element;
+export interface PlanTierOptionView {
+    id: number;
+    name: string;
+    isCurrent: boolean;
+    isSelected: boolean;
+    /** Formatted total with its interval, split so the suffix can be muted. */
+    total?: string;
+    intervalLabel?: string;
+    /** Entitlement summary line. */
+    summary: string;
+}
+/** Compact row to move an existing subscription between tiers. */
+export declare function PlanTierOption({ option, onSelect, labels, }: {
+    option: PlanTierOptionView;
+    onSelect: (id: number) => void;
+    labels?: Partial<PlanCardLabels>;
+}): import("react").JSX.Element;
+/** Monthly / Annual switch with an optional "Save N%" pill. */
+export declare function PricingToggle({ isAnnual, onToggle, savingsPercent, labels, }: {
+    isAnnual: boolean;
+    onToggle: () => void;
+    savingsPercent?: number | null;
+    labels?: Partial<PlanCardLabels>;
+}): import("react").JSX.Element;
+/** Collapsed "Have a promo code?" link that expands into an input. */
+export declare function PromoCodeInput({ value, onChange, labels, }: {
+    value: string;
+    onChange: (value: string) => void;
+    labels?: Partial<PlanCardLabels>;
+}): import("react").JSX.Element;
+/** "Pricing Explainer" popover. `onOpenModelList` opens the AI model list. */
+export declare function PlanInfoPopover({ onOpenModelList, labels, }: {
+    onOpenModelList: () => void;
+    labels?: Partial<PlanCardLabels>;
+}): import("react").JSX.Element;

package/dist/settings/PremiumModelsFrame.d.ts

@@ -0,0 +1,17 @@
+import type { ReactNode } from 'react';
+export interface PremiumModelsFrameProps {
+    enabled: boolean;
+    onEnabledChange: (enabled: boolean) => void;
+    title?: string;
+    description?: string;
+    /** The model table; greyed out and inert while premium models are off. */
+    children: ReactNode;
+    toggleTestId?: string;
+}
+/** Master switch for premium (third-party) models above the table of models to pick from. */
+export declare function PremiumModelsFrame({ enabled, onEnabledChange, title, description, children, toggleTestId, }: PremiumModelsFrameProps): import("react").JSX.Element;
+/** Provider cell of the model table: an optional logo before the provider's name. */
+export declare function ModelProviderLabel({ logo, children }: {
+    logo?: ReactNode;
+    children: ReactNode;
+}): import("react").JSX.Element;

package/dist/settings/ProfileCard.d.ts

@@ -0,0 +1,67 @@
+import { type ReactNode } from 'react';
+/** Every fixed string of the profile card. `ssoTooltip` prop wins over the label. */
+export interface ProfileCardLabels {
+    firstName: string;
+    lastName: string;
+    save: string;
+    cancel: string;
+    sso: string;
+    ssoTooltip: string;
+    change: string;
+    newEmailAddress: string;
+    emailPlaceholder: string;
+    /** Sentence under the new-email field. */
+    codeWillBeSent: string;
+    sendCode: string;
+    /** Heading of the verify step: "Verify new@example.com". */
+    verify: (email: string) => string;
+    codePlaceholder: string;
+    enterCodeHint: string;
+    confirm: string;
+    /** Resend button while cooling down: "Resend in 30s". */
+    resendIn: (seconds: number) => string;
+    resendCode: string;
+}
+export declare const DEFAULT_PROFILE_CARD_LABELS: ProfileCardLabels;
+export interface ProfileNameView {
+    /** Display name; "Unnamed" is the host's call. */
+    display: string;
+    isEditing: boolean;
+    givenName: string;
+    familyName: string;
+    onGivenNameChange: (value: string) => void;
+    onFamilyNameChange: (value: string) => void;
+    onStartEdit: () => void;
+    onSave: () => void;
+    onCancel: () => void;
+    isSaving: boolean;
+}
+export interface ProfileEmailChangeView {
+    step: 'enter' | 'verify';
+    newEmail: string;
+    onNewEmailChange: (value: string) => void;
+    onSendCode: () => void;
+    isSending: boolean;
+    code: string;
+    onCodeChange: (value: string) => void;
+    onConfirm: () => void;
+    isConfirming: boolean;
+    /** Seconds until a new code may be requested; 0 when allowed. */
+    cooldownSeconds: number;
+    onCancel: () => void;
+}
+export interface ProfileCardProps {
+    /** The picture with its change control. */
+    avatar: ReactNode;
+    name: ProfileNameView;
+    email: string;
+    /** Email is managed by the sign-in provider: shows an "SSO" marker instead of "Change". */
+    isSso: boolean;
+    onStartEmailChange: () => void;
+    /** Open email-change flow; hides the plain email row. */
+    emailChange?: ProfileEmailChangeView;
+    ssoTooltip?: string;
+    labels?: Partial<ProfileCardLabels>;
+}
+/** Profile identity: avatar, editable name, email and the inline email-change flow. */
+export declare function ProfileCard({ avatar, name, email, isSso, onStartEmailChange, emailChange, ssoTooltip, labels, }: ProfileCardProps): import("react").JSX.Element;