@forte-ui/react 1.0.0-alpha.1

package/dist/components/badge/Badge.d.ts

@@ -0,0 +1,117 @@
+import { useRender } from '@base-ui/react/use-render';
+import * as React from "react";
+export type BadgeVariant = "solid" | "soft" | "outline" | "ghost";
+export type BadgeTone = "primary" | "secondary" | "neutral" | "danger" | "success" | "warning" | "info";
+export type BadgeSize = "sm" | "md" | "lg";
+export type BadgeShape = "rounded" | "pill";
+export interface BadgeProps extends Omit<React.ComponentPropsWithoutRef<"span">, "className"> {
+    /**
+     * How much visual weight the badge carries.
+     *
+     * `soft` is the default because a badge annotates something else on the
+     * page and should not outrank it — a row of solid chips down a table column
+     * reads as the content rather than as labels on it. Reach for `solid` when
+     * the badge IS the message, which is usually a count or a single alarm.
+     * @default "soft"
+     */
+    variant?: BadgeVariant;
+    /**
+     * Which semantic colour set the badge draws from. Combines freely with
+     * `variant` — every pairing is a complete colour set, so
+     * `tone="success" variant="outline"` needs nothing added to work.
+     *
+     * The four status tones are the reason this component has seven rather than
+     * the four `Button` has: a badge is where an app says "Active", "Pending",
+     * "Failed", and an app that has to reach for a hex value to say it has lost
+     * theming, dark mode and forced-colors support in one line.
+     * @default "primary"
+     */
+    tone?: BadgeTone;
+    /**
+     * Size of the badge. The three differ mostly in how much air surrounds the
+     * label: the type scale bottoms out at `--forte-font-size-1`, so `sm` and
+     * `md` share it and `lg` steps up.
+     *
+     * Unlike a control, a badge is not resized by `data-forte-density` — its
+     * height comes from the text it sits beside, which is the thing it should
+     * track.
+     * @default "md"
+     */
+    size?: BadgeSize;
+    /**
+     * Corner treatment. `rounded` follows `--forte-radius-control`, so it moves
+     * with a `data-forte-radius` preset like everything else; `pill` is fully
+     * round, which is the conventional shape for a count.
+     * @default "rounded"
+     */
+    shape?: BadgeShape;
+    /**
+     * Draw a small filled dot before the label — the status-chip convention.
+     *
+     * It is decorative and `aria-hidden`: the status is in the words. A dot
+     * that carried meaning on its own would be colour as the sole cue, which is
+     * the failure (SC 1.4.1) this component is otherwise careful to avoid.
+     * @default false
+     */
+    dot?: boolean;
+    /**
+     * The number this badge is showing — an unread tally, a pending count.
+     *
+     * Passing it does two separate things. It renders the number (capped by
+     * `max`), and it switches the badge to count geometry: figures stop changing
+     * width as the tally ticks over, the inline padding tightens, and the badge
+     * takes a minimum inline size equal to its own height. That last pair is
+     * what makes a single digit a circle rather than a slot — with a word's
+     * padding, `1` already measures wider than the badge is tall.
+     *
+     * `children` still win over the rendered number, and that is the hook for
+     * anything `max` cannot express: `<Badge count={1240}>1.2k</Badge>` keeps
+     * your formatting and the geometry both.
+     */
+    count?: number;
+    /**
+     * The largest number `count` will print. Above it the badge shows
+     * `${max}+` instead, so a tally cannot widen the chip without limit.
+     *
+     * 99 matches what a notification badge conventionally does. Pass
+     * `Infinity` to print the number whatever it reaches.
+     * @default 99
+     */
+    max?: number;
+    /**
+     * Replaces the rendered `<span>` with another element or component.
+     * `render={<a href="/releases" />}` or `render={<Link href="/inbox" />}` is
+     * how a badge becomes navigable.
+     *
+     * There is no `interactive` prop to go with it: the styles read the element
+     * itself, so an `<a href>` or a `<button>` picks up the pointer cursor, the
+     * hover wash and a 24×24 hit target on its own, and a plain `<span>` never
+     * pretends to be clickable.
+     */
+    render?: useRender.RenderProp;
+    /**
+     * Additional class name(s). Applied after the internal styles so consumer
+     * utilities (e.g. Tailwind) win without needing `!important`.
+     */
+    className?: string;
+}
+/**
+ * A small label for status, counts and categories.
+ *
+ * Base UI has no badge primitive — there is no interaction to model and no
+ * state machine to get right — so this is built on `useRender` alone, which is
+ * what gives it the `render` prop the rest of the library has.
+ *
+ * ```tsx
+ * <Badge>Beta</Badge>
+ * <Badge tone="success" dot>Active</Badge>
+ * <Badge variant="solid" tone="danger" shape="pill" count={12} />
+ * <Badge variant="solid" tone="danger" shape="pill" count={480} />  // 99+
+ * <Badge tone="neutral" variant="outline" render={<a href="/tags/css" />}>css</Badge>
+ * ```
+ *
+ * Styling is driven by `data-*` attributes and `--forte-badge-*` custom
+ * properties, so it can be re-skinned from plain CSS or targeted with Tailwind
+ * arbitrary variants (`data-[tone=success]:...`) without wrapping.
+ */
+export declare const Badge: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLSpanElement>>;

package/dist/components/badge/Badge.js

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

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

@@ -0,0 +1,2 @@
+export { Badge } from './Badge';
+export type { BadgeProps, BadgeVariant, BadgeTone, BadgeSize, BadgeShape, } from './Badge';

package/dist/components/badge/index.js

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

package/dist/components/breadcrumb/Breadcrumb.d.ts

@@ -0,0 +1,244 @@
+import { useRender } from '@base-ui/react/use-render';
+import * as React from "react";
+export type BreadcrumbSize = "sm" | "md" | "lg";
+export type BreadcrumbVariant = "plain" | "chip";
+export type BreadcrumbOverflow = "wrap" | "scroll";
+export interface BreadcrumbRootProps extends Omit<React.ComponentPropsWithoutRef<"nav">, "className"> {
+    /**
+     * Text size, crumb padding and separator size for the whole trail.
+     * @default "md"
+     */
+    size?: BreadcrumbSize;
+    /**
+     * How loud the crumbs are. `"plain"` is text that underlines on hover.
+     * `"chip"` gives every crumb a rounded fill — a hover tint on the links and
+     * a resting one on the current page, which is what you want when the trail
+     * sits on a busy toolbar rather than above a document.
+     * @default "plain"
+     */
+    variant?: BreadcrumbVariant;
+    /**
+     * What to draw between crumbs. Any node — a `/`, a `·`, an icon. Set once
+     * here and every gap in the trail uses it; a `Breadcrumb.Separator` written
+     * by hand with its own children still wins locally.
+     * @default a chevron
+     */
+    separator?: React.ReactNode;
+    /**
+     * What a trail too long for its container does. `"wrap"` lets it run onto a
+     * second line. `"scroll"` keeps it on one line in a horizontal scroller
+     * that starts scrolled to the current page — the end of the trail is the
+     * part a reader needs, and it is the part that falls off the edge.
+     * @default "wrap"
+     */
+    overflow?: BreadcrumbOverflow;
+    /**
+     * Replaces the rendered `<nav>` with another element or component — pass
+     * `render={<div />}` when the trail sits inside a `<nav>` landmark you
+     * already own, so the page does not grow a second one.
+     */
+    render?: useRender.RenderProp;
+    /**
+     * Additional class name(s). Applied after the internal styles so consumer
+     * utilities (e.g. Tailwind) win without needing `!important`.
+     */
+    className?: string;
+}
+/**
+ * The trail container. Renders a `<nav aria-label="Breadcrumb">`.
+ *
+ * ```tsx
+ * <Breadcrumb.Root>
+ *   <Breadcrumb.List>
+ *     <Breadcrumb.Item>
+ *       <Breadcrumb.Link href="/">Home</Breadcrumb.Link>
+ *     </Breadcrumb.Item>
+ *     <Breadcrumb.Item>
+ *       <Breadcrumb.Page>Invoices</Breadcrumb.Page>
+ *     </Breadcrumb.Item>
+ *   </Breadcrumb.List>
+ * </Breadcrumb.Root>
+ * ```
+ *
+ * The label is what tells this landmark apart from the page's other
+ * navigation landmarks in a screen reader's landmark list, so it is set by
+ * default rather than left to be forgotten. Override it if the page carries
+ * more than one trail.
+ */
+export declare const BreadcrumbRoot: React.ForwardRefExoticComponent<BreadcrumbRootProps & React.RefAttributes<HTMLElement>>;
+export interface BreadcrumbListProps extends Omit<React.ComponentPropsWithoutRef<"ol">, "className"> {
+    /**
+     * Insert a `Breadcrumb.Separator` between every pair of children. On by
+     * default — hand-interleaving separators is the step everyone forgets, and
+     * a trail is the one place where the count is always "one fewer than the
+     * items". Turning it off leaves the children exactly as written.
+     *
+     * Writing even one `Breadcrumb.Separator` by hand also turns it off for
+     * that list, so the two styles never double up.
+     * @default true
+     */
+    separators?: boolean;
+    /**
+     * Additional class name(s). Applied after the internal styles so consumer
+     * utilities (e.g. Tailwind) win without needing `!important`.
+     */
+    className?: string;
+}
+/**
+ * The `<ol>` holding the crumbs. An ordered list on purpose: the trail's
+ * meaning *is* the order, and a screen reader announcing "list, 4 items" tells
+ * the reader how deep they are before they walk it.
+ *
+ * It interleaves the separators itself. `React.Children.toArray` flattens the
+ * array a `.map()` produces, so a generated trail gets them too — and `null`
+ * children are dropped before the count is taken, which is what keeps a
+ * conditionally rendered crumb from leaving a separator pointing at nothing.
+ *
+ * Under the root's `overflow="scroll"` it also wraps itself in a
+ * `ScrollArea` — see the `scroller` note below.
+ */
+export declare const BreadcrumbList: React.ForwardRefExoticComponent<BreadcrumbListProps & React.RefAttributes<HTMLOListElement>>;
+export interface BreadcrumbItemProps extends Omit<React.ComponentPropsWithoutRef<"li">, "className"> {
+    /**
+     * Additional class name(s). Applied after the internal styles so consumer
+     * utilities (e.g. Tailwind) win without needing `!important`.
+     */
+    className?: string;
+}
+/**
+ * One crumb's `<li>`. Structural — the `Link`, `Page` or `Ellipsis` inside it
+ * is what the reader sees.
+ */
+export declare const BreadcrumbItem: React.ForwardRefExoticComponent<BreadcrumbItemProps & React.RefAttributes<HTMLLIElement>>;
+export interface BreadcrumbLinkProps extends Omit<React.ComponentPropsWithoutRef<"a">, "className"> {
+    /**
+     * Replaces the rendered `<a>` with another element or component —
+     * `render={<Link href="/invoices" />}` is how a framework's router link goes
+     * in without losing the crumb's styling and states.
+     */
+    render?: useRender.RenderProp;
+    /**
+     * Additional class name(s). Applied after the internal styles so consumer
+     * utilities (e.g. Tailwind) win without needing `!important`.
+     */
+    className?: string;
+}
+/**
+ * An ancestor crumb — a real `<a>`, so it opens in a new tab, shows its target
+ * in the status bar and is found by every keyboard the platform ships.
+ *
+ * Children lay out on a flex row, so an icon in front of the label needs no
+ * wrapper and rides `currentColor` through rest and hover.
+ */
+export declare const BreadcrumbLink: React.ForwardRefExoticComponent<BreadcrumbLinkProps & React.RefAttributes<HTMLAnchorElement>>;
+export interface BreadcrumbPageProps extends Omit<React.ComponentPropsWithoutRef<"span">, "className"> {
+    /**
+     * Replaces the rendered `<span>` with another element or component.
+     */
+    render?: useRender.RenderProp;
+    /**
+     * Additional class name(s). Applied after the internal styles so consumer
+     * utilities (e.g. Tailwind) win without needing `!important`.
+     */
+    className?: string;
+}
+/**
+ * The last crumb: where the reader is. Renders a `<span aria-current="page">`.
+ *
+ * Deliberately not a link. A link to the page you are already on is a control
+ * that does nothing, and the trail's whole job at this position is to say
+ * "here" — `aria-current` says it in the accessibility tree, and the weight
+ * and colour change say it on screen, so the cue is never colour alone.
+ */
+export declare const BreadcrumbPage: React.ForwardRefExoticComponent<BreadcrumbPageProps & React.RefAttributes<HTMLSpanElement>>;
+export interface BreadcrumbSeparatorProps extends Omit<React.ComponentPropsWithoutRef<"li">, "className"> {
+    /**
+     * Additional class name(s). Applied after the internal styles so consumer
+     * utilities (e.g. Tailwind) win without needing `!important`.
+     */
+    className?: string;
+}
+/**
+ * The mark between two crumbs. `Breadcrumb.List` inserts these for you — write
+ * one by hand only to give a single gap its own content, which also switches
+ * that list to fully manual so the two never double up.
+ *
+ * Renders an `<li role="presentation" aria-hidden="true">`: it is punctuation,
+ * and a screen reader reading "greater than" between every crumb is noise. The
+ * `role` also keeps it out of the list's item count, so "list, 4 items" stays
+ * the number of crumbs.
+ */
+export declare const BreadcrumbSeparator: React.ForwardRefExoticComponent<BreadcrumbSeparatorProps & React.RefAttributes<HTMLLIElement>>;
+export interface BreadcrumbEllipsisProps extends Omit<React.ComponentPropsWithoutRef<"span">, "className"> {
+    /**
+     * The accessible name, in a visually hidden span. Three dots have no text of
+     * their own, so without this the control is announced as "button" and
+     * nothing else. Pass `""` in the rare case where `children` is already text
+     * that names it, so the name is not said twice.
+     * @default "More"
+     */
+    label?: string;
+    /**
+     * Replaces the rendered `<span>` with another element or component. Pass
+     * `render={<Menu.Trigger />}` to make the collapsed crumbs reachable — see
+     * the collapsed example in the docs.
+     */
+    render?: useRender.RenderProp;
+    /**
+     * Additional class name(s). Applied after the internal styles so consumer
+     * utilities (e.g. Tailwind) win without needing `!important`.
+     */
+    className?: string;
+}
+/**
+ * Stands in for the crumbs in the middle of a deep trail. Renders a `<span>`,
+ * which is inert — a trail is not the place to hide a page behind something
+ * unclickable, so reach for this WITH a menu:
+ *
+ * ```tsx
+ * <Menu.Root>
+ *   <Breadcrumb.Ellipsis render={<Menu.Trigger />} label="Show 3 more" />
+ *   <Menu.Popup>…</Menu.Popup>
+ * </Menu.Root>
+ * ```
+ *
+ * The stylesheet keys its cursor off the rendered element, so the span stays
+ * `default` and a `<button>` becomes `pointer` without a prop to pass.
+ */
+export declare const BreadcrumbEllipsis: React.ForwardRefExoticComponent<BreadcrumbEllipsisProps & React.RefAttributes<HTMLSpanElement>>;
+/**
+ * The trail of ancestors above the current page: `Home › Settings › Billing`.
+ *
+ * ```tsx
+ * <Breadcrumb.Root>
+ *   <Breadcrumb.List>
+ *     <Breadcrumb.Item>
+ *       <Breadcrumb.Link href="/">Home</Breadcrumb.Link>
+ *     </Breadcrumb.Item>
+ *     <Breadcrumb.Item>
+ *       <Breadcrumb.Link href="/settings">Settings</Breadcrumb.Link>
+ *     </Breadcrumb.Item>
+ *     <Breadcrumb.Item>
+ *       <Breadcrumb.Page>Billing</Breadcrumb.Page>
+ *     </Breadcrumb.Item>
+ *   </Breadcrumb.List>
+ * </Breadcrumb.Root>
+ * ```
+ *
+ * Separators are inserted by `List`, not written by hand. The last crumb is a
+ * `Page`, not a `Link` — a link to where you already are is a control that
+ * does nothing.
+ *
+ * Styling is driven entirely by `data-*` attributes and `--forte-breadcrumb-*`
+ * custom properties, so it can be re-skinned from plain CSS or targeted with
+ * Tailwind arbitrary variants (`data-[variant=chip]:...`) without wrapping.
+ */
+export declare const Breadcrumb: {
+    Root: React.ForwardRefExoticComponent<BreadcrumbRootProps & React.RefAttributes<HTMLElement>>;
+    List: React.ForwardRefExoticComponent<BreadcrumbListProps & React.RefAttributes<HTMLOListElement>>;
+    Item: React.ForwardRefExoticComponent<BreadcrumbItemProps & React.RefAttributes<HTMLLIElement>>;
+    Link: React.ForwardRefExoticComponent<BreadcrumbLinkProps & React.RefAttributes<HTMLAnchorElement>>;
+    Page: React.ForwardRefExoticComponent<BreadcrumbPageProps & React.RefAttributes<HTMLSpanElement>>;
+    Separator: React.ForwardRefExoticComponent<BreadcrumbSeparatorProps & React.RefAttributes<HTMLLIElement>>;
+    Ellipsis: React.ForwardRefExoticComponent<BreadcrumbEllipsisProps & React.RefAttributes<HTMLSpanElement>>;
+};

package/dist/components/breadcrumb/Breadcrumb.js

@@ -0,0 +1,3 @@
+"use client";
+import { a as e, c as t, i as n, n as r, o as i, r as a, s as o, t as s } from "../../Breadcrumb-Cq7tFtMX.js";
+export { s as Breadcrumb, r as BreadcrumbEllipsis, a as BreadcrumbItem, n as BreadcrumbLink, e as BreadcrumbList, i as BreadcrumbPage, o as BreadcrumbRoot, t as BreadcrumbSeparator };

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

@@ -0,0 +1,2 @@
+export { Breadcrumb } from './Breadcrumb';
+export type { BreadcrumbSize, BreadcrumbVariant, BreadcrumbOverflow, BreadcrumbRootProps, BreadcrumbListProps, BreadcrumbItemProps, BreadcrumbLinkProps, BreadcrumbPageProps, BreadcrumbSeparatorProps, BreadcrumbEllipsisProps, } from './Breadcrumb';

package/dist/components/breadcrumb/index.js

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

package/dist/components/button/Button.d.ts

@@ -0,0 +1,73 @@
+import { Button as BaseButton } from '@base-ui/react/button';
+import * as React from "react";
+export type ButtonVariant = "solid" | "soft" | "outline" | "ghost";
+export type ButtonTone = "primary" | "secondary" | "danger" | "neutral";
+export type ButtonSize = "sm" | "md" | "lg";
+type BaseButtonProps = React.ComponentPropsWithoutRef<typeof BaseButton>;
+export interface ButtonProps extends Omit<BaseButtonProps, "className"> {
+    /**
+     * How much visual weight the button carries.
+     * @default "solid"
+     */
+    variant?: ButtonVariant;
+    /**
+     * Which semantic colour set the button draws from. Combines freely with
+     * `variant` — `tone="danger" variant="outline"` is a low-emphasis
+     * destructive action.
+     * @default "primary"
+     */
+    tone?: ButtonTone;
+    /**
+     * Size of the button. Actual dimensions also follow the ambient
+     * `data-forte-density` setting.
+     * @default "md"
+     */
+    size?: ButtonSize;
+    /**
+     * Stretch the button to fill the width of its container.
+     * @default false
+     */
+    fullWidth?: boolean;
+    /**
+     * Render as a square button sized for a single icon. Enforces the 24px
+     * minimum hit target from WCAG SC 2.5.8. Always pair with `aria-label`.
+     * @default false
+     */
+    iconOnly?: boolean;
+    /**
+     * Show a busy indicator and block interaction. The label keeps its space so
+     * the button cannot resize mid-interaction.
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * Announced to assistive technology while `loading` is true. Without it, a
+     * screen reader user gets no signal that anything is happening.
+     * @default "Loading"
+     */
+    loadingLabel?: string;
+    /**
+     * Keep the button focusable while it is disabled. A native `disabled`
+     * button is blurred by the browser, which drops focus to `<body>` and loses
+     * the user's place in the tab order — and takes `aria-busy` and
+     * `loadingLabel` out of earshot with it. Left unset, this turns itself on
+     * for the duration of `loading` so the busy state is actually announced;
+     * pass it explicitly to override.
+     * @default true while `loading`, otherwise false
+     */
+    focusableWhenDisabled?: boolean;
+    /**
+     * Additional class name(s). Applied after the internal styles so consumer
+     * utilities (e.g. Tailwind) win without needing `!important`.
+     */
+    className?: string;
+}
+/**
+ * A button built on Base UI's unstyled `Button` primitive.
+ *
+ * Styling is driven entirely by `data-*` attributes and `--forte-button-*`
+ * custom properties, so it can be re-skinned from plain CSS or targeted with
+ * Tailwind arbitrary variants (`data-[variant=solid]:...`) without wrapping.
+ */
+export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export {};

package/dist/components/button/Button.js

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

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

@@ -0,0 +1,2 @@
+export { Button } from './Button';
+export type { ButtonProps, ButtonVariant, ButtonTone, ButtonSize } from './Button';

package/dist/components/button/index.js

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

package/dist/components/button-group/ButtonGroup.d.ts

@@ -0,0 +1,113 @@
+import { Separator as BaseSeparator } from '@base-ui/react/separator';
+import { useRender } from '@base-ui/react/use-render';
+import * as React from "react";
+export type ButtonGroupOrientation = "horizontal" | "vertical";
+type BaseSeparatorProps = React.ComponentPropsWithoutRef<typeof BaseSeparator>;
+export interface ButtonGroupRootProps extends Omit<React.ComponentPropsWithoutRef<"div">, "className"> {
+    /**
+     * Which way the controls fuse — a row or a column. Layout only: unlike
+     * [`Toolbar`](/components/toolbar), a button group adds no keyboard
+     * behaviour, so there is no arrow-key axis to move.
+     * @default "horizontal"
+     */
+    orientation?: ButtonGroupOrientation;
+    /**
+     * Replaces the rendered `<div>` with another element or component.
+     */
+    render?: useRender.RenderProp;
+    /**
+     * Additional class name(s). Applied after the internal styles so consumer
+     * utilities (e.g. Tailwind) win without needing `!important`.
+     */
+    className?: string;
+}
+/**
+ * The group container. Renders a `<div role="group">`.
+ *
+ * ```tsx
+ * <ButtonGroup.Root aria-label="Message actions">
+ *   <Button variant="outline" tone="neutral">Archive</Button>
+ *   <Button variant="outline" tone="neutral">Report</Button>
+ *   <Button variant="outline" tone="neutral">Snooze</Button>
+ * </ButtonGroup.Root>
+ * ```
+ *
+ * Direct children are fused: inner corners squared, one hairline between
+ * neighbours, outer corners kept. The children stay ordinary components with
+ * their own props — the group never reaches into them beyond that edge.
+ *
+ * `role="group"` has no name of its own, so give the group `aria-label` (or
+ * point `aria-labelledby` at a heading) when the grouping carries meaning a
+ * screen reader should hear — without one it is purely visual.
+ */
+export declare const ButtonGroupRoot: React.ForwardRefExoticComponent<ButtonGroupRootProps & React.RefAttributes<HTMLDivElement>>;
+export interface ButtonGroupSeparatorProps extends Omit<BaseSeparatorProps, "className"> {
+    /**
+     * Which way the line runs. Defaults to the *opposite* of the group's
+     * orientation — a row gets vertical seams — which is almost always what you
+     * want, so leave it unset.
+     */
+    orientation?: ButtonGroupOrientation;
+    /**
+     * Additional class name(s). Applied after the internal styles so consumer
+     * utilities (e.g. Tailwind) win without needing `!important`.
+     */
+    className?: string;
+}
+/**
+ * The seam between two fused controls that have no visible border of their
+ * own. Renders a `<div role="separator">`.
+ *
+ * Reach for it between `solid` or `soft` buttons — fused bare they read as
+ * one unbroken slab of colour. `outline` neighbours need none: their own
+ * borders already draw the seam, and a separator there doubles the line.
+ */
+export declare const ButtonGroupSeparator: React.ForwardRefExoticComponent<ButtonGroupSeparatorProps & React.RefAttributes<HTMLDivElement>>;
+export interface ButtonGroupTextProps extends Omit<React.ComponentPropsWithoutRef<"div">, "className"> {
+    /**
+     * Replaces the rendered `<div>` with another element or component — pass
+     * `render={<label htmlFor="…" />}` when the cell names the input fused
+     * beside it, so clicking it focuses the field.
+     */
+    render?: useRender.RenderProp;
+    /**
+     * Additional class name(s). Applied after the internal styles so consumer
+     * utilities (e.g. Tailwind) win without needing `!important`.
+     */
+    className?: string;
+}
+/**
+ * A non-interactive cell fused in with the controls — a unit, a prefix, a
+ * count. Renders a `<div>`.
+ *
+ * It has no height of its own on purpose: the group stretches it to match
+ * whatever control it sits beside, so one cell serves every size.
+ */
+export declare const ButtonGroupText: React.ForwardRefExoticComponent<ButtonGroupTextProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * A set of related controls fused into one visual object: inner corners
+ * squared off, one hairline between neighbours, outer corners kept.
+ *
+ * ```tsx
+ * <ButtonGroup.Root aria-label="Pagination">
+ *   <Button variant="outline" tone="neutral">Previous</Button>
+ *   <Button variant="outline" tone="neutral">Next</Button>
+ * </ButtonGroup.Root>
+ * ```
+ *
+ * Purely visual and semantic — it adds `role="group"` and the fused styling,
+ * and no keyboard behaviour: every control keeps its own tab stop. When the
+ * set should cost one Tab press instead, reach for
+ * [`Toolbar`](/components/toolbar).
+ *
+ * Styling is driven by `data-*` attributes and `--forte-button-group-*` custom
+ * properties, so it can be re-skinned from plain CSS or targeted with
+ * Tailwind arbitrary variants (`data-[orientation=vertical]:...`) without
+ * wrapping.
+ */
+export declare const ButtonGroup: {
+    Root: React.ForwardRefExoticComponent<ButtonGroupRootProps & React.RefAttributes<HTMLDivElement>>;
+    Separator: React.ForwardRefExoticComponent<ButtonGroupSeparatorProps & React.RefAttributes<HTMLDivElement>>;
+    Text: React.ForwardRefExoticComponent<ButtonGroupTextProps & React.RefAttributes<HTMLDivElement>>;
+};
+export {};

package/dist/components/button-group/ButtonGroup.js

@@ -0,0 +1,3 @@
+"use client";
+import { i as e, n as t, r as n, t as r } from "../../ButtonGroup-C-CrwPXP.js";
+export { r as ButtonGroup, t as ButtonGroupRoot, n as ButtonGroupSeparator, e as ButtonGroupText };

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

@@ -0,0 +1,2 @@
+export { ButtonGroup } from './ButtonGroup';
+export type { ButtonGroupOrientation, ButtonGroupRootProps, ButtonGroupSeparatorProps, ButtonGroupTextProps, } from './ButtonGroup';

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

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