@passui/react 0.1.46 → 0.2.0

package/dist/marker.d.ts

@@ -0,0 +1,13 @@
+import { ComponentProps, ReactNode } from "react";
+/** `status` is an inline dot and label, `note` a centred system line, `row` a bordered row, `divider` a labelled rule. */
+export type MarkerVariant = "status" | "note" | "row" | "divider";
+export type MarkerProps = ComponentProps<"div"> & {
+  /** How the marker reads in the flow. @default "note" */
+  variant?: MarkerVariant;
+  /** Leading icon or dot. */
+  icon?: ReactNode;
+  /** Trailing action, such as a Button, shown by `row`. */
+  action?: ReactNode;
+};
+/** A small non-message line in a conversation or a feed: a status, a system note, a row or a labelled separator. */
+export declare function Marker({ variant, icon, action, className, children, ...props }: MarkerProps): import("react").JSX.Element;

package/dist/marker.js

@@ -0,0 +1,33 @@
+import { cx } from "./lib/cx.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/marker.tsx
+const styles = {
+	status: "inline-flex items-center gap-1.5 text-caption text-label-secondary",
+	note: "flex items-center justify-center gap-1.5 text-caption text-label-tertiary",
+	row: "flex items-center gap-2 rounded-xl border border-separator/60 px-3 py-2 text-footnote text-label-secondary",
+	divider: "flex items-center gap-3 text-caption text-label-tertiary before:h-px before:flex-1 before:bg-separator/60 after:h-px after:flex-1 after:bg-separator/60"
+};
+/** A small non-message line in a conversation or a feed: a status, a system note, a row or a labelled separator. */
+function Marker({ variant = "note", icon, action, className, children, ...props }) {
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "marker",
+		"data-variant": variant,
+		className: cx(styles[variant], className),
+		...props,
+		children: [
+			icon ? /* @__PURE__ */ jsx("span", {
+				className: "shrink-0 [&_svg]:size-3.5",
+				children: icon
+			}) : null,
+			variant === "row" ? /* @__PURE__ */ jsx("span", {
+				className: "min-w-0 flex-1 truncate",
+				children
+			}) : children,
+			variant === "row" && action ? /* @__PURE__ */ jsx("span", {
+				className: "shrink-0",
+				children: action
+			}) : null
+		]
+	});
+}
+export { Marker };

package/dist/motion/transitions.d.ts

@@ -0,0 +1,170 @@
+/** Design-token springs as motion/react transitions. */
+export declare const spring: {
+  readonly smooth: {
+    readonly damping: 26;
+    readonly stiffness: 240;
+    readonly mass: 1;
+    readonly type: "spring";
+  };
+  readonly snappy: {
+    readonly damping: 22;
+    readonly stiffness: 380;
+    readonly mass: 1;
+    readonly type: "spring";
+  };
+  readonly bouncy: {
+    readonly damping: 14;
+    readonly stiffness: 220;
+    readonly mass: 1;
+    readonly type: "spring";
+  };
+};
+/**
+ * Apple's fluid overshoot: cubic-bezier(0.34, 1.56, 0.1, 1).
+ * Replaces traditional ease profiles with an authentic fluid bounce
+ * that overshoots and settles, matching Apple's custom interface physics.
+ * Used for zoom/matched-geometry transitions where the surface emerges
+ * from the trigger and snaps into place with a physical bounce.
+ */
+export declare const fluidOvershoot: {
+  readonly duration: 0.4;
+  readonly ease: [number, number, number, number];
+};
+/**
+ * Exit motion: content collapses back toward its source.
+ * The surface shrinks toward the trigger's position while fading,
+ * like a water drop absorbing back into its origin.
+ */
+export declare const fluidCollapse: {
+  readonly duration: 0.28;
+  readonly ease: [number, number, number, number];
+};
+export type FloatingPanelSide = "above" | "below";
+/**
+ * Anchored panels settle toward their source without shrinking their text.
+ * Now uses origin-based scaling: the panel grows from the trigger's
+ * position (transform-origin set by the caller) with a scale + opacity
+ * crossfade, rather than a plain slide.
+ */
+export declare function floatingPanelMotion(side?: FloatingPanelSide): {
+  readonly initial: {
+    readonly opacity: 0;
+    readonly scale: 0.92;
+    readonly y: number;
+  };
+  readonly animate: {
+    readonly opacity: 1;
+    readonly scale: 1;
+    readonly y: 0;
+  };
+  readonly exit: {
+    readonly opacity: 0;
+    readonly scale: 0.95;
+    readonly y: number;
+  };
+  readonly transition: {
+    readonly duration: 0.4;
+    readonly ease: [number, number, number, number];
+    readonly opacity: {
+      readonly duration: 0.16;
+      readonly ease: [number, number, number, number];
+    };
+  };
+};
+/** Default below-anchor presentation, retained for existing consumers. */
+export declare const popoverMotion: {
+  readonly initial: {
+    readonly opacity: 0;
+    readonly scale: 0.92;
+    readonly y: number;
+  };
+  readonly animate: {
+    readonly opacity: 1;
+    readonly scale: 1;
+    readonly y: 0;
+  };
+  readonly exit: {
+    readonly opacity: 0;
+    readonly scale: 0.95;
+    readonly y: number;
+  };
+  readonly transition: {
+    readonly duration: 0.4;
+    readonly ease: [number, number, number, number];
+    readonly opacity: {
+      readonly duration: 0.16;
+      readonly ease: [number, number, number, number];
+    };
+  };
+};
+/**
+ * Zoom/matched-geometry transition for dialogs and center-placed sheets.
+ * The surface starts small (scale 0.88) and invisible, then grows to
+ * full size with the fluid overshoot bounce. Content elements inside
+ * crossfade in slightly delayed so they phase into visibility
+ * asynchronously — not a harsh switch.
+ */
+export declare const zoomReveal: {
+  readonly initial: {
+    readonly opacity: 0;
+    readonly scale: 0.88;
+  };
+  readonly animate: {
+    readonly opacity: 1;
+    readonly scale: 1;
+  };
+  readonly exit: {
+    readonly opacity: 0;
+    readonly scale: 0.92;
+  };
+  readonly transition: {
+    readonly duration: 0.4;
+    readonly ease: [number, number, number, number];
+  };
+};
+/**
+ * Content crossfade for elements inside an overlay.
+ * Rather than a harsh switch, sub-elements scale and phase into
+ * visibility asynchronously. Use for children of dialogs, sheets,
+ * and popovers — the container arrives first, then content fades in.
+ */
+export declare const contentCrossfade: {
+  readonly initial: {
+    readonly opacity: 0;
+    readonly scale: 0.96;
+  };
+  readonly animate: {
+    readonly opacity: 1;
+    readonly scale: 1;
+  };
+  readonly exit: {
+    readonly opacity: 0;
+    readonly scale: 0.98;
+  };
+  readonly transition: {
+    readonly duration: 0.24;
+    readonly ease: [number, number, number, number];
+    readonly delay: 0.04;
+  };
+};
+/** Floating bars that rise from the bottom edge. */
+export declare const riseMotion: {
+  readonly initial: {
+    readonly opacity: 0;
+    readonly y: 32;
+  };
+  readonly animate: {
+    readonly opacity: 1;
+    readonly y: 0;
+  };
+  readonly exit: {
+    readonly opacity: 0;
+    readonly y: 24;
+  };
+  readonly transition: {
+    readonly damping: 26;
+    readonly stiffness: 240;
+    readonly mass: 1;
+    readonly type: "spring";
+  };
+};

package/dist/motion/transitions.js

@@ -0,0 +1,156 @@
+import { springs } from "@passui/tokens/motion";
+// src/motion/transitions.ts
+/** Design-token springs as motion/react transitions. */
+const spring = {
+	smooth: {
+		type: "spring",
+		...springs.smooth
+	},
+	snappy: {
+		type: "spring",
+		...springs.snappy
+	},
+	bouncy: {
+		type: "spring",
+		...springs.bouncy
+	}
+};
+/**
+* Apple's fluid overshoot: cubic-bezier(0.34, 1.56, 0.1, 1).
+* Replaces traditional ease profiles with an authentic fluid bounce
+* that overshoots and settles, matching Apple's custom interface physics.
+* Used for zoom/matched-geometry transitions where the surface emerges
+* from the trigger and snaps into place with a physical bounce.
+*/
+const fluidOvershoot = {
+	duration: .4,
+	ease: [
+		.34,
+		1.56,
+		.1,
+		1
+	]
+};
+/**
+* Exit motion: content collapses back toward its source.
+* The surface shrinks toward the trigger's position while fading,
+* like a water drop absorbing back into its origin.
+*/
+const fluidCollapse = {
+	duration: .28,
+	ease: [
+		.4,
+		0,
+		.6,
+		1
+	]
+};
+/**
+* Anchored panels settle toward their source without shrinking their text.
+* Now uses origin-based scaling: the panel grows from the trigger's
+* position (transform-origin set by the caller) with a scale + opacity
+* crossfade, rather than a plain slide.
+*/
+function floatingPanelMotion(side = "below") {
+	const direction = side === "above" ? 1 : -1;
+	return {
+		initial: {
+			opacity: 0,
+			scale: .92,
+			y: direction * 6
+		},
+		animate: {
+			opacity: 1,
+			scale: 1,
+			y: 0
+		},
+		exit: {
+			opacity: 0,
+			scale: .95,
+			y: direction * 4
+		},
+		transition: {
+			...fluidOvershoot,
+			opacity: {
+				duration: .16,
+				ease: [
+					.4,
+					0,
+					.2,
+					1
+				]
+			}
+		}
+	};
+}
+/** Default below-anchor presentation, retained for existing consumers. */
+const popoverMotion = floatingPanelMotion();
+/**
+* Zoom/matched-geometry transition for dialogs and center-placed sheets.
+* The surface starts small (scale 0.88) and invisible, then grows to
+* full size with the fluid overshoot bounce. Content elements inside
+* crossfade in slightly delayed so they phase into visibility
+* asynchronously — not a harsh switch.
+*/
+const zoomReveal = {
+	initial: {
+		opacity: 0,
+		scale: .88
+	},
+	animate: {
+		opacity: 1,
+		scale: 1
+	},
+	exit: {
+		opacity: 0,
+		scale: .92
+	},
+	transition: fluidOvershoot
+};
+/**
+* Content crossfade for elements inside an overlay.
+* Rather than a harsh switch, sub-elements scale and phase into
+* visibility asynchronously. Use for children of dialogs, sheets,
+* and popovers — the container arrives first, then content fades in.
+*/
+const contentCrossfade = {
+	initial: {
+		opacity: 0,
+		scale: .96
+	},
+	animate: {
+		opacity: 1,
+		scale: 1
+	},
+	exit: {
+		opacity: 0,
+		scale: .98
+	},
+	transition: {
+		duration: .24,
+		ease: [
+			.4,
+			0,
+			.2,
+			1
+		],
+		delay: .04
+	}
+};
+/** Floating bars that rise from the bottom edge. */
+const riseMotion = {
+	initial: {
+		opacity: 0,
+		y: 32
+	},
+	animate: {
+		opacity: 1,
+		y: 0
+	},
+	exit: {
+		opacity: 0,
+		y: 24
+	},
+	transition: spring.smooth
+};
+export { contentCrossfade, floatingPanelMotion, fluidCollapse, fluidOvershoot, popoverMotion, riseMotion, spring, zoomReveal };

package/dist/pagination.d.ts

@@ -0,0 +1,30 @@
+import { RenderProp } from "./lib/render.js";
+import { ComponentProps } from "react";
+/**
+ * The page numbers to show, with `"ellipsis"` where a run is folded:
+ * the first and last page, the current one and `siblings` on each side.
+ * `pageRange(8, 20)` is `[1, "ellipsis", 7, 8, 9, "ellipsis", 20]`.
+ */
+export declare function pageRange(current: number, total: number, siblings?: number): Array<number | "ellipsis">;
+export type PaginationSize = "xs" | "sm" | "default" | "lg";
+/** Which theme role marks the current page: the neutral raised chip, the app's accent, or the primary ink. */
+export type PaginationTone = "neutral" | "accent" | "primary";
+export declare function Pagination({ className, size, tone, ...props }: ComponentProps<"nav"> & {
+  /** Height of every page button, like the other controls. @default "default" */
+  size?: PaginationSize;
+  /** The theme role that marks the current page. @default "neutral" */
+  tone?: PaginationTone;
+}): import("react").JSX.Element;
+export declare function PaginationContent({ className, ...props }: ComponentProps<"ul">): import("react").JSX.Element;
+export declare function PaginationItem(props: ComponentProps<"li">): import("react").JSX.Element;
+export type PaginationLinkProps = ComponentProps<"a"> & {
+  isActive?: boolean;
+  /** Sizes the link by its label instead of as a square page number. */
+  wide?: boolean;
+  render?: RenderProp;
+};
+/** A page link. Pass `render` to use your router's link element. */
+export declare function PaginationLink({ isActive, wide, className, render, ...props }: PaginationLinkProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export declare function PaginationPrevious({ className, children, ...props }: PaginationLinkProps): import("react").JSX.Element;
+export declare function PaginationNext({ className, children, ...props }: PaginationLinkProps): import("react").JSX.Element;
+export declare function PaginationEllipsis({ className, ...props }: ComponentProps<"span">): import("react").JSX.Element;

package/dist/pagination.js

@@ -0,0 +1,117 @@
+import { cx } from "./lib/cx.js";
+import { mergeProps, renderPart } from "./lib/render.js";
+import { buttonVariants } from "./button.js";
+import { createContext, useContext } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronLeftIcon } from "@passui/icons/chevron-left";
+import { ChevronRightIcon } from "@passui/icons/chevron-right";
+// src/components/pagination.tsx
+/**
+* The page numbers to show, with `"ellipsis"` where a run is folded:
+* the first and last page, the current one and `siblings` on each side.
+* `pageRange(8, 20)` is `[1, "ellipsis", 7, 8, 9, "ellipsis", 20]`.
+*/
+function pageRange(current, total, siblings = 1) {
+	if (total <= siblings * 2 + 5) return Array.from({ length: total }, (_, index) => index + 1);
+	const left = Math.max(current - siblings, 2);
+	const right = Math.min(current + siblings, total - 1);
+	const range = [1];
+	if (left > 2) range.push("ellipsis");
+	for (let page = left; page <= right; page++) range.push(page);
+	if (right < total - 1) range.push("ellipsis");
+	range.push(total);
+	return range;
+}
+const squareSizes = {
+	xs: "icon-xs",
+	sm: "icon-sm",
+	default: "icon",
+	lg: "icon-lg"
+};
+const ellipsisSizes = {
+	xs: "size-6.5 text-caption",
+	sm: "size-7.5 text-footnote",
+	default: "size-8.5 text-footnote",
+	lg: "size-9.5 text-subheadline"
+};
+const activeVariants = {
+	neutral: "secondary",
+	accent: "accent",
+	primary: "default"
+};
+const PaginationContext = createContext({
+	size: "default",
+	tone: "neutral"
+});
+function Pagination({ className, size = "default", tone = "neutral", ...props }) {
+	return /* @__PURE__ */ jsx(PaginationContext, {
+		value: {
+			size,
+			tone
+		},
+		children: /* @__PURE__ */ jsx("nav", {
+			"aria-label": "Pagination",
+			"data-slot": "pagination",
+			"data-size": size,
+			"data-tone": tone,
+			className: cx("mx-auto flex w-full justify-center", className),
+			...props
+		})
+	});
+}
+function PaginationContent({ className, ...props }) {
+	return /* @__PURE__ */ jsx("ul", {
+		"data-slot": "pagination-content",
+		className: cx("m-0 flex list-none flex-row items-center gap-1 p-0", className),
+		...props
+	});
+}
+function PaginationItem(props) {
+	return /* @__PURE__ */ jsx("li", {
+		"data-slot": "pagination-item",
+		...props
+	});
+}
+/** A page link. Pass `render` to use your router's link element. */
+function PaginationLink({ isActive, wide, className, render, ...props }) {
+	const { size, tone } = useContext(PaginationContext);
+	return renderPart("a", mergeProps({
+		"aria-current": isActive ? "page" : void 0,
+		"data-slot": "pagination-link",
+		"data-active": isActive ? "" : void 0,
+		className: buttonVariants({
+			variant: isActive ? activeVariants[tone] : "ghost",
+			size: wide ? size : squareSizes[size],
+			className
+		})
+	}, props), render);
+}
+function PaginationPrevious({ className, children = "Previous", ...props }) {
+	return /* @__PURE__ */ jsxs(PaginationLink, {
+		"aria-label": "Go to previous page",
+		wide: true,
+		className: cx("gap-1 ps-2.5 pe-3", className),
+		...props,
+		children: [/* @__PURE__ */ jsx(ChevronLeftIcon, { size: 14 }), children]
+	});
+}
+function PaginationNext({ className, children = "Next", ...props }) {
+	return /* @__PURE__ */ jsxs(PaginationLink, {
+		"aria-label": "Go to next page",
+		wide: true,
+		className: cx("gap-1 ps-3 pe-2.5", className),
+		...props,
+		children: [children, /* @__PURE__ */ jsx(ChevronRightIcon, { size: 14 })]
+	});
+}
+function PaginationEllipsis({ className, ...props }) {
+	const { size } = useContext(PaginationContext);
+	return /* @__PURE__ */ jsx("span", {
+		"aria-hidden": "true",
+		"data-slot": "pagination-ellipsis",
+		className: cx("flex items-center justify-center text-label-secondary", ellipsisSizes[size], className),
+		...props,
+		children: "…"
+	});
+}
+export { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, pageRange };

package/dist/popover.d.ts

@@ -0,0 +1,26 @@
+import { RenderProp } from "./lib/render.js";
+import { ComponentProps, ReactNode } from "react";
+import * as popover from "@zag-js/popover";
+export interface PopoverProps extends Omit<popover.Props, "id" | "ids" | "positioning"> {
+  /** Where the panel sits against its trigger. Defaults to `bottom`. */
+  placement?: popover.Placement;
+  /** Gap between trigger and panel, in pixels. Defaults to 8. */
+  offset?: number;
+  children?: ReactNode;
+}
+/** Owns the open state and position. Renders no element of its own. */
+export declare function Popover({ children, placement, offset, ...props }: PopoverProps): import("react").JSX.Element;
+type PartProps<T extends "button" | "div"> = ComponentProps<T> & {
+  /** Render your own element instead of the default one. */
+  render?: RenderProp;
+};
+export declare function PopoverTrigger({ render, ...props }: PartProps<"button">): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+/** Positions the panel against another element instead of the trigger. */
+export declare function PopoverAnchor({ render, ...props }: PartProps<"div">): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+/** Closes the popover. Several of these can sit in one panel. */
+export declare function PopoverClose({ render, ...props }: PartProps<"button">): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+/** The floating panel. Mounts only while open or leaving, and grows from its trigger side. */
+export declare function PopoverContent({ className, render, ...props }: PartProps<"div">): import("react").JSX.Element | null;
+export declare function PopoverTitle({ className, ...props }: ComponentProps<"h2">): import("react").JSX.Element;
+export declare function PopoverDescription({ className, ...props }: ComponentProps<"p">): import("react").JSX.Element;
+export {};

package/dist/popover.js

@@ -0,0 +1,101 @@
+"use client";
+import { cx } from "./lib/cx.js";
+import { Portal } from "./lib/portal.js";
+import { usePresence } from "./lib/presence.js";
+import { mergeProps, renderPart } from "./lib/render.js";
+import { positionerSide, useAnchorFollow, useTriggerAnchor, useWaterDrop } from "./lib/water-drop.js";
+import { normalizeProps, useMachine } from "@zag-js/react";
+import { createContext, useContext, useId } from "react";
+import { jsx } from "react/jsx-runtime";
+import * as popover from "@zag-js/popover";
+// src/components/popover.tsx
+const Context = createContext(null);
+function usePopover() {
+	const api = useContext(Context);
+	if (!api) throw new Error("Popover parts must be used inside <Popover>.");
+	return api;
+}
+/** Owns the open state and position. Renders no element of its own. */
+function Popover({ children, placement = "bottom", offset = 8, ...props }) {
+	const id = useId();
+	const anchor = useTriggerAnchor(placement, offset);
+	const service = useMachine(popover.machine, {
+		id,
+		positioning: {
+			placement,
+			offset: { mainAxis: offset },
+			getAnchorRect: anchor.getAnchorRect
+		},
+		...props
+	});
+	const api = popover.connect(service, normalizeProps);
+	useAnchorFollow(anchor, api.open, positionerSide(api.getPositionerProps()), api.reposition);
+	return /* @__PURE__ */ jsx(Context.Provider, {
+		value: api,
+		children
+	});
+}
+function PopoverTrigger({ render, ...props }) {
+	const api = usePopover();
+	return renderPart("button", mergeProps({
+		...api.getTriggerProps(),
+		"data-slot": "popover-trigger"
+	}, props), render);
+}
+/** Positions the panel against another element instead of the trigger. */
+function PopoverAnchor({ render, ...props }) {
+	const api = usePopover();
+	return renderPart("div", mergeProps({
+		...api.getAnchorProps(),
+		"data-slot": "popover-anchor"
+	}, props), render);
+}
+/** Closes the popover. Several of these can sit in one panel. */
+function PopoverClose({ render, ...props }) {
+	const { id: _id, ...closeProps } = usePopover().getCloseTriggerProps();
+	return renderPart("button", mergeProps({
+		...closeProps,
+		"data-slot": "popover-close"
+	}, props), render);
+}
+/** The floating panel. Mounts only while open or leaving, and grows from its trigger side. */
+function PopoverContent({ className, render, ...props }) {
+	const api = usePopover();
+	const drop = useWaterDrop({
+		sourceId: api.getTriggerProps().id,
+		material: "liquid-glass-dense squircle [--squircle-radius:1.5rem]"
+	});
+	const { ref, mounted, attrs } = usePresence(api.open, drop);
+	if (!mounted) return null;
+	return /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx("div", {
+		...api.getPositionerProps(),
+		className: "z-[70]",
+		children: renderPart("div", mergeProps({
+			...api.getContentProps(),
+			...attrs,
+			ref,
+			hidden: false,
+			"data-slot": "popover-content",
+			className: cx("w-72 liquid-glass-dense squircle morph-reset [--squircle-radius:1.5rem] p-4 text-label outline-none transition spring-smooth origin-(--transform-origin,center) data-ending-style:scale-[0.88] data-starting-style:scale-[0.88] data-ending-style:opacity-0 data-starting-style:opacity-0 data-[side=bottom]:origin-top data-[side=top]:origin-bottom data-[side=left]:origin-right data-[side=right]:origin-left motion-reduce:transition-none motion-reduce:data-ending-style:scale-100 motion-reduce:data-starting-style:scale-100", className)
+		}, props), render)
+	}) });
+}
+function PopoverTitle({ className, ...props }) {
+	const api = usePopover();
+	return /* @__PURE__ */ jsx("h2", {
+		...api.getTitleProps(),
+		"data-slot": "popover-title",
+		className: cx("text-headline font-semibold text-label", className),
+		...props
+	});
+}
+function PopoverDescription({ className, ...props }) {
+	const api = usePopover();
+	return /* @__PURE__ */ jsx("p", {
+		...api.getDescriptionProps(),
+		"data-slot": "popover-description",
+		className: cx("text-footnote text-label-secondary", className),
+		...props
+	});
+}
+export { Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverDescription, PopoverTitle, PopoverTrigger };

package/dist/progress.d.ts

@@ -0,0 +1,9 @@
+import { ComponentProps } from "react";
+export type ProgressProps = Omit<ComponentProps<"div">, "children"> & {
+  /** 0 to `max`. Leave undefined for an indeterminate bar. */
+  value?: number | null;
+  /** @default 100 */
+  max?: number;
+};
+/** A read only progress bar. */
+export declare function Progress({ value, max, className, ...props }: ProgressProps): import("react").JSX.Element;

package/dist/progress.js

@@ -0,0 +1,24 @@
+import { cx } from "./lib/cx.js";
+import { jsx } from "react/jsx-runtime";
+// src/components/progress.tsx
+/** A read only progress bar. */
+function Progress({ value, max = 100, className, ...props }) {
+	const determinate = typeof value === "number";
+	const ratio = determinate ? Math.min(1, Math.max(0, value / max)) : 0;
+	return /* @__PURE__ */ jsx("div", {
+		role: "progressbar",
+		"aria-valuemin": 0,
+		"aria-valuemax": max,
+		"aria-valuenow": determinate ? value : void 0,
+		"data-slot": "progress",
+		"data-state": determinate ? ratio >= 1 ? "complete" : "loading" : "indeterminate",
+		className: cx("relative h-2 w-full overflow-hidden rounded-full bg-fill", className),
+		...props,
+		children: /* @__PURE__ */ jsx("div", {
+			"data-slot": "progress-indicator",
+			className: cx("h-full rounded-full bg-accent spring-smooth transition-[width] motion-reduce:transition-none", !determinate && "w-2/5 animate-pulse motion-reduce:animate-none"),
+			style: determinate ? { width: `${ratio * 100}%` } : void 0
+		})
+	});
+}
+export { Progress };