@forte-ui/react 1.0.0-alpha.1

package/dist/components/radio/Radio.d.ts

@@ -0,0 +1,144 @@
+import { Radio as BaseRadio } from '@base-ui/react/radio';
+import { RadioGroup as BaseRadioGroup } from '@base-ui/react/radio-group';
+import * as React from "react";
+export type RadioSize = "sm" | "md" | "lg";
+export type RadioTone = "primary" | "secondary" | "danger" | "neutral";
+export type RadioGroupOrientation = "vertical" | "horizontal";
+export interface RadioProps<Value = unknown> extends Omit<BaseRadio.Root.Props<Value>, "className" | "children"> {
+    /**
+     * The value this radio submits when it is the one selected. Matched against
+     * the group's `value`, so it has to be unique within the group. Required —
+     * a radio with no value cannot be selected.
+     */
+    value: Value;
+    /**
+     * Size of the painted circle. The dot is derived from it rather than fixed,
+     * so it keeps its proportion at every size and when a consumer overrides
+     * `--forte-radio-size` to something off the scale.
+     * @default "md"
+     */
+    size?: RadioSize;
+    /**
+     * Which semantic colour set the selected fill draws from. Inside a
+     * `Field.Root` an invalid field overrides this with the danger palette, so
+     * a validation error always reads as an error.
+     * @default "primary"
+     */
+    tone?: RadioTone;
+    /**
+     * Set to `true` when `render` replaces the root with a real `<button>`.
+     * The root is a `<span>` by default so that an enclosing `<label>` stays
+     * valid HTML; for the sibling-label pattern (`<label htmlFor>` + `id`) pass
+     * `nativeButton render={<button />}` instead. With `nativeButton`, `id`
+     * lands on the root element rather than on the hidden input.
+     * @default false
+     */
+    nativeButton?: boolean;
+    /**
+     * Additional class name(s) for the indicator — the dot inside the circle.
+     * Applied after the internal styles.
+     */
+    indicatorClassName?: string;
+    /**
+     * Additional class name(s). Applied after the internal styles so consumer
+     * utilities (e.g. Tailwind) win without needing `!important`.
+     */
+    className?: string;
+    /**
+     * Ref to the root 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<HTMLElement>;
+}
+/**
+ * One option in a `RadioGroup`, built on Base UI's unstyled `Radio` primitive.
+ *
+ * The root renders a `<span>` plus a hidden `<input>` beside it, so it carries
+ * no accessible name of its own — wrap it in a `<label>`, pair it with a
+ * `<label htmlFor>` (see `nativeButton`), or put it inside a `Field.Item`.
+ *
+ * A radio only means anything inside a `RadioGroup`: the group owns the value,
+ * and it is what makes the set one tab stop with the arrow keys moving between
+ * options. A lone `<Radio />` renders, but nothing can ever select it.
+ *
+ * State is exposed on `data-*` attributes (`data-checked`, `data-unchecked`,
+ * `data-disabled`, `data-readonly`, and the `Field` validity attributes) on
+ * both the root and the indicator, and every visual decision is a
+ * `--forte-radio-*` custom property, so it can be re-skinned from plain CSS or
+ * targeted with Tailwind arbitrary variants (`data-[checked]:...`) without
+ * wrapping.
+ */
+export declare function Radio<Value = unknown>({ size, tone, indicatorClassName, className, ...props }: RadioProps<Value>): React.JSX.Element;
+export interface RadioGroupProps<Value = unknown> extends Omit<BaseRadioGroup.Props<Value>, "className"> {
+    /**
+     * Direction the options are laid out in. Horizontal groups wrap.
+     *
+     * Layout only — it does not change the keyboard model. Base UI drives the
+     * group with all four arrow keys whichever way it is laid out, so a
+     * horizontal group still answers to Up and Down.
+     * @default "vertical"
+     */
+    orientation?: RadioGroupOrientation;
+    /**
+     * The selected value. Pairs with `onValueChange` for a controlled group;
+     * use `defaultValue` for an uncontrolled one.
+     * @default undefined
+     */
+    value?: Value;
+    /**
+     * The value selected on mount when uncontrolled. Leave it out for a group
+     * that starts with nothing selected — but prefer a default where one is
+     * defensible, because an empty group has no focusable option to arrow into
+     * until something is picked.
+     * @default undefined
+     */
+    defaultValue?: Value;
+    /**
+     * Disables every radio in the group.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Shows the current value but refuses to change it. Unlike `disabled` the
+     * options stay focusable and announce `aria-readonly`.
+     * @default false
+     */
+    readOnly?: boolean;
+    /**
+     * Requires a selection before the surrounding form will submit.
+     * @default false
+     */
+    required?: boolean;
+    /**
+     * Identifies the group in form submission. Inside a `Field.Root` the field's
+     * `name` is used instead, so this is only needed outside one.
+     */
+    name?: string;
+    /**
+     * 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 `Radio`s, built on Base UI's `RadioGroup`
+ * primitive. Renders a `<div role="radiogroup">`.
+ *
+ * Unlike `CheckboxGroup`, this is a keyboard mode as well as a state
+ * container: the whole group is a single tab stop, and the arrow keys move
+ * between options — selecting as they go, which is the native radio
+ * behaviour and the reason a radio group must never be used for choices that
+ * trigger an expensive side effect on selection.
+ *
+ * The group has no implicit accessible name — give it `aria-labelledby`
+ * pointing at a heading, name it with a `Field.Label nativeLabel={false}`, or
+ * render it inside a `Fieldset.Root` with a `Fieldset.Legend`.
+ */
+export declare function RadioGroup<Value = unknown>({ orientation, className, ...props }: RadioGroupProps<Value>): React.JSX.Element;

package/dist/components/radio/Radio.js

@@ -0,0 +1,3 @@
+"use client";
+import { n as e, t } from "../../Radio-BIcX4INJ.js";
+export { t as Radio, e as RadioGroup };

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

@@ -0,0 +1,2 @@
+export { Radio, RadioGroup } from './Radio';
+export type { RadioProps, RadioSize, RadioTone, RadioGroupProps, RadioGroupOrientation, } from './Radio';

package/dist/components/radio/index.js

@@ -0,0 +1,2 @@
+import { n as e, t } from "../../Radio-BIcX4INJ.js";
+export { t as Radio, e as RadioGroup };

package/dist/components/resizable/Resizable.d.ts

@@ -0,0 +1,211 @@
+import { useRender } from '@base-ui/react/use-render';
+import * as React from "react";
+/** Which way the panels are laid out. */
+export type ResizableOrientation = "horizontal" | "vertical";
+/**
+ * A size constraint: a bare number or a `"…%"` string is a percentage of the
+ * group; a `"…px"` string is an absolute length, resolved against the group's
+ * measured size whenever it is read.
+ */
+export type ResizableLength = number | `${number}%` | `${number}px`;
+/** Storage for `autoSaveId`. `localStorage` and `sessionStorage` both fit. */
+export interface ResizableStorage {
+    getItem(key: string): string | null;
+    setItem(key: string, value: string): void;
+}
+export interface ResizableGroupProps extends Omit<React.ComponentPropsWithoutRef<"div">, "className" | "onChange"> {
+    /**
+     * Which way the panels run. `"horizontal"` lays them out side by side with
+     * vertical handles between them; `"vertical"` stacks them.
+     * @default "horizontal"
+     */
+    orientation?: ResizableOrientation;
+    /**
+     * How far one arrow-key press moves a handle, in percent of the group.
+     * @default 5
+     */
+    step?: number;
+    /**
+     * How far <kbd>Page Up</kbd> / <kbd>Page Down</kbd> moves a handle, in
+     * percent of the group.
+     * @default 20
+     */
+    largeStep?: number;
+    /**
+     * Remember the layout under this key and restore it on the next visit.
+     * Sizes are stored positionally, so the saved layout is discarded if the
+     * number of panels has changed since.
+     *
+     * Restoration happens after mount — the server has no access to the store —
+     * so give the panels sensible `defaultSize`s as well, or the first paint is
+     * the default layout rather than the saved one.
+     */
+    autoSaveId?: string;
+    /**
+     * Where `autoSaveId` writes. Defaults to `localStorage`; pass
+     * `sessionStorage`, or your own two-method object, to change that.
+     * @default localStorage
+     */
+    storage?: ResizableStorage;
+    /**
+     * Called with every panel's size, in percent and in DOM order, whenever the
+     * layout changes — including the first time it settles.
+     */
+    onLayout?: (sizes: number[]) => void;
+    /**
+     * 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 container. Owns the layout: every panel's size lives here, because
+ * resizing is a transfer between panels and only the group can see both sides.
+ *
+ * ```tsx
+ * <Resizable.Group orientation="horizontal">
+ *   <Resizable.Panel defaultSize={30} minSize="200px">…</Resizable.Panel>
+ *   <Resizable.Handle />
+ *   <Resizable.Panel>…</Resizable.Panel>
+ * </Resizable.Group>
+ * ```
+ *
+ * The group has no intrinsic size — it fills what it is given, so give it one
+ * (a height for a horizontal group, a height for a vertical one too).
+ */
+export declare const ResizableGroup: React.ForwardRefExoticComponent<ResizableGroupProps & React.RefAttributes<HTMLDivElement>>;
+export interface ResizablePanelProps extends Omit<React.ComponentPropsWithoutRef<"div">, "className"> {
+    /**
+     * Size before anyone drags anything, as a percentage of the group or a
+     * `px` string. Panels without one split whatever the sized panels leave.
+     */
+    defaultSize?: ResizableLength;
+    /**
+     * Smallest the panel may be dragged to. A `px` string is honoured at every
+     * container width — `minSize="240px"` is the constraint a sidebar actually
+     * has, and the one a percentage cannot express.
+     * @default 0
+     */
+    minSize?: ResizableLength;
+    /**
+     * Largest the panel may be dragged to.
+     * @default 100
+     */
+    maxSize?: ResizableLength;
+    /**
+     * Whether dragging past `minSize` snaps the panel shut instead of stopping.
+     * A collapsed panel publishes `data-collapsed`, and the handle beside it
+     * toggles it with <kbd>Enter</kbd>.
+     * @default false
+     */
+    collapsible?: boolean;
+    /**
+     * Size when collapsed. `0` hides the panel; a small `px` value leaves an
+     * icon rail behind.
+     * @default 0
+     */
+    collapsedSize?: ResizableLength;
+    /**
+     * How far down the gap between `collapsedSize` and `minSize` the snap point
+     * sits, as a fraction. `0.5` is the midpoint: drag past halfway and the
+     * panel shuts, let go before it and it springs back to `minSize`.
+     * @default 0.5
+     */
+    collapseThreshold?: number;
+    /**
+     * Controls the collapsed state. Pass it with `onCollapsedChange` to drive a
+     * panel from your own button — a sidebar toggle needs no imperative handle,
+     * just this pair.
+     */
+    collapsed?: boolean;
+    /**
+     * Called when the panel collapses or expands, whichever caused it — a drag
+     * past the snap point, <kbd>Enter</kbd> on the handle, or your own state.
+     */
+    onCollapsedChange?: (collapsed: boolean) => void;
+    /**
+     * 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;
+}
+/**
+ * One resizable region. Sized by the group, so it takes constraints rather
+ * than a size: `defaultSize` is a starting point, `minSize` and `maxSize` are
+ * the bounds a drag is clamped to.
+ *
+ * It is `overflow: hidden` and `min-inline-size: 0`, which is what keeps a
+ * long, unbreakable child — a code line, a wide table — from propping the
+ * panel open past the size the group asked for. Put a scroll container inside
+ * if the content needs to scroll.
+ */
+export declare const ResizablePanel: React.ForwardRefExoticComponent<ResizablePanelProps & React.RefAttributes<HTMLDivElement>>;
+export interface ResizableHandleProps extends Omit<React.ComponentPropsWithoutRef<"div">, "className"> {
+    /**
+     * Draws a grip in the middle of the divider — the visible affordance for a
+     * control that is otherwise a hairline.
+     * @default false
+     */
+    grip?: boolean;
+    /**
+     * Makes the divider inert: not focusable, not draggable, and drawn without
+     * a hover cue.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Whether a double-click resets the group to its default layout. On by
+     * default: it costs nothing, it is what every splitter does, and it is the
+     * only way back from a layout dragged into a corner without a reload.
+     * @default true
+     */
+    resetOnDoubleClick?: boolean;
+    /**
+     * Additional class name(s). Applied after the internal styles so consumer
+     * utilities (e.g. Tailwind) win without needing `!important`.
+     */
+    className?: string;
+}
+/**
+ * The divider between two panels — draggable, focusable, and a real
+ * `role="separator"` with the window-splitter keyboard interface: arrows to
+ * move it, <kbd>Page Up</kbd>/<kbd>Page Down</kbd> for a bigger step,
+ * <kbd>Home</kbd>/<kbd>End</kbd> for the extremes, and <kbd>Enter</kbd> to
+ * collapse or expand a collapsible neighbour.
+ *
+ * Its hit area is expanded to the 24px minimum (SC 2.5.8) without changing
+ * the hairline it draws, so it can be grabbed by a shaky hand or a thumb
+ * without becoming a visible gutter.
+ */
+export declare const ResizableHandle: React.ForwardRefExoticComponent<ResizableHandleProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * A splitter: two or more panels the reader can re-proportion by dragging the
+ * divider between them, with the keyboard, or from your own toggle button.
+ *
+ * ```tsx
+ * <Resizable.Group orientation="horizontal" className="h-72">
+ *   <Resizable.Panel defaultSize={25} minSize="180px" collapsible>
+ *     Sidebar
+ *   </Resizable.Panel>
+ *   <Resizable.Handle grip />
+ *   <Resizable.Panel>Content</Resizable.Panel>
+ * </Resizable.Group>
+ * ```
+ *
+ * Groups nest: put a group inside a panel and the inner panels register with
+ * the inner group, so a three-pane editor layout is two groups and no
+ * coordination between them.
+ */
+export declare const Resizable: {
+    Group: React.ForwardRefExoticComponent<ResizableGroupProps & React.RefAttributes<HTMLDivElement>>;
+    Panel: React.ForwardRefExoticComponent<ResizablePanelProps & React.RefAttributes<HTMLDivElement>>;
+    Handle: React.ForwardRefExoticComponent<ResizableHandleProps & React.RefAttributes<HTMLDivElement>>;
+};

package/dist/components/resizable/Resizable.js

@@ -0,0 +1,3 @@
+"use client";
+import { i as e, n as t, r as n, t as r } from "../../Resizable-7nJJM97e.js";
+export { r as Resizable, t as ResizableGroup, n as ResizableHandle, e as ResizablePanel };

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

@@ -0,0 +1,2 @@
+export { Resizable, ResizableGroup, ResizablePanel, ResizableHandle } from './Resizable';
+export type { ResizableOrientation, ResizableLength, ResizableStorage, ResizableGroupProps, ResizablePanelProps, ResizableHandleProps, } from './Resizable';

package/dist/components/resizable/index.js

@@ -0,0 +1,2 @@
+import { i as e, n as t, r as n, t as r } from "../../Resizable-7nJJM97e.js";
+export { r as Resizable, t as ResizableGroup, n as ResizableHandle, e as ResizablePanel };

package/dist/components/scroll-area/ScrollArea.d.ts

@@ -0,0 +1,113 @@
+import { ScrollArea as BaseScrollArea } from '@base-ui/react/scroll-area';
+import * as React from "react";
+export type ScrollAreaScrollbarVisibility = "auto" | "always";
+type BaseRootProps = React.ComponentPropsWithoutRef<typeof BaseScrollArea.Root>;
+type BaseViewportProps = React.ComponentPropsWithoutRef<typeof BaseScrollArea.Viewport>;
+type BaseContentProps = React.ComponentPropsWithoutRef<typeof BaseScrollArea.Content>;
+type BaseScrollbarProps = React.ComponentPropsWithoutRef<typeof BaseScrollArea.Scrollbar>;
+type BaseThumbProps = React.ComponentPropsWithoutRef<typeof BaseScrollArea.Thumb>;
+type BaseCornerProps = React.ComponentPropsWithoutRef<typeof BaseScrollArea.Corner>;
+export interface ScrollAreaRootProps extends Omit<BaseRootProps, "className"> {
+    /**
+     * Whether the content fades out towards any edge it can still be scrolled
+     * past. The fade is a mask, so it works on any background, and its size
+     * tracks the remaining scroll distance — it opens as you scroll away from an
+     * edge and is absent while you are resting against one. Dropped
+     * automatically under `forced-colors`, `prefers-contrast: more` and
+     * `prefers-reduced-transparency`, where the scrollbars carry the cue
+     * instead.
+     * @default true
+     */
+    fade?: boolean;
+    /**
+     * When the scrollbars are shown. `"auto"` overlays them and reveals them
+     * while the pointer is anywhere over the scroll area, while it is being
+     * scrolled, or while something inside it has keyboard focus; `"always"`
+     * leaves them painted. Either way a scrollbar for an axis that does not
+     * overflow is not rendered at all.
+     * @default "auto"
+     */
+    scrollbarVisibility?: ScrollAreaScrollbarVisibility;
+    /**
+     * Additional class name(s). Applied after the internal styles so consumer
+     * utilities (e.g. Tailwind) win without needing `!important`.
+     */
+    className?: string;
+}
+export interface ScrollAreaViewportProps extends Omit<BaseViewportProps, "className"> {
+    /**
+     * Additional class name(s). Applied after the internal styles so consumer
+     * utilities (e.g. Tailwind) win without needing `!important`.
+     */
+    className?: string;
+}
+export interface ScrollAreaContentProps extends Omit<BaseContentProps, "className"> {
+    /**
+     * Additional class name(s). Applied after the internal styles so consumer
+     * utilities (e.g. Tailwind) win without needing `!important`.
+     */
+    className?: string;
+}
+export interface ScrollAreaScrollbarProps extends Omit<BaseScrollbarProps, "className"> {
+    /**
+     * Which axis this scrollbar controls. Render one for each axis that can
+     * overflow; render both, plus `ScrollArea.Corner`, when either might.
+     * @default "vertical"
+     */
+    orientation?: "vertical" | "horizontal";
+    /**
+     * Additional class name(s). Applied after the internal styles so consumer
+     * utilities (e.g. Tailwind) win without needing `!important`.
+     */
+    className?: string;
+}
+export interface ScrollAreaThumbProps extends Omit<BaseThumbProps, "className"> {
+    /**
+     * Additional class name(s). Applied after the internal styles so consumer
+     * utilities (e.g. Tailwind) win without needing `!important`.
+     */
+    className?: string;
+}
+export interface ScrollAreaCornerProps extends Omit<BaseCornerProps, "className"> {
+    /**
+     * Additional class name(s). Applied after the internal styles so consumer
+     * utilities (e.g. Tailwind) win without needing `!important`.
+     */
+    className?: string;
+}
+/**
+ * A scroll container with overlay scrollbars and a gradient edge fade, built
+ * on Base UI's unstyled `ScrollArea` primitive.
+ *
+ * ```tsx
+ * <ScrollArea.Root style={{ maxHeight: "16rem" }}>
+ *   <ScrollArea.Viewport aria-label="Release notes">
+ *     <ScrollArea.Content>…</ScrollArea.Content>
+ *   </ScrollArea.Viewport>
+ *   <ScrollArea.Scrollbar orientation="vertical">
+ *     <ScrollArea.Thumb />
+ *   </ScrollArea.Scrollbar>
+ *   <ScrollArea.Scrollbar orientation="horizontal">
+ *     <ScrollArea.Thumb />
+ *   </ScrollArea.Scrollbar>
+ *   <ScrollArea.Corner />
+ * </ScrollArea.Root>
+ * ```
+ *
+ * The native scrollbars are hidden and replaced, so they look the same on
+ * every platform; the viewport still scrolls with the wheel, touch, and the
+ * keyboard, because it is still a real scroll container.
+ *
+ * The fade is pure CSS: Base UI publishes the distance from each edge on the
+ * viewport as a custom property, and the stylesheet turns those into a mask.
+ * Nothing runs per frame and no animation library is involved.
+ */
+export declare const ScrollArea: {
+    Root: React.ForwardRefExoticComponent<ScrollAreaRootProps & React.RefAttributes<HTMLDivElement>>;
+    Viewport: React.ForwardRefExoticComponent<ScrollAreaViewportProps & React.RefAttributes<HTMLDivElement>>;
+    Content: React.ForwardRefExoticComponent<ScrollAreaContentProps & React.RefAttributes<HTMLDivElement>>;
+    Scrollbar: React.ForwardRefExoticComponent<ScrollAreaScrollbarProps & React.RefAttributes<HTMLDivElement>>;
+    Thumb: React.ForwardRefExoticComponent<ScrollAreaThumbProps & React.RefAttributes<HTMLDivElement>>;
+    Corner: React.ForwardRefExoticComponent<ScrollAreaCornerProps & React.RefAttributes<HTMLDivElement>>;
+};
+export {};

package/dist/components/scroll-area/ScrollArea.js

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

package/dist/components/scroll-area/index.d.ts

@@ -0,0 +1,2 @@
+export { ScrollArea } from './ScrollArea';
+export type { ScrollAreaScrollbarVisibility, ScrollAreaRootProps, ScrollAreaViewportProps, ScrollAreaContentProps, ScrollAreaScrollbarProps, ScrollAreaThumbProps, ScrollAreaCornerProps, } from './ScrollArea';

package/dist/components/scroll-area/index.js

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