@embleema/design-system 0.1.0

package/README.md

@@ -0,0 +1,2 @@
+# embleema-design-system
+Reference files for the Embleema design system.

package/dist/Accordion.d.ts

@@ -0,0 +1,42 @@
+/**
+ * Accordion — React port of Embleema Design System 2.0's
+ * Layout/Accordion Data component set (Figma node 61:198).
+ *
+ * Expandable content container for progressive disclosure. Two states per
+ * the Figma source:
+ *   - Toggle=Closed → header row only (label + circled plus)
+ *   - Toggle=Open   → header row (label + circled minus) + expanded content
+ *
+ * Layout (per Figma):
+ *   - Container        : width 350 px default (min 200, max 550), Border/Focus
+ *                        2 px bottom rule, overflow hidden
+ *   - Header row       : Background/Default, padding 12 px vertical / 8 px
+ *                        horizontal, flex items-center
+ *   - Label            : Nunito Light 16 / 1.5, Text/Primary, ellipsis
+ *   - Toggle icon      : 24 × 24, Action/Primary (#306AE8) — circled +/- glyph
+ *   - Expanded content : Background/Default, padding 8 px top / 8 px sides /
+ *                        20 px bottom, Nunito Light 16 / 1.5 Text/Primary,
+ *                        preserves explicit line breaks
+ *
+ * Accessibility (per Figma docs):
+ *   - The toggle row is a <button> with role implicit, aria-expanded reflects
+ *     open/closed and aria-controls points at the content region id.
+ *   - The expanded content region uses role="region" + aria-labelledby
+ *     pointing at the toggle id so screen readers announce the section.
+ */
+import * as React from "react";
+export type AccordionProps = {
+    /** Header label (Body Medium Light). */
+    label: string;
+    /** Content shown when open. */
+    children: React.ReactNode;
+    /** Controlled open state. */
+    open?: boolean;
+    defaultOpen?: boolean;
+    onToggle?: (open: boolean) => void;
+    id?: string;
+    className?: string;
+};
+export declare const Accordion: React.ForwardRefExoticComponent<AccordionProps & React.RefAttributes<HTMLDivElement>>;
+export default Accordion;
+export declare function AccordionMatrix(): import("react/jsx-runtime").JSX.Element;

package/dist/Alert.d.ts

@@ -0,0 +1,46 @@
+/**
+ * Alert — React port of Embleema Design System 2.0's Feedback/Alert
+ * component (Figma node 4668:4909). Per-type background, leading icon, and
+ * icon fill are pulled directly from the live Figma extraction.
+ *
+ * Five types: Success, Information, AI, Warning, Error. Each has:
+ *   - Background fill (Feedback/{Type}/Background) — AI is a special stack:
+ *     solid white with Gradient/AI overlaid at 40% opacity.
+ *   - Accent color (Feedback/{Type}/Text) used for the icon and the action
+ *     button text. AI uses the Gradient/AI as the icon fill.
+ *   - Type-specific leading icon (24×24): Check / Info / Sparkles /
+ *     Warning triangle / Close-circle.
+ *   - No border — Figma alerts are borderless.
+ *
+ * Props:
+ *   - type          : Success | Information | AI | Warning | Error
+ *   - title         : optional bold first line
+ *   - message       : body text (or use children for richer content)
+ *   - closeButton   : show the X (default true). Color: Text/Secondary.
+ *   - actionButton  : show a text-link action (default false)
+ *   - actionLabel   : label for the action button (default "View")
+ *   - onActionClick : action callback
+ *   - onClose       : dismiss callback
+ *   - visible       : controlled visibility
+ *   - defaultVisible: uncontrolled initial visibility (default true)
+ */
+import * as React from "react";
+export type AlertType = "Success" | "Information" | "AI" | "Warning" | "Error";
+export type AlertProps = {
+    type?: AlertType;
+    title?: string;
+    message?: string;
+    children?: React.ReactNode;
+    closeButton?: boolean;
+    actionButton?: boolean;
+    actionLabel?: string;
+    onActionClick?: () => void;
+    onClose?: () => void;
+    visible?: boolean;
+    defaultVisible?: boolean;
+    className?: string;
+    "aria-label"?: string;
+};
+export declare const Alert: React.ForwardRefExoticComponent<AlertProps & React.RefAttributes<HTMLDivElement>>;
+export default Alert;
+export declare function AlertMatrix(): import("react/jsx-runtime").JSX.Element;

package/dist/Badge.d.ts

@@ -0,0 +1,45 @@
+/**
+ * Badge — React port of Embleema Design System 2.0's Feedback/Badge component
+ * (Figma node 4860:38).
+ *
+ * Notification indicator for counts, status, or alerts anchored to nav items,
+ * tabs, or avatars. Three sizes × five semantic types.
+ *
+ * Sizes:
+ *   - Dot   → 6 × 6 solid circle, no content. Use for "unread" indicators.
+ *   - Count → 16 × variable pill, numeric label (Nunito Bold 10/12). Falls
+ *             back to "3" if no `label` is supplied (matches Figma default).
+ *   - Icon  → 16 × 16 circle with a 12 × 12 icon centered. Defaults to the
+ *             Status/Alert glyph; pass a custom React node via `icon` to swap.
+ *
+ * Types (background colors):
+ *   - Default → Action/Primary/Background (#306AE8)   [semantic]
+ *   - Error   → Feedback/Error/Text       (#B31A1A)    [semantic]
+ *   - Warning → Feedback/Warning/Text     (#E15A00)    [semantic]
+ *   - Success → Feedback/Success/Text     (#288028)    [semantic]
+ *   - Neutral → Text/Secondary            (#5E5E5E)    [semantic]
+ *
+ * Foreground (count text + icon fill) is always Text/Inverse (#FEFEFE).
+ *
+ * Props:
+ *   - size   : Dot | Count | Icon
+ *   - type   : Default | Error | Warning | Success | Neutral
+ *   - label  : string or number — only rendered for size=Count
+ *   - icon   : React node — only rendered for size=Icon; defaults to the
+ *              Status/Alert glyph from the icon library
+ */
+import * as React from "react";
+export type BadgeSize = "Dot" | "Count" | "Icon";
+export type BadgeType = "Default" | "Error" | "Warning" | "Success" | "Neutral";
+export type BadgeProps = {
+    size?: BadgeSize;
+    type?: BadgeType;
+    label?: string | number;
+    icon?: React.ReactNode;
+    id?: string;
+    className?: string;
+    "aria-label"?: string;
+};
+export declare const Badge: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLSpanElement>>;
+export default Badge;
+export declare function BadgeMatrix(): import("react/jsx-runtime").JSX.Element;

package/dist/Barcode.d.ts

@@ -0,0 +1,38 @@
+import { FieldAppearance } from './Field';
+/**
+ * Barcode — React port of the Embleema Design System 2.0 Input/Barcode
+ * component (Figma node 4454:7). A molecule that wraps the base Field atom
+ * with a "Scan" primary button beside it and (when state="Complete") a
+ * BarcodePreview card showing the rendered barcode bars + scanned number.
+ *
+ * State handling:
+ *   - Default / Hover / Focused / Disabled / ReadOnly are forwarded to Field's
+ *     own state prop, so the browser's :hover and :focus pseudo-classes light
+ *     up the field interactively (the explicit prop wins when supplied)
+ *   - Error sets the field's validation to Error and tints the helper text
+ *   - Complete renders the BarcodePreview card below the field/helper
+ */
+import * as React from "react";
+export type BarcodeState = "Default" | "Hover" | "Focused" | "Complete" | "Error" | "Disabled" | "ReadOnly";
+export type BarcodeStyle = FieldAppearance;
+export type BarcodeLabelPosition = "Top" | "Left";
+export type BarcodeProps = {
+    state?: BarcodeState;
+    style?: BarcodeStyle;
+    labelPosition?: BarcodeLabelPosition;
+    label?: boolean | string;
+    helperText?: boolean | string;
+    required?: boolean;
+    value?: string;
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+    /** Fires when the user clicks the Scan button. */
+    onScan?: () => void;
+    id?: string;
+    name?: string;
+    className?: string;
+    "aria-label"?: string;
+};
+export declare const Barcode: React.ForwardRefExoticComponent<BarcodeProps & React.RefAttributes<HTMLInputElement>>;
+export default Barcode;
+export declare function BarcodeMatrix(): import("react/jsx-runtime").JSX.Element;

package/dist/Boolean.d.ts

@@ -0,0 +1,48 @@
+/**
+ * Boolean — React port of the Embleema Design System 2.0 Input/Boolean
+ * component (Figma node 4498:1262). A binary yes/no toggle field used in
+ * clinical forms and surveys. Renders two card-style selector options with
+ * radio indicators, plus an optional label, in vertical or horizontal
+ * layouts, with the label positioned above or to the left.
+ *
+ * Color bindings:
+ *   - Option card bg:   Background/Field (#F8F8F8)
+ *   - Option border:    Border/Default (#DDDDDD) (Error: Border/Error 1.5px)
+ *   - Selected radio:   Action/Primary/Background (#306AE8) ring + dot
+ *   - Error bg/border:  Feedback/Error/Background / Border/Error
+ *   - Error helper:     Feedback/Error/Text (#B31A1A), body/sm-semibold
+ *   - Disabled bg:      Background/Disabled (#F1F1F1)
+ *   - Label text:       Text/Primary (#0E0E0E); Error → with red asterisk
+ *   - ReadOnly:         Background/Disabled fill, locked, but selection stays
+ */
+import * as React from "react";
+export type BooleanState = "Default" | "Error" | "Disabled" | "ReadOnly";
+export type BooleanDirection = "Vertical" | "Horizontal";
+export type BooleanLabelPosition = "Top" | "Left";
+export type BooleanProps = {
+    state?: BooleanState;
+    direction?: BooleanDirection;
+    labelPosition?: BooleanLabelPosition;
+    label?: boolean | string;
+    required?: boolean;
+    /** Display text for the two options. Defaults to "Yes" / "No". */
+    yesLabel?: string;
+    noLabel?: string;
+    /** Underlying values returned via onChange. Defaults to true / false. */
+    yesValue?: boolean | string;
+    noValue?: boolean | string;
+    /** Controlled value. */
+    value?: boolean | string | null;
+    defaultValue?: boolean | string | null;
+    onChange?: (value: boolean | string | null) => void;
+    /** Override the default error/helper text. */
+    helperText?: string;
+    id?: string;
+    name?: string;
+    className?: string;
+    "aria-label"?: string;
+};
+export declare const Boolean_: React.ForwardRefExoticComponent<BooleanProps & React.RefAttributes<HTMLDivElement>>;
+export { Boolean_ as Boolean };
+export default Boolean_;
+export declare function BooleanMatrix(): import("react/jsx-runtime").JSX.Element;

package/dist/Button.d.ts

@@ -0,0 +1,55 @@
+/**
+ * Button — React port of the Embleema Design System 2.0 Action/Button component
+ * (Figma node 5013:7). Variant, Kind (Figma's "Type"), Size, LeadingIcon, and
+ * TrailingIcon are props; Default / Hover / Focus / Disabled are wired to real
+ * browser states via :hover, :focus-visible, and :disabled.
+ *
+ * Colors mirror the bindings extracted directly from the Figma component:
+ *   - Semantic tokens where the Figma fill is bound to a semantic variable
+ *     (Action/Primary/Background, Action/Disabled/Text, Feedback/Error/Background, …).
+ *   - Primitive tokens where the Figma fill is bound directly to a primitive
+ *     (Blue/100, Blue/300, Red/100, Red/300, Neutral/50, Neutral/200, Neutral/300).
+ *   - Border/FocusRing for the 4px outside focus ring.
+ *
+ * Sizes:
+ *   - Large : 46px tall, 12 / 20 padding, 8px gap, 20×20 icon, button/lg (18 / 120%)
+ *   - Medium: 39px tall, 10 / 20 padding, 6px gap, 18×18 icon, button/md (16 / 120%)
+ *   - Small : 33px tall,  8 / 16 padding, 4px gap, 16×16 icon, button/sm (14 / 120%)
+ *
+ * Inverse buttons render light fills/text on the assumption the surrounding
+ * surface is dark.
+ */
+import * as React from "react";
+export type ButtonVariant = "Primary" | "Destructive" | "Inverse";
+export type ButtonKind = "Filled" | "Outlined" | "Text";
+export type ButtonSize = "Large" | "Medium" | "Small";
+export type ButtonProps = {
+    variant?: ButtonVariant;
+    /** Figma's "Type" property. Renamed to avoid clashing with HTML <button type>. */
+    kind?: ButtonKind;
+    size?: ButtonSize;
+    disabled?: boolean;
+    leadingIcon?: React.ReactNode;
+    trailingIcon?: React.ReactNode;
+    children?: React.ReactNode;
+    onClick?: React.MouseEventHandler<HTMLButtonElement>;
+    /** HTML <button type>. Defaults to "button". */
+    type?: "button" | "submit" | "reset";
+    className?: string;
+    "aria-label"?: string;
+};
+export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export default Button;
+/**
+ * Embleema icon set ports. SVG path data was extracted directly from the
+ * Icons page (node 18:451) of the Design System 2.0 Figma file:
+ *   - Icon/Action/Add — node 4052:2912 (vector at 4052:2913)
+ *   - Icon/Navigation/ArrowRight — node 4052:2944 (vector at 4052:2945)
+ * Both icons live inside a 24×24 component frame in Figma; the vector
+ * itself is 18×18 (Add) / 20×20 (ArrowRight), positioned at offset 3,3
+ * (Add) / 2,2 (ArrowRight) inside the frame. The translate keeps the
+ * react-rendered icons visually identical to the Figma source.
+ */
+export declare function IconAdd(): import("react/jsx-runtime").JSX.Element;
+export declare function IconArrowRight(): import("react/jsx-runtime").JSX.Element;
+export declare function ButtonMatrix(): import("react/jsx-runtime").JSX.Element;

package/dist/Cards.d.ts

@@ -0,0 +1,95 @@
+/**
+ * Cards — React ports of Embleema Design System 2.0's Layout card components:
+ *   - TaskCard       (Figma node 4985:211)  — gradient task card with 5 colors
+ *   - NavigationCard (Figma node 4986:77)   — Stacked or Horizontal nav card
+ *   - ContentCard    (Figma node 5077:7)    — tappable content card with logo,
+ *                                              text, action buttons, chevron,
+ *                                              and optional corner decoration
+ *
+ * Each export reads its layout, spacing, typography, icons, and colors from
+ * the Figma source directly. Hover affordances are added on top of the spec
+ * for interactivity (subtle lift via box-shadow + transform).
+ *
+ * Color tokens used (per embleema-design-system.md):
+ *   - Background/Default        #FEFEFE
+ *   - Neutral/200               #F1F1F1
+ *   - Text/Primary              #0E0E0E
+ *   - Text/Secondary            #5E5E5E
+ *   - Text/Inverse              #FEFEFE (white on the Task Card gradients)
+ *   - Action/Primary/Background #306AE8 (Content Card buttons)
+ *
+ * Task Card gradients are hardcoded per the Figma source (the spec notes the
+ * gradients cannot be variable-bound in Figma).
+ */
+import * as React from "react";
+export type TaskCardColor = "DarkBlue" | "Blue" | "Green" | "Magenta" | "Purple";
+export type TaskCardAction = {
+    label: string;
+    leadingIcon?: React.ReactNode | boolean;
+    onClick?: () => void;
+};
+export type TaskCardProps = {
+    header: string;
+    body: string;
+    color?: TaskCardColor;
+    headerIcon?: React.ReactNode;
+    /** Show the time-estimate row in the action band. */
+    timeEstimate?: boolean;
+    time?: string;
+    primaryAction?: TaskCardAction;
+    secondaryAction?: TaskCardAction;
+    id?: string;
+    className?: string;
+    "aria-label"?: string;
+};
+export declare const TaskCard: React.ForwardRefExoticComponent<TaskCardProps & React.RefAttributes<HTMLDivElement>>;
+export type NavigationCardType = "Stacked" | "Horizontal";
+export type NavigationCardProps = {
+    label: string;
+    /** Only used on Horizontal. */
+    body?: string;
+    type?: NavigationCardType;
+    /** Optional image to fill the 80 × 80 circular image slot. Pass an <img>
+        or any node; omit to render the checkered placeholder per Figma. */
+    image?: React.ReactNode;
+    id?: string;
+    className?: string;
+    "aria-label"?: string;
+};
+export declare const NavigationCard: React.ForwardRefExoticComponent<NavigationCardProps & React.RefAttributes<HTMLDivElement>>;
+export type ContentCardAction = {
+    label: string;
+    leadingIcon?: React.ReactNode | boolean;
+    onClick?: () => void;
+};
+export type ContentCardProps = {
+    header: string;
+    body: string;
+    tertiary?: string;
+    logo?: boolean | React.ReactNode;
+    tertiaryText?: boolean;
+    cornerDecoration?: boolean;
+    cornerIcon?: React.ReactNode;
+    divider?: boolean;
+    primaryAction?: ContentCardAction;
+    secondaryAction?: ContentCardAction;
+    id?: string;
+    className?: string;
+    "aria-label"?: string;
+};
+export declare const ContentCard: React.ForwardRefExoticComponent<ContentCardProps & React.RefAttributes<HTMLDivElement>>;
+export type SurveyCardProps = {
+    title: string;
+    tagLabel?: string;
+    timeFrame?: string;
+    counter?: string;
+    primaryLabel?: string;
+    onStartClick?: () => void;
+    timeEstimate?: boolean;
+    time?: string;
+    id?: string;
+    className?: string;
+    "aria-label"?: string;
+};
+export declare const SurveyCard: React.ForwardRefExoticComponent<SurveyCardProps & React.RefAttributes<HTMLDivElement>>;
+export declare function CardsMatrix(): import("react/jsx-runtime").JSX.Element;

package/dist/Checkbox.d.ts

@@ -0,0 +1,47 @@
+/**
+ * Checkbox — React port of Embleema Design System 2.0's Selector/Checkbox
+ * component (Figma node 4258:271).
+ *
+ * Structure mirrors the Figma source:
+ *   wrapper (HORIZONTAL, gap 8)
+ *     ├── state-layer (34×34 circle, padding 8 — shows tint on hover/focus/pressed)
+ *     │     └── container (18×18 rounded-2 square with 2px border, fills on
+ *     │            selected/indeterminate, holds the check or dash icon)
+ *     └── label (optional, body/md)
+ *
+ * Props:
+ *   - state (forced) : Default | Hover | Focused | Pressed | Disabled
+ *                      Omit to let real browser :hover / :focus-within drive
+ *                      Hover and Focused naturally.
+ *   - validation     : None | Error (None = neutral palette, Error = red palette)
+ *   - selected       : controlled checked state
+ *   - defaultSelected: uncontrolled initial state
+ *   - indeterminate  : forces the dash icon and the indeterminate fill,
+ *                      regardless of selected. Also sets the HTML
+ *                      `indeterminate` property via ref so screen readers
+ *                      announce the right state.
+ *   - label          : label string (clicking the label toggles the checkbox)
+ *   - disabled       : maps to data-state="Disabled" + HTML disabled
+ *   - onChange       : called with the new selected boolean
+ */
+import * as React from "react";
+export type CheckboxState = "Default" | "Hover" | "Focused" | "Pressed" | "Disabled";
+export type CheckboxValidation = "None" | "Error";
+export type CheckboxProps = {
+    state?: CheckboxState;
+    validation?: CheckboxValidation;
+    selected?: boolean;
+    defaultSelected?: boolean;
+    indeterminate?: boolean;
+    label?: string;
+    disabled?: boolean;
+    onChange?: (selected: boolean) => void;
+    id?: string;
+    name?: string;
+    value?: string;
+    className?: string;
+    "aria-label"?: string;
+};
+export declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;
+export default Checkbox;
+export declare function CheckboxMatrix(): import("react/jsx-runtime").JSX.Element;

package/dist/Chip.d.ts

@@ -0,0 +1,63 @@
+/**
+ * Chip — React port of Embleema Design System 2.0's Selector/Chip component
+ * (Figma node 5072:56).
+ *
+ * Interactive selection chip used for filtering, multi-select, and toggleable
+ * options. For read-only metadata labels, use Feedback/Tag — chips are
+ * interactive, tags are not.
+ *
+ * Structure mirrors the Figma source:
+ *   chip (rounded pill, horizontal flex)
+ *     ├── leading icon (optional, 16px, currentColor)
+ *     ├── label (Nunito 16/150% — Regular by default, SemiBold on Selected)
+ *     └── close button (optional, 16px)
+ *
+ * State coverage (all driven by data-checked + real :hover/:focus-visible):
+ *   - Default        → Background/Default + Border/Strong (1px)
+ *   - Hover          → Background/Default + Action/Primary/Background (1.5px) + 2px drop-shadow
+ *   - Focus          → Default chip + 2.5px Border/FocusRing outline
+ *   - Selected       → Blue/100 + Action/Primary/Background (2px), label SemiBold, 2px drop-shadow
+ *   - SelectedHover  → Blue/200 + Action/Primary/Background (2px), label Regular, 2px drop-shadow
+ *   - SelectedFocus  → Selected chip + 2.5px Border/FocusRing outline
+ *   - Disabled       → Action/Disabled/Background + Neutral/300 (border), text Action/Disabled/Text
+ *
+ * The borders use inset box-shadow rather than real CSS borders, so the
+ * 1 / 1.5 / 2 / 2.5 px width changes between states don't cause layout shift.
+ *
+ * Props:
+ *   - state          : forced visual override for previews (matches Figma's
+ *                      seven-state matrix). Omit in production — natural
+ *                      :hover / :focus-visible / disabled drive everything.
+ *   - label          : chip text (or pass children for richer content)
+ *   - selected       : controlled selection
+ *   - defaultSelected: uncontrolled initial selection
+ *   - disabled       : non-interactive, gray fill
+ *   - leadingIcon    : boolean → default placeholder glyph; ReactNode → custom
+ *   - dismissible    : show the close button
+ *   - onChange       : called with the new selected boolean
+ *   - onDismiss      : called when the close button is clicked
+ *   - visible        : controlled visibility (for dismissal)
+ *   - defaultVisible : uncontrolled initial visibility (default true)
+ */
+import * as React from "react";
+export type ChipState = "Default" | "Hover" | "Focus" | "Selected" | "SelectedHover" | "SelectedFocus" | "Disabled";
+export type ChipProps = {
+    state?: ChipState;
+    label?: string;
+    children?: React.ReactNode;
+    selected?: boolean;
+    defaultSelected?: boolean;
+    disabled?: boolean;
+    leadingIcon?: boolean | React.ReactNode;
+    dismissible?: boolean;
+    onChange?: (selected: boolean) => void;
+    onDismiss?: () => void;
+    visible?: boolean;
+    defaultVisible?: boolean;
+    id?: string;
+    className?: string;
+    "aria-label"?: string;
+};
+export declare const Chip: React.ForwardRefExoticComponent<ChipProps & React.RefAttributes<HTMLDivElement>>;
+export default Chip;
+export declare function ChipMatrix(): import("react/jsx-runtime").JSX.Element;

package/dist/DateField.d.ts

@@ -0,0 +1,44 @@
+import { FieldValidation } from './Field';
+/**
+ * DateField — React port of the Embleema Design System 2.0 Input/Date Field
+ * component (Figma node 4621:1143). A molecule that wraps the base Field atom
+ * and adds:
+ *   - "mm/dd/yyyy" placeholder
+ *   - An inline "Today" button (Action/Link/Default blue outline) that fills
+ *     in today's date
+ *   - A calendar_month trailing icon that opens an inline Date Picker
+ *     overlay (Figma node 4512:3325) anchored below the field
+ *   - Optional Input/Label above (LabelPosition=Top) or to the left
+ *     (LabelPosition=Left, fixed 120px column width per Figma)
+ *   - Optional helper / error / warning / success message below the field
+ *
+ * The Date Picker (with Calendar / Month / Year views) and the Calendar
+ * Cell (Figma node 4583:7) are private sub-components — they only ship as
+ * part of DateField, not as standalone catalog entries.
+ */
+import * as React from "react";
+export type DateFieldValidation = FieldValidation;
+export type DateFieldLabelPosition = "Top" | "Left";
+export type DateFieldProps = {
+    validation?: DateFieldValidation;
+    labelPosition?: DateFieldLabelPosition;
+    /** true → renders the default "Date" label. String → custom label text. */
+    label?: boolean | string;
+    /** true → renders the default helper / validation message. String → custom. */
+    helperText?: boolean | string;
+    required?: boolean;
+    /** Controlled date string in mm/dd/yyyy format. */
+    value?: string;
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+    onTodayClick?: (todayValue: string) => void;
+    id?: string;
+    name?: string;
+    disabled?: boolean;
+    readOnly?: boolean;
+    className?: string;
+    "aria-label"?: string;
+};
+export declare const DateField: React.ForwardRefExoticComponent<DateFieldProps & React.RefAttributes<HTMLInputElement>>;
+export default DateField;
+export declare function DateFieldMatrix(): import("react/jsx-runtime").JSX.Element;

package/dist/Dropdown.d.ts

@@ -0,0 +1,68 @@
+import { FieldState, FieldValidation, FieldAppearance } from './Field';
+/**
+ * Dropdown — React port of Embleema Design System 2.0's Input/Dropdown
+ * (Figma node 4208:353) + Input/Dropdown Menu (Figma node 4278:501).
+ *
+ * Composes <Field /> as the visual trigger and renders a floating menu
+ * below when open. Supports Single and Multi selection, optional search,
+ * keyboard navigation, click-outside-to-close, and full controlled or
+ * uncontrolled value/open state.
+ *
+ * Dropdown props:
+ *   - options         : DropdownOption[] (value + label, optional disabled)
+ *   - type            : "Single" | "Multi"
+ *   - search          : show search input at top of menu, filters options
+ *   - value           : controlled selection (string for Single, string[] for Multi)
+ *   - defaultValue    : uncontrolled initial selection
+ *   - onChange        : called with the new selection
+ *   - open / defaultOpen / onOpenChange : open-state passthrough
+ *   - validation, appearance, labelPosition, label, required, helperText:
+ *                       Field-level props, behave identically to TextField
+ *   - placeholder, disabled, state, id, name, aria-label
+ *
+ * Keyboard:
+ *   - Click trigger or ArrowDown when closed → opens menu, highlights first option
+ *   - ArrowDown / ArrowUp → move highlight
+ *   - Enter / Space → select highlighted option (Multi: toggle; Single: select + close)
+ *   - Escape → close menu
+ *   - Tab → close menu, return focus to trigger
+ *   - Typing in search input filters options (search-only mode)
+ */
+import * as React from "react";
+export type DropdownType = "Single" | "Multi";
+export type DropdownLabelPosition = "Top" | "Left";
+export type DropdownOption = {
+    value: string;
+    label: string;
+    disabled?: boolean;
+};
+export type DropdownProps = {
+    options: DropdownOption[];
+    type?: DropdownType;
+    /** Search is auto-enabled when options.length > 5. Override here only if
+     *  you need to force it on (e.g., async-loaded options) or off. */
+    search?: boolean;
+    searchPlaceholder?: string;
+    value?: string | string[];
+    defaultValue?: string | string[];
+    onChange?: (value: string | string[]) => void;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    validation?: FieldValidation;
+    appearance?: FieldAppearance;
+    labelPosition?: DropdownLabelPosition;
+    label?: string;
+    required?: boolean;
+    helperText?: string;
+    placeholder?: string;
+    state?: FieldState;
+    disabled?: boolean;
+    id?: string;
+    name?: string;
+    className?: string;
+    "aria-label"?: string;
+};
+export declare const Dropdown: React.ForwardRefExoticComponent<DropdownProps & React.RefAttributes<HTMLDivElement>>;
+export default Dropdown;
+export declare function DropdownMatrix(): import("react/jsx-runtime").JSX.Element;

package/dist/Field.d.ts

@@ -0,0 +1,48 @@
+/**
+ * Field — React port of Embleema Design System 2.0's Input/Field (base atom)
+ * component (Figma node 4127:5556). This is the visual shell that wraps an
+ * input, leading/trailing icons, and an optional inline button.
+ *
+ * Props:
+ *   - state       : Default | Hover | Focused | Pressed | Disabled | ReadOnly
+ *                   When omitted, browser pseudo-classes (:hover, :focus-within)
+ *                   drive Hover/Focused automatically. The Pressed/Disabled/
+ *                   ReadOnly forms can also be passed as `state` to force them
+ *                   for previews — but `disabled` and `readOnly` HTML attrs
+ *                   are also supported and produce the same look.
+ *   - validation  : None | Error | Warning | Success | AI
+ *   - appearance  : Filled | Outlined (renamed from Figma's "Style" to avoid
+ *                   collision with React's reserved `style` prop)
+ *   - leadingIcon : React node rendered to the left of the input
+ *   - trailingIcon: React node rendered to the right (after the inline button)
+ *   - inlineButton: React node rendered between input and trailing icon
+ *
+ * Sizes/structure match the Figma source: 12 px padding all sides, 4 px gap,
+ * 4 px border radius, 20×20 icon slots, body/md-light typography.
+ */
+import * as React from "react";
+export type FieldState = "Default" | "Hover" | "Focused" | "Pressed" | "Disabled" | "ReadOnly";
+export type FieldValidation = "None" | "Error" | "Warning" | "Success" | "AI";
+export type FieldAppearance = "Filled" | "Outlined";
+export type FieldProps = {
+    state?: FieldState;
+    validation?: FieldValidation;
+    appearance?: FieldAppearance;
+    leadingIcon?: React.ReactNode;
+    trailingIcon?: React.ReactNode;
+    inlineButton?: React.ReactNode;
+    placeholder?: string;
+    value?: string;
+    defaultValue?: string;
+    onChange?: React.ChangeEventHandler<HTMLInputElement>;
+    disabled?: boolean;
+    readOnly?: boolean;
+    className?: string;
+    id?: string;
+    name?: string;
+    type?: "text" | "email" | "password" | "number" | "tel" | "url" | "search";
+    "aria-label"?: string;
+};
+export declare const Field: React.ForwardRefExoticComponent<FieldProps & React.RefAttributes<HTMLInputElement>>;
+export default Field;
+export declare function FieldMatrix(): import("react/jsx-runtime").JSX.Element;