@forte-ui/react 1.0.0-alpha.1

package/dist/components/preview-card/PreviewCard.d.ts

@@ -0,0 +1,307 @@
+import { PreviewCard as BasePreviewCard } from '@base-ui/react/preview-card';
+import * as React from "react";
+export type PreviewCardSize = "sm" | "md" | "lg";
+export interface PreviewCardRootProps<Payload = unknown> extends BasePreviewCard.Root.Props<Payload> {
+    /**
+     * Whether the card is open when it first mounts. For a controlled card use
+     * `open` instead.
+     * @default false
+     */
+    defaultOpen?: BasePreviewCard.Root.Props<Payload>["defaultOpen"];
+    /**
+     * Whether the card is currently open. Pass this together with
+     * `onOpenChange` to control the card.
+     */
+    open?: BasePreviewCard.Root.Props<Payload>["open"];
+    /**
+     * Called when the card wants to open or close. The second argument carries
+     * the reason (`'trigger-hover'`, `'trigger-focus'`, `'trigger-press'`,
+     * `'outside-press'`, `'escape-key'`, `'imperative-action'`, `'none'`), the
+     * trigger involved, and can `cancel()` the change.
+     */
+    onOpenChange?: BasePreviewCard.Root.Props<Payload>["onOpenChange"];
+    /**
+     * Called after the open or close transition has finished. Use this rather
+     * than a timer when work has to wait for the card to actually leave.
+     */
+    onOpenChangeComplete?: BasePreviewCard.Root.Props<Payload>["onOpenChangeComplete"];
+    /**
+     * Imperative escape hatch. `close()` closes the card; `unmount()` forces the
+     * popup out of the DOM, for when an exit animation is driven externally.
+     */
+    actionsRef?: BasePreviewCard.Root.Props<Payload>["actionsRef"];
+    /**
+     * Associates this card with detached triggers created through
+     * `PreviewCard.createHandle()`, so one popup can serve triggers that live
+     * elsewhere in the tree.
+     */
+    handle?: BasePreviewCard.Root.Props<Payload>["handle"];
+    /**
+     * Which trigger the card is currently attached to, for controlled
+     * multi-trigger setups. There is no separate `onTriggerIdChange` — read the
+     * new id off `eventDetails.trigger` inside `onOpenChange`.
+     */
+    triggerId?: BasePreviewCard.Root.Props<Payload>["triggerId"];
+    /**
+     * The initially attached trigger id. Pairs with `defaultOpen` the way
+     * `triggerId` pairs with `open`.
+     */
+    defaultTriggerId?: BasePreviewCard.Root.Props<Payload>["defaultTriggerId"];
+    /**
+     * The trigger and popup for this card. May also be a render function
+     * receiving `{ payload }` from the trigger that opened it.
+     */
+    children?: BasePreviewCard.Root.Props<Payload>["children"];
+}
+/**
+ * Groups one preview card's trigger and popup, and owns its open state.
+ * Renders no DOM element, so it takes no `className`, `style` or `ref`.
+ */
+declare function PreviewCardRoot<Payload = unknown>(props: PreviewCardRootProps<Payload>): React.JSX.Element;
+export interface PreviewCardTriggerProps<Payload = unknown> extends Omit<BasePreviewCard.Trigger.Props<Payload>, "className"> {
+    /**
+     * Where the link goes. Not optional in practice: the card is an enrichment
+     * of a link, and an `<a>` without `href` is neither focusable nor
+     * announced as a link — so leaving it off strands every keyboard user,
+     * who is also the one person for whom the card is not the point.
+     */
+    href?: BasePreviewCard.Trigger.Props<Payload>["href"];
+    /**
+     * How long the pointer must rest on the link before the card opens, in
+     * milliseconds. Also the wait before a focused link opens it.
+     * @default 600
+     */
+    delay?: BasePreviewCard.Trigger.Props<Payload>["delay"];
+    /**
+     * How long the card lingers after the pointer leaves, in milliseconds. The
+     * pointer only has to reach the popup within this window along a direct
+     * path — Base UI grants the diagonal — so this is the tolerance for
+     * overshooting, not the whole journey.
+     * @default 300
+     */
+    closeDelay?: BasePreviewCard.Trigger.Props<Payload>["closeDelay"];
+    /**
+     * Associates a detached trigger with the `PreviewCard.Root` carrying the
+     * same handle, created once outside render with
+     * `PreviewCard.createHandle()`.
+     */
+    handle?: BasePreviewCard.Trigger.Props<Payload>["handle"];
+    /**
+     * Data handed to the card when this trigger opens it, so one popup can
+     * render a different profile per link. Read it from the render-function
+     * form of `PreviewCard.Root`'s children.
+     */
+    payload?: BasePreviewCard.Trigger.Props<Payload>["payload"];
+    /**
+     * Identifies the trigger. Also how `PreviewCard.Root`'s `triggerId` names
+     * the active trigger in controlled multi-trigger mode.
+     */
+    id?: BasePreviewCard.Trigger.Props<Payload>["id"];
+    /**
+     * Replaces the rendered `<a>` with another element or component —
+     * `render={<Link href="/u/ada" />}` for a router link is the common case.
+     * The trigger's own link styling steps aside when this is present, so the
+     * two never fight over the cascade.
+     */
+    render?: BasePreviewCard.Trigger.Props<Payload>["render"];
+    /**
+     * 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 PreviewCardTriggerComponent {
+    <Payload>(props: PreviewCardTriggerProps<Payload> & React.RefAttributes<HTMLAnchorElement>): React.JSX.Element;
+}
+type PositionerProps = BasePreviewCard.Positioner.Props;
+export interface PreviewCardPopupProps extends Omit<BasePreviewCard.Popup.Props, "className"> {
+    /**
+     * Width cap for the card. The card shrinks to fit its content and only grows
+     * to this width when the content asks for it, so this is a ceiling rather
+     * than a fixed measure. Further clamped to the space the positioner reports
+     * as available.
+     * @default "md"
+     */
+    size?: PreviewCardSize;
+    /**
+     * Which side of the link to place the card on. Flips automatically to avoid
+     * collisions. `"inline-start"` / `"inline-end"` follow writing direction.
+     * @default "bottom"
+     */
+    side?: PositionerProps["side"];
+    /**
+     * How the card lines up with the link along the chosen side.
+     * @default "center"
+     */
+    align?: PositionerProps["align"];
+    /**
+     * Gap between link and card, in pixels, or a function returning one. When an
+     * `Arrow` is rendered this must exceed the arrow's height or the arrow
+     * overlaps the link; the default leaves room for the default arrow.
+     *
+     * It is also the gap the pointer crosses on its way in. Base UI covers the
+     * trip with a safe polygon, so a wider offset is safe — but it is the one
+     * number that makes the card feel out of reach if it grows much past the
+     * text it belongs to.
+     * @default 8
+     */
+    sideOffset?: PositionerProps["sideOffset"];
+    /**
+     * Shifts the card along the alignment axis, in pixels, or a function
+     * returning one.
+     * @default 0
+     */
+    alignOffset?: PositionerProps["alignOffset"];
+    /**
+     * Minimum distance, in pixels, the arrow keeps from the card's corners
+     * before it is allowed to sit off-centre (`data-uncentered`).
+     * @default 5
+     */
+    arrowPadding?: PositionerProps["arrowPadding"];
+    /**
+     * The element the card positions against, when it should not be the link.
+     * Accepts an element, a ref, a getter, or a virtual element.
+     */
+    anchor?: PositionerProps["anchor"];
+    /**
+     * The boundary the card tries to stay inside of.
+     * @default "clipping-ancestors"
+     */
+    collisionBoundary?: PositionerProps["collisionBoundary"];
+    /**
+     * Space, in pixels, kept between the card and the collision boundary.
+     * @default 5
+     */
+    collisionPadding?: PositionerProps["collisionPadding"];
+    /**
+     * How the card reacts when it would overflow the boundary — whether it
+     * flips, shifts, or stays put.
+     */
+    collisionAvoidance?: PositionerProps["collisionAvoidance"];
+    /**
+     * Keeps the card glued to the link while it scrolls out of view instead of
+     * letting it detach.
+     * @default false
+     */
+    sticky?: PositionerProps["sticky"];
+    /**
+     * Whether the card is positioned with `position: absolute` or
+     * `position: fixed`.
+     * @default "absolute"
+     */
+    positionMethod?: PositionerProps["positionMethod"];
+    /**
+     * Stops the card re-measuring the anchor on scroll and resize. Cheaper, but
+     * the card drifts if the anchor moves.
+     * @default false
+     */
+    disableAnchorTracking?: PositionerProps["disableAnchorTracking"];
+    /**
+     * Keeps the portal — and therefore the card — in the DOM while it is closed.
+     * Needed when something inside must stay mounted (an iframe, a media
+     * element).
+     * @default false
+     */
+    keepMounted?: BasePreviewCard.Portal.Props["keepMounted"];
+    /**
+     * Where the portal renders. Defaults to `document.body`; point it at a
+     * container when the card has to live inside a specific stacking or shadow
+     * root.
+     */
+    container?: BasePreviewCard.Portal.Props["container"];
+    /**
+     * Additional class name(s) for the positioner element, which owns placement
+     * and `z-index`. Use it to re-stack a single card through
+     * `--forte-preview-card-z-index`.
+     */
+    positionerClassName?: string;
+    /**
+     * Forwarded to the popup element.
+     */
+    ref?: React.Ref<HTMLDivElement>;
+    /**
+     * Additional class name(s). Applied after the internal styles so consumer
+     * utilities (e.g. Tailwind) win without needing `!important`.
+     */
+    className?: string;
+}
+export interface PreviewCardArrowProps extends Omit<BasePreviewCard.Arrow.Props, "className"> {
+    /**
+     * Replaces the built-in wedge. The default SVG inherits the card's colours
+     * through `--forte-preview-card-bg`, so a custom skin usually needs nothing
+     * here.
+     */
+    children?: React.ReactNode;
+    /**
+     * Forwarded to the arrow element.
+     */
+    ref?: React.Ref<HTMLDivElement>;
+    /**
+     * Additional class name(s). Applied after the internal styles so consumer
+     * utilities (e.g. Tailwind) win without needing `!important`.
+     */
+    className?: string;
+}
+export interface PreviewCardViewportProps extends Omit<BasePreviewCard.Viewport.Props, "className"> {
+    /**
+     * The content that changes from link to link.
+     */
+    children?: BasePreviewCard.Viewport.Props["children"];
+    /**
+     * Forwarded to the viewport element.
+     */
+    ref?: React.Ref<HTMLDivElement>;
+    /**
+     * Additional class name(s). Applied after the internal styles so consumer
+     * utilities (e.g. Tailwind) win without needing `!important`.
+     */
+    className?: string;
+}
+/**
+ * A card that previews where a link goes, revealed by resting on it. Built on
+ * Base UI's unstyled `PreviewCard` primitive.
+ *
+ * ```tsx
+ * <PreviewCard.Root>
+ *   <PreviewCard.Trigger href="/u/ada">@ada</PreviewCard.Trigger>
+ *   <PreviewCard.Popup>
+ *     <PreviewCard.Arrow />
+ *     …
+ *   </PreviewCard.Popup>
+ * </PreviewCard.Root>
+ * ```
+ *
+ * ## Preview card, popover, or tooltip?
+ *
+ * All three are anchored surfaces; what separates them is who the content is
+ * for and how it is reached.
+ *
+ * - A `PreviewCard` enriches a **link**. It opens on hover or focus after a
+ *   long delay, it is not announced, and it can hold a whole layout — but only
+ *   as a summary of the destination, because a keyboard user never enters it.
+ * - A `Popover` is for content that **matters**: announced, tabbable, and
+ *   openable by touch. Anything the user has to read or act on goes here.
+ * - A `Tooltip` labels a control that already does something else.
+ *
+ * The test is what happens if the surface never appears. A preview card that
+ * would be missed is a popover in the wrong component.
+ *
+ * Styling is driven by `data-*` attributes and `--forte-preview-card-*` custom
+ * properties, so it can be re-skinned from plain CSS or targeted with Tailwind
+ * arbitrary variants (`data-[side=top]:...`) without wrapping.
+ */
+export declare const PreviewCard: {
+    Root: typeof PreviewCardRoot;
+    Trigger: PreviewCardTriggerComponent;
+    Popup: React.ForwardRefExoticComponent<Omit<PreviewCardPopupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Arrow: React.ForwardRefExoticComponent<Omit<PreviewCardArrowProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Viewport: React.ForwardRefExoticComponent<Omit<PreviewCardViewportProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    /** Creates a handle that connects a `PreviewCard.Root` to detached triggers. */
+    createHandle: typeof BasePreviewCard.createHandle;
+};
+export {};

package/dist/components/preview-card/PreviewCard.js

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

package/dist/components/preview-card/index.d.ts

@@ -0,0 +1,2 @@
+export { PreviewCard } from './PreviewCard';
+export type { PreviewCardSize, PreviewCardRootProps, PreviewCardTriggerProps, PreviewCardPopupProps, PreviewCardArrowProps, PreviewCardViewportProps, } from './PreviewCard';

package/dist/components/preview-card/index.js

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

package/dist/components/progress/Progress.d.ts

@@ -0,0 +1,156 @@
+import { Progress as BaseProgress } from '@base-ui/react/progress';
+import * as React from "react";
+export type ProgressSize = "sm" | "md" | "lg";
+export type ProgressTone = "primary" | "secondary" | "success" | "warning" | "danger" | "neutral";
+type BaseRootProps = React.ComponentPropsWithoutRef<typeof BaseProgress.Root>;
+export interface ProgressRootProps extends Omit<BaseRootProps, "className"> {
+    /**
+     * Thickness of the bar and the size of the label row — `4px`, `6px` or
+     * `10px` of track. The bar's *length* is not a size: it fills its container
+     * by default, and `--forte-progress-length` is the knob for anything else.
+     * @default "md"
+     */
+    size?: ProgressSize;
+    /**
+     * Which semantic colour set the fill draws from. The rail stays neutral in
+     * every tone — it is the part that has *not* happened yet, and colouring it
+     * would compete with the fill it exists to contrast against.
+     * @default "primary"
+     */
+    tone?: ProgressTone;
+    /**
+     * Additional class name(s). Applied after the internal styles so consumer
+     * utilities (e.g. Tailwind) win without needing `!important`.
+     */
+    className?: string;
+}
+/**
+ * Groups every part of the bar and owns its value. Renders a
+ * `<div role="progressbar">` laid out as a two-column grid: `Label` and
+ * `Value` share the first row, and `Track` spans both underneath.
+ *
+ * `value` is required and `null` is a meaningful setting — it is how you say
+ * "this is running and I cannot say how far along it is", which switches every
+ * part below into the indeterminate animation.
+ *
+ * ```tsx
+ * <Progress.Root value={62}>
+ *   <Progress.Label>Uploading</Progress.Label>
+ *   <Progress.Value />
+ *   <Progress.Track>
+ *     <Progress.Indicator />
+ *   </Progress.Track>
+ * </Progress.Root>
+ * ```
+ */
+export declare const ProgressRoot: React.ForwardRefExoticComponent<ProgressRootProps & React.RefAttributes<HTMLDivElement>>;
+type BaseLabelProps = React.ComponentPropsWithoutRef<typeof BaseProgress.Label>;
+export interface ProgressLabelProps 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;
+}
+/**
+ * Names what is being waited on. Renders a `<span>` wired to the root with
+ * `aria-labelledby`, so it is the bar's accessible name — a progress bar
+ * without one announces a bare percentage and leaves the listener to guess
+ * what it is a percentage of.
+ *
+ * Wrap it in `.forte-visually-hidden` when the surrounding page already says it
+ * in words; that keeps the name in the accessibility tree without repeating it
+ * on screen.
+ */
+export declare const ProgressLabel: React.ForwardRefExoticComponent<ProgressLabelProps & React.RefAttributes<HTMLSpanElement>>;
+type BaseValueProps = React.ComponentPropsWithoutRef<typeof BaseProgress.Value>;
+export interface ProgressValueProps 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 readout, formatted as a percentage by default. Renders an
+ * `aria-hidden` `<span>` — the root already publishes the same number through
+ * `aria-valuenow`, and announcing it twice is worse than once.
+ *
+ * It renders **nothing** while the bar is indeterminate, which is the point:
+ * there is no number to show, and a "0%" that never moves is a lie. Pass a
+ * function child to say something there instead:
+ *
+ * ```tsx
+ * <Progress.Value>
+ *   {(formatted, value) => (value == null ? "Working…" : formatted)}
+ * </Progress.Value>
+ * ```
+ *
+ * Set `format` on `Progress.Root` for units other than percent — `{ style:
+ * "unit", unit: "megabyte" }` turns the readout into "38 MB" while the bar
+ * keeps filling from `min` to `max`.
+ */
+export declare const ProgressValue: React.ForwardRefExoticComponent<ProgressValueProps & React.RefAttributes<HTMLSpanElement>>;
+type BaseTrackProps = React.ComponentPropsWithoutRef<typeof BaseProgress.Track>;
+export interface ProgressTrackProps extends Omit<BaseTrackProps, "className"> {
+    /**
+     * Additional class name(s). Applied after the internal styles so consumer
+     * utilities (e.g. Tailwind) win without needing `!important`.
+     */
+    className?: string;
+}
+/**
+ * The rail the fill runs along, and the only part with an explicit thickness —
+ * `Indicator` sizes its cross axis with `height: inherit`, so a track left to
+ * size itself leaves the fill with nothing to inherit and it collapses to
+ * zero.
+ *
+ * It also clips: the fill carries the same radius, so at 3% the rounded cap is
+ * cut to a sliver of the rail's own end rather than shrinking into a dot.
+ */
+export declare const ProgressTrack: React.ForwardRefExoticComponent<ProgressTrackProps & React.RefAttributes<HTMLDivElement>>;
+type BaseIndicatorProps = React.ComponentPropsWithoutRef<typeof BaseProgress.Indicator>;
+export interface ProgressIndicatorProps extends Omit<BaseIndicatorProps, "className"> {
+    /**
+     * Additional class name(s). Applied after the internal styles so consumer
+     * utilities (e.g. Tailwind) win without needing `!important`.
+     */
+    className?: string;
+}
+/**
+ * The fill. Base UI gives it an inline `width: <percent>%` while the bar is
+ * determinate and *no* inline geometry at all while it is indeterminate, which
+ * is what lets one element be both the fill and the sweeping segment — see the
+ * note at the top of `Progress.module.css`.
+ */
+export declare const ProgressIndicator: React.ForwardRefExoticComponent<ProgressIndicatorProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * A linear progress bar built on Base UI's unstyled `Progress` primitive.
+ *
+ * ```tsx
+ * <Progress.Root value={62} tone="success">
+ *   <Progress.Label>Restoring backup</Progress.Label>
+ *   <Progress.Value />
+ *   <Progress.Track>
+ *     <Progress.Indicator />
+ *   </Progress.Track>
+ * </Progress.Root>
+ * ```
+ *
+ * Pass `value={null}` and the same markup becomes an indeterminate bar: the
+ * readout disappears, and the fill turns into a segment sweeping the rail.
+ * Nothing else about the tree changes, so a component that starts out not
+ * knowing its total can start reporting one without remounting.
+ *
+ * Reach for `ProgressCircle` where the bar's full width is not available — a
+ * button, a card corner, a tile — and for `Spinner` when the wait is short and
+ * a percentage would be noise.
+ */
+export declare const Progress: {
+    Root: React.ForwardRefExoticComponent<ProgressRootProps & React.RefAttributes<HTMLDivElement>>;
+    Label: React.ForwardRefExoticComponent<ProgressLabelProps & React.RefAttributes<HTMLSpanElement>>;
+    Value: React.ForwardRefExoticComponent<ProgressValueProps & React.RefAttributes<HTMLSpanElement>>;
+    Track: React.ForwardRefExoticComponent<ProgressTrackProps & React.RefAttributes<HTMLDivElement>>;
+    Indicator: React.ForwardRefExoticComponent<ProgressIndicatorProps & React.RefAttributes<HTMLDivElement>>;
+};
+export {};

package/dist/components/progress/Progress.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 "../../Progress-BlomDp-X.js";
+export { a as Progress, n as ProgressIndicator, i as ProgressLabel, t as ProgressRoot, e as ProgressTrack, r as ProgressValue };

package/dist/components/progress/ProgressCircle.d.ts

@@ -0,0 +1,166 @@
+import { Progress as BaseProgress } from '@base-ui/react/progress';
+import { ProgressSize, ProgressTone } from './Progress';
+import * as React from "react";
+/**
+ * Same two axes as the bar, and deliberately the same union types: a design
+ * system that calls it `tone="success"` in one shape and `tone="positive"` in
+ * the other has two vocabularies, not one.
+ */
+export type ProgressCircleSize = ProgressSize;
+export type ProgressCircleTone = ProgressTone;
+type BaseRootProps = React.ComponentPropsWithoutRef<typeof BaseProgress.Root>;
+export interface ProgressCircleRootProps extends Omit<BaseRootProps, "className"> {
+    /**
+     * Diameter of the ring — `2.5rem`, `3.5rem` or `5rem`. The stroke is
+     * measured in the ring's own coordinate space rather than in pixels, so it
+     * scales with the diameter and a `sm` circle is a smaller ring rather than a
+     * thinner one.
+     * @default "md"
+     */
+    size?: ProgressCircleSize;
+    /**
+     * Which semantic colour set the arc draws from. The rail behind it stays
+     * neutral in every tone.
+     * @default "primary"
+     */
+    tone?: ProgressCircleTone;
+    /**
+     * Additional class name(s). Applied after the internal styles so consumer
+     * utilities (e.g. Tailwind) win without needing `!important`.
+     */
+    className?: string;
+}
+/**
+ * Groups every part of the ring and owns its value. Renders a
+ * `<div role="progressbar">` laid out as a grid where `Track` and `Value`
+ * share one cell — which is what centres the readout inside the ring — and
+ * `Label` sits in a second row that only exists if you render one.
+ *
+ * `value` is required and `null` means indeterminate: the readout disappears
+ * and the arc starts rotating.
+ *
+ * ```tsx
+ * <ProgressCircle.Root value={62}>
+ *   <ProgressCircle.Track>
+ *     <ProgressCircle.Indicator />
+ *   </ProgressCircle.Track>
+ *   <ProgressCircle.Value />
+ *   <ProgressCircle.Label>Uploading</ProgressCircle.Label>
+ * </ProgressCircle.Root>
+ * ```
+ */
+export declare const ProgressCircleRoot: React.ForwardRefExoticComponent<ProgressCircleRootProps & React.RefAttributes<HTMLDivElement>>;
+type BaseTrackProps = React.ComponentPropsWithoutRef<typeof BaseProgress.Track>;
+export interface ProgressCircleTrackProps extends Omit<BaseTrackProps, "className" | "render"> {
+    /**
+     * Additional class name(s). Applied after the internal styles so consumer
+     * utilities (e.g. Tailwind) win without needing `!important`.
+     */
+    className?: string;
+    /**
+     * A ref to the `<svg>`.
+     */
+    ref?: React.Ref<SVGSVGElement>;
+}
+/**
+ * The ring's canvas and the rail behind the arc. Renders an `<svg>` on a
+ * `0 0 100 100` viewBox — Base UI's `Track` is a `<div>` by default and is
+ * re-rendered through its `render` prop, which is also what keeps the
+ * `data-complete` / `data-progressing` / `data-indeterminate` attributes on
+ * it.
+ *
+ * The viewBox is what makes the stroke width scale: everything inside is
+ * measured against a ring 100 units across, and the size of a unit is whatever
+ * `--forte-progress-circle-size` says.
+ *
+ * `render` is intentionally not forwarded. Replacing the `<svg>` would take
+ * the coordinate space every rule in the stylesheet is written against with
+ * it, and the failure is silent — a ring that simply does not draw.
+ */
+export declare const ProgressCircleTrack: React.ForwardRefExoticComponent<Omit<ProgressCircleTrackProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
+type BaseIndicatorProps = React.ComponentPropsWithoutRef<typeof BaseProgress.Indicator>;
+export interface ProgressCircleIndicatorProps extends Omit<BaseIndicatorProps, "className" | "render"> {
+    /**
+     * Additional class name(s). Applied after the internal styles so consumer
+     * utilities (e.g. Tailwind) win without needing `!important`.
+     */
+    className?: string;
+    /**
+     * A ref to the `<circle>`.
+     */
+    ref?: React.Ref<SVGCircleElement>;
+}
+/**
+ * The arc. A `<circle>` with `pathLength="100"`, which renormalises its
+ * circumference to 100 units so `stroke-dashoffset` can be driven straight
+ * from the percentage without anyone computing 2πr — including when
+ * `--forte-progress-circle-thickness` changes the radius out from under it.
+ *
+ * Base UI still writes its inline `width` / `height` / `inset-inline-start`
+ * here while the bar is determinate. None of the three applies to a `<circle>`
+ * in CSS, so they are inert; the value reaches the arc through
+ * `--forte-progress-circle-percent` on the root instead.
+ */
+export declare const ProgressCircleIndicator: React.ForwardRefExoticComponent<Omit<ProgressCircleIndicatorProps, "ref"> & React.RefAttributes<SVGCircleElement>>;
+type BaseValueProps = React.ComponentPropsWithoutRef<typeof BaseProgress.Value>;
+export interface ProgressCircleValueProps 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 readout, centred inside the ring. Renders an `aria-hidden` `<span>` —
+ * the root already publishes the number through `aria-valuenow`.
+ *
+ * It renders nothing while the ring is indeterminate. Pass a function child to
+ * put something else there, and keep it short: at `sm` the ring's inner
+ * diameter is under 30px, and anything longer than three characters will need
+ * `size="lg"` or a label underneath instead.
+ */
+export declare const ProgressCircleValue: React.ForwardRefExoticComponent<ProgressCircleValueProps & React.RefAttributes<HTMLSpanElement>>;
+type BaseLabelProps = React.ComponentPropsWithoutRef<typeof BaseProgress.Label>;
+export interface ProgressCircleLabelProps 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;
+}
+/**
+ * Names what is being waited on, underneath the ring. Renders a `<span>` wired
+ * to the root with `aria-labelledby`, so it is the ring's accessible name.
+ *
+ * Its row in the grid only exists when it is rendered, so a ring without a
+ * label has no dangling gap under it.
+ */
+export declare const ProgressCircleLabel: React.ForwardRefExoticComponent<ProgressCircleLabelProps & React.RefAttributes<HTMLSpanElement>>;
+/**
+ * A circular progress indicator built on Base UI's unstyled `Progress`
+ * primitive — the same state machine and the same accessibility contract as
+ * `Progress`, drawn as a ring instead of a bar.
+ *
+ * ```tsx
+ * <ProgressCircle.Root value={62} size="lg" tone="success">
+ *   <ProgressCircle.Track>
+ *     <ProgressCircle.Indicator />
+ *   </ProgressCircle.Track>
+ *   <ProgressCircle.Value />
+ *   <ProgressCircle.Label>Restoring backup</ProgressCircle.Label>
+ * </ProgressCircle.Root>
+ * ```
+ *
+ * Pass `value={null}` and the arc becomes a rotating segment. Reach for the
+ * ring where a bar's full width is not available — a card corner, a tile, a
+ * table cell — and for `Progress` where it is, because a bar's length is
+ * comparable at a glance across a list and a ring's angle is not.
+ */
+export declare const ProgressCircle: {
+    Root: React.ForwardRefExoticComponent<ProgressCircleRootProps & React.RefAttributes<HTMLDivElement>>;
+    Track: React.ForwardRefExoticComponent<Omit<ProgressCircleTrackProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
+    Indicator: React.ForwardRefExoticComponent<Omit<ProgressCircleIndicatorProps, "ref"> & React.RefAttributes<SVGCircleElement>>;
+    Value: React.ForwardRefExoticComponent<ProgressCircleValueProps & React.RefAttributes<HTMLSpanElement>>;
+    Label: React.ForwardRefExoticComponent<ProgressCircleLabelProps & React.RefAttributes<HTMLSpanElement>>;
+};
+export {};

package/dist/components/progress/ProgressCircle.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 "../../ProgressCircle-j6XBl0fk.js";
+export { a as ProgressCircle, n as ProgressCircleIndicator, i as ProgressCircleLabel, t as ProgressCircleRoot, e as ProgressCircleTrack, r as ProgressCircleValue };

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

@@ -0,0 +1,4 @@
+export { Progress } from './Progress';
+export type { ProgressSize, ProgressTone, ProgressRootProps, ProgressLabelProps, ProgressValueProps, ProgressTrackProps, ProgressIndicatorProps, } from './Progress';
+export { ProgressCircle } from './ProgressCircle';
+export type { ProgressCircleSize, ProgressCircleTone, ProgressCircleRootProps, ProgressCircleTrackProps, ProgressCircleIndicatorProps, ProgressCircleValueProps, ProgressCircleLabelProps, } from './ProgressCircle';

package/dist/components/progress/index.js

@@ -0,0 +1,3 @@
+import { t as e } from "../../Progress-BlomDp-X.js";
+import { t } from "../../ProgressCircle-j6XBl0fk.js";
+export { e as Progress, t as ProgressCircle };