@botiverse/raft-ui 0.51.0 → 0.52.0

package/dist/components/pull-to-refresh/pull-to-refresh-material-progress.mjs

@@ -0,0 +1,150 @@
+import { tv } from "../../lib/tv.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/pull-to-refresh/pull-to-refresh-material-progress.tsx
+/**
+* Android's own pull-to-refresh progress, drawn as Material 3 draws it
+* (Compose's `PullToRefreshDefaults.Indicator`, the one Chrome on Android
+* shows too): a 2.5px arc of radius 7.5px in a 40px disc. While pulling the
+* arc grows to 0.8 of the circle and turns a little with the pull, with an
+* arrowhead at its end, at 0.3 opacity until the pull is armed and fully
+* opaque from then on. While refreshing it is Material's indeterminate arc,
+* which grows and shrinks as it turns. Internal: `PullToRefreshIndicator`
+* renders it on Android.
+*/
+/** The disc's centre, in its 40px box. */
+const CENTER = 20;
+const MATERIAL_ARC_RADIUS = 7.5;
+const MATERIAL_STROKE_WIDTH = 2.5;
+const ARROW_WIDTH = 10;
+const ARROW_HEIGHT = 5;
+/** The longest the arc gets while pulling, as a share of the circle. */
+const MATERIAL_MAX_ARC = .8;
+const CIRCUMFERENCE = 2 * Math.PI * MATERIAL_ARC_RADIUS;
+/**
+* The arc for a pull's progress (0 to 1), as Material computes it: nothing
+* for the first 40%, then the arc grows to `MATERIAL_MAX_ARC` of the circle
+* and its start turns from -45° to +27° (12 o'clock is -90°), and the
+* arrowhead grows with it.
+*/
+function materialArc(progress) {
+	const adjusted = Math.max(Math.min(1, progress) - .4, 0) * 5 / 3;
+	const rotation = (-.25 + .4 * adjusted) * .5;
+	return {
+		startAngle: rotation * 360,
+		endAngle: (rotation + adjusted * MATERIAL_MAX_ARC) * 360,
+		arrowScale: Math.min(1, adjusted)
+	};
+}
+const point = (degrees) => {
+	const radians = degrees * Math.PI / 180;
+	return `${CENTER + MATERIAL_ARC_RADIUS * Math.cos(radians)} ${CENTER + MATERIAL_ARC_RADIUS * Math.sin(radians)}`;
+};
+/** An SVG path for the arc, clockwise from `startAngle` to `endAngle`. */
+function arcPath({ startAngle, endAngle }) {
+	const sweep = endAngle - startAngle;
+	if (sweep <= .01) return "";
+	const large = sweep > 180 ? 1 : 0;
+	return `M ${point(startAngle)} A ${MATERIAL_ARC_RADIUS} ${MATERIAL_ARC_RADIUS} 0 ${large} 1 ${point(endAngle)}`;
+}
+/**
+* The arrowhead: a triangle whose base straddles the arc at 3 o'clock and
+* whose tip points clockwise, turned to the arc's end.
+*/
+function arrowPoints(scale) {
+	const half = ARROW_WIDTH * scale / 2;
+	const base = 17.5;
+	const x = 27.5;
+	return `${x - half},${base} ${x + half},${base} ${x},${base + ARROW_HEIGHT * scale}`;
+}
+const MATERIAL_STYLE = `
+@keyframes raft-ptr-material-rotate {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes raft-ptr-material-dash {
+  0% {
+    stroke-dasharray: 0.4 ${CIRCUMFERENCE};
+    stroke-dashoffset: 0;
+  }
+  50% {
+    stroke-dasharray: ${CIRCUMFERENCE * .7} ${CIRCUMFERENCE};
+    stroke-dashoffset: ${-CIRCUMFERENCE * .1};
+  }
+  100% {
+    stroke-dasharray: ${CIRCUMFERENCE * .7} ${CIRCUMFERENCE};
+    stroke-dashoffset: ${-CIRCUMFERENCE * .99};
+  }
+}
+
+[data-slot="pull-to-refresh-material-progress"][data-state="refreshing"] {
+  animation: raft-ptr-material-rotate 1.4s linear infinite;
+}
+
+[data-slot="pull-to-refresh-material-progress"][data-state="refreshing"] [data-material-indeterminate] {
+  animation: raft-ptr-material-dash 1.4s ease-in-out infinite;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-slot="pull-to-refresh-material-progress"][data-state="refreshing"],
+  [data-slot="pull-to-refresh-material-progress"][data-state="refreshing"] [data-material-indeterminate] {
+    animation: none;
+  }
+
+  [data-slot="pull-to-refresh-material-progress"][data-state="refreshing"] [data-material-indeterminate] {
+    stroke-dasharray: ${CIRCUMFERENCE * .75} ${CIRCUMFERENCE};
+  }
+}
+`;
+const materialStyle = /* @__PURE__ */ jsx("style", {
+	href: "raft-ui-pull-to-refresh-material",
+	precedence: "default",
+	children: MATERIAL_STYLE
+});
+const materialProgress = tv({ slots: {
+	root: ["size-10 shrink-0 overflow-visible", "text-info-strong"],
+	determinate: ["transition-opacity duration-150 ease-out motion-reduce:transition-none", "opacity-30 data-armed:opacity-100"],
+	arc: ["fill-none stroke-current [stroke-linecap:butt]"],
+	arrow: ["fill-current"],
+	indeterminate: ["fill-none stroke-current [stroke-linecap:round]"]
+} });
+function PullToRefreshMaterialProgress({ state, progress }) {
+	const { root, determinate, arc, arrow, indeterminate } = materialProgress();
+	const refreshing = state === "refreshing";
+	const armed = progress >= 1;
+	const values = materialArc(refreshing ? 1 : progress);
+	return /* @__PURE__ */ jsxs("svg", {
+		"data-slot": "pull-to-refresh-material-progress",
+		"data-state": state,
+		"data-armed": !refreshing && armed ? "" : void 0,
+		viewBox: "0 0 40 40",
+		"aria-hidden": "true",
+		className: root(),
+		children: [materialStyle, refreshing ? /* @__PURE__ */ jsx("circle", {
+			"data-material-indeterminate": "",
+			cx: CENTER,
+			cy: CENTER,
+			r: MATERIAL_ARC_RADIUS,
+			strokeWidth: MATERIAL_STROKE_WIDTH,
+			transform: `rotate(-90 ${CENTER} ${CENTER})`,
+			className: indeterminate()
+		}) : /* @__PURE__ */ jsxs("g", {
+			"data-armed": armed ? "" : void 0,
+			className: determinate(),
+			children: [/* @__PURE__ */ jsx("path", {
+				"data-material-arc": "",
+				d: arcPath(values),
+				strokeWidth: MATERIAL_STROKE_WIDTH,
+				className: arc()
+			}), values.arrowScale > 0 && /* @__PURE__ */ jsx("polygon", {
+				"data-material-arrow": "",
+				points: arrowPoints(values.arrowScale),
+				transform: `rotate(${values.endAngle - 2.5} ${CENTER} ${CENTER})`,
+				className: arrow()
+			})]
+		})]
+	});
+}
+//#endregion
+export { MATERIAL_ARC_RADIUS, MATERIAL_MAX_ARC, MATERIAL_STROKE_WIDTH, PullToRefreshMaterialProgress, materialArc };

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

@@ -0,0 +1,55 @@
+import { PullToRefreshState } from "./pull-to-refresh-gesture.mjs";
+import { RefObject } from "react";
+//#region src/components/pull-to-refresh/use-pull-to-refresh.d.ts
+/** A primary pointer that is a finger: the only input pull to refresh answers. */
+export declare const PULL_TO_REFRESH_POINTER_QUERY = "(pointer: coarse)";
+/**
+ * How the pull looks. `default` (iOS and every other touch screen), as in
+ * the iOS app: the content moves down with the pull and the indicator sits in
+ * the space it opens. `android` follows Material 3: the indicator travels
+ * down over the content, which stays still, arming the pull gives a short
+ * vibration, and moving back above the threshold disarms it (no latch).
+ */
+export type PullToRefreshPlatform = "default" | "android";
+export type UsePullToRefreshOptions = {
+  /**
+   * Reload the page's snapshot. The indicator holds until the promise
+   * settles. Handle a failure here (keep the content, show the same toast as
+   * a failed first load): a rejection only ends the refresh.
+   */
+  onRefresh: () => Promise<unknown>;
+  /** Turn the gesture off, such as while the first load is still running or a search is empty. */
+  disabled?: boolean;
+  /** Pull distance, after damping, that arms the refresh. Default 100px. */
+  threshold?: number;
+  /** The furthest the indicator follows the finger. Default 140px. */
+  maxDistance?: number;
+  /** The indicator's height while refreshing. Default 60px. */
+  holdDistance?: number;
+  /** Override the detected platform, such as in a preview. */
+  platform?: PullToRefreshPlatform;
+};
+export type PullToRefresh = {
+  /** `idle`, `pulling` while a finger pulls the indicator down, `refreshing` until `onRefresh` settles. */
+  state: PullToRefreshState;
+  /** The indicator's height in px. */
+  distance: number;
+  /** How far towards the threshold the pull is, from 0 to 1; 1 once armed and while refreshing. */
+  progress: number;
+  /** Which platform's look the indicator takes. */
+  platform: PullToRefreshPlatform;
+};
+/**
+ * Pull to refresh for a scroll container on a touch screen
+ * (pull-to-refresh.md). Pulling down from the top of `scrollRef` past the
+ * threshold calls `onRefresh`; render a `PullToRefreshIndicator` with the
+ * result as the scroller's first child.
+ *
+ * On Android it takes Material 3's look (`PullToRefreshPlatform`). It does
+ * nothing on a fine pointer. While it is on, the scroller gets
+ * `overscroll-behavior-y: contain`, so a browser tab's own pull to reload
+ * doesn't run as well. `scrollRef` is read when the hook turns on; a
+ * scroller that is replaced later needs the hook remounted (a `key`).
+ */
+export declare function usePullToRefresh(scrollRef: RefObject<HTMLElement | null>, { onRefresh, disabled, threshold, maxDistance, holdDistance, platform: platformOverride }: UsePullToRefreshOptions): PullToRefresh;
+//#endregion

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

@@ -0,0 +1,156 @@
+import { useLatestRef } from "../virtual-list/hooks/use-latest-ref.mjs";
+import { DEFAULT_PULL_GESTURE_CONFIG, IDLE_PULL_GESTURE, PULL_TO_REFRESH_IGNORE_SELECTOR, PULL_TO_REFRESH_LONG_PRESS_MS, pullProgress, pullState, stepPullGesture } from "./pull-to-refresh-gesture.mjs";
+import { useEffect, useRef, useState, useSyncExternalStore } from "react";
+//#region src/components/pull-to-refresh/use-pull-to-refresh.ts
+/** A primary pointer that is a finger: the only input pull to refresh answers. */
+const PULL_TO_REFRESH_POINTER_QUERY = "(pointer: coarse)";
+/** The one platform check: Android, by its user agent (Client Hints first). */
+function detectPullToRefreshPlatform() {
+	if (typeof navigator === "undefined") return "default";
+	const hints = navigator.userAgentData;
+	if (hints?.platform) return hints.platform === "Android" ? "android" : "default";
+	return /\bAndroid\b/i.test(navigator.userAgent) ? "android" : "default";
+}
+function hapticTick() {
+	if (typeof navigator !== "undefined" && typeof navigator.vibrate === "function") navigator.vibrate(10);
+}
+const subscribeNever = () => () => void 0;
+const defaultSnapshot = () => "default";
+function subscribeCoarse(onChange) {
+	if (typeof window === "undefined" || typeof window.matchMedia !== "function") return () => void 0;
+	const media = window.matchMedia(PULL_TO_REFRESH_POINTER_QUERY);
+	media.addEventListener("change", onChange);
+	return () => media.removeEventListener("change", onChange);
+}
+function coarseSnapshot() {
+	return typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia("(pointer: coarse)").matches;
+}
+function ignoredTarget(target) {
+	return target instanceof Element && target.closest(PULL_TO_REFRESH_IGNORE_SELECTOR) !== null;
+}
+/**
+* Pull to refresh for a scroll container on a touch screen
+* (pull-to-refresh.md). Pulling down from the top of `scrollRef` past the
+* threshold calls `onRefresh`; render a `PullToRefreshIndicator` with the
+* result as the scroller's first child.
+*
+* On Android it takes Material 3's look (`PullToRefreshPlatform`). It does
+* nothing on a fine pointer. While it is on, the scroller gets
+* `overscroll-behavior-y: contain`, so a browser tab's own pull to reload
+* doesn't run as well. `scrollRef` is read when the hook turns on; a
+* scroller that is replaced later needs the hook remounted (a `key`).
+*/
+function usePullToRefresh(scrollRef, { onRefresh, disabled = false, threshold = DEFAULT_PULL_GESTURE_CONFIG.threshold, maxDistance = DEFAULT_PULL_GESTURE_CONFIG.maxDistance, holdDistance = DEFAULT_PULL_GESTURE_CONFIG.holdDistance, platform: platformOverride }) {
+	const coarse = useSyncExternalStore(subscribeCoarse, coarseSnapshot, () => false);
+	const detected = useSyncExternalStore(subscribeNever, detectPullToRefreshPlatform, defaultSnapshot);
+	const platform = platformOverride ?? detected;
+	const enabled = coarse && !disabled;
+	const [gesture, setGesture] = useState(IDLE_PULL_GESTURE);
+	const gestureRef = useRef(IDLE_PULL_GESTURE);
+	const onRefreshRef = useLatestRef(onRefresh);
+	useEffect(() => {
+		const element = scrollRef.current;
+		if (!enabled || !element) return;
+		const config = {
+			threshold,
+			maxDistance,
+			holdDistance,
+			latch: platform !== "android"
+		};
+		let holdTimer;
+		let live = true;
+		const dispatch = (event, native) => {
+			const next = stepPullGesture(gestureRef.current, event, config);
+			if (next.preventDefault && native?.cancelable) native.preventDefault();
+			if (next.gesture !== gestureRef.current) {
+				gestureRef.current = next.gesture;
+				setGesture(next.gesture);
+			}
+			if (next.gesture.phase !== "tracking") clearTimeout(holdTimer);
+			if (next.armed && platform === "android") hapticTick();
+			if (next.refresh) {
+				const settle = () => {
+					if (live) dispatch({ type: "settle" });
+				};
+				let result;
+				try {
+					result = Promise.resolve(onRefreshRef.current());
+				} catch (error) {
+					result = Promise.reject(error);
+				}
+				result.then(settle, settle);
+			}
+		};
+		const atTop = () => element.scrollTop <= 0;
+		const onTouchStart = (event) => {
+			const touch = event.touches[0];
+			dispatch({
+				type: "start",
+				x: touch?.clientX ?? 0,
+				y: touch?.clientY ?? 0,
+				fingers: event.touches.length,
+				atTop: atTop(),
+				ignored: ignoredTarget(event.target)
+			});
+			if (gestureRef.current.phase === "tracking") {
+				clearTimeout(holdTimer);
+				holdTimer = setTimeout(() => dispatch({ type: "hold" }), PULL_TO_REFRESH_LONG_PRESS_MS);
+			}
+		};
+		const onTouchMove = (event) => {
+			if (event.defaultPrevented && gestureRef.current.phase === "tracking") {
+				dispatch({ type: "cancel" });
+				return;
+			}
+			const touch = event.touches[0];
+			dispatch({
+				type: "move",
+				x: touch?.clientX ?? 0,
+				y: touch?.clientY ?? 0,
+				fingers: event.touches.length,
+				atTop: atTop()
+			}, event);
+		};
+		const onTouchEnd = () => dispatch({ type: "end" });
+		const onCancel = () => dispatch({ type: "cancel" });
+		const previousOverscroll = element.style.overscrollBehaviorY;
+		element.style.overscrollBehaviorY = "contain";
+		element.addEventListener("touchstart", onTouchStart, { passive: true });
+		element.addEventListener("touchmove", onTouchMove, { passive: false });
+		element.addEventListener("touchend", onTouchEnd, { passive: true });
+		element.addEventListener("touchcancel", onCancel, { passive: true });
+		element.addEventListener("contextmenu", onCancel);
+		element.addEventListener("dragstart", onCancel);
+		return () => {
+			live = false;
+			clearTimeout(holdTimer);
+			element.style.overscrollBehaviorY = previousOverscroll;
+			element.removeEventListener("touchstart", onTouchStart);
+			element.removeEventListener("touchmove", onTouchMove);
+			element.removeEventListener("touchend", onTouchEnd);
+			element.removeEventListener("touchcancel", onCancel);
+			element.removeEventListener("contextmenu", onCancel);
+			element.removeEventListener("dragstart", onCancel);
+			gestureRef.current = IDLE_PULL_GESTURE;
+			setGesture(IDLE_PULL_GESTURE);
+		};
+	}, [
+		enabled,
+		scrollRef,
+		onRefreshRef,
+		threshold,
+		maxDistance,
+		holdDistance,
+		platform
+	]);
+	const state = pullState(gesture);
+	const distance = state === "idle" ? 0 : gesture.distance;
+	return {
+		state,
+		distance,
+		progress: state === "refreshing" || gesture.armed ? 1 : pullProgress(distance, threshold),
+		platform
+	};
+}
+//#endregion
+export { PULL_TO_REFRESH_POINTER_QUERY, detectPullToRefreshPlatform, usePullToRefresh };

package/dist/components/radio-group/index.d.mts

@@ -0,0 +1,2 @@
+import { RadioGroup, RadioGroupIndicator, RadioGroupIndicatorProps, RadioGroupItem, RadioGroupItemProps, RadioGroupProps } from "./radio-group.mjs";
+export { RadioGroup, RadioGroupIndicator, type RadioGroupIndicatorProps, RadioGroupItem, type RadioGroupItemProps, type RadioGroupProps };

package/dist/components/radio-group/radio-group.d.mts

@@ -0,0 +1,14 @@
+import { StyledProps } from "../../lib/styled-props.mjs";
+import { Radio } from "@base-ui/react/radio";
+import { RadioGroup } from "@base-ui/react/radio-group";
+//#region src/components/radio-group/radio-group.d.ts
+export type RadioGroupProps<T extends string = string> = StyledProps<RadioGroup.Props<T>>;
+declare function RadioGroup$1<T extends string = string>({ className, ...props }: RadioGroupProps<T>): import("react").JSX.Element;
+export type RadioGroupIndicatorProps = StyledProps<Radio.Indicator.Props>;
+export declare function RadioGroupIndicator({ className, children, ...props }: RadioGroupIndicatorProps): import("react").JSX.Element;
+export type RadioGroupItemProps<T extends string = string> = StyledProps<Radio.Root.Props<T>> & {
+  appearance?: "default" | "none";
+};
+export declare function RadioGroupItem<T extends string = string>({ appearance, className, children, ...props }: RadioGroupItemProps<T>): import("react").JSX.Element;
+//#endregion
+export { RadioGroup$1 as RadioGroup };

package/dist/components/radio-group/radio-group.mjs

@@ -0,0 +1,59 @@
+import { cn } from "../../cn.mjs";
+import { tv } from "../../lib/tv.mjs";
+import { jsx } from "react/jsx-runtime";
+import { Radio } from "@base-ui/react/radio";
+import { RadioGroup } from "@base-ui/react/radio-group";
+//#region src/components/radio-group/radio-group.tsx
+const radioGroup = tv({ slots: {
+	root: [
+		"grid w-full gap-2",
+		"data-disabled:[&>label]:cursor-not-allowed data-disabled:[&>label]:text-foreground-disabled",
+		"data-disabled:[&>label_*]:text-foreground-disabled",
+		"font-sans [&>label]:font-semibold"
+	],
+	item: [
+		"relative inline-flex shrink-0 touch-manipulation items-center justify-center rounded-full outline-none",
+		"data-disabled:cursor-not-allowed",
+		"after:absolute after:-inset-x-3 after:-inset-y-2 after:content-['']",
+		"pointer-coarse:after:-inset-y-[calc(--spacing(3)+1.5px)]",
+		"[label>&]:my-[max(0px,calc((1lh-1.25rem)/2))]",
+		"[label>&]:after:-inset-y-[calc(max(0px,(1lh-1.25rem)/2)+5.5px)]",
+		"size-5 border-[1.5px] border-line-strong bg-layer-card text-foreground",
+		"focus-visible:shadow-focus",
+		"data-disabled:border-foreground-disabled data-disabled:bg-fill-muted data-disabled:text-foreground-disabled"
+	],
+	indicator: ["pointer-events-none flex size-full items-center justify-center"],
+	dot: ["block rounded-full bg-current", "size-2"]
+} });
+function RadioGroup$1({ className, ...props }) {
+	const { root } = radioGroup();
+	return /* @__PURE__ */ jsx(RadioGroup, {
+		"data-slot": "radio-group",
+		className: root({ className }),
+		...props
+	});
+}
+function RadioGroupIndicator({ className, children, ...props }) {
+	const { indicator, dot } = radioGroup();
+	return /* @__PURE__ */ jsx(Radio.Indicator, {
+		"data-slot": "radio-group-indicator",
+		className: indicator({ className }),
+		...props,
+		children: children ?? /* @__PURE__ */ jsx("span", {
+			"data-slot": "radio-group-dot",
+			className: dot()
+		})
+	});
+}
+function RadioGroupItem({ appearance = "default", className, children, ...props }) {
+	const { item } = radioGroup();
+	const itemClassName = appearance === "none" ? cn("sr-only", "data-disabled:cursor-not-allowed", className) : item({ className });
+	return /* @__PURE__ */ jsx(Radio.Root, {
+		"data-slot": "radio-group-item",
+		className: itemClassName,
+		...props,
+		children: children ?? (appearance === "default" ? /* @__PURE__ */ jsx(RadioGroupIndicator, {}) : null)
+	});
+}
+//#endregion
+export { RadioGroup$1 as RadioGroup, RadioGroupIndicator, RadioGroupItem };

package/dist/components/resizable/index.d.mts

@@ -0,0 +1,2 @@
+import { ResizableGroup, ResizableGroupProps, ResizableHandle, ResizableHandleProps, ResizablePanel, ResizablePanelProps } from "./resizable.mjs";
+export { ResizableGroup, type ResizableGroupProps, ResizableHandle, type ResizableHandleProps, ResizablePanel, type ResizablePanelProps };

package/dist/components/resizable/resizable.d.mts

@@ -0,0 +1,15 @@
+import { GroupProps, PanelProps, SeparatorProps } from "react-resizable-panels";
+//#region src/components/resizable/resizable.d.ts
+export type ResizableGroupProps = Omit<GroupProps, "className"> & {
+  className?: string;
+};
+export declare function ResizableGroup({ className, orientation, ...props }: ResizableGroupProps): import("react").JSX.Element;
+export type ResizablePanelProps = Omit<PanelProps, "className"> & {
+  className?: string;
+};
+export declare function ResizablePanel({ className, ...props }: ResizablePanelProps): import("react").JSX.Element;
+export type ResizableHandleProps = Omit<SeparatorProps, "className"> & {
+  className?: string;
+};
+export declare function ResizableHandle({ className, ...props }: ResizableHandleProps): import("react").JSX.Element;
+//#endregion

package/dist/components/resizable/resizable.mjs

@@ -0,0 +1,39 @@
+import { resizable } from "./resizable.recipe.mjs";
+import { createContext, useContext } from "react";
+import { jsx } from "react/jsx-runtime";
+import { Group, Panel, Separator } from "react-resizable-panels";
+//#region src/components/resizable/resizable.tsx
+const ResizableOrientationContext = createContext("horizontal");
+function ResizableGroup({ className, orientation = "horizontal", ...props }) {
+	const { group } = resizable();
+	return /* @__PURE__ */ jsx(ResizableOrientationContext.Provider, {
+		value: orientation,
+		children: /* @__PURE__ */ jsx(Group, {
+			"data-slot": "resizable-group",
+			"data-orientation": orientation,
+			orientation,
+			className: group({ className }),
+			...props
+		})
+	});
+}
+function ResizablePanel({ className, ...props }) {
+	const { panel } = resizable();
+	return /* @__PURE__ */ jsx(Panel, {
+		"data-slot": "resizable-panel",
+		className: panel({ className }),
+		...props
+	});
+}
+function ResizableHandle({ className, ...props }) {
+	const { handle } = resizable();
+	const handleOrientation = useContext(ResizableOrientationContext) === "horizontal" ? "vertical" : "horizontal";
+	return /* @__PURE__ */ jsx(Separator, {
+		"data-slot": "resizable-handle",
+		"data-orientation": handleOrientation,
+		className: handle({ className }),
+		...props
+	});
+}
+//#endregion
+export { ResizableGroup, ResizableHandle, ResizablePanel };

package/dist/components/resizable/resizable.recipe.mjs

@@ -0,0 +1,24 @@
+import { tv } from "../../lib/tv.mjs";
+//#region src/components/resizable/resizable.recipe.ts
+const resizable = tv({ slots: {
+	group: ["flex size-full  min-h-0 min-w-0", "data-[orientation=vertical]:flex-col"],
+	panel: ["min-h-0 min-w-0"],
+	handle: [
+		"right-0 z-10 cursor-ew-resize touch-none select-none",
+		"relative -ml-1.5 -mr-1.5 flex w-3 shrink-0 items-center justify-center pointer-coarse:-ml-3 pointer-coarse:-mr-3 pointer-coarse:w-6",
+		"before:pointer-events-none before:absolute before:transition-colors before:content-['']",
+		"focus-visible:outline-none focus-visible:before:outline-2 focus-visible:before:outline-offset-2 focus-visible:before:outline-foreground",
+		"data-[orientation=horizontal]:-mt-1.5 data-[orientation=horizontal]:-mb-1.5 data-[orientation=horizontal]:ml-0 data-[orientation=horizontal]:mr-0 data-[orientation=horizontal]:h-3 data-[orientation=horizontal]:w-full data-[orientation=horizontal]:cursor-ns-resize",
+		"bg-transparent",
+		"before:top-0 before:left-[5px] pointer-coarse:before:left-[11px] before:h-full before:w-px before:translate-none before:rounded-none",
+		"before:bg-transparent",
+		"hover:before:bg-foreground-muted",
+		"data-[separator=active]:before:bg-foreground-muted",
+		"focus-visible:keyboard:before:w-0.5 focus-visible:keyboard:before:bg-foreground focus-visible:before:outline-none",
+		"data-[orientation=horizontal]:before:top-[5px] data-[orientation=horizontal]:before:left-0",
+		"data-[orientation=horizontal]:before:h-px data-[orientation=horizontal]:before:w-full",
+		"data-[orientation=horizontal]:focus-visible:keyboard:before:h-0.5"
+	]
+} });
+//#endregion
+export { resizable };

package/dist/components/scroll-area/index.d.mts

@@ -0,0 +1,2 @@
+import { ScrollArea, ScrollAreaContent, ScrollAreaContentProps, ScrollAreaCorner, ScrollAreaCornerProps, ScrollAreaProps, ScrollAreaScrollbar, ScrollAreaScrollbarProps, ScrollAreaThumb, ScrollAreaThumbProps, ScrollAreaViewport, ScrollAreaViewportProps } from "./scroll-area.mjs";
+export { ScrollArea, ScrollAreaContent, type ScrollAreaContentProps, ScrollAreaCorner, type ScrollAreaCornerProps, type ScrollAreaProps, ScrollAreaScrollbar, type ScrollAreaScrollbarProps, ScrollAreaThumb, type ScrollAreaThumbProps, ScrollAreaViewport, type ScrollAreaViewportProps };

package/dist/components/scroll-area/scroll-area.d.mts

@@ -0,0 +1,17 @@
+import { StyledProps } from "../../lib/styled-props.mjs";
+import { ScrollArea } from "@base-ui/react/scroll-area";
+//#region src/components/scroll-area/scroll-area.d.ts
+export type ScrollAreaProps = StyledProps<ScrollArea.Root.Props>;
+declare function ScrollArea$1({ className, ...props }: ScrollAreaProps): import("react").JSX.Element;
+export type ScrollAreaViewportProps = StyledProps<ScrollArea.Viewport.Props>;
+export declare function ScrollAreaViewport({ className, ...props }: ScrollAreaViewportProps): import("react").JSX.Element;
+export type ScrollAreaContentProps = StyledProps<ScrollArea.Content.Props>;
+export declare function ScrollAreaContent({ className, ...props }: ScrollAreaContentProps): import("react").JSX.Element;
+export type ScrollAreaScrollbarProps = StyledProps<ScrollArea.Scrollbar.Props>;
+export declare function ScrollAreaScrollbar({ className, orientation, ...props }: ScrollAreaScrollbarProps): import("react").JSX.Element;
+export type ScrollAreaThumbProps = StyledProps<ScrollArea.Thumb.Props>;
+export declare function ScrollAreaThumb({ className, ...props }: ScrollAreaThumbProps): import("react").JSX.Element;
+export type ScrollAreaCornerProps = StyledProps<ScrollArea.Corner.Props>;
+export declare function ScrollAreaCorner({ className, ...props }: ScrollAreaCornerProps): import("react").JSX.Element;
+//#endregion
+export { ScrollArea$1 as ScrollArea };

package/dist/components/scroll-area/scroll-area.mjs

@@ -0,0 +1,55 @@
+import { scrollArea } from "./scroll-area.recipe.mjs";
+import { jsx } from "react/jsx-runtime";
+import { ScrollArea } from "@base-ui/react/scroll-area";
+//#region src/components/scroll-area/scroll-area.tsx
+function ScrollArea$1({ className, ...props }) {
+	const { root } = scrollArea();
+	return /* @__PURE__ */ jsx(ScrollArea.Root, {
+		"data-slot": "scroll-area",
+		className: root({ className }),
+		...props
+	});
+}
+function ScrollAreaViewport({ className, ...props }) {
+	const { viewport } = scrollArea();
+	return /* @__PURE__ */ jsx(ScrollArea.Viewport, {
+		"data-slot": "scroll-area-viewport",
+		className: viewport({ className }),
+		...props
+	});
+}
+function ScrollAreaContent({ className, ...props }) {
+	const { content } = scrollArea();
+	return /* @__PURE__ */ jsx(ScrollArea.Content, {
+		"data-slot": "scroll-area-content",
+		className: content({ className }),
+		...props
+	});
+}
+function ScrollAreaScrollbar({ className, orientation = "vertical", ...props }) {
+	const { scrollbar } = scrollArea();
+	return /* @__PURE__ */ jsx(ScrollArea.Scrollbar, {
+		"data-slot": "scroll-area-scrollbar",
+		orientation,
+		className: scrollbar({ className }),
+		...props
+	});
+}
+function ScrollAreaThumb({ className, ...props }) {
+	const { thumb } = scrollArea();
+	return /* @__PURE__ */ jsx(ScrollArea.Thumb, {
+		"data-slot": "scroll-area-thumb",
+		className: thumb({ className }),
+		...props
+	});
+}
+function ScrollAreaCorner({ className, ...props }) {
+	const { corner } = scrollArea();
+	return /* @__PURE__ */ jsx(ScrollArea.Corner, {
+		"data-slot": "scroll-area-corner",
+		className: corner({ className }),
+		...props
+	});
+}
+//#endregion
+export { ScrollArea$1 as ScrollArea, ScrollAreaContent, ScrollAreaCorner, ScrollAreaScrollbar, ScrollAreaThumb, ScrollAreaViewport };

package/dist/components/scroll-area/scroll-area.recipe.mjs

@@ -0,0 +1,23 @@
+import { tv } from "../../lib/tv.mjs";
+//#region src/components/scroll-area/scroll-area.recipe.ts
+const scrollArea = tv({ slots: {
+	root: ["relative min-h-0"],
+	viewport: ["size-full min-h-0 overscroll-contain outline-none", "[overflow-anchor:auto] [-webkit-overflow-scrolling:touch]"],
+	content: ["min-h-full"],
+	scrollbar: [
+		"group/scroll-area-scrollbar z-50 flex touch-none select-none p-1",
+		"opacity-0 transition-opacity duration-150 pointer-events-none",
+		"data-scrolling:pointer-events-auto data-scrolling:opacity-100 data-scrolling:duration-0",
+		"data-[orientation=vertical]:w-3 data-[orientation=vertical]:justify-center",
+		"data-[orientation=horizontal]:h-3 data-[orientation=horizontal]:flex-col data-[orientation=horizontal]:justify-center"
+	],
+	thumb: [
+		"relative",
+		"group-data-[orientation=vertical]/scroll-area-scrollbar:w-1.5",
+		"group-data-[orientation=horizontal]/scroll-area-scrollbar:h-1.5",
+		"rounded-[2px] bg-foreground/30 hover:bg-foreground/45"
+	],
+	corner: ["bg-transparent"]
+} });
+//#endregion
+export { scrollArea };

package/dist/components/search/index.d.mts

@@ -0,0 +1,6 @@
+import { SearchResultsList, SearchResultsListProps, SearchResultsSection, SearchResultsSectionHeading, SearchResultsSectionHeadingProps, SearchResultsSectionProps, SearchResultsSummary, SearchResultsSummaryProps, SearchShellFilters, SearchShellFiltersProps, SearchShellRoot, SearchShellRootProps, SearchShellViewport, SearchShellViewportProps } from "./search.mjs";
+import { SearchEntityResult, SearchEntityResultActivity, SearchEntityResultActivityProps, SearchEntityResultContent, SearchEntityResultContentProps, SearchEntityResultDescription, SearchEntityResultDescriptionProps, SearchEntityResultHeader, SearchEntityResultHeaderProps, SearchEntityResultIcon, SearchEntityResultIconProps, SearchEntityResultLeading, SearchEntityResultLeadingProps, SearchEntityResultProps, SearchEntityResultTitle, SearchEntityResultTitleProps } from "./search-entity.mjs";
+import { SearchMessageResult, SearchMessageResultBody, SearchMessageResultBodyProps, SearchMessageResultHeader, SearchMessageResultHeaderProps, SearchMessageResultMatch, SearchMessageResultMatchProps, SearchMessageResultMeta, SearchMessageResultMetaProps, SearchMessageResultProps, SearchMessageResultSender, SearchMessageResultSenderProps, SearchMessageResultThreadMeta, SearchMessageResultThreadMetaProps, SearchMessageResultTimestamp, SearchMessageResultTimestampProps, SearchThreadMessageResult, SearchThreadMessageResultProps } from "./search-message.mjs";
+import { SearchThreadResult, SearchThreadResultHeader, SearchThreadResultHeaderProps, SearchThreadResultMessages, SearchThreadResultMessagesProps, SearchThreadResultMeta, SearchThreadResultMetaProps, SearchThreadResultProps, SearchThreadResultTimestamp, SearchThreadResultTimestampProps, SearchThreadResultTitle, SearchThreadResultTitleProps } from "./search-thread.mjs";
+import { SearchTrigger, SearchTriggerLabel, SearchTriggerLabelProps, SearchTriggerProps, SearchTriggerShortcut, SearchTriggerShortcutProps } from "./search-trigger.mjs";
+export { SearchEntityResult, SearchEntityResultActivity, SearchEntityResultActivityProps, SearchEntityResultContent, SearchEntityResultContentProps, SearchEntityResultDescription, SearchEntityResultDescriptionProps, SearchEntityResultHeader, SearchEntityResultHeaderProps, SearchEntityResultIcon, SearchEntityResultIconProps, SearchEntityResultLeading, SearchEntityResultLeadingProps, SearchEntityResultProps, SearchEntityResultTitle, SearchEntityResultTitleProps, SearchMessageResult, SearchMessageResultBody, SearchMessageResultBodyProps, SearchMessageResultHeader, SearchMessageResultHeaderProps, SearchMessageResultMatch, SearchMessageResultMatchProps, SearchMessageResultMeta, SearchMessageResultMetaProps, SearchMessageResultProps, SearchMessageResultSender, SearchMessageResultSenderProps, SearchMessageResultThreadMeta, SearchMessageResultThreadMetaProps, SearchMessageResultTimestamp, SearchMessageResultTimestampProps, SearchResultsList, SearchResultsListProps, SearchResultsSection, SearchResultsSectionHeading, SearchResultsSectionHeadingProps, SearchResultsSectionProps, SearchResultsSummary, SearchResultsSummaryProps, SearchShellFilters, SearchShellFiltersProps, SearchShellRoot, SearchShellRootProps, SearchShellViewport, SearchShellViewportProps, SearchThreadMessageResult, SearchThreadMessageResultProps, SearchThreadResult, SearchThreadResultHeader, SearchThreadResultHeaderProps, SearchThreadResultMessages, SearchThreadResultMessagesProps, SearchThreadResultMeta, SearchThreadResultMetaProps, SearchThreadResultProps, SearchThreadResultTimestamp, SearchThreadResultTimestampProps, SearchThreadResultTitle, SearchThreadResultTitleProps, SearchTrigger, SearchTriggerLabel, SearchTriggerLabelProps, SearchTriggerProps, SearchTriggerShortcut, SearchTriggerShortcutProps };