@forte-ui/react 1.0.0-alpha.1

package/dist/components/drawer/Drawer.d.ts

@@ -0,0 +1,351 @@
+import { Drawer as BaseDrawer, DrawerRootProps as BaseDrawerRootProps, DrawerTriggerProps as BaseDrawerTriggerProps, DrawerPopupProps as BaseDrawerPopupProps, DrawerPortalProps as BaseDrawerPortalProps, DrawerContentProps as BaseDrawerContentProps, DrawerTitleProps as BaseDrawerTitleProps, DrawerDescriptionProps as BaseDrawerDescriptionProps, DrawerCloseProps as BaseDrawerCloseProps, DrawerSwipeAreaProps as BaseDrawerSwipeAreaProps, DrawerVirtualKeyboardProviderProps as BaseDrawerVirtualKeyboardProviderProps } from '@base-ui/react/drawer';
+import * as React from "react";
+export type DrawerSide = "top" | "right" | "bottom" | "left";
+export type DrawerSize = "sm" | "md" | "lg" | "full";
+export type DrawerVariant = "edge" | "floating";
+export type DrawerFooterAlign = "start" | "center" | "end" | "between";
+/**
+ * One height a `top`/`bottom` drawer can settle at — a fraction of the
+ * viewport (0 to 1), a pixel count (above 1), or a string carrying its own
+ * `px`/`rem` unit.
+ *
+ * Derived from Base UI's own prop rather than restated, so a change there
+ * surfaces here as a type error instead of as a runtime surprise.
+ */
+export type DrawerSnapPoint = NonNullable<BaseDrawerRootProps["snapPoints"]>[number];
+export interface DrawerRootProps<Payload = unknown> extends Omit<BaseDrawerRootProps<Payload>, "swipeDirection"> {
+    /**
+     * Which edge of the viewport the drawer slides in from. It also decides the
+     * direction of the dismiss gesture, which is why it lives on `Root` rather
+     * than on `Popup`.
+     *
+     * Physical, not logical: `translate` has no logical form, and Base UI's
+     * swipe direction is physical too. An RTL layout that wants its navigation
+     * on the leading edge should say `side="right"` for that layout.
+     * @default "right"
+     */
+    side?: DrawerSide;
+    /**
+     * Allow dragging the drawer to dismiss it. Turning it off keeps the drawer
+     * fully usable — trigger, Escape, outside press and `Drawer.Close` all still
+     * work — and only removes the gesture.
+     *
+     * Leave it on for anything that reaches a touch screen: a drag toward the
+     * edge is how a drawer is expected to close there, and on a large phone it
+     * is the only dismissal within reach of one thumb.
+     * @default true
+     */
+    swipe?: boolean;
+    /**
+     * Heights a `side="top"` or `side="bottom"` drawer settles at. Numbers
+     * between 0 and 1 are fractions of the viewport, numbers above 1 are pixels,
+     * and strings carry their own `px`/`rem` unit — `["148px", 1]` is the usual
+     * peek-then-full pair.
+     *
+     * Ignored for `side="left"` and `side="right"`, which have no snap axis.
+     */
+    snapPoints?: BaseDrawerRootProps<Payload>["snapPoints"];
+}
+/**
+ * Groups all parts of a drawer and owns its open state.
+ *
+ * Renders no DOM element, so it takes no `className`, `style` or `ref` —
+ * style `Drawer.Popup` instead. Every Base UI `Drawer.Root` prop is forwarded
+ * unchanged (`open`, `defaultOpen`, `onOpenChange`, `onOpenChangeComplete`,
+ * `modal`, `disablePointerDismissal`, `actionsRef`, `handle`, `triggerId`,
+ * `defaultTriggerId`, `snapPoints`, `snapPoint`, `onSnapPointChange`,
+ * `snapToSequentialPoints`) except `swipeDirection`, which `side` replaces.
+ */
+export declare function DrawerRoot<Payload>({ side, swipe, snapPoints, modal, ...props }: DrawerRootProps<Payload>): React.JSX.Element;
+export interface DrawerTriggerProps<Payload = unknown> extends Omit<BaseDrawerTriggerProps<Payload>, "className"> {
+    /**
+     * Additional class name(s). Applied after the internal styles so consumer
+     * utilities (e.g. Tailwind) win without needing `!important`.
+     */
+    className?: string;
+}
+/**
+ * `React.forwardRef` erases generics, so the exported value is re-typed with
+ * a generic call signature — the same shape Base UI itself exports — to keep
+ * `payload` and `handle` inferring together.
+ */
+interface DrawerTriggerComponent {
+    <Payload>(props: DrawerTriggerProps<Payload>): React.JSX.Element;
+}
+/**
+ * A button that opens the drawer.
+ *
+ * Renders a `<button>`. Pass `render={<Button />}` to compose it with a
+ * styled button — the trigger's own neutral styling steps aside when `render`
+ * is present, so the two never fight over the cascade.
+ */
+export declare const DrawerTrigger: DrawerTriggerComponent;
+export interface DrawerPopupProps extends Omit<BaseDrawerPopupProps, "className"> {
+    /**
+     * How far the drawer extends along its own axis — width for `left`/`right`,
+     * height for `top`/`bottom`. `"full"` covers the whole viewport.
+     *
+     * On `top`/`bottom` this is a *maximum*: a short sheet is only as tall as
+     * its content, which is what a bottom sheet should do.
+     * @default "md"
+     */
+    size?: DrawerSize;
+    /**
+     * `"edge"` sits flush against the side of the screen and rounds only its
+     * two inner corners. `"floating"` insets the whole surface by
+     * `--forte-drawer-inset` and rounds all four, so the page shows through
+     * around it.
+     * @default "edge"
+     */
+    variant?: DrawerVariant;
+    /**
+     * Keep the portal — and therefore the popup — in the DOM while the drawer
+     * is closed. Needed when something inside must stay mounted (an iframe, a
+     * media element, uncommitted form state).
+     * @default false
+     */
+    keepMounted?: boolean;
+    /**
+     * Element the portal renders into. Defaults to `document.body`; set it when
+     * the drawer must live inside a specific stacking or shadow root.
+     */
+    container?: BaseDrawerPortalProps["container"];
+    /**
+     * Render the scrim behind the drawer. Turn it off for a non-modal drawer
+     * that should leave the page visibly usable.
+     * @default true
+     */
+    backdrop?: boolean;
+    /**
+     * Render the backdrop even when this drawer is nested inside another one.
+     * Base UI suppresses nested backdrops by default — the parent recedes and
+     * dims itself instead — so only set this when a nested drawer genuinely
+     * needs its own scrim.
+     * @default false
+     */
+    forceBackdrop?: boolean;
+    /**
+     * Additional class name(s) for the backdrop element. The popup's own
+     * `className` cannot reach it, since the backdrop is a sibling rendered
+     * inside this component.
+     */
+    backdropClassName?: string;
+    /**
+     * Additional class name(s) for the fixed container the popup is placed in.
+     * It owns `--forte-drawer-z-index` and `--forte-drawer-inset` — the popup reads
+     * the inset from here by inheritance, so setting it once on the viewport
+     * keeps the surface and the gap around it in agreement.
+     */
+    viewportClassName?: string;
+    /**
+     * Additional class name(s) for the popup itself. Applied after the internal
+     * styles so consumer utilities (e.g. Tailwind) win without needing
+     * `!important`.
+     */
+    className?: string;
+}
+/**
+ * The drawer surface, together with the three wrappers it always needs:
+ * `Portal` → `Backdrop` + `Viewport` → `Popup`. Collapsing them into one
+ * component keeps the common case to a single element while leaving every
+ * Base UI `Popup` prop (`initialFocus`, `finalFocus`, `render`, …) available.
+ *
+ * `Title`, `Description` and `Close` must be rendered *inside* this
+ * component: that is what auto-wires `aria-labelledby` / `aria-describedby`,
+ * and a close button outside the popup is unreachable to touch screen-reader
+ * users.
+ *
+ * Scrolling belongs to `Drawer.Content`, not to this element; the popup keeps
+ * only a fallback `overflow` for drawers built without one. Base UI takes the
+ * first scrollable ancestor of wherever the gesture started, so a swipe still
+ * waits for that scroll to reach its end.
+ */
+export declare const DrawerPopup: React.ForwardRefExoticComponent<Omit<DrawerPopupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export interface DrawerHandleProps extends Omit<React.ComponentPropsWithoutRef<"div">, "className"> {
+    /**
+     * Additional class name(s). Applied after the internal styles so consumer
+     * utilities (e.g. Tailwind) win without needing `!important`.
+     */
+    className?: string;
+}
+/**
+ * The grab bar that advertises the drag gesture.
+ *
+ * A decorative `<div>`, hidden from assistive technology: it is a picture of
+ * an affordance, not a control, and the gesture it describes is never the
+ * only way out of a drawer. Give the drawer a `Drawer.Close` as well.
+ *
+ * Keep it *outside* `Drawer.Content`. Content deliberately swallows mouse
+ * drags so text stays selectable, so a handle placed inside it could not be
+ * dragged with a mouse — which is the one input that has no other way to
+ * start the gesture.
+ */
+export declare const DrawerHandle: React.ForwardRefExoticComponent<DrawerHandleProps & React.RefAttributes<HTMLDivElement>>;
+export interface DrawerContentProps extends Omit<BaseDrawerContentProps, "className"> {
+    /**
+     * Additional class name(s). Applied after the internal styles so consumer
+     * utilities (e.g. Tailwind) win without needing `!important`.
+     */
+    className?: string;
+}
+/**
+ * The drawer's body.
+ *
+ * Renders a `<div>` that Base UI marks as content, which exempts it from
+ * *mouse* dragging — a press-and-drag over this region selects text instead
+ * of pulling the drawer. Touch dragging is unaffected, so the gesture still
+ * works where it matters.
+ *
+ * It is also the drawer's scroll container, which is what keeps a
+ * `Drawer.Handle` from scrolling away and lets a `Drawer.Footer` placed
+ * *outside* it pin to the bottom of the drawer.
+ *
+ * On a `top`/`bottom` drawer it caps and centres its own width through
+ * `--forte-drawer-content-max-inline-size`, which is what keeps a full-width
+ * bottom sheet from running its text to both edges of a wide screen.
+ */
+export declare const DrawerContent: React.ForwardRefExoticComponent<Omit<DrawerContentProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export interface DrawerTitleProps extends Omit<BaseDrawerTitleProps, "className"> {
+    /**
+     * Additional class name(s). Applied after the internal styles so consumer
+     * utilities (e.g. Tailwind) win without needing `!important`.
+     */
+    className?: string;
+}
+/**
+ * The drawer's accessible name.
+ *
+ * Renders an `<h2>`. Inside `Drawer.Popup` it is wired up as the popup's
+ * `aria-labelledby` automatically; every drawer should have one.
+ */
+export declare const DrawerTitle: React.ForwardRefExoticComponent<Omit<DrawerTitleProps, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+export interface DrawerDescriptionProps extends Omit<BaseDrawerDescriptionProps, "className"> {
+    /**
+     * Additional class name(s). Applied after the internal styles so consumer
+     * utilities (e.g. Tailwind) win without needing `!important`.
+     */
+    className?: string;
+}
+/**
+ * A short explanation of what the drawer is for.
+ *
+ * Renders a `<p>`. Inside `Drawer.Popup` it becomes the popup's
+ * `aria-describedby`, so it is announced after the title.
+ */
+export declare const DrawerDescription: React.ForwardRefExoticComponent<Omit<DrawerDescriptionProps, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+export interface DrawerCloseProps extends Omit<BaseDrawerCloseProps, "className"> {
+    /**
+     * Render as a square button sized for a single icon — the corner "×"
+     * treatment. Enforces the 24px minimum hit target from WCAG SC 2.5.8.
+     * Always pair with `aria-label`, since there is no text to announce.
+     * @default false
+     */
+    iconOnly?: boolean;
+    /**
+     * Additional class name(s). Applied after the internal styles so consumer
+     * utilities (e.g. Tailwind) win without needing `!important`.
+     */
+    className?: string;
+}
+/**
+ * A button that closes the drawer.
+ *
+ * Renders a `<button>`. Keep it inside `Drawer.Popup`: in a modal drawer the
+ * rest of the page is inert, and a touch screen-reader user has no other way
+ * out — the swipe gesture is not available to them. Pass `render={<Button />}`
+ * to compose it with a styled button.
+ */
+export declare const DrawerClose: React.ForwardRefExoticComponent<Omit<DrawerCloseProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export interface DrawerFooterProps extends Omit<React.ComponentPropsWithoutRef<"div">, "className"> {
+    /**
+     * How the actions are distributed along the footer. `"between"` is the
+     * pattern for a destructive action pushed away from the safe one.
+     * @default "end"
+     */
+    align?: DrawerFooterAlign;
+    /**
+     * Additional class name(s). Applied after the internal styles so consumer
+     * utilities (e.g. Tailwind) win without needing `!important`.
+     */
+    className?: string;
+}
+/**
+ * The action row at the bottom of a drawer.
+ *
+ * A plain `<div>` — not a Base UI part — that supplies the standard spacing
+ * and alignment for the confirm/cancel buttons.
+ */
+export declare const DrawerFooter: React.ForwardRefExoticComponent<DrawerFooterProps & React.RefAttributes<HTMLDivElement>>;
+export interface DrawerSwipeAreaProps extends Omit<BaseDrawerSwipeAreaProps, "className"> {
+    /**
+     * Additional class name(s). Applied after the internal styles so consumer
+     * utilities (e.g. Tailwind) win without needing `!important`.
+     */
+    className?: string;
+}
+/**
+ * An invisible strip along the drawer's own edge that opens it when swiped
+ * inward.
+ *
+ * Renders a `<div>`, pinned with `position: fixed` and sized by
+ * `--forte-drawer-swipe-area-size`. It sits *outside* the portal — it has to
+ * exist while the drawer is closed — so it is the one part that lives beside
+ * `Drawer.Trigger` rather than inside `Drawer.Popup`.
+ *
+ * It covers that strip of the page for pointer purposes, so anything the app
+ * puts hard against that edge becomes unreachable. Pair it with a real
+ * trigger; a gesture with no visible control is undiscoverable, and it is not
+ * available to a keyboard or screen-reader user at all.
+ */
+export declare const DrawerSwipeArea: React.ForwardRefExoticComponent<Omit<DrawerSwipeAreaProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export type DrawerVirtualKeyboardProviderProps = BaseDrawerVirtualKeyboardProviderProps;
+/**
+ * Makes a drawer aware of the software keyboard.
+ *
+ * Renders no DOM element. Wrap a `top`/`bottom` drawer that contains text
+ * fields in it: the viewport then publishes `--drawer-keyboard-inset`, which
+ * this component's stylesheet adds to the viewport's bottom padding, so the
+ * sheet rides above the keyboard instead of behind it. Drawers without it are
+ * unaffected.
+ */
+export declare function DrawerVirtualKeyboardProvider(props: DrawerVirtualKeyboardProviderProps): React.JSX.Element;
+/**
+ * A panel that slides in from an edge of the screen, built on Base UI's
+ * `Drawer`.
+ *
+ * ```tsx
+ * <Drawer.Root side="right">
+ *   <Drawer.Trigger render={<Button />}>Filters</Drawer.Trigger>
+ *   <Drawer.Popup>
+ *     <Drawer.Content>
+ *       <Drawer.Title>Filters</Drawer.Title>
+ *       <Drawer.Description>Narrow the result list.</Drawer.Description>
+ *       <Drawer.Footer>
+ *         <Drawer.Close render={<Button />}>Apply</Drawer.Close>
+ *       </Drawer.Footer>
+ *     </Drawer.Content>
+ *   </Drawer.Popup>
+ * </Drawer.Root>
+ * ```
+ *
+ * Use it for content that belongs beside the page rather than on top of it —
+ * navigation, filters, a detail panel, a mobile action sheet. When the task
+ * needs the user's whole attention and has no relationship to a screen edge,
+ * reach for `Dialog`.
+ */
+export declare const Drawer: {
+    Root: typeof DrawerRoot;
+    Trigger: DrawerTriggerComponent;
+    Popup: React.ForwardRefExoticComponent<Omit<DrawerPopupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Handle: React.ForwardRefExoticComponent<DrawerHandleProps & React.RefAttributes<HTMLDivElement>>;
+    Content: React.ForwardRefExoticComponent<Omit<DrawerContentProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Title: React.ForwardRefExoticComponent<Omit<DrawerTitleProps, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+    Description: React.ForwardRefExoticComponent<Omit<DrawerDescriptionProps, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+    Close: React.ForwardRefExoticComponent<Omit<DrawerCloseProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+    Footer: React.ForwardRefExoticComponent<DrawerFooterProps & React.RefAttributes<HTMLDivElement>>;
+    SwipeArea: React.ForwardRefExoticComponent<Omit<DrawerSwipeAreaProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    VirtualKeyboardProvider: typeof DrawerVirtualKeyboardProvider;
+    /** Creates a handle that connects a `Drawer.Root` to detached triggers. */
+    createHandle: typeof BaseDrawer.createHandle;
+};
+export {};

package/dist/components/drawer/Drawer.js

@@ -0,0 +1,3 @@
+"use client";
+import { a as e, c as t, d as n, f as r, i, l as a, n as o, o as s, r as c, s as l, t as u, u as d } from "../../Drawer-DKQF3OO7.js";
+export { u as Drawer, o as DrawerClose, c as DrawerContent, i as DrawerDescription, e as DrawerFooter, s as DrawerHandle, l as DrawerPopup, t as DrawerRoot, a as DrawerSwipeArea, d as DrawerTitle, n as DrawerTrigger, r as DrawerVirtualKeyboardProvider };

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

@@ -0,0 +1,2 @@
+export { Drawer } from './Drawer';
+export type { DrawerSide, DrawerSize, DrawerVariant, DrawerSnapPoint, DrawerFooterAlign, DrawerRootProps, DrawerTriggerProps, DrawerPopupProps, DrawerHandleProps, DrawerContentProps, DrawerTitleProps, DrawerDescriptionProps, DrawerCloseProps, DrawerFooterProps, DrawerSwipeAreaProps, DrawerVirtualKeyboardProviderProps, } from './Drawer';

package/dist/components/drawer/index.js

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

package/dist/components/field/Field.d.ts

@@ -0,0 +1,170 @@
+import { Field as BaseField } from '@base-ui/react/field';
+import * as React from "react";
+type BaseRootProps = React.ComponentPropsWithoutRef<typeof BaseField.Root>;
+export interface FieldRootProps extends Omit<BaseRootProps, "className"> {
+    /**
+     * Additional class name(s). Applied after the internal styles so consumer
+     * utilities (e.g. Tailwind) win without needing `!important`.
+     */
+    className?: string;
+}
+/**
+ * Groups one control with its label, description and error message, and owns
+ * the validation state they all read. Renders a `<div>` laid out as a column.
+ *
+ * The control is any Base UI form component — `Input`, `Checkbox`, `Switch`,
+ * `Select` — and none of them need wiring: the field supplies the id the label
+ * points at, the `aria-describedby` linking description and error, and the
+ * `name` used on submit. Give `name` to the field rather than to the control,
+ * so `<Form onFormSubmit>` and server-returned `errors` can find it.
+ *
+ * The column stretches its children, which is why an `Input` inside a field is
+ * full width without `fullWidth`.
+ */
+export declare const FieldRoot: React.ForwardRefExoticComponent<FieldRootProps & React.RefAttributes<HTMLDivElement>>;
+type BaseLabelProps = React.ComponentPropsWithoutRef<typeof BaseField.Label>;
+export interface FieldLabelProps extends Omit<BaseLabelProps, "className"> {
+    /**
+     * Whether the rendered element is a native `<label>`.
+     *
+     * Leave it `true` for `Input`, `Checkbox` and `Switch`. Set it to `false`
+     * for a control that is a `<button>` — `Select.Trigger` is the one in this
+     * library — where native label behaviour is actively wrong: the button would
+     * pick up `:hover` from the label, and clicking the label would fire a click
+     * on the trigger and open the popup. With `false` the association is made
+     * with `aria-labelledby` instead, and the element rendered defaults to a
+     * `<div>` so the pair stays consistent (Base UI logs an error in development
+     * if a `<label>` is rendered with `nativeLabel={false}`, or vice versa).
+     * @default true
+     */
+    nativeLabel?: boolean;
+    /**
+     * Additional class name(s). Applied after the internal styles so consumer
+     * utilities (e.g. Tailwind) win without needing `!important`.
+     */
+    className?: string;
+}
+/**
+ * The field's visible label, associated with the control automatically.
+ * Renders a `<label>` — or a `<div>` when `nativeLabel` is `false`.
+ *
+ * Both labelling shapes work, and the difference is only where the control
+ * sits:
+ *
+ * ```tsx
+ * // Sibling: the label points at the control with htmlFor.
+ * <Field.Label>Email</Field.Label>
+ * <Input type="email" />
+ *
+ * // Wrapping: the label contains the control. Preferred for a Checkbox or a
+ * // Switch, which have no text of their own.
+ * <Field.Label><Checkbox /> Email me about releases</Field.Label>
+ * ```
+ *
+ * A wrapping label lays itself out as a row and takes a `pointer` cursor,
+ * because clicking it toggles the control; a sibling label is chrome and keeps
+ * the default arrow.
+ */
+export declare const FieldLabel: React.ForwardRefExoticComponent<FieldLabelProps & React.RefAttributes<HTMLElement>>;
+type BaseDescriptionProps = React.ComponentPropsWithoutRef<typeof BaseField.Description>;
+export interface FieldDescriptionProps extends Omit<BaseDescriptionProps, "className"> {
+    /**
+     * Additional class name(s). Applied after the internal styles so consumer
+     * utilities (e.g. Tailwind) win without needing `!important`.
+     */
+    className?: string;
+}
+/**
+ * Supporting text for the field. Renders a `<p>` wired into the control's
+ * `aria-describedby`, so it is announced with the control rather than being
+ * stray text next to it.
+ *
+ * Put the format hint here, not in the placeholder — a placeholder disappears
+ * the moment the user starts typing, which is exactly when the hint is needed.
+ */
+export declare const FieldDescription: React.ForwardRefExoticComponent<FieldDescriptionProps & React.RefAttributes<HTMLParagraphElement>>;
+type BaseErrorProps = React.ComponentPropsWithoutRef<typeof BaseField.Error>;
+export interface FieldErrorProps extends Omit<BaseErrorProps, "className"> {
+    /**
+     * Which failure to render for. Omit it to show whatever message the field
+     * currently has — the browser's own text for a native constraint, the string
+     * returned by `validate`, or the entry `<Form errors>` holds for this
+     * field's `name`. Pass a `ValidityState` key (`"valueMissing"`,
+     * `"typeMismatch"`, `"patternMismatch"`, …) to render only for that one
+     * failure, which is how you replace a browser message with your own wording.
+     * Pass `true` to always render, when an external form library owns
+     * visibility.
+     */
+    match?: BaseErrorProps["match"];
+    /**
+     * The message. Omit it and the field supplies the text itself; several
+     * failures at once arrive as a `<ul>`.
+     */
+    children?: React.ReactNode;
+    /**
+     * Additional class name(s). Applied after the internal styles so consumer
+     * utilities (e.g. Tailwind) win without needing `!important`.
+     */
+    className?: string;
+}
+/**
+ * The validation message. Renders a `<div>`, and only while the field is
+ * actually failing — it is unmounted otherwise, so nothing reserves space for
+ * it.
+ *
+ * Base UI keeps the outgoing element mounted until its exit transition
+ * finishes, so the message fades out with its own text rather than snapping to
+ * the next one.
+ */
+export declare const FieldError: React.ForwardRefExoticComponent<FieldErrorProps & React.RefAttributes<HTMLDivElement>>;
+type BaseItemProps = React.ComponentPropsWithoutRef<typeof BaseField.Item>;
+export interface FieldItemProps extends Omit<BaseItemProps, "className"> {
+    /**
+     * Whether this one item ignores user interaction. `disabled` on the
+     * surrounding `Field.Root` takes precedence.
+     * @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;
+}
+/**
+ * One row inside a `CheckboxGroup` or radio group: a control, its own label,
+ * and optionally its own description. Renders a `<div>`.
+ *
+ * A `Field.Root` names the group as a whole; a `Field.Item` gives each member
+ * a label of its own without opening a second field.
+ */
+export declare const FieldItem: React.ForwardRefExoticComponent<FieldItemProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * A field built on Base UI's `Field` primitives.
+ *
+ * ```tsx
+ * <Field.Root name="email" validationMode="onBlur">
+ *   <Field.Label>Email</Field.Label>
+ *   <Input type="email" required />
+ *   <Field.Description>We only use this for receipts.</Field.Description>
+ *   <Field.Error match="valueMissing">An email address is required.</Field.Error>
+ *   <Field.Error match="typeMismatch">That does not look like an email address.</Field.Error>
+ * </Field.Root>
+ * ```
+ *
+ * There is no `Field.Control` here on purpose: Base UI's `Input` *is*
+ * `Field.Control`, so `<Input>` is the styled control, and `Checkbox`,
+ * `Switch` and `Select` slot in the same way with no extra part.
+ *
+ * `Field.Validity` is re-exported from Base UI unchanged — it renders no DOM
+ * of its own, it hands the raw `ValidityState` to a render function.
+ */
+export declare const Field: {
+    Root: React.ForwardRefExoticComponent<FieldRootProps & React.RefAttributes<HTMLDivElement>>;
+    Label: React.ForwardRefExoticComponent<FieldLabelProps & React.RefAttributes<HTMLElement>>;
+    Description: React.ForwardRefExoticComponent<FieldDescriptionProps & React.RefAttributes<HTMLParagraphElement>>;
+    Error: React.ForwardRefExoticComponent<FieldErrorProps & React.RefAttributes<HTMLDivElement>>;
+    Item: React.ForwardRefExoticComponent<FieldItemProps & React.RefAttributes<HTMLDivElement>>;
+    Validity: React.FC<import('@base-ui/react').FieldValidityProps>;
+};
+export {};

package/dist/components/field/Field.js

@@ -0,0 +1,3 @@
+"use client";
+import { a as e, i as t, n, o as r, r as i, t as a } from "../../Field-FLFEO70D.js";
+export { a as Field, n as FieldDescription, i as FieldError, t as FieldItem, e as FieldLabel, r as FieldRoot };

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

@@ -0,0 +1,2 @@
+export { Field, FieldRoot, FieldLabel, FieldDescription, FieldError, FieldItem, } from './Field';
+export type { FieldRootProps, FieldLabelProps, FieldDescriptionProps, FieldErrorProps, FieldItemProps, } from './Field';

package/dist/components/field/index.js

@@ -0,0 +1,2 @@
+import { a as e, i as t, n, o as r, r as i, t as a } from "../../Field-FLFEO70D.js";
+export { a as Field, n as FieldDescription, i as FieldError, t as FieldItem, e as FieldLabel, r as FieldRoot };

package/dist/components/fieldset/Fieldset.d.ts

@@ -0,0 +1,60 @@
+import { Fieldset as BaseFieldset } from '@base-ui/react/fieldset';
+import * as React from "react";
+type BaseRootProps = React.ComponentPropsWithoutRef<typeof BaseFieldset.Root>;
+export interface FieldsetRootProps extends Omit<BaseRootProps, "className"> {
+    /**
+     * Disables every control inside the fieldset. This is the native
+     * `<fieldset disabled>` behaviour, so it reaches controls the library knows
+     * nothing about too.
+     * @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;
+}
+/**
+ * Groups related fields under one heading. Renders a `<fieldset>` laid out as
+ * a column, with the browser's border, padding and margins removed.
+ *
+ * Use it for a set of fields that belong together — a billing address, a group
+ * of checkboxes — not for every field. A `Field.Root` already names a single
+ * control; wrapping one in a fieldset gives it two names.
+ */
+export declare const FieldsetRoot: React.ForwardRefExoticComponent<FieldsetRootProps & React.RefAttributes<HTMLFieldSetElement>>;
+type BaseLegendProps = React.ComponentPropsWithoutRef<typeof BaseFieldset.Legend>;
+export interface FieldsetLegendProps extends Omit<BaseLegendProps, "className"> {
+    /**
+     * Additional class name(s). Applied after the internal styles so consumer
+     * utilities (e.g. Tailwind) win without needing `!important`.
+     */
+    className?: string;
+}
+/**
+ * The heading that names the fieldset. Renders a `<div>`, not a `<legend>` —
+ * Base UI associates it with `aria-labelledby` instead, which announces the
+ * same way and lays out like ordinary text.
+ *
+ * That matters: a real `<legend>` sits *in* the fieldset's border, cannot be
+ * positioned like a normal block, and drags along UA styles that differ
+ * between browsers.
+ */
+export declare const FieldsetLegend: React.ForwardRefExoticComponent<FieldsetLegendProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * A fieldset built on Base UI's `Fieldset` primitives.
+ *
+ * ```tsx
+ * <Fieldset.Root>
+ *   <Fieldset.Legend>Shipping address</Fieldset.Legend>
+ *   <Field.Root name="street">…</Field.Root>
+ *   <Field.Root name="city">…</Field.Root>
+ * </Fieldset.Root>
+ * ```
+ */
+export declare const Fieldset: {
+    Root: React.ForwardRefExoticComponent<FieldsetRootProps & React.RefAttributes<HTMLFieldSetElement>>;
+    Legend: React.ForwardRefExoticComponent<FieldsetLegendProps & React.RefAttributes<HTMLDivElement>>;
+};
+export {};

package/dist/components/fieldset/Fieldset.js

@@ -0,0 +1,3 @@
+"use client";
+import { n as e, r as t, t as n } from "../../Fieldset-CYhh71Qt.js";
+export { n as Fieldset, e as FieldsetLegend, t as FieldsetRoot };

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

@@ -0,0 +1,2 @@
+export { Fieldset, FieldsetRoot, FieldsetLegend } from './Fieldset';
+export type { FieldsetRootProps, FieldsetLegendProps } from './Fieldset';

package/dist/components/fieldset/index.js

@@ -0,0 +1,2 @@
+import { n as e, r as t, t as n } from "../../Fieldset-CYhh71Qt.js";
+export { n as Fieldset, e as FieldsetLegend, t as FieldsetRoot };