@embleema/design-system 0.1.0

package/dist/FormStatusChip.d.ts

@@ -0,0 +1,47 @@
+import { StatusBadgeType } from './StatusBadge';
+/**
+ * FormStatusChip — React port of Embleema Design System 2.0's Clinical/Form
+ * Status Chip component (Figma node 4700:102).
+ *
+ * Pill-shaped status indicator for eCRF forms. Composes a StatusBadge with a
+ * label and a sync indicator for the Saving state.
+ *
+ * Layout (per Figma):
+ *   pill (h 32, padding 4 vertical / 16 horizontal, gap 12, radius 999)
+ *     ├── status group (gap 8):
+ *     │     ├── StatusBadge (20 × 20 padded, 16 × 16 inner pill)
+ *     │     └── label (Nunito Regular 16/1.5, Text/Primary)
+ *     └── sync icon (optional, only when state="Saving")
+ *
+ * Type → border color (1.5 px). The chip's body stays Background/Default;
+ * type identity comes from the badge gradient + a matching border tint:
+ *   - NotStarted      → Border/Default
+ *   - Valid           → #0A595C (darkest teal in Valid badge)
+ *   - WarningsFlagged → #FCA266 (light orange in WarningsFlagged badge)
+ *   - ErrorsFlagged   → #FA6400 (orange in ErrorsFlagged badge)
+ *   - LockedSubmitted → #644AD4 (purple in LockedSubmitted badge)
+ *
+ * Saving state: rotates the sync icon at 1.2 s per turn (linear infinite)
+ * plus a subtle background pulse on the chip body. Both honor
+ * `prefers-reduced-motion`.
+ *
+ * Props:
+ *   - type   : NotStarted | Valid | WarningsFlagged | ErrorsFlagged | LockedSubmitted
+ *   - state  : Default | Saving
+ *   - label  : override the auto-generated label text
+ */
+import * as React from "react";
+export type FormStatusChipType = StatusBadgeType;
+export type FormStatusChipState = "Default" | "Saving";
+export type FormStatusType = FormStatusChipType;
+export type FormStatusChipProps = {
+    type?: FormStatusChipType;
+    state?: FormStatusChipState;
+    label?: string;
+    id?: string;
+    className?: string;
+    "aria-label"?: string;
+};
+export declare const FormStatusChip: React.ForwardRefExoticComponent<FormStatusChipProps & React.RefAttributes<HTMLSpanElement>>;
+export default FormStatusChip;
+export declare function FormStatusChipMatrix(): import("react/jsx-runtime").JSX.Element;

package/dist/Label.d.ts

@@ -0,0 +1,39 @@
+/**
+ * Label — React port of the Embleema Design System 2.0 Input/Label component
+ * (Figma node 4220:977). Reusable form label that supports a required
+ * asterisk and an info tooltip. Two sizes (Small for standard inputs, Large
+ * for section headers).
+ *
+ * Layout in Figma (order = asterisk → info icon → label text, gap = Space/2 = 2px):
+ *   [* (required)] [ⓘ info icon (tooltip)] [Label text]
+ *
+ * Color bindings:
+ *   - Required asterisk: Feedback/Error/Text  = #B31A1A
+ *   - Label text:        Text/Primary         = #0E0E0E
+ *   - Info icon:         currentColor (inherits Text/Primary)
+ *
+ * Typography:
+ *   - Small: body/md, Nunito Regular 16px / 150%
+ *   - Large: Nunito Regular 20px / 120%
+ *
+ * Tooltip is rendered via the existing Tooltip component, so hover/focus,
+ * positioning, and accessibility (aria-describedby) are handled there.
+ */
+import * as React from "react";
+export type LabelSize = "Small" | "Large";
+export type LabelProps = {
+    size?: LabelSize;
+    required?: boolean;
+    tooltip?: boolean;
+    /** Tooltip title shown when `tooltip` is true. */
+    tooltipTitle?: string;
+    /** Tooltip body shown when `tooltip` is true. */
+    tooltipText?: string;
+    /** htmlFor target — links the label to a form control by id. */
+    htmlFor?: string;
+    children?: React.ReactNode;
+    className?: string;
+};
+export declare const Label: React.ForwardRefExoticComponent<LabelProps & React.RefAttributes<HTMLLabelElement>>;
+export default Label;
+export declare function LabelMatrix(): import("react/jsx-runtime").JSX.Element;

package/dist/Link.d.ts

@@ -0,0 +1,38 @@
+/**
+ * Link — React port of the Embleema Design System 2.0 Action/Link component
+ * (Figma node 4682:7). Size and the icon/disabled booleans are props;
+ * Default / Hover / Pressed are wired to real browser :hover and :active
+ * states. Disabled prevents interaction via aria-disabled + pointer-events.
+ *
+ * Color bindings from the Figma component:
+ *   - Default text: Action/Link/Default = Blue/400 (#306AE8)
+ *   - Hover / Pressed text: Action/Link/Hover = Blue/300 (#6994EE)
+ *   - Hover bg: Feedback/Information/Background = Blue/100 (#E3ECFF)
+ *   - Pressed bg: Feedback/AI/Background = AI/Tint (#C7D9FF)
+ *   - Disabled text: Text/Disabled = Neutral/500 (#848484)
+ *   - Disabled underline: Border/Default = Neutral/300 (#DDDDDD)
+ *
+ * Sizes:
+ *   - Medium: 16px Medium (button/md), 16×16 icon
+ *   - Small:  14px Medium (button/sm) with 0.01em letter-spacing, 14×14 icon
+ */
+import * as React from "react";
+export type LinkSize = "Medium" | "Small";
+export type LinkProps = {
+    size?: LinkSize;
+    disabled?: boolean;
+    /** true → default arrow-back glyph. Pass a ReactNode to inject a custom icon. */
+    leadingIcon?: boolean | React.ReactNode;
+    /** true → default arrow-forward glyph. Pass a ReactNode to inject a custom icon. */
+    trailingIcon?: boolean | React.ReactNode;
+    href?: string;
+    target?: string;
+    rel?: string;
+    onClick?: (e: React.MouseEvent<HTMLAnchorElement>) => void;
+    children?: React.ReactNode;
+    className?: string;
+    "aria-label"?: string;
+};
+export declare const Link: React.ForwardRefExoticComponent<LinkProps & React.RefAttributes<HTMLAnchorElement>>;
+export default Link;
+export declare function LinkMatrix(): import("react/jsx-runtime").JSX.Element;

package/dist/Loading.d.ts

@@ -0,0 +1,46 @@
+import { SpinnerSize, SpinnerStyle } from './Spinner';
+/**
+ * Loading — React port of Embleema Design System 2.0's Feedback/Loading
+ * component (Figma node 4887:67).
+ *
+ * Composes Feedback/SpinnerIcon with an optional text label. Used as a
+ * standalone loading indicator for content regions, page-level loads, or any
+ * surface where the spinner alone isn't expressive enough.
+ *
+ * Sizes (spinner + label scale together):
+ *   - Small  → 16 px spinner, 14 px label (body/sm)
+ *   - Medium → 20 px spinner, 16 px label (body/md)
+ *   - Large  → 32 px spinner, 18 px label (body/lg)
+ *
+ * Style:
+ *   - Default → solid stroke (Action/Primary/Background) + Text/Primary label
+ *   - AI      → gradient stroke (#90B3FF → #6F59CF) + Text/Primary label
+ *
+ * Layout:
+ *   - Horizontal → spinner and label side by side, gap 8
+ *   - Vertical   → spinner above label, items centered, gap 8
+ *
+ * Props:
+ *   - size      : Small | Medium | Large
+ *   - style     : Default | AI
+ *   - layout    : Horizontal | Vertical
+ *   - label     : show the label (default true)
+ *   - labelText : label string (default "Loading...")
+ */
+import * as React from "react";
+export type LoadingSize = SpinnerSize;
+export type LoadingStyle = SpinnerStyle;
+export type LoadingLayout = "Horizontal" | "Vertical";
+export type LoadingProps = {
+    size?: LoadingSize;
+    style?: LoadingStyle;
+    layout?: LoadingLayout;
+    label?: boolean;
+    labelText?: string;
+    className?: string;
+    id?: string;
+    "aria-label"?: string;
+};
+export declare const Loading: React.ForwardRefExoticComponent<LoadingProps & React.RefAttributes<HTMLSpanElement>>;
+export default Loading;
+export declare function LoadingMatrix(): import("react/jsx-runtime").JSX.Element;

package/dist/MedicationCard.d.ts

@@ -0,0 +1,54 @@
+/**
+ * MedicationCard — React port of Embleema Design System 2.0's
+ * Clinical/Medication Card component (Figma node 4718:1611).
+ *
+ * Pre-composed form card for medication data entry. Lays out medication
+ * name, dosage, unit, frequency, dates, reason-for-change, and comments
+ * across a responsive 3-column (Desktop) or 1-column (Tablet) grid.
+ *
+ * Per Figma:
+ *   - Card: Background/Default, 8 px radius, Elevation 0 0 4 rgba(0,0,0,0.08)
+ *   - Header: 16 px top/horizontal padding, status badge + 3-dot menu
+ *   - Each cell: 16 px / 20 px padding, label + 48 px field
+ *   - Field: Background/Field (#F8F8F8), 1 px Border/Default, 4 px radius,
+ *           4 px gap, 12 px padding, body/md Light placeholder
+ *   - Footer: ActionButton (text-link primary, small)
+ *
+ * State drives the card's outer affordance:
+ *   - Default → standard shadow, neutral border
+ *   - Error   → 2 px Feedback/Error/Text outline + faint red halo
+ *
+ * Size:
+ *   - Desktop → 1000 px wide, three 3-cell rows
+ *   - Tablet  → 400 px wide, all cells stacked single-column
+ *
+ * Props:
+ *   - state           : forced visual override (Default | Error)
+ *   - size            : Desktop | Tablet
+ *   - medicationName  : value shown in the first field (placeholder when empty)
+ *   - dosage / unit / frequency / startDate / endDate / reasonForChange /
+ *     comments        : same — each accepts an optional string
+ *   - onRemove        : destructive footer button callback (removes the card)
+ */
+import * as React from "react";
+export type MedicationCardSize = "Desktop" | "Tablet";
+export type MedicationCardState = "Default" | "Error";
+export type MedicationCardProps = {
+    state?: MedicationCardState;
+    size?: MedicationCardSize;
+    medicationName?: string;
+    dosage?: string;
+    unit?: string;
+    frequency?: string;
+    startDate?: string;
+    endDate?: string;
+    reasonForChange?: string;
+    comments?: string;
+    onRemove?: () => void;
+    id?: string;
+    className?: string;
+    "aria-label"?: string;
+};
+export declare const MedicationCard: React.ForwardRefExoticComponent<MedicationCardProps & React.RefAttributes<HTMLDivElement>>;
+export default MedicationCard;
+export declare function MedicationCardMatrix(): import("react/jsx-runtime").JSX.Element;

package/dist/MenuDropdown.d.ts

@@ -0,0 +1,51 @@
+/**
+ * MenuDropdown — React port of Embleema Design System 2.0's
+ * Navigation/Menu/Dropdown component (Figma node 5125:7).
+ *
+ * The panel container that hosts a column of Navigation/Menu/Item rows. Opens
+ * below a Navigation/Menu/Trigger. The component renders only the panel —
+ * popover positioning, click-outside, and Escape-to-close live in the parent
+ * (see the matrix demo below for a complete trigger + dropdown wiring).
+ *
+ * Panel styling (semantic tokens from embleema-design-system.md):
+ *   - Background    : Background/Default  (#FEFEFE)
+ *   - Corner radius : Radius/m            (8 px)
+ *   - Shadow        : Elevation/300       (0 4 12 rgba(0,0,0,0.12))
+ *   - Padding       : 8 px vertical, 0 horizontal
+ *   - Min-width     : 200 px (hugs the longest MenuItem label otherwise)
+ */
+import * as React from "react";
+export type MenuDropdownItem = {
+    /** Stable id used as the active key + onItemClick payload. */
+    value: string;
+    label: string;
+    /** Controls the leading icon slot on the MenuItem row. */
+    leadingIcon?: boolean | React.ReactNode;
+    /** When true, the row renders the trailing slot with `shortcut`. */
+    trailingText?: boolean;
+    shortcut?: string;
+    disabled?: boolean;
+};
+export type MenuDropdownProps = {
+    items: MenuDropdownItem[];
+    /** Currently selected value — controls which row gets the Active state. */
+    activeValue?: string;
+    onItemClick?: (value: string) => void;
+    /** Optional override of the min panel width (200 px per Figma default). */
+    minWidth?: number;
+    id?: string;
+    className?: string;
+    /** Forwarded to the panel for ARIA association with a MenuTrigger. */
+    "aria-labelledby"?: string;
+    "aria-label"?: string;
+};
+export declare const MenuDropdown: React.ForwardRefExoticComponent<MenuDropdownProps & React.RefAttributes<HTMLDivElement>>;
+export default MenuDropdown;
+/**
+ * MenuComposedDemo — the interactive popover demo combining MenuTrigger,
+ * MenuDropdown, and MenuItem. Exported separately so it can be reused on
+ * pages that aggregate the whole Menu family (e.g. the consolidated "Menu"
+ * page) without duplicating the popover logic.
+ */
+export declare function MenuComposedDemo(): import("react/jsx-runtime").JSX.Element;
+export declare function MenuDropdownMatrix(): import("react/jsx-runtime").JSX.Element;

package/dist/MenuItem.d.ts

@@ -0,0 +1,38 @@
+/**
+ * MenuItem — React port of Embleema Design System 2.0's
+ * Navigation/Menu/Item component set (Figma node 5121:65).
+ *
+ * Single row inside a Navigation/Menu/Dropdown. 40 px tall, 240 px wide by
+ * default, with a 20 px leading icon, a body-size label, and an optional
+ * trailing shortcut/text slot.
+ *
+ * Color mapping (semantic tokens from embleema-design-system.md):
+ *   Default  : transparent          + Text/Primary label
+ *   Hover    : Background/Selected  + Text/Primary label
+ *   Focus    : Background/Selected  + 2 px Border/FocusRing outline + Text/Primary label
+ *   Active   : Background/Selected  + Action/Primary/Background label
+ *   Disabled : transparent          + Action/Disabled/Text label, no interaction
+ *
+ * Typography:
+ *   Label    : body/sm — Nunito Regular 14 / 1.5, Text/Primary (or per state)
+ *   Shortcut : body/xs — Nunito Regular 12 / 1.4, letter-spacing 0.01em
+ */
+import * as React from "react";
+export type MenuItemState = "Default" | "Hover" | "Focus" | "Active" | "Disabled";
+export type MenuItemProps = {
+    label: string;
+    state?: MenuItemState;
+    /** true → default settings glyph; false → no icon; ReactNode → custom. */
+    leadingIcon?: boolean | React.ReactNode;
+    /** true → render shortcut slot with `shortcut`; false → hidden. */
+    trailingText?: boolean;
+    /** Text shown in the trailing slot when trailingText is true. */
+    shortcut?: string;
+    onClick?: () => void;
+    id?: string;
+    className?: string;
+    "aria-label"?: string;
+};
+export declare const MenuItem: React.ForwardRefExoticComponent<MenuItemProps & React.RefAttributes<HTMLButtonElement>>;
+export default MenuItem;
+export declare function MenuItemMatrix(): import("react/jsx-runtime").JSX.Element;

package/dist/MenuTrigger.d.ts

@@ -0,0 +1,37 @@
+/**
+ * MenuTrigger — React port of Embleema Design System 2.0's
+ * Navigation/Menu/Trigger component set (Figma node 5104:70).
+ *
+ * The clickable button that opens a Navigation/Menu/Dropdown. 20 px leading
+ * icon (Icon/People/User by default), label, and a chevron that points down
+ * by default and rotates 180° on the Open state.
+ *
+ * Color mapping (semantic tokens from embleema-design-system.md):
+ *   Default : transparent          + Text/Primary label
+ *   Hover   : Background/Selected  + Text/Primary label
+ *   Focus   : Background/Selected  + 4 px Border/FocusRing outline + Text/Primary label
+ *   Open    : Background/Selected  + Text/Primary label + chevron rotated 180°
+ *
+ * Geometry:
+ *   - Padding: 8 / 12
+ *   - Gap: 8
+ *   - Corner radius: 4 (Radius/s)
+ *   - Leading icon: 20 × 20
+ *   - Chevron: 20 × 20 (CSS-rotated on Open, same Icon/Navigation/Dropdown asset)
+ */
+import * as React from "react";
+export type MenuTriggerState = "Default" | "Hover" | "Focus" | "Open";
+export type MenuTriggerProps = {
+    label: string;
+    state?: MenuTriggerState;
+    /** true → default person glyph; false → no icon; ReactNode → custom. */
+    leadingIcon?: boolean | React.ReactNode;
+    onClick?: () => void;
+    id?: string;
+    className?: string;
+    "aria-controls"?: string;
+    "aria-label"?: string;
+};
+export declare const MenuTrigger: React.ForwardRefExoticComponent<MenuTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+export default MenuTrigger;
+export declare function MenuTriggerMatrix(): import("react/jsx-runtime").JSX.Element;

package/dist/Modals.d.ts

@@ -0,0 +1,96 @@
+/**
+ * Modals — React ports of Embleema Design System 2.0's Layout modal family:
+ *   - Modal           (Figma node 5036:86)  — feedback modal with Success /
+ *                                              Warning / Error types
+ *   - ModalNavigation (Figma node 5040:111) — native onboarding card with
+ *                                              General / Medications / Labs /
+ *                                              CareTeam types
+ *   - ModalSurvey     (Figma node 5038:7)   — survey modal with prompt, slot
+ *                                              for options, and optional
+ *                                              free-text response area
+ *
+ * All three accept an `inline` prop. When `inline` is set, the modal renders
+ * as a static panel (no Scrim, no Overlay) — useful for design-system pages
+ * that want to display every variant side by side. When `inline` is omitted,
+ * the modal renders inside a Scrim overlay with click-to-dismiss + Escape.
+ *
+ * Color tokens used (per embleema-design-system.md):
+ *   - Background/Default            #FEFEFE
+ *   - Background/Primary            #F8F8F8
+ *   - Background/Field              #F8F8F8
+ *   - Text/Primary                  #0E0E0E
+ *   - Text/Secondary                #5E5E5E
+ *   - Text/Placeholder              #848484
+ *   - Text/Inverse                  #FEFEFE
+ *   - Action/Primary/Background     #306AE8
+ *   - Action/Primary/Text           #FEFEFE
+ *   - Feedback/Success/Indicator    #32A032
+ *   - Feedback/Warning/Indicator    #FA6400
+ *   - Feedback/Error/Text           #B31A1A
+ *   - Purple/400 (ModalNav border)  #644AD4
+ *   - AI/Light (Survey textarea)    #90B3FF
+ */
+import * as React from "react";
+export type ModalType = "Success" | "Warning" | "Error";
+export type ModalProps = {
+    type?: ModalType;
+    header: string;
+    body: string;
+    primaryLabel?: string;
+    onPrimaryClick?: () => void;
+    secondaryLabel?: string;
+    onSecondaryClick?: () => void;
+    closeButton?: boolean;
+    secondaryButton?: boolean;
+    /** When true, render the panel inline (no Scrim, ignores open/onClose). */
+    inline?: boolean;
+    /** Only used when inline is false. */
+    open?: boolean;
+    onClose?: () => void;
+    id?: string;
+};
+export declare function Modal(props: ModalProps): import("react/jsx-runtime").JSX.Element;
+export type ModalNavigationType = "General" | "Medications" | "Labs" | "CareTeam";
+export type ModalNavigationProps = {
+    type?: ModalNavigationType;
+    title: string;
+    body: string;
+    primaryLabel?: string;
+    onPrimaryClick?: () => void;
+    secondaryLabel?: string;
+    onSecondaryClick?: () => void;
+    closeButton?: boolean;
+    secondaryButton?: boolean;
+    featureIcon?: React.ReactNode;
+    inline?: boolean;
+    open?: boolean;
+    onClose?: () => void;
+    id?: string;
+};
+export declare function ModalNavigation(props: ModalNavigationProps): import("react/jsx-runtime").JSX.Element;
+export type SurveyOption = {
+    value: string;
+    label: string;
+};
+export type ModalSurveyProps = {
+    header: string;
+    body: string;
+    prompt?: string;
+    options?: SurveyOption[];
+    /** Show the free-text response textarea. */
+    textInput?: boolean;
+    textInputLabel?: string;
+    textInputPlaceholder?: string;
+    primaryLabel?: string;
+    onPrimaryClick?: (selected: string[], text: string) => void;
+    secondaryLabel?: string;
+    onSecondaryClick?: () => void;
+    closeButton?: boolean;
+    secondaryButton?: boolean;
+    inline?: boolean;
+    open?: boolean;
+    onClose?: () => void;
+    id?: string;
+};
+export declare function ModalSurvey(props: ModalSurveyProps): import("react/jsx-runtime").JSX.Element;
+export declare function ModalsMatrix(): import("react/jsx-runtime").JSX.Element;

package/dist/NativeBottomNav.d.ts

@@ -0,0 +1,53 @@
+/**
+ * NativeBottomNav — React port of Embleema Design System 2.0's
+ * Navigation/BottomNav component (Figma node 5113:7) and the underlying
+ * Navigation/NavItem variant set (5112:15).
+ *
+ * Native app bottom navigation bar with 5 fixed sections (Home, Health,
+ * Studies, Tokens, Profile). Exactly one item is Active at a time; the icon
+ * and label both highlight in Action/Primary/Background when Active.
+ *
+ * Layout (per Figma):
+ *   Bar:
+ *     - bg Background/Default
+ *     - shadow Elevation/100 (0 0 3 rgba(0,0,0,0.12))
+ *     - flex items-center justify-between
+ *     - padding 8 top, 24 bottom (safe-area), 24 horizontal
+ *     - 390 px reference width (responsive FILL in production)
+ *   NavItem:
+ *     - flex-col items-center, gap 4
+ *     - 24 × 24 icon
+ *     - 12 / 16 Nunito Bold label, text-center, color per state
+ *     - 44 × 44 minimum tap target (CSS padding inflates the visual 24-px
+ *       icon column to meet the spec)
+ *   Colors:
+ *     - Active   → Action/Primary/Background (#306AE8)
+ *     - Inactive → Text/Placeholder (#848484)
+ *
+ * Accessibility (per Figma docs):
+ *   - role="navigation" + aria-label="Main navigation" on the bar
+ *   - role="tablist" inside; role="tab" on each item
+ *   - Active item: aria-selected="true" + aria-current="page"
+ *   - Icons aria-hidden; label carries the accessible name
+ */
+import * as React from "react";
+export type NativeBottomNavValue = "home" | "health" | "studies" | "tokens" | "profile";
+export type NativeBottomNavItem = {
+    value: NativeBottomNavValue;
+    label: string;
+    icon: React.ReactNode;
+};
+export type NativeBottomNavProps = {
+    /** Override the 5 default Embleema sections. */
+    items?: NativeBottomNavItem[];
+    /** Controlled active value. */
+    value?: NativeBottomNavValue | string;
+    defaultValue?: NativeBottomNavValue | string;
+    onChange?: (value: string) => void;
+    id?: string;
+    className?: string;
+    "aria-label"?: string;
+};
+export declare const NativeBottomNav: React.ForwardRefExoticComponent<NativeBottomNavProps & React.RefAttributes<HTMLElement>>;
+export default NativeBottomNav;
+export declare function NativeBottomNavMatrix(): import("react/jsx-runtime").JSX.Element;

package/dist/ObjectGroupField.d.ts

@@ -0,0 +1,63 @@
+import { DropdownOption } from './Dropdown';
+/**
+ * ObjectGroupField — React port of Embleema Design System 2.0's
+ * Clinical/Object Group Field component (Figma node 4730:460).
+ *
+ * Grouped measurement input for clinical data: a section heading plus one
+ * or more value fields and a unit-selector dropdown. Pre-configured for
+ * Weight / Height / Temperature / Other; responsive via Direction.
+ *
+ * Type → field set (per Figma):
+ *   - Weight      : [Value field labeled "Weight"]  + [Unit dropdown]
+ *   - Height      : [Feet field] + [Inches field]   + [Unit dropdown]
+ *   - Temperature : [Value field labeled "Value"]   + [Unit dropdown]
+ *   - Other       : [Value field labeled "Value"]   + [Unit dropdown]
+ *
+ * Direction:
+ *   - Horizontal → fields laid out side-by-side, each flex-1
+ *   - Vertical   → fields stacked full-width
+ *
+ * Composition: the unit picker uses the shared <Dropdown /> component so it
+ * inherits search, keyboard navigation, click-outside-to-close, and validation
+ * styling. The numeric value inputs are rendered inline (a plain styled
+ * <input>) since they don't need the full TextField molecule's chrome —
+ * simpler markup, closer to the Figma source.
+ *
+ * Props:
+ *   - type / direction
+ *   - heading           : override the section heading (default per type)
+ *   - value             : controlled numeric value (Weight / Temperature / Other)
+ *   - defaultValue      : uncontrolled initial value
+ *   - onValueChange
+ *   - feetValue / defaultFeetValue / onFeetChange  (Height only)
+ *   - inchesValue / defaultInchesValue / onInchesChange  (Height only)
+ *   - unit / defaultUnit / onUnitChange
+ *   - unitOptions       : override the per-type default unit list
+ */
+import * as React from "react";
+export type ObjectGroupFieldType = "Weight" | "Height" | "Temperature" | "Other";
+export type ObjectGroupFieldDirection = "Horizontal" | "Vertical";
+export type ObjectGroupFieldProps = {
+    type?: ObjectGroupFieldType;
+    direction?: ObjectGroupFieldDirection;
+    heading?: string;
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (next: string) => void;
+    feetValue?: string;
+    defaultFeetValue?: string;
+    onFeetChange?: (next: string) => void;
+    inchesValue?: string;
+    defaultInchesValue?: string;
+    onInchesChange?: (next: string) => void;
+    unit?: string;
+    defaultUnit?: string;
+    onUnitChange?: (next: string) => void;
+    unitOptions?: DropdownOption[];
+    id?: string;
+    className?: string;
+    "aria-label"?: string;
+};
+export declare const ObjectGroupField: React.ForwardRefExoticComponent<ObjectGroupFieldProps & React.RefAttributes<HTMLDivElement>>;
+export default ObjectGroupField;
+export declare function ObjectGroupFieldMatrix(): import("react/jsx-runtime").JSX.Element;

package/dist/ParticipantActivityStatus.d.ts

@@ -0,0 +1,39 @@
+/**
+ * ParticipantActivityStatus — React port of Embleema Design System 2.0's
+ * Clinical/ParticipantActivityStatus component (Figma node 4740:31).
+ *
+ * Participant enrollment indicator: 24 × 24 icon + label showing where a
+ * participant sits in the study lifecycle. Used in participant lists,
+ * dashboards, and detail headers.
+ *
+ * Status → icon + label + fill (per Figma):
+ *   - PendingAccount   → person + gear   → "Pending Sign-Up" → orange gradient   #FCA266 → #FA6400
+ *   - Onboarding       → person + pencil → "Onboarding"      → pink → blue       #FF66AB → #6694FA
+ *   - Participating    → people + check  → "Active"          → teal stack        #0A5A5C → #028388 → #00AFB2
+ *   - NotParticipating → people + X      → "Inactive"        → Neutral/500 flat  #B0B0B0
+ *   - StudyComplete    → check in circle → "Study Complete"  → purple → blue     #644AD4 → #2760DE
+ *   - Ineligible       → X in circle     → "Ineligible"      → Neutral/500 flat  #B0B0B0
+ *
+ * The label is always Text/Primary; status identity is carried by the icon's
+ * gradient or flat fill, all of which are baked into the Figma source as raw
+ * primitives (gradient stops cannot be variable-bound in Figma, so we inline
+ * the same hex values).
+ *
+ * Type style: body/sm (Nunito Regular 14 / 1.5).
+ *
+ * Props:
+ *   - status : PendingAccount | Onboarding | Participating | NotParticipating | StudyComplete | Ineligible
+ *   - label  : optional override (defaults to the per-status label)
+ */
+import * as React from "react";
+export type ParticipantActivityStatusType = "PendingAccount" | "Onboarding" | "Participating" | "NotParticipating" | "StudyComplete" | "Ineligible";
+export type ParticipantActivityStatusProps = {
+    status?: ParticipantActivityStatusType;
+    label?: string;
+    id?: string;
+    className?: string;
+    "aria-label"?: string;
+};
+export declare const ParticipantActivityStatus: React.ForwardRefExoticComponent<ParticipantActivityStatusProps & React.RefAttributes<HTMLSpanElement>>;
+export default ParticipantActivityStatus;
+export declare function ParticipantActivityStatusMatrix(): import("react/jsx-runtime").JSX.Element;

package/dist/ProgressBar.d.ts

@@ -0,0 +1,56 @@
+/**
+ * ProgressBar — React port of Embleema Design System 2.0's Feedback/ProgressBar
+ * component (Figma node 4897:157).
+ *
+ * Determinate progress indicator. For unknown-duration loading, use Spinner
+ * or Loading instead.
+ *
+ * Sizes (track height per Figma):
+ *   - Small  → 4 px, 4 px radius
+ *   - Medium → 7 px, pill radius
+ *   - Large  → 12 px, pill radius
+ *
+ * Styles:
+ *   - Default → fill in Action/Primary/Background (#306AE8)
+ *   - AI      → fill is the Gradient/AI treatment (#90B3FF → #6F59CF)
+ *
+ * Track:
+ *   - bg Background/Secondary (#F1F1F1), 1 px Border/Default outline.
+ *
+ * Label (optional, right of the bar):
+ *   - Small  → 12 px Nunito Regular 1.4
+ *   - Medium → 14 px Nunito Regular 1.5
+ *   - Large  → 16 px Nunito Regular 1.5
+ *   All in Text/Secondary.
+ *
+ * Props:
+ *   - progress  : 0–100 (number, clamped). Accepts any continuous value, not
+ *                 just the five Figma stops.
+ *   - size      : Small | Medium | Large
+ *   - style     : Default | AI
+ *   - label     : show the label (default false)
+ *   - labelText : overrides the default "<progress>%" string
+ *
+ * NOTE: Figma defines a discrete "Medium / 100% / Default" variant with a 4 px
+ * track radius (the rest of Medium uses pill). That looks like a designer
+ * inconsistency and creates a visible "snap" when sliding through 100%, so
+ * we keep Medium at pill radius across all progress values. Verified
+ * intentional with: this matches the Medium/AI and Medium/<100% behavior;
+ * only the single Medium/100%/Default cell differs in the source.
+ */
+import * as React from "react";
+export type ProgressBarSize = "Small" | "Medium" | "Large";
+export type ProgressBarStyle = "Default" | "AI";
+export type ProgressBarProps = {
+    progress?: number;
+    size?: ProgressBarSize;
+    style?: ProgressBarStyle;
+    label?: boolean;
+    labelText?: string;
+    id?: string;
+    className?: string;
+    "aria-label"?: string;
+};
+export declare const ProgressBar: React.ForwardRefExoticComponent<ProgressBarProps & React.RefAttributes<HTMLDivElement>>;
+export default ProgressBar;
+export declare function ProgressBarMatrix(): import("react/jsx-runtime").JSX.Element;