@fairgarden/design 0.1.0-alpha.0

package/components/Input/Input.js

@@ -0,0 +1,186 @@
+'use client';
+import * as React from 'react';
+import { Input as BaseInput } from '@base-ui/react/input';
+import { Field as BaseField } from '@base-ui/react/field';
+import { cva } from 'class-variance-authority';
+import { Button } from '../Button';
+import { dangerScale, useFieldInvalid } from '../Field';
+import { Ground } from '../Ground';
+import { Icon } from '../Icon';
+import { StatusGlyph } from '../../utils/StatusGlyph';
+import { assignRef } from '../../utils/assignRef';
+import { primaryScaleVariants, secondaryScaleVariants } from '../../utils/scales';
+import { useScopeAttributes } from '../../utils/scope';
+import styles from './input.module.css';
+/*
+ * Input (§10.3): single-line text, email, password, telephone and URL, plus
+ * multi-line text (the textarea). The box is the §10.1 field box.
+ *
+ * Implementation (CSS Modules + CVA)
+ * - Module: input.module.css; CVA function `input` (the textarea shares it).
+ * - Axes: `variant` → outline (the field box), underline (a lone bottom
+ *   rule); `labelInside` → labelInside; `multiline` → multiline; `plate` →
+ *   plate; `butted` → end → buttedEnd; `primary`, `secondary` → scales.
+ * - Compound variants: none. Excluded in the types: underline with
+ *   labelInside, plate or butted; multiline with labelInside or butted.
+ * - Defaults: variant outline, labelInside false, multiline false, plate
+ *   false, no butted; color axes none.
+ * - Color fallback: inherits the scope; while the Field is invalid its
+ *   danger scale arrives as `secondary` (§10.2) [D129]. The action cell's
+ *   Button takes the scope's action scale through its `solid` class.
+ * - States: `:hover` (not disabled) → edge --role-rule → --primary12 at the
+ *   same weight, the underline rule included [D140, D181]; `data-focused` →
+ *   the ring on any focus [D90]; `data-invalid` → the --border-size-2 error
+ *   edge; `data-disabled` → dotted edge, --role-muted; `readonly` → box
+ *   removed, bottom rule kept. Read on the control from the box.
+ * - Parts: base, icon, affix, control, label, count, actionSlot; `edge` /
+ *   `edgeLine` draw the dotted disabled edge; `ruled` prints blank lines.
+ * - Scope: `plate` → the box is a nested `white` Ground (a light island on
+ *   fixed grounds); otherwise none.
+ * - Container: none of its own. Inside a Form it reads the `form`
+ *   container: the butted cell is icon-only below 360 px (§5.10.2) [D163].
+ */
+export const input = cva(styles.base, {
+    variants: {
+        variant: {
+            outline: styles.outline,
+            underline: styles.underline,
+        },
+        labelInside: {
+            true: styles.labelInside,
+        },
+        multiline: {
+            true: styles.multiline,
+        },
+        plate: {
+            true: styles.plate,
+        },
+        butted: {
+            end: styles.buttedEnd,
+        },
+        // Color axes: never defaulted, so an omitted prop inherits the scope [D133].
+        primary: primaryScaleVariants,
+        secondary: secondaryScaleVariants,
+    },
+    defaultVariants: {
+        variant: 'outline',
+        labelInside: false,
+        multiline: false,
+        plate: false,
+    },
+});
+/**
+ * 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 const inputParts = {
+    control: styles.control,
+    icon: styles.icon,
+    affix: styles.affix,
+    actionSlot: styles.actionSlot,
+    actionIcon: styles.actionIcon,
+    actionText: styles.actionText,
+    edge: styles.edge,
+    edgeLine: styles.edgeLine,
+};
+/**
+ * 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 function Input(props) {
+    const { variant, plate, multiline, rows = 3, limit, reveal, revealLabels = ['Show', 'Hide'], labelInside, label, butted, action, icon, prefix, suffix, primary, secondary, className, style, type, placeholder, readOnly, value, defaultValue, onValueChange, ref, ...controlProps } = props;
+    const scope = useScopeAttributes();
+    const invalid = useFieldInvalid();
+    const resolvedSecondary = invalid ? dangerScale : secondary;
+    const controlRef = React.useRef(null);
+    const setControlRef = React.useCallback((node) => {
+        controlRef.current = node;
+        assignRef(ref, node);
+    }, [ref]);
+    // Count against a soft limit (textarea only).
+    const [length, setLength] = React.useState(() => String(value ?? defaultValue ?? '').length);
+    React.useEffect(() => {
+        if (value !== undefined)
+            setLength(String(value).length);
+    }, [value]);
+    const handleValueChange = (next, details) => {
+        if (limit !== undefined)
+            setLength(next.length);
+        onValueChange?.(next, details);
+    };
+    // Password reveal: a text toggle, never an eye icon alone.
+    const [revealed, setRevealed] = React.useState(false);
+    const canReveal = !multiline && reveal === true && type === 'password';
+    const resolvedType = canReveal && revealed ? 'text' : type;
+    const classes = input({
+        variant,
+        labelInside,
+        multiline,
+        plate,
+        butted,
+        // A plate's scales go to its Ground, so the white scope can resolve them.
+        primary: plate ? undefined : primary,
+        secondary: plate ? undefined : resolvedSecondary,
+        className,
+    });
+    // A press on the box's padding focuses the control, as a click on a label would.
+    const focusControl = (event) => {
+        if (event.target === event.currentTarget && controlRef.current) {
+            event.preventDefault();
+            controlRef.current.focus();
+        }
+    };
+    const over = limit !== undefined && length > limit;
+    const content = (React.createElement(React.Fragment, null,
+        labelInside ? React.createElement(BaseField.Label, { className: styles.label }, label) : null,
+        icon ? React.createElement(Icon, { name: icon, className: styles.icon }) : null,
+        prefix != null ? React.createElement("span", { className: styles.affix }, prefix) : null,
+        React.createElement(BaseInput, { ...controlProps, ref: setControlRef, type: multiline ? undefined : resolvedType, readOnly: readOnly, placeholder: readOnly ? undefined : placeholder, value: value, defaultValue: defaultValue, onValueChange: handleValueChange, className: styles.control, render: multiline ? React.createElement("textarea", { rows: rows }) : undefined }),
+        suffix != null ? React.createElement("span", { className: styles.affix }, suffix) : null,
+        canReveal ? (React.createElement(Button, { variant: "text", size: "sm", type: "button", disabled: controlProps.disabled, onClick: () => setRevealed((shown) => !shown) }, revealed ? revealLabels[1] : revealLabels[0])) : null,
+        multiline && limit !== undefined ? (React.createElement(CountPart, { length: length, limit: limit, over: over })) : null,
+        multiline ? (React.createElement("span", { className: styles.ruled, "aria-hidden": "true" },
+            React.createElement("span", null),
+            React.createElement("span", null),
+            React.createElement("span", null),
+            React.createElement("span", null))) : null,
+        React.createElement("svg", { className: styles.edge, "aria-hidden": "true", focusable: "false" }, variant === 'underline' ? (React.createElement("line", { className: styles.edgeLine, x1: "0", y1: "100%", x2: "100%", y2: "100%" })) : (React.createElement("rect", { className: styles.edgeLine, width: "100%", height: "100%" }))),
+        butted === 'end' && action ? React.createElement(ActionCell, { action: action }) : null));
+    if (plate) {
+        return (React.createElement(Ground, { preset: "white", kind: "face", primary: primary ?? undefined, secondary: resolvedSecondary ?? undefined, render: React.createElement("div", null), className: classes, style: style, onPointerDown: focusControl }, content));
+    }
+    return (React.createElement("div", { ...scope, className: classes, style: style, onPointerDown: focusControl }, content));
+}
+/** The count, and over its limit the danger ◆ with the danger scale on the part. */
+function CountPart({ length, limit, over }) {
+    const scope = useScopeAttributes();
+    const className = over
+        ? [styles.count, styles.countOver, secondaryScaleVariants[dangerScale]].join(' ')
+        : styles.count;
+    return (React.createElement("span", { className: className, ...(over ? scope : null) },
+        React.createElement(StatusGlyph, { status: "danger", className: styles.countGlyph }),
+        length,
+        "/",
+        limit));
+}
+/**
+ * The butted cell: the icon-only 64 × 48 px `solid` Button with
+ * `arrow_forward`, and a labelled `lg` twin that the module shows from
+ * `--md-n-above` when `labelled`.
+ */
+function ActionCell({ action }) {
+    const { label, labelled = false, busy = false, busyLabel = 'Sending…', type = 'submit', onClick, disabled, } = action;
+    const name = busy ? busyLabel : label;
+    const shared = {
+        type,
+        onClick,
+        disabled,
+        'aria-busy': busy || undefined,
+    };
+    return (React.createElement("span", { className: styles.actionSlot },
+        React.createElement(Button, { ...shared, variant: "solid", butted: "start", iconOnly: true, icon: busy ? 'more_horiz' : 'arrow_forward', className: styles.actionIcon }, name),
+        labelled ? (React.createElement(Button, { ...shared, variant: "solid", butted: "start", size: "lg", className: styles.actionText }, name)) : null));
+}
+//# sourceMappingURL=Input.js.map

package/components/Input/Input.js.map

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

package/components/Input/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Input';
+//# sourceMappingURL=index.d.ts.map

package/components/Input/index.d.ts.map

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

package/components/Input/index.js

@@ -0,0 +1,2 @@
+export * from './Input';
+//# sourceMappingURL=index.js.map

package/components/Input/index.js.map

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

package/components/Input/input.module.css

@@ -0,0 +1,394 @@
+/*
+ * Input (§10.3; the field box of §10.1). CVA function `input`; the textarea
+ * uses the same module and function. Parts: `base` (the box), `icon`,
+ * `affix` (prefix or suffix), `control` (the input or textarea), `label`
+ * (label-inside only), `count` (with `countGlyph`), `actionSlot` (holds the
+ * §9.2 Button; `actionIcon` / `actionText` pick its build by width), and
+ * `edge` / `edgeLine`, the SVG that draws the disabled `line-dotted-fine`
+ * edge as true dots [D36, D68]; `ruled` prints an empty textarea as ruled
+ * lines. Colors are role variables only; local custom properties carry
+ * dimensions only.
+ *
+ * States read Base UI's attributes on the control from the box
+ * (`.base:has(.control[data-focused])`), because the box is the part that
+ * draws the edge and the ring (§1.11.4).
+ */
+
+/* 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. */
+.control {
+  composes: typeBodyUi from '../../utils/type.module.css';
+}
+
+.affix {
+  composes: typeBodyUi typeMuted from '../../utils/type.module.css';
+}
+
+.label {
+  composes: typeFieldLabel from '../../utils/type.module.css';
+}
+
+.count {
+  composes: typeData from '../../utils/type.module.css';
+}
+
+.edgeLine {
+  composes: lineDottedFine from '../../utils/line.module.css';
+}
+
+@layer base {
+  .base {
+    /* Local dimensions. Variants and states publish these; `base` consumes them. */
+    --input-height: var(--size-px-8);
+    --input-edge: var(--border-size-1);
+    --input-radius: var(--radius-1);
+    --input-padding: var(--ds-space-12);
+
+    position: relative;
+    display: flex;
+    align-items: center;
+    gap: var(--size-px-2);
+    box-sizing: border-box;
+    inline-size: 100%;
+    min-inline-size: 0;
+    block-size: var(--input-height);
+    margin: 0;
+    /* A heavier state edge moves into the padding, so the content never shifts. */
+    padding-inline: calc(var(--input-padding) + var(--border-size-1) - var(--input-edge));
+    border: var(--input-edge) solid var(--role-rule);
+    border-radius: var(--input-radius);
+    background: none;
+    color: var(--primary12);
+    cursor: text;
+  }
+
+  /* The value: type-body-ui (never below 1rem, so iOS does not zoom) in the box's ink. */
+  .control {
+    flex: 1 1 auto;
+    align-self: stretch;
+    min-inline-size: 0;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    border-radius: 0;
+    background: none;
+    color: inherit;
+    text-overflow: ellipsis;
+    appearance: none;
+  }
+
+  /*
+   * The placeholder: --role-muted at full strength, ending in "…"; one
+   * weight lighter in dark scopes through --ds-muted-weight-step, floored
+   * by the type role [D154, D170].
+   */
+  .control::placeholder {
+    color: var(--role-muted);
+    font-weight: max(
+      var(--type-weight-floor, 400),
+      calc(var(--type-weight, 400) - var(--ds-muted-weight-step))
+    );
+  }
+
+  /* Leading icon: Material Symbols Rounded, inline tier, --size-px-2 to the value [D166]. */
+  .icon {
+    flex: none;
+    color: inherit;
+  }
+
+  /* Prefix or suffix unit, in --role-muted inside the box ("$ … USD"). */
+  .affix {
+    flex: none;
+    white-space: nowrap;
+  }
+
+  /* Label-inside: type-field-label, --size-px-2 from the top-left of the box. */
+  .label {
+    position: absolute;
+    inset-block-start: calc(var(--size-px-2) - var(--input-edge));
+    inset-inline-start: calc(var(--input-padding) + var(--border-size-1) - var(--input-edge));
+    color: inherit;
+    cursor: text;
+  }
+
+  /* Textarea count: type-data in --role-muted, at the box's end. */
+  .count {
+    display: inline-flex;
+    align-items: center;
+    align-self: flex-end;
+    gap: var(--size-px-1);
+    color: var(--role-muted);
+  }
+
+  .countGlyph {
+    display: none;
+    inline-size: var(--size-px-3);
+    block-size: var(--size-px-3);
+    overflow: visible;
+    color: var(--role-status);
+    fill: var(--role-status-fill);
+    stroke: var(--role-status-fill);
+    stroke-width: var(--ds-stroke-1-5);
+    stroke-linecap: round;
+    stroke-linejoin: round;
+  }
+
+  /*
+   * The butted action cell sits over the box's block and end edges, so its
+   * own edge is the seam and the box keeps its height (§10.3).
+   */
+  .actionSlot {
+    display: flex;
+    flex: none;
+    align-self: stretch;
+    margin-block: calc(-1 * var(--input-edge));
+    margin-inline-end: calc(-1 * var(--input-edge));
+  }
+
+  /* Disabled edge host: covers the box once the solid edge is removed. */
+  .edge {
+    display: none;
+    position: absolute;
+    inset-block-start: calc(var(--ds-dot-fine) / 2);
+    inset-inline-start: calc(var(--ds-dot-fine) / 2);
+    inline-size: calc(100% - var(--ds-dot-fine));
+    block-size: calc(100% - var(--ds-dot-fine));
+    overflow: visible;
+    pointer-events: none;
+  }
+
+  .edgeLine {
+    fill: none;
+    stroke: var(--role-disabled-edge);
+    rx: calc(var(--input-radius) - var(--ds-dot-fine) / 2);
+  }
+
+  /* Print-only ruled lines for an empty textarea. */
+  .ruled {
+    display: none;
+  }
+
+  @media (forced-colors: active) {
+    .edgeLine {
+      stroke: currentColor;
+    }
+
+    .countGlyph {
+      forced-color-adjust: none;
+      color: CanvasText;
+      fill: Canvas;
+      stroke: Canvas;
+    }
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    .base {
+      transition-property: border-color, outline-color;
+      transition-duration: var(--ds-duration-quick);
+      transition-timing-function: var(--ease-out-3);
+    }
+  }
+}
+
+@layer variants {
+  /* Boxed (default): the §10.1 field box. */
+  .outline {
+    border-style: solid;
+  }
+
+  /* Underline: no box, a lone --border-size-1 --role-rule bottom rule (settings rows, printable blanks). */
+  .underline {
+    --input-radius: var(--ds-radius-none);
+
+    padding-inline: 0;
+    border-width: 0 0 var(--input-edge);
+  }
+
+  /* Label-inside: the --ds-size-control-xl box; the value sits --size-px-2 from the bottom, larger than the label. */
+  .labelInside {
+    --input-height: var(--ds-size-control-xl);
+  }
+
+  .labelInside .control {
+    align-self: flex-end;
+    block-size: auto;
+    padding-block-end: calc(var(--size-px-2) - var(--input-edge));
+  }
+
+  /* Textarea: at least 3 lines at --ds-leading-compact; vertical resize only. */
+  .multiline {
+    --input-height: auto;
+
+    flex-direction: column;
+    align-items: stretch;
+    gap: var(--size-px-1);
+    padding-block: calc(var(--input-padding) + var(--border-size-1) - var(--input-edge));
+  }
+
+  .multiline .control {
+    min-block-size: 3lh;
+    line-height: var(--ds-leading-compact);
+    resize: vertical;
+  }
+
+  /*
+   * Plate: the box face is the nested white scope's --primary1 (patterned
+   * grounds only, §10.1). The box is also a Ground face, whose own classes
+   * share the base layer, so its display and edge are restated here.
+   */
+  .plate {
+    display: flex;
+    border: var(--input-edge) solid var(--role-rule);
+    background-color: var(--primary1);
+    color: var(--primary12);
+  }
+
+  /* Butted end: --ds-radius-none at the seam, --radius-1 outside; the cell fills the end. */
+  .buttedEnd {
+    padding-inline-end: 0;
+    border-start-end-radius: var(--ds-radius-none);
+    border-end-end-radius: var(--ds-radius-none);
+  }
+
+  /*
+   * The action's build by width (§10.3, §5.10.2): the icon-only 64 × 48 px
+   * cell at base; an authored label from --md-n-above; icon-only again below
+   * 360 px of Form width or below --xs-n-below [D73, D163]. Written here,
+   * above the Button's own `base`, because it only switches visibility.
+   */
+  .actionText {
+    display: none;
+  }
+
+  @media (min-width: 768px) {
+    .actionSlot:has(.actionText) .actionIcon {
+      display: none;
+    }
+
+    .actionText {
+      display: inline-flex;
+    }
+  }
+
+  @media (max-width: 359.98px) {
+    .actionSlot .actionIcon {
+      display: inline-flex;
+    }
+
+    .actionText {
+      display: none;
+    }
+  }
+
+  @container form (width < 360px) {
+    .actionSlot .actionIcon {
+      display: inline-flex;
+    }
+
+    .actionText {
+      display: none;
+    }
+  }
+}
+
+@layer states {
+  /*
+   * Hover (not disabled, invalid or read-only): the 1 px edge steps to
+   * --primary12 at the same weight, the underline variant's rule included,
+   * so layout never shifts [D140, D181].
+   */
+  .base:hover:has(.control:not([data-disabled], [data-invalid], [readonly])) {
+    border-color: var(--primary12);
+  }
+
+  /* Focus: the ring on any focus, pointer included, outside the box [D45, D90]. */
+  .base:has(.control[data-focused]),
+  .base:has(.control:focus) {
+    outline: var(--border-size-2) solid var(--primary12);
+    outline-offset: var(--border-size-2);
+  }
+
+  .control:focus-visible {
+    outline: none;
+  }
+
+  /* Error: a --border-size-2 edge in --role-status (the danger scale's step 11) [D141, D155]. */
+  .base:has(.control[data-invalid]) {
+    --input-edge: var(--border-size-2);
+
+    border-color: var(--role-status);
+  }
+
+  /*
+   * Disabled: the solid edge becomes the dotted edge (the SVG), the face
+   * drops, and every ink takes --role-muted; never dimmed [D16, D85].
+   */
+  .base:has(.control[data-disabled]) {
+    --input-edge: 0px;
+
+    border-style: none;
+    background: none;
+    color: var(--role-muted);
+    cursor: default;
+  }
+
+  .base:has(.control[data-disabled]) .edge {
+    display: block;
+  }
+
+  /* Read-only: the box is removed; a --border-size-1 --role-rule bottom rule remains. */
+  .base:has(.control[readonly]) {
+    --input-padding: 0px;
+    --input-radius: var(--ds-radius-none);
+
+    border-width: 0 0 var(--border-size-1);
+    border-color: var(--role-rule);
+    background: none;
+  }
+
+  /* Count over its limit: --primary12 with the danger ◆ (the part carries the danger scale). */
+  .countOver {
+    color: var(--primary12);
+  }
+
+  .countOver .countGlyph {
+    display: block;
+  }
+
+  /* Autofill: override the browser's tint so the field keeps its normal face (§10.3). */
+  .control:autofill {
+    -webkit-text-fill-color: var(--primary12);
+    caret-color: var(--primary12);
+    transition: background-color 0s 86400s;
+  }
+}
+
+@layer print {
+  @media print {
+    /* The value prints in a 0.75 pt frame; the action cell, count and reveal toggle are interaction only. */
+    .actionSlot,
+    .count {
+      display: none;
+    }
+
+    /* Placeholders do not print (§10.2); shrinking is structural, not a color. */
+    .control::placeholder {
+      font-size: 0;
+    }
+
+    /* An empty textarea prints as at least 4 ruled lines (§10.3). */
+    .multiline:has(.control:not([data-filled])) .control {
+      display: none;
+    }
+
+    .multiline:has(.control:not([data-filled])) .ruled {
+      display: grid;
+    }
+
+    .ruled > span {
+      block-size: var(--ds-ruled-pitch);
+      border-block-end: var(--border-size-1) solid var(--role-rule);
+    }
+  }
+}