@delacour/react-native-ui 0.1.0-alpha.3 → 0.1.0

package/src/components/popover/use-anchor-measure.ts

@@ -0,0 +1,76 @@
+import { type RefObject, useCallback, useEffect, useRef, useState } from "react";
+import { type HostInstance, useWindowDimensions } from "react-native";
+import type { AnchorRect } from "./popover.position";
+
+/** A native view that can report its frame — what an anchor ref points at. */
+export type MeasurableNode = HostInstance;
+
+export type UseAnchorMeasureOptions = {
+	/** Measure while true: on the transition to true, and again on every window-size change. */
+	isEnabled: boolean;
+};
+
+export type AnchorMeasure = {
+	/** A callback ref for the view to measure. */
+	ref: (node: MeasurableNode | null) => void;
+	/** The node the ref last received. */
+	node: RefObject<MeasurableNode | null>;
+	/** The view's frame in window coordinates; `null` from each enable until the measure lands. */
+	rect: AnchorRect | null;
+	/** Measure again now. */
+	measure: () => void;
+};
+
+/**
+ * Measures a view in **window** coordinates, which is what makes an anchored
+ * panel land on its anchor wherever the anchor is — inside a `ScrollView`, a
+ * bottom sheet or under a navigator header — because the panel is teleported to
+ * a host that fills the window.
+ *
+ * `rect` is cleared on each enable, so a panel re-opened after the anchor moved
+ * never paints one frame at the old position, and kept while disabled, so a
+ * panel animating closed still has somewhere to be. A window-size change while
+ * enabled — a rotation — measures again without clearing.
+ *
+ * **A leaf.** Tooltip imports it; it imports nothing from `./popover` or
+ * `./index`.
+ */
+export function useAnchorMeasure({ isEnabled }: UseAnchorMeasureOptions): AnchorMeasure {
+	const node = useRef<MeasurableNode | null>(null);
+	const [rect, setRect] = useState<AnchorRect | null>(null);
+	const { width, height } = useWindowDimensions();
+
+	const ref = useCallback((next: MeasurableNode | null) => {
+		node.current = next;
+	}, []);
+
+	const measure = useCallback(() => {
+		node.current?.measureInWindow((x, y, measuredWidth, measuredHeight) => {
+			setRect((previous) =>
+				previous !== null &&
+				previous.x === x &&
+				previous.y === y &&
+				previous.width === measuredWidth &&
+				previous.height === measuredHeight
+					? previous
+					: { x, y, width: measuredWidth, height: measuredHeight }
+			);
+		});
+	}, []);
+
+	useEffect(() => {
+		if (!isEnabled) return;
+		setRect(null);
+		measure();
+	}, [isEnabled, measure]);
+
+	useEffect(() => {
+		if (!isEnabled || width === 0 || height === 0) return;
+		// A frame later: the window reports its new size before the anchor has
+		// been laid out at it, and a measure now would read the old frame.
+		const frame = requestAnimationFrame(measure);
+		return () => cancelAnimationFrame(frame);
+	}, [isEnabled, measure, width, height]);
+
+	return { ref, node, rect, measure };
+}

package/src/components/popover/use-anchored-content.ts

@@ -0,0 +1,219 @@
+import { useCallback, useEffect, useState } from "react";
+import { I18nManager, type LayoutChangeEvent, useWindowDimensions, type ViewStyle } from "react-native";
+import { KeyboardEvents } from "react-native-keyboard-controller";
+import { type AnimatedStyle, useAnimatedStyle } from "react-native-reanimated";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { type OverlayPresence, useOverlayPresence } from "../overlay";
+import {
+	type AnchoredPosition,
+	type AnchoredSize,
+	type AnchorRect,
+	type PopoverAlign,
+	type PopoverPlacement,
+	type PopoverWidth,
+	type ResolvedPopoverWidth,
+	resolveAnchoredPosition,
+	resolveEnterTranslate,
+	resolvePopoverWidth,
+	resolveTransformOrigin,
+} from "./popover.position";
+
+export type UseAnchoredContentOptions = {
+	/** The owner's open state. The entrance waits for the first measure; the exit does not. */
+	isOpen: boolean;
+	/** The anchor's frame in window coordinates, `null` while it is being measured. */
+	anchor: AnchorRect | null;
+	placement: PopoverPlacement;
+	align: PopoverAlign;
+	offset: number;
+	alignOffset: number;
+	collisionPadding: number;
+	arrowInset: number;
+	width: PopoverWidth;
+	minWidth?: number;
+	maxHeight?: number;
+	/** How far the panel travels on its way in. */
+	enterDistance: number;
+	/** The scale it grows from. */
+	enterScale: number;
+	onEntered?: () => void;
+	onExited?: () => void;
+};
+
+export type AnchoredContent = {
+	presence: OverlayPresence;
+	/** Render the panel while true: from the open until the exit animation ends. */
+	isMounted: boolean;
+	/** The panel's resolved frame, `null` until both the anchor and the panel are measured. */
+	position: AnchoredPosition | null;
+	/** The panel's measured size, `null` until its first layout. */
+	size: AnchoredSize | null;
+	/** Put on the positioner: it is how the panel is measured. */
+	onLayout: (event: LayoutChangeEvent) => void;
+	/**
+	 * The positioner's cap: the safe span. It sits on a wrapper rather than the
+	 * panel because an inline `maxWidth` beats any class, and a caller's
+	 * `max-w-64` on the panel has to keep working inside it.
+	 */
+	positionerStyle: { position: "absolute"; left: 0; top: 0; maxWidth: number };
+	/** The panel's fixed width or `minWidth`, and the clamped `maxHeight`. */
+	frameStyle: Omit<ResolvedPopoverWidth, "maxWidth"> & { maxHeight?: number };
+	/** Position, opacity and the entrance transform — put on the positioner after `positionerStyle`. */
+	animatedStyle: AnimatedStyle<ViewStyle>;
+};
+
+/**
+ * The keyboard's height while it is up, so a panel treats it as the bottom of
+ * the screen — a field inside a popover flips the panel above its trigger
+ * rather than typing under the keyboard. JS state, not a shared value: the
+ * position is resolved on the JS thread, once per keyboard transition.
+ */
+function useKeyboardHeight(): number {
+	const [height, setHeight] = useState(0);
+	useEffect(() => {
+		const subscriptions = [
+			KeyboardEvents.addListener("keyboardWillShow", (event) => setHeight(event.height)),
+			KeyboardEvents.addListener("keyboardDidShow", (event) => setHeight(event.height)),
+			KeyboardEvents.addListener("keyboardWillHide", () => setHeight(0)),
+			KeyboardEvents.addListener("keyboardDidHide", () => setHeight(0)),
+		];
+		return () => {
+			for (const subscription of subscriptions) subscription.remove();
+		};
+	}, []);
+	return height;
+}
+
+/**
+ * Everything an anchored panel needs between its trigger and its first frame.
+ *
+ * 1. **Measure off-screen.** The panel mounts at the window's origin, inside
+ *    a positioner that carries the measure, the cap and the motion, with
+ *    opacity 0; its first layout reports its size.
+ * 2. **Resolve.** With the anchor's rect and the panel's size,
+ *    `resolveAnchoredPosition` picks the side, the shift, the clamped
+ *    `maxHeight` and the arrow. The keyboard counts as the bottom inset.
+ * 3. **Enter.** Only then does presence start: `progress` fades the panel in,
+ *    slides it `enterDistance` from the anchor's side and scales it from
+ *    `enterScale` about the arrow. Under reduce motion only the fade runs.
+ *
+ * The position is applied as a translate, never `left` / `top`: a translate is
+ * not layout, so moving the panel never re-wraps its content and never fires
+ * another `onLayout`. A window-size change re-resolves on the next render and
+ * moves the panel there directly — re-placed, not re-animated.
+ *
+ * **A leaf.** Tooltip imports it; it imports nothing from `./popover` or
+ * `./index`.
+ */
+export function useAnchoredContent({
+	isOpen,
+	anchor,
+	placement,
+	align,
+	offset,
+	alignOffset,
+	collisionPadding,
+	arrowInset,
+	width,
+	minWidth,
+	maxHeight,
+	enterDistance,
+	enterScale,
+	onEntered,
+	onExited,
+}: UseAnchoredContentOptions): AnchoredContent {
+	const window = useWindowDimensions();
+	const safeArea = useSafeAreaInsets();
+	const keyboardHeight = useKeyboardHeight();
+	const [size, setSize] = useState<AnchoredSize | null>(null);
+
+	const bounds = {
+		width: window.width,
+		height: window.height,
+		insets: {
+			top: safeArea.top,
+			right: safeArea.right,
+			bottom: Math.max(safeArea.bottom, keyboardHeight),
+			left: safeArea.left,
+		},
+	};
+
+	const position =
+		anchor === null || size === null
+			? null
+			: resolveAnchoredPosition({
+					anchor,
+					content: size,
+					bounds,
+					placement,
+					align,
+					offset,
+					alignOffset,
+					collisionPadding,
+					arrowInset,
+					maxHeight,
+					isRTL: I18nManager.isRTL,
+				});
+
+	const presence = useOverlayPresence({ isOpen: isOpen && position !== null, onEntered, onExited });
+	const isMounted = isOpen || presence.isPresent;
+
+	useEffect(() => {
+		if (!isMounted) setSize(null);
+	}, [isMounted]);
+
+	const onLayout = useCallback((event: LayoutChangeEvent) => {
+		const { width: measuredWidth, height: measuredHeight } = event.nativeEvent.layout;
+		setSize((previous) =>
+			previous !== null && previous.width === measuredWidth && previous.height === measuredHeight
+				? previous
+				: { width: measuredWidth, height: measuredHeight }
+		);
+	}, []);
+
+	const widths = resolvePopoverWidth({ width, anchorWidth: anchor?.width ?? 0, bounds, collisionPadding, minWidth });
+	const { maxWidth, ...panelWidths } = widths;
+	const positionerStyle = { position: "absolute", left: 0, top: 0, maxWidth } as const;
+	const frameStyle = position === null ? panelWidths : { ...panelWidths, maxHeight: position.maxHeight };
+
+	// Destructured to primitives on purpose, as `Pressable` does: the worklet
+	// closes over what it reads, and these are what change between renders.
+	const progress = presence.progress;
+	const isReduced = presence.isReduced;
+	const isPlaced = position !== null;
+	const x = position?.x ?? 0;
+	const y = position?.y ?? 0;
+	const enter = resolveEnterTranslate(position?.placement ?? placement, enterDistance);
+	const enterX = enter.x;
+	const enterY = enter.y;
+	const origin = resolveTransformOrigin(
+		position?.placement ?? placement,
+		position?.arrowOffset ?? 0,
+		size ?? { width: 0, height: 0 }
+	);
+	const originX = origin.x;
+	const originY = origin.y;
+
+	const animatedStyle = useAnimatedStyle(() => {
+		if (!isPlaced) {
+			return {
+				opacity: 0,
+				transformOrigin: [0, 0, 0],
+				transform: [{ translateX: 0 }, { translateY: 0 }, { scale: 1 }],
+			};
+		}
+		const shown = progress.value;
+		const away = isReduced ? 0 : 1 - shown;
+		return {
+			opacity: shown,
+			transformOrigin: [originX, originY, 0],
+			transform: [
+				{ translateX: x + enterX * away },
+				{ translateY: y + enterY * away },
+				{ scale: isReduced ? 1 : enterScale + (1 - enterScale) * shown },
+			],
+		};
+	});
+
+	return { presence, isMounted, position, size, onLayout, positionerStyle, frameStyle, animatedStyle };
+}

package/src/components/pressable/AGENTS.md

@@ -45,7 +45,17 @@ and only `onPress` and `onLongPress` cross back to JS.
   the control as disabled. Use `busy` for a temporary state the component clears
   itself, so assistive tech reports a control that is momentarily unavailable
   rather than one that is inert. Neither applies any opacity — that is the
-  caller's variant's job.
+  caller's variant's job, and the point below is what lets it do that job.
+- **A className's opacity is multiplied into the press, never overwritten.**
+  The press feedback is an animated style, and an animated style owns every key
+  it writes on the view — so its resting `opacity: 1` silently replaced a
+  variant's `opacity-50`, and a disabled `Button`, `Badge`, `Checkbox`,
+  `ListGroup.Item` or `Input.Group` never faded while blocking taps correctly.
+  The root now resolves its own `className` with Uniwind's
+  `useResolveClassNames` and animates `rest * press` instead, with
+  `resolveRestOpacity` guarding the value. A press still fades relative to the
+  rest — a disabled control cannot be pressed, so the two never compound. No
+  unit test could have seen the bug; it was found on a simulator.
 - **A worklet crosses back to JS with `scheduleOnRN`**, imported from
   `react-native-worklets` — never Reanimated's `runOnJS`, which since Reanimated 4
   is a deprecated shim that forwards to exactly that call. `scheduleOnRN(fn, ...args)`

package/src/components/pressable/pressable.tsx

@@ -14,9 +14,10 @@ import { Gesture, GestureDetector } from "react-native-gesture-handler";
 import { Presets } from "react-native-pulsar";
 import Animated, { useAnimatedStyle, useSharedValue, withSpring } from "react-native-reanimated";
 import { scheduleOnRN } from "react-native-worklets";
+import { useResolveClassNames } from "uniwind";
 import { composeRefs } from "../../lib/compose-refs";
 import { mergeProps } from "../../lib/merge-props";
-import { type PressableFeedback, resolvePressedState } from "./pressable.variants";
+import { type PressableFeedback, resolvePressedState, resolveRestOpacity } from "./pressable.variants";
 
 const PRESS_SPRING = { damping: 18, mass: 0.4, stiffness: 320 } as const;
 
@@ -154,6 +155,10 @@ export function Pressable({
 	// the worklet closes over, and a fresh object each render would rebuild the
 	// animated style every render.
 	const { opacity: targetOpacity, scale: targetScale } = resolvePressedState(feedback, pressedScale, pressedOpacity);
+	// The animated style below owns `opacity` on the view, so a className's own
+	// opacity — a disabled variant's `opacity-50` — is read here and multiplied
+	// in rather than overwritten by the resting 1. See `resolveRestOpacity`.
+	const restOpacity = resolveRestOpacity(useResolveClassNames(className ?? "").opacity);
 
 	const gesture = useMemo(() => {
 		const tap = Gesture.Tap()
@@ -187,7 +192,7 @@ export function Pressable({
 	}, [haptic, interactive, onLongPress, onPress, pressed]);
 
 	const animatedStyle = useAnimatedStyle(() => ({
-		opacity: 1 - pressed.value * (1 - targetOpacity),
+		opacity: restOpacity * (1 - pressed.value * (1 - targetOpacity)),
 		transform: [{ scale: 1 - pressed.value * (1 - targetScale) }],
 	}));
 

package/src/components/pressable/pressable.variants.test.ts

@@ -4,6 +4,7 @@ import {
 	PRESSABLE_FEEDBACK_FALLBACK,
 	PRESSABLE_FEEDBACKS,
 	resolvePressedState,
+	resolveRestOpacity,
 } from "./pressable.variants";
 
 describe("PRESSABLE_FEEDBACK", () => {
@@ -97,3 +98,31 @@ describe("resolvePressedState", () => {
 		expect(resolvePressedState("scale", 0, 0)).toEqual({ opacity: 0, scale: 0 });
 	});
 });
+
+describe("resolveRestOpacity", () => {
+	// The animated style owns `opacity` on the view, so a caller's `opacity-50`
+	// would be overwritten by the resting `1` unless the press multiplies it in.
+	test("keeps an opacity the className resolved to", () => {
+		expect(resolveRestOpacity(0.5)).toBe(0.5);
+		expect(resolveRestOpacity(0)).toBe(0);
+		expect(resolveRestOpacity(1)).toBe(1);
+	});
+
+	test("falls back to fully opaque when the className sets none", () => {
+		expect(resolveRestOpacity(undefined)).toBe(1);
+	});
+
+	// Uniwind types `opacity` as an animatable value, so anything that is not a
+	// plain number is treated as unset rather than multiplied in as NaN.
+	test("ignores a value that is not a finite number", () => {
+		expect(resolveRestOpacity(Number.NaN)).toBe(1);
+		expect(resolveRestOpacity(Number.POSITIVE_INFINITY)).toBe(1);
+		expect(resolveRestOpacity("0.5")).toBe(1);
+		expect(resolveRestOpacity({})).toBe(1);
+	});
+
+	test("clamps a number into the unit range", () => {
+		expect(resolveRestOpacity(1.5)).toBe(1);
+		expect(resolveRestOpacity(-0.2)).toBe(0);
+	});
+});

package/src/components/pressable/pressable.variants.ts

@@ -61,3 +61,20 @@ export function resolvePressedState(
 		scale: pressedScale ?? named.scale,
 	};
 }
+
+/**
+ * The opacity a pressable rests at, read from what its `className` resolved to.
+ *
+ * The press feedback is an animated style, and an animated style owns every
+ * key it writes on the view — so a resting `opacity: 1` overwrote a caller's
+ * `opacity-50` and a disabled `Button`, `Badge` or `ListGroup.Item` never
+ * faded. The press now multiplies this in rather than replacing it. Uniwind
+ * types the value as animatable, so anything that is not a finite number is
+ * treated as unset, and a number is clamped into `[0, 1]`.
+ *
+ * Pure, so the whole matrix is reachable from `bun test`. See AGENTS.md.
+ */
+export function resolveRestOpacity(resolved: unknown): number {
+	if (typeof resolved !== "number" || !Number.isFinite(resolved)) return 1;
+	return Math.min(1, Math.max(0, resolved));
+}

package/src/components/progress/AGENTS.md

@@ -0,0 +1,120 @@
+# Progress
+
+How far a task has got, or — indeterminate — that it is under way. Compound root
+plus `Progress.Header`, `Progress.Label`, `Progress.Output`, `Progress.Track` and
+`Progress.Fill`. An output, not a control: nothing here is pressed or dragged.
+
+`import { Progress } from "@delacour/react-native-ui/progress";`
+
+## Files
+
+| File | What it holds |
+| --- | --- |
+| `index.ts` | → `@delacour/react-native-ui/progress` |
+| `progress.tsx` | Root + the `Object.assign` compound surface, and the accessibility surface |
+| `progress-header.tsx` | `Progress.Header`, the label-and-readout row |
+| `progress-label.tsx` | `Progress.Label`, a `Text.Label` naming what is measured |
+| `progress-output.tsx` | `Progress.Output`, the formatted value |
+| `progress-track.tsx` | `Progress.Track` — the clip, and the width measurement |
+| `progress-fill.tsx` | `Progress.Fill` — every animation the component runs |
+| `progress.context.tsx` | `ProgressContext`, `useProgress()`, `useProgressContext()`, `useProgressPart()` |
+| `progress.types.ts` | `ProgressRenderProps`, shared by the context and the readout |
+| `progress.variants.ts` | Pure `tv()` slots + the ratio, geometry, formatting and accessibility resolvers |
+| `progress.variants.test.ts` | |
+
+## Design
+
+- **Colours**: `default`, `primary`, `success`, `warning`, `destructive`, `info` —
+  the slider's set, and a test pins the two lists equal so a bar and a slider in
+  one form name a colour with the same word. **Sizes**: `sm`, `md`, `lg`, the
+  track's thickness (`h-1`/`h-2`/`h-3`) and the header's type step.
+- **The colour paints the fill, never the track.** An empty bar is the slider's
+  groove, `bg-secondary`, at every colour. A test asserts the track's class does
+  not move with `color`.
+- **A bare `<Progress value={40} />` draws the bar.** The anatomy is written out
+  when a label or readout is wanted, but a compound root with no default children
+  renders an empty `View` — the failure the CLI's verify screen already hit once
+  with `Slider`, and one no error reports.
+- **No `isDisabled`, no `isInvalid`, no `Field`.** A progress bar reports; it
+  does not accept input, so there is nothing to disable and no value to reject.
+  `resolveProgressAxes` takes one argument and a test pins that, so a `Field`
+  rung cannot be added by accident. A failed task is `color="destructive"`.
+
+## Motion
+
+- **The fill is a full-length bar slid under a clipping track.** Its position is
+  a `translateX` of `(ratio − 1) × trackWidth` — a transform, composited on the UI
+  thread with no layout pass. Animating `width` re-lays the bar out on every frame
+  of every update. The track's `overflow-hidden rounded-full` is what makes the
+  slide read as growth, and it keeps the leading end's round cap because that end
+  is the fill's own, not a cut.
+- **One timing per value, on the UI thread.** `useEffect` hands the new ratio to
+  `withTiming` once (`PROGRESS_FILL_DURATION_MS`, ease-out); the frames that
+  follow never touch React. An upload reporting ten times a second costs ten
+  renders.
+- **The first frame is at the value, not animated up from zero.** The shared
+  value is seeded with the ratio, so a list of bars scrolling in does not
+  replay a fill on every row that mounts.
+- **Hidden until measured.** The track reports its width in `onLayout`; before
+  that the fill is `opacity: 0`, because a bar positioned against a width of 0
+  flashes at full length for one frame.
+- **Indeterminate is a segment sweeping from wholly off-left to wholly
+  off-right.** `indeterminateSegment` puts both ends of the loop outside the
+  track, so the frame where `withRepeat` restarts is never on screen. A sweep
+  that started at the track's left edge pops into view every pass.
+- **Reduce motion swaps the sweep for a pulse, and does not stop it.** With the
+  system setting on, the fill covers the whole track and breathes between
+  `PROGRESS_PULSE.from` and `to`. Both animations opt out with
+  `ReduceMotion.Never`: under the default policy a timing completes instantly and
+  `withRepeat(-1)` spins a zero-length animation forever — a frozen bar, which
+  reads as hung. `Spinner` makes the same call for the same reason. **Both layers
+  opt out** — the timing *and* the `withRepeat`, which has a policy of its own:
+  left at `System`, a reversing repeat never starts and a forward one stops after
+  one pass. The pulse sat at full opacity on a simulator until the repeat's own
+  argument was set. The pulse
+  never reaches zero opacity, because a bar that disappears reads as finished.
+- **The animated style returns the same keys in every mode** — `opacity`,
+  `transform`, `width` — so flipping `isIndeterminate` never asks Reanimated to
+  change a style's shape mid-animation.
+- **Both effects clean up.** `cancelAnimation` on unmount and on every flip back
+  to a value, or the repeat outlives the bar.
+
+## Values and formatting
+
+- **`progressRatio` clamps, and returns 0 for a degenerate range or a
+  non-finite value.** An upload dividing by a total it has not learned yet
+  produces `NaN`, and `NaN` written into a shared value freezes the fill for good.
+- **The default readout is the share of the range** — `72%`, or `75%` for 18 of
+  24. With `formatOptions` whose style is not `percent`, it formats the value
+  itself (`$1,250`). A `percent` style still formats the *ratio*, merging the
+  caller's other options, because `Intl` multiplies by a hundred and a value of 72
+  would read `7,200%`.
+- **`valueLabel` replaces the readout and the spoken text alike.** One string,
+  so the screen and the screen reader cannot disagree.
+- **`Progress.Output` takes a function child** handed `ProgressRenderProps`, for
+  a readout the formatter cannot express — `18 of 24 seats`. While
+  indeterminate the default readout renders nothing; a function still runs.
+
+## Accessibility
+
+- **The root is the one accessible element**, `accessibilityRole="progressbar"`,
+  with the range and value in `accessibilityValue`. `resolveProgressAccessibility`
+  decides the spoken text: the percentage over 0–100, `18 of 24` over any other
+  range (formatted like the readout), or `valueLabel`. The count is what the
+  screen is about; "seventy-five percent" makes the listener divide back.
+- **`Progress.Label` stays visible to assistive technology** and becomes the
+  element's name; `Progress.Output` is hidden (`accessibilityElementsHidden`,
+  `importantForAccessibility="no-hide-descendants"`) because the root already
+  speaks the value — left visible, it is read twice.
+- **Indeterminate reports `busy: true` and no value.** A `now` of 0 is read out
+  as "zero percent", a lie about work that is under way. A bar with no label
+  needs an `accessibilityLabel`.
+
+## Reuse
+
+- **`Progress.Track` and `Progress.Fill` read only `ratio`, `isIndeterminate`,
+  `color`, `size` and `trackSize` from context.** A meter is the same track and
+  fill with a different root deciding the ratio and the colour, so a root that
+  publishes `ProgressContextValue` through `ProgressProvider` reuses both parts
+  as they stand. Keep anything a meter would not have — formatting, the
+  indeterminate loop's *decision* — out of those two parts' reads.

package/src/components/progress/index.ts

@@ -0,0 +1,40 @@
+export { Progress, type ProgressProps } from "./progress";
+export {
+	type ProgressContextValue,
+	ProgressProvider,
+	useProgress,
+	useProgressContext,
+} from "./progress.context";
+export type { ProgressRenderChildren, ProgressRenderProps } from "./progress.types";
+export {
+	fillTranslate,
+	formatProgressValue,
+	indeterminateSegment,
+	PROGRESS_COLORS,
+	PROGRESS_DEFAULT_COLOR,
+	PROGRESS_DEFAULT_SIZE,
+	PROGRESS_FILL_DURATION_MS,
+	PROGRESS_INDETERMINATE_DURATION_MS,
+	PROGRESS_INDETERMINATE_SEGMENT,
+	PROGRESS_MAX_VALUE,
+	PROGRESS_MIN_VALUE,
+	PROGRESS_OUTPUT_TEXT_SIZE,
+	PROGRESS_PULSE,
+	PROGRESS_SIZES,
+	type ProgressAccessibility,
+	type ProgressAxes,
+	type ProgressColor,
+	type ProgressFormatInput,
+	type ProgressOwnAxes,
+	type ProgressSize,
+	type ProgressVariantProps,
+	progressRatio,
+	progressVariants,
+	resolveProgressAccessibility,
+	resolveProgressAxes,
+} from "./progress.variants";
+export type { ProgressFillProps } from "./progress-fill";
+export type { ProgressHeaderProps } from "./progress-header";
+export type { ProgressLabelProps } from "./progress-label";
+export type { ProgressOutputProps } from "./progress-output";
+export type { ProgressTrackProps } from "./progress-track";