@botiverse/raft-ui 0.50.0 → 0.52.0

package/dist/components/progress/progress.d.mts

@@ -0,0 +1,119 @@
+import { StyledProps } from "../../lib/styled-props.mjs";
+import { VariantProps } from "../../lib/tv.mjs";
+import { ComponentPropsWithRef } from "react";
+import { Progress } from "@base-ui/react/progress";
+//#region src/components/progress/progress.d.ts
+declare const progress: import("tailwind-variants/lite").TVReturnType<{
+  variant: {
+    primary: {
+      root: string[];
+    };
+    information: {
+      root: string[];
+    };
+    accent: {
+      root: string[];
+    };
+    success: {
+      root: string[];
+    };
+    warning: {
+      root: string[];
+    };
+    danger: {
+      root: string[];
+    };
+  };
+  size: {
+    sm: {};
+    md: {};
+    lg: {};
+  };
+}, {
+  root: string[];
+  header: string[];
+  label: string[];
+  value: string[];
+  track: string[];
+  indicator: string[];
+}, undefined, {
+  variant: {
+    primary: {
+      root: string[];
+    };
+    information: {
+      root: string[];
+    };
+    accent: {
+      root: string[];
+    };
+    success: {
+      root: string[];
+    };
+    warning: {
+      root: string[];
+    };
+    danger: {
+      root: string[];
+    };
+  };
+  size: {
+    sm: {};
+    md: {};
+    lg: {};
+  };
+}, {
+  root: string[];
+  header: string[];
+  label: string[];
+  value: string[];
+  track: string[];
+  indicator: string[];
+}, import("tailwind-variants/lite").TVReturnTypeLike<{
+  variant: {
+    primary: {
+      root: string[];
+    };
+    information: {
+      root: string[];
+    };
+    accent: {
+      root: string[];
+    };
+    success: {
+      root: string[];
+    };
+    warning: {
+      root: string[];
+    };
+    danger: {
+      root: string[];
+    };
+  };
+  size: {
+    sm: {};
+    md: {};
+    lg: {};
+  };
+}, {
+  root: string[];
+  header: string[];
+  label: string[];
+  value: string[];
+  track: string[];
+  indicator: string[];
+}>>;
+export type ProgressProps = StyledProps<Progress.Root.Props> & VariantProps<typeof progress>;
+declare function Progress$1({ size, variant, className, ...props }: ProgressProps): import("react").JSX.Element;
+export type ProgressHeaderProps = ComponentPropsWithRef<"div">;
+export declare function ProgressHeader({ className, ...props }: ProgressHeaderProps): import("react").JSX.Element;
+export type ProgressLabelProps = StyledProps<Progress.Label.Props>;
+export declare function ProgressLabel({ className, ...props }: ProgressLabelProps): import("react").JSX.Element;
+export type ProgressValueProps = StyledProps<Progress.Value.Props>;
+export declare function ProgressValue({ className, ...props }: ProgressValueProps): import("react").JSX.Element;
+export type ProgressTrackProps = StyledProps<Progress.Track.Props>;
+export declare function ProgressTrack({ className, ...props }: ProgressTrackProps): import("react").JSX.Element;
+export type ProgressIndicatorProps = StyledProps<Progress.Indicator.Props>;
+export declare function ProgressIndicator({ className, ...props }: ProgressIndicatorProps): import("react").JSX.Element;
+//#endregion
+export { Progress$1 as Progress };

package/dist/components/progress/progress.mjs

@@ -0,0 +1,139 @@
+import { tv } from "../../lib/tv.mjs";
+import { jsx } from "react/jsx-runtime";
+import { Progress } from "@base-ui/react/progress";
+//#region src/components/progress/progress.tsx
+const PROGRESS_STYLE = `
+@keyframes raft-progress-indeterminate {
+  0% {
+    transform: translateX(-65%) scaleX(0.35);
+  }
+  50% {
+    transform: translateX(70%) scaleX(0.6);
+  }
+  100% {
+    transform: translateX(185%) scaleX(0.35);
+  }
+}
+
+@keyframes raft-progress-sweep {
+  0% {
+    transform: translateX(-110%);
+  }
+  100% {
+    transform: translateX(360%);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-slot="progress-indicator"][data-indeterminate] {
+    animation-duration: 2400ms;
+  }
+}
+`;
+const progress = tv({
+	slots: {
+		root: [
+			"group/progress grid w-full min-w-0 gap-1.5",
+			"[--progress-color:var(--foreground)]",
+			"[--progress-indicator:var(--progress-color)]",
+			"[--progress-track:var(--fill-muted)]",
+			"font-sans",
+			"data-complete:[--progress-indicator:var(--success)]"
+		],
+		header: ["flex min-w-0 items-center justify-between gap-3"],
+		label: ["min-w-0 truncate", "text-footnote font-semibold text-foreground"],
+		value: ["shrink-0 tabular-nums", "font-mono text-mono-meta text-foreground-hint"],
+		track: [
+			"relative w-full overflow-hidden bg-(--progress-track)",
+			"h-2 group-data-[size=sm]/progress:h-1.5 group-data-[size=lg]/progress:h-2.5",
+			"rounded-sticker"
+		],
+		indicator: [
+			"block h-full bg-(--progress-indicator)",
+			"transition-[width,background-color] duration-200 ease-out",
+			"data-indeterminate:absolute data-[indeterminate]:inset-y-0 data-indeterminate:w-1/2",
+			"data-indeterminate:origin-left data-indeterminate:animate-[raft-progress-indeterminate_1.4s_ease-in-out_infinite]",
+			"rounded-[inherit] inset-ring-[1.5px] inset-ring-sticker-ink"
+		]
+	},
+	variants: {
+		variant: {
+			primary: { root: ["[--progress-color:var(--info)]"] },
+			information: { root: ["[--progress-color:var(--info)]"] },
+			accent: { root: ["[--progress-color:var(--info)]"] },
+			success: { root: ["[--progress-color:var(--success)]"] },
+			warning: { root: ["[--progress-color:var(--warning)]"] },
+			danger: { root: ["[--progress-color:var(--danger)]"] }
+		},
+		size: {
+			sm: {},
+			md: {},
+			lg: {}
+		}
+	},
+	defaultVariants: {
+		variant: "primary",
+		size: "md"
+	}
+});
+const progressStyle = /* @__PURE__ */ jsx("style", {
+	href: "raft-ui-progress",
+	precedence: "default",
+	children: PROGRESS_STYLE
+});
+function Progress$1({ size = "md", variant = "primary", className, ...props }) {
+	const { root } = progress({
+		size,
+		variant
+	});
+	return /* @__PURE__ */ jsx(Progress.Root, {
+		"data-slot": "progress",
+		"data-size": size,
+		"data-variant": variant,
+		className: root({ className }),
+		...props
+	});
+}
+function ProgressHeader({ className, ...props }) {
+	const { header } = progress();
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "progress-header",
+		className: header({ className }),
+		...props
+	});
+}
+function ProgressLabel({ className, ...props }) {
+	const { label } = progress();
+	return /* @__PURE__ */ jsx(Progress.Label, {
+		"data-slot": "progress-label",
+		className: label({ className }),
+		...props
+	});
+}
+function ProgressValue({ className, ...props }) {
+	const { value } = progress();
+	return /* @__PURE__ */ jsx(Progress.Value, {
+		"data-slot": "progress-value",
+		className: value({ className }),
+		...props
+	});
+}
+function ProgressTrack({ className, ...props }) {
+	const { track } = progress();
+	return /* @__PURE__ */ jsx(Progress.Track, {
+		"data-slot": "progress-track",
+		className: track({ className }),
+		...props
+	});
+}
+function ProgressIndicator({ className, ...props }) {
+	const { indicator } = progress();
+	return /* @__PURE__ */ jsx(Progress.Indicator, {
+		"data-slot": "progress-indicator",
+		className: indicator({ className }),
+		...props,
+		children: progressStyle
+	});
+}
+//#endregion
+export { Progress$1 as Progress, ProgressHeader, ProgressIndicator, ProgressLabel, ProgressTrack, ProgressValue };

package/dist/components/pull-to-refresh/index.d.mts

@@ -0,0 +1,4 @@
+import { PULL_TO_REFRESH_DAMPING, PULL_TO_REFRESH_HOLD_DISTANCE, PULL_TO_REFRESH_MAX_DISTANCE, PULL_TO_REFRESH_SNAP_BACK_MS, PULL_TO_REFRESH_THRESHOLD, PullToRefreshState } from "./pull-to-refresh-gesture.mjs";
+import { PULL_TO_REFRESH_POINTER_QUERY, PullToRefresh, PullToRefreshPlatform, UsePullToRefreshOptions, usePullToRefresh } from "./use-pull-to-refresh.mjs";
+import { PullToRefreshIndicator, PullToRefreshIndicatorProps } from "./pull-to-refresh-indicator.mjs";
+export { PULL_TO_REFRESH_DAMPING, PULL_TO_REFRESH_HOLD_DISTANCE, PULL_TO_REFRESH_MAX_DISTANCE, PULL_TO_REFRESH_POINTER_QUERY, PULL_TO_REFRESH_SNAP_BACK_MS, PULL_TO_REFRESH_THRESHOLD, type PullToRefresh, PullToRefreshIndicator, type PullToRefreshIndicatorProps, type PullToRefreshPlatform, type PullToRefreshState, type UsePullToRefreshOptions, usePullToRefresh };

package/dist/components/pull-to-refresh/pull-to-refresh-gesture.d.mts

@@ -0,0 +1,30 @@
+//#region src/components/pull-to-refresh/pull-to-refresh-gesture.d.ts
+/**
+ * The pull-to-refresh gesture as a pure state machine (pull-to-refresh.md,
+ * "Behavior"). `usePullToRefresh` feeds it the scroller's touch events; this
+ * file owns every decision, so the rules can be tested without a DOM.
+ */
+/** How far the indicator has to be pulled, after damping, for a release to refresh. */
+export declare const PULL_TO_REFRESH_THRESHOLD = 100;
+/**
+ * The furthest the indicator follows the finger. 40px past the threshold is
+ * enough to show the pull is armed and still going; any further and a long
+ * drag would push the list off a small phone's screen.
+ */
+export declare const PULL_TO_REFRESH_MAX_DISTANCE = 140;
+/** The indicator's height while the refresh runs. */
+export declare const PULL_TO_REFRESH_HOLD_DISTANCE = 60;
+/**
+ * The rubber band: the indicator moves this fraction of the finger's travel,
+ * so it lags and the pull reads as resistance. 0.55 is iOS's own
+ * scroll-view constant.
+ */
+export declare const PULL_TO_REFRESH_DAMPING = 0.55;
+/**
+ * How long the indicator takes to go back, to the hold height or to 0, once
+ * the finger lifts or the refresh ends: ease-out (`ease-slide`), with no
+ * overshoot. Instant with reduced motion.
+ */
+export declare const PULL_TO_REFRESH_SNAP_BACK_MS = 300;
+export type PullToRefreshState = "idle" | "pulling" | "refreshing";
+//#endregion

package/dist/components/pull-to-refresh/pull-to-refresh-gesture.mjs

@@ -0,0 +1,134 @@
+import "../../lib/touch-drag.mjs";
+//#region src/components/pull-to-refresh/pull-to-refresh-gesture.ts
+/**
+* The pull-to-refresh gesture as a pure state machine (pull-to-refresh.md,
+* "Behavior"). `usePullToRefresh` feeds it the scroller's touch events; this
+* file owns every decision, so the rules can be tested without a DOM.
+*/
+/** How far the indicator has to be pulled, after damping, for a release to refresh. */
+const PULL_TO_REFRESH_THRESHOLD = 100;
+/**
+* The furthest the indicator follows the finger. 40px past the threshold is
+* enough to show the pull is armed and still going; any further and a long
+* drag would push the list off a small phone's screen.
+*/
+const PULL_TO_REFRESH_MAX_DISTANCE = 140;
+/** The indicator's height while the refresh runs. */
+const PULL_TO_REFRESH_HOLD_DISTANCE = 60;
+/**
+* The rubber band: the indicator moves this fraction of the finger's travel,
+* so it lags and the pull reads as resistance. 0.55 is iOS's own
+* scroll-view constant.
+*/
+const PULL_TO_REFRESH_DAMPING = .55;
+/**
+* How long the indicator takes to go back, to the hold height or to 0, once
+* the finger lifts or the refresh ends: ease-out (`ease-slide`), with no
+* overshoot. Instant with reduced motion.
+*/
+const PULL_TO_REFRESH_SNAP_BACK_MS = 300;
+/** A finger held this long before it pulls is a long press (a menu, a drag), not a pull. */
+const PULL_TO_REFRESH_LONG_PRESS_MS = 500;
+/** How far the finger may drift while it could still be a long press. */
+const PULL_TO_REFRESH_TOLERANCE = 10;
+/** Where a touch must not start a pull: text entry, and anything the consumer marks. */
+const PULL_TO_REFRESH_IGNORE_SELECTOR = [
+	"input",
+	"textarea",
+	"select",
+	"[contenteditable=\"\"]",
+	"[contenteditable=\"true\"]",
+	"[contenteditable=\"plaintext-only\"]",
+	"[data-pull-to-refresh-ignore]"
+].join(", ");
+const DEFAULT_PULL_GESTURE_CONFIG = {
+	threshold: 100,
+	maxDistance: 140,
+	holdDistance: 60,
+	latch: true
+};
+const IDLE_PULL_GESTURE = {
+	phase: "idle",
+	startX: 0,
+	startY: 0,
+	distance: 0,
+	armed: false
+};
+/** How far the indicator is for a finger that has travelled `delta` px down. */
+function pullDistance(delta, maxDistance = 140) {
+	if (delta <= 0) return 0;
+	return Math.min(maxDistance, delta * PULL_TO_REFRESH_DAMPING);
+}
+/** How far towards the threshold the pull is, from 0 to 1. */
+function pullProgress(distance, threshold = 100) {
+	if (threshold <= 0) return 1;
+	return Math.min(1, Math.max(0, distance / threshold));
+}
+/**
+* Which of the spinner's 4 pixels is lit while pulling, clockwise from the
+* top left: one step per quarter of the threshold, the last from the
+* threshold on (the same walk as the native apps' indicator).
+*/
+function pullStep(progress) {
+	return Math.min(3, Math.floor(Math.max(0, progress) * 4));
+}
+/** The state the indicator shows for a gesture. */
+function pullState(gesture) {
+	if (gesture.phase === "refreshing") return "refreshing";
+	if (gesture.phase !== "pulling") return "idle";
+	return gesture.distance > 0 || gesture.armed ? "pulling" : "idle";
+}
+function step(gesture, preventDefault = false, refresh = false, armed = false) {
+	return {
+		gesture,
+		preventDefault,
+		refresh,
+		armed
+	};
+}
+/** The next gesture for an event. */
+function stepPullGesture(gesture, event, config = DEFAULT_PULL_GESTURE_CONFIG) {
+	if (gesture.phase === "refreshing") return step(event.type === "settle" ? IDLE_PULL_GESTURE : gesture);
+	switch (event.type) {
+		case "start":
+			if (event.fingers !== 1 || !event.atTop || event.ignored) return step(IDLE_PULL_GESTURE);
+			return step({
+				...IDLE_PULL_GESTURE,
+				phase: "tracking",
+				startX: event.x,
+				startY: event.y
+			});
+		case "move": {
+			if (gesture.phase === "idle") return step(gesture);
+			if (event.fingers !== 1) return step(IDLE_PULL_GESTURE);
+			if (!event.atTop && !gesture.armed) return step(IDLE_PULL_GESTURE);
+			const dx = event.x - gesture.startX;
+			const dy = event.y - gesture.startY;
+			if (gesture.phase === "tracking") {
+				if (Math.abs(dx) > PULL_TO_REFRESH_TOLERANCE && Math.abs(dx) > dy) return step(IDLE_PULL_GESTURE);
+				if (dy < -6) return step(IDLE_PULL_GESTURE);
+				if (dy <= 6) return step(gesture);
+			}
+			const distance = pullDistance(dy, config.maxDistance);
+			const armed = config.latch && gesture.armed || distance >= config.threshold;
+			return step({
+				...gesture,
+				phase: "pulling",
+				distance,
+				armed
+			}, armed || dy > 6, false, armed && !gesture.armed);
+		}
+		case "hold": return step(gesture.phase === "tracking" ? IDLE_PULL_GESTURE : gesture);
+		case "end":
+			if (gesture.phase === "pulling" && gesture.armed) return step({
+				...gesture,
+				phase: "refreshing",
+				distance: config.holdDistance
+			}, false, true);
+			return step(IDLE_PULL_GESTURE);
+		case "cancel":
+		case "settle": return step(IDLE_PULL_GESTURE);
+	}
+}
+//#endregion
+export { DEFAULT_PULL_GESTURE_CONFIG, IDLE_PULL_GESTURE, PULL_TO_REFRESH_DAMPING, PULL_TO_REFRESH_HOLD_DISTANCE, PULL_TO_REFRESH_IGNORE_SELECTOR, PULL_TO_REFRESH_LONG_PRESS_MS, PULL_TO_REFRESH_MAX_DISTANCE, PULL_TO_REFRESH_SNAP_BACK_MS, PULL_TO_REFRESH_THRESHOLD, PULL_TO_REFRESH_TOLERANCE, pullDistance, pullProgress, pullState, pullStep, stepPullGesture };

package/dist/components/pull-to-refresh/pull-to-refresh-indicator.d.mts

@@ -0,0 +1,21 @@
+import { PullToRefresh } from "./use-pull-to-refresh.mjs";
+import { ComponentProps } from "react";
+//#region src/components/pull-to-refresh/pull-to-refresh-indicator.d.ts
+export type PullToRefreshIndicatorProps = Omit<ComponentProps<"div">, "children"> & {
+  /** The result of `usePullToRefresh`. */
+  pull: PullToRefresh;
+  /**
+   * What a screen reader announces when the refresh starts, such as
+   * "Refreshing…". Product copy, so it comes from the consumer.
+   */
+  label: string;
+};
+/**
+ * The pull's indicator. Render it as the scroller's first child: by default
+ * it is the space the pull opens, with the DS Spinner in it, so the content
+ * moves down with the pull; on Android it is Material 3's own indicator, a
+ * disc with a progress arc that travels down over the content. It holds a
+ * polite live region that announces `label` while refreshing.
+ */
+export declare function PullToRefreshIndicator({ pull, label, className, style, ...props }: PullToRefreshIndicatorProps): import("react").JSX.Element;
+//#endregion

package/dist/components/pull-to-refresh/pull-to-refresh-indicator.mjs

@@ -0,0 +1,153 @@
+import { tv } from "../../lib/tv.mjs";
+import { Spinner } from "../spinner/spinner.mjs";
+import { pullStep } from "./pull-to-refresh-gesture.mjs";
+import { PullToRefreshMaterialProgress } from "./pull-to-refresh-material-progress.mjs";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/pull-to-refresh/pull-to-refresh-indicator.tsx
+const pullStepStyle = /* @__PURE__ */ jsx("style", {
+	href: "raft-ui-pull-to-refresh",
+	precedence: "default",
+	children: `
+[data-slot="pull-to-refresh-indicator"][data-pull-step] [data-spinner-pixel],
+[data-slot="pull-to-refresh-indicator"][data-state="idle"] [data-spinner-pixel] {
+  animation: none;
+  opacity: 0.2;
+}
+
+[data-slot="pull-to-refresh-indicator"][data-pull-step="0"] [data-spinner-pixel]:nth-child(1),
+[data-slot="pull-to-refresh-indicator"][data-pull-step="1"] [data-spinner-pixel]:nth-child(2),
+[data-slot="pull-to-refresh-indicator"][data-pull-step="2"] [data-spinner-pixel]:nth-child(4),
+[data-slot="pull-to-refresh-indicator"][data-pull-step="3"] [data-spinner-pixel]:nth-child(3) {
+  opacity: 1;
+}
+`
+});
+const SNAP_BACK = ["duration-300 ease-slide motion-reduce:transition-none", "data-[state=pulling]:transition-none"];
+const pullToRefreshIndicator = tv({
+	slots: {
+		root: ["flex w-full shrink-0 justify-center", "text-foreground-icon"],
+		surface: ["flex items-center justify-center"],
+		spinner: [
+			"transition-opacity duration-300 ease-slide motion-reduce:transition-none",
+			"in-data-[state=pulling]:transition-none",
+			"in-data-[state=pulling]:opacity-(--pull-progress) in-data-[state=idle]:opacity-0"
+		],
+		status: ["sr-only"]
+	},
+	variants: { platform: {
+		default: {
+			root: [
+				"relative items-center overflow-hidden",
+				"transition-[height]",
+				...SNAP_BACK
+			],
+			surface: ["size-full"]
+		},
+		android: {
+			root: ["sticky top-0 z-10 h-0 overflow-visible"],
+			surface: [
+				"absolute inset-x-0 top-0 mx-auto size-10 rounded-full bg-layer-popover shadow-float",
+				"translate-y-[calc(var(--pull-distance)-100%)]",
+				"transition-[translate,opacity,scale]",
+				...SNAP_BACK,
+				"data-[state=idle]:opacity-0",
+				"data-[exit=finish]:scale-0 data-[exit=finish]:duration-150 data-[exit=finish]:ease-out"
+			]
+		}
+	} },
+	defaultVariants: { platform: "default" }
+});
+/**
+* How the Android disc leaves once idle: `finish` when a refresh has just
+* ended (it scales down where it held), `cancel` otherwise (it slides back
+* up). The finish keeps the distance it held, so it doesn't also slide.
+* `gone` once the scale-down has ended: the disc stays scaled away and its
+* arc stops turning.
+*/
+function useAndroidExit(state, distance) {
+	const [previous, setPrevious] = useState(state);
+	const [exit, setExit] = useState({
+		kind: "cancel",
+		distance: 0
+	});
+	const [held, setHeld] = useState(distance);
+	if (state !== previous) {
+		setPrevious(state);
+		if (state === "idle") setExit(previous === "refreshing" ? {
+			kind: "finish",
+			distance: held
+		} : {
+			kind: "cancel",
+			distance: 0
+		});
+	}
+	if (state === "refreshing" && distance !== held) setHeld(distance);
+	const settle = () => {
+		if (exit.kind === "finish") setExit({
+			...exit,
+			kind: "gone"
+		});
+	};
+	return {
+		...exit,
+		settle
+	};
+}
+/**
+* The pull's indicator. Render it as the scroller's first child: by default
+* it is the space the pull opens, with the DS Spinner in it, so the content
+* moves down with the pull; on Android it is Material 3's own indicator, a
+* disc with a progress arc that travels down over the content. It holds a
+* polite live region that announces `label` while refreshing.
+*/
+function PullToRefreshIndicator({ pull, label, className, style, ...props }) {
+	const { state, distance, progress, platform } = pull;
+	const { root, surface, spinner, status } = pullToRefreshIndicator({ platform });
+	const android = platform === "android";
+	const exit = useAndroidExit(state, distance);
+	const finishing = android && state === "idle" && exit.kind !== "cancel";
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "pull-to-refresh-indicator",
+		"data-state": state,
+		"data-platform": platform,
+		"data-pull-step": !android && state === "pulling" ? pullStep(progress) : void 0,
+		className: root({ className }),
+		style: {
+			...style,
+			height: android ? void 0 : distance,
+			["--pull-progress"]: progress,
+			["--pull-distance"]: `${finishing ? exit.distance : distance}px`
+		},
+		...props,
+		children: [
+			!android && pullStepStyle,
+			/* @__PURE__ */ jsx("div", {
+				"data-slot": "pull-to-refresh-surface",
+				"data-state": state,
+				"data-exit": finishing ? "finish" : void 0,
+				className: surface(),
+				onTransitionEnd: (event) => {
+					if (event.target === event.currentTarget && event.propertyName === "scale") exit.settle();
+				},
+				children: android ? /* @__PURE__ */ jsx(PullToRefreshMaterialProgress, {
+					state: finishing && exit.kind === "finish" ? "refreshing" : state,
+					progress
+				}) : /* @__PURE__ */ jsx(Spinner, {
+					"aria-hidden": "true",
+					role: "presentation",
+					"aria-label": void 0,
+					className: spinner()
+				})
+			}),
+			/* @__PURE__ */ jsx("span", {
+				role: "status",
+				"aria-live": "polite",
+				className: status(),
+				children: state === "refreshing" ? label : ""
+			})
+		]
+	});
+}
+//#endregion
+export { PullToRefreshIndicator };