@forte-ui/react 1.0.0-alpha.1

package/dist/components/form/Form.d.ts

@@ -0,0 +1,76 @@
+import { FormProps as BaseFormProps } from '@base-ui/react/form';
+import * as React from "react";
+export type FormValidationMode = "onSubmit" | "onBlur" | "onChange";
+export interface FormProps<FormValues extends Record<string, unknown> = Record<string, unknown>> extends Omit<BaseFormProps<FormValues>, "className"> {
+    /**
+     * When the fields inside are validated. `validationMode` on an individual
+     * `Field.Root` takes precedence over this.
+     *
+     * - `onSubmit` — validate on submit, then re-validate on change. The default,
+     *   and the right one for most forms: it does not tell someone their email
+     *   is invalid while they are still on the third character of it.
+     * - `onBlur` — validate a field when it loses focus.
+     * - `onChange` — validate on every keystroke. Pair it with
+     *   `validationDebounceTime` on the field if `validate` is expensive.
+     * @default "onSubmit"
+     */
+    validationMode?: FormValidationMode;
+    /**
+     * Errors that came from somewhere other than the browser — a server
+     * response, a form action, a schema parse. Keys are the `name` of a
+     * `Field.Root`; values are a message or an array of messages, which the
+     * matching `Field.Error` then renders.
+     */
+    errors?: BaseFormProps<FormValues>["errors"];
+    /**
+     * Called on submit once every field passes validation, with the form's
+     * values collected by `name`. Base UI calls `preventDefault()` on the native
+     * event for you, so this replaces `onSubmit` rather than sitting beside it.
+     */
+    onFormSubmit?: BaseFormProps<FormValues>["onFormSubmit"];
+    /**
+     * A ref to imperative actions. `validate()` runs every field; pass a field
+     * name to run just one.
+     */
+    actionsRef?: BaseFormProps<FormValues>["actionsRef"];
+    /**
+     * Additional class name(s). Applied after the internal styles so consumer
+     * utilities (e.g. Tailwind) win without needing `!important`.
+     */
+    className?: string;
+    /**
+     * Ref to the underlying `<form>` element. Declared explicitly rather than
+     * through `forwardRef` because the component is generic — a `forwardRef`
+     * wrapper would erase `FormValues` and with it the typing of
+     * `onFormSubmit`.
+     */
+    ref?: React.Ref<HTMLFormElement>;
+}
+/**
+ * A `<form>` that collects the validation state of every `Field` inside it,
+ * built on Base UI's `Form` primitive.
+ *
+ * ```tsx
+ * <Form
+ *   onFormSubmit={async (values) => {
+ *     const result = await save(values);
+ *     if (!result.ok) setErrors(result.errors); // keys match Field.Root name
+ *   }}
+ *   errors={errors}
+ * >
+ *   <Field.Root name="email">…</Field.Root>
+ *   <Button type="submit">Save</Button>
+ * </Form>
+ * ```
+ *
+ * Two things it does that a bare `<form>` does not: it blocks submission while
+ * any field is invalid and moves focus to the first one that failed, and it
+ * routes the `errors` object back to the right `Field.Error` by `name` — which
+ * is why the `name` belongs on `Field.Root` rather than on the control.
+ *
+ * It lays out as a column with `--forte-form-gap` between children, since a form
+ * is nearly always a stack of fields. Set `display` through `className` for
+ * anything else; the gap is a knob rather than a hardcoded rule for exactly
+ * that reason.
+ */
+export declare function Form<FormValues extends Record<string, unknown> = Record<string, unknown>>({ className, ...props }: FormProps<FormValues>): React.JSX.Element;

package/dist/components/form/Form.js

@@ -0,0 +1,3 @@
+"use client";
+import { t as e } from "../../Form-DVPmW9XV.js";
+export { e as Form };

package/dist/components/form/index.d.ts

@@ -0,0 +1,2 @@
+export { Form } from './Form';
+export type { FormProps, FormValidationMode } from './Form';

package/dist/components/form/index.js

@@ -0,0 +1,2 @@
+import { t as e } from "../../Form-DVPmW9XV.js";
+export { e as Form };

package/dist/components/input/Input.d.ts

@@ -0,0 +1,67 @@
+import { Input as BaseInput } from '@base-ui/react/input';
+import * as React from "react";
+export type InputSize = "sm" | "md" | "lg";
+export type InputVariant = "outline" | "soft" | "ghost";
+type BaseInputProps = React.ComponentPropsWithoutRef<typeof BaseInput>;
+export interface InputProps extends Omit<BaseInputProps, "className" | "size"> {
+    /**
+     * Size of the control. Height, inline padding and font size all move
+     * together, and the actual numbers follow the ambient `data-forte-density`
+     * setting. Matches `Select.Trigger`'s scale, so an input and a select on the
+     * same row line up.
+     *
+     * This shadows the native `size` attribute (which sets a width in
+     * characters). Reach for `fullWidth`, a CSS `inline-size`, or
+     * `render={<input size={10} />}` if you need that instead.
+     * @default "md"
+     */
+    size?: InputSize;
+    /**
+     * How much visual weight the control carries. `outline` reads as a form
+     * control, `soft` as a filled field, `ghost` as an inline affordance.
+     * @default "outline"
+     */
+    variant?: InputVariant;
+    /**
+     * Stretch the input to fill the width of its container. Only needed outside
+     * a `Field.Root` — a field is a flex column, so an input inside one already
+     * stretches.
+     * @default false
+     */
+    fullWidth?: boolean;
+    /**
+     * Additional class name(s). Applied after the internal styles so consumer
+     * utilities (e.g. Tailwind) win without needing `!important`.
+     */
+    className?: string;
+}
+/**
+ * A text input built on Base UI's `Input` primitive.
+ *
+ * Base UI's `Input` *is* `Field.Control` — the same component under a friendlier
+ * name — so this needs no wiring to participate in a `Field`: put one inside a
+ * `Field.Root` and it picks up the label, the description, the error message,
+ * `name`, `disabled` and the validity attributes automatically. Outside a field
+ * it is an ordinary `<input>`, so `type`, `placeholder`, `required`, `pattern`
+ * and the rest all pass straight through.
+ *
+ * ```tsx
+ * <Field.Root name="email">
+ *   <Field.Label>Email</Field.Label>
+ *   <Input type="email" required placeholder="you@example.com" />
+ *   <Field.Error />
+ * </Field.Root>
+ * ```
+ *
+ * For a multi-line control reach for `Textarea`, which is the same
+ * `Field.Control` rendered as a `<textarea>` and adds the things a paragraph of
+ * text needs — row-based sizing, a growth ceiling, and `autoResize`.
+ *
+ * State is exposed on `data-*` (`data-disabled`, `data-invalid`, `data-valid`,
+ * `data-dirty`, `data-touched`, `data-filled`, `data-focused`) and every visual
+ * decision is a `--forte-input-*` custom property, so it can be re-skinned from
+ * plain CSS or targeted with Tailwind arbitrary variants
+ * (`data-[invalid]:...`) without wrapping.
+ */
+export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLElement>>;
+export {};

package/dist/components/input/Input.js

@@ -0,0 +1,3 @@
+"use client";
+import { t as e } from "../../Input-BgGWhO2q.js";
+export { e as Input };

package/dist/components/input/index.d.ts

@@ -0,0 +1,2 @@
+export { Input } from './Input';
+export type { InputProps, InputSize, InputVariant } from './Input';

package/dist/components/input/index.js

@@ -0,0 +1,2 @@
+import { t as e } from "../../Input-BgGWhO2q.js";
+export { e as Input };

package/dist/components/input-group/InputGroup.d.ts

@@ -0,0 +1,214 @@
+import { Input as BaseInput } from '@base-ui/react/input';
+import { Field as BaseField } from '@base-ui/react/field';
+import { ButtonProps } from '../button';
+import * as React from "react";
+export type InputGroupSize = "sm" | "md" | "lg";
+export type InputGroupVariant = "outline" | "soft" | "ghost";
+export type InputGroupAddonAlign = "inline-start" | "inline-end" | "block-start" | "block-end";
+export interface InputGroupRootProps extends Omit<React.ComponentPropsWithoutRef<"div">, "className"> {
+    /**
+     * Size of the group. Height, inline padding and font size move together for
+     * the control and every addon at once, and the numbers come from the same
+     * `--forte-control-*` tokens `Input` and `Select.Trigger` read — so a group
+     * and a plain input on one row are the same height at every
+     * `data-forte-density` setting.
+     * @default "md"
+     */
+    size?: InputGroupSize;
+    /**
+     * How much visual weight the group carries. `outline` reads as a form
+     * control, `soft` as a filled field, `ghost` as an inline affordance — the
+     * same three `Input` has, because to a reader the group *is* the input.
+     * @default "outline"
+     */
+    variant?: InputGroupVariant;
+    /**
+     * Stretch the group to fill the width of its container. Only needed outside
+     * a `Field.Root` — a field is a flex column, so a group inside one already
+     * stretches.
+     * @default false
+     */
+    fullWidth?: boolean;
+    /**
+     * Additional class name(s). Applied after the internal styles so consumer
+     * utilities (e.g. Tailwind) win without needing `!important`.
+     */
+    className?: string;
+}
+/**
+ * The field shell: a `<div>` that draws one control boundary — border,
+ * background, radius, sizes, variants — around a bare `<InputGroup.Input>` or
+ * `<InputGroup.Textarea>` and any number of `<InputGroup.Addon>`s, so icons,
+ * prefixes and buttons sit *inside* the field instead of bolted onto it.
+ *
+ * Focus lives on the control; the group rings for it via
+ * `.forte-focus-ring-within`, so the whole field lights up the way a plain
+ * `Input` does. Buttons inside addons ring themselves, and the group stands
+ * down while they do.
+ *
+ * The group is a caret region, not a button: clicking anywhere in it —
+ * a prefix, an icon, the padding — focuses the control, exactly as clicking
+ * the empty end of a plain input places the caret. Interactive children keep
+ * the gesture for themselves.
+ *
+ * There is no `disabled` prop here on purpose. Disabled, read-only and
+ * invalid all belong to the control (or the `Field.Root` above it), and the
+ * group watches them through `:has()` — one source of truth, no way for the
+ * shell and the control to disagree.
+ */
+export declare const InputGroupRoot: React.ForwardRefExoticComponent<InputGroupRootProps & React.RefAttributes<HTMLDivElement>>;
+type BaseInputProps = React.ComponentPropsWithoutRef<typeof BaseInput>;
+export interface InputGroupInputProps extends Omit<BaseInputProps, "className"> {
+    /**
+     * Additional class name(s). Applied after the internal styles so consumer
+     * utilities (e.g. Tailwind) win without needing `!important`.
+     */
+    className?: string;
+}
+/**
+ * The text control, rendered bare: the group owns the border, the background
+ * and the height, so this element is transparent and stretches to fill
+ * whatever the addons leave.
+ *
+ * Like `Input`, this is Base UI's `Input` — which *is* `Field.Control` — so a
+ * group inside a `Field.Root` picks up the label, the description, the error
+ * message, `name` and the validity attributes with no wiring, and the group's
+ * boundary recolours from the `data-invalid` this element carries.
+ */
+export declare const InputGroupInput: React.ForwardRefExoticComponent<InputGroupInputProps & React.RefAttributes<HTMLElement>>;
+type BaseControlProps = React.ComponentPropsWithoutRef<typeof BaseField.Control>;
+type TextareaElementProps = Omit<React.ComponentPropsWithoutRef<"textarea">, "className">;
+export interface InputGroupTextareaProps extends TextareaElementProps {
+    /**
+     * The number of rows the box is at its shortest. Sets the native `rows`
+     * attribute and the floor the control can never shrink below — including
+     * under `autoResize`.
+     * @default 3
+     */
+    rows?: number;
+    /**
+     * The number of rows the box may grow to before it starts scrolling
+     * instead. Only a ceiling: a textarea shorter than this is unaffected.
+     * Unset means no ceiling.
+     */
+    maxRows?: number;
+    /**
+     * Grow with the content as the user types, between `rows` and `maxRows` —
+     * the same behaviour, and the same `field-sizing` implementation with the
+     * same fallback, as `Textarea`'s `autoResize`.
+     * @default false
+     */
+    autoResize?: boolean;
+    /**
+     * Additional class name(s). Applied after the internal styles so consumer
+     * utilities (e.g. Tailwind) win without needing `!important`.
+     */
+    className?: string;
+    /** Replace the rendered element. Defaults to a `<textarea>`. */
+    render?: BaseControlProps["render"];
+    /** Callback fired when the value changes. Use when controlled. */
+    onValueChange?: BaseControlProps["onValueChange"];
+}
+/**
+ * The multi-line control, rendered bare the way `InputGroup.Input` is — the
+ * group draws the box. Height is counted in rows, exactly as `Textarea`
+ * counts it, and pairs naturally with `align="block-start"` /
+ * `align="block-end"` addons for a header row of actions or a footer row
+ * with a character count.
+ *
+ * There is no `resize` prop: the group's boundary is not this element's, so a
+ * native resize handle would sit visibly inside the field and drag a corner
+ * that is not the corner of anything. `autoResize` is the way a composer
+ * grows here.
+ */
+export declare const InputGroupTextarea: React.ForwardRefExoticComponent<InputGroupTextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
+export interface InputGroupAddonProps extends Omit<React.ComponentPropsWithoutRef<"div">, "className"> {
+    /**
+     * Which edge of the control the addon sits against. The `inline` pair
+     * shares the control's row; the `block` pair takes a full-width row of its
+     * own, above or below — the shape a textarea's toolbar or footer wants.
+     *
+     * Alignment is logical, so `inline-start` is the left edge in LTR and the
+     * right edge in RTL with no extra work.
+     * @default "inline-start"
+     */
+    align?: InputGroupAddonAlign;
+    /**
+     * Additional class name(s). Applied after the internal styles so consumer
+     * utilities (e.g. Tailwind) win without needing `!important`.
+     */
+    className?: string;
+}
+/**
+ * A slot inside the field for everything that is not the value: icons,
+ * prefixes and suffixes (wrap words in `<InputGroup.Text>`), buttons
+ * (`<InputGroup.Button>`), a `Spinner`, a keyboard hint.
+ *
+ * Placement is visual, driven by CSS `order`, so DOM order is free to follow
+ * focus order: put an addon that holds a button *after* the control in the
+ * source and the Tab sequence reads control-then-button even while the button
+ * draws at the start edge.
+ *
+ * Purely decorative content — icons above all — still needs
+ * `aria-hidden="true"`: the group cannot know which children carry meaning.
+ * Text that names or explains the control belongs to the field
+ * (`Field.Label`, `Field.Description`), not in here; a sighted-only prefix
+ * like a currency sign should be restated where assistive technology will
+ * meet it.
+ */
+export declare const InputGroupAddon: React.ForwardRefExoticComponent<InputGroupAddonProps & React.RefAttributes<HTMLDivElement>>;
+export interface InputGroupTextProps extends Omit<React.ComponentPropsWithoutRef<"span">, "className"> {
+    /**
+     * Additional class name(s). Applied after the internal styles so consumer
+     * utilities (e.g. Tailwind) win without needing `!important`.
+     */
+    className?: string;
+}
+/**
+ * Words inside an addon — a protocol, a unit, a domain, a count. A styled
+ * `<span>`: muted, unwrappable, sized by the group. Give it an `id` and point
+ * the control's `aria-describedby` at it when the text is information rather
+ * than decoration.
+ */
+export declare const InputGroupText: React.ForwardRefExoticComponent<InputGroupTextProps & React.RefAttributes<HTMLSpanElement>>;
+export interface InputGroupButtonProps extends ButtonProps {
+}
+/**
+ * A `Button` preset for life inside an addon: `ghost` + `neutral` so it reads
+ * as part of the field rather than a call to action, and sized by the group —
+ * the CSS caps it to the field's inner height, so at `sm` the visual box can
+ * dip below 24px. That is why this wrapper exists instead of a line of docs:
+ * it adds `.forte-target`, which floors the *hit* area at 24×24 without
+ * touching the visual one.
+ *
+ * It is otherwise exactly `Button` — every prop passes through, so
+ * `variant="solid"` turns the end addon into a primary action when the design
+ * calls for one. `iconOnly` still needs its `aria-label`.
+ */
+export declare const InputGroupButton: React.ForwardRefExoticComponent<InputGroupButtonProps & React.RefAttributes<HTMLButtonElement>>;
+/**
+ * A single field boundary around a text control and its trimmings.
+ *
+ * ```tsx
+ * <InputGroup.Root>
+ *   <InputGroup.Addon>
+ *     <SearchIcon aria-hidden="true" />
+ *   </InputGroup.Addon>
+ *   <InputGroup.Input placeholder="Search…" />
+ *   <InputGroup.Addon align="inline-end">
+ *     <InputGroup.Button iconOnly aria-label="Clear">
+ *       <XIcon aria-hidden="true" />
+ *     </InputGroup.Button>
+ *   </InputGroup.Addon>
+ * </InputGroup.Root>
+ * ```
+ */
+export declare const InputGroup: {
+    Root: React.ForwardRefExoticComponent<InputGroupRootProps & React.RefAttributes<HTMLDivElement>>;
+    Input: React.ForwardRefExoticComponent<InputGroupInputProps & React.RefAttributes<HTMLElement>>;
+    Textarea: React.ForwardRefExoticComponent<InputGroupTextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
+    Addon: React.ForwardRefExoticComponent<InputGroupAddonProps & React.RefAttributes<HTMLDivElement>>;
+    Text: React.ForwardRefExoticComponent<InputGroupTextProps & React.RefAttributes<HTMLSpanElement>>;
+    Button: React.ForwardRefExoticComponent<InputGroupButtonProps & React.RefAttributes<HTMLButtonElement>>;
+};
+export {};

package/dist/components/input-group/InputGroup.js

@@ -0,0 +1,3 @@
+"use client";
+import { a as e, i as t, n, o as r, r as i, s as a, t as o } from "../../InputGroup-DsZyDXNn.js";
+export { o as InputGroup, n as InputGroupAddon, i as InputGroupButton, t as InputGroupInput, e as InputGroupRoot, r as InputGroupText, a as InputGroupTextarea };

package/dist/components/input-group/index.d.ts

@@ -0,0 +1,2 @@
+export { InputGroup, InputGroupRoot, InputGroupInput, InputGroupTextarea, InputGroupAddon, InputGroupText, InputGroupButton, } from './InputGroup';
+export type { InputGroupSize, InputGroupVariant, InputGroupAddonAlign, InputGroupRootProps, InputGroupInputProps, InputGroupTextareaProps, InputGroupAddonProps, InputGroupTextProps, InputGroupButtonProps, } from './InputGroup';

package/dist/components/input-group/index.js

@@ -0,0 +1,2 @@
+import { a as e, i as t, n, o as r, r as i, s as a, t as o } from "../../InputGroup-DsZyDXNn.js";
+export { o as InputGroup, n as InputGroupAddon, i as InputGroupButton, t as InputGroupInput, e as InputGroupRoot, r as InputGroupText, a as InputGroupTextarea };