@fairgarden/design 0.1.0-0.canary.0

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

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

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

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

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,154 @@
+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: set its width to the expected answer (postcode `8ch`). */
+    style?: React.CSSProperties;
+    /**
+     * 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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"}

package/forms/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 '../../actions/button';
+import { dangerScale, useFieldInvalid } from '../field';
+import { Ground } from '../../foundations/ground';
+import { Icon } from '../../foundations/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/forms/input/Input.js.map

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

package/forms/input/index.d.ts

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

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

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

package/forms/input/index.js

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

package/forms/input/index.js.map

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