@forte-ui/react 1.0.0-alpha.1

package/dist/components/select/Select.d.ts

@@ -0,0 +1,345 @@
+import { Select as BaseSelect } from '@base-ui/react/select';
+import * as React from "react";
+export type SelectSize = "sm" | "md" | "lg";
+export type SelectVariant = "outline" | "soft" | "ghost";
+/**
+ * Props for {@link SelectRoot}. A re-export of Base UI's own root props, kept
+ * generic so `<Select.Root<Theme>>` still infers the value type of
+ * `onValueChange`, `defaultValue` and `<Select.Value>`'s render function.
+ */
+export type SelectRootProps<Value, Multiple extends boolean | undefined = false> = BaseSelect.Root.Props<Value, Multiple>;
+/**
+ * Groups every part of the select and owns its value and open state. Renders
+ * no DOM element of its own, so it accepts neither `className` nor `ref`.
+ *
+ * Both generics are forwarded rather than widened to `any`: `Value` is the
+ * type of a single item, and `Multiple` flips the value between `Value` and
+ * `Value[]`. Passing `multiple` alone is enough for `Multiple` to infer.
+ */
+export declare function SelectRoot<Value, Multiple extends boolean | undefined = false>(props: SelectRootProps<Value, Multiple>): React.JSX.Element;
+type BaseLabelProps = React.ComponentPropsWithoutRef<typeof BaseSelect.Label>;
+export interface SelectLabelProps extends Omit<BaseLabelProps, "className"> {
+    /**
+     * Additional class name(s). Applied after the internal styles so consumer
+     * utilities (e.g. Tailwind) win without needing `!important`.
+     */
+    className?: string;
+}
+/**
+ * A visible label wired to the trigger. This is the preferred way to give a
+ * select its accessible name — Base UI renders a `<div>` and associates it
+ * with `aria-labelledby`, so clicking it focuses the trigger without opening
+ * the popup. When no visible label is rendered, put `aria-label` on
+ * `<Select.Trigger>` instead.
+ */
+export declare const SelectLabel: React.ForwardRefExoticComponent<SelectLabelProps & React.RefAttributes<HTMLDivElement>>;
+type BaseTriggerProps = React.ComponentPropsWithoutRef<typeof BaseSelect.Trigger>;
+export interface SelectTriggerProps extends Omit<BaseTriggerProps, "className"> {
+    /**
+     * How much visual weight the trigger carries. `outline` reads as a form
+     * control, `soft` as a filled field, `ghost` as an inline affordance.
+     * @default "outline"
+     */
+    variant?: SelectVariant;
+    /**
+     * Size of the trigger. Actual dimensions also follow the ambient
+     * `data-forte-density` setting.
+     * @default "md"
+     */
+    size?: SelectSize;
+    /**
+     * Stretch the trigger to fill the width of its container.
+     * @default false
+     */
+    fullWidth?: boolean;
+    /**
+     * Additional class name(s). Applied after the internal styles so consumer
+     * utilities (e.g. Tailwind) win without needing `!important`.
+     */
+    className?: string;
+}
+/**
+ * The button that opens the popup. Renders a native `<button>`.
+ *
+ * Give it `<Select.Value>` and `<Select.Icon>` as children. It must have an
+ * accessible name: render a `<Select.Label>` inside the same `<Select.Root>`,
+ * a `<Field.Label nativeLabel={false}>` in the same `<Field.Root>`, or pass
+ * `aria-label` here. In development the trigger warns once if it ends up with
+ * none of them.
+ */
+export declare const SelectTrigger: React.ForwardRefExoticComponent<SelectTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+type BaseValueProps = React.ComponentPropsWithoutRef<typeof BaseSelect.Value>;
+export interface SelectValueProps extends Omit<BaseValueProps, "className"> {
+    /**
+     * Additional class name(s). Applied after the internal styles so consumer
+     * utilities (e.g. Tailwind) win without needing `!important`.
+     */
+    className?: string;
+}
+/**
+ * The selected item's label inside the trigger. Renders a `<span>`.
+ *
+ * By default this renders the raw `value`. Pass `items` to `<Select.Root>` to
+ * render the matching label instead, or pass a function as `children` to
+ * format it yourself.
+ *
+ * A `placeholder` cannot be cleared by the user once a value is chosen. If the
+ * selection has to be clearable from the popup, render an item whose value is
+ * `null` instead of using `placeholder`.
+ */
+export declare const SelectValue: React.ForwardRefExoticComponent<SelectValueProps & React.RefAttributes<HTMLSpanElement>>;
+type BaseIconProps = React.ComponentPropsWithoutRef<typeof BaseSelect.Icon>;
+export interface SelectIconProps extends Omit<BaseIconProps, "className"> {
+    /**
+     * Icon to render. Defaults to a caret pair, which stays correct whichever
+     * side the popup ends up on — including `alignItemWithTrigger` mode, where
+     * it opens over the trigger and has no side at all.
+     * @default <CaretUpDownIcon />
+     */
+    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 affordance that marks the trigger as a select. Renders a `<span>`, and
+ * carries `data-popup-open` so it can react to the popup's state.
+ *
+ * Purely decorative — the trigger's own role and `aria-expanded` are what
+ * reach assistive technology.
+ */
+export declare const SelectIcon: React.ForwardRefExoticComponent<SelectIconProps & React.RefAttributes<HTMLSpanElement>>;
+type BasePopupProps = React.ComponentPropsWithoutRef<typeof BaseSelect.Popup>;
+type BasePositionerProps = React.ComponentPropsWithoutRef<typeof BaseSelect.Positioner>;
+type BasePortalProps = React.ComponentPropsWithoutRef<typeof BaseSelect.Portal>;
+export interface SelectPopupProps extends Omit<BasePopupProps, "className"> {
+    /**
+     * The items, separators and groups to render. They are placed inside
+     * `<Select.List>`, which is the element that actually scrolls.
+     */
+    children?: React.ReactNode;
+    /**
+     * Whether the popup overlaps the trigger so the selected item's text lines
+     * up with the trigger's value text. While this is active `data-side` is
+     * `"none"` on both the positioner and the popup, `side`/`align`/`sideOffset`
+     * are ignored, and the enter/exit transition is suppressed. Base UI also
+     * disables it automatically for touch input and when the viewport is too
+     * tight, in which case ordinary side placement takes over.
+     * @default true
+     */
+    alignItemWithTrigger?: boolean;
+    /**
+     * Which side of the trigger the popup opens on. Ignored while
+     * `alignItemWithTrigger` is in effect.
+     * @default "bottom"
+     */
+    side?: BasePositionerProps["side"];
+    /**
+     * How the popup aligns along the chosen side. Ignored while
+     * `alignItemWithTrigger` is in effect.
+     * @default "center"
+     */
+    align?: BasePositionerProps["align"];
+    /**
+     * Gap in pixels between the trigger and the popup. Ignored while
+     * `alignItemWithTrigger` is in effect.
+     * @default 4
+     */
+    sideOffset?: BasePositionerProps["sideOffset"];
+    /**
+     * Extra offset in pixels along the alignment axis. Ignored while
+     * `alignItemWithTrigger` is in effect.
+     * @default 0
+     */
+    alignOffset?: BasePositionerProps["alignOffset"];
+    /**
+     * Space to keep between the popup and the edge of its collision boundary.
+     * @default 5
+     */
+    collisionPadding?: BasePositionerProps["collisionPadding"];
+    /**
+     * Render the popup into a different container instead of `<body>`.
+     */
+    container?: BasePortalProps["container"];
+    /**
+     * Render a dimming layer behind the popup. Off by default — a select is a
+     * menu, not a dialog — but useful on small screens where the popup covers
+     * most of the page.
+     * @default false
+     */
+    backdrop?: boolean;
+    /**
+     * Render the hover-to-scroll arrows at the top and bottom of the list. They
+     * are a pointer convenience only: Base UI does not render them for touch
+     * input, and the list scrolls by wheel, drag, keyboard and typeahead
+     * regardless, so no item is ever reachable only through them.
+     * @default true
+     */
+    scrollArrows?: boolean;
+    /**
+     * Where focus goes when the popup closes. There is no `initialFocus`
+     * counterpart on a select popup — Base UI always moves focus to the
+     * highlighted item on open.
+     * @default the trigger
+     */
+    finalFocus?: BasePopupProps["finalFocus"];
+    /**
+     * Additional class name(s) for the popup surface. Applied after the
+     * internal styles so consumer utilities win without needing `!important`.
+     */
+    className?: string;
+    /**
+     * Additional class name(s) for the positioner — the absolutely positioned
+     * wrapper around the popup. Use this for `z-index` or a `min-height` that
+     * tunes how often `alignItemWithTrigger` falls back.
+     */
+    positionerClassName?: string;
+}
+/**
+ * The floating surface holding the list of items.
+ *
+ * This one part renders the whole floating half of Base UI's anatomy —
+ * `Portal` → (`Backdrop`) → `Positioner` → `Popup` → `ScrollUpArrow` +
+ * `List` + `ScrollDownArrow` — because those elements are meaningless apart
+ * and each one has a job the styles depend on: the positioner owns
+ * `--anchor-width` and `--available-height`, the popup owns the surface, and
+ * the list owns scrolling (which is what the scroll arrows measure).
+ */
+export declare const SelectPopup: React.ForwardRefExoticComponent<SelectPopupProps & React.RefAttributes<HTMLDivElement>>;
+type BaseItemProps = React.ComponentPropsWithoutRef<typeof BaseSelect.Item>;
+export interface SelectItemProps extends Omit<BaseItemProps, "className"> {
+    /**
+     * The item's label. Rendered inside `<Select.ItemText>`, which is what
+     * `<Select.Value>` mirrors in the trigger and what typeahead matches on.
+     */
+    children?: React.ReactNode;
+    /**
+     * The value this item selects. `null` is a legitimate value and is how you
+     * offer a "clear the selection" row inside the list.
+     * @default null
+     */
+    value?: unknown;
+    /**
+     * Plain-text label used for typeahead when `children` is not a string.
+     */
+    label?: string;
+    /**
+     * Whether the item ignores user interaction. Disabled items stay in the
+     * list and stay announced; typeahead skips them.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * What marks the item as selected. Rendered inside
+     * `<Select.ItemIndicator>`, which only mounts while the item is selected.
+     * @default <CheckIcon />
+     */
+    indicator?: React.ReactNode;
+    /**
+     * Additional class name(s). Applied after the internal styles so consumer
+     * utilities (e.g. Tailwind) win without needing `!important`.
+     */
+    className?: string;
+}
+/**
+ * One option in the popup. Renders a `<div>` with `role="option"`.
+ *
+ * `data-highlighted` is the focus analogue here: Base UI moves real DOM focus
+ * between items with a roving tabindex, and (with `highlightItemOnHover`,
+ * which is on by default) pointer hover sets the same attribute. Because the
+ * list is a clipping scroll container, the focus ring is applied inset via
+ * `data-focus-inset` so `overflow` cannot crop it.
+ */
+export declare const SelectItem: React.ForwardRefExoticComponent<SelectItemProps & React.RefAttributes<HTMLDivElement>>;
+type BaseGroupProps = React.ComponentPropsWithoutRef<typeof BaseSelect.Group>;
+export interface SelectGroupProps extends Omit<BaseGroupProps, "className"> {
+    /**
+     * Additional class name(s). Applied after the internal styles so consumer
+     * utilities (e.g. Tailwind) win without needing `!important`.
+     */
+    className?: string;
+}
+/**
+ * Groups related items under a heading. Renders a `<div>` with
+ * `role="group"`; Base UI associates it with the `<Select.GroupLabel>` inside
+ * it automatically, so the heading is announced with its members.
+ */
+export declare const SelectGroup: React.ForwardRefExoticComponent<SelectGroupProps & React.RefAttributes<HTMLDivElement>>;
+type BaseGroupLabelProps = React.ComponentPropsWithoutRef<typeof BaseSelect.GroupLabel>;
+export interface SelectGroupLabelProps extends Omit<BaseGroupLabelProps, "className"> {
+    /**
+     * Additional class name(s). Applied after the internal styles so consumer
+     * utilities (e.g. Tailwind) win without needing `!important`.
+     */
+    className?: string;
+}
+/**
+ * The heading for a `<Select.Group>`. Renders a `<div>`, indented past the
+ * indicator column so its text lines up with the item text rather than with
+ * the check marks.
+ */
+export declare const SelectGroupLabel: React.ForwardRefExoticComponent<SelectGroupLabelProps & React.RefAttributes<HTMLDivElement>>;
+type BaseSeparatorProps = React.ComponentPropsWithoutRef<typeof BaseSelect.Separator>;
+export interface SelectSeparatorProps extends Omit<BaseSeparatorProps, "className"> {
+    /**
+     * Orientation of the rule. A select list is vertical, so the separator
+     * between two groups runs horizontally.
+     * @default "horizontal"
+     */
+    orientation?: BaseSeparatorProps["orientation"];
+    /**
+     * Additional class name(s). Applied after the internal styles so consumer
+     * utilities (e.g. Tailwind) win without needing `!important`.
+     */
+    className?: string;
+}
+/**
+ * A divider between groups of items. Renders a `<div>` with
+ * `role="separator"`, so it is exposed to assistive technology rather than
+ * being a purely visual line.
+ */
+export declare const SelectSeparator: React.ForwardRefExoticComponent<SelectSeparatorProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * A select built on Base UI's unstyled `Select` primitives.
+ *
+ * ```tsx
+ * <Select.Root<Theme> items={themes} defaultValue="system">
+ *   <Select.Label>Theme</Select.Label>
+ *   <Select.Trigger>
+ *     <Select.Value />
+ *     <Select.Icon />
+ *   </Select.Trigger>
+ *   <Select.Popup>
+ *     <Select.Item value="system">System</Select.Item>
+ *     <Select.Item value="light">Light</Select.Item>
+ *   </Select.Popup>
+ * </Select.Root>
+ * ```
+ *
+ * Styling is driven entirely by `data-*` attributes and `--forte-select-*`
+ * custom properties, so it can be re-skinned from plain CSS or targeted with
+ * Tailwind arbitrary variants (`data-[highlighted]:...`) without wrapping.
+ * Each part declares its own knobs, so an ancestor's value is only inherited
+ * and loses — set them on the part itself via `className`. The popup is also
+ * portalled to `<body>`, so an ancestor of the trigger could not reach it in
+ * any case. `positionerClassName` reaches `--forte-select-z-index` and
+ * `--forte-select-positioner-min-height`, the only two declared on the
+ * positioner. The global `--forte-color-*` / `--forte-control-*` / `--forte-radius-*`
+ * / `--forte-space-*` tokens these resolve to ARE inherited, so re-pointing
+ * those from `:root` or a theme scope moves every select at once.
+ */
+export declare const Select: {
+    Root: typeof SelectRoot;
+    Label: React.ForwardRefExoticComponent<SelectLabelProps & React.RefAttributes<HTMLDivElement>>;
+    Trigger: React.ForwardRefExoticComponent<SelectTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+    Value: React.ForwardRefExoticComponent<SelectValueProps & React.RefAttributes<HTMLSpanElement>>;
+    Icon: React.ForwardRefExoticComponent<SelectIconProps & React.RefAttributes<HTMLSpanElement>>;
+    Popup: React.ForwardRefExoticComponent<SelectPopupProps & React.RefAttributes<HTMLDivElement>>;
+    Item: React.ForwardRefExoticComponent<SelectItemProps & React.RefAttributes<HTMLDivElement>>;
+    Group: React.ForwardRefExoticComponent<SelectGroupProps & React.RefAttributes<HTMLDivElement>>;
+    GroupLabel: React.ForwardRefExoticComponent<SelectGroupLabelProps & React.RefAttributes<HTMLDivElement>>;
+    Separator: React.ForwardRefExoticComponent<SelectSeparatorProps & React.RefAttributes<HTMLDivElement>>;
+};
+export {};

package/dist/components/select/Select.js

@@ -0,0 +1,3 @@
+"use client";
+import { a as e, c as t, d as n, i as r, l as i, n as a, o, r as s, s as c, t as l, u } from "../../Select-BP-zvdXm.js";
+export { l as Select, a as SelectGroup, s as SelectGroupLabel, r as SelectIcon, e as SelectItem, o as SelectLabel, c as SelectPopup, t as SelectRoot, i as SelectSeparator, u as SelectTrigger, n as SelectValue };

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

@@ -0,0 +1,2 @@
+export { Select, SelectRoot, SelectLabel, SelectTrigger, SelectValue, SelectIcon, SelectPopup, SelectItem, SelectGroup, SelectGroupLabel, SelectSeparator, } from './Select';
+export type { SelectRootProps, SelectLabelProps, SelectTriggerProps, SelectValueProps, SelectIconProps, SelectPopupProps, SelectItemProps, SelectGroupProps, SelectGroupLabelProps, SelectSeparatorProps, SelectSize, SelectVariant, } from './Select';

package/dist/components/select/index.js

@@ -0,0 +1,2 @@
+import { a as e, c as t, d as n, i as r, l as i, n as a, o, r as s, s as c, t as l, u } from "../../Select-BP-zvdXm.js";
+export { l as Select, a as SelectGroup, s as SelectGroupLabel, r as SelectIcon, e as SelectItem, o as SelectLabel, c as SelectPopup, t as SelectRoot, i as SelectSeparator, u as SelectTrigger, n as SelectValue };

package/dist/components/separator/Separator.d.ts

@@ -0,0 +1,75 @@
+import { Separator as BaseSeparator } from '@base-ui/react/separator';
+import * as React from "react";
+export type SeparatorOrientation = "horizontal" | "vertical";
+export type SeparatorVariant = "solid" | "dashed" | "dotted";
+type BaseSeparatorProps = React.ComponentPropsWithoutRef<typeof BaseSeparator>;
+export interface SeparatorProps extends Omit<BaseSeparatorProps, "className"> {
+    /**
+     * Which way the rule runs — and therefore which axis it separates. A
+     * `horizontal` rule is a line across the inline axis dividing stacked
+     * content; a `vertical` one is a line down the block axis dividing content
+     * in a row.
+     *
+     * It is also what Base UI reports as `aria-orientation`, so it is a
+     * semantic choice, not only a visual one.
+     * @default "horizontal"
+     */
+    orientation?: SeparatorOrientation;
+    /**
+     * The line style. A rule has exactly one visual dimension, so this is the
+     * whole of it: `solid` for structural divisions, `dashed` or `dotted` for
+     * softer, more provisional ones (a drop zone's edge, an optional section).
+     * @default "solid"
+     */
+    variant?: SeparatorVariant;
+    /**
+     * Drops `role="separator"`, leaving the line visible but absent from the
+     * accessibility tree.
+     *
+     * Use it when the grouping is already conveyed some other way — a heading,
+     * a landmark, a list — and the rule is only reinforcing it visually.
+     * Announcing a boundary that the structure already communicates makes a
+     * screen reader read the page's decoration out loud.
+     * @default false
+     */
+    decorative?: boolean;
+    /**
+     * Additional class name(s). Applied after the internal styles so consumer
+     * utilities (e.g. Tailwind) win without needing `!important`.
+     */
+    className?: string;
+}
+/**
+ * A rule between things, built on Base UI's `Separator` primitive.
+ *
+ * ```tsx
+ * <Separator />
+ * <Separator orientation="vertical" />
+ * ```
+ *
+ * A vertical separator has no length of its own — it is an empty box. Inside a
+ * flex row it stretches to the tallest sibling; anywhere else it falls back to
+ * one line's height, which `--forte-separator-min-length` controls. That is the
+ * one thing worth knowing before reaching for it:
+ *
+ * ```tsx
+ * <div style={{ display: "flex", alignItems: "center", gap: "var(--forte-space-3)" }}>
+ *   <span>Draft</span>
+ *   <Separator orientation="vertical" />
+ *   <span>Edited 3m ago</span>
+ * </div>
+ * ```
+ *
+ * In prose, swap the element for the one HTML already has for this:
+ *
+ * ```tsx
+ * <Separator render={<hr />} />
+ * ```
+ *
+ * Every visual decision is a `--forte-separator-*` custom property, and the
+ * orientation is on `data-orientation`, so it can be re-skinned from plain CSS
+ * or targeted with Tailwind arbitrary variants
+ * (`data-[orientation=vertical]:...`) without wrapping.
+ */
+export declare const Separator: React.ForwardRefExoticComponent<SeparatorProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/dist/components/separator/Separator.js

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

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

@@ -0,0 +1,2 @@
+export { Separator } from './Separator';
+export type { SeparatorProps, SeparatorOrientation, SeparatorVariant, } from './Separator';

package/dist/components/separator/index.js

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

package/dist/components/skeleton/Skeleton.d.ts

@@ -0,0 +1,169 @@
+import * as React from "react";
+export type SkeletonVariant = "rect" | "text" | "circle";
+export type SkeletonAnimation = "pulse" | "shimmer" | "none";
+/**
+ * A CSS length. A bare number is pixels, which is the one place in this
+ * library a raw pixel value is reasonable: it is the consumer's measurement of
+ * their own content, not a design decision baked into the component.
+ */
+type SkeletonLength = string | number;
+export interface SkeletonRootProps extends Omit<React.ComponentPropsWithoutRef<"span">, "className"> {
+    /**
+     * The silhouette. `rect` is a block — a thumbnail, a card, a button.
+     * `circle` is an avatar or a status dot, and stays round under
+     * `data-forte-radius="none"`.
+     *
+     * `text` is a thin bar the height of the ink a line of text actually puts
+     * down, and it is `inline-block`, so it can sit inside a real sentence —
+     * "posted by ▓▓▓▓ an hour ago". Note that it paints the ink and nothing
+     * else: standing on its own in a column it is SHORTER than the line it
+     * replaces, because the leading is missing. Reach for `Skeleton.Text` there,
+     * `lines={1}` included — reserving the whole line box is exactly what it is
+     * for.
+     * @default "rect"
+     */
+    variant?: SkeletonVariant;
+    /**
+     * How the placeholder signals that it is a placeholder.
+     *
+     * `pulse` is a shallow opacity breathe — quiet, and identical whichever way
+     * it is laid out. `shimmer` sends a band of light across the fill, which
+     * reads as faster and suits a screenful of placeholders; it follows the
+     * reading direction, and degrades into `pulse` under reduced motion.
+     * `none` is a static fill, for a screenshot test or a page where something
+     * else already owns the movement.
+     *
+     * Falls back to the enclosing `Skeleton.Group`, then to `pulse`.
+     * @default "pulse"
+     */
+    animation?: SkeletonAnimation;
+    /**
+     * Whether the placeholder is showing. When it flips to `false` the skeleton
+     * renders `children` — with no wrapper of its own, so nothing of the
+     * placeholder is left in the DOM or in the layout.
+     *
+     * Falls back to the enclosing `Skeleton.Group`, then to `true`.
+     * @default true
+     */
+    loading?: boolean;
+    /**
+     * Width of the placeholder. A number is pixels; a string is any CSS length,
+     * including a percentage.
+     *
+     * Optional in every sense — `className="w-24"` does the same job and wins
+     * over this, and with `children` present the content decides.
+     */
+    width?: SkeletonLength;
+    /**
+     * Height of the placeholder. A number is pixels; a string is any CSS length.
+     *
+     * The default is one line box at the inherited font size, so a skeleton
+     * standing in for a line of text needs no measurement at all.
+     */
+    height?: SkeletonLength;
+    /**
+     * The real content, used only to SIZE the placeholder.
+     *
+     * While loading it is laid out and then hidden with `visibility`, so the
+     * skeleton is exactly the box the content will occupy and nothing shifts
+     * when it arrives. Note that this renders the content — pass a string or a
+     * cheap node, not a subtree you would rather not mount twice.
+     */
+    children?: React.ReactNode;
+    /**
+     * Additional class name(s). Applied after the internal styles so consumer
+     * utilities (e.g. Tailwind) win without needing `!important`.
+     */
+    className?: string;
+}
+export interface SkeletonTextProps extends Omit<React.ComponentPropsWithoutRef<"span">, "className" | "children"> {
+    /**
+     * How many lines to draw. The block is exactly as tall as that many lines of
+     * real text at the inherited font size, so swapping it for the paragraph
+     * moves nothing below it.
+     * @default 3
+     */
+    lines?: number;
+    /**
+     * Width of the last line. Real paragraphs end mid-line, and a block of
+     * equal-length bars reads as a table rather than as prose. Any CSS length; a
+     * number is pixels.
+     * @default "60%"
+     */
+    lastLineWidth?: SkeletonLength;
+    /** See `Skeleton.Root`. Falls back to the enclosing group, then `pulse`. */
+    animation?: SkeletonAnimation;
+    /** See `Skeleton.Root`. Falls back to the enclosing group, then `true`. */
+    loading?: boolean;
+    /**
+     * Additional class name(s). Applied after the internal styles so consumer
+     * utilities (e.g. Tailwind) win without needing `!important`.
+     */
+    className?: string;
+}
+export interface SkeletonGroupProps extends Omit<React.ComponentPropsWithoutRef<"div">, "className"> {
+    /**
+     * Whether the region is still loading. Sets `aria-busy`, swaps the announced
+     * message, and becomes the default for every skeleton inside.
+     * @default true
+     */
+    loading?: boolean;
+    /**
+     * What is being waited for. This is the only thing a screen reader gets —
+     * the placeholders themselves are `aria-hidden`, because a picture of
+     * absence is not information.
+     *
+     * Say what is coming rather than that something is: "Loading invoices" tells
+     * someone whether the wait concerns them; "Loading" makes them guess.
+     * @default "Loading"
+     */
+    label?: string;
+    /**
+     * What to announce once `loading` turns false. Left unset, the region simply
+     * goes quiet — which is the right default when the content that arrives is
+     * itself obvious, and the wrong one when the user is waiting on a background
+     * refresh they cannot see.
+     */
+    doneLabel?: string;
+    /**
+     * Default animation for every skeleton in the group. A skeleton that sets
+     * its own still wins.
+     * @default "pulse"
+     */
+    animation?: SkeletonAnimation;
+    /**
+     * Additional class name(s). Applied after the internal styles so consumer
+     * utilities (e.g. Tailwind) win without needing `!important`.
+     */
+    className?: string;
+}
+/**
+ * A placeholder that occupies exactly the space the real thing will.
+ *
+ * Base UI has no skeleton primitive — there is no interaction to model and no
+ * state machine to get right — so this is one of the few components in the
+ * library not built on one. What is left is the part that is usually got
+ * wrong: metrics that actually match the content, so the page does not jump
+ * when the data lands; one announcement for one wait; and an animation that
+ * stays a "this is coming" cue when the user has asked for less motion,
+ * instead of freezing into something that reads as content that failed.
+ *
+ * ```tsx
+ * <Skeleton.Group loading={pending} label="Loading profile">
+ *   <div className="flex items-center gap-3">
+ *     <Skeleton.Root variant="circle" width="2.5rem" />
+ *     <Skeleton.Text lines={2} className="w-48" />
+ *   </div>
+ * </Skeleton.Group>
+ * ```
+ *
+ * Styling is driven by `data-*` attributes and `--forte-skeleton-*` custom
+ * properties, so it can be re-skinned from plain CSS or targeted with Tailwind
+ * arbitrary variants (`data-[variant=circle]:...`) without wrapping.
+ */
+export declare const Skeleton: {
+    Root: React.ForwardRefExoticComponent<SkeletonRootProps & React.RefAttributes<HTMLSpanElement>>;
+    Text: React.ForwardRefExoticComponent<SkeletonTextProps & React.RefAttributes<HTMLSpanElement>>;
+    Group: React.ForwardRefExoticComponent<SkeletonGroupProps & React.RefAttributes<HTMLDivElement>>;
+};
+export {};

package/dist/components/skeleton/Skeleton.js

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

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

@@ -0,0 +1,2 @@
+export { Skeleton } from './Skeleton';
+export type { SkeletonVariant, SkeletonAnimation, SkeletonRootProps, SkeletonTextProps, SkeletonGroupProps, } from './Skeleton';

package/dist/components/skeleton/index.js

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