@deriv-com/dds-marketing 0.1.0 → 1.0.0

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 !important; }
+}
+

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;

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

@@ -0,0 +1,130 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useRef, useState } from 'react';
+import { CircleCheckSolidIcon, CircleExclamationSolidIcon, CircleInfoRegularIcon, CircleXmarkSolidIcon, TriangleExclamationSolidIcon, } from '@deriv-com/quill-icons-web';
+import './TextInput.css';
+import './text-input-impl.css';
+import { Icon } from '../icon/Icon.js';
+import { TooltipAnchor } from '../tooltip/TooltipAnchor.js';
+import { given } from '../../given.js';
+import { textInputDefaults, textInputGlyphStep, textInputParts } from './TextInput.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 and neither should be varied to match the other.
+ *
+ * No entry for `pending`. Product turns a Spinner there and marketing has none to turn —
+ * see the note at `reporting` below for what that costs.
+ */
+const statusGlyph = {
+    error: _jsx(CircleExclamationSolidIcon, {}),
+    warning: _jsx(TriangleExclamationSolidIcon, {}),
+    success: _jsx(CircleCheckSolidIcon, {}),
+};
+/**
+ * The step a mark inside the field takes, against the value's own type rather than the
+ * page's. `textInputGlyphStep` is the contract's, for the ornaments a consumer supplies;
+ * this is for the two marks the component draws itself, which track the text beside them.
+ */
+const fieldGlyphStep = { sm: 'xs', md: 'xs', lg: 'sm' };
+export function TextInput({ size = textInputDefaults.size, status = textInputDefaults.status, type = textInputDefaults.type, label, labelTooltip, placeholder, helperText, statusMessage, leadingIcon, prefix, suffix, trailingIcon, clearable = textInputDefaults.clearable, clearLabel, required = textInputDefaults.required, requiredMark = textInputDefaults.requiredMark, optional = textInputDefaults.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`;
+    /**
+     * Whether there is anything to clear.
+     *
+     * Observed rather than owned. A consumer controlling the field passes `value`, so that is
+     * read directly; one that does not keeps the value in the DOM, so the element is watched
+     * for its own input events. Either way this component never sets it — a clear button that
+     * appears on an empty field is a button that does nothing.
+     *
+     * The ref is on the box rather than the input, because in React 19 `ref` is an ordinary
+     * prop and `rest` would overwrite one placed on the input the moment a consumer passed
+     * their own.
+     */
+    const controlRef = useRef(null);
+    const [typed, setTyped] = useState(false);
+    const controlled = 'value' in rest;
+    const held = controlled ? String(rest.value ?? '') : '';
+    useEffect(() => {
+        if (controlled)
+            return undefined;
+        const field = controlRef.current?.querySelector('input');
+        if (field === null || field === undefined)
+            return undefined;
+        const sync = () => setTyped(field.value !== '');
+        sync();
+        field.addEventListener('input', sync);
+        return () => field.removeEventListener('input', sync);
+    }, [controlled]);
+    const hasValue = controlled ? held !== '' : typed;
+    /**
+     * Whether the value is the reader's to change.
+     *
+     * Read out of `rest` rather than declared as props, because both arrive through
+     * InputHTMLAttributes and belong to the element — declaring them here would give the
+     * field two sources for one attribute.
+     *
+     * The clear button goes when this is false, which the contract states as the `clear`
+     * part's `absentWhen`. Dimming it was not enough: the button sits inside the control, so
+     * the disabled state's opacity made it look unavailable while it stayed a live button
+     * that emptied the field.
+     */
+    const editable = rest.disabled !== true && rest.readOnly !== true;
+    /**
+     * The message replaces the helper rather than joining it.
+     *
+     * Both at once is two lines of small text under a field the reader is trying to fix, and
+     * the one that matters is the one they did not expect. So only one is ever rendered, and
+     * `aria-describedby` points at whichever it is.
+     *
+     * 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.
+     *
+     * `pending` is the one status with nothing of its own to show. Product turns a Spinner
+     * beside the message, or in the field when there is no message to sit beside; marketing
+     * has no Spinner, so a pending check reaches the eye only through the words in its
+     * message, and reaches a screen reader through `aria-busy` either way. A pending status
+     * with no message is currently invisible — the gap closes when marketing has a Spinner.
+     */
+    const reporting = status !== 'none';
+    const showsMessage = reporting && given(statusMessage);
+    const showsHelper = given(helperText) && !reporting;
+    const described = showsMessage ? 'message' : showsHelper ? 'helper' : undefined;
+    const mark = status === 'error' || status === 'warning' || status === 'success';
+    return (_jsxs("div", { className: textInputParts.root, "data-size": size, "data-status": status, children: [_jsxs("div", { className: textInputParts['label-row'], children: [_jsxs("label", { className: textInputParts.label, htmlFor: fieldId, children: [label, required ? (_jsx("span", { className: textInputParts['required-mark'], "aria-hidden": "true", children: requiredMark === 'asterisk' ? '*' : 'required' })) : null, optional ? _jsx("span", { className: textInputParts['optional-mark'], children: "optional" }) : null] }), given(labelTooltip) ? (_jsx(TooltipAnchor, { content: labelTooltip, placement: "top", children: _jsx("button", { type: "button", className: textInputParts['label-tooltip'], "aria-label": `About ${label}`, children: _jsx(Icon, { size: fieldGlyphStep[size], children: _jsx(CircleInfoRegularIcon, {}) }) }) })) : null] }), _jsxs("div", { ref: controlRef, className: textInputParts.control, 
+                // The inset belongs to the box, so an affix sits inside it — which leaves a strip
+                // of the box that is not the input, and clicking it would do nothing where a
+                // native input's own padding puts the caret in. Only when the box itself was hit:
+                // anything inside it has its own business.
+                onMouseDown: (event) => {
+                    if (event.target === event.currentTarget) {
+                        event.currentTarget.querySelector('input')?.focus();
+                    }
+                }, children: [leadingIcon === undefined || leadingIcon === null ? null : (_jsx("span", { className: textInputParts['leading-icon'], children: _jsx(Icon, { size: textInputGlyphStep[size], children: leadingIcon }) })), given(prefix) ? _jsx("span", { className: textInputParts.prefix, children: prefix }) : null, _jsx("input", { ...rest, id: fieldId, className: textInputParts.field, type: type, placeholder: placeholder, "aria-invalid": status === 'error' || undefined, "aria-required": required || undefined, "aria-busy": status === 'pending' || undefined, "aria-describedby": described === undefined ? undefined : `${base}-${described}` }), given(suffix) ? _jsx("span", { className: textInputParts.suffix, children: suffix }) : null, clearable && hasValue && editable ? (_jsx("button", { type: "button", className: textInputParts.clear, "aria-label": clearLabel, 
+                        // Emptying a field is a change to its value, so it is reported the way every
+                        // other change is — through onChange, which arrives from api.extends. The
+                        // component owns no value and cannot clear one: it sets the element's value
+                        // through the prototype's own setter and dispatches the event React listens
+                        // for, which is what makes a controlled consumer see it as their own change.
+                        onClick: (event) => {
+                            const field = event.currentTarget.parentElement?.querySelector('input');
+                            if (field === null || field === undefined)
+                                return;
+                            const setter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, 'value')?.set;
+                            setter?.call(field, '');
+                            field.dispatchEvent(new Event('input', { bubbles: true }));
+                            field.focus();
+                        }, children: _jsx(Icon, { size: fieldGlyphStep[size], children: _jsx(CircleXmarkSolidIcon, {}) }) })) : null, trailingIcon === undefined || trailingIcon === null ? null : (_jsx("span", { className: textInputParts['trailing-icon'], children: _jsx(Icon, { size: textInputGlyphStep[size], children: trailingIcon }) }))] }), showsMessage ? (_jsxs("span", { id: `${base}-message`, className: textInputParts.message, children: [mark ? (_jsx("span", { className: textInputParts['message-icon'], children: _jsx(Icon, { size: "xs", children: statusGlyph[status] }) })) : null, statusMessage] })) : null, showsHelper ? (_jsx("span", { id: `${base}-helper`, className: textInputParts.helper, children: helperText })) : null] }));
+}

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

@@ -0,0 +1,96 @@
+import type { InputHTMLAttributes, ReactNode } from 'react';
+export interface TextInputOwnProps {
+    /**
+     * `sm` — A field in a dense desktop arrangement — a filter row above a list, a field beside body copy rather than heading a section. Not on a phone, where thirty-two is below what a finger reliably hits
+     * `md` — The default, and nearly every form on a page — an inline signup, a contact form in a section
+     * `lg` — A hero's single field, or a conversion band where the form is the reason the section exists and has to be found from a distance
+     */
+    size?: 'sm' | 'md' | 'lg';
+    /**
+     * `text` — A name, a company, anything with no keypad or validation of its own
+     * `email` — An address. It brings the right keypad on a phone — the @ without a modifier — which is the difference between a typo and a lost signup
+     * `tel` — A phone number, for the numeric keypad. It does no validation and should not pretend to: numbers differ by country and a field that rejects a valid one is worse than a field that accepts anything
+     * `url` — A website, on a form that asks for one
+     */
+    type?: 'text' | 'email' | 'tel' | 'url';
+    /** Always — it names the field, it is drawn, and clicking it focuses the input. One or two words: 'Email', 'Full name', 'Work email' */
+    label: string;
+    /** A field needs a sentence the label has no room for — why the address is being asked for, what happens to it */
+    labelTooltip?: string;
+    /** Showing the shape of the value where the shape is not obvious — 'name@example.com' on an email field. It is an example, and it is allowed to be skipped */
+    placeholder?: string;
+    /** Saying what happens to the value — what the page will send, how often, what it will not do with the address. On a marketing form this is frequently what decides whether the reader types a real one */
+    helperText?: string;
+    /** A mark that says what the field takes at a glance — an envelope on an address, a globe on a site */
+    leadingIcon?: ReactNode;
+    /** A fixed part of the value the reader should not have to type — a currency mark, https:// */
+    prefix?: string;
+    /** A fixed tail — a unit, a domain every address on this form shares */
+    suffix?: string;
+    /** A mark at the far edge that comments on the value rather than introducing it */
+    trailingIcon?: ReactNode;
+    /**
+     * `numeric` — Digits and nothing else — a postcode, a reference number
+     * `decimal` — A number that may carry a separator — an amount
+     */
+    inputMode?: 'numeric' | 'decimal';
+    /**
+     * `text` — The default. The word 'required' says what it means in the reader's own language and needs no key
+     * `asterisk` — A dense form where the word would repeat down the column, and a legend explains the mark once
+     */
+    requiredMark?: 'text' | 'asterisk';
+}
+export type TextInputProps = TextInputOwnProps & Omit<InputHTMLAttributes<HTMLInputElement>, 'className' | 'size' | 'status' | 'type' | 'label' | 'labelTooltip' | 'placeholder' | 'helperText' | 'leadingIcon' | 'prefix' | 'suffix' | 'trailingIcon' | 'clearable' | 'clearLabel' | 'inputMode' | 'statusMessage' | 'required' | 'requiredMark' | 'optional'> & ({
+    status?: 'none' | 'error' | 'warning' | 'success' | 'pending';
+    statusMessage: string;
+} | {
+    status?: Exclude<'none' | 'error' | 'warning' | 'success' | 'pending', 'error' | 'warning'>;
+    statusMessage?: string;
+}) & ({
+    required?: boolean;
+    optional?: false;
+} | {
+    required?: false;
+    optional?: boolean;
+}) & ({
+    clearable?: boolean;
+    clearLabel: string;
+} | {
+    clearable?: false;
+    clearLabel?: string;
+});
+/** The class each part carries. Apply these — do not retype them. */
+export declare const textInputParts: {
+    readonly root: "dds-textinput";
+    readonly 'label-row': "dds-textinput__label-row";
+    readonly label: "dds-textinput__label";
+    readonly 'required-mark': "dds-textinput__required-mark";
+    readonly 'optional-mark': "dds-textinput__optional-mark";
+    readonly 'label-tooltip': "dds-textinput__label-tooltip";
+    readonly control: "dds-textinput__control";
+    readonly 'leading-icon': "dds-textinput__leading-icon";
+    readonly prefix: "dds-textinput__prefix";
+    readonly field: "dds-textinput__field";
+    readonly suffix: "dds-textinput__suffix";
+    readonly clear: "dds-textinput__clear";
+    readonly 'trailing-icon': "dds-textinput__trailing-icon";
+    readonly helper: "dds-textinput__helper";
+    readonly message: "dds-textinput__message";
+    readonly 'message-icon': "dds-textinput__message-icon";
+};
+/** Generated so defaults cannot drift from the contract. */
+export declare const textInputDefaults: {
+    readonly size: "md";
+    readonly status: "none";
+    readonly type: "text";
+    readonly clearable: false;
+    readonly required: false;
+    readonly requiredMark: "text";
+    readonly optional: false;
+};
+/** The step this component draws a glyph slot at. Generated — do not retype. */
+export declare const textInputGlyphStep: {
+    readonly sm: "xs";
+    readonly md: "sm";
+    readonly lg: "sm";
+};

package/dist/components/core/text-input/TextInput.types.js

@@ -0,0 +1,24 @@
+// GENERATED from text-input.contract.json. Do not edit.
+/** The class each part carries. Apply these — do not retype them. */
+export const textInputParts = {
+    root: 'dds-textinput',
+    'label-row': 'dds-textinput__label-row',
+    label: 'dds-textinput__label',
+    'required-mark': 'dds-textinput__required-mark',
+    'optional-mark': 'dds-textinput__optional-mark',
+    'label-tooltip': 'dds-textinput__label-tooltip',
+    control: 'dds-textinput__control',
+    'leading-icon': 'dds-textinput__leading-icon',
+    prefix: 'dds-textinput__prefix',
+    field: 'dds-textinput__field',
+    suffix: 'dds-textinput__suffix',
+    clear: 'dds-textinput__clear',
+    'trailing-icon': 'dds-textinput__trailing-icon',
+    helper: 'dds-textinput__helper',
+    message: 'dds-textinput__message',
+    'message-icon': 'dds-textinput__message-icon',
+};
+/** Generated so defaults cannot drift from the contract. */
+export const textInputDefaults = { size: 'md', status: 'none', type: 'text', clearable: false, required: false, requiredMark: 'text', optional: false };
+/** The step this component draws a glyph slot at. Generated — do not retype. */
+export const textInputGlyphStep = { sm: 'xs', md: 'sm', lg: 'sm' };