@botiverse/raft-ui 0.51.0 → 0.52.0

package/dist/components/steps/otter-indicator.mjs

@@ -0,0 +1,331 @@
+import { cn } from "../../cn.mjs";
+import { useId } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/steps/otter-indicator.tsx
+const WAVE_PATH = "M-12 30q3-1.6 6 0t6 0t6 0t6 0t6 0t6 0t6 0t6 0t6 0t6 0t6 0t6 0V48H-12Z";
+const FUR = "oklch(0.5 0.07 55)";
+const FUR_DARK = "oklch(0.42 0.06 55)";
+const INK = "oklch(0.22 0.03 45)";
+const WHITE = "oklch(1 0 0)";
+function Parcel({ x, y }) {
+	return /* @__PURE__ */ jsxs("g", {
+		transform: `translate(${x} ${y})`,
+		children: [/* @__PURE__ */ jsx("rect", {
+			width: "9",
+			height: "7",
+			rx: "0.8",
+			fill: "oklch(0.78 0.12 75)",
+			stroke: FUR_DARK,
+			strokeWidth: "0.8"
+		}), /* @__PURE__ */ jsx("path", {
+			d: "M4.5 0v7M0 3h9",
+			stroke: "oklch(0.63 0.11 65)",
+			strokeWidth: "0.8"
+		})]
+	});
+}
+/** The face changes with the step: asleep, paddling, pleased or upset. */
+function Face({ status }) {
+	const line = {
+		fill: "none",
+		stroke: INK,
+		strokeWidth: .8,
+		strokeLinecap: "round"
+	};
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		status === "process" && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("circle", {
+			cx: "36.3",
+			cy: "20.6",
+			r: "1.1",
+			fill: INK
+		}), /* @__PURE__ */ jsx("circle", {
+			cx: "36.7",
+			cy: "20.2",
+			r: "0.35",
+			fill: WHITE
+		})] }),
+		status === "wait" && /* @__PURE__ */ jsx("path", {
+			d: "M35.2 20.6q1.1 0.9 2.2 0",
+			...line
+		}),
+		status === "finish" && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("path", {
+			d: "M35.2 21.2q1.1-1.3 2.2 0",
+			...line
+		}), /* @__PURE__ */ jsx("ellipse", {
+			cx: "38.6",
+			cy: "22.4",
+			rx: "1.3",
+			ry: "0.8",
+			fill: "oklch(0.8 0.1 20)",
+			opacity: "0.8"
+		})] }),
+		status === "error" && /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			/* @__PURE__ */ jsx("circle", {
+				cx: "36.3",
+				cy: "20.8",
+				r: "1.2",
+				fill: WHITE,
+				stroke: INK,
+				strokeWidth: "0.5"
+			}),
+			/* @__PURE__ */ jsx("circle", {
+				cx: "36.5",
+				cy: "21",
+				r: "0.55",
+				fill: INK
+			}),
+			/* @__PURE__ */ jsx("path", {
+				d: "M34.6 18.2l2.8 0.8",
+				...line
+			})
+		] }),
+		/* @__PURE__ */ jsx("ellipse", {
+			cx: "42.6",
+			cy: "23.6",
+			rx: "1.4",
+			ry: "1.1",
+			fill: INK
+		}),
+		/* @__PURE__ */ jsx("path", {
+			d: status === "error" ? "M39.6 27.2q1-0.9 2.1 0" : "M39.6 26.6q1 0.9 2.1 0",
+			...line,
+			strokeWidth: .7
+		}),
+		/* @__PURE__ */ jsx("path", {
+			d: "M41 25.2l4.2-0.8M41 26l4.2 0.6",
+			stroke: FUR_DARK,
+			strokeWidth: "0.4",
+			strokeLinecap: "round"
+		})
+	] });
+}
+/** A small badge above the head: ✓ when done, ! when failed. */
+function Badge({ status }) {
+	if (status !== "finish" && status !== "error") return null;
+	return /* @__PURE__ */ jsxs("g", {
+		transform: "translate(43 9)",
+		children: [/* @__PURE__ */ jsx("circle", {
+			r: "4.6",
+			fill: status === "finish" ? "var(--success)" : "var(--danger)",
+			stroke: WHITE,
+			strokeWidth: "1"
+		}), status === "finish" ? /* @__PURE__ */ jsx("path", {
+			d: "M-2 0l1.4 1.5L2.1-1.4",
+			fill: "none",
+			stroke: WHITE,
+			strokeWidth: "1.2",
+			strokeLinecap: "round",
+			strokeLinejoin: "round"
+		}) : /* @__PURE__ */ jsx("path", {
+			d: "M0-2.4v2.6M0 2.1v0.1",
+			stroke: WHITE,
+			strokeWidth: "1.3",
+			strokeLinecap: "round"
+		})]
+	});
+}
+/** The otter on its back, posed by the step: paddling, at ease, upset or asleep. */
+function OtterBody({ status }) {
+	return /* @__PURE__ */ jsxs("g", {
+		className: "r-otter-indicator__body",
+		children: [
+			/* @__PURE__ */ jsx("path", {
+				d: "M13 26.5Q6 26.5 1.5 30.5Q7 32 13 31Z",
+				fill: FUR_DARK
+			}),
+			/* @__PURE__ */ jsx("ellipse", {
+				cx: "11",
+				cy: "21.5",
+				rx: "1.9",
+				ry: "3",
+				fill: FUR_DARK,
+				transform: "rotate(-25 11 21.5)"
+			}),
+			/* @__PURE__ */ jsx("ellipse", {
+				cx: "14.5",
+				cy: "20.5",
+				rx: "1.9",
+				ry: "3",
+				fill: FUR_DARK,
+				transform: "rotate(-10 14.5 20.5)"
+			}),
+			/* @__PURE__ */ jsx("g", {
+				className: "r-otter-indicator__arm",
+				children: /* @__PURE__ */ jsx("path", {
+					d: status === "process" ? "M29 27q4 3.5 2.5 8" : "M29 26q3 0.5 4-2",
+					fill: "none",
+					stroke: FUR_DARK,
+					strokeWidth: "2.8",
+					strokeLinecap: "round"
+				})
+			}),
+			/* @__PURE__ */ jsx("ellipse", {
+				cx: "22",
+				cy: "28",
+				rx: "12",
+				ry: "6.5",
+				fill: FUR
+			}),
+			/* @__PURE__ */ jsx("ellipse", {
+				cx: "22",
+				cy: "25",
+				rx: "9",
+				ry: "3.6",
+				fill: "oklch(0.8 0.06 70)"
+			}),
+			status !== "error" && /* @__PURE__ */ jsx(Parcel, {
+				x: 16.5,
+				y: 16.5
+			}),
+			/* @__PURE__ */ jsx("ellipse", {
+				cx: "26.5",
+				cy: "21",
+				rx: "1.7",
+				ry: "2.4",
+				fill: FUR_DARK,
+				transform: "rotate(30 26.5 21)"
+			}),
+			status === "finish" && /* @__PURE__ */ jsx("ellipse", {
+				cx: "16",
+				cy: "21.5",
+				rx: "1.6",
+				ry: "2.2",
+				fill: FUR_DARK,
+				transform: "rotate(-30 16 21.5)"
+			}),
+			/* @__PURE__ */ jsx("circle", {
+				cx: "31.5",
+				cy: "17.3",
+				r: "1.8",
+				fill: FUR_DARK
+			}),
+			/* @__PURE__ */ jsx("circle", {
+				cx: "35",
+				cy: "23",
+				r: "7",
+				fill: FUR
+			}),
+			/* @__PURE__ */ jsx("ellipse", {
+				cx: "39",
+				cy: "25",
+				rx: "4.2",
+				ry: "3.2",
+				fill: "oklch(0.87 0.05 75)"
+			}),
+			/* @__PURE__ */ jsx(Face, { status }),
+			status === "error" && /* @__PURE__ */ jsx("path", {
+				d: "M37.4 22.3q-0.8 1.4 0 1.9q0.8-0.5 0-1.9Z",
+				fill: "oklch(0.8 0.08 230)"
+			})
+		]
+	});
+}
+/**
+* An otter on its back, one pose per status:
+* - `wait`: asleep on the dry bank, the parcel still on its belly.
+* - `process`: afloat, paddling with one arm, the parcel on its belly.
+* - `finish`: drifting at ease, hugging the delivered parcel.
+* - `error`: shivering in the water; the parcel has slipped away.
+*
+* It fills its box; give it 48px or more so the poses read.
+*/
+function OtterIndicator({ status, className, ...props }) {
+	const pondId = `otter-pond${useId().replace(/[^\w-]/g, "")}`;
+	const pond = `url(#${pondId})`;
+	const wet = status !== "wait";
+	return /* @__PURE__ */ jsxs("svg", {
+		"aria-hidden": "true",
+		viewBox: "0 0 48 48",
+		width: "100%",
+		height: "100%",
+		"data-slot": "otter-indicator",
+		...props,
+		className: cn("r-otter-indicator", `r-otter-indicator--${status}`, className),
+		children: [
+			/* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("clipPath", {
+				id: pondId,
+				children: /* @__PURE__ */ jsx("ellipse", {
+					cx: "24",
+					cy: "35",
+					rx: "23.5",
+					ry: "8"
+				})
+			}) }),
+			/* @__PURE__ */ jsxs("g", {
+				transform: "translate(0 -5)",
+				children: [
+					wet ? /* @__PURE__ */ jsx("g", {
+						clipPath: pond,
+						children: /* @__PURE__ */ jsx("path", {
+							className: "r-otter-indicator__wave r-otter-indicator__wave--back",
+							d: WAVE_PATH,
+							fill: "oklch(0.88 0.07 215)",
+							transform: "translate(0 -1.5)"
+						})
+					}) : /* @__PURE__ */ jsxs("g", { children: [
+						/* @__PURE__ */ jsx("ellipse", {
+							cx: "24",
+							cy: "34",
+							rx: "22",
+							ry: "5.5",
+							fill: "oklch(0.9 0.06 85)"
+						}),
+						/* @__PURE__ */ jsx("ellipse", {
+							cx: "7",
+							cy: "34.5",
+							rx: "1.6",
+							ry: "1",
+							fill: "oklch(0.78 0.06 75)"
+						}),
+						/* @__PURE__ */ jsx("ellipse", {
+							cx: "41",
+							cy: "35.5",
+							rx: "1.2",
+							ry: "0.8",
+							fill: "oklch(0.78 0.06 75)"
+						})
+					] }),
+					status === "process" && ["", " r-otter-indicator__ripple--late"].map((late) => /* @__PURE__ */ jsx("ellipse", {
+						className: `r-otter-indicator__ripple${late}`,
+						cx: "6",
+						cy: "30.5",
+						rx: "5",
+						ry: "1.4",
+						fill: "none",
+						stroke: WHITE,
+						strokeWidth: "0.8"
+					}, late)),
+					status === "error" && /* @__PURE__ */ jsx("g", {
+						className: "r-otter-indicator__parcel--adrift",
+						children: /* @__PURE__ */ jsx(Parcel, {
+							x: 1.5,
+							y: 22
+						})
+					}),
+					/* @__PURE__ */ jsx(OtterBody, { status }),
+					wet && /* @__PURE__ */ jsx("g", {
+						clipPath: pond,
+						children: /* @__PURE__ */ jsx("path", {
+							className: "r-otter-indicator__wave",
+							d: WAVE_PATH,
+							fill: "oklch(0.78 0.11 220)",
+							fillOpacity: "0.9"
+						})
+					}),
+					status === "wait" && ["", " r-otter-indicator__z--late"].map((late, i) => /* @__PURE__ */ jsx("text", {
+						className: `r-otter-indicator__z${late}`,
+						x: i === 0 ? 38 : 43,
+						y: i === 0 ? 15 : 9,
+						fontSize: i === 0 ? 9 : 7,
+						fontWeight: "700",
+						fill: "var(--foreground-muted, currentColor)",
+						children: "z"
+					}, late))
+				]
+			}),
+			/* @__PURE__ */ jsx(Badge, { status })
+		]
+	});
+}
+//#endregion
+export { OtterIndicator };

package/dist/components/steps/steps.d.mts

@@ -0,0 +1,50 @@
+import { ComponentPropsWithRef, ReactNode } from "react";
+//#region src/components/steps/steps.d.ts
+/** `wait` is ahead, `process` is in progress, `finish` is done and `error` failed. */
+export type StepStatus = "process" | "finish" | "error" | "wait";
+export interface StepsProps extends Omit<ComponentPropsWithRef<"ol">, "onChange"> {
+  /**
+   * The current step, counted from 1. Steps before it are `finish`, after it
+   * `wait`, and the current one takes `status`. Leave it unset with
+   * `defaultCurrent` to let clicks move it.
+   */
+  current?: number;
+  /** Initial current step when uncontrolled. */
+  defaultCurrent?: number;
+  /** Status of the current step. */
+  status?: StepStatus;
+  /** Lays the steps out in a column instead of a row. */
+  vertical?: boolean;
+  /** Replaces the check mark of finished steps. */
+  finishIcon?: ReactNode;
+  /** Replaces the cross of failed steps. */
+  errorIcon?: ReactNode;
+  /** Screen-reader text read after a finished step's title. */
+  finishLabel?: string;
+  /** Screen-reader text read after a failed step's title. */
+  errorLabel?: string;
+  /**
+   * Called with the clicked step's number. Setting it turns every step that
+   * isn't `disabled` into a button.
+   */
+  onUpdateCurrent?: (current: number) => void;
+}
+export interface StepProps extends Omit<ComponentPropsWithRef<"li">, "title"> {
+  title?: ReactNode;
+  /** Shown under the title. `children` override it. */
+  description?: ReactNode;
+  /** Overrides the status the step gets from `current`. */
+  status?: StepStatus;
+  /** Replaces the number of a step that is waiting or in progress. */
+  icon?: ReactNode;
+  /** Keeps the step from being clicked when the steps are clickable. */
+  disabled?: boolean;
+}
+/**
+ * Numbered steps through a process, as an ordered list of `Step`s. Each child
+ * is numbered by its position; the step at `current` gets `aria-current="step"`.
+ */
+export declare function Steps({ current: currentProp, defaultCurrent, status, vertical, finishIcon, errorIcon, finishLabel, errorLabel, onUpdateCurrent, className, children, ref, ...props }: StepsProps): import("react").JSX.Element;
+/** One step in `Steps`: a numbered marker, a title and a description. */
+export declare function Step({ title, description, status: statusProp, icon, disabled, className, children, ...props }: StepProps): import("react").JSX.Element;
+//#endregion

package/dist/components/steps/steps.mjs

@@ -0,0 +1,174 @@
+import { cn } from "../../cn.mjs";
+import { Children, createContext, isValidElement, use, useCallback, useId, useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/steps/steps.tsx
+const StepsContext = createContext({
+	current: void 0,
+	status: "process",
+	finishIcon: void 0,
+	errorIcon: void 0,
+	finishLabel: "Completed",
+	errorLabel: "Failed",
+	select: void 0
+});
+/** The step's number, counted from 1, given by `Steps` to each child. */
+const StepIndexContext = createContext(0);
+const finishMark = /* @__PURE__ */ jsx("svg", {
+	"aria-hidden": "true",
+	fill: "none",
+	viewBox: "0 0 16 16",
+	children: /* @__PURE__ */ jsx("path", {
+		d: "M3.5 8.5l3 3 6-7",
+		stroke: "currentColor",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		strokeWidth: "2"
+	})
+});
+const errorMark = /* @__PURE__ */ jsx("svg", {
+	"aria-hidden": "true",
+	fill: "none",
+	viewBox: "0 0 16 16",
+	children: /* @__PURE__ */ jsx("path", {
+		d: "M4.5 4.5l7 7M11.5 4.5l-7 7",
+		stroke: "currentColor",
+		strokeLinecap: "round",
+		strokeWidth: "2"
+	})
+});
+/**
+* A step's own `status` wins; otherwise steps before `current` are finished,
+* after it waiting, and the current step takes the steps' `status`. Without a
+* `current` every step is in progress.
+*/
+function stepStatus(index, current, currentStatus, own) {
+	if (own) return own;
+	if (current === void 0) return "process";
+	if (index < current) return "finish";
+	if (index > current) return "wait";
+	return currentStatus;
+}
+/**
+* Numbered steps through a process, as an ordered list of `Step`s. Each child
+* is numbered by its position; the step at `current` gets `aria-current="step"`.
+*/
+function Steps({ current: currentProp, defaultCurrent, status = "process", vertical = false, finishIcon, errorIcon, finishLabel = "Completed", errorLabel = "Failed", onUpdateCurrent, className, children, ref, ...props }) {
+	const [uncontrolledCurrent, setUncontrolledCurrent] = useState(defaultCurrent);
+	const current = currentProp ?? uncontrolledCurrent;
+	const clickable = onUpdateCurrent !== void 0;
+	const select = useCallback((index) => {
+		if (index === current) return;
+		setUncontrolledCurrent(index);
+		onUpdateCurrent?.(index);
+	}, [current, onUpdateCurrent]);
+	const steps = Children.toArray(children).filter(isValidElement);
+	const context = useMemo(() => ({
+		current,
+		status,
+		finishIcon,
+		errorIcon,
+		finishLabel,
+		errorLabel,
+		select: clickable ? select : void 0
+	}), [
+		current,
+		status,
+		finishIcon,
+		errorIcon,
+		finishLabel,
+		errorLabel,
+		clickable,
+		select
+	]);
+	return /* @__PURE__ */ jsx(StepsContext, {
+		value: context,
+		children: /* @__PURE__ */ jsx("ol", {
+			ref,
+			"data-slot": "steps",
+			className: cn("r-steps", vertical ? "r-steps--vertical" : "r-steps--horizontal", className),
+			...props,
+			children: steps.map((child, index) => /* @__PURE__ */ jsx(StepIndexContext, {
+				value: index + 1,
+				children: child
+			}, child.key))
+		})
+	});
+}
+/** The marker of a step: the finish or error mark, else its icon or number. */
+function stepMarker(status, icon, index, steps) {
+	if (status === "finish") return steps.finishIcon ?? finishMark;
+	if (status === "error") return steps.errorIcon ?? errorMark;
+	return icon ?? /* @__PURE__ */ jsx("span", {
+		"data-slot": "step-index",
+		className: "r-step__index",
+		children: index
+	});
+}
+/** Read out after the title: the marker's check or cross says it only by look. */
+function StepStatusLabel({ status, steps }) {
+	if (status !== "finish" && status !== "error") return null;
+	const text = status === "finish" ? steps.finishLabel : steps.errorLabel;
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "step-status",
+		className: "r-step__status",
+		children: ` ${text}`
+	});
+}
+/** One step in `Steps`: a numbered marker, a title and a description. */
+function Step({ title, description, status: statusProp, icon, disabled = false, className, children, ...props }) {
+	const steps = use(StepsContext);
+	const index = use(StepIndexContext);
+	const descriptionId = useId();
+	const status = stepStatus(index, steps.current, steps.status, statusProp);
+	const isCurrent = steps.current !== void 0 && index === steps.current;
+	const { select } = steps;
+	const body = children ?? description;
+	const handleClick = useCallback(() => select?.(index), [select, index]);
+	const statusLabel = /* @__PURE__ */ jsx(StepStatusLabel, {
+		status,
+		steps
+	});
+	return /* @__PURE__ */ jsxs("li", {
+		"data-slot": "step",
+		"aria-current": isCurrent ? "step" : void 0,
+		className: cn("r-step", `r-step--${status}`, select !== void 0 && !disabled && "r-step--clickable", disabled && "r-step--disabled", className),
+		...props,
+		children: [/* @__PURE__ */ jsxs("div", {
+			"data-slot": "step-main",
+			className: "r-step__main",
+			children: [/* @__PURE__ */ jsx("div", {
+				"aria-hidden": "true",
+				"data-slot": "step-indicator",
+				className: "r-step__indicator",
+				children: stepMarker(status, icon, index, steps)
+			}), /* @__PURE__ */ jsxs("div", {
+				"data-slot": "step-content",
+				className: "r-step__content",
+				children: [select === void 0 ? /* @__PURE__ */ jsxs("div", {
+					"data-slot": "step-title",
+					className: "r-step__title",
+					children: [title, statusLabel]
+				}) : /* @__PURE__ */ jsxs("button", {
+					type: "button",
+					"data-slot": "step-title",
+					"aria-describedby": body == null ? void 0 : descriptionId,
+					className: "r-step__title r-step__button",
+					disabled,
+					onClick: handleClick,
+					children: [title, statusLabel]
+				}), body == null ? null : /* @__PURE__ */ jsx("div", {
+					"data-slot": "step-description",
+					className: "r-step__description",
+					id: descriptionId,
+					children: body
+				})]
+			})]
+		}), /* @__PURE__ */ jsx("div", {
+			"aria-hidden": "true",
+			"data-slot": "step-connector",
+			className: "r-step__connector"
+		})]
+	});
+}
+//#endregion
+export { Step, Steps };

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

@@ -0,0 +1,2 @@
+import { Switch, SwitchProps, SwitchThumb, SwitchThumbProps } from "./switch.mjs";
+export { Switch, type SwitchProps, SwitchThumb, type SwitchThumbProps };

package/dist/components/switch/switch.d.mts

@@ -0,0 +1,9 @@
+import { StyledProps } from "../../lib/styled-props.mjs";
+import { Switch } from "@base-ui/react/switch";
+//#region src/components/switch/switch.d.ts
+export type SwitchProps = StyledProps<Switch.Root.Props>;
+declare function Switch$1({ className, children, ...props }: SwitchProps): import("react").JSX.Element;
+export type SwitchThumbProps = StyledProps<Switch.Thumb.Props>;
+export declare function SwitchThumb({ className, ...props }: SwitchThumbProps): import("react").JSX.Element;
+//#endregion
+export { Switch$1 as Switch };

package/dist/components/switch/switch.mjs

@@ -0,0 +1,50 @@
+import { tv } from "../../lib/tv.mjs";
+import { jsx } from "react/jsx-runtime";
+import { Switch } from "@base-ui/react/switch";
+//#region src/components/switch/switch.tsx
+const switchRecipe = tv({ slots: {
+	root: [
+		"relative inline-flex shrink-0 touch-manipulation items-center outline-none",
+		"transition-[background-color,box-shadow,transform] ease-out",
+		"motion-reduce:transition-none",
+		"not-data-disabled:cursor-pointer",
+		"data-disabled:cursor-not-allowed",
+		"after:absolute after:-inset-x-3 after:-inset-y-2 after:content-['']",
+		"focus-visible:ring-line-strong focus-visible:ring-offset-layer-sidebar",
+		"h-[30px] w-[50px] rounded-full border-[1.5px] border-line-strong bg-fill-muted p-[2.5px]",
+		"duration-150",
+		"data-checked:border-sticker-ink data-checked:bg-selected data-checked:ring-[1.5px] data-checked:ring-sticker-edge",
+		"focus-visible:ring-0 focus-visible:ring-offset-0 focus-visible:shadow-focus",
+		"data-disabled:border-foreground-disabled data-disabled:bg-fill-muted",
+		"data-checked:data-disabled:border-foreground-disabled data-checked:data-disabled:bg-fill-muted"
+	],
+	thumb: [
+		"pointer-events-none block",
+		"transition-transform ease-out",
+		"motion-reduce:transition-none",
+		"size-[22px] rounded-full bg-layer-card shadow-[0_0_0_1.5px_var(--line-strong)] data-[checked]:translate-x-5",
+		"duration-220 ease-slide",
+		"data-checked:bg-sticker-paper data-checked:shadow-[0_0_0_1.5px_var(--sticker-ink)]",
+		"data-disabled:bg-fill-muted data-disabled:shadow-[0_0_0_1.5px_var(--foreground-disabled)]",
+		"data-checked:data-disabled:bg-fill-muted data-checked:data-disabled:shadow-[0_0_0_1.5px_var(--foreground-disabled)]"
+	]
+} });
+function Switch$1({ className, children, ...props }) {
+	const { root } = switchRecipe();
+	return /* @__PURE__ */ jsx(Switch.Root, {
+		"data-slot": "switch",
+		className: root({ className }),
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(SwitchThumb, {})
+	});
+}
+function SwitchThumb({ className, ...props }) {
+	const { thumb } = switchRecipe();
+	return /* @__PURE__ */ jsx(Switch.Thumb, {
+		"data-slot": "switch-thumb",
+		className: thumb({ className }),
+		...props
+	});
+}
+//#endregion
+export { Switch$1 as Switch, SwitchThumb };

package/dist/components/system-message/index.d.mts

@@ -0,0 +1,2 @@
+import { SystemMessage, SystemMessageContent, SystemMessageContentProps, SystemMessageGroup, SystemMessageGroupChevron, SystemMessageGroupChevronProps, SystemMessageGroupDisclosure, SystemMessageGroupDisclosureProps, SystemMessageGroupHeader, SystemMessageGroupHeaderProps, SystemMessageGroupPanel, SystemMessageGroupPanelProps, SystemMessageGroupProps, SystemMessageGroupSummary, SystemMessageGroupSummaryProps, SystemMessageProps, SystemMessageTime, SystemMessageTimeProps } from "./system-message.mjs";
+export { SystemMessage, SystemMessageContent, type SystemMessageContentProps, SystemMessageGroup, SystemMessageGroupChevron, type SystemMessageGroupChevronProps, SystemMessageGroupDisclosure, type SystemMessageGroupDisclosureProps, SystemMessageGroupHeader, type SystemMessageGroupHeaderProps, SystemMessageGroupPanel, type SystemMessageGroupPanelProps, type SystemMessageGroupProps, SystemMessageGroupSummary, type SystemMessageGroupSummaryProps, type SystemMessageProps, SystemMessageTime, type SystemMessageTimeProps };

package/dist/components/system-message/system-message.d.mts

@@ -0,0 +1,27 @@
+import { ComponentProps } from "react";
+import { useRender } from "@base-ui/react/use-render";
+import { Collapsible } from "@base-ui/react/collapsible";
+//#region src/components/system-message/system-message.d.ts
+export type SystemMessageProps = useRender.ComponentProps<"div">;
+export declare function SystemMessage({ className, render, ...props }: SystemMessageProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type SystemMessageTimeProps = useRender.ComponentProps<"span">;
+export declare function SystemMessageTime({ className, render, ...props }: SystemMessageTimeProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type SystemMessageContentProps = useRender.ComponentProps<"span">;
+export declare function SystemMessageContent({ children, className, render, title, ...props }: SystemMessageContentProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type SystemMessageGroupProps = Omit<ComponentProps<typeof Collapsible.Root>, "className"> & {
+  className?: string;
+};
+export declare function SystemMessageGroup({ className, render, ...props }: SystemMessageGroupProps): import("react").JSX.Element;
+export type SystemMessageGroupHeaderProps = useRender.ComponentProps<"div">;
+export declare function SystemMessageGroupHeader({ className, render, ...props }: SystemMessageGroupHeaderProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type SystemMessageGroupDisclosureProps = useRender.ComponentProps<"button">;
+export declare function SystemMessageGroupDisclosure({ className, render, ...props }: SystemMessageGroupDisclosureProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type SystemMessageGroupSummaryProps = useRender.ComponentProps<"span">;
+export declare function SystemMessageGroupSummary({ className, render, ...props }: SystemMessageGroupSummaryProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type SystemMessageGroupChevronProps = useRender.ComponentProps<"svg">;
+export declare function SystemMessageGroupChevron({ className, render, ...props }: SystemMessageGroupChevronProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type SystemMessageGroupPanelProps = Omit<ComponentProps<typeof Collapsible.Panel>, "className"> & {
+  className?: string;
+};
+export declare function SystemMessageGroupPanel({ className, render, ...props }: SystemMessageGroupPanelProps): import("react").JSX.Element;
+//#endregion