@embleema/design-system 0.1.0

package/dist/Table.d.ts

@@ -0,0 +1,85 @@
+/**
+ * Table — React port of Embleema Design System 2.0's Layout/Table component
+ * (Figma node 813:3098). Responsive data table for structured records with
+ * sorting, row selection, inline row actions, navigation chevron, and
+ * pagination.
+ *
+ * Variants (per Figma):
+ *   - Desktop (519:8918) — traditional row/column layout, ~1000 px wide
+ *   - Mobile  (813:3027) — card-based editable layout, 328 px wide
+ *
+ * Color tokens used (per embleema-design-system.md):
+ *   - Background/Default          #FEFEFE
+ *   - Background/Primary          #F8F8F8 — header band + pagination control
+ *   - Border/Default              #DDDDDD — row dividers + container outline
+ *   - Border/Dark                 #0E0E0E — pagination control outline
+ *   - Text/Primary                #0E0E0E — body text and labels
+ *   - Text/Secondary              #5E5E5E — subtext and helper copy
+ *   - Action/Primary/Background   #306AE8 — checkbox fill + focus rings
+ *
+ * Typography:
+ *   - Headers : body/md-semibold (Nunito SemiBold 16 / 1.5)
+ *   - Rows    : body/md          (Nunito Regular 16 / 1.5)
+ *   - Footer  : body/sm          (Nunito Regular 14 / 1.5)
+ */
+import * as React from "react";
+export type SortDirection = "asc" | "desc" | null;
+export type TableColumn<R> = {
+    /** Stable key used for sort state + cell access. */
+    key: string;
+    /** Header label. */
+    label: string;
+    /** Whether the column can be sorted. Default false. */
+    sortable?: boolean;
+    /** Cell renderer. Receives the row + key; default returns `row[key]` as string. */
+    render?: (row: R) => React.ReactNode;
+    /** Optional subtext renderer (line two of the cell). */
+    subtext?: (row: R) => React.ReactNode;
+    /** Sort comparator. Default does a string compare on `render` output. */
+    compare?: (a: R, b: R) => number;
+};
+export type TableSize = "Desktop" | "Mobile";
+export type TableProps<R extends {
+    id: string;
+}> = {
+    columns: TableColumn<R>[];
+    rows: R[];
+    size?: TableSize;
+    /** Show the selection checkbox column + bulk-select header. Default true. */
+    selectable?: boolean;
+    /** Controlled selected ids. */
+    selectedIds?: string[];
+    defaultSelectedIds?: string[];
+    onSelectionChange?: (ids: string[]) => void;
+    /** Controlled sort state. */
+    sort?: {
+        key: string;
+        direction: SortDirection;
+    };
+    onSortChange?: (next: {
+        key: string;
+        direction: SortDirection;
+    }) => void;
+    /** Show the "Actions" column with per-row action callbacks. Default true. */
+    showActions?: boolean;
+    actionLabel?: string;
+    onAction?: (row: R) => void;
+    onActionMenu?: (row: R) => void;
+    /** Show the trailing chevron-right column (per-row navigation). Default true. */
+    showRowChevron?: boolean;
+    onRowNavigate?: (row: R) => void;
+    /** Pagination controls. */
+    page?: number;
+    pageSize?: number;
+    totalCount?: number;
+    onPageChange?: (page: number) => void;
+    /** Custom "Showing X-Y of N" string (overrides the default). */
+    paginationLabel?: string;
+    id?: string;
+    className?: string;
+};
+export declare function Table<R extends {
+    id: string;
+}>({ columns, rows, size, selectable, selectedIds, defaultSelectedIds, onSelectionChange, sort, onSortChange, showActions, actionLabel, onAction, onActionMenu, showRowChevron, onRowNavigate, page, pageSize, totalCount, onPageChange, paginationLabel, id, className, }: TableProps<R>): import("react/jsx-runtime").JSX.Element;
+export default Table;
+export declare function TableMatrix(): import("react/jsx-runtime").JSX.Element;

package/dist/Tag.d.ts

@@ -0,0 +1,54 @@
+/**
+ * Tag — React port of Embleema Design System 2.0's Feedback/Tag component
+ * (Figma node 4935:104).
+ *
+ * Read-only metadata label for categorization, status, or content tagging.
+ * Not interactive beyond optional dismissal. For interactive selection or
+ * filtering, use Selector/Chip instead.
+ *
+ * Structure mirrors the Figma source:
+ *   pill (rounded-full, horizontal flex, padded)
+ *     ├── leading icon (optional, 12px for Small / 16px for Medium)
+ *     ├── label (Nunito Bold, uppercase, tracked — overline/sm or overline/lg)
+ *     └── close button (optional, 10px for Small / 12px for Medium)
+ *
+ * Per-type backgrounds come directly from the Figma extraction:
+ *   - Default → Action/Primary/Background (#306AE8)   [semantic]
+ *   - Success → Feedback/Success/Text    (#288028)    [semantic]
+ *   - Warning → Feedback/Warning/Text    (#E15A00)    [semantic]
+ *   - Error   → Feedback/Error/Text      (#B31A1A)    [semantic]
+ *   - Info    → Teal/400                 (#028388)    [primitive — no semantic alias yet]
+ *   - Brand   → Pink/400                 (#C20A72)    [primitive — no semantic alias yet]
+ * Text on all types is Text/Inverse (#FEFEFE).
+ *
+ * Props:
+ *   - type           : Default | Success | Warning | Info | Error | Brand
+ *   - size           : Small (12px) | Medium (14px)
+ *   - label          : tag text (or use children for richer content)
+ *   - leadingIcon    : boolean → renders the default Status/Info glyph;
+ *                      React node → renders a custom icon at the right size
+ *   - dismissible    : show the close button
+ *   - onDismiss      : called when the close button is clicked
+ *   - visible        : controlled visibility
+ *   - defaultVisible : uncontrolled initial visibility (default true)
+ */
+import * as React from "react";
+export type TagType = "Default" | "Success" | "Warning" | "Info" | "Error" | "Brand";
+export type TagSize = "Small" | "Medium";
+export type TagProps = {
+    type?: TagType;
+    size?: TagSize;
+    label?: string;
+    children?: React.ReactNode;
+    leadingIcon?: boolean | React.ReactNode;
+    dismissible?: boolean;
+    onDismiss?: () => void;
+    visible?: boolean;
+    defaultVisible?: boolean;
+    id?: string;
+    className?: string;
+    "aria-label"?: string;
+};
+export declare const Tag: React.ForwardRefExoticComponent<TagProps & React.RefAttributes<HTMLSpanElement>>;
+export default Tag;
+export declare function TagMatrix(): import("react/jsx-runtime").JSX.Element;

package/dist/TaskStatus.d.ts

@@ -0,0 +1,35 @@
+/**
+ * TaskStatus — React port of Embleema Design System 2.0's Task Status
+ * component (Figma node 5142:4683). Pairs a 20px TaskStatusIcon glyph with
+ * a Nunito Light status label, optionally followed by an AI sparkle badge
+ * when AI=true.
+ *
+ * Layout (per Figma):
+ *   wrapper  (flex, items-center, gap 4, height 24)
+ *     ├── icon slot   (20 × 20)
+ *     └── Status + AI (flex, items-center, gap 4)
+ *           ├── label  (Body Medium/Light: Nunito 300, 16/24, Text/Primary)
+ *           └── AI badge (Icon/Status/ArtificialIntelligence, visible when AI=true)
+ *
+ * Status → glyph mapping. TaskStatusIcon doesn't ship an explicit
+ * "IncompleteLate" variant because the Figma source reuses the Incomplete
+ * X glyph for both Incomplete and Incomplete Late (only the label differs).
+ *
+ * AI marker: Icon/Status/ArtificialIntelligence (Figma node 4052:2950)
+ * inlined as a 16-px tall sparkle that picks up the surrounding text color.
+ */
+import * as React from "react";
+export type TaskStatusValue = "Complete" | "InProgress" | "InProgressLate" | "Incomplete" | "IncompleteLate" | "Skipped" | "NotApplicable" | "Upcoming";
+export type TaskStatusProps = {
+    status: TaskStatusValue;
+    /** When true, render the AI sparkle badge after the label. */
+    ai?: boolean;
+    /** Override the default human-readable label. */
+    label?: string;
+    className?: string;
+    id?: string;
+    "aria-label"?: string;
+};
+export declare const TaskStatus: React.ForwardRefExoticComponent<TaskStatusProps & React.RefAttributes<HTMLSpanElement>>;
+export default TaskStatus;
+export declare function TaskStatusMatrix(): import("react/jsx-runtime").JSX.Element;

package/dist/TaskStatusIcon.d.ts

@@ -0,0 +1,29 @@
+/**
+ * TaskStatusIcon — Embleema Design System 2.0 Task Status Icon (Figma
+ * node 5142:4723). Compact 20×20 glyph-only indicator used alongside task
+ * labels and in tight UI contexts like table cells.
+ *
+ * Variant families (read from Figma):
+ *   - Gradient family — colored gradients applied directly to the glyph fill:
+ *       Incomplete       : Red (orange → red → pink, Gradient/Red)
+ *       InProgress       : Pink → blue (Gradient/Pink)
+ *       InProgressLate   : Orange (Gradient/Orange)
+ *       Complete         : Teal (Gradient/Green — Figma name; renders teal)
+ *   - Gray family — flat #848484 (Neutral/500, text/disabled), no gradient:
+ *       Skipped, NotApplicable, Upcoming
+ *
+ * InProgress and InProgressLate share the same clipboard-with-clock glyph
+ * (Icon/Files/ClipboardPending); only the gradient differs.
+ */
+import * as React from "react";
+export type TaskStatusState = "Incomplete" | "InProgress" | "InProgressLate" | "Complete" | "Skipped" | "NotApplicable" | "Upcoming";
+export type TaskStatusIconProps = {
+    state: TaskStatusState;
+    /** Accessible label. Defaults to "Status: <state>". */
+    "aria-label"?: string;
+    title?: string;
+    className?: string;
+};
+export declare const TaskStatusIcon: React.ForwardRefExoticComponent<TaskStatusIconProps & React.RefAttributes<HTMLSpanElement>>;
+export default TaskStatusIcon;
+export declare function TaskStatusIconMatrix(): import("react/jsx-runtime").JSX.Element;

package/dist/TextArea.d.ts

@@ -0,0 +1,56 @@
+import { FieldState, FieldValidation, FieldAppearance } from './Field';
+/**
+ * TextArea — React port of Embleema Design System 2.0's Input/Text Area
+ * component (Figma node 4308:378). Composes the <Field> design language
+ * (same validation/state palette, label-group layout, helper-text rules) but
+ * wraps a multi-line <textarea> instead of an <input>.
+ *
+ * Structure mirrors the Figma source:
+ *   wrapper
+ *     ├── label (optional, body/md, htmlFor=textarea id)
+ *     ├── textarea-field wrapper (rounded box with border/fill — matches Field)
+ *     │     └── <textarea> (resizable, fills the wrapper)
+ *     └── footer
+ *           ├── helper text (optional)
+ *           └── character counter (optional, "X/max" or "X")
+ *
+ * Props:
+ *   - validation    : None | Error | Warning | Success | AI
+ *   - appearance    : Filled | Outlined (renamed from Figma's "Style")
+ *   - labelPosition : Top | Left
+ *   - label, required, helperText
+ *   - characterCounter : show the live "X/max" counter at footer-right
+ *   - maxLength        : forwarded to <textarea> and shown in the counter
+ *   - rows             : initial height in lines (default 4)
+ *   - resize           : none | vertical | horizontal | both (default "vertical")
+ *   - plus standard textarea pass-through: value/defaultValue/onChange,
+ *     placeholder, disabled, readOnly, id, name, aria-label
+ */
+import * as React from "react";
+export type TextAreaLabelPosition = "Top" | "Left";
+export type TextAreaProps = {
+    validation?: FieldValidation;
+    appearance?: FieldAppearance;
+    labelPosition?: TextAreaLabelPosition;
+    label?: string;
+    required?: boolean;
+    helperText?: string;
+    characterCounter?: boolean;
+    maxLength?: number;
+    rows?: number;
+    resize?: "none" | "vertical" | "horizontal" | "both";
+    state?: FieldState;
+    value?: string;
+    defaultValue?: string;
+    onChange?: React.ChangeEventHandler<HTMLTextAreaElement>;
+    placeholder?: string;
+    disabled?: boolean;
+    readOnly?: boolean;
+    id?: string;
+    name?: string;
+    className?: string;
+    "aria-label"?: string;
+};
+export declare const TextArea: React.ForwardRefExoticComponent<TextAreaProps & React.RefAttributes<HTMLTextAreaElement>>;
+export default TextArea;
+export declare function TextAreaMatrix(): import("react/jsx-runtime").JSX.Element;

package/dist/TextField.d.ts

@@ -0,0 +1,48 @@
+import { FieldState, FieldValidation, FieldAppearance } from './Field';
+/**
+ * TextField — React port of Embleema Design System 2.0's Input/Text Field
+ * (Figma node 4201:149). Composes the lower-level <Field> base atom and
+ * adds an optional label group + helper text.
+ *
+ * Props:
+ *   - validation    : None | Error | Warning | Success | AI (passed to Field;
+ *                     also tints the label in Error and the helper text in Error)
+ *   - appearance    : Filled | Outlined (passed straight through to Field)
+ *   - labelPosition : Top | Left  (Top stacks; Left puts a 120 px label column
+ *                     on the left of a stack containing field + helper)
+ *   - label         : label string. Omit to hide the label.
+ *   - required      : adds a red "*" before the label
+ *   - helperText    : helper text string. Omit to hide.
+ *   - state         : optional forced state for previews (Pressed etc.)
+ *   - plus the full Field passthrough: leadingIcon, trailingIcon, inlineButton,
+ *     placeholder, value/defaultValue, onChange, disabled, readOnly, id, name,
+ *     type, className, aria-label, etc.
+ */
+import * as React from "react";
+export type TextFieldLabelPosition = "Top" | "Left";
+export type TextFieldProps = {
+    validation?: FieldValidation;
+    appearance?: FieldAppearance;
+    labelPosition?: TextFieldLabelPosition;
+    label?: string;
+    required?: boolean;
+    helperText?: string;
+    state?: FieldState;
+    leadingIcon?: React.ReactNode;
+    trailingIcon?: React.ReactNode;
+    inlineButton?: React.ReactNode;
+    placeholder?: string;
+    value?: string;
+    defaultValue?: string;
+    onChange?: React.ChangeEventHandler<HTMLInputElement>;
+    disabled?: boolean;
+    readOnly?: boolean;
+    id?: string;
+    name?: string;
+    type?: "text" | "email" | "password" | "number" | "tel" | "url" | "search";
+    className?: string;
+    "aria-label"?: string;
+};
+export declare const TextField: React.ForwardRefExoticComponent<TextFieldProps & React.RefAttributes<HTMLInputElement>>;
+export default TextField;
+export declare function TextFieldMatrix(): import("react/jsx-runtime").JSX.Element;

package/dist/TimePicker.d.ts

@@ -0,0 +1,46 @@
+import { FieldValidation, FieldAppearance } from './Field';
+/**
+ * TimePicker — React port of the Embleema Design System 2.0 Input/TimePicker
+ * component (Figma node 4341:901). A molecule that wraps the base Field atom
+ * with a clock icon, an AM/PM segmented toggle (Figma node 4355:225), and
+ * the Time Picker Overlay (Figma node 4357:300) — a two-column scrolling
+ * Hour / Minute picker (using the Time Option atom, Figma node 4356:193).
+ *
+ * The overlay, toggle, and time-option chrome are all embedded as private
+ * sub-components — they only ship as part of TimePicker, not as standalone
+ * catalog entries.
+ *
+ * Behavior:
+ *   - Clicking the field (or the clock icon) opens the overlay anchored
+ *     below the field
+ *   - Scrolling/clicking an hour or minute updates the draft selection
+ *   - Cancel closes without writing; OK commits and closes
+ *   - Toggling AM/PM updates the field's PM half directly
+ *   - Outside click / Escape closes the overlay
+ */
+import * as React from "react";
+export type TimePickerValidation = FieldValidation;
+export type TimePickerStyle = FieldAppearance;
+export type TimePickerLabelPosition = "Top" | "Left";
+export type TimePickerMeridiem = "AM" | "PM";
+export type TimePickerProps = {
+    validation?: TimePickerValidation;
+    style?: TimePickerStyle;
+    labelPosition?: TimePickerLabelPosition;
+    label?: boolean | string;
+    helperText?: boolean | string;
+    required?: boolean;
+    /** Controlled time string formatted "HH:MM AM/PM". */
+    value?: string;
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+    id?: string;
+    name?: string;
+    disabled?: boolean;
+    readOnly?: boolean;
+    className?: string;
+    "aria-label"?: string;
+};
+export declare const TimePicker: React.ForwardRefExoticComponent<TimePickerProps & React.RefAttributes<HTMLInputElement>>;
+export default TimePicker;
+export declare function TimePickerMatrix(): import("react/jsx-runtime").JSX.Element;

package/dist/Toggle.d.ts

@@ -0,0 +1,42 @@
+/**
+ * Toggle — React port of Embleema Design System 2.0's Selector/Toggle
+ * component (Figma node 5221:23).
+ *
+ * Structure mirrors the Figma source:
+ *   wrapper (<label>)
+ *     ├── input  (visually hidden, role=switch via aria-checked)
+ *     └── track  (52×32 pill)
+ *           └── thumb (24×24 circle, slides via transform: translateX)
+ *
+ * Real `<input type="checkbox">` underneath provides keyboard support
+ * (Space toggles), form integration, and screen-reader semantics
+ * (announced as a switch because of role/aria-checked).
+ *
+ * Props:
+ *   - state           : forced override for previews
+ *                       (Default | Hover | Focus | Disabled)
+ *                       Omit to let real browser :hover / :focus-within
+ *                       drive Hover and Focus automatically.
+ *   - selected        : controlled on/off state (true = On, false = Off)
+ *   - defaultSelected : uncontrolled initial state
+ *   - disabled        : maps to data-state="Disabled" + HTML disabled
+ *   - onChange        : called with the new selected boolean
+ *   - name, value, id, aria-label : standard HTML passthrough
+ */
+import * as React from "react";
+export type ToggleState = "Default" | "Hover" | "Focus" | "Disabled";
+export type ToggleProps = {
+    state?: ToggleState;
+    selected?: boolean;
+    defaultSelected?: boolean;
+    disabled?: boolean;
+    onChange?: (selected: boolean) => void;
+    id?: string;
+    name?: string;
+    value?: string;
+    className?: string;
+    "aria-label"?: string;
+};
+export declare const Toggle: React.ForwardRefExoticComponent<ToggleProps & React.RefAttributes<HTMLInputElement>>;
+export default Toggle;
+export declare function ToggleMatrix(): import("react/jsx-runtime").JSX.Element;

package/dist/Tooltip.d.ts

@@ -0,0 +1,59 @@
+/**
+ * Tooltip — React port of Embleema Design System 2.0's Feedback/Tooltip
+ * component (Figma node 4944:48).
+ *
+ * Contextual overlay triggered by hover or focus on a UI element. Wraps any
+ * child trigger and pops a styled card above (Top) or below (Bottom) it.
+ *
+ * Card structure (per Figma):
+ *   - Background/Primary (#F8F8F8) + 1 px Border/Default
+ *   - 8 px radius
+ *   - 12 px padding all sides, 4 px gap between rows
+ *   - drop-shadow: 0 0 3px rgba(0,0,0,0.12)
+ *   - Optional title: body/sm-semibold (Nunito SemiBold 14/1.5, Text/Primary)
+ *   - Body: body/sm-light (Nunito Light 14/1.5, Text/Secondary)
+ *   - Optional action: 14 px Nunito Regular, Action/Primary/Background
+ *
+ * Arrow: 12 × 6 px triangle pointing back at the trigger, fill matches the
+ * card background, 1 px Border/Default stroke. Positioned so its inner edge
+ * overlaps the card's border by 1 px (hides the stroke seam).
+ *
+ * Visibility:
+ *   - Driven by real :hover and :focus-within on the wrapper by default, so
+ *     keyboard users see the tooltip too.
+ *   - Pass `open` (with optional `onOpenChange`) for controlled visibility.
+ *   - Subtle 150 ms opacity transition.
+ *
+ * Props:
+ *   - position      : Top | Bottom (default Top)
+ *   - title         : show the title row (default true)
+ *   - titleText     : title content (default "Title")
+ *   - bodyText      : body content (default "Tooltip description text")
+ *   - actionButton  : show the action button (default false)
+ *   - actionLabel   : action label (default "Button")
+ *   - onActionClick : action callback
+ *   - arrow         : show the directional arrow (default true)
+ *   - open          : controlled visibility — disables the natural hover model
+ *   - defaultOpen   : uncontrolled initial visibility (debugging / matrix use)
+ *   - children      : the trigger element to wrap
+ */
+import * as React from "react";
+export type TooltipPosition = "Top" | "Bottom";
+export type TooltipProps = {
+    position?: TooltipPosition;
+    title?: boolean;
+    titleText?: string;
+    bodyText?: string;
+    actionButton?: boolean;
+    actionLabel?: string;
+    onActionClick?: () => void;
+    arrow?: boolean;
+    open?: boolean;
+    defaultOpen?: boolean;
+    children?: React.ReactNode;
+    id?: string;
+    className?: string;
+};
+export declare const Tooltip: React.ForwardRefExoticComponent<TooltipProps & React.RefAttributes<HTMLSpanElement>>;
+export default Tooltip;
+export declare function TooltipMatrix(): import("react/jsx-runtime").JSX.Element;

package/dist/Upload.d.ts

@@ -0,0 +1,50 @@
+/**
+ * Upload — React port of the Embleema Design System 2.0 Input/Upload
+ * component (Figma node 4434:95). A drag-and-drop file zone with primary
+ * instructions, file-format hint, and a "Choose File" button.
+ *
+ * State handling:
+ *   - Default: white bg, dashed Border/Strong (#848484) outline
+ *   - Hover: derived automatically when a file is being dragged over;
+ *     swaps to Background/Selected fill + dashed Action/Primary outline
+ *   - Focused: keyboard focus on the zone, dashed Action/Primary outline
+ *   - HasFile: shows file preview card (thumbnail + name + Remove) plus a
+ *     secondary drop zone for additional files
+ *   - Error: Feedback/Error/Background fill + dashed Border/Error outline,
+ *     error helper row in Feedback/Error/Text
+ *   - Disabled / ReadOnly: muted, pointer-events suppressed
+ *
+ * Interaction:
+ *   - Click on the zone (or the button) → opens the native file browser
+ *   - Drag a file over the zone → flips to Hover state
+ *   - Drop a file → flips to HasFile, fires onFileChange(file)
+ *   - Remove → clears the file and fires onFileChange(null)
+ */
+import * as React from "react";
+export type UploadState = "Default" | "Hover" | "Focused" | "HasFile" | "Error" | "Disabled" | "ReadOnly";
+export type UploadProps = {
+    /** Force a visual state. When omitted, state is derived from drag + file. */
+    state?: UploadState;
+    label?: boolean | string;
+    helperText?: boolean | string;
+    required?: boolean;
+    /** Primary instructions inside the drop zone. */
+    instructions?: string;
+    /** File-format hint shown beneath instructions. */
+    fileFormat?: string;
+    /** MIME / extension filter passed to the <input type="file">. */
+    accept?: string;
+    multiple?: boolean;
+    /** Controlled file (or first of multi). */
+    file?: File | null;
+    /** Uncontrolled initial file. */
+    defaultFile?: File | null;
+    onFileChange?: (file: File | null) => void;
+    id?: string;
+    name?: string;
+    className?: string;
+    "aria-label"?: string;
+};
+export declare const Upload: React.ForwardRefExoticComponent<UploadProps & React.RefAttributes<HTMLDivElement>>;
+export default Upload;
+export declare function UploadMatrix(): import("react/jsx-runtime").JSX.Element;

package/dist/WebTopNav.d.ts

@@ -0,0 +1,46 @@
+/**
+ * WebTopNav — React port of Embleema Design System 2.0's
+ * Navigation/Web Top Nav (Figma node 5109:52). Top-of-page navigation bar
+ * with two breakpoint layouts:
+ *
+ *   Desktop (full bar, 1280 px reference)
+ *     ├── TopRow   (logo, flex spacer, Account menu trigger)
+ *     └── TabBar   (horizontal tabs with brand-pink active underline)
+ *
+ *   Mobile (condensed, 390 px reference)
+ *     └── Row      (logo, hamburger toggle)
+ *
+ * Colors map to the semantic tokens from embleema-design-system.md:
+ *   - Background/Default          (#FEFEFE) — bar surface
+ *   - Border/Default              (#DDDDDD) — TabBar bottom border
+ *   - Text/Primary                (#0E0E0E) — active tab + Account label
+ *   - Text/Secondary              (#5E5E5E) — inactive tab labels
+ *   - Accent/Brand                (#C20A72) — active tab underline
+ *   - Action/Primary/Background   (#306AE8) — logo + hamburger
+ *
+ * Tabs use the Primary TabBar style: 14 px Nunito, uppercase, letter-spacing
+ * 0.06em. Active tab is Nunito SemiBold with a 2 px pink underline; inactive
+ * tabs are Nunito Regular in Text/Secondary.
+ */
+import * as React from "react";
+export type WebTopNavBreakpoint = "Desktop" | "Mobile";
+export type WebTopNavTab = {
+    label: string;
+    active?: boolean;
+    onClick?: () => void;
+};
+export type WebTopNavProps = {
+    breakpoint?: WebTopNavBreakpoint;
+    /** Override the default 3-tab sample (Tab 1 / Connect Records / My Health). */
+    tabs?: WebTopNavTab[];
+    /** Account trigger label, shown on Desktop. Default "Account". */
+    accountLabel?: string;
+    onAccountClick?: () => void;
+    /** Fired when the Mobile hamburger is tapped. */
+    onMenuToggle?: () => void;
+    className?: string;
+    "aria-label"?: string;
+};
+export declare const WebTopNav: React.ForwardRefExoticComponent<WebTopNavProps & React.RefAttributes<HTMLElement>>;
+export default WebTopNav;
+export declare function WebTopNavMatrix(): import("react/jsx-runtime").JSX.Element;