@fairgarden/design 0.1.0-alpha.0 → 0.1.0-alpha.2

package/forms/fieldset/Fieldset.js

@@ -0,0 +1,80 @@
+'use client';
+import * as React from 'react';
+import { Fieldset as BaseFieldset } from '@base-ui/react/fieldset';
+import { cva } from 'class-variance-authority';
+import { resolveClassName, cx } from '../../utils/className';
+import { primaryScaleVariants, secondaryScaleVariants } from '../../utils/scales';
+import { useScopeAttributes } from '../../utils/scope';
+import styles from './fieldset.module.css';
+/*
+ * Fieldset (§10.2): controls that answer one question, and every checkbox
+ * or radio group.
+ *
+ * Implementation (CSS Modules + CVA)
+ * - Module: fieldset.module.css; CVA function `fieldset`.
+ * - Axes: `variant` → text (open: legend plus hairline rule, no container),
+ *   outline (framed), ledger (the dotted frame with leader rows [D35]);
+ *   `primary`, `secondary` → scales module classes (structure takes
+ *   `primary` only; `secondary` is accepted unused).
+ * - Compound variants: none.
+ * - Defaults: variant text; color axes none.
+ * - Color fallback: inherits the scope.
+ * - States: root `data-disabled` → legend `--role-muted`, its controls
+ *   disabled (Base UI passes it down).
+ * - Parts: base, legend, rule, leader; `frame` / `frameLine` draw the
+ *   ledger's dotted frame in SVG.
+ * - Scope: none.
+ * - Container: none of its own. Framed padding reads the Form container
+ *   `form` (below 360 px: --size-px-2-5), with the viewport as fallback.
+ */
+export const fieldset = cva(styles.base, {
+    variants: {
+        variant: {
+            text: styles.text,
+            outline: styles.outline,
+            ledger: styles.ledger,
+        },
+        // Color axes: never defaulted [D133].
+        primary: primaryScaleVariants,
+        secondary: secondaryScaleVariants,
+    },
+    defaultVariants: {
+        variant: 'text',
+    },
+});
+/**
+ * A Base UI Fieldset: a native `fieldset` whose first child is a
+ * `FieldsetLegend`. `disabled` disables the legend and every control in it;
+ * hiding the group is usually better.
+ */
+export function Fieldset(props) {
+    const { variant, primary, secondary, className, children, ...rest } = props;
+    const scope = useScopeAttributes();
+    return (React.createElement(BaseFieldset.Root, { ...rest, ...scope, className: resolveClassName(className, (extra) => fieldset({ variant, primary, secondary, className: extra })) },
+        variant === 'ledger' ? (React.createElement("svg", { className: styles.frame, "aria-hidden": "true", focusable: "false" },
+            React.createElement("rect", { className: styles.frameLine, width: "100%", height: "100%" }))) : null,
+        children));
+}
+/**
+ * The legend, a native `legend`: `type-field-label` in `--primary12`, title
+ * case up to about four words, sentence case for longer or question
+ * legends [D160]. Open fieldsets draw the hairline rule under it; framed
+ * fieldsets set it into the top edge.
+ */
+export function FieldsetLegend(props) {
+    const { className, children, render, ...rest } = props;
+    return (React.createElement(BaseFieldset.Legend, { ...rest, render: render ?? React.createElement("legend", null), className: resolveClassName(className, (extra) => cx(styles.legend, extra)) },
+        children,
+        React.createElement("span", { className: styles.rule, "aria-hidden": "true" })));
+}
+/**
+ * The ledger's `line-dotted-fine` leader in `--role-rule`, running from a
+ * row's label to its control. Place it between the two in
+ * a row that lays out inline; it grows to fill the space. Decorative.
+ */
+export function FieldsetLeader(props) {
+    const { className, ...rest } = props;
+    return (React.createElement("svg", { "aria-hidden": "true", focusable: "false", ...rest, className: cx(styles.leader, className) },
+        React.createElement("line", { className: styles.leaderLine, x1: "0", y1: "50%", x2: "100%", y2: "50%" })));
+}
+//# sourceMappingURL=Fieldset.js.map

package/forms/fieldset/Fieldset.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Fieldset.js","sourceRoot":"","sources":["../../src/forms/fieldset/Fieldset.tsx"],"names":[],"mappings":"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"}

package/forms/fieldset/fieldset.module.css

@@ -0,0 +1,167 @@
+/*
+ * Fieldset (§10.2). CVA function `fieldset`. Parts: `base` (the native
+ * fieldset), `legend`, `rule` (the open variant's hairline), `leader` (the
+ * ledger's dotted leader) with `leaderLine`, and `frame` / `frameLine`, the
+ * SVG that draws the ledger's `line-dotted` frame as true dots [D36, D68].
+ * Structure takes --primary12 and --role-* only; the legend is authored in
+ * title case up to about four words [D160].
+ */
+
+/* Composition sits in top-level rules, outside the layers: Lightning CSS
+ * (Next.js with Turbopack) rejects `composes` inside @layer or any nesting.
+ * The composed classes keep their own layers. */
+.legend {
+  composes: typeFieldLabel from '../../utils/type.module.css';
+}
+
+.frameLine {
+  composes: lineDotted from '../../utils/line.module.css';
+}
+
+.leaderLine {
+  composes: lineDottedFine from '../../utils/line.module.css';
+}
+
+@layer base {
+  /* The native fieldset, reset: no UA border, padding or min-content floor [D154]. */
+  .base {
+    /* Local dimension: framed padding by tier. */
+    --fieldset-padding: var(--size-px-3);
+
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    gap: var(--size-px-5);
+    min-inline-size: 0;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    color: var(--primary12);
+  }
+
+  /* Fieldsets stand --size-px-7-5 apart; the Form's --size-px-5 gap supplies the rest. */
+  .base + .base {
+    margin-block-start: calc(var(--size-px-7-5) - var(--size-px-5));
+  }
+
+  .legend {
+    padding: 0;
+    color: var(--primary12);
+  }
+
+  .rule {
+    display: none;
+  }
+
+  /* The ledger frame host covers the border box, inset by half a dot. */
+  .frame {
+    position: absolute;
+    inset-block-start: calc(var(--fgd-dot) / 2);
+    inset-inline-start: calc(var(--fgd-dot) / 2);
+    inline-size: calc(100% - var(--fgd-dot));
+    block-size: calc(100% - var(--fgd-dot));
+    overflow: visible;
+    pointer-events: none;
+  }
+
+  .frameLine {
+    fill: none;
+    stroke: var(--role-rule);
+  }
+
+  /* A leader runs from the label to the control; it grows to fill the row. */
+  .leader {
+    flex: 1 1 var(--size-px-5);
+    align-self: center;
+    min-inline-size: var(--size-px-5);
+    block-size: var(--fgd-dot-fine);
+    overflow: visible;
+  }
+
+  .leaderLine {
+    fill: none;
+    stroke: var(--role-rule);
+  }
+
+  @media (forced-colors: active) {
+    .frameLine,
+    .leaderLine {
+      stroke: CanvasText;
+    }
+  }
+}
+
+@layer variants {
+  /*
+   * Open (default): the legend is an ordinary block (a floated legend is
+   * laid out as a flex item), then a --border-size-1 --role-hairline rule
+   * --size-px-2-5 below it; content follows --size-px-5 below the rule.
+   */
+  .text .legend,
+  .ledger .legend {
+    float: inline-start;
+    inline-size: 100%;
+  }
+
+  .text .rule {
+    display: block;
+    margin-block-start: var(--size-px-2-5);
+    border-block-start: var(--border-size-1) solid var(--role-hairline);
+  }
+
+  /* Framed: a --border-size-2-25 --primary12 frame, square; the legend sits in its top edge. */
+  .outline {
+    padding: var(--fieldset-padding);
+    border: var(--border-size-2-25) solid var(--primary12);
+    border-radius: var(--radius-0);
+  }
+
+  /* The legend's --size-px-2 break on each side of the frame line. */
+  .outline .legend {
+    padding-inline: var(--size-px-2);
+  }
+
+  /* Ledger: the dotted frame (the SVG) with padding inside it. */
+  .ledger {
+    padding: var(--fieldset-padding);
+  }
+
+  /* Framed padding: --size-px-3 at base, --size-px-7 from --lg-n-above (§10.2 tokens). */
+  @media (min-width: 1024px) {
+    .outline,
+    .ledger {
+      --fieldset-padding: var(--size-px-7);
+    }
+  }
+
+  /* Stack guard: viewport fallback first, then the Form container (§5.10.2) [D163]. */
+  @media (max-width: 359.98px) {
+    .outline,
+    .ledger {
+      --fieldset-padding: var(--size-px-2-5);
+    }
+  }
+
+  @container form (width < 360px) {
+    .outline,
+    .ledger {
+      --fieldset-padding: var(--size-px-2-5);
+    }
+  }
+}
+
+@layer states {
+  /* Disabled: the legend takes --role-muted with its controls; never dimmed [D16]. */
+  .legend[data-disabled] {
+    color: var(--role-muted);
+  }
+}
+
+@layer print {
+  @media print {
+    /* Frames print through the remap (2.25 pt framed, dotted ledger); keep a group whole. */
+    .base {
+      break-inside: avoid;
+    }
+  }
+}

package/forms/fieldset/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/forms/fieldset/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAA"}

package/forms/fieldset/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/forms/fieldset/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAA"}

package/forms/form/Form.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Form.d.ts","sourceRoot":"","sources":["../../src/forms/form/Form.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,IAAI,IAAI,QAAQ,EAAE,MAAM,qBAAqB,CAAA;AACtD,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AA4BjE,eAAO,MAAM,IAAI;;;8EAMf,CAAA;AAEF,KAAK,YAAY,GAAG,YAAY,CAAC,OAAO,IAAI,CAAC,CAAA;AAE7C,yEAAyE;AACzE,MAAM,MAAM,SAAS,CAAC,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,IAAI,IAAI,CAC5F,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,EACtB,WAAW,CACZ,GAAG;IACF,uDAAuD;IACvD,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,0FAA0F;IAC1F,OAAO,CAAC,EAAE,YAAY,CAAC,SAAS,CAAC,CAAA;IACjC,+CAA+C;IAC/C,SAAS,CAAC,EAAE,YAAY,CAAC,WAAW,CAAC,CAAA;CACtC,CAAA;AAED;;;;;;GAMG;AACH,wBAAgB,IAAI,CAAC,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EACnF,KAAK,EAAE,SAAS,CAAC,MAAM,CAAC,qBAczB;AAED,2FAA2F;AAC3F,MAAM,WAAW,gBAAgB;IAC/B,mEAAmE;IACnE,EAAE,EAAE,MAAM,CAAA;IACV,kDAAkD;IAClD,OAAO,EAAE,KAAK,CAAC,SAAS,CAAA;CACzB;AAED,6BAA6B;AAC7B,MAAM,WAAW,gBAAgB;IAC/B,kEAAkE;IAClE,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,uEAAuE;IACvE,MAAM,EAAE,SAAS,gBAAgB,EAAE,CAAA;IACnC,uDAAuD;IACvD,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,qBAmClD;AAED,sCAAsC;AACtC,MAAM,MAAM,YAAY,GAAG,KAAK,CAAC,qBAAqB,CAAC,KAAK,CAAC,CAAA;AAE7D;;;GAGG;AACH,wBAAgB,OAAO,CAAC,KAAK,EAAE,YAAY,qBAG1C;AAED,0CAA0C;AAC1C,MAAM,MAAM,gBAAgB,GAAG,KAAK,CAAC,qBAAqB,CAAC,KAAK,CAAC,CAAA;AAEjE;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,qBAGlD"}

package/forms/form/Form.js

@@ -0,0 +1,90 @@
+'use client';
+import * as React from 'react';
+import { Form as BaseForm } from '@base-ui/react/form';
+import { cva } from 'class-variance-authority';
+import { Alert } from '../../feedback/alert';
+import { Link } from '../../actions/link';
+import { cx } from '../../utils/className';
+import { primaryScaleVariants, secondaryScaleVariants } from '../../utils/scales';
+import { useScopeAttributes } from '../../utils/scope';
+import styles from './form.module.css';
+/*
+ * Form (§10.2): anything submitted. Instant-apply settings are switches.
+ *
+ * Implementation (CSS Modules + CVA)
+ * - Module: form.module.css; CVA function `form`.
+ * - Axes: `primary`, `secondary` → scales module classes (structure takes
+ *   `primary` only; `secondary` is accepted unused).
+ * - Compound variants: none. Defaults: color axes none.
+ * - Color fallback: inherits the scope. The summary is an Alert whose
+ *   secondary is the danger scale [D129].
+ * - States: `aria-busy` (set from `busy`) → the form is inert, the submit
+ *   reads "-ing…" at its rest width [D84].
+ * - Parts: base, summary (an Alert, status danger; `summaryTitle`,
+ *   `summaryList`), actions; `row` holds a short pair.
+ * - Scope: none.
+ * - Container: the root is the inline-size container `form`; short pairs
+ *   share a row from 480 px, fieldset padding and the butted submit's
+ *   stack guard read it below 360 px (§5.10.2) [D163].
+ */
+export const form = cva(styles.base, {
+    variants: {
+        // Color axes: never defaulted [D133].
+        primary: primaryScaleVariants,
+        secondary: secondaryScaleVariants,
+    },
+});
+/**
+ * A Base UI Form, one column at `--size-sm`. Base UI validates on submit,
+ * then re-validates failed fields as they change (§10.2 asks for blur;
+ * pass `validationMode="onBlur"` to a Field that should wait for it).
+ * Order: an optional `FormSummary`, fields and fieldsets, then
+ * `FormActions`.
+ */
+export function Form(props) {
+    const { busy, primary, secondary, className, ...rest } = props;
+    const scope = useScopeAttributes();
+    return (React.createElement(BaseForm, { ...rest, ...scope, "aria-busy": busy || undefined, inert: busy || undefined, className: form({ primary, secondary, className }) }));
+}
+/**
+ * The error summary at the top of the form (§10.2): the danger Alert with
+ * a heading and a link to each failing field. Render it only while there
+ * are errors; it takes focus when it appears.
+ */
+export function FormSummary(props) {
+    const { title, errors, className } = props;
+    const ref = React.useRef(null);
+    React.useEffect(() => {
+        ref.current?.focus();
+    }, []);
+    const focusField = (event, id) => {
+        const target = document.getElementById(id);
+        if (!target)
+            return;
+        event.preventDefault();
+        target.focus();
+        target.scrollIntoView({ block: 'center' });
+    };
+    return (React.createElement(Alert, { ref: ref, status: "danger", tabIndex: -1, className: cx(styles.summary, className) },
+        React.createElement("h2", { className: styles.summaryTitle }, title),
+        React.createElement("ul", { className: styles.summaryList }, errors.map((error) => (React.createElement("li", { key: error.id },
+            React.createElement(Link, { href: `#${error.id}`, onClick: (event) => focusField(event, error.id) }, error.message)))))));
+}
+/**
+ * A short pair, such as city and postcode: a 2:1 row that stacks when both
+ * fields do not fit, and always shares the row from 480 px of form width.
+ */
+export function FormRow(props) {
+    const { className, ...rest } = props;
+    return React.createElement("div", { ...rest, className: cx(styles.row, className) });
+}
+/**
+ * The action row, `--size-px-5` below the last field. Author the solid
+ * submit (`size="lg"`) last: it shows first and full width at base, and
+ * last (rightmost) from `--md-n-above` [D106].
+ */
+export function FormActions(props) {
+    const { className, ...rest } = props;
+    return React.createElement("div", { ...rest, className: cx(styles.actions, className) });
+}
+//# sourceMappingURL=Form.js.map

package/forms/form/Form.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Form.js","sourceRoot":"","sources":["../../src/forms/form/Form.tsx"],"names":[],"mappings":"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"}

package/forms/form/form.module.css

@@ -0,0 +1,123 @@
+/*
+ * Form (§10.2). CVA function `form`. Parts: `base` (the form and its
+ * inline-size container `form`), `summary` (the danger Alert at the top,
+ * with `summaryTitle` and `summaryList`), `row` (a short pair such as city
+ * and postcode) and `actions` (the action row). Structure takes role
+ * variables only; the summary's colors are the Alert's.
+ */
+
+/* Composition sits in top-level rules, outside the layers: Lightning CSS
+ * (Next.js with Turbopack) rejects `composes` inside @layer or any nesting.
+ * The composed classes keep their own layers. */
+.summaryTitle {
+  composes: typeSubhead from '../../utils/type.module.css';
+}
+
+@layer base {
+  /*
+   * One column at --size-sm, fields --size-px-5 apart (§10.2). The root is
+   * the inline-size container `form` that fieldsets, pairs and butted
+   * submits query (§5.10.2) [D163].
+   */
+  .base {
+    container: form / inline-size;
+    display: flex;
+    flex-direction: column;
+    gap: var(--size-px-5);
+    inline-size: 100%;
+    max-inline-size: var(--size-sm);
+    color: var(--primary12);
+  }
+
+  /* The summary takes focus when it appears; the Alert draws its own bar and glyph. */
+  .summary {
+    scroll-margin-block: var(--fgd-space-margin);
+  }
+
+  .summaryTitle {
+    margin: 0;
+    color: var(--primary12);
+  }
+
+  .summaryList {
+    display: grid;
+    gap: var(--size-px-2);
+    margin: 0;
+    margin-block-start: var(--size-px-2);
+    padding: 0;
+    list-style: none;
+  }
+
+  /*
+   * A short pair shares one row in a 2:1 split and stacks when both do not
+   * fit (flex-wrap at each field's minimum); from 480 px of form width it
+   * always shares the row (§5.10.2).
+   */
+  .row {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--size-px-5);
+  }
+
+  .row > * {
+    flex: 2 1 var(--size-px-12);
+    min-inline-size: 0;
+  }
+
+  .row > :last-child:not(:first-child) {
+    flex: 1 1 var(--size-px-11);
+  }
+
+  @container form (width >= 480px) {
+    .row {
+      flex-wrap: nowrap;
+    }
+  }
+
+  /*
+   * The action row, --size-px-5 above the last field: stacked with the
+   * solid submit first at base; from --md-n-above one row with the submit
+   * last (rightmost) [D106]. Author the submit last.
+   */
+  .actions {
+    display: flex;
+    flex-direction: column-reverse;
+    align-items: stretch;
+    gap: var(--size-px-2-5);
+  }
+
+  @media (min-width: 768px) {
+    .actions {
+      flex-direction: row;
+      flex-wrap: wrap;
+      align-items: center;
+      justify-content: flex-end;
+    }
+  }
+}
+
+@layer states {
+  /* The summary is focused by script; the ring shows for keyboard users only [D45]. */
+  .summary:focus {
+    outline: none;
+  }
+
+  .summary:focus-visible {
+    outline: var(--border-size-2) solid var(--primary12);
+    outline-offset: var(--border-size-2);
+  }
+
+  /* Busy: the form is inert until the response; the submit reads "Sending…" [D84]. */
+  .base[aria-busy='true'] {
+    cursor: progress;
+  }
+}
+
+@layer print {
+  @media print {
+    /* The summary prints if present; the action row is interaction only. */
+    .actions {
+      display: none;
+    }
+  }
+}

package/forms/form/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/forms/form/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAA"}

package/forms/form/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/forms/form/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAA"}

package/forms/input/Input.d.ts

@@ -0,0 +1,161 @@
+import * as React from 'react';
+import { Input as BaseInput } from '@base-ui/react/input';
+import { type VariantProps } from 'class-variance-authority';
+import { type IconName } from '../../foundations/icon';
+export declare const input: (props?: ({
+    variant?: "outline" | "underline" | null | undefined;
+    labelInside?: boolean | null | undefined;
+    multiline?: boolean | null | undefined;
+    plate?: boolean | null | undefined;
+    butted?: "end" | null | undefined;
+    primary?: "ruby" | "brown" | "crimson" | "gold" | "gray" | "indigo" | "olive" | "pink" | "plum" | "purple" | "red" | "tomato" | "violet" | "bronze" | "iris" | "mauve" | "sage" | "sand" | "slate" | null | undefined;
+    secondary?: "ruby" | "blue" | "brown" | "crimson" | "cyan" | "gold" | "gray" | "green" | "indigo" | "lime" | "olive" | "orange" | "pink" | "plum" | "purple" | "red" | "teal" | "tomato" | "violet" | "yellow" | "amber" | "bronze" | "grass" | "iris" | "jade" | "mauve" | "mint" | "sage" | "sand" | "sky" | "slate" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/**
+ * The module's part classes, for composed components that build a field box
+ * around another Base UI control (Search's Autocomplete input) and leave the
+ * box's parts to this module (§1.11.1).
+ */
+export declare const inputParts: {
+    readonly control: string;
+    readonly icon: string;
+    readonly affix: string;
+    readonly actionSlot: string;
+    readonly actionIcon: string;
+    readonly actionText: string;
+    readonly edge: string;
+    readonly edgeLine: string;
+};
+type InputVariants = VariantProps<typeof input>;
+/** The butted action cell (§10.3): a solid Button joined to the box's end. */
+export interface InputAction {
+    /**
+     * The action's accessible name, and its visible `type-button` label from
+     * `--md-n-above` when `labelled`. Title case, no tracking [D160].
+     */
+    label: string;
+    /**
+     * Shows `label` in the cell from `--md-n-above` (with `--size-px-5`
+     * padding). It stays the icon-only 64 × 48 px cell at base, below
+     * `--xs-n-below` and below 360 px of Form width. Default `false`.
+     */
+    labelled?: boolean;
+    /** Busy: the cell is inert and reads `busyLabel`; an icon-only cell shows "…" [D84]. */
+    busy?: boolean;
+    /** The "-ing…" wording while busy, e.g. "Sending…". Default "Sending…". */
+    busyLabel?: string;
+    /** Default `submit`. */
+    type?: 'submit' | 'button';
+    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    disabled?: boolean;
+}
+type ControlProps = Omit<BaseInput.Props, 'className' | 'style' | 'render' | 'prefix'>;
+interface InputOwnProps {
+    /** Class names for the box (the root), added after the module's own. */
+    className?: string;
+    /** Inline style for the box, passed through. Size the box to the expected answer with `chars`. */
+    style?: React.CSSProperties;
+    /**
+     * The expected answer's length in characters (a 5-digit postcode: `5`).
+     * The control is that many characters of its own type wide; the box adds
+     * its padding, edge and any icon, affix or toggle on top, and never grows
+     * past its container. Omitted, the box fills its container.
+     */
+    chars?: number;
+    /**
+     * Primary Radix scale: box edge, value, placeholder, icon and focus ring.
+     * Never defaulted; omitted, it inherits the scope [D133].
+     */
+    primary?: InputVariants['primary'];
+    /**
+     * Secondary Radix scale. Unused at rest; while the Field is invalid it is
+     * the danger scale (the error edge).
+     */
+    secondary?: InputVariants['secondary'];
+    /** A leading icon: Material Symbols Rounded, inline tier (§6.10). */
+    icon?: IconName;
+    /** A prefix unit inside the box, in --role-muted ("$"). */
+    prefix?: React.ReactNode;
+    /** A suffix unit inside the box, in --role-muted ("USD"). Never the unit only in the placeholder. */
+    suffix?: React.ReactNode;
+}
+interface SingleLineProps {
+    /** `true` renders the textarea. Default `false`. */
+    multiline?: false;
+    rows?: never;
+    limit?: never;
+    /**
+     * Password fields: adds a "Show" / "Hide" text toggle, never an eye icon
+     * alone (§10.3).
+     */
+    reveal?: boolean;
+    /** The toggle's two labels. Default `['Show', 'Hide']`. */
+    revealLabels?: readonly [show: string, hide: string];
+}
+interface MultilineProps {
+    /** The textarea: at least 3 lines, vertical resize only. */
+    multiline: true;
+    /** Visible lines. Default 3 (the minimum). */
+    rows?: number;
+    /**
+     * Shows a `type-data` count against this soft limit; over it, the count
+     * turns --primary12 with the danger ◆. Validate the limit in the Field.
+     */
+    limit?: number;
+    reveal?: never;
+    revealLabels?: never;
+}
+type LabelInsideProps = {
+    /** The `--fgd-size-control-xl` box with the label inside. Default `false`. */
+    labelInside: true;
+    /** The label drawn inside the box, title case [D160]. Required with `labelInside`. */
+    label: React.ReactNode;
+} | {
+    labelInside?: false;
+    label?: never;
+};
+type ButtedProps = {
+    /** Joins the action cell at the box's end: --radius-0 at the seam. */
+    butted: 'end';
+    /** The butted action cell; one-field forms only. */
+    action: InputAction;
+} | {
+    butted?: never;
+    action?: never;
+};
+type NotLabelInside = {
+    labelInside?: false;
+    label?: never;
+};
+type NotButted = {
+    butted?: never;
+    action?: never;
+};
+type OutlineSingleProps = {
+    /** `outline` (default) is the §10.1 field box; `underline` a lone bottom rule. */
+    variant?: 'outline';
+    /** The box face becomes a nested `white` scope; patterned grounds only (§10.1). */
+    plate?: boolean;
+} & SingleLineProps & LabelInsideProps & ButtedProps;
+type OutlineMultilineProps = {
+    variant?: 'outline';
+    plate?: boolean;
+} & MultilineProps & NotLabelInside & NotButted;
+type UnderlineProps = {
+    /** A lone `--border-size-1` bottom rule: dense settings rows and printable blanks. */
+    variant: 'underline';
+    plate?: false;
+} & (SingleLineProps | MultilineProps) & NotLabelInside & NotButted;
+/**
+ * Props for Input: Base UI Input props (for the control) plus the variant,
+ * slot and color props. `className` and `style` go to the box.
+ */
+export type InputProps = ControlProps & InputOwnProps & (OutlineSingleProps | OutlineMultilineProps | UnderlineProps);
+/**
+ * A text field on Base UI's Input (Field.Control), inside a `Field`. The
+ * placeholder is never the label; end it with "…". A plate belongs only on
+ * a patterned ground; everywhere else the box is open.
+ */
+export declare function Input(props: InputProps): React.JSX.Element;
+export {};
+//# sourceMappingURL=Input.d.ts.map

package/forms/input/Input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../src/forms/input/Input.tsx"],"names":[],"mappings":"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"}