@embleema/design-system 0.1.0

package/dist/Radio.d.ts

@@ -0,0 +1,45 @@
+/**
+ * Radio — React port of Embleema Design System 2.0's Selector/Radio component
+ * (Figma node 4258:824).
+ *
+ * Structure mirrors the Figma source:
+ *   wrapper (HORIZONTAL, gap 8)
+ *     ├── container (32×32 circle)
+ *     │     └── state-layer (32×32, padding 4 — fills with a tint on
+ *     │            hover/focus/pressed)
+ *     │           ├── UncheckedIcon (20×20 hollow circle, visible when not selected)
+ *     │           └── CheckedIcon   (20×20 ring + dot, visible when selected)
+ *     └── label (optional, body/md)
+ *
+ * Real `<input type="radio">` sits invisibly underneath the wrapper so that
+ * native group behaviour works: radios sharing a `name` attribute auto-deselect
+ * each other, keyboard arrow navigation works, screen readers announce the
+ * right semantics. Pass the same `name` to every Radio in a group.
+ *
+ * Props:
+ *   - state           : forced override for previews (Pressed/Hover/etc.)
+ *   - selected        : controlled checked state
+ *   - defaultSelected : uncontrolled initial state
+ *   - label           : label string (clicking the label selects the radio)
+ *   - disabled        : maps to data-state="Disabled" + HTML disabled
+ *   - name, value     : standard HTML — required for grouping
+ *   - onChange        : called with the new selected boolean (true on selection)
+ */
+import * as React from "react";
+export type RadioState = "Default" | "Hover" | "Focused" | "Pressed" | "Disabled";
+export type RadioProps = {
+    state?: RadioState;
+    selected?: boolean;
+    defaultSelected?: boolean;
+    label?: string;
+    disabled?: boolean;
+    onChange?: (selected: boolean) => void;
+    name?: string;
+    value?: string;
+    id?: string;
+    className?: string;
+    "aria-label"?: string;
+};
+export declare const Radio: React.ForwardRefExoticComponent<RadioProps & React.RefAttributes<HTMLInputElement>>;
+export default Radio;
+export declare function RadioMatrix(): import("react/jsx-runtime").JSX.Element;

package/dist/Scrim.d.ts

@@ -0,0 +1,34 @@
+/**
+ * Scrim — React port of Embleema Design System 2.0's Layout/Scrim component
+ * (Figma node 5050:7). Full-screen dim overlay used behind modals and
+ * dialogs. Single component, no variants.
+ *
+ * Spec from Figma:
+ *   - Fill: rgba(14, 14, 14, 0.32) — Text/Primary at 32 % opacity
+ *   - No blur
+ *   - Stretches to fill its positioning ancestor (default: viewport via
+ *     position: fixed)
+ *
+ * The component is purely decorative (aria-hidden) per Figma's accessibility
+ * note. Pair it with a modal that owns the focus trap. Optional `onClick`
+ * lets the parent dismiss the modal when the user taps the scrim area.
+ */
+import * as React from "react";
+export type ScrimProps = {
+    /** Render only when true. Default true (let callers handle visibility). */
+    visible?: boolean;
+    /** Fires when the scrim is clicked — wire to your modal's close handler. */
+    onClick?: () => void;
+    /** Position mode. "fixed" covers the viewport; "absolute" fills the nearest
+     *  positioned ancestor (use for in-page previews). Default "fixed". */
+    position?: "fixed" | "absolute";
+    /** Stack order. Default 999. */
+    zIndex?: number;
+    id?: string;
+    className?: string;
+    /** Optional content to render inside the scrim (e.g. a modal). */
+    children?: React.ReactNode;
+};
+export declare const Scrim: React.ForwardRefExoticComponent<ScrimProps & React.RefAttributes<HTMLDivElement>>;
+export default Scrim;
+export declare function ScrimMatrix(): import("react/jsx-runtime").JSX.Element;

package/dist/SectionHeader.d.ts

@@ -0,0 +1,37 @@
+/**
+ * SectionHeader — Disclosure header for eCRF clinical forms.
+ *
+ * React port of Embleema Design System 2.0's Clinical/Section Header
+ * (Figma node 5017:38). A full-width row with the label left-aligned and
+ * a chevron right-aligned that toggles the section open/closed.
+ *
+ * Layout (matches Figma exactly):
+ *   button (px 16, py 12, gap 8, radius 8, bg Background/Primary #F8F8F8)
+ *     ├── label  (Nunito Regular 20 / 1.2, Text/Primary, flex: 1, left)
+ *     └── chevron (24 × 24, Neutral/500 #848484, right)
+ *         - Collapsed: chevron-down  (▼)
+ *         - Expanded:  chevron-up    (▲) — same SVG rotated 180°
+ *
+ * Props:
+ *   - state         : forced override (Collapsed | Expanded)
+ *   - defaultState  : uncontrolled initial state (default "Collapsed")
+ *   - onStateChange : called with the new state on click / keyboard activate
+ *   - label         : section label text (default "Label")
+ *   - children      : content rendered below the header when Expanded; omit
+ *                     for a header-only element
+ */
+import * as React from "react";
+export type SectionHeaderState = "Collapsed" | "Expanded";
+export type SectionHeaderProps = {
+    state?: SectionHeaderState;
+    defaultState?: SectionHeaderState;
+    onStateChange?: (next: SectionHeaderState) => void;
+    label?: string;
+    children?: React.ReactNode;
+    id?: string;
+    className?: string;
+    "aria-label"?: string;
+};
+export declare const SectionHeader: React.ForwardRefExoticComponent<SectionHeaderProps & React.RefAttributes<HTMLButtonElement>>;
+export default SectionHeader;
+export declare function SectionHeaderMatrix(): import("react/jsx-runtime").JSX.Element;

package/dist/Selector.d.ts

@@ -0,0 +1,64 @@
+/**
+ * Selector — React port of Embleema Design System 2.0's Selector/Selector
+ * component (Figma node 4240:53).
+ *
+ * A single option row. Used standalone or composed inside a Dropdown Menu's
+ * option list. Supports four content types and four states.
+ *
+ * Structure mirrors the Figma source:
+ *   row (HORIZONTAL, gap 8, min-h 40, px 12, py 8)
+ *     ├── (Checkbox type) Checkbox glyph (no built-in label)
+ *     ├── (Radio type)    Radio glyph    (no built-in label)
+ *     ├── (Icon type)     LeadingIcon (20×20, optional)
+ *     ├── label text (body/md, Nunito Light)
+ *     └── trailing tooltip icon (20×20, optional info glyph)
+ *
+ * Selection model:
+ *   - Plain / Icon : the whole row is the toggle. Click toggles `selected`.
+ *                    On Selected, the row gets the Background/Selected tint.
+ *   - Checkbox     : the Checkbox component owns the selected state visually.
+ *                    Clicking anywhere on the row toggles the checkbox.
+ *                    The row itself does NOT add the selected tint (the
+ *                    checkbox fill communicates selection).
+ *   - Radio        : same pattern as Checkbox but uses the Radio component
+ *                    and group `name` for native single-selection.
+ *
+ * Props:
+ *   - type            : Plain | Icon | Checkbox | Radio
+ *   - state           : forced visual override (Default | Hover | Selected | Disabled)
+ *   - label           : option text (defaults to "Option")
+ *   - leadingIcon     : when type=Icon — `true` renders the default placeholder
+ *                       glyph, or pass a React node for a custom icon
+ *   - tooltip         : show the trailing info icon
+ *   - tooltipText     : title text revealed on the trailing icon's :title
+ *   - selected        : controlled selection
+ *   - defaultSelected : uncontrolled initial selection
+ *   - disabled        : maps to data-state="Disabled"
+ *   - name, value     : Radio group support (required for Radio type)
+ *   - onChange        : called with the new selected boolean
+ *   - onClick         : passthrough for row click
+ */
+import * as React from "react";
+export type SelectorType = "Plain" | "Icon" | "Checkbox" | "Radio";
+export type SelectorState = "Default" | "Hover" | "Selected" | "Disabled";
+export type SelectorProps = {
+    type?: SelectorType;
+    state?: SelectorState;
+    label?: string;
+    leadingIcon?: boolean | React.ReactNode;
+    tooltip?: boolean;
+    tooltipText?: string;
+    selected?: boolean;
+    defaultSelected?: boolean;
+    disabled?: boolean;
+    onChange?: (selected: boolean) => void;
+    onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
+    name?: string;
+    value?: string;
+    id?: string;
+    className?: string;
+    "aria-label"?: string;
+};
+export declare const Selector: React.ForwardRefExoticComponent<SelectorProps & React.RefAttributes<HTMLDivElement>>;
+export default Selector;
+export declare function SelectorMatrix(): import("react/jsx-runtime").JSX.Element;

package/dist/SelectorOption.d.ts

@@ -0,0 +1,44 @@
+/**
+ * SelectorOption — React port of the Embleema Design System 2.0
+ * Selector/Selector Option component (Figma node 4485:7). A card-style
+ * row option used inside Boolean fields, option grids, and card-based
+ * selection patterns. Supports a leading icon, a Radio indicator, a
+ * Checkbox indicator, and a plain text label.
+ *
+ * Color bindings (Figma extraction):
+ *   - Default: bg Background/Field (#F8F8F8) + 1px Border/Default (#DDDDDD)
+ *   - Hover: 1px Border/Focus (#306AE8), Background/Field
+ *   - Focused: 1.5px Border/Focus (#306AE8) + focus ring
+ *   - Selected: bg Background/Selected (#E3ECFF) + 1.5px Border/Focus
+ *   - Error: bg Feedback/Error/Background + 1.5px Border/Error
+ *   - Warning: bg Feedback/Warning/Background + 1.5px Feedback/Warning/Indicator
+ *   - Success: bg Feedback/Success/Background + 1.5px Feedback/Success/Indicator
+ *   - AI: bg Feedback/AI/Background (#C7D9FF) + 1.5px AI/Light (#90B3FF)
+ *   - Disabled*: bg Background/Disabled (#F1F1F1) + 1.5px Border/Subtle
+ *   - ReadOnly*: same chrome as Disabled but selection (if any) stays visible
+ */
+import * as React from "react";
+export type SelectorOptionState = "Default" | "Hover" | "Focused" | "Selected" | "Error" | "Warning" | "Success" | "AI" | "DisabledUnselected" | "DisabledSelected" | "ReadOnlyUnselected" | "ReadOnlySelected";
+export type SelectorOptionProps = {
+    /** Force a visual state. When omitted, derived from selected + interaction. */
+    state?: SelectorOptionState;
+    label?: boolean | string;
+    leadingIcon?: boolean | React.ReactNode;
+    /** Render a Radio indicator inside the option. Mutually exclusive with checkbox. */
+    radio?: boolean;
+    /** Render a Checkbox indicator inside the option. */
+    checkbox?: boolean;
+    /** Controlled selection. */
+    selected?: boolean;
+    defaultSelected?: boolean;
+    onChange?: (selected: boolean) => void;
+    /** Underlying value passed to onChange via parent groups (not used internally). */
+    value?: string;
+    id?: string;
+    name?: string;
+    className?: string;
+    "aria-label"?: string;
+};
+export declare const SelectorOption: React.ForwardRefExoticComponent<SelectorOptionProps & React.RefAttributes<HTMLButtonElement>>;
+export default SelectorOption;
+export declare function SelectorOptionMatrix(): import("react/jsx-runtime").JSX.Element;

package/dist/SelectorOptionGroup.d.ts

@@ -0,0 +1,61 @@
+/**
+ * SelectorOptionGroup — React port of Embleema Design System 2.0's
+ * Input/Selector Option Group (Figma node 4659:953). Groups multiple
+ * SelectorOption rows together with a shared label, single- or multi-select
+ * behavior, and group-level validation.
+ *
+ * Structure (per Figma):
+ *   wrapper (LabelPosition=Top)
+ *     ├── Label
+ *     ├── Options column (gap 12)
+ *     │     └── SelectorOption × N
+ *     └── HelperText  (Error only)  ── Alert icon + message
+ *
+ *   wrapper (LabelPosition=Left)
+ *     ├── Label slot   (fixed 120 px column)
+ *     └── Right column
+ *           ├── Options column
+ *           └── HelperText (Error only)
+ *
+ * Selection model:
+ *   - SelectionType="Single" → radio behavior. `value` is a single string.
+ *   - SelectionType="Multi"  → checkbox behavior. `value` is a string[].
+ *
+ * Group state propagation to each SelectorOption:
+ *   - Default  → child renders as Default / Selected based on per-option state
+ *   - Error    → child gets state="Error"
+ *   - Disabled → child gets state="DisabledSelected" or "DisabledUnselected"
+ *   - ReadOnly → child gets state="ReadOnlySelected" or "ReadOnlyUnselected"
+ */
+import * as React from "react";
+export type SelectorOptionGroupState = "Default" | "Error" | "Disabled" | "ReadOnly";
+export type SelectorOptionGroupLabelPosition = "Top" | "Left";
+export type SelectorOptionGroupSelectionType = "Single" | "Multi";
+export type SelectorOptionItem = {
+    value: string;
+    label: string;
+};
+export type SelectorOptionGroupProps = {
+    state?: SelectorOptionGroupState;
+    labelPosition?: SelectorOptionGroupLabelPosition;
+    selectionType?: SelectorOptionGroupSelectionType;
+    /** false hides the label, true uses DEFAULT_LABEL, string overrides. */
+    label?: boolean | string;
+    required?: boolean;
+    /** Controlled. Single → string. Multi → string[]. */
+    value?: string | string[];
+    /** Uncontrolled initial selection. */
+    defaultValue?: string | string[];
+    onChange?: (next: string | string[]) => void;
+    options: SelectorOptionItem[];
+    /** Shown beneath the options when state="Error". */
+    helperText?: string;
+    /** Shared `name` for the underlying inputs (radio grouping in Single mode). */
+    name?: string;
+    id?: string;
+    className?: string;
+    "aria-label"?: string;
+};
+export declare const SelectorOptionGroup: React.ForwardRefExoticComponent<SelectorOptionGroupProps & React.RefAttributes<HTMLDivElement>>;
+export default SelectorOptionGroup;
+export declare function SelectorOptionGroupMatrix(): import("react/jsx-runtime").JSX.Element;

package/dist/SliderBar.d.ts

@@ -0,0 +1,46 @@
+/**
+ * SliderBar — React port of the Embleema Design System 2.0 Input/Slider Bar
+ * (Figma node 4543:141). Interactive slider with four types:
+ *   - Continuous: smooth dragging from min to max
+ *   - Discrete:   snaps to evenly-spaced steps (tick marks on the track)
+ *   - Range:      two thumbs for min/max selection
+ *   - Scale:      continuous-style drag, but track shows a blue→pink gradient
+ *
+ * Dimensions and color bindings pulled directly from Figma:
+ *   - Track: 8px tall, 100px radius
+ *   - Thumb: 24px circle, Action/Primary/Background (#306AE8) by default,
+ *     Neutral/300 (#DDDDDD) when disabled, white-bordered when Scale
+ *   - Track bg: Background/Selected (#E3ECFF) with Border/Focus-Ring
+ *     (#A2BDF5) 1px outline
+ *   - Active fill: gradient Blue/300 (#6694FA) → Blue/200 (#A2BDF5)
+ *   - Scale track: linear gradient that mimics the radial blue→pink asset
+ *   - Disabled track: Background/Disabled (#F1F1F1) with Neutral/300 fill
+ *   - Number bubble (Active): Action/Primary/Background border, 4px radius
+ *
+ * "Active" state in Figma is forced for layout — at runtime it lights up
+ * automatically while the user is dragging a thumb.
+ */
+import * as React from "react";
+export type SliderBarType = "Continuous" | "Discrete" | "Range" | "Scale";
+export type SliderBarState = "Default" | "Active" | "Disabled";
+export type SliderBarProps = {
+    type?: SliderBarType;
+    /** Force a visual state. When omitted, Active is derived from drag state. */
+    state?: SliderBarState;
+    min?: number;
+    max?: number;
+    /** Step for Discrete (default 1). Continuous/Scale/Range ignore. */
+    step?: number;
+    /** Number of tick marks for Discrete/Range (default 11 — 0,10,…,100). */
+    ticks?: number;
+    /** Single value (Continuous / Discrete / Scale) or [min, max] (Range). */
+    value?: number | [number, number];
+    defaultValue?: number | [number, number];
+    onChange?: (value: number | [number, number]) => void;
+    disabled?: boolean;
+    className?: string;
+    "aria-label"?: string;
+};
+export declare const SliderBar: React.ForwardRefExoticComponent<SliderBarProps & React.RefAttributes<HTMLDivElement>>;
+export default SliderBar;
+export declare function SliderBarMatrix(): import("react/jsx-runtime").JSX.Element;

package/dist/SliderField.d.ts

@@ -0,0 +1,47 @@
+/**
+ * SliderField — React port of the Embleema Design System 2.0
+ * Input/Slider Field component (Figma node 4634:231). A molecule that wraps
+ * the SliderBar atom with a label, 3 scale labels under the track, one or
+ * two numeric input fields, and a helper / error message row.
+ *
+ * Type mapping to SliderBar:
+ *   - Slider → SliderBar type="Discrete" + a single numeric field below
+ *   - Range  → SliderBar type="Range" + two numeric fields (min / max)
+ *   - Scale  → SliderBar type="Scale", no numeric field
+ *
+ * Color bindings:
+ *   - Default label:   Text/Secondary (#5E5E5E) — per Figma
+ *   - Error label:     Text/Error (#E02020)
+ *   - Disabled label:  Text/Disabled (#848484)
+ *   - Error field:     Feedback/Error/Background (#FFE2E2) + Border/Error (#E02020)
+ *   - Disabled field:  Background/Disabled (#F1F1F1) + Border/Subtle (#F1F1F1)
+ *   - Helper (error):  Feedback/Error/Text (#B31A1A)
+ */
+import * as React from "react";
+export type SliderFieldType = "Slider" | "Range" | "Scale";
+export type SliderFieldState = "Default" | "Error" | "Disabled" | "ReadOnly";
+export type SliderFieldProps = {
+    type?: SliderFieldType;
+    state?: SliderFieldState;
+    label?: boolean | string;
+    helperText?: boolean | string;
+    required?: boolean;
+    min?: number;
+    max?: number;
+    step?: number;
+    /** Number of evenly-spaced tick marks on the track (Slider/Range). */
+    ticks?: number;
+    /** Single value (Slider/Scale) or [min, max] (Range). */
+    value?: number | [number, number];
+    defaultValue?: number | [number, number];
+    onChange?: (value: number | [number, number]) => void;
+    /** Three labels positioned start / middle / end under the track. */
+    scaleLabels?: [string, string, string];
+    id?: string;
+    name?: string;
+    className?: string;
+    "aria-label"?: string;
+};
+export declare const SliderField: React.ForwardRefExoticComponent<SliderFieldProps & React.RefAttributes<HTMLDivElement>>;
+export default SliderField;
+export declare function SliderFieldMatrix(): import("react/jsx-runtime").JSX.Element;

package/dist/Snackbar.d.ts

@@ -0,0 +1,67 @@
+/**
+ * Snackbar — React port of Embleema Design System 2.0's Feedback/Snackbar
+ * component (Figma node 4913:219).
+ *
+ * Transient feedback toast. Single layout for short messages; Stacked layout
+ * (Figma calls it "Snackbar") wraps the action/close buttons onto a second
+ * row for longer text.
+ *
+ * Structure:
+ *   Single (one row, items-center, gap 8, padding 8/12):
+ *     [StatusIcon] [supporting text — flex 1] [(Action)] [(Close)]
+ *
+ *   Stacked (flex-col, gap 4, padding 12):
+ *     [StatusIcon] [supporting text — flex 1]
+ *                                     [(Action)] [(Close)]   (right-aligned)
+ *
+ * Type → border color + status icon (same icon set as Alert):
+ *   - Success     → Feedback/Success/Text     + Icon/Status/Check (4052:2995)
+ *   - Information → Feedback/Information/Text + Icon/Status/Info  (4052:3158)
+ *   - Warning     → Feedback/Warning/Text     + Icon/Status/Alert (4052:2918)
+ *   - Error       → Feedback/Error/Text       + Icon/Action/CloseCircle (4052:3036)
+ *
+ * Fixed visual properties (per Figma):
+ *   - Background: Background/Primary (#F8F8F8)
+ *   - Width: 346px
+ *   - Border: 2px solid (per type)
+ *   - Radius: 4px
+ *   - Drop shadow: 0 0 2px rgba(0,0,0,0.08)
+ *   - Body text: body/md (Nunito Regular 16/1.5, Text/Primary)
+ *   - Action text: 14 px Nunito Regular 1.5, Action/Primary/Background
+ *
+ * Props:
+ *   - type            : Success | Information | Warning | Error
+ *   - layout          : Single | Stacked
+ *   - message         : supporting text (or use children for richer content)
+ *   - actionButton    : show the text-button action (default false)
+ *   - actionLabel     : action label (default "Button")
+ *   - onActionClick   : action callback
+ *   - closeButton     : show the X (default true)
+ *   - onClose         : close callback
+ *   - visible         : controlled visibility
+ *   - defaultVisible  : uncontrolled initial visibility (default true)
+ *   - duration        : auto-dismiss ms (0 = never; default 0)
+ */
+import * as React from "react";
+export type SnackbarType = "Success" | "Information" | "Warning" | "Error";
+export type SnackbarLayout = "Single" | "Stacked";
+export type SnackbarProps = {
+    type?: SnackbarType;
+    layout?: SnackbarLayout;
+    message?: string;
+    children?: React.ReactNode;
+    actionButton?: boolean;
+    actionLabel?: string;
+    onActionClick?: () => void;
+    closeButton?: boolean;
+    onClose?: () => void;
+    visible?: boolean;
+    defaultVisible?: boolean;
+    duration?: number;
+    id?: string;
+    className?: string;
+    "aria-label"?: string;
+};
+export declare const Snackbar: React.ForwardRefExoticComponent<SnackbarProps & React.RefAttributes<HTMLDivElement>>;
+export default Snackbar;
+export declare function SnackbarMatrix(): import("react/jsx-runtime").JSX.Element;

package/dist/Spinner.d.ts

@@ -0,0 +1,34 @@
+/**
+ * Spinner — React port of Embleema Design System 2.0's Feedback/SpinnerIcon
+ * component (Figma node 4885:25).
+ *
+ * Animated loading glyph. Used standalone, inside buttons / fields, or wrapped
+ * by Feedback/Loading.
+ *
+ * Sizes:
+ *   - Small  → 16 px
+ *   - Medium → 20 px
+ *   - Large  → 32 px
+ *
+ * Styles:
+ *   - Default → solid dots in Blue/400 (#306AE8)
+ *   - AI      → solid dots in AI/Base (#6F59CF)
+ *
+ * Visual treatment: a ring of 12 dots placed evenly around a circle. Each
+ * dot's opacity fades from 1.0 at the "head" down to ~0.15 at the tail, so
+ * when the wrapping <g> rotates clockwise the user sees a bright leading dot
+ * with a fading trail behind it. Animation is a 1.4 s linear infinite spin.
+ */
+import * as React from "react";
+export type SpinnerSize = "Small" | "Medium" | "Large";
+export type SpinnerStyle = "Default" | "AI";
+export type SpinnerProps = {
+    size?: SpinnerSize;
+    style?: SpinnerStyle;
+    className?: string;
+    id?: string;
+    "aria-label"?: string;
+};
+export declare const Spinner: React.ForwardRefExoticComponent<SpinnerProps & React.RefAttributes<HTMLSpanElement>>;
+export default Spinner;
+export declare function SpinnerMatrix(): import("react/jsx-runtime").JSX.Element;

package/dist/StatusBadge.d.ts

@@ -0,0 +1,40 @@
+/**
+ * StatusBadge — React port of Embleema Design System 2.0's Clinical/Status
+ * Badge component (Figma node 4698:19).
+ *
+ * Small gradient indicator (16 × 16 pill inside a 20 × 20 padded frame) that
+ * communicates a clinical form's completion state. Per the Figma description,
+ * this is intended to be composed inside Clinical/FormStatusChip and form
+ * navigation surfaces — not used standalone — but it exports cleanly so the
+ * higher-level components can drop it in.
+ *
+ * Five types, each with a distinct gradient pulled directly from Figma:
+ *   - NotStarted      → #FEFEFE 23.66% → #D8D8D8 98.58%  (top → bottom)
+ *                       + 1 px Border/Default outline
+ *   - Valid           → #0A595C 11.79% → #028388 55.28% → #00AFB2 99.99%
+ *                       (bottom → top)
+ *   - WarningsFlagged → #FCA266        → #FA6400 100%   (top → bottom)
+ *   - ErrorsFlagged   → #FA6400        → #E02020 56.5% → #FF66AB 100%
+ *                       (top → bottom)
+ *   - LockedSubmitted → #644AD4 23.07% → #2760DE 90.48% (top → bottom)
+ *                       + 12 × 12 white lock icon (Icon/Utility/Lock)
+ *
+ * Note on tokens: the gradient stops are stored as raw hex values in the
+ * Figma source — none of them bind to semantic variables (Figma can't
+ * variable-bind gradient stops). Only NotStarted's border binds to
+ * Border/Default. The badge's surrounding 20 × 20 frame is inert chrome.
+ *
+ * Props:
+ *   - type : NotStarted | Valid | WarningsFlagged | ErrorsFlagged | LockedSubmitted
+ */
+import * as React from "react";
+export type StatusBadgeType = "NotStarted" | "Valid" | "WarningsFlagged" | "ErrorsFlagged" | "LockedSubmitted";
+export type StatusBadgeProps = {
+    type?: StatusBadgeType;
+    id?: string;
+    className?: string;
+    "aria-label"?: string;
+};
+export declare const StatusBadge: React.ForwardRefExoticComponent<StatusBadgeProps & React.RefAttributes<HTMLSpanElement>>;
+export default StatusBadge;
+export declare function StatusBadgeMatrix(): import("react/jsx-runtime").JSX.Element;

package/dist/StatusMessage.d.ts

@@ -0,0 +1,40 @@
+/**
+ * StatusMessage — React port of Embleema Design System 2.0's Feedback/Status
+ * Message component (Figma node 4921:27).
+ *
+ * Inline status text with a leading icon. Used for form-field validation
+ * feedback, helper messages, and contextual status indicators. Intentionally
+ * lightweight — no background, no border, no dismiss control.
+ *
+ * Structure:
+ *   [20-px status icon] [12-px Nunito Regular text]
+ *
+ * Type → icon + text color (per Figma):
+ *   - Error       → Icon/Action/CloseCircle + Feedback/Error/Text   (red icon AND red text)
+ *   - Success     → Icon/Status/Check       + Text/Primary          (green icon, neutral text)
+ *   - Warning     → Icon/Status/Alert       + Text/Primary          (orange icon, neutral text)
+ *   - Information → Icon/Status/Info        + Text/Primary          (blue icon, neutral text)
+ *
+ * Per the Figma description, the Error variant is the only one that tints the
+ * text — every other type keeps Text/Primary so the message reads as standard
+ * helper copy with a colored marker.
+ *
+ * Type style: body/xs (Nunito Regular 12 / 1.4 / 0.12 px letter-spacing).
+ *
+ * Props:
+ *   - type    : Error | Success | Warning | Information
+ *   - message : status text (or pass children for richer content)
+ */
+import * as React from "react";
+export type StatusMessageType = "Error" | "Success" | "Warning" | "Information";
+export type StatusMessageProps = {
+    type?: StatusMessageType;
+    message?: string;
+    children?: React.ReactNode;
+    id?: string;
+    className?: string;
+    "aria-label"?: string;
+};
+export declare const StatusMessage: React.ForwardRefExoticComponent<StatusMessageProps & React.RefAttributes<HTMLSpanElement>>;
+export default StatusMessage;
+export declare function StatusMessageMatrix(): import("react/jsx-runtime").JSX.Element;

package/dist/StudyProgressSymbol.d.ts

@@ -0,0 +1,29 @@
+/**
+ * StudyProgressSymbol — Embleema Design System 2.0 Clinical/Study Progress
+ * Symbol (Figma node 4753:7).
+ *
+ * Layout: 40×40 circular badge with a colored gradient background and a
+ * 24×24 white icon inside. The only exception is Late, which is a
+ * 43×40 rounded warning triangle with a white warning mark.
+ *
+ * Background colors are pulled directly from the Figma source per status.
+ * Inactive variants (Skipped, FutureVisit, FutureSurvey, Labwork,
+ * AdverseEvent, Medication, Withdrawal, Other, NA) use Figma's
+ * white-to-light-gray gradient and carry a 1px Border/Default outline so
+ * the circle reads against a white surface — the white icon inside will
+ * appear faint against that nearly-white background. Flag for review if
+ * those inactive variants need stronger backgrounds.
+ */
+import * as React from "react";
+export type StudyProgressStatus = "Complete" | "Incomplete" | "Current" | "Add" | "Late" | "StudyCompletion" | "Skipped" | "FutureVisit" | "FutureSurvey" | "Labwork" | "AdverseEvent" | "Medication" | "Withdrawal" | "Other" | "NA";
+export type StudyProgressSymbolProps = {
+    status: StudyProgressStatus;
+    /** Accessible label. Defaults to "Status: <status>". */
+    "aria-label"?: string;
+    onClick?: React.MouseEventHandler<HTMLElement>;
+    className?: string;
+    title?: string;
+};
+export declare const StudyProgressSymbol: React.ForwardRefExoticComponent<StudyProgressSymbolProps & React.RefAttributes<HTMLElement>>;
+export default StudyProgressSymbol;
+export declare function StudyProgressSymbolMatrix(): import("react/jsx-runtime").JSX.Element;

package/dist/Tab.d.ts

@@ -0,0 +1,64 @@
+/**
+ * Tab — React port of Embleema Design System 2.0's Navigation/TabItem
+ * (Figma node 5099:22) and Navigation/TabBar (Figma node 5331:38).
+ *
+ * Two exports:
+ *   - <TabItem />  : the individual underline-style tab item.
+ *   - <TabBar />   : an interactive horizontal bar of TabItems with a
+ *                    shared active value and onChange callback.
+ *
+ * TabItem layout (per Figma):
+ *   flex flex-col items-center justify-center gap 6, pt 8, px 12
+ *   - Label: 14 px Nunito, uppercase, letter-spacing 0.06em
+ *   - Active label: Nunito SemiBold; Inactive: Regular
+ *   - Active underline: 2 px strip, full width
+ *
+ * Color mapping:
+ *   Default        : Text/Secondary (#5E5E5E)
+ *   Hover          : Text/Primary   (#0E0E0E)   + Background/Selected fill
+ *   Focus          : Text/Primary               + Background/Selected fill
+ *                                                + 4 px Border/FocusRing outline
+ *   Disabled       : Text/Disabled  (#B0B0B0)
+ *   Primary Active : Text/Primary               + Accent/Brand (#C20A72) underline
+ *   Secondary Active: Blue/500 (#2655BA)        + Blue/500 underline
+ *
+ * TabBar (per Figma):
+ *   bg Background/Default, border-bottom 1 px Border/Default,
+ *   gap 20, padding 0 40.
+ */
+import * as React from "react";
+export type TabType = "Primary" | "Secondary";
+export type TabState = "Default" | "Active" | "Hover" | "Focus" | "Disabled";
+export type TabItemProps = {
+    label: string;
+    type?: TabType;
+    state?: TabState;
+    /** When true, ignores `state` and renders as Active. Used by TabBar. */
+    active?: boolean;
+    /** When true, ignores `state` and renders as Disabled. */
+    disabled?: boolean;
+    onClick?: () => void;
+    id?: string;
+    className?: string;
+    "aria-controls"?: string;
+};
+export type TabBarItem = {
+    /** Stable id used as the active key. */
+    value: string;
+    label: string;
+    disabled?: boolean;
+};
+export type TabBarProps = {
+    items: TabBarItem[];
+    /** Controlled active value. Falls back to the first item when omitted. */
+    value?: string;
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+    type?: TabType;
+    className?: string;
+    "aria-label"?: string;
+};
+export declare const TabItem: React.ForwardRefExoticComponent<TabItemProps & React.RefAttributes<HTMLButtonElement>>;
+export declare const TabBar: React.ForwardRefExoticComponent<TabBarProps & React.RefAttributes<HTMLDivElement>>;
+export default TabBar;
+export declare function TabMatrix(): import("react/jsx-runtime").JSX.Element;