@financedistrict/apps-ui 0.1.0

package/dist/inline-select.d.cts

@@ -0,0 +1,92 @@
+import * as React from 'react';
+import { S as SelectOption } from './SelectTrigger-By0iPBI3.cjs';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
+
+/**
+ * InlineSelect trigger styling — the inline-text select (Figma node 4926:5462).
+ * Unlike `Select`, there is NO field box: the trigger is a run of inline text
+ * (the value label) plus a small filled caret. Binds ONLY to the semantic
+ * `--color-*` token layer (never primitives, never arbitrary values); theme
+ * switching is automatic via the `.dark` class.
+ *
+ * Two `variation`s map to the two card-foreground families:
+ * - `primary`   → neutral card foreground (`card-primary-foreground`), muted
+ *   caret/placeholder (`card-primary-foreground-muted`).
+ * - `secondary` → brand card foreground (`card-brand-secondary-foreground`),
+ *   muted caret/placeholder (`card-brand-secondary-foreground-muted`).
+ *
+ * FOCUS is the ADR-0010 system ring — a momentary control (not a text field, so
+ * NOT the border-recolor treatment `Select`/`Input` use): 2px `--focus` stroke,
+ * 2px offset, on `:focus-visible` only, with a 2px (`radius/xs`) corner to match
+ * the Figma focus ring. Suppressed when disabled. The placeholder / value / caret
+ * colours are applied by `InlineSelectTrigger` (they depend on runtime state:
+ * whether a value is selected, and whether the caret follows the muted or full
+ * foreground), so this file owns the shared layout + focus + disabled shell.
+ */
+declare const inlineSelectVariants: (props?: ({
+    variation?: "primary" | "secondary" | null | undefined;
+    disabled?: boolean | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type InlineSelectVariantsProps = VariantProps<typeof inlineSelectVariants>;
+
+interface InlineSelectProps extends Omit<React.ComponentProps<"button">, "value" | "defaultValue" | "onChange"> {
+    /** The options to choose from (array-of-data API). */
+    options: SelectOption[];
+    /** Controlled selection (single). */
+    value?: string;
+    /** Uncontrolled initial selection (single). */
+    defaultValue?: string;
+    /** Fires with the next selected value. */
+    onValueChange?: (value: string) => void;
+    /** `primary` (neutral foreground, default) | `secondary` (brand foreground). */
+    variation?: NonNullable<InlineSelectVariantsProps["variation"]>;
+    /** Shown when nothing is selected. */
+    placeholder?: string;
+    /** Leading adornment before the label (decorative, 16px). */
+    leadingSlot?: React.ReactNode;
+    /** Disabled — the trigger won't open. */
+    disabled?: boolean;
+    /** Form field name (mirrors the value into a hidden input for form submission). */
+    name?: string;
+}
+/**
+ * InlineSelect — a single-select styled as inline text (NO field box), for use
+ * inline in a sentence, a card header, or a toolbar (Figma node 4926:5462). The
+ * trigger is the value label + a small filled caret; choosing opens a portaled
+ * dropdown reusing `Select`'s `SelectListbox`.
+ *
+ * Single-select only (no multi): `value` / `defaultValue` are `string`s and
+ * `onValueChange` emits a `string`. Uncontrolled by default (`defaultValue`)
+ * with a controlled escape hatch (`value` + `onValueChange`). Behaviour (open,
+ * keyboard model, type-ahead, active-descendant, reposition, outside-click) is
+ * shared with `Select` via the `useSelectListbox` hook. `ref` is a normal React
+ * 19 prop, forwarded to the trigger button.
+ */
+declare function InlineSelect({ options, value: valueProp, defaultValue, onValueChange, variation, placeholder, leadingSlot, disabled, name, id: idProp, className, ref, ...props }: InlineSelectProps): React.JSX.Element;
+
+interface InlineSelectTriggerProps extends Omit<React.ComponentProps<"button">, "value">, Omit<InlineSelectVariantsProps, "disabled"> {
+    /** Resolved display text (from the hook's `selectTriggerLabel`). */
+    displayText: string;
+    /** Whether `displayText` is the placeholder (muted) vs a real value. */
+    isPlaceholder: boolean;
+    /** Whether the listbox is open (flips the caret). */
+    open?: boolean;
+    /** Leading adornment (decorative — kept out of the a11y tree via `aria-hidden`). */
+    leadingSlot?: React.ReactNode;
+}
+/**
+ * The InlineSelect trigger — a `<button type="button">` styled as inline text
+ * (NO field box): an optional 16px leading slot, the value label (`body-03`),
+ * and a 12px filled caret that flips (`rotate-180`) when `open`. The value uses
+ * the variation foreground colour; the placeholder + caret use the muted
+ * variation colour (Figma node 4926:5462).
+ *
+ * Presentational leaf: all open/selection/keyboard orchestration and the ARIA
+ * popup wiring (`aria-haspopup`/`aria-expanded`/`aria-controls`/
+ * `aria-activedescendant`) live in `InlineSelect`, which spreads them through
+ * `...props`. `ref` is a normal React 19 prop, forwarded to the button.
+ */
+declare function InlineSelectTrigger({ variation, disabled, displayText, isPlaceholder, open, leadingSlot, className, ref, ...props }: InlineSelectTriggerProps): React.JSX.Element;
+
+export { InlineSelect, type InlineSelectProps, InlineSelectTrigger, type InlineSelectTriggerProps, type InlineSelectVariantsProps, inlineSelectVariants };

package/dist/inline-select.d.ts

@@ -0,0 +1,92 @@
+import * as React from 'react';
+import { S as SelectOption } from './SelectTrigger-By0iPBI3.js';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
+
+/**
+ * InlineSelect trigger styling — the inline-text select (Figma node 4926:5462).
+ * Unlike `Select`, there is NO field box: the trigger is a run of inline text
+ * (the value label) plus a small filled caret. Binds ONLY to the semantic
+ * `--color-*` token layer (never primitives, never arbitrary values); theme
+ * switching is automatic via the `.dark` class.
+ *
+ * Two `variation`s map to the two card-foreground families:
+ * - `primary`   → neutral card foreground (`card-primary-foreground`), muted
+ *   caret/placeholder (`card-primary-foreground-muted`).
+ * - `secondary` → brand card foreground (`card-brand-secondary-foreground`),
+ *   muted caret/placeholder (`card-brand-secondary-foreground-muted`).
+ *
+ * FOCUS is the ADR-0010 system ring — a momentary control (not a text field, so
+ * NOT the border-recolor treatment `Select`/`Input` use): 2px `--focus` stroke,
+ * 2px offset, on `:focus-visible` only, with a 2px (`radius/xs`) corner to match
+ * the Figma focus ring. Suppressed when disabled. The placeholder / value / caret
+ * colours are applied by `InlineSelectTrigger` (they depend on runtime state:
+ * whether a value is selected, and whether the caret follows the muted or full
+ * foreground), so this file owns the shared layout + focus + disabled shell.
+ */
+declare const inlineSelectVariants: (props?: ({
+    variation?: "primary" | "secondary" | null | undefined;
+    disabled?: boolean | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type InlineSelectVariantsProps = VariantProps<typeof inlineSelectVariants>;
+
+interface InlineSelectProps extends Omit<React.ComponentProps<"button">, "value" | "defaultValue" | "onChange"> {
+    /** The options to choose from (array-of-data API). */
+    options: SelectOption[];
+    /** Controlled selection (single). */
+    value?: string;
+    /** Uncontrolled initial selection (single). */
+    defaultValue?: string;
+    /** Fires with the next selected value. */
+    onValueChange?: (value: string) => void;
+    /** `primary` (neutral foreground, default) | `secondary` (brand foreground). */
+    variation?: NonNullable<InlineSelectVariantsProps["variation"]>;
+    /** Shown when nothing is selected. */
+    placeholder?: string;
+    /** Leading adornment before the label (decorative, 16px). */
+    leadingSlot?: React.ReactNode;
+    /** Disabled — the trigger won't open. */
+    disabled?: boolean;
+    /** Form field name (mirrors the value into a hidden input for form submission). */
+    name?: string;
+}
+/**
+ * InlineSelect — a single-select styled as inline text (NO field box), for use
+ * inline in a sentence, a card header, or a toolbar (Figma node 4926:5462). The
+ * trigger is the value label + a small filled caret; choosing opens a portaled
+ * dropdown reusing `Select`'s `SelectListbox`.
+ *
+ * Single-select only (no multi): `value` / `defaultValue` are `string`s and
+ * `onValueChange` emits a `string`. Uncontrolled by default (`defaultValue`)
+ * with a controlled escape hatch (`value` + `onValueChange`). Behaviour (open,
+ * keyboard model, type-ahead, active-descendant, reposition, outside-click) is
+ * shared with `Select` via the `useSelectListbox` hook. `ref` is a normal React
+ * 19 prop, forwarded to the trigger button.
+ */
+declare function InlineSelect({ options, value: valueProp, defaultValue, onValueChange, variation, placeholder, leadingSlot, disabled, name, id: idProp, className, ref, ...props }: InlineSelectProps): React.JSX.Element;
+
+interface InlineSelectTriggerProps extends Omit<React.ComponentProps<"button">, "value">, Omit<InlineSelectVariantsProps, "disabled"> {
+    /** Resolved display text (from the hook's `selectTriggerLabel`). */
+    displayText: string;
+    /** Whether `displayText` is the placeholder (muted) vs a real value. */
+    isPlaceholder: boolean;
+    /** Whether the listbox is open (flips the caret). */
+    open?: boolean;
+    /** Leading adornment (decorative — kept out of the a11y tree via `aria-hidden`). */
+    leadingSlot?: React.ReactNode;
+}
+/**
+ * The InlineSelect trigger — a `<button type="button">` styled as inline text
+ * (NO field box): an optional 16px leading slot, the value label (`body-03`),
+ * and a 12px filled caret that flips (`rotate-180`) when `open`. The value uses
+ * the variation foreground colour; the placeholder + caret use the muted
+ * variation colour (Figma node 4926:5462).
+ *
+ * Presentational leaf: all open/selection/keyboard orchestration and the ARIA
+ * popup wiring (`aria-haspopup`/`aria-expanded`/`aria-controls`/
+ * `aria-activedescendant`) live in `InlineSelect`, which spreads them through
+ * `...props`. `ref` is a normal React 19 prop, forwarded to the button.
+ */
+declare function InlineSelectTrigger({ variation, disabled, displayText, isPlaceholder, open, leadingSlot, className, ref, ...props }: InlineSelectTriggerProps): React.JSX.Element;
+
+export { InlineSelect, type InlineSelectProps, InlineSelectTrigger, type InlineSelectTriggerProps, type InlineSelectVariantsProps, inlineSelectVariants };

package/dist/inline-select.js

@@ -0,0 +1,6 @@
+export { InlineSelect, InlineSelectTrigger, inlineSelectVariants } from './chunk-Y2O4YYZQ.js';
+import './chunk-5TWRK4NW.js';
+import './chunk-IEVN3J2F.js';
+import './chunk-SNU4YXOR.js';
+import './chunk-FAOVKDVM.js';
+import './chunk-7EOSDFS3.js';

package/dist/input.cjs

@@ -0,0 +1,263 @@
+'use strict';
+
+var React = require('react');
+var react = require('@phosphor-icons/react');
+var clsx = require('clsx');
+var tailwindMerge = require('tailwind-merge');
+var classVarianceAuthority = require('class-variance-authority');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+// src/input/Input.tsx
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx.clsx(inputs));
+}
+var inputVariants = classVarianceAuthority.cva(
+  [
+    // Field row layout — icons + input on one line, vertically centred.
+    "flex w-full items-center",
+    // Colour transitions for the focus border change.
+    "transition-colors",
+    // I-beam text cursor over the WHOLE field row (not just the inner input),
+    // so clicking anywhere in the padding/icon area reads as "type here". This
+    // is the only hover affordance — hover intentionally does NOT recolour the
+    // border (user-authorized deviation from the Figma). `cursor-text` sits in
+    // the base; `has-[:disabled]:cursor-not-allowed` below is declared AFTER it
+    // so it wins on a disabled field (same-specificity utilities, later class
+    // takes precedence — confirmed by tailwind-merge ordering).
+    "cursor-text",
+    // Disabled: not-allowed cursor + block pointer interaction on the whole
+    // field (the native `disabled` on the input already stops typing; icons are
+    // dimmed separately by the `disabled`-derived `iconStateClass` in <Input>).
+    // Declared after `cursor-text` so it overrides the I-beam when disabled.
+    "has-[:disabled]:cursor-not-allowed"
+  ],
+  {
+    variants: {
+      variation: {
+        field: [
+          "bg-input-background border border-input-border rounded-sm",
+          // Focus (mouse or keyboard) strengthens the whole border to the
+          // accent. Hover does NOT change colour (cursor-only affordance).
+          "focus-within:border-input-border-accent"
+        ],
+        line: [
+          "border-b border-input-border",
+          // Focus (mouse or keyboard) strengthens the bottom line to the
+          // accent. Hover does NOT change colour (cursor-only affordance).
+          "focus-within:border-input-border-accent"
+        ]
+      },
+      size: {
+        // sm/lg heights reuse the Button scale; gap follows Figma per size.
+        sm: "h-8 gap-1",
+        lg: "h-10 gap-2"
+      },
+      error: {
+        // Error out-ranks focus: declare the destructive border for the resting
+        // state AND its `focus-within:` form so an errored field never recolours
+        // to the accent when focused (a bare `border-…` alone would lose to the
+        // variation's `focus-within:` accent utility above). No `hover:` form is
+        // needed — hover no longer changes colour on any variation. The `error`
+        // variant's classes are emitted after the variation's, so at equal
+        // specificity the destructive `focus-within:` wins by order.
+        true: "border-input-destructive-foreground-accent focus-within:border-input-destructive-foreground-accent",
+        false: ""
+      },
+      // Bottom-line visibility toggle. LINE ONLY — the hide effect is applied
+      // via a compound variant below (scoped to `variation:line`), so `field`
+      // is unaffected. Boolean → `true`/`false`; `true` (default) keeps today's
+      // behaviour. No classes here: `true` is the resting `border-input-border`
+      // from the variation, and `false`'s hide is the compound variant.
+      showBottomLine: {
+        true: "",
+        false: ""
+      }
+    },
+    compoundVariants: [
+      // field padding — Figma field-lg = px-3 (12px) / py-2 (8px).
+      { variation: "field", size: "lg", className: "px-3 py-2" },
+      // field-sm: DERIVED. px-2 (8px = spacing/2) steps down from field-lg's
+      // px-3 (12px) and equals py-2 for a uniform spacing/2 inset all around.
+      { variation: "field", size: "sm", className: "px-2 py-2" },
+      // line — no horizontal padding (Figma px-0); vertical padding per size.
+      { variation: "line", size: "lg", className: "py-2" },
+      { variation: "line", size: "sm", className: "py-2.5" },
+      // Hide the resting bottom line (LINE ONLY): recolour to transparent while
+      // keeping `border-b` for a stable 1px width (no layout shift). Gated on
+      // `error:false` so an errored field keeps its destructive rest border
+      // (transparent would otherwise last-win over it). Focus still wins:
+      // `focus-within:border-input-border-accent` out-ranks `border-transparent`
+      // (later in class order), so the line reappears on focus. `field` is
+      // untouched — this compound only matches `variation:line`.
+      {
+        variation: "line",
+        showBottomLine: false,
+        error: false,
+        className: "border-transparent"
+      }
+    ],
+    defaultVariants: {
+      variation: "field",
+      size: "lg",
+      error: false,
+      showBottomLine: true
+    }
+  }
+);
+function Input({
+  className,
+  fieldClassName,
+  wrapperClassName,
+  variation = "field",
+  size = "lg",
+  error = false,
+  // LINE-only bottom-line toggle. Destructured OUT of `props` so it never
+  // spreads onto the native <input> (invalid DOM attribute → React warning).
+  showBottomLine = true,
+  label,
+  optional = false,
+  hint,
+  leftSlot,
+  rightSlot,
+  disabled,
+  id: idProp,
+  ref,
+  ...props
+}) {
+  const generatedId = React__namespace.useId();
+  const id = idProp ?? generatedId;
+  const hintId = hint ? `${id}-hint` : void 0;
+  const iconStateClass = cn(
+    error ? "text-input-destructive-foreground-accent" : "text-input-foreground",
+    disabled && "text-input-foreground-muted"
+  );
+  const HintIcon = error ? react.WarningIcon : react.InfoIcon;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col gap-1.5", wrapperClassName), children: [
+    label != null && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "label",
+        {
+          htmlFor: id,
+          "data-slot": "input-label",
+          className: cn(
+            "caption-03-medium uppercase",
+            error ? "text-input-destructive-foreground-accent" : "text-input-foreground",
+            disabled && "text-input-foreground-muted"
+          ),
+          children: label
+        }
+      ),
+      optional && /* @__PURE__ */ jsxRuntime.jsx(
+        "span",
+        {
+          "data-slot": "input-optional",
+          className: "body-04 text-input-foreground-muted",
+          children: "Optional"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        "data-slot": "input-field",
+        "data-variation": variation,
+        "data-error": error || void 0,
+        className: cn(
+          inputVariants({ variation, size, error, showBottomLine }),
+          // Icon slots inherit the shared state colour; 16px default size.
+          "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+          iconStateClass,
+          fieldClassName
+        ),
+        children: [
+          leftSlot != null && /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              "data-slot": "input-leading",
+              "aria-hidden": "true",
+              className: "flex items-center",
+              children: leftSlot
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              id,
+              "data-slot": "input",
+              disabled,
+              "aria-invalid": error || void 0,
+              "aria-describedby": hintId,
+              className: cn(
+                // Typography (Figma `body-03`) + fill the row. `min-w-0` lets the
+                // input shrink inside the flex row instead of overflowing.
+                "body-03 w-full min-w-0 bg-transparent outline-none",
+                // Typed text + caret colour (Figma `input-foreground-accent`).
+                "text-input-foreground-accent caret-input-foreground-accent",
+                // Placeholder colour (Figma `input-foreground-muted`).
+                "placeholder:text-input-foreground-muted",
+                // Disabled text goes muted; keep the not-allowed cursor.
+                "disabled:cursor-not-allowed disabled:text-input-foreground-muted",
+                className
+              ),
+              ref,
+              ...props
+            }
+          ),
+          rightSlot != null && // NOT aria-hidden: the trailing slot may host an interactive control
+          // (e.g. SearchBar's clear button) that must stay reachable by AT +
+          // keyboard, and a focusable element inside aria-hidden is an ARIA
+          // violation. Decorative bare-<svg> icons are silent to AT on their own
+          // (no role / no accessible name), so dropping aria-hidden here does not
+          // make them announced. The leading slot stays decorative (aria-hidden).
+          /* @__PURE__ */ jsxRuntime.jsx("span", { "data-slot": "input-trailing", className: "flex items-center", children: rightSlot })
+        ]
+      }
+    ),
+    hint != null && /* @__PURE__ */ jsxRuntime.jsxs(
+      "p",
+      {
+        id: hintId,
+        "data-slot": "input-hint",
+        className: cn(
+          "body-04 flex items-center gap-1",
+          error ? "text-input-destructive-foreground-accent" : "text-input-foreground",
+          disabled && "text-input-foreground-muted"
+        ),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            HintIcon,
+            {
+              "aria-hidden": "true",
+              weight: "regular",
+              className: "size-4 shrink-0"
+            }
+          ),
+          hint
+        ]
+      }
+    )
+  ] });
+}
+
+exports.Input = Input;
+exports.inputVariants = inputVariants;

package/dist/input.d.cts

@@ -0,0 +1,157 @@
+import * as React from 'react';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
+
+/**
+ * Input styling — mirrors the Figma `BaseInput` component (node 4973:6816) and
+ * binds ONLY to the semantic `--input-*` token layer (never primitives, never
+ * arbitrary values). Theme switching is automatic via the `.dark` class, so no
+ * `dark:` variants are needed.
+ *
+ * This cva styles the FIELD wrapper (the row that holds the leading icon, the
+ * real `<input>`, and the trailing icon) — NOT the bare `<input>`, whose own
+ * classes live in <Input> so the token that colours typed text
+ * (`text-input-foreground-accent`) and the placeholder
+ * (`text-input-foreground-muted`) can sit on the element itself.
+ *
+ * The 7 Figma "states" (default / hover / focused&active / active&filled /
+ * filled …) are runtime DOM states of a real `<input>`, NOT a prop:
+ * - hover  → a text (I-beam) cursor affordance ONLY (`cursor-text` in the
+ *            base). Hover does NOT recolour the border/underline. This is a
+ *            deliberate, user-authorized deviation from the Figma (which draws
+ *            the accent border on hover): the team decided hover is a pointer
+ *            affordance, not a colour change.
+ * - focus  → `focus-within:` on the field wrapper recolours the border (field)
+ *            / bottom line (line) to `input-border-accent`. The input is the
+ *            focusable descendant; the visible treatment lives on its wrapper.
+ *            There is NO system outline ring on this control (see below).
+ * - filled → whether the input holds a value (no styling delta in this token
+ *            set beyond the typed-text colour, applied on the input directly).
+ * Only `disabled` and `error` are real props (handled below + in <Input>).
+ *
+ * Focus model — user-authorized exception to ADR-0010 #4 / ADR-0011:
+ * text inputs do NOT use the system `:focus-visible` outline ring. A keyboard
+ * user never triggers `:hover`, and (since hover no longer changes colour) the
+ * gray→accent border recolour on ANY focus is itself a clear, unambiguous
+ * WCAG 2.1 AA (2.4.7) focus indicator. Text inputs also hold focus while the
+ * user types, so `focus-within` (any focus, not just `:focus-visible`) is the
+ * correct trigger. The ring is intentionally omitted here; do NOT re-add it.
+ *
+ * Variant × size axes (both independent, 4 combinations):
+ * - variation `field`: bordered rounded box (`bg-input-background`, `border`,
+ *   `rounded-sm`, horizontal padding). Focus strengthens the border to
+ *   `input-border-accent` (hover does not change colour).
+ * - variation `line`: no box/background — a single bottom border only
+ *   (`border-b`), no horizontal padding. Focus strengthens the bottom line
+ *   (hover does not change colour).
+ *
+ * Sizes reuse the sibling sm/lg scale (Button = `h-8` / `h-10`):
+ * - lg: `h-10`, `gap-2`, `py-2`; field adds `px-3` (Figma field-lg = 12px).
+ * - sm: `h-8`, `gap-1`; line uses `py-2.5` (Figma line-sm = 10px), field uses
+ *   `py-2` (matches lg vertical rhythm inside the shorter box).
+ *
+ *   field-sm horizontal padding is DERIVED (Figma only draws field-lg): we use
+ *   `px-2` (8px = `spacing/2`), stepping down from field-lg's `px-3` (12px) and
+ *   matching field-sm's own `py-2` (8px) for a uniform `spacing/2` inset on all
+ *   sides. (This is a deliberate token-aligned choice; it does NOT match
+ *   Button's sm `px-2.5`.)
+ *
+ * Error is a prop, not an interaction state: it recolours the border/bottom
+ * line to the destructive accent and out-ranks focus (an errored field stays
+ * red when focused — it never flips to the purple accent), so its border
+ * utilities are declared with matching-but-later specificity via the `error`
+ * variant below (a plain destructive border for the resting state plus a
+ * `focus-within:` destructive form that out-ranks the variation's
+ * `focus-within:` accent by class order).
+ *
+ * `showBottomLine` (LINE ONLY) toggles the resting visibility of the bottom
+ * line without any layout shift. The `border-b` (1px width) is ALWAYS present;
+ * only the border COLOUR changes. When `false`, a compound variant recolours
+ * the resting bottom line to `border-transparent` (invisible), while focus
+ * (`focus-within:border-input-border-accent`) and error still win — so the
+ * line reappears on focus and on error. The compound is gated on `error:false`
+ * so an errored field's destructive rest border is NOT overridden by
+ * transparent (tailwind-merge last-wins would otherwise drop it). On the
+ * `field` variation `showBottomLine` has NO effect: the compound is scoped to
+ * `variation:line`, so `field`'s box border is untouched.
+ */
+declare const inputVariants: (props?: ({
+    variation?: "line" | "field" | null | undefined;
+    size?: "sm" | "lg" | null | undefined;
+    error?: boolean | null | undefined;
+    showBottomLine?: boolean | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type InputVariantsProps = VariantProps<typeof inputVariants>;
+
+interface InputProps extends Omit<React.ComponentProps<"input">, "size">, Omit<InputVariantsProps, "error"> {
+    /**
+     * Uppercase label shown above the field. When omitted the label row is not
+     * rendered. Always paired with the `<input>` via generated `id`/`htmlFor`
+     * (or your own `id`), so the control is properly named for assistive tech.
+     */
+    label?: React.ReactNode;
+    /**
+     * Marks the field as not required — renders an "Optional" tag on the right of
+     * the label row (Figma). Has no effect without a `label`.
+     */
+    optional?: boolean;
+    /**
+     * Helper text shown below the field, with a leading 16px icon (info by
+     * default, warning when `error`). Linked to the input via `aria-describedby`.
+     */
+    hint?: React.ReactNode;
+    /**
+     * Error state (a prop, not an interaction state): sets `aria-invalid`, turns
+     * the label, border/bottom-line, icons and hint to the destructive accent,
+     * and swaps the hint icon to a warning.
+     */
+    error?: boolean;
+    /** Leading adornment (usually a 16px Phosphor icon). Decorative — kept out of the a11y tree via `aria-hidden`. */
+    leftSlot?: React.ReactNode;
+    /**
+     * Trailing adornment. Usually a 16px Phosphor icon (decorative), but MAY be an
+     * interactive control (e.g. SearchBar's clear `<button>`). The wrapper is NOT
+     * `aria-hidden` (that would hide a focusable child from assistive tech — an
+     * ARIA violation); decorative bare `<svg>` icons are silent to AT on their own
+     * (no role, no accessible name), so they stay unannounced without it. An
+     * interactive control placed here must carry its own accessible name.
+     */
+    rightSlot?: React.ReactNode;
+    /** Class names for the outer wrapper (the vertical label/field/hint stack). */
+    wrapperClassName?: string;
+    /** Class names for the field row (border/background box), not the `<input>`. */
+    fieldClassName?: string;
+    /**
+     * Toggles the resting visibility of the bottom line on the **`line`**
+     * variation only. Default `true` (line visible at rest). When `false`, the
+     * bottom line is hidden at rest (recoloured to transparent) but still appears
+     * on focus (accent) and on error (destructive); the 1px `border-b` is kept in
+     * all cases so there is no layout shift — only the border colour changes.
+     *
+     * Has NO effect on the `field` variation (its box border is out of scope).
+     */
+    showBottomLine?: boolean;
+}
+/**
+ * Text input — the Figma `BaseInput` component (node 4973:6816), rendered as a
+ * real `<input>` wrapped in a field row with optional `leftSlot`/`rightSlot`
+ * icon slots, an optional uppercase label row, and an optional hint message.
+ *
+ * Follows the ADR-0010 form-control conventions: the native `<input>` is the
+ * single source of truth (uncontrolled `defaultValue` or controlled
+ * `value` + `onChange`); the component holds no React state. `ref` is a normal
+ * prop (React 19). Not `asChild` — the root must stay a void, platform-behaviour
+ * -bearing `<input>` (ADR-0010).
+ *
+ * Two independent axes (4 combinations): `variation` (`field` bordered box /
+ * `line` bottom-border-only) × `size` (`sm` / `lg`, reusing the sibling scale).
+ * The Figma "states" (hover/focus/filled) are runtime DOM states: hover is an
+ * I-beam cursor affordance only (no colour change), focus recolours the border
+ * via `focus-within:` (no system outline ring — a user-authorized exception to
+ * ADR-0010 #4 / ADR-0011, see `inputVariants.ts`), and filled shows the typed-
+ * text colour. Only `disabled` (native attribute) and `error` (prop) are real
+ * props.
+ */
+declare function Input({ className, fieldClassName, wrapperClassName, variation, size, error, showBottomLine, label, optional, hint, leftSlot, rightSlot, disabled, id: idProp, ref, ...props }: InputProps): React.JSX.Element;
+
+export { Input, type InputProps, type InputVariantsProps, inputVariants };