@forte-ui/react 1.0.0-alpha.1

package/dist/components/toggle/Toggle.d.ts

@@ -0,0 +1,171 @@
+import { Toggle as BaseToggle } from '@base-ui/react/toggle';
+import { ToggleGroup as BaseToggleGroup } from '@base-ui/react/toggle-group';
+import * as React from "react";
+export type ToggleVariant = "solid" | "soft" | "outline";
+export type ToggleTone = "primary" | "secondary" | "danger" | "neutral";
+export type ToggleSize = "sm" | "md" | "lg";
+export type ToggleGroupOrientation = "horizontal" | "vertical";
+export interface ToggleProps<Value extends string = string> extends Omit<BaseToggle.Props<Value>, "className"> {
+    /**
+     * How loud the *pressed* state is. Unpressed is quiet in every variant —
+     * that is what makes a toggle read as off — so the variant only decides what
+     * "on" looks like: `solid` fills with the tone, `soft` tints with it,
+     * `outline` tints and keeps a border that is also drawn while unpressed.
+     *
+     * There is deliberately no `ghost`: every variant is already chromeless at
+     * rest, so a ghost toggle would differ from `soft` in nothing but its
+     * pressed fill — and dropping that fill would leave hue as the only cue
+     * separating on from off.
+     *
+     * Inherited from an enclosing `ToggleGroup` when left unset.
+     * @default "soft"
+     */
+    variant?: ToggleVariant;
+    /**
+     * Which semantic colour set the pressed state draws from. Combines freely
+     * with `variant`. Inherited from an enclosing `ToggleGroup` when left unset.
+     * @default "primary"
+     */
+    tone?: ToggleTone;
+    /**
+     * Size of the button. Matches `Button` step for step so the two line up in
+     * one toolbar. Inherited from an enclosing `ToggleGroup` when left unset.
+     * @default "md"
+     */
+    size?: ToggleSize;
+    /**
+     * Render as a square button sized for a single icon, holding the 24×24
+     * minimum hit target from WCAG SC 2.5.8. Always pair with `aria-label` —
+     * an icon is not an accessible name.
+     * @default false
+     */
+    iconOnly?: boolean;
+    /**
+     * A unique string identifying this toggle within a `ToggleGroup`. Required
+     * inside a group — the group's value is the list of pressed toggles' values,
+     * so a toggle without one can never appear in it. Ignored outside a group,
+     * where `pressed` / `defaultPressed` carry the state instead.
+     */
+    value?: Value;
+    /**
+     * Additional class name(s). Applied after the internal styles so consumer
+     * utilities (e.g. Tailwind) win without needing `!important`.
+     */
+    className?: string;
+    /**
+     * Ref to the button element. Declared as a prop rather than through
+     * `forwardRef` because the component is generic — a `forwardRef` wrapper
+     * would erase `Value` and with it the inference on `value`.
+     */
+    ref?: React.Ref<HTMLButtonElement>;
+}
+/**
+ * A two-state button that is either on or off, built on Base UI's unstyled
+ * `Toggle` primitive. Renders a `<button>` with `aria-pressed`.
+ *
+ * Reach for it when the button *is* the state — bold, mute, pin, favourite —
+ * and the effect is immediate and local. If the state is a setting the user
+ * confirms later, use [`Switch`](/components/switch) or
+ * [`Checkbox`](/components/checkbox), which carry a label and a form value; a
+ * toggle button has neither.
+ *
+ * State is exposed on `data-*` attributes (`data-pressed`, `data-disabled`)
+ * and every visual decision is a `--forte-toggle-*` custom property, so it can
+ * be re-skinned from plain CSS or targeted with Tailwind arbitrary variants
+ * (`data-[pressed]:...`) without wrapping.
+ */
+export declare function Toggle<Value extends string = string>({ variant, tone, size, iconOnly, className, ...props }: ToggleProps<Value>): React.JSX.Element;
+export interface ToggleGroupProps<Value extends string = string> extends Omit<BaseToggleGroup.Props<Value>, "className"> {
+    /**
+     * Default `variant` for every `Toggle` inside the group. A toggle's own
+     * `variant` still wins.
+     * @default "soft"
+     */
+    variant?: ToggleVariant;
+    /**
+     * Default `tone` for every `Toggle` inside the group. A toggle's own `tone`
+     * still wins.
+     * @default "primary"
+     */
+    tone?: ToggleTone;
+    /**
+     * Default `size` for every `Toggle` inside the group. A toggle's own `size`
+     * still wins.
+     * @default "md"
+     */
+    size?: ToggleSize;
+    /**
+     * Draw the group as a segmented control: one padded panel behind the whole
+     * set, with the toggles closed up inside it. Off, the group is just a row of
+     * separate buttons — right for a toolbar, where the toggles are neighbours
+     * rather than alternatives.
+     *
+     * Pair it with `variant="solid"` for the classic filled segmented control.
+     * @default false
+     */
+    segmented?: boolean;
+    /**
+     * Stretch the group to fill its container and share the space equally
+     * between the toggles. Mostly useful with `segmented`, where an evenly
+     * divided strip is the expected shape.
+     * @default false
+     */
+    fullWidth?: boolean;
+    /**
+     * Direction the toggles are laid out in, and the axis the arrow keys move
+     * along. Unlike `RadioGroup`'s, this is not layout-only: Base UI binds the
+     * arrows to the named axis, so a vertical group answers to Up and Down and
+     * leaves Left and Right to the page.
+     * @default "horizontal"
+     */
+    orientation?: ToggleGroupOrientation;
+    /**
+     * The values of every pressed toggle. Pairs with `onValueChange` for a
+     * controlled group; use `defaultValue` for an uncontrolled one. Always an
+     * array, including when `multiple` is false — it is then empty or holds one
+     * value.
+     */
+    value?: readonly Value[];
+    /**
+     * The values pressed on mount when uncontrolled.
+     */
+    defaultValue?: readonly Value[];
+    /**
+     * Allow several toggles to be pressed at once. With it off, pressing one
+     * unpresses the rest — but pressing the pressed one still turns it off, so
+     * "nothing selected" stays reachable in a way a radio group never allows.
+     * @default false
+     */
+    multiple?: boolean;
+    /**
+     * Disable every toggle in the group.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Additional class name(s). Applied after the internal styles so consumer
+     * utilities (e.g. Tailwind) win without needing `!important`.
+     */
+    className?: string;
+    /**
+     * Ref to the group element. Declared as a prop rather than through
+     * `forwardRef` because the component is generic — a `forwardRef` wrapper
+     * would erase `Value` and with it the typing of `onValueChange`.
+     */
+    ref?: React.Ref<HTMLDivElement>;
+}
+/**
+ * Shared state for a series of `Toggle`s, built on Base UI's `ToggleGroup`
+ * primitive. Renders a `<div role="group">`.
+ *
+ * Like `RadioGroup` this is a keyboard mode as well as a state container: the
+ * whole group is one tab stop and the arrow keys move between toggles. Unlike
+ * a radio group, moving does **not** select — arrowing past a toggle leaves it
+ * untouched, and Space or Enter is what presses it. That makes a toggle group
+ * safe for choices a radio group is not, including ones that fire a request.
+ *
+ * The group has no implicit accessible name. `role="group"` is not a labelable
+ * element, so give it `aria-label` or point `aria-labelledby` at your own
+ * heading.
+ */
+export declare function ToggleGroup<Value extends string = string>({ variant, tone, size, segmented, fullWidth, className, ...props }: ToggleGroupProps<Value>): React.JSX.Element;

package/dist/components/toggle/Toggle.js

@@ -0,0 +1,3 @@
+"use client";
+import { n as e, t } from "../../Toggle-BrhMnkF5.js";
+export { t as Toggle, e as ToggleGroup };

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

@@ -0,0 +1,2 @@
+export { Toggle, ToggleGroup } from './Toggle';
+export type { ToggleProps, ToggleVariant, ToggleTone, ToggleSize, ToggleGroupProps, ToggleGroupOrientation, } from './Toggle';

package/dist/components/toggle/index.js

@@ -0,0 +1,2 @@
+import { n as e, t } from "../../Toggle-BrhMnkF5.js";
+export { t as Toggle, e as ToggleGroup };

package/dist/components/toolbar/Toolbar.d.ts

@@ -0,0 +1,318 @@
+import { Toolbar as BaseToolbar } from '@base-ui/react/toolbar';
+import { ButtonSize, ButtonTone, ButtonVariant } from '../button';
+import { InputVariant } from '../input';
+import * as React from "react";
+export type ToolbarOrientation = "horizontal" | "vertical";
+export type ToolbarVariant = "plain" | "panel" | "outline";
+export type ToolbarSize = "sm" | "md" | "lg";
+export interface ToolbarRootProps extends Omit<BaseToolbar.Root.Props, "className"> {
+    /**
+     * How much chrome the bar itself carries. `plain` is a bare row with no
+     * surface — right when the toolbar sits on a panel that already has one.
+     * `panel` fills; `outline` draws a border on the page background.
+     *
+     * It says nothing about the controls inside: a `plain` bar can still hold
+     * solid buttons, and a `panel` bar quiet ones.
+     * @default "panel"
+     */
+    variant?: ToolbarVariant;
+    /**
+     * Size of the bar, and the default size of every `Toolbar.Button`,
+     * `Toolbar.Input` and `Toolbar.Link` inside it. An item's own `size` still
+     * wins.
+     * @default "md"
+     */
+    size?: ToolbarSize;
+    /**
+     * Direction the items are laid out in, and the axis the arrow keys move
+     * along. This is not layout only: Base UI binds the arrows to the named
+     * axis, so a vertical toolbar answers to Up and Down and leaves Left and
+     * Right to the page — and to any text input inside it.
+     * @default "horizontal"
+     */
+    orientation?: ToolbarOrientation;
+    /**
+     * Let the items wrap onto more than one line when the bar runs out of room,
+     * instead of overflowing it. Roving focus follows DOM order either way, so
+     * wrapping costs the keyboard nothing.
+     *
+     * Ignored while `orientation="vertical"`.
+     * @default false
+     */
+    wrap?: boolean;
+    /**
+     * Disable every item in the toolbar. Items stay focusable — see the note on
+     * `Toolbar.Button`'s `focusableWhenDisabled`.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Additional class name(s). Applied after the internal styles so consumer
+     * utilities (e.g. Tailwind) win without needing `!important`.
+     */
+    className?: string;
+}
+/**
+ * A strip of related controls that behaves as one tab stop, built on Base UI's
+ * `Toolbar` primitive. Renders a `<div role="toolbar">`.
+ *
+ * ```tsx
+ * <Toolbar.Root aria-label="Formatting">
+ *   <Toolbar.Button iconOnly aria-label="Undo">…</Toolbar.Button>
+ *   <Toolbar.Separator />
+ *   <Toolbar.Button>Publish</Toolbar.Button>
+ * </Toolbar.Root>
+ * ```
+ *
+ * The point of the component is the keyboard contract, not the row: Tab moves
+ * *past* the whole bar in one press and the arrow keys move between its
+ * controls. That is what stops a nine-button formatting bar from costing nine
+ * presses to skip.
+ *
+ * The bar has no accessible name of its own — `role="toolbar"` is not a
+ * labelable element — so give it `aria-label`, or point `aria-labelledby` at
+ * your own heading.
+ */
+export declare const ToolbarRoot: React.ForwardRefExoticComponent<Omit<ToolbarRootProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export interface ToolbarGroupProps extends Omit<BaseToolbar.Group.Props, "className"> {
+    /**
+     * Disable every item in the group. Composes with the root's `disabled` —
+     * either one being true disables the item.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Additional class name(s). Applied after the internal styles so consumer
+     * utilities (e.g. Tailwind) win without needing `!important`.
+     */
+    className?: string;
+}
+/**
+ * A cluster of related items inside a toolbar. Renders a `<div role="group">`.
+ *
+ * It is a *visual and semantic* grouping, not a keyboard one: the arrow keys
+ * still run the length of the whole bar, and a group is what tells a reader
+ * (and a screen reader) that these three buttons answer the same question. The
+ * gap inside a group is tighter than the gap between them, which is the whole
+ * of the visual difference.
+ *
+ * Like the root it takes no implicit name — give it `aria-label` when the
+ * grouping is not obvious from the items themselves.
+ */
+export declare const ToolbarGroup: React.ForwardRefExoticComponent<Omit<ToolbarGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export interface ToolbarButtonProps extends Omit<BaseToolbar.Button.Props, "className" | "render"> {
+    /**
+     * How much visual weight the button carries. Defaults to `ghost` rather than
+     * `Button`'s `solid`: a toolbar is a strip of peers, and a row of solid
+     * buttons has no hierarchy left to spend on the one that matters. Give the
+     * primary action `variant="solid"` explicitly.
+     *
+     * Ignored when `render` is set — the rendered component brings its own
+     * styling.
+     * @default "ghost"
+     */
+    variant?: ButtonVariant;
+    /**
+     * Which semantic colour set the button draws from. `neutral` by default, for
+     * the same reason `variant` is `ghost`.
+     *
+     * Ignored when `render` is set.
+     * @default "neutral"
+     */
+    tone?: ButtonTone;
+    /**
+     * Size of the button. Inherited from `Toolbar.Root` when left unset.
+     *
+     * Ignored when `render` is set.
+     * @default the root's `size`
+     */
+    size?: ButtonSize;
+    /**
+     * Render as a square button sized for a single icon, holding the 24×24
+     * minimum hit target from WCAG SC 2.5.8. Always pair with `aria-label` —
+     * an icon is not an accessible name.
+     *
+     * Ignored when `render` is set.
+     * @default false
+     */
+    iconOnly?: boolean;
+    /**
+     * Show a busy indicator and block interaction.
+     *
+     * Ignored when `render` is set.
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * Announced to assistive technology while `loading` is true.
+     *
+     * Ignored when `render` is set.
+     * @default "Loading"
+     */
+    loadingLabel?: string;
+    /**
+     * Keep the item focusable while it is disabled, rather than removing it from
+     * the bar's roving focus.
+     *
+     * `true` by default, and that default is the ARIA authoring practice for a
+     * toolbar rather than a stylistic choice: a disabled control that vanishes
+     * from the arrow-key order silently changes what every other key press does,
+     * and the user has no way to find out *why* an action they expected is
+     * missing. Focusable-and-disabled keeps it announced, with its disabled
+     * state, in the position they expect it.
+     * @default true
+     */
+    focusableWhenDisabled?: boolean;
+    /**
+     * Replaces the rendered button with another element or component. This is
+     * how a menu, a select, a dialog or a toggle joins the bar's keyboard
+     * order — `render={<Toggle iconOnly />}`,
+     * `render={<Select.Trigger />}`.
+     *
+     * The default `Button` styling steps aside when this is present, so the two
+     * never fight over the cascade; the rendered component keeps its own look.
+     */
+    render?: BaseToolbar.Button.Props["render"];
+    /**
+     * Additional class name(s). Applied after the internal styles so consumer
+     * utilities (e.g. Tailwind) win without needing `!important`.
+     */
+    className?: string;
+}
+/**
+ * A button that is part of the toolbar's roving focus. Renders a `<button>`.
+ *
+ * Left alone it is a [`Button`](/components/button) — every variant, tone and
+ * size, and the same `iconOnly` and `loading` behaviour — that happens to be
+ * reachable with the arrow keys. Given `render`, it is whatever you passed,
+ * still reachable with the arrow keys and nothing else changed.
+ */
+export declare const ToolbarButton: React.ForwardRefExoticComponent<Omit<ToolbarButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export interface ToolbarLinkProps extends Omit<BaseToolbar.Link.Props, "className"> {
+    /**
+     * Size of the link, matching the controls beside it. Inherited from
+     * `Toolbar.Root` when left unset.
+     * @default the root's `size`
+     */
+    size?: ToolbarSize;
+    /**
+     * Additional class name(s). Applied after the internal styles so consumer
+     * utilities (e.g. Tailwind) win without needing `!important`.
+     */
+    className?: string;
+}
+/**
+ * A link that is part of the toolbar's roving focus. Renders an `<a>`.
+ *
+ * It is drawn as a link and not as a button on purpose: it navigates, and the
+ * underline is the only cue that says so before it is clicked. A link cannot
+ * be disabled — HTML has no such state for `<a>` — so it always holds its
+ * place in the arrow-key order, even inside a `disabled` toolbar.
+ *
+ * Use `render` for a router link: `render={<Link href="/docs" />}`.
+ */
+export declare const ToolbarLink: React.ForwardRefExoticComponent<Omit<ToolbarLinkProps, "ref"> & React.RefAttributes<HTMLAnchorElement>>;
+export interface ToolbarInputProps extends Omit<BaseToolbar.Input.Props, "className" | "render" | "size"> {
+    /**
+     * Size of the control. Inherited from `Toolbar.Root` when left unset.
+     *
+     * This shadows the native `size` attribute, exactly as `Input`'s does.
+     *
+     * Ignored when `render` is set.
+     * @default the root's `size`
+     */
+    size?: ToolbarSize;
+    /**
+     * How much visual weight the control carries.
+     *
+     * Ignored when `render` is set.
+     * @default "outline"
+     */
+    variant?: InputVariant;
+    /**
+     * Stretch the input to fill the space left over in the bar.
+     *
+     * Ignored when `render` is set.
+     * @default false
+     */
+    fullWidth?: boolean;
+    /**
+     * Replaces the rendered input with another element or component. The default
+     * `Input` styling steps aside when this is present.
+     */
+    render?: BaseToolbar.Input.Props["render"];
+    /**
+     * Additional class name(s). Applied after the internal styles so consumer
+     * utilities (e.g. Tailwind) win without needing `!important`.
+     */
+    className?: string;
+}
+/**
+ * A text input that is part of the toolbar's roving focus. Renders an
+ * `<input>`.
+ *
+ * The arrow keys do the right thing without configuration: while the caret has
+ * somewhere left to go inside the field, Left and Right move the caret; at
+ * either end they hand the key back to the toolbar and focus moves on. Home
+ * and End are never taken — a toolbar does not bind them — so they jump the
+ * caret as they would in any field. That is Base UI's own handling, and it is
+ * the reason to reach for this rather than dropping a bare `Input` into the
+ * bar — a bare one is not in the roving order at all, so Tab is the only way
+ * past it.
+ */
+export declare const ToolbarInput: React.ForwardRefExoticComponent<Omit<ToolbarInputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+export interface ToolbarSeparatorProps extends Omit<BaseToolbar.Separator.Props, "className"> {
+    /**
+     * Which way the rule runs. Defaults to the *opposite* of the toolbar's
+     * orientation — a horizontal bar gets vertical rules — which is almost
+     * always what you want, so leave it unset.
+     */
+    orientation?: ToolbarOrientation;
+    /**
+     * Additional class name(s). Applied after the internal styles so consumer
+     * utilities (e.g. Tailwind) win without needing `!important`.
+     */
+    className?: string;
+}
+/**
+ * A rule between two clusters of toolbar items. Renders a
+ * `<div role="separator">`.
+ *
+ * It is a divider, not a stop: the arrow keys pass straight over it, since it
+ * is not a composite item. Reach for it between groups that answer different
+ * questions — formatting and alignment, say — and let the group gap carry the
+ * rest.
+ *
+ * This is a separate part from [`Separator`](/components/separator) rather than
+ * a use of it, for two reasons: Base UI derives the orientation from the
+ * toolbar's own, and a rule inside a bar insets from the bar's padding instead
+ * of spanning it edge to edge.
+ */
+export declare const ToolbarSeparator: React.ForwardRefExoticComponent<Omit<ToolbarSeparatorProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+/**
+ * A strip of related controls that behaves as one tab stop, built on Base UI's
+ * `Toolbar` primitive.
+ *
+ * ```tsx
+ * <Toolbar.Root aria-label="Formatting">
+ *   <ToggleGroup aria-label="Style">
+ *     <Toggle iconOnly value="bold" aria-label="Bold">…</Toggle>
+ *   </ToggleGroup>
+ *   <Toolbar.Separator />
+ *   <Toolbar.Button>Publish</Toolbar.Button>
+ * </Toolbar.Root>
+ * ```
+ *
+ * Tab moves past the whole bar in one press; the arrow keys move between its
+ * controls. Styling is driven by `data-*` attributes and `--forte-toolbar-*`
+ * custom properties, so it can be re-skinned from plain CSS or targeted with
+ * Tailwind arbitrary variants (`data-[variant=outline]:...`) without wrapping.
+ */
+export declare const Toolbar: {
+    Root: React.ForwardRefExoticComponent<Omit<ToolbarRootProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Group: React.ForwardRefExoticComponent<Omit<ToolbarGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Button: React.ForwardRefExoticComponent<Omit<ToolbarButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+    Link: React.ForwardRefExoticComponent<Omit<ToolbarLinkProps, "ref"> & React.RefAttributes<HTMLAnchorElement>>;
+    Input: React.ForwardRefExoticComponent<Omit<ToolbarInputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+    Separator: React.ForwardRefExoticComponent<Omit<ToolbarSeparatorProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+};

package/dist/components/toolbar/Toolbar.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 "../../Toolbar-OmOVCk3i.js";
+export { o as Toolbar, n as ToolbarButton, i as ToolbarGroup, t as ToolbarInput, e as ToolbarLink, r as ToolbarRoot, a as ToolbarSeparator };

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

@@ -0,0 +1,2 @@
+export { Toolbar } from './Toolbar';
+export type { ToolbarOrientation, ToolbarVariant, ToolbarSize, ToolbarRootProps, ToolbarGroupProps, ToolbarButtonProps, ToolbarLinkProps, ToolbarInputProps, ToolbarSeparatorProps, } from './Toolbar';

package/dist/components/toolbar/index.js

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