@aracreate/arm-ui 3.6.0

package/dist/index.d.mts

@@ -0,0 +1,1531 @@
+import * as react from 'react';
+import react__default, { CSSProperties, ReactNode } from 'react';
+import { HeaderProps, ToolbarProps } from 'react-big-calendar';
+export { View } from 'react-big-calendar';
+import { ClassValue } from 'clsx';
+import { ThemeProps } from '@radix-ui/themes';
+
+/**
+ * Skeleton — loading placeholder. Generalizes the local `Skel` helper and the
+ * inline `<div className="skeleton" .../>` blocks used in the users, user-detail,
+ * and home surfaces. Pulse animation + base color come from `.skeleton` in
+ * globals.css.
+ */
+interface SkeletonProps {
+    width?: number | string;
+    height?: number | string;
+    /** Border radius. Ignored when `circle` is set. Defaults to var(--radius-2). */
+    radius?: number | string;
+    /** Render as a circle (avatars). */
+    circle?: boolean;
+    /** Bottom margin. */
+    mb?: number | string;
+    className?: string;
+    style?: CSSProperties;
+}
+declare function Skeleton({ width, height, radius, circle, mb, className, style, }: SkeletonProps): react.JSX.Element;
+
+/**
+ * AccentHeader — the amber two-tone title bar Figma uses on cards, dialogs,
+ * and page banners (Target/Source Calendar, Preview, Upcoming Event, Confirm
+ * Logout, Terms hero). Build-once pattern per the design ledger: a solid
+ * `--accent-9` bar with a dark bold title, optionally with trailing controls
+ * (e.g. the Month/Week/Day toggle lives inside the bar on the Preview card).
+ *
+ * Figma refs: ui-ux/figma/crops/month-card.png, confirm-dialog.png.
+ */
+interface AccentHeaderProps {
+    title: ReactNode;
+    /** Right-aligned slot inside the bar (view toggles, actions). */
+    trailing?: ReactNode;
+    style?: CSSProperties;
+}
+declare function AccentHeader({ title, trailing, style }: AccentHeaderProps): react.JSX.Element;
+/**
+ * AccentCard — white panel with an AccentHeader bar and rounded corners
+ * (measured r≈14 @1728 → var(--radius-5)) plus the soft card shadow seen on
+ * every Figma card. The header is clipped by the card's radius.
+ */
+interface AccentCardProps extends AccentHeaderProps {
+    children: ReactNode;
+    /** Radix padding scale for the body. Defaults to "4"; use "0" for flush content. */
+    bodyPadding?: "0" | "1" | "2" | "3" | "4" | "5" | "6";
+}
+declare function AccentCard({ title, trailing, children, bodyPadding, style, }: AccentCardProps): react.JSX.Element;
+
+/**
+ * ConfirmDialog — the confirm/cancel prompt used for destructive or
+ * state-changing actions (Confirm Logout, Remove account, etc). Built on
+ * Radix `AlertDialog` with a plain title/description and bottom-right
+ * actions, matching the app's other dialogs (e.g. ImportCalendarsDialog):
+ * neutral outline Cancel, amber-primary Confirm.
+ */
+interface ConfirmDialogProps {
+    /** Dialog title, rendered inside the AccentHeader bar. */
+    title: ReactNode;
+    /** Question / body copy. */
+    description: ReactNode;
+    /** Confirm button label. Defaults to "Yes". */
+    confirmLabel?: ReactNode;
+    /** Cancel button label. Defaults to "Cancel". */
+    cancelLabel?: ReactNode;
+    /** Called when the confirm action is activated (dialog still closes via AlertDialog.Action). */
+    onConfirm?: () => void;
+    /** Element that opens the dialog, rendered inside AlertDialog.Trigger. Omit for a fully controlled dialog. */
+    trigger?: ReactNode;
+    /** Controlled open state — omit for uncontrolled, trigger-driven usage. */
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+}
+declare function ConfirmDialog({ title, description, confirmLabel, cancelLabel, onConfirm, trigger, open, onOpenChange, }: ConfirmDialogProps): react.JSX.Element;
+
+/**
+ * PausedBadge — small outline pill marking a paused account. Sits top-left
+ * of AccountCard, immediately right of the avatar. White fill, 1px
+ * `--color-paused` border + text, full radius pill, a tiny circled pause
+ * glyph, then the label.
+ *
+ * Figma ref: ui-ux/figma/crops/account-card-menu.png. Measured 59×17 @1728
+ * (≈49×14 app scale) — genuinely tiny, so this is built directly rather than
+ * from Radix `Badge` (Badge's smallest size/padding can't hit an 18px
+ * height). Fit level: Light customization.
+ *
+ * Deviation: the glyph inside the circle is rendered at 8px rather than the
+ * ~10px in the base spec — at 10px it collided with the circle's stroke at
+ * this scale, so it was sized down to keep the badge legible instead of
+ * cluttered.
+ */
+interface PausedBadgeProps {
+    label?: string;
+    style?: CSSProperties;
+}
+declare function PausedBadge({ label, style }: PausedBadgeProps): react.JSX.Element;
+
+/**
+ * AccountCard — the account tile used on the accounts grid: avatar + name +
+ * email, an optional PausedBadge, and a kebab menu (Pause/Resume, Delete).
+ *
+ * Figma refs: ui-ux/figma/crops/account-grid-clean.png (clean 4×2 grid),
+ * ui-ux/figma/crops/account-card-menu.png (paused card, kebab menu open).
+ * Fit level: Direct/Light — Card composition + DropdownMenu with a native
+ * red item (no custom menu styling needed).
+ */
+interface AccountCardProps {
+    name: string;
+    email: string;
+    avatarSrc?: string;
+    /** Shows PausedBadge next to the avatar and swaps the kebab's first item to "Resume". */
+    paused?: boolean;
+    onPause?: () => void;
+    onResume?: () => void;
+    onDelete?: () => void;
+    /** Makes the card clickable (kebab menu excluded) — e.g. open the account's sync setup. */
+    onClick?: () => void;
+    /** Small overlay badge on the avatar's corner — e.g. a provider logo. */
+    badge?: ReactNode;
+    /** Tints the avatar with the account's color token (e.g. "var(--blue-9)"). */
+    accentColor?: string;
+    style?: CSSProperties;
+}
+declare function AccountCard({ name, email, avatarSrc, paused, onPause, onResume, onDelete, onClick, badge, accentColor, style, }: AccountCardProps): react.JSX.Element;
+
+/**
+ * MonthGrid — the month calendar grid from the Preview card (Target/Source
+ * Calendar → Preview flow). Pure Date math, no date library: weeks start
+ * Monday (Figma starts its week on Mon), and only the leading/trailing
+ * adjacent-month days needed to complete the first and last week are
+ * rendered (not a fixed 6 rows).
+ *
+ * Fit level: Truly custom (only genuine no-Radix-equivalent gap — layout via
+ * CSS grid, no date lib).
+ * Figma refs: ui-ux/figma/crops/preview-month.png, ui-ux/figma/crops/month-card.png.
+ */
+interface MonthGridProps {
+    /** Any date within the month to display. */
+    month: Date;
+    /** Called with the first-of-month date when the prev/next chevrons are used. */
+    onMonthChange?: (date: Date) => void;
+    /** Days that should render an event dot (matched by calendar day, time ignored). */
+    events?: Date[];
+    /** Per-day colored dots keyed by `date.toDateString()` → CSS color tokens (max 3 shown).
+     * Takes precedence over `events` when a day has an entry. */
+    dayDots?: Map<string, string[]>;
+    /** Defaults to `new Date()`. Pass a fixed date for stable/deterministic visuals. */
+    today?: Date;
+    /** Makes day cells clickable buttons; receives the clicked date. */
+    onSelectDay?: (date: Date) => void;
+    style?: CSSProperties;
+}
+declare function MonthGrid({ month, onMonthChange, events, dayDots, today, onSelectDay, style, }: MonthGridProps): react.JSX.Element;
+
+interface ToastProps {
+    msg: string;
+    color?: "green" | "red";
+    onDone: () => void;
+    durationMs?: number;
+}
+/** Fixed bottom-right auto-dismissing confirmation — the shared shape for
+ * "did my save work" feedback across the app (previously a one-off local
+ * component on AdminUserDetailPage only). */
+declare function Toast({ msg, color, onDone, durationMs }: ToastProps): react.JSX.Element;
+
+/**
+ * IconTile — the app's one icon-well treatment: a bordered rounded-square
+ * tile around a feature/action/logo icon. Used for app-shortcut icons,
+ * provider/account logos, and empty-state icons alike, so every "icon in a
+ * box" in the app reads as the same component instead of one-off inline
+ * styles with drifting border/radius/fill choices.
+ */
+interface IconTileProps {
+    children: ReactNode;
+    /** Tile size — defaults to var(--space-7), the size used across the app. */
+    size?: string;
+}
+declare function IconTile({ children, size }: IconTileProps): react.JSX.Element;
+
+interface CardFooterProps {
+    children: ReactNode;
+    justify?: "end" | "between";
+    /** Omit the top margin when the content above already ends with its own
+     * bottom margin/gap (e.g. Flex `mb`) — avoids doubled spacing. */
+    noTopMargin?: boolean;
+    /** Match the enclosing container's own padding so the negative-margin
+     * breakout lines up flush with its edges. Defaults to Card size="3"'s
+     * var(--space-5); pass the container's actual padding otherwise (e.g.
+     * a default-size Card's var(--space-3), StepCard's var(--space-4)). */
+    pad?: string;
+    /** Match the enclosing container's own corner radius so the footer's
+     * bottom corners line up. Defaults to Card size="3"+'s var(--radius-5);
+     * default-size Card (1-2) uses var(--radius-4). */
+    radius?: string;
+}
+/** Full-bleed gray action bar for the bottom of a Card — breaks out of the
+ * Card's own padding so it reads as a distinct footer strip, same shape as
+ * ImportCalendarsDialog's button row. Use for any Card/Dialog that ends in
+ * one or more buttons instead of a plain Separator + Flex. */
+declare function CardFooter({ children, justify, noTopMargin, pad, radius, }: CardFooterProps): react.JSX.Element;
+
+interface EventBlockProps {
+    title: string;
+    time: string;
+    detail?: string;
+    color: string;
+    locked?: boolean;
+}
+/** Solid-colored calendar-event chip — a filled block in the sync's own
+ * color with white text, matching OneCal's SYNC PREVIEW mockups. Used
+ * anywhere a real (or sample) event needs to read as "this calendar's
+ * color", not a thin accent bar + badge. */
+declare function EventBlock({ title, time, detail, color, locked }: EventBlockProps): react.JSX.Element;
+
+interface DataTableRowProps {
+    children: ReactNode;
+    /** Grid/flex layout for the row — e.g. `{ display: "grid", gridTemplateColumns: "2fr 1fr 1fr" }`.
+     * Column shape varies per table, so it's always supplied by the caller rather than fixed here. */
+    style?: React.CSSProperties;
+    /** Draws the row separator above every row except the first — pass `idx > 0`. */
+    showBorder?: boolean;
+    /** Makes the row a keyboard-focusable, clickable target (role="button", Enter/Space activation,
+     * amber focus ring). Omit for plain display rows (most tables — see CalendarSyncsPage, which
+     * keeps its per-cell action button interactive instead of the row). */
+    onActivate?: () => void;
+    /** Highlights the row as the current selection — only meaningful with `onActivate`. */
+    selected?: boolean;
+    className?: string;
+    "aria-label"?: string;
+}
+/** Shared plumbing for the dense data-table-row pattern used across the admin
+ * users/audit tables, calendar syncs list, and home activity feed: hover
+ * wash, optional keyboard-accessible selection, and the border-top-except-
+ * first-row rule. Deliberately layout-agnostic — each table's column count
+ * and widths differ (see globals.css's own `.data-table-row` comment history),
+ * so `style` carries the grid/flex shape and `children` carries the cells;
+ * this component only owns the classes and interaction/border wiring that
+ * were previously hand-copied into five separate page files. */
+declare function DataTableRow({ children, style, showBorder, onActivate, selected, className, "aria-label": ariaLabel, }: DataTableRowProps): react.JSX.Element;
+
+interface MetricCardProps {
+    label: string;
+    value: string;
+    delta: string;
+    deltaDir: "up" | "down" | "flat";
+    /** Which delta direction reads as "good" for this metric — e.g. "up" for
+     * revenue, "down" for error rate. Colors the delta text green/red. */
+    goodDirection: "up" | "down";
+    /** Status-dot color (top-right corner) — pass a semantic token
+     * (`var(--green-9)`, `var(--red-9)`, `var(--amber-9)`, `var(--gray-9)`). */
+    statusColor: string;
+    /** Recent-history series for the inline sparkline. */
+    sparkline: number[];
+}
+/** Admin/platform stat tile: label + status dot, big value, delta indicator,
+ * inline sparkline. Used for dashboard "platform health" grids. */
+declare function MetricCard({ label, value, delta, deltaDir, goodDirection, statusColor, sparkline, }: MetricCardProps): react.JSX.Element;
+
+interface AppCardProps {
+    href: string;
+    icon: ReactNode;
+    name: string;
+    description: string;
+}
+/** Workspace-shortcut tile: icon + name header, description, "Open" CTA
+ * footer. Used for the home dashboard's granted-apps grid. */
+declare function AppCard({ href, icon, name, description }: AppCardProps): react.JSX.Element;
+
+interface ActivityRowProps {
+    /** Short colored tag, e.g. "AUTH", "ROLE", "PROV" — matches an audit-log
+     * action code. */
+    tag: string;
+    /** Tag color (semantic token, e.g. `var(--violet-9)`). */
+    tagColor: string;
+    msg: string;
+    actor?: string;
+    timeAgo?: string;
+    timestamp: string;
+    showBorder: boolean;
+}
+/** Sentry-style dense activity-feed row: colored type tag, message + actor,
+ * optional relative time, and a right-aligned monospace timestamp. Built on
+ * DataTableRow for the shared hover/border plumbing. */
+declare function ActivityRow({ tag, tagColor, msg, actor, timeAgo, timestamp, showBorder, }: ActivityRowProps): react.JSX.Element;
+
+interface DashboardErrorCardProps {
+    onRetry: () => void;
+    /** Defaults to "Couldn't load your dashboard." */
+    message?: string;
+}
+/** Generic "failed to load" state: warning icon, message, Retry CTA. */
+declare function DashboardErrorCard({ onRetry, message }: DashboardErrorCardProps): react.JSX.Element;
+
+interface PaginationProps {
+    /** 1-based. */
+    currentPage: number;
+    totalPages: number;
+    onPageChange: (page: number) => void;
+    /** Pages shown either side of the current one. */
+    siblingCount?: number;
+    /** Adds jump-to-first / jump-to-last controls. */
+    showFirstLast?: boolean;
+    /** Radix control size. */
+    size?: "1" | "2";
+}
+declare function Pagination({ currentPage, totalPages, onPageChange, siblingCount, showFirstLast, size, }: PaginationProps): react.JSX.Element;
+
+/** Radix space-scale layout widths. Originally a subset of the app's
+ * src/lib/layout-tokens.ts covering only what this package's own components
+ * reference; now also exported so consumers stop hand-rolling their own
+ * copies (arm-admin had none at all, and core-fe carries a 5-constant
+ * fork). Values must match the app's copy — see README.md's "Files
+ * duplicated from the app". */
+declare const layout: {
+    readonly contentMax: "calc(15 * var(--space-9) + var(--space-5))";
+    readonly accountCardW: "calc(3 * var(--space-9) + var(--space-8))";
+    readonly accountCardMinH: "calc(2 * var(--space-9) - var(--space-2))";
+    readonly monthTitleMinW: "calc(3 * var(--space-9) - var(--space-1))";
+    readonly bigCalendarH: "calc(10 * var(--space-9))";
+    readonly sidebarColBasis: "calc(4 * var(--space-9) - var(--space-2))";
+    readonly sidebarColMin: "calc(3 * var(--space-9) + var(--space-6))";
+    readonly syncColMin: "calc(5 * var(--space-9))";
+    readonly syncColWide: "calc(7 * var(--space-9) + var(--space-6))";
+    readonly dialogSm: "calc(6 * var(--space-9) - var(--space-2))";
+    readonly dialogBody: "calc(5 * var(--space-9) + var(--space-7))";
+    readonly authFormMax: "calc(6 * var(--space-9) + var(--space-8))";
+    readonly brandLogoMax: "calc(6 * var(--space-9) + var(--space-8) - var(--space-1))";
+    readonly connectedAccountCardH: "calc(var(--space-9) - var(--space-1))";
+    readonly dialogMd: "calc(6 * var(--space-9) + var(--space-6))";
+    readonly dialogLg: "calc(7 * var(--space-9) - var(--space-1))";
+    readonly emptyStateMax: "calc(10 * var(--space-9))";
+    readonly emptyStateCopyMax: "calc(6 * var(--space-9))";
+    readonly providerChooserMax: "calc(6 * var(--space-9) + var(--space-6))";
+    readonly auditColTime: "calc(var(--space-9) + var(--space-2))";
+    readonly auditColAction: "calc(var(--space-9) + var(--space-5) + var(--space-1))";
+    readonly searchFieldW: "calc(3 * var(--space-9) + var(--space-5) + var(--space-1))";
+    readonly settingsGridMin: "calc(5 * var(--space-9) + var(--space-5))";
+    readonly placeholderMd: "calc(6 * var(--space-9) + var(--space-4))";
+};
+
+/**
+ * One heading size per level, for every `<Heading>` in the platform.
+ *
+ * Headings used to pick a Radix `size` per instance, so the same `<h1>`
+ * rendered at 14.4px in the shell, 16.2px in a remote and 18px on Home, and
+ * an `<h3>` could equal its own `<h1>` or the 12.6px body copy. The level now
+ * decides the size: pass `size={headingSize[level]}` alongside `as={level}`.
+ *
+ * Values are Radix font-size steps, so they follow the Theme's `scaling`. At
+ * the platform's 90% that is h1 21.6px, h2 18px, h3 16.2px, h4 14.4px — every
+ * level one step apart and above body text (step 2, 12.6px).
+ */
+declare const headingSize: {
+    readonly h1: "6";
+    readonly h2: "5";
+    readonly h3: "4";
+    readonly h4: "3";
+};
+type HeadingLevel = keyof typeof headingSize;
+
+/** Duplicated from the app's src/lib/mock.ts Role type (not imported) so
+ * this package has no dependency back into the app. Keep in sync if the
+ * app's role set changes. */
+type Role = "admin" | "operator" | "user";
+declare const SHELL_HEADER_H = "var(--space-9)";
+interface NavItem {
+    label: string;
+    href: string;
+    Icon: React.ComponentType<{
+        width?: number;
+        height?: number;
+        style?: React.CSSProperties;
+    }>;
+    roles?: Role[];
+    children?: NavItem[];
+    end?: boolean;
+    root?: string;
+}
+interface SidebarUser {
+    name: string;
+    role: Role;
+    /** Profile photo URL. Omitted or unloadable falls back to the derived
+     * initials, so a consumer with no photo on the profile payload passes
+     * nothing and keeps the previous appearance. */
+    avatarSrc?: string;
+}
+interface SidebarDevRole {
+    role: Role;
+    email: string;
+    label: string;
+}
+interface SidebarProps {
+    collapsed: boolean;
+    onToggle?: () => void;
+    onClose?: () => void;
+    /** Nav items to render — the app owns its own route table (NAV_ITEMS). */
+    items: NavItem[];
+    /** Utility/meta hrefs (Settings, Admin Portal) that pin above the identity
+     * block instead of the main scrollable list. */
+    utilityHrefs: string[];
+    /** Currently signed-in user, or null/undefined if not authenticated. */
+    user?: SidebarUser | null;
+    onSignOut: () => void;
+    /** Calendar section only drills in once the app has at least one connected
+     * account — pass false to keep the global menu (e.g. no accounts yet). */
+    hasCalendarAccounts?: boolean;
+    brandLogoExpandedSrc?: string;
+    brandLogoCollapsedSrc?: string;
+    /** Where the account menu's Help entry opens, in a new tab. Omit to leave
+     * the entry out — there is no default, because a baked-in URL ships to every
+     * consumer whether or not that address is real. */
+    helpHref?: string;
+    /** Dev-only role switcher shown in the account menu — omit to hide it
+     * entirely (e.g. in a production build or a context with no such concept). */
+    devRoles?: SidebarDevRole[];
+    onDevRoleSelect?: (email: string) => void;
+    showDevRoles?: boolean;
+}
+declare function Sidebar({ collapsed, onToggle, onClose, items, utilityHrefs: utilityHrefsProp, user, onSignOut, hasCalendarAccounts, brandLogoExpandedSrc, brandLogoCollapsedSrc, helpHref, devRoles, onDevRoleSelect, showDevRoles, }: SidebarProps): react.JSX.Element;
+
+/**
+ * Single source of truth for status / role / activity / audit colors.
+ *
+ * Every consumer that renders a user's role, account status or an audit row
+ * previously defined its own map inline, and those copies had already started
+ * to drift — the admin portal's audit action map went stale twice while its
+ * action vocabulary grew, and only `tsc` caught it. Import from here instead.
+ *
+ * Two color conventions live side by side, matching how Radix is consumed:
+ *  - Radix accent names ("amber" | "blue" | ...) passed to <Badge color={...} />.
+ *  - Raw CSS-var tokens (e.g. "var(--green-9)") used for dots, tags and rails.
+ */
+declare const ROLE_META: Record<Role, {
+    label: string;
+    color: "amber" | "blue" | "gray";
+}>;
+declare const ROLE_LABELS: Record<Role, string>;
+/** Derived, not stored. `suspended` is an admin disabling the account;
+ * `inactive` is an approved account nobody has signed into lately. Approval
+ * state (pending / rejected) is a separate axis and gets its own badge —
+ * an account can be approved and suspended at the same time. */
+type UserStatus = "active" | "inactive" | "suspended";
+declare const STATUS_META: Record<UserStatus, {
+    label: string;
+    color: string;
+}>;
+type MetricStatus = "ok" | "warn" | "error";
+declare const METRIC_STATUS_COLOR: Record<MetricStatus, string>;
+type ActivityType = "auth" | "sync" | "role" | "provision" | "health" | "error";
+declare const ACTIVITY_META: Record<ActivityType, {
+    tag: string;
+    color: string;
+}>;
+/** The admin backend's own vocabulary — these strings are written by
+ * `AuditService.log` and must match it exactly. `action` is a plain varchar
+ * there, not a Postgres enum, so nothing but this map and a code review stops
+ * the two drifting apart. Add here whenever a new action is logged. */
+type AuditAction = "USER_UPDATED" | "USER_DISABLED" | "USER_ENABLED" | "USER_APPROVED" | "USER_REJECTED" | "SIGNUP_NOTIFICATIONS_ON" | "SIGNUP_NOTIFICATIONS_OFF" | "APPROVAL_EMAIL_RESENT" | "USER_DELETED" | "ADMIN_GRANTED" | "ADMIN_REVOKED" | "ADMIN_ROLE_CHANGED" | "SESSION_REVOKED" | "APP_GRANTED" | "APP_REVOKED";
+/** `badge` is for <Badge color={...} />, `tag`/`color` for the compact
+ * monospace tag used in per-user activity lists.
+ *
+ * `color` is step **11**, not step 9. Step 9 is Radix's solid-background step
+ * and was never a text colour: used as one it gave the amber UPD tag 1.58:1 on
+ * white, teal 3.07:1 and orange 2.97:1 — the amber one close to invisible
+ * rather than merely low-contrast, at 10.8px where the requirement is
+ * strictest. Step 11 is the scale's low-contrast *text* step and clears 4.5:1
+ * for every scale used here (4.51-6.17 on white).
+ *
+ * These tags render inside a Card, so white is the surface that matters. On a
+ * #F6F6F6 surface amber, teal, green and orange land at 4.17-4.36 — under AA —
+ * so do not move this tag onto the page background without re-measuring.
+ *
+ * `badge` is untouched: it feeds Radix's own <Badge>, which pairs its own text
+ * and background steps. */
+declare const AUDIT_ACTION_META: Record<AuditAction, {
+    label: string;
+    tag: string;
+    badge: "amber" | "gray" | "yellow" | "red" | "green";
+    color: string;
+}>;
+/** Falls back rather than throwing: the backend can log an action this build
+ * has never heard of, and an unknown row must still render. */
+declare function auditActionMeta(action: string): {
+    label: string;
+    tag: string;
+    badge: "amber" | "gray" | "yellow" | "red" | "green";
+    color: string;
+};
+
+declare function AuthCard({ children }: {
+    children: React.ReactNode;
+}): react.JSX.Element;
+
+declare function BrandPanel(): react.JSX.Element;
+
+declare function GoogleIcon(): react.JSX.Element;
+
+declare function MicrosoftIcon(): react.JSX.Element;
+
+declare function OtpInput({ value, onChange, disabled }: {
+    value: string;
+    onChange: (v: string) => void;
+    disabled?: boolean;
+}): react.JSX.Element;
+
+interface OtpVerifyStepProps {
+    email: string;
+    title: React.ReactNode;
+    subtitle: React.ReactNode;
+    code: string;
+    onCodeChange: (value: string) => void;
+    otpDevHint: string | null;
+    error: string | null;
+    /** Optional inline recovery action shown next to `error` — for errors
+     * whose message describes a fix ("Start the signup process again") but
+     * that otherwise have no button actually doing it. */
+    errorAction?: {
+        label: string;
+        onClick: () => void;
+    };
+    busy: boolean;
+    otpExpiresAt: number | null;
+    otpSecondsLeft: number;
+    resendCooldown: number;
+    onResend: () => void;
+    onUseDifferentEmail: () => void;
+}
+declare function OtpVerifyStep({ email, title, subtitle, code, onCodeChange, otpDevHint, error, errorAction, busy, otpExpiresAt, otpSecondsLeft, resendCooldown, onResend, onUseDifferentEmail, }: OtpVerifyStepProps): react.JSX.Element;
+
+/** Duplicated from the app's src/lib/mock.ts (not imported) so this package
+ * has no dependency back into the app. Keep in sync if the app's type changes. */
+type CalendarProvider = "google" | "microsoft";
+/** Renders the correct provider logo for a calendar account. Used in the
+ * provider chooser, consent screen, and per-account badges so a Google account
+ * and a Microsoft account are always distinguishable at a glance (color tells
+ * you WHICH account; this icon tells you WHICH provider). */
+declare function ProviderIcon({ provider }: {
+    provider: CalendarProvider;
+}): react.JSX.Element;
+/** Human-readable provider names for consent copy and the chooser. */
+declare const PROVIDER_LABEL: Record<CalendarProvider, string>;
+
+type TopbarTitleRow = [
+    prefix: string,
+    section: string,
+    sectionHref: string,
+    page: string,
+    exact?: boolean
+];
+type TopbarAdminTitleRow = [prefix: string, page: string];
+interface TopbarProps {
+    onSearchOpen: () => void;
+    onMenuOpen: () => void;
+    showMenu: boolean;
+    /** Override the breadcrumb route tables — defaults to arm-ui's own routes. */
+    titles?: TopbarTitleRow[];
+    adminTitles?: TopbarAdminTitleRow[];
+}
+declare function Topbar({ onSearchOpen, onMenuOpen, showMenu, titles, adminTitles, }: TopbarProps): react.JSX.Element;
+
+type SearchResultType = "app" | "people" | "page";
+interface SearchResult {
+    id: string;
+    title: string;
+    subtitle: string;
+    href: string;
+    type: SearchResultType;
+}
+interface SearchOverlayProps {
+    open: boolean;
+    onClose: () => void;
+    /** The searchable pool for the current user — the app owns its own
+     * content/routes and any role-based filtering before passing this in. */
+    results: SearchResult[];
+    onSelectResult: (result: SearchResult) => void;
+    title?: string;
+    placeholder?: string;
+}
+declare function SearchOverlay({ open, onClose, results: resultPool, onSelectResult, title, placeholder, }: SearchOverlayProps): react.JSX.Element;
+
+/** Duplicated from the app's src/lib/calendar-mock.ts (not imported) so this
+ * package has no dependency back into the app. Keep in sync if the app's
+ * calendar data model changes. */
+interface CalendarAccountCalendar {
+    id: string;
+    accountId: string;
+    name: string;
+    isPrimary: boolean;
+    /** Drives the import dialog's color dot, the legend, and month/week dots. */
+    colorToken: string;
+}
+interface CalendarAccount {
+    id: string;
+    provider: CalendarProvider;
+    email: string;
+    displayName: string;
+    initials: string;
+    authStatus: "active" | "reauth" | "failed";
+    calendars: CalendarAccountCalendar[];
+}
+declare function findCalendar(accounts: CalendarAccount[], calendarId: string): {
+    account: CalendarAccount;
+    calendar: CalendarAccountCalendar;
+} | undefined;
+interface AvailabilityBlock {
+    id: string;
+    calendarId: string;
+    accountId: string;
+    /** 0 = Monday … 6 = Sunday (week-relative) */
+    day: number;
+    startHour: number;
+    startMinute: number;
+    endHour: number;
+    endMinute: number;
+    title: string;
+    description?: string;
+    location?: string;
+    /** Marked private at the source — always renders as the sync's tag alone,
+     * regardless of that sync's field toggles. */
+    isPrivate: boolean;
+}
+interface DatedAvailabilityBlock extends AvailabilityBlock {
+    date: Date;
+}
+interface ResolvedBlock extends DatedAvailabilityBlock {
+    /** True when this occurrence is showing on a calendar it wasn't natively
+     * created on (i.e. merged in via a sync), as opposed to its home calendar. */
+    isMerged: boolean;
+}
+type SyncStatus = "synced" | "syncing" | "error";
+interface CalendarSync {
+    id: string;
+    name: string;
+    targetCalendarId: string;
+    sourceCalendarIds: string[];
+    status: SyncStatus;
+    lastSyncedLabel?: string;
+    showTitle: boolean;
+    showDescription: boolean;
+    showLocation: boolean;
+    /** The sync's tag — the label its events carry on the target calendar.
+     * Optional so existing callers keep compiling; treat an absent value as the
+     * default, "Busy". */
+    tagLabel?: string;
+}
+
+interface CalendarDayHeaderProps extends HeaderProps {
+    /** "Today" reference for the filled-circle marker. Defaults to the real
+     * current date — pass a fixed date for demo/mock consistency. */
+    today?: Date;
+}
+/** Week-view column header — replaces RBC's plain "22 Mon" label with a
+ * weekday caption + a filled amber circle on today's date number, matching
+ * the OneCal reference's today marker instead of the near-invisible
+ * `.rbc-today` background wash. */
+declare function CalendarDayHeader({ date, today }: CalendarDayHeaderProps): react.JSX.Element;
+
+/** OneCal-style flat calendar list (logo + name/email + control). */
+declare function CalendarPickList({ accounts, mode, sourceCalendarIds, targetCalendarId, takenSourceIds, onToggleSource, onSelectTarget, fill, }: {
+    accounts: CalendarAccount[];
+    mode: "sources" | "target";
+    sourceCalendarIds: string[];
+    targetCalendarId: string | null;
+    takenSourceIds: Set<string>;
+    onToggleSource: (calendarId: string) => void;
+    onSelectTarget: (calendarId: string) => void;
+    /** Fill parent and scroll internally (step 2 dual lists). */
+    fill?: boolean;
+}): react.JSX.Element;
+
+/** DS-native replacement for react-big-calendar's default toolbar — pill nav
+ * arrows + Today button (left), label (center), Week/Month switch (right).
+ * All logic stays RBC's; this only swaps the rendered chrome.
+ * Props typed loosely (any event/resource) since RBC's Components<TEvent>
+ * requires the toolbar to accept ToolbarProps<TEvent>, not our own event type. */
+declare function CalendarToolbar({ label, view, onNavigate, onView, }: ToolbarProps<object, object>): react.JSX.Element;
+
+declare const PROVIDER_META: Record<CalendarProvider, {
+    label: string;
+    description: string;
+}>;
+/** Provider connect buttons — bordered, spaced action rows with hover / press /
+ * focus / connecting states (`.provider-choice` in globals.css). */
+declare function ConnectProviderList({ connectingProvider, failedProvider, exhausted, onConnect, }: {
+    connectingProvider: CalendarProvider | null;
+    failedProvider: CalendarProvider | null;
+    /** True when the failure is "no more mock accounts for this provider" —
+     * not a real error, so Retry can't help and the copy should say so. */
+    exhausted?: boolean;
+    onConnect: (provider: CalendarProvider) => void;
+}): react.JSX.Element;
+
+/** Compact horizontal connected-account card — fills its grid cell (max 4 / row). */
+declare function ConnectedAccountCard({ account, onRemove, onReconnect, onClick, }: {
+    account: CalendarAccount;
+    onRemove: () => void;
+    onReconnect?: () => void;
+    /** Opens account detail (calendars) — kebab clicks do not fire this. */
+    onClick?: () => void;
+}): react.JSX.Element;
+
+interface EmptyCardProps {
+    icon: ReactNode;
+    title: string;
+    description?: string;
+    action?: ReactNode;
+    /**
+     * Heading level for `title`. Defaults to `h2`.
+     *
+     * Radix's `Heading` renders an `h1` when given no `as`, which is what this
+     * component did — so every empty state emitted a second top-level heading
+     * underneath the shell's own page-title `h1`. A screen-reader user
+     * navigating by heading heard "Security", then "Nobody is suspended", as two
+     * peers. `h2` is right for the common case, because the shell owns the `h1`
+     * on every page this renders inside.
+     *
+     * It stays configurable because this also renders as a generic centered
+     * message — a 403, an unbuilt section — where the surrounding outline may
+     * differ.
+     */
+    headingAs?: "h1" | "h2" | "h3" | "h4";
+}
+/** Cardless centered empty state — icon, heading, copy, action, no border/
+ * background/shadow, matching Vercel's flat "Continue to X" / "Connect a
+ * calendar" pattern (see ConnectProviderRows, which uses the same shape)
+ * instead of a bordered box floating in the page. */
+declare function EmptyCard({ icon, title, description, action, headingAs, }: EmptyCardProps): react.JSX.Element;
+
+interface ImportCalendarsDialogProps {
+    /** Account catalog whose calendars are offered. Null closes the dialog. */
+    account: CalendarAccount | null;
+    onOpenChange: (open: boolean) => void;
+    /** Called with checked calendar ids when the user confirms. */
+    onImport: (selectedCalendarIds: string[]) => void;
+    /** Pre-checked calendar ids (manage mode). Defaults to all calendars on `account`. */
+    initiallySelectedIds?: string[];
+    /**
+     * Calendars whose checkbox cannot be changed — the caller has a rule that
+     * forbids it, such as a sync depending on the calendar.
+     *
+     * The row keeps its current state and still counts toward the result — it
+     * simply cannot be changed. Without this a caller can only disable every row
+     * or none, so a row looks freely tickable right up to the moment the user is
+     * told no.
+     *
+     * Rendered as `data-disabled="true"`, which the package's own
+     * `.calendar-picker-row` rules already style.
+     */
+    disabledIds?: string[];
+    /** Shown beside each disabled row, saying why it can't be changed. */
+    disabledReason?: string;
+    title?: string;
+    description?: string;
+    confirmLabel?: string;
+}
+/** Choose / change which calendars belong to a connected account — OneCal
+ * import step; also reused from the account detail popup to edit selection. */
+declare function ImportCalendarsDialog({ account, onOpenChange, onImport, initiallySelectedIds, disabledIds, disabledReason, title, description, confirmLabel, }: ImportCalendarsDialogProps): react.JSX.Element;
+
+/** The stand-in event the preview transforms. Not the user's data — see
+ * `SyncPreviewRailProps.sampleEvent`. */
+interface SyncPreviewSampleEvent {
+    title: string;
+    time: string;
+    location: string;
+    description: string;
+}
+interface SyncPreviewRailProps {
+    hasSources: boolean;
+    hasTarget: boolean;
+    sourceLabel?: string;
+    targetLabel?: string;
+    showTitle: boolean;
+    showDescription: boolean;
+    showLocation: boolean;
+    /**
+     * The sync's tag — the label its blocker events carry on the target calendar.
+     * Shown on its own when titles are hidden, and appended to the title when
+     * they are shown. Defaults to "Busy" for a caller that has no tag to pass.
+     */
+    tagLabel?: string;
+    /**
+     * CSS colour the posted block is painted, matching whatever colour the sync
+     * writes its events in on the target calendar. Omitted keeps the rail's own
+     * amber, which is what a sync that has chosen no colour actually gets — the
+     * calendar's default.
+     *
+     * A colour, not a provider's colour *id*: this library cannot map Google's
+     * palette (or anyone's) without depending on a backend, so the caller
+     * resolves the id and passes the result.
+     */
+    accentColor?: string;
+    /**
+     * The stand-in event the preview transforms. It is illustrative, never the
+     * user's real data — override it to match your product's vocabulary.
+     *
+     * The rail always labels it as an example: an unannounced fabricated event
+     * reads as stray fixture data in a real app, which is exactly how this was
+     * first reported.
+     */
+    sampleEvent?: SyncPreviewSampleEvent;
+}
+/**
+ * Competitor-style SYNC PREVIEW (OneCal):
+ * - Source always shows the original event (never rewritten by field toggles).
+ * - Target shows the single block we post — title/location/description follow
+ *   sync settings, and its title always carries the sync's tag (the tag alone
+ *   when titles are off, `Gym - (Busy)` when they are on).
+ */
+declare function SyncPreviewRail({ hasSources, hasTarget, sourceLabel, targetLabel, showTitle, showDescription, showLocation, tagLabel, accentColor, sampleEvent, }: SyncPreviewRailProps): react.JSX.Element;
+
+/** Guided first-run stepper on /calendar — OneCal numbered steps, our DS. */
+declare function OnboardingStepper({ current }: {
+    current: number;
+}): react.JSX.Element;
+/** @deprecated Prefer OnboardingStepper. */
+declare function OnboardingStepDots({ current, total }: {
+    current: number;
+    total?: number;
+}): react.JSX.Element;
+
+interface MiniMonthPickerProps {
+    cursor: Date;
+    onSelect: (d: Date) => void;
+    /** "Today" reference for the amber-ring marker. Defaults to the real
+     * current date — pass a fixed date for demo/mock consistency. */
+    today?: Date;
+}
+/** Compact date-jump picker for the calendar sidebar — OneCal-style layout
+ * (month nav + 7-col day grid, selected day filled), rebuilt on our own
+ * tokens/colors (amber selection, not blue). Clicking a day jumps the main
+ * grid's cursor to that date. */
+declare function MiniMonthPicker({ cursor, onSelect, today }: MiniMonthPickerProps): react.JSX.Element;
+
+interface WizardStepMeta {
+    n: string;
+    title: string;
+    description: string;
+}
+/**
+ * Full-width OneCal-style stepper.
+ * Layout per segment: [circle] title / description — generous padding so
+ * labels never collapse into the badge or each other.
+ */
+declare function WizardStepper({ steps, current, }: {
+    steps: readonly WizardStepMeta[];
+    current: number;
+}): react.JSX.Element;
+
+interface AccountCalendarsDialogProps {
+    /** The account to show, resolved by the app — null closes the dialog. */
+    account: CalendarAccount | null;
+    /** The account's full available-calendars catalog (may include calendars
+     * not currently imported) — used by "Change calendars". */
+    catalog: CalendarAccount | null;
+    onOpenChange: (open: boolean) => void;
+    onRemoveCalendar: (account: CalendarAccount, calendar: CalendarAccountCalendar) => void;
+    onSaveCalendars: (account: CalendarAccount, selectedCalendars: CalendarAccountCalendar[]) => void;
+    onReconnect?: (accountId: string) => void;
+}
+/** Account detail popup — view calendars, remove one, or change which are imported. */
+declare function AccountCalendarsDialog({ account, catalog, onOpenChange, onRemoveCalendar, onSaveCalendars, onReconnect, }: AccountCalendarsDialogProps): react.JSX.Element;
+
+interface BigCalendarViewProps {
+    blocks: ResolvedBlock[];
+    view: "week" | "month";
+    onViewChange: (v: "week" | "month") => void;
+    date: Date;
+    onNavigate: (d: Date) => void;
+    /** Connected accounts — used to resolve each block's calendar color. */
+    accounts: CalendarAccount[];
+    /** "Today" reference for RBC's own now-marker and CalendarDayHeader's
+     * circle. Defaults to the real current date — pass a fixed date for
+     * demo/mock consistency (RBC's own today and this component's header
+     * must agree, or two conflicting "today" indicators appear). */
+    today?: Date;
+}
+/** Real hour-grid week/month calendar via react-big-calendar (React 19
+ * compatible), restyled with our Radix tokens instead of its default CSS —
+ * see big-calendar-overrides.css. Renders our own event card (title, time
+ * range, location) via `components.event`, colored per calendar via
+ * `eventPropGetter`. */
+declare function BigCalendarView({ blocks, view, onViewChange, date, onNavigate, accounts, today, }: BigCalendarViewProps): react.JSX.Element;
+
+interface SyncDetailsDialogProps {
+    sync: CalendarSync | null;
+    /** Connected accounts — used to resolve source/target calendar names. */
+    accounts: CalendarAccount[];
+    onOpenChange: (open: boolean) => void;
+    onEdit: (syncId: string) => void;
+}
+/** OneCal-style View Details — flat label/value summary of sync config. */
+declare function SyncDetailsDialog({ sync, accounts, onOpenChange, onEdit }: SyncDetailsDialogProps): react.JSX.Element;
+
+interface UseConnectAccountOptions {
+    /** Currently connected accounts — passed to `connectProvider` so it can
+     * discover an account not already connected. */
+    accounts: CalendarAccount[];
+    /** Performs the actual "discover an account for this provider" round
+     * trip (real OAuth flow in a real app; the app's own mock/API layer
+     * today). Resolves null when no more accounts are available for that
+     * provider — not an error, `exhausted` distinguishes the two. */
+    connectProvider: (provider: CalendarProvider, connectedAccountIds: string[]) => Promise<CalendarAccount | null>;
+    /** Called once the user confirms which calendars to import for the
+     * newly-discovered account. */
+    onAccountAdded: (account: CalendarAccount) => void;
+    /** Called after `onAccountAdded` — e.g. navigate to the accounts list. */
+    onImported?: () => void;
+}
+/** Shared "discover account → import calendars" flow behind connecting a
+ * provider. Click a provider → brief spinner (no separate consent page) →
+ * ImportCalendarsDialog opens with that account's calendars → confirming
+ * adds the account and calls `onImported`. */
+declare function useConnectAccount({ accounts, connectProvider, onAccountAdded, onImported }: UseConnectAccountOptions): {
+    connectingProvider: CalendarProvider | null;
+    pendingAccount: CalendarAccount | null;
+    failedProvider: CalendarProvider | null;
+    exhausted: boolean;
+    connect: (provider: CalendarProvider) => void;
+    confirmImport: (selectedCalendarIds: string[]) => void;
+    cancelImport: () => void;
+    dismissError: () => void;
+};
+
+interface AddAccountMenuProps extends UseConnectAccountOptions {
+    variant?: "button" | "tile";
+    /** Optional custom trigger; overrides `variant`. Must be a single element. */
+    trigger?: ReactNode;
+}
+/** "+ Connect Account" — button or dashed tile; opens provider picker then
+ * ImportCalendarsDialog. Trigger must be a single React element (Radix
+ * Themes DropdownMenu.Trigger always uses asChild). */
+declare function AddAccountMenu({ variant, trigger, accounts, connectProvider, onAccountAdded, onImported, }: AddAccountMenuProps): react.JSX.Element;
+
+type ConnectProviderRowsProps = UseConnectAccountOptions;
+/** Connect-first UI — used on Manage Syncs (section home) and Accounts when
+ * no accounts are connected yet. Fills the content slot and centers as one
+ * composition; inner spacing matches Home empty cards (`py="6"`, `gap="3"`). */
+declare function ConnectProviderRows({ accounts, connectProvider, onAccountAdded, onImported }: ConnectProviderRowsProps): react.JSX.Element;
+
+interface CalendarMergedViewProps {
+    accounts: CalendarAccount[];
+    view: "week" | "month";
+    setView: (v: "week" | "month") => void;
+    hideClones: boolean;
+    setHideClones: (v: boolean) => void;
+    /** Union of source calendar ids across all syncs, excluding paused accounts. */
+    mergedCalendarIds: Set<string>;
+    /** mergedCalendarIds minus the user's legend hide toggles. */
+    visibleCalendarIds: Set<string>;
+    toggleCalendarVisible: (calendarId: string) => void;
+    getVisibleBlocksInRange: (start: Date, end: Date) => ResolvedBlock[];
+    /** "Manage accounts" link at the bottom of the legend rail. */
+    manageAccountsHref: string;
+    /** "Today" reference — defaults to the real current date; pass a fixed
+     * date for demo/mock consistency (also forwarded to BigCalendarView so
+     * the two don't disagree on what "today" is). */
+    today?: Date;
+}
+/** OneCal Calendar View chrome for a read-only merged grid — left rail
+ * (mini month picker + account-grouped visibility legend + hide synced +
+ * manage) + week/month hour grid. All calendar data and app navigation are
+ * supplied by the caller; this component owns only its own UI state
+ * (cursor date, collapsed account groups, narrow-viewport sidebar toggle). */
+declare function CalendarMergedView({ accounts, view, setView, hideClones, setHideClones, mergedCalendarIds, visibleCalendarIds, toggleCalendarVisible, getVisibleBlocksInRange, manageAccountsHref, today, }: CalendarMergedViewProps): react.JSX.Element;
+
+declare const colors: {
+    readonly primary: {
+        readonly 50: "#fef7e6";
+        readonly 100: "#fdecc0";
+        readonly 200: "#fbd886";
+        readonly 300: "#f9c44c";
+        readonly 400: "#f7b01f";
+        readonly 500: "#F9BF3B";
+        readonly 600: "#e6a82d";
+        readonly 700: "#cc8f1f";
+        readonly 800: "#b37611";
+        readonly 900: "#995d03";
+    };
+    readonly secondary: {
+        readonly 50: "#f8fafc";
+        readonly 100: "#f1f5f9";
+        readonly 200: "#e2e8f0";
+        readonly 300: "#cbd5e1";
+        readonly 400: "#94a3b8";
+        readonly 500: "#64748b";
+        readonly 600: "#475569";
+        readonly 700: "#334155";
+        readonly 800: "#1e293b";
+        readonly 900: "#0f172a";
+    };
+    readonly success: {
+        readonly 50: "#f0fdf4";
+        readonly 100: "#dcfce7";
+        readonly 200: "#bbf7d0";
+        readonly 300: "#86efac";
+        readonly 400: "#4ade80";
+        readonly 500: "#22c55e";
+        readonly 600: "#16a34a";
+        readonly 700: "#15803d";
+        readonly 800: "#166534";
+        readonly 900: "#14532d";
+    };
+    readonly error: {
+        readonly 50: "#fef2f2";
+        readonly 100: "#fee2e2";
+        readonly 200: "#fecaca";
+        readonly 300: "#fca5a5";
+        readonly 400: "#f87171";
+        readonly 500: "#ef4444";
+        readonly 600: "#dc2626";
+        readonly 700: "#b91c1c";
+        readonly 800: "#991b1b";
+        readonly 900: "#7f1d1d";
+    };
+    readonly warning: {
+        readonly 50: "#fffbeb";
+        readonly 100: "#fef3c7";
+        readonly 200: "#fde68a";
+        readonly 300: "#fcd34d";
+        readonly 400: "#fbbf24";
+        readonly 500: "#f59e0b";
+        readonly 600: "#d97706";
+        readonly 700: "#b45309";
+        readonly 800: "#92400e";
+        readonly 900: "#78350f";
+    };
+    readonly info: {
+        readonly 50: "#eff6ff";
+        readonly 100: "#dbeafe";
+        readonly 200: "#bfdbfe";
+        readonly 300: "#93c5fd";
+        readonly 400: "#60a5fa";
+        readonly 500: "#3b82f6";
+        readonly 600: "#2563eb";
+        readonly 700: "#1d4ed8";
+        readonly 800: "#1e40af";
+        readonly 900: "#1e3a8a";
+    };
+    readonly neutral: {
+        readonly 50: "#fafafa";
+        readonly 100: "#f5f5f5";
+        readonly 200: "#e5e5e5";
+        readonly 300: "#d4d4d4";
+        readonly 400: "#a3a3a3";
+        readonly 500: "#737373";
+        readonly 600: "#525252";
+        readonly 700: "#404040";
+        readonly 800: "#262626";
+        readonly 900: "#171717";
+    };
+    readonly background: {
+        readonly primary: "#ffffff";
+        readonly secondary: "#f8fafc";
+        readonly tertiary: "#f1f5f9";
+    };
+    readonly text: {
+        readonly primary: "#0f172a";
+        readonly secondary: "#475569";
+        readonly tertiary: "#64748b";
+        readonly disabled: "#94a3b8";
+    };
+    readonly border: {
+        readonly primary: "#e2e8f0";
+        readonly secondary: "#cbd5e1";
+        readonly focus: "#3b82f6";
+        readonly error: "#ef4444";
+    };
+};
+declare const theme: {
+    readonly colors: {
+        readonly primary: {
+            readonly 50: "#fef7e6";
+            readonly 100: "#fdecc0";
+            readonly 200: "#fbd886";
+            readonly 300: "#f9c44c";
+            readonly 400: "#f7b01f";
+            readonly 500: "#F9BF3B";
+            readonly 600: "#e6a82d";
+            readonly 700: "#cc8f1f";
+            readonly 800: "#b37611";
+            readonly 900: "#995d03";
+        };
+        readonly secondary: {
+            readonly 50: "#f8fafc";
+            readonly 100: "#f1f5f9";
+            readonly 200: "#e2e8f0";
+            readonly 300: "#cbd5e1";
+            readonly 400: "#94a3b8";
+            readonly 500: "#64748b";
+            readonly 600: "#475569";
+            readonly 700: "#334155";
+            readonly 800: "#1e293b";
+            readonly 900: "#0f172a";
+        };
+        readonly success: {
+            readonly 50: "#f0fdf4";
+            readonly 100: "#dcfce7";
+            readonly 200: "#bbf7d0";
+            readonly 300: "#86efac";
+            readonly 400: "#4ade80";
+            readonly 500: "#22c55e";
+            readonly 600: "#16a34a";
+            readonly 700: "#15803d";
+            readonly 800: "#166534";
+            readonly 900: "#14532d";
+        };
+        readonly error: {
+            readonly 50: "#fef2f2";
+            readonly 100: "#fee2e2";
+            readonly 200: "#fecaca";
+            readonly 300: "#fca5a5";
+            readonly 400: "#f87171";
+            readonly 500: "#ef4444";
+            readonly 600: "#dc2626";
+            readonly 700: "#b91c1c";
+            readonly 800: "#991b1b";
+            readonly 900: "#7f1d1d";
+        };
+        readonly warning: {
+            readonly 50: "#fffbeb";
+            readonly 100: "#fef3c7";
+            readonly 200: "#fde68a";
+            readonly 300: "#fcd34d";
+            readonly 400: "#fbbf24";
+            readonly 500: "#f59e0b";
+            readonly 600: "#d97706";
+            readonly 700: "#b45309";
+            readonly 800: "#92400e";
+            readonly 900: "#78350f";
+        };
+        readonly info: {
+            readonly 50: "#eff6ff";
+            readonly 100: "#dbeafe";
+            readonly 200: "#bfdbfe";
+            readonly 300: "#93c5fd";
+            readonly 400: "#60a5fa";
+            readonly 500: "#3b82f6";
+            readonly 600: "#2563eb";
+            readonly 700: "#1d4ed8";
+            readonly 800: "#1e40af";
+            readonly 900: "#1e3a8a";
+        };
+        readonly neutral: {
+            readonly 50: "#fafafa";
+            readonly 100: "#f5f5f5";
+            readonly 200: "#e5e5e5";
+            readonly 300: "#d4d4d4";
+            readonly 400: "#a3a3a3";
+            readonly 500: "#737373";
+            readonly 600: "#525252";
+            readonly 700: "#404040";
+            readonly 800: "#262626";
+            readonly 900: "#171717";
+        };
+        readonly background: {
+            readonly primary: "#ffffff";
+            readonly secondary: "#f8fafc";
+            readonly tertiary: "#f1f5f9";
+        };
+        readonly text: {
+            readonly primary: "#0f172a";
+            readonly secondary: "#475569";
+            readonly tertiary: "#64748b";
+            readonly disabled: "#94a3b8";
+        };
+        readonly border: {
+            readonly primary: "#e2e8f0";
+            readonly secondary: "#cbd5e1";
+            readonly focus: "#3b82f6";
+            readonly error: "#ef4444";
+        };
+    };
+    readonly base: {
+        readonly transition: "transition-all duration-200 ease-in-out motion-reduce:transition-none";
+        readonly focus: "focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-background-primary focus-visible:ring-2";
+        readonly disabled: "disabled:opacity-60 disabled:cursor-not-allowed disabled:pointer-events-none";
+        readonly interactive: "cursor-pointer select-none";
+        readonly highContrast: "forced-colors:border forced-colors:border-solid";
+    };
+    readonly sizes: {
+        readonly xs: {
+            readonly text: "text-xs";
+            readonly padding: "px-2 py-1";
+            readonly height: "h-6";
+            readonly icon: "h-3 w-3";
+            readonly gap: "gap-1";
+        };
+        readonly sm: {
+            readonly text: "text-sm";
+            readonly padding: "px-3 py-1.5";
+            readonly height: "h-8";
+            readonly icon: "h-4 w-4";
+            readonly gap: "gap-1.5";
+        };
+        readonly md: {
+            readonly text: "text-base";
+            readonly padding: "px-4 py-2";
+            readonly height: "h-10";
+            readonly icon: "h-5 w-5";
+            readonly gap: "gap-2";
+        };
+        readonly lg: {
+            readonly text: "text-lg";
+            readonly padding: "px-5 py-2.5";
+            readonly height: "h-12";
+            readonly icon: "h-6 w-6";
+            readonly gap: "gap-2.5";
+        };
+        readonly xl: {
+            readonly text: "text-xl";
+            readonly padding: "px-6 py-3";
+            readonly height: "h-14";
+            readonly icon: "h-7 w-7";
+            readonly gap: "gap-3";
+        };
+    };
+    readonly variants: {
+        readonly primary: {
+            readonly solid: "bg-primary-9 text-neutral-12 hover:bg-primary-10 focus:ring-primary-8 active:bg-primary-10";
+            readonly outline: "border border-primary-8 text-primary-11 hover:bg-primary-3 hover:border-primary-9 focus:ring-primary-8";
+            readonly ghost: "text-primary-11 hover:bg-primary-3 hover:text-primary-12 focus:ring-primary-8";
+            readonly soft: "bg-primary-3 text-primary-11 hover:bg-primary-4 focus:ring-primary-8";
+        };
+        readonly secondary: {
+            readonly solid: "bg-secondary-500 text-white hover:bg-secondary-600 focus:ring-secondary-500 active:bg-secondary-700";
+            readonly outline: "border border-secondary-300 text-secondary-700 hover:bg-secondary-50 hover:border-secondary-400 focus:ring-secondary-500";
+            readonly ghost: "text-secondary-700 hover:bg-secondary-100 hover:text-secondary-800 focus:ring-secondary-500";
+            readonly soft: "bg-secondary-100 text-secondary-800 hover:bg-secondary-200 focus:ring-secondary-500";
+        };
+        readonly destructive: {
+            readonly solid: "bg-error-9 text-white hover:bg-error-10 focus:ring-error-8 active:bg-error-10";
+            readonly outline: "border border-error-8 text-error-11 hover:bg-error-3 hover:border-error-9 focus:ring-error-8";
+            readonly ghost: "text-error-11 hover:bg-error-3 hover:text-error-12 focus:ring-error-8";
+            readonly soft: "bg-error-3 text-error-11 hover:bg-error-4 focus:ring-error-8";
+        };
+        readonly success: {
+            readonly solid: "bg-success-9 text-white hover:bg-success-10 focus:ring-success-8 active:bg-success-10";
+            readonly outline: "border border-success-8 text-success-11 hover:bg-success-3 hover:border-success-9 focus:ring-success-8";
+            readonly ghost: "text-success-11 hover:bg-success-3 hover:text-success-12 focus:ring-success-8";
+            readonly soft: "bg-success-3 text-success-11 hover:bg-success-4 focus:ring-success-8";
+        };
+        readonly warning: {
+            readonly solid: "bg-warning-9 text-neutral-12 hover:bg-warning-10 focus:ring-warning-8 active:bg-warning-10";
+            readonly outline: "border border-warning-8 text-warning-11 hover:bg-warning-3 hover:border-warning-9 focus:ring-warning-8";
+            readonly ghost: "text-warning-11 hover:bg-warning-3 hover:text-warning-12 focus:ring-warning-8";
+            readonly soft: "bg-warning-3 text-warning-11 hover:bg-warning-4 focus:ring-warning-8";
+        };
+        readonly info: {
+            readonly solid: "bg-info-9 text-white hover:bg-info-10 focus:ring-info-8 active:bg-info-10";
+            readonly outline: "border border-info-8 text-info-11 hover:bg-info-3 hover:border-info-9 focus:ring-info-8";
+            readonly ghost: "text-info-11 hover:bg-info-3 hover:text-info-12 focus:ring-info-8";
+            readonly soft: "bg-info-3 text-info-11 hover:bg-info-4 focus:ring-info-8";
+        };
+    };
+    readonly radius: {
+        readonly none: "rounded-none";
+        readonly xs: "rounded-xs";
+        readonly sm: "rounded-sm";
+        readonly md: "rounded-md";
+        readonly lg: "rounded-lg";
+        readonly xl: "rounded-xl";
+        readonly "2xl": "rounded-2xl";
+        readonly "3xl": "rounded-3xl";
+        readonly full: "rounded-full";
+    };
+    readonly spacing: {
+        readonly none: "gap-0";
+        readonly xs: "gap-1";
+        readonly sm: "gap-2";
+        readonly md: "gap-3";
+        readonly lg: "gap-4";
+        readonly xl: "gap-6";
+        readonly "2xl": "gap-8";
+        readonly "3xl": "gap-12";
+    };
+    readonly typography: {
+        readonly xs: "text-xs leading-4";
+        readonly sm: "text-sm leading-5";
+        readonly base: "text-base leading-6";
+        readonly lg: "text-lg leading-7";
+        readonly xl: "text-xl leading-8";
+        readonly "2xl": "text-2xl leading-9";
+        readonly "3xl": "text-3xl leading-10";
+    };
+    readonly animations: {
+        readonly duration: {
+            readonly fast: "duration-150";
+            readonly normal: "duration-200";
+            readonly slow: "duration-300";
+        };
+        readonly easing: {
+            readonly linear: "ease-linear";
+            readonly in: "ease-in";
+            readonly out: "ease-out";
+            readonly inOut: "ease-in-out";
+        };
+        readonly fadeIn: "animate-in fade-in";
+        readonly fadeOut: "animate-out fade-out";
+        readonly slideIn: "animate-in slide-in-from-bottom-2";
+        readonly slideOut: "animate-out slide-out-to-bottom-2";
+        readonly scaleIn: "animate-in zoom-in-95";
+        readonly scaleOut: "animate-out zoom-out-95";
+    };
+    readonly accessibility: {
+        readonly srOnly: "sr-only";
+        readonly focusTrap: "focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2";
+        readonly highContrast: "forced-colors:border forced-colors:border-solid";
+        readonly reducedMotion: "motion-reduce:transition-none motion-reduce:animate-none";
+        readonly touchTarget: "min-h-11 min-w-11";
+    };
+};
+declare const getColor: (colorName: keyof typeof colors, shade?: keyof typeof colors.primary | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12) => string;
+type ThemeSize = keyof typeof theme.sizes;
+type ThemeVariant = keyof typeof theme.variants;
+type ThemeVariantStyle = keyof typeof theme.variants.primary;
+type ThemeRadius = keyof typeof theme.radius;
+type ThemeSpacing = keyof typeof theme.spacing;
+type ThemeColor = keyof typeof colors;
+type ThemeColorShade = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;
+
+interface BaseProps {
+    /** Additional CSS class names */
+    className?: string;
+    /** Child elements */
+    children?: react.ReactNode;
+    /** Unique identifier for the component */
+    id?: string;
+    /** Test identifier for testing purposes */
+    testId?: string;
+    /** Custom styles */
+    style?: react.CSSProperties;
+}
+interface InteractiveProps extends BaseProps {
+    /** Whether the component is disabled */
+    disabled?: boolean;
+    /** Whether the component is in a loading state */
+    loading?: boolean;
+    /** Callback fired when the component is clicked */
+    onClick?: (event: react.MouseEvent) => void;
+    /** Callback fired when the component receives focus */
+    onFocus?: (event: react.FocusEvent) => void;
+    /** Callback fired when the component loses focus */
+    onBlur?: (event: react.FocusEvent) => void;
+    /** Callback fired on key down events */
+    onKeyDown?: (event: react.KeyboardEvent) => void;
+}
+type Size = ThemeSize;
+type Variant = ThemeVariant;
+interface FormFieldProps extends InteractiveProps {
+    /** Label text for the form field */
+    label?: string;
+    /** Error message to display */
+    error?: string | string[];
+    /** Helper text to provide additional context */
+    helperText?: string;
+    /** Whether the field is required */
+    required?: boolean;
+    /** Name attribute for form submission */
+    name?: string;
+    /** Placeholder text */
+    placeholder?: string;
+    /** Whether the field is read-only */
+    readOnly?: boolean;
+    /** Auto-complete attribute */
+    autoComplete?: string;
+    /** Auto-focus the field on mount */
+    autoFocus?: boolean;
+}
+type PolymorphicRef<T extends react.ElementType> = react.ComponentPropsWithRef<T>["ref"];
+type PolymorphicComponentProps<T extends react.ElementType, P = object> = P & Omit<react.ComponentPropsWithoutRef<T>, keyof P> & {
+    /** The element type to render as */
+    as?: T;
+};
+type PolymorphicComponent<T extends react.ElementType, P = object> = <C extends react.ElementType = T>(props: PolymorphicComponentProps<C, P> & {
+    ref?: PolymorphicRef<C>;
+}) => react.ReactElement | null;
+interface InteractionStates {
+    /** Whether the component is in hover state */
+    hover?: boolean;
+    /** Whether the component is focused */
+    focus?: boolean;
+    /** Whether the component is active/pressed */
+    active?: boolean;
+    /** Whether the component is disabled */
+    disabled?: boolean;
+    /** Whether the component is loading */
+    loading?: boolean;
+    /** Whether the component has an error */
+    error?: boolean;
+    /** Whether the component is valid */
+    valid?: boolean;
+}
+type ResponsiveValue<T> = T | {
+    xs?: T;
+    sm?: T;
+    md?: T;
+    lg?: T;
+    xl?: T;
+    "2xl"?: T;
+};
+interface ComponentState<T = unknown> {
+    /** Current value */
+    value?: T;
+    /** Default value */
+    defaultValue?: T;
+    /** Callback fired when value changes */
+    onChange?: (value: T, event?: react.ChangeEvent | react.MouseEvent) => void;
+    /** Validation function */
+    validate?: (value: T) => string | string[] | null;
+    /** Whether the field has been touched */
+    touched?: boolean;
+    /** Whether the field is dirty (value changed from initial) */
+    dirty?: boolean;
+}
+interface AccessibilityProps {
+    /** Accessible name for the component */
+    "aria-label"?: string;
+    /** ID of element that labels this component */
+    "aria-labelledby"?: string;
+    /** ID of element that describes this component */
+    "aria-describedby"?: string;
+    /** Whether the component is expanded (for collapsible elements) */
+    "aria-expanded"?: boolean;
+    /** Whether the component is selected */
+    "aria-selected"?: boolean;
+    /** Whether the component is disabled */
+    "aria-disabled"?: boolean;
+    /** Whether the component is required */
+    "aria-required"?: boolean;
+    /** Whether the component has invalid input */
+    "aria-invalid"?: boolean;
+    /** Current value for range components */
+    "aria-valuenow"?: number;
+    /** Minimum value for range components */
+    "aria-valuemin"?: number;
+    /** Maximum value for range components */
+    "aria-valuemax"?: number;
+    /** Text description of current value */
+    "aria-valuetext"?: string;
+    /** ARIA role */
+    role?: string;
+    /** Tab index for keyboard navigation */
+    tabIndex?: number;
+    /** Whether element is hidden from screen readers */
+    "aria-hidden"?: boolean;
+    /** Live region politeness setting */
+    "aria-live"?: "off" | "polite" | "assertive";
+    /** Whether element is atomic for live regions */
+    "aria-atomic"?: boolean;
+}
+
+declare function cn(...inputs: ClassValue[]): string;
+declare function getVariantStyles(variant: ThemeVariant, style?: ThemeVariantStyle): string;
+declare function getSizeStyles(size: ThemeSize): string;
+declare function getBaseStyles(): string;
+declare function getInteractiveStyles(): string;
+declare function getAccessibilityStyles(options?: {
+    focusVisible?: boolean;
+    highContrast?: boolean;
+    reducedMotion?: boolean;
+}): string;
+declare function getResponsiveClasses<T extends string>(value: ResponsiveValue<T>, prefix?: string): string;
+declare function getSpacingClass(spacing: ThemeSpacing, type?: "gap" | "margin" | "padding"): string;
+declare function getRadiusClass(radius: ThemeRadius): string;
+declare function getTypographyClass(typography: keyof typeof theme.typography): string;
+declare function getBgClass(colorName: ThemeColor, shade?: ThemeColorShade): string;
+declare function getTextClass(colorName: ThemeColor, shade?: ThemeColorShade): string;
+declare function getBorderClass(colorName: ThemeColor, shade?: ThemeColorShade): string;
+declare function getHoverBgClass(colorName: ThemeColor, shade?: ThemeColorShade): string;
+declare function getHoverTextClass(colorName: ThemeColor, shade?: ThemeColorShade): string;
+declare function getFocusRingClass(colorName: ThemeColor, shade?: ThemeColorShade): string;
+declare function getAnimationClass(animation: keyof typeof theme.animations): string;
+declare function createCompoundVariants<T>(base: string, variants: Record<string, Record<string, string>>, compoundVariants?: Array<{
+    conditions: Record<string, string>;
+    className: string;
+}>): (props: T) => string;
+interface VariantConfig<T extends Record<string, Record<string, string>>> {
+    base?: string;
+    variants?: T;
+    compoundVariants?: Array<{
+        conditions: Partial<{
+            [K in keyof T]: keyof T[K];
+        }>;
+        className: string;
+    }>;
+    defaultVariants?: Partial<{
+        [K in keyof T]: keyof T[K];
+    }>;
+}
+declare function createVariantGenerator<T extends Record<string, Record<string, string>>>(config: VariantConfig<T>): (props: Partial<{ [K in keyof T]: keyof T[K]; }> & {
+    className?: string;
+}) => string;
+declare function mergeProps<T extends Record<string, unknown>>(defaultProps: Partial<T>, userProps: T): T;
+declare function conditionalClass(condition: boolean | undefined | null, trueClass: string, falseClass?: string): string;
+declare function getFocusableElements(container: HTMLElement): HTMLElement[];
+declare function handleArrowNavigation(event: KeyboardEvent, elements: HTMLElement[], currentIndex: number, options?: {
+    loop?: boolean;
+    orientation?: "horizontal" | "vertical" | "both";
+}): number;
+
+interface UIProviderProps extends Omit<Partial<ThemeProps>, "children"> {
+    children: ReactNode;
+}
+declare function UIProvider({ children, appearance, radius, scaling, accentColor, grayColor, panelBackground, className, }: UIProviderProps): react__default.JSX.Element;
+
+declare function useControllableState<T>({ value, defaultValue, onChange, }: {
+    value?: T;
+    defaultValue?: T;
+    onChange?: (value: T) => void;
+}): readonly [T | undefined, (newValue: T | ((prev: T | undefined) => T)) => void];
+
+declare function useDisclosure(defaultOpen?: boolean): {
+    isOpen: boolean;
+    open: () => void;
+    close: () => void;
+    toggle: () => void;
+    onOpen: () => void;
+    onClose: () => void;
+    onToggle: () => void;
+};
+
+declare function useClickOutside<T extends HTMLElement = HTMLElement>(handler: () => void, enabled?: boolean): react.RefObject<T | null>;
+
+export { ACTIVITY_META, AUDIT_ACTION_META, AccentCard, type AccentCardProps, AccentHeader, type AccentHeaderProps, type AccessibilityProps, AccountCalendarsDialog, type AccountCalendarsDialogProps, AccountCard, type AccountCardProps, ActivityRow, type ActivityRowProps, type ActivityType, AddAccountMenu, type AddAccountMenuProps, AppCard, type AppCardProps, type AuditAction, AuthCard, type AvailabilityBlock, type BaseProps, BigCalendarView, type BigCalendarViewProps, BrandPanel, type CalendarAccount, type CalendarAccountCalendar, CalendarDayHeader, type CalendarDayHeaderProps, CalendarMergedView, type CalendarMergedViewProps, CalendarPickList, type CalendarProvider, type CalendarSync, CalendarToolbar, CardFooter, type CardFooterProps, type ComponentState, ConfirmDialog, type ConfirmDialogProps, ConnectProviderList, ConnectProviderRows, type ConnectProviderRowsProps, ConnectedAccountCard, DashboardErrorCard, type DashboardErrorCardProps, DataTableRow, type DataTableRowProps, type DatedAvailabilityBlock, EmptyCard, type EmptyCardProps, EventBlock, type EventBlockProps, type FormFieldProps, GoogleIcon, type HeadingLevel, IconTile, type IconTileProps, ImportCalendarsDialog, type ImportCalendarsDialogProps, type InteractionStates, METRIC_STATUS_COLOR, MetricCard, type MetricCardProps, type MetricStatus, MicrosoftIcon, MiniMonthPicker, type MiniMonthPickerProps, MonthGrid, type MonthGridProps, type NavItem, OnboardingStepDots, OnboardingStepper, OtpInput, OtpVerifyStep, type OtpVerifyStepProps, PROVIDER_LABEL, PROVIDER_META, Pagination, type PaginationProps, PausedBadge, type PausedBadgeProps, type PolymorphicComponent, type PolymorphicComponentProps, ProviderIcon, ROLE_LABELS, ROLE_META, type ResolvedBlock, type ResponsiveValue, type Role, SHELL_HEADER_H, STATUS_META, SearchOverlay, type SearchOverlayProps, type SearchResult, type SearchResultType, Sidebar, type SidebarDevRole, type SidebarProps, type SidebarUser, type Size, Skeleton, type SkeletonProps, SyncDetailsDialog, type SyncDetailsDialogProps, SyncPreviewRail, type SyncStatus, Toast, type ToastProps, Topbar, type TopbarAdminTitleRow, type TopbarProps, type TopbarTitleRow, UIProvider, type UseConnectAccountOptions, type UserStatus, type Variant, type WizardStepMeta, WizardStepper, auditActionMeta, cn, colors, conditionalClass, createCompoundVariants, createVariantGenerator, findCalendar, getAccessibilityStyles, getAnimationClass, getBaseStyles, getBgClass, getBorderClass, getColor, getFocusRingClass, getFocusableElements, getHoverBgClass, getHoverTextClass, getInteractiveStyles, getRadiusClass, getResponsiveClasses, getSizeStyles, getSpacingClass, getTextClass, getTypographyClass, getVariantStyles, handleArrowNavigation, headingSize, layout, mergeProps, theme, useClickOutside, useConnectAccount, useControllableState, useDisclosure };