@deriv-com/dds-marketing 0.1.0 → 0.2.0

package/dist/components/core/text-area/TextArea.js

@@ -0,0 +1,133 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useId, useLayoutEffect, useRef, useState } from 'react';
+import { CircleCheckSolidIcon, CircleExclamationSolidIcon, CircleInfoRegularIcon, TriangleExclamationSolidIcon, } from '@deriv-com/quill-icons-web';
+import './TextArea.css';
+import './text-area-impl.css';
+import { Icon } from '../icon/Icon.js';
+import { TooltipAnchor } from '../tooltip/TooltipAnchor.js';
+import { given } from '../../given.js';
+import { textAreaDefaults, textAreaParts } from './TextArea.types.js';
+/**
+ * What each reported status looks like.
+ *
+ * Circle for error, triangle for warning: the two colours are close enough that a red-green
+ * deficiency can converge them, so the shape is what separates the pair at a glance.
+ *
+ * No entry for `pending`. Product turns a Spinner in this slot and marketing has none — which
+ * is why the contract refuses a pending status with no message: the words are the only thing
+ * left that can say a check is running.
+ */
+const statusGlyph = {
+    error: _jsx(CircleExclamationSolidIcon, {}),
+    warning: _jsx(TriangleExclamationSolidIcon, {}),
+    success: _jsx(CircleCheckSolidIcon, {}),
+};
+/** The step the two marks this component draws itself take, against the text beside them. */
+const fieldGlyphStep = { sm: 'xs', md: 'xs', lg: 'sm' };
+/**
+ * How many lines the box is, given how much text is in it.
+ *
+ * Exported because it is the whole of the growing rule and it is worth testing without a DOM:
+ * never fewer than `rows`, never more than `maxRows`, and `maxRows` below `rows` is read as
+ * `rows` rather than inverting the two.
+ */
+export function linesFor(content, line, rows, maxRows) {
+    return Math.min(Math.max(Math.ceil(content / line), rows), Math.max(maxRows, rows));
+}
+export function TextArea({ size = textAreaDefaults.size, status = textAreaDefaults.status, label, labelTooltip, placeholder, helperText, rows = textAreaDefaults.rows, maxRows = textAreaDefaults.maxRows, maxLength, statusMessage, required = textAreaDefaults.required, requiredMark = textAreaDefaults.requiredMark, optional = textAreaDefaults.optional, ...rest }) {
+    /**
+     * One id for the field, and one for whichever line is describing it.
+     *
+     * `useId` rather than a prop, because a marketing page renders the same form in a hero and
+     * again in the footer, and two fields sharing a `for` means clicking the second label
+     * focuses the first.
+     */
+    const base = useId();
+    const fieldId = `${base}-field`;
+    const field = useRef(null);
+    /**
+     * The height, and the count, both read off the element rather than mirrored into state.
+     *
+     * Product declares `value` and `defaultValue` as props and keeps a copy; this does not, so
+     * neither is declared here — both arrive through `TextareaHTMLAttributes` and belong to the
+     * element. Reading `element.value` is the one source that is right whether a consumer
+     * controls the field or leaves it to the DOM, and it cannot disagree with what was typed.
+     */
+    const [count, setCount] = useState(0);
+    const sync = useCallback(() => {
+        const element = field.current;
+        if (element === null)
+            return;
+        setCount((held) => (held === element.value.length ? held : element.value.length));
+        // Read from a computed style rather than a token: line-height varies by size, and the
+        // element already knows which size it is. A second copy of that mapping here would be a
+        // second place for it to be wrong.
+        const style = window.getComputedStyle(element);
+        const px = (measure) => {
+            const n = Number.parseFloat(measure);
+            return Number.isFinite(n) ? n : 0;
+        };
+        const line = Number.parseFloat(style.lineHeight);
+        if (!Number.isFinite(line))
+            return;
+        const inset = px(style.paddingBlockStart) +
+            px(style.paddingBlockEnd) +
+            px(style.borderBlockStartWidth) +
+            px(style.borderBlockEndWidth);
+        element.style.height = 'auto';
+        const lines = linesFor(element.scrollHeight - inset, line, rows, maxRows);
+        element.style.height = `${lines * line + inset}px`;
+    }, [rows, maxRows]);
+    // Mount, a size change, and a controlled consumer setting the value from outside.
+    useLayoutEffect(sync, [sync, rest.value, size]);
+    // And typing, which a controlled consumer's re-render covers but an uncontrolled one does
+    // not — the DOM holds the value there, so the element's own event is what says it moved.
+    useEffect(() => {
+        const element = field.current;
+        if (element === null)
+            return undefined;
+        element.addEventListener('input', sync);
+        return () => element.removeEventListener('input', sync);
+    }, [sync]);
+    // Width changes re-wrap the text, which changes how many lines it takes.
+    // Absent in jsdom, so nothing in this effect is exercised by a test in this repository.
+    useEffect(() => {
+        const element = field.current;
+        if (element === null || typeof ResizeObserver === 'undefined')
+            return undefined;
+        let width = element.clientWidth;
+        const observer = new ResizeObserver(() => {
+            if (element.clientWidth === width)
+                return;
+            width = element.clientWidth;
+            sync();
+        });
+        observer.observe(element);
+        return () => observer.disconnect();
+    }, [sync]);
+    /**
+     * The message replaces the helper rather than joining it, and the counter sits beside
+     * whichever is showing.
+     *
+     * Gated on the status rather than on the message existing: a form library may hold a message
+     * for a field that is not currently reporting anything, and rendering it then shows a verdict
+     * to people reading the form while nothing is announced to people hearing it.
+     */
+    const reporting = status !== 'none';
+    const showsMessage = reporting && given(statusMessage);
+    const showsHelper = given(helperText) && !reporting;
+    const counting = maxLength !== undefined;
+    const mark = status === 'error' || status === 'warning' || status === 'success';
+    const describedId = showsMessage ? `${base}-message` : showsHelper ? `${base}-helper` : undefined;
+    const counterId = `${base}-count`;
+    return (_jsxs("div", { className: textAreaParts.root, "data-size": size, "data-status": status, children: [_jsxs("div", { className: textAreaParts['label-row'], children: [_jsxs("label", { className: textAreaParts.label, htmlFor: fieldId, children: [label, required ? (_jsx("span", { className: textAreaParts['required-mark'], "aria-hidden": "true", children: requiredMark === 'asterisk' ? '*' : 'required' })) : null, optional ? _jsx("span", { className: textAreaParts['optional-mark'], children: "optional" }) : null] }), given(labelTooltip) ? (_jsx(TooltipAnchor, { content: labelTooltip, placement: "top", children: _jsx("button", { type: "button", className: textAreaParts['label-tooltip'], "aria-label": `About ${label}`, children: _jsx(Icon, { size: fieldGlyphStep[size], children: _jsx(CircleInfoRegularIcon, {}) }) }) })) : null] }), _jsx("div", { className: textAreaParts.control, children: _jsx("textarea", { ref: field, className: textAreaParts.field, id: fieldId, rows: rows, placeholder: placeholder, maxLength: maxLength, ...rest, 
+                    /* After the spread, which is the whole point of it being here. `wrap="hard"` inserts
+                       real newlines into the submitted value wherever the text happened to wrap on
+                       screen, so what a person wrote and what a server receives differ and nothing warns
+                       anybody. This component reports what was typed and never rewrites it, and an
+                       attribute that breaks that promise is refused where the promise lives. */
+                    wrap: "soft", "aria-invalid": status === 'error' || undefined, "aria-required": required || undefined, "aria-busy": status === 'pending' || undefined, "aria-describedby": [describedId, counting ? counterId : undefined, rest['aria-describedby']]
+                        .filter(Boolean)
+                        .join(' ') || undefined }) }), showsHelper || showsMessage || counting ? (_jsxs("div", { className: textAreaParts.footer, children: [showsHelper ? (_jsx("span", { className: textAreaParts.helper, id: describedId, children: helperText })) : null, showsMessage ? (_jsxs("span", { className: textAreaParts.message, id: describedId, children: [mark ? (_jsx("span", { className: textAreaParts['message-icon'], children: _jsx(Icon, { size: "xs", children: statusGlyph[status] }) })) : null, statusMessage] })) : null, counting ? (_jsxs("span", { className: textAreaParts.counter, id: counterId, children: [count, "/", maxLength] })) : null] })) : null] }));
+}

package/dist/components/core/text-area/TextArea.types.d.ts

@@ -0,0 +1,67 @@
+import type { TextareaHTMLAttributes } from 'react';
+export interface TextAreaOwnProps {
+    /**
+     * `sm` — A note field in a dense form, where the box sits among other controls rather than being what the section is for. The height is unchanged — only the corner tightens
+     * `md` — The default, and nearly every form on a page — a contact form in a section, an enquiry beside the copy that prompted it
+     * `lg` — A form that is the reason the section exists, matched to the fields around it
+     */
+    size?: 'sm' | 'md' | 'lg';
+    /** Always — an input without a label is unusable by screen readers. A noun phrase naming the value, in sentence case: "Email address", not "Enter your email address" */
+    label: string;
+    /** A short explanation the label has no room for and the field does not always need on screen — why a description is asked for, what a reviewer will do with it, what counts as enough detail. Revealed on hover and on focus, so it costs no vertical space above a field that is already the tallest thing on the form */
+    labelTooltip?: string;
+    /** Showing an example of the value's shape, alongside helperText that states the rule */
+    placeholder?: string;
+    /** The user needs to know something before they type — a format, a limit, or why this is being asked */
+    helperText?: string;
+    /** The height the field starts at, in lines, which is also the shortest it ever gets. Three says a sentence or two is expected; ten asks for an essay before anybody has read the label, so the number is a statement about the answer wanted */
+    rows?: number;
+    /** Where the growing stops and the scrolling starts. Needed rather than optional: a field that grows without limit pushes whatever follows it off the screen, and a submit button nobody can reach is worse than a paragraph nobody can see all of. This and rows are the whole of the height decision, and it is made per placement rather than per person: a reply box a support agent lives in gets a larger number than a one-line-or-two field on a sign-up form. There is deliberately no prop offering the browser’s drag handle as an alternative. A handle is reachable by mouse and by nothing else, so choosing it for a placement hands touch and keyboard users a fixed box with no way past it — and whoever picked it, on a desktop, never feels that. A number here works for everyone */
+    maxRows?: number;
+    /** The most the field will accept, which also brings the count that shows it. Give it where the limit is real — a message a system will truncate, a field a database will refuse — and leave it out where prose is simply prose */
+    maxLength?: number;
+    /**
+     * `text` — Short forms, public ones, and anywhere the label row has room. The safer default: it needs nothing looked up, it still means something read out of context, and the asterisk convention is learned rather than obvious — which a sign-up or a verification flow cannot assume of everyone using it
+     * `asterisk` — Long or dense forms, where the word repeats down the page and one legend can say it once instead — and forms whose labels are too tight for a translated word, since "Required" becomes "Erforderlich" and an asterisk is the same width in every language. Only where a legend is visible from the fields it governs: across steps or a long scroll it is not, and the glyph then says nothing
+     */
+    requiredMark?: 'text' | 'asterisk';
+}
+export type TextAreaProps = TextAreaOwnProps & Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'className' | 'size' | 'status' | 'label' | 'labelTooltip' | 'placeholder' | 'helperText' | 'rows' | 'maxRows' | 'maxLength' | 'statusMessage' | 'required' | 'requiredMark' | 'optional'> & ({
+    required?: boolean;
+    optional?: false;
+} | {
+    required?: false;
+    optional?: boolean;
+}) & ({
+    status?: 'none' | 'error' | 'warning' | 'success' | 'pending';
+    statusMessage: string;
+} | {
+    status?: Exclude<'none' | 'error' | 'warning' | 'success' | 'pending', 'error' | 'warning' | 'pending'>;
+    statusMessage?: string;
+});
+/** The class each part carries. Apply these — do not retype them. */
+export declare const textAreaParts: {
+    readonly root: "dds-textarea";
+    readonly 'label-row': "dds-textarea__label-row";
+    readonly label: "dds-textarea__label";
+    readonly 'required-mark': "dds-textarea__required-mark";
+    readonly 'optional-mark': "dds-textarea__optional-mark";
+    readonly 'label-tooltip': "dds-textarea__label-tooltip";
+    readonly control: "dds-textarea__control";
+    readonly field: "dds-textarea__field";
+    readonly footer: "dds-textarea__footer";
+    readonly helper: "dds-textarea__helper";
+    readonly message: "dds-textarea__message";
+    readonly 'message-icon': "dds-textarea__message-icon";
+    readonly counter: "dds-textarea__counter";
+};
+/** Generated so defaults cannot drift from the contract. */
+export declare const textAreaDefaults: {
+    readonly size: "md";
+    readonly status: "none";
+    readonly rows: 3;
+    readonly maxRows: 10;
+    readonly required: false;
+    readonly requiredMark: "text";
+    readonly optional: false;
+};

package/dist/components/core/text-area/TextArea.types.js

@@ -0,0 +1,19 @@
+// GENERATED from text-area.contract.json. Do not edit.
+/** The class each part carries. Apply these — do not retype them. */
+export const textAreaParts = {
+    root: 'dds-textarea',
+    'label-row': 'dds-textarea__label-row',
+    label: 'dds-textarea__label',
+    'required-mark': 'dds-textarea__required-mark',
+    'optional-mark': 'dds-textarea__optional-mark',
+    'label-tooltip': 'dds-textarea__label-tooltip',
+    control: 'dds-textarea__control',
+    field: 'dds-textarea__field',
+    footer: 'dds-textarea__footer',
+    helper: 'dds-textarea__helper',
+    message: 'dds-textarea__message',
+    'message-icon': 'dds-textarea__message-icon',
+    counter: 'dds-textarea__counter',
+};
+/** Generated so defaults cannot drift from the contract. */
+export const textAreaDefaults = { size: 'md', status: 'none', rows: 3, maxRows: 10, required: false, requiredMark: 'text', optional: false };

package/dist/components/core/text-area/text-area-impl.css

@@ -0,0 +1,36 @@
+/*
+ * Scoped to this package, like the generated sheet beside it.
+ *
+ * `:where([data-dds-context="marketing"])` confines these rules without contributing
+ * specificity, so each still ties or beats exactly what it did before.
+ */
+
+/*
+ * The box scrolls once it has stopped growing.
+ *
+ * Past `maxRows` the height is fixed by the component, and a textarea whose content exceeds its
+ * height with no overflow rule hides the end of what somebody just typed. Not a token: a
+ * keyword, and one that never varies by brand or mode.
+ */
+:where([data-dds-context="marketing"]) .dds-textarea__field {
+  overflow-y: auto;
+}
+
+/*
+ * The status glyph's box is one line of the message tall.
+ *
+ * The contract binds the font size and the line height on this part, which is what makes it one
+ * line — but a line's height is those two multiplied, and a binding carries one token, not an
+ * expression over two. So the multiplication happens here, over the same variables the contract
+ * bound: no measure is declared, and retuning either token moves this with it.
+ *
+ * Why a height at all: aligned to the start of the block axis a glyph is as tall as itself, so
+ * its middle sits above the first line's and the words beside it read as pushed down. A box one
+ * line tall with the glyph centred in it puts the two middles on each other.
+ *
+ * One rule rather than one per size, because the message is font.body.sm at every step — the same
+ * answer, and the same argument, as text-input-impl.css.
+ */
+:where([data-dds-context="marketing"]) .dds-textarea__message-icon {
+  block-size: calc(var(--font-body-sm-size) * var(--font-body-sm-line-height));
+}

package/dist/components/core/text-input/TextInput.css

@@ -0,0 +1,400 @@
+/* GENERATED from textinput.contract.json. Do not edit. */
+
+:where([data-dds-context="marketing"]) .dds-textinput {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-gap-xs);
+}
+
+:where([data-dds-context="marketing"]) .dds-textinput .dds-textinput__label-row {
+  align-items: center;
+  display: flex;
+  gap: var(--space-gap-xs);
+}
+
+:where([data-dds-context="marketing"]) .dds-textinput .dds-textinput__label {
+  transition-property: color;
+  align-items: center;
+  display: flex;
+  color: var(--color-fg-default);
+  gap: var(--space-gap-xs);
+  min-block-size: var(--size-target-min);
+}
+
+:where([data-dds-context="marketing"]) .dds-textinput .dds-textinput__label-tooltip {
+  transition-property: background-color, color, outline-color, outline-width;
+  align-items: center;
+  appearance: none;
+  background-color: transparent;
+  border-style: none;
+  cursor: pointer;
+  display: flex;
+  flex: none;
+  justify-content: center;
+  outline-style: solid;
+  padding: unset;
+  border-radius: var(--radius-pill);
+  color: var(--color-fg-muted);
+  min-block-size: var(--size-target-min);
+  min-inline-size: var(--size-target-min);
+  outline-width: var(--border-width-none);
+  transition-duration: var(--motion-duration-fast);
+  transition-timing-function: var(--motion-easing-standard);
+}
+
+:where([data-dds-context="marketing"]) .dds-textinput .dds-textinput__control {
+  transition-property: background-color, border-color, box-shadow, opacity, outline-color, outline-width;
+  align-items: center;
+  border-style: solid;
+  box-sizing: border-box;
+  display: flex;
+  inline-size: 100%;
+  outline-style: solid;
+  background-color: var(--color-bg-field);
+  border-color: var(--color-border-default);
+  border-width: var(--border-width-default);
+  gap: var(--space-gap-sm);
+  outline-width: var(--border-width-none);
+  transition-duration: var(--motion-duration-fast);
+  transition-timing-function: var(--motion-easing-standard);
+}
+
+:where([data-dds-context="marketing"]) .dds-textinput .dds-textinput__leading-icon {
+  align-items: center;
+  display: flex;
+  flex: none;
+  color: var(--color-fg-muted);
+}
+
+:where([data-dds-context="marketing"]) .dds-textinput .dds-textinput__field {
+  background-color: transparent;
+  block-size: 100%;
+  border-style: none;
+  box-sizing: border-box;
+  flex: auto;
+  min-inline-size: 0;
+  outline-style: none;
+  padding: unset;
+  color: var(--color-fg-default);
+}
+
+:where([data-dds-context="marketing"]) .dds-textinput .dds-textinput__clear {
+  transition-property: background-color, color, outline-color, outline-width;
+  align-items: center;
+  appearance: none;
+  background-color: transparent;
+  border-style: none;
+  cursor: pointer;
+  display: flex;
+  flex: none;
+  justify-content: center;
+  outline-style: solid;
+  padding: unset;
+  border-radius: var(--radius-pill);
+  color: var(--color-fg-muted);
+  min-block-size: var(--size-target-min);
+  min-inline-size: var(--size-target-min);
+  outline-width: var(--border-width-none);
+  transition-duration: var(--motion-duration-fast);
+  transition-timing-function: var(--motion-easing-standard);
+}
+
+:where([data-dds-context="marketing"]) .dds-textinput .dds-textinput__trailing-icon {
+  align-items: center;
+  display: flex;
+  flex: none;
+  color: var(--color-fg-muted);
+}
+
+:where([data-dds-context="marketing"]) .dds-textinput .dds-textinput__message {
+  transition-property: color;
+  align-items: flex-start;
+  display: flex;
+  overflow-wrap: anywhere;
+  color: var(--color-fg-muted);
+  font-family: var(--font-body-sm-family);
+  font-size: var(--font-body-sm-size);
+  font-weight: var(--font-body-sm-weight);
+  gap: var(--space-gap-xs);
+  letter-spacing: var(--font-body-sm-letter-spacing);
+  line-height: var(--font-body-sm-line-height);
+}
+
+:where([data-dds-context="marketing"]) .dds-textinput .dds-textinput__message-icon {
+  align-items: center;
+  display: flex;
+  flex-shrink: 0;
+  font-size: var(--font-body-sm-size);
+  line-height: var(--font-body-sm-line-height);
+}
+
+:where([data-dds-context="marketing"]) .dds-textinput .dds-textinput__field::placeholder {
+  color: var(--color-fg-tertiary);
+}
+
+:where([data-dds-context="marketing"]) .dds-textinput .dds-textinput__helper {
+  transition-property: color;
+  color: var(--color-fg-muted);
+  font-family: var(--font-body-sm-family);
+  font-size: var(--font-body-sm-size);
+  font-weight: var(--font-body-sm-weight);
+  letter-spacing: var(--font-body-sm-letter-spacing);
+  line-height: var(--font-body-sm-line-height);
+}
+
+:where([data-dds-context="marketing"]) .dds-textinput .dds-textinput__optional-mark {
+  transition-property: color;
+  color: var(--color-fg-muted);
+  font-family: var(--font-body-sm-family);
+  font-size: var(--font-body-sm-size);
+  font-weight: var(--font-body-sm-weight);
+  line-height: var(--font-body-sm-line-height);
+}
+
+:where([data-dds-context="marketing"]) .dds-textinput .dds-textinput__prefix {
+  color: var(--color-fg-muted);
+}
+
+:where([data-dds-context="marketing"]) .dds-textinput .dds-textinput__required-mark {
+  transition-property: color;
+  color: var(--color-fg-required);
+}
+
+:where([data-dds-context="marketing"]) .dds-textinput .dds-textinput__suffix {
+  color: var(--color-fg-muted);
+}
+
+:where([data-dds-context="marketing"]) .dds-textinput .dds-textinput__clear:hover:where(:not(:disabled)) {
+  background-color: var(--color-bg-hover);
+  color: var(--color-fg-default);
+}
+
+:where([data-dds-context="marketing"]) .dds-textinput .dds-textinput__control:hover:where(:not(:has(.dds-textinput__field:disabled), :has(.dds-textinput__field[readonly]))) {
+  box-shadow: var(--elevation-ring-hover);
+}
+
+:where([data-dds-context="marketing"]) .dds-textinput .dds-textinput__label-tooltip:hover:where(:not(:disabled)) {
+  background-color: var(--color-bg-hover);
+  color: var(--color-fg-default);
+}
+
+:where([data-dds-context="marketing"]) .dds-textinput .dds-textinput__clear:active {
+  background-color: var(--color-bg-active);
+}
+
+:where([data-dds-context="marketing"]) .dds-textinput .dds-textinput__label-tooltip:active {
+  background-color: var(--color-bg-active);
+}
+
+:where([data-dds-context="marketing"]) .dds-textinput .dds-textinput__clear:focus-visible {
+  outline-color: var(--color-border-focus);
+  outline-width: var(--border-width-focus);
+}
+
+:where([data-dds-context="marketing"]) .dds-textinput .dds-textinput__label-tooltip:focus-visible {
+  outline-color: var(--color-border-focus);
+  outline-width: var(--border-width-focus);
+}
+
+:where([data-dds-context="marketing"]) .dds-textinput:has(.dds-textinput__field:focus-visible) .dds-textinput__control {
+  border-color: var(--color-border-focus);
+  outline-color: var(--color-border-focus);
+  outline-width: var(--border-width-hairline);
+}
+
+:where([data-dds-context="marketing"]) .dds-textinput:has(.dds-textinput__field[readonly]) .dds-textinput__control {
+  background-color: var(--color-bg-readonly);
+}
+
+:where([data-dds-context="marketing"]) .dds-textinput:has(.dds-textinput__field:disabled:not(:where(:disabled *))) .dds-textinput__control {
+  opacity: var(--opacity-disabled);
+}
+
+:where([data-dds-context="marketing"]) .dds-textinput:has(.dds-textinput__field:disabled) .dds-textinput__helper {
+  color: var(--color-fg-disabled);
+}
+
+:where([data-dds-context="marketing"]) .dds-textinput:has(.dds-textinput__field:disabled) .dds-textinput__label {
+  color: var(--color-fg-disabled);
+}
+
+:where([data-dds-context="marketing"]) .dds-textinput:has(.dds-textinput__field:disabled) .dds-textinput__message {
+  color: var(--color-fg-disabled);
+}
+
+:where([data-dds-context="marketing"]) .dds-textinput:has(.dds-textinput__field:disabled) .dds-textinput__optional-mark {
+  color: var(--color-fg-disabled);
+}
+
+:where([data-dds-context="marketing"]) .dds-textinput:has(.dds-textinput__field:disabled) .dds-textinput__required-mark {
+  color: var(--color-fg-disabled);
+}
+
+:where([data-dds-context="marketing"]) .dds-textinput[data-size="lg"] .dds-textinput__control {
+  block-size: var(--size-control-lg);
+  border-radius: var(--radius-control-lg);
+  padding-inline: var(--space-inset-md);
+}
+
+:where([data-dds-context="marketing"]) .dds-textinput[data-size="lg"] .dds-textinput__field {
+  font-family: var(--font-body-lg-family);
+  font-size: var(--font-body-lg-size);
+  font-weight: var(--font-body-lg-weight);
+  letter-spacing: var(--font-body-lg-letter-spacing);
+  line-height: var(--font-body-lg-line-height);
+}
+
+:where([data-dds-context="marketing"]) .dds-textinput[data-size="lg"] .dds-textinput__label {
+  font-family: var(--font-field-label-lg-family);
+  font-size: var(--font-field-label-lg-size);
+  font-weight: var(--font-field-label-lg-weight);
+  letter-spacing: var(--font-field-label-lg-letter-spacing);
+  line-height: var(--font-field-label-lg-line-height);
+}
+
+:where([data-dds-context="marketing"]) .dds-textinput[data-size="lg"] .dds-textinput__prefix {
+  font-family: var(--font-body-lg-family);
+  font-size: var(--font-body-lg-size);
+  font-weight: var(--font-body-lg-weight);
+  line-height: var(--font-body-lg-line-height);
+}
+
+:where([data-dds-context="marketing"]) .dds-textinput[data-size="lg"] .dds-textinput__suffix {
+  font-family: var(--font-body-lg-family);
+  font-size: var(--font-body-lg-size);
+  font-weight: var(--font-body-lg-weight);
+  line-height: var(--font-body-lg-line-height);
+}
+
+:where([data-dds-context="marketing"]) .dds-textinput[data-size="md"] .dds-textinput__control {
+  block-size: var(--size-control-md);
+  border-radius: var(--radius-control-md);
+  padding-inline: var(--space-inset-sm);
+}
+
+:where([data-dds-context="marketing"]) .dds-textinput[data-size="md"] .dds-textinput__field {
+  font-family: var(--font-body-md-family);
+  font-size: var(--font-body-md-size);
+  font-weight: var(--font-body-md-weight);
+  letter-spacing: var(--font-body-md-letter-spacing);
+  line-height: var(--font-body-md-line-height);
+}
+
+:where([data-dds-context="marketing"]) .dds-textinput[data-size="md"] .dds-textinput__label {
+  font-family: var(--font-field-label-md-family);
+  font-size: var(--font-field-label-md-size);
+  font-weight: var(--font-field-label-md-weight);
+  letter-spacing: var(--font-field-label-md-letter-spacing);
+  line-height: var(--font-field-label-md-line-height);
+}
+
+:where([data-dds-context="marketing"]) .dds-textinput[data-size="md"] .dds-textinput__prefix {
+  font-family: var(--font-body-md-family);
+  font-size: var(--font-body-md-size);
+  font-weight: var(--font-body-md-weight);
+  line-height: var(--font-body-md-line-height);
+}
+
+:where([data-dds-context="marketing"]) .dds-textinput[data-size="md"] .dds-textinput__suffix {
+  font-family: var(--font-body-md-family);
+  font-size: var(--font-body-md-size);
+  font-weight: var(--font-body-md-weight);
+  line-height: var(--font-body-md-line-height);
+}
+
+:where([data-dds-context="marketing"]) .dds-textinput[data-size="sm"] .dds-textinput__control {
+  block-size: var(--size-control-sm);
+  border-radius: var(--radius-control-sm);
+  padding-inline: var(--space-inset-sm);
+}
+
+:where([data-dds-context="marketing"]) .dds-textinput[data-size="sm"] .dds-textinput__field {
+  font-family: var(--font-body-md-family);
+  font-size: var(--font-body-md-size);
+  font-weight: var(--font-body-md-weight);
+  letter-spacing: var(--font-body-md-letter-spacing);
+  line-height: var(--font-body-md-line-height);
+}
+
+:where([data-dds-context="marketing"]) .dds-textinput[data-size="sm"] .dds-textinput__label {
+  font-family: var(--font-field-label-md-family);
+  font-size: var(--font-field-label-md-size);
+  font-weight: var(--font-field-label-md-weight);
+  letter-spacing: var(--font-field-label-md-letter-spacing);
+  line-height: var(--font-field-label-md-line-height);
+}
+
+:where([data-dds-context="marketing"]) .dds-textinput[data-size="sm"] .dds-textinput__prefix {
+  font-family: var(--font-body-md-family);
+  font-size: var(--font-body-md-size);
+  font-weight: var(--font-body-md-weight);
+  line-height: var(--font-body-md-line-height);
+}
+
+:where([data-dds-context="marketing"]) .dds-textinput[data-size="sm"] .dds-textinput__suffix {
+  font-family: var(--font-body-md-family);
+  font-size: var(--font-body-md-size);
+  font-weight: var(--font-body-md-weight);
+  line-height: var(--font-body-md-line-height);
+}
+
+:where([data-dds-context="marketing"]) .dds-textinput[data-status="error"] .dds-textinput__control {
+  border-color: var(--color-border-danger);
+}
+
+:where([data-dds-context="marketing"]) .dds-textinput[data-status="error"] .dds-textinput__message {
+  color: var(--color-fg-danger);
+}
+
+:where([data-dds-context="marketing"]) .dds-textinput[data-status="pending"] .dds-textinput__message {
+  color: var(--color-fg-muted);
+}
+
+:where([data-dds-context="marketing"]) .dds-textinput[data-status="success"] .dds-textinput__control {
+  border-color: var(--color-border-success);
+}
+
+:where([data-dds-context="marketing"]) .dds-textinput[data-status="success"] .dds-textinput__message {
+  color: var(--color-fg-success);
+}
+
+:where([data-dds-context="marketing"]) .dds-textinput[data-status="warning"] .dds-textinput__control {
+  border-color: var(--color-border-warning);
+}
+
+:where([data-dds-context="marketing"]) .dds-textinput[data-status="warning"] .dds-textinput__message {
+  color: var(--color-fg-warning);
+}
+
+:where([data-dds-context="marketing"]) .dds-textinput[data-status="error"]:has(.dds-textinput__field:focus-visible) .dds-textinput__control {
+  border-color: var(--color-border-danger);
+  outline-color: var(--color-border-danger);
+}
+
+:where([data-dds-context="marketing"]) .dds-textinput[data-status="success"]:has(.dds-textinput__field:focus-visible) .dds-textinput__control {
+  border-color: var(--color-border-success);
+  outline-color: var(--color-border-success);
+}
+
+:where([data-dds-context="marketing"]) .dds-textinput[data-status="warning"]:has(.dds-textinput__field:focus-visible) .dds-textinput__control {
+  border-color: var(--color-border-warning);
+  outline-color: var(--color-border-warning);
+}
+
+:where([data-dds-context="marketing"]) .dds-textinput .dds-textinput__label-tooltip:disabled {
+  cursor: not-allowed;
+}
+
+:where([data-dds-context="marketing"]) .dds-textinput .dds-textinput__field:disabled {
+  cursor: not-allowed;
+}
+
+:where([data-dds-context="marketing"]) .dds-textinput .dds-textinput__field[readonly] {
+  cursor: default;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :where([data-dds-context="marketing"]) .dds-textinput,
+  :where([data-dds-context="marketing"]) .dds-textinput * { transition: none; }
+}
+

package/dist/components/core/text-input/TextInput.d.ts

@@ -0,0 +1,5 @@
+import './TextInput.css';
+import './text-input-impl.css';
+import { type TextInputProps } from './TextInput.types.js';
+export type { TextInputProps };
+export declare function TextInput({ size, status, type, label, labelTooltip, placeholder, helperText, statusMessage, leadingIcon, prefix, suffix, trailingIcon, clearable, clearLabel, required, requiredMark, optional, ...rest }: TextInputProps): import("react").JSX.Element;