@dungle-scrubs/admin-ui-soft 0.0.0-stage → 0.1.0

package/dist/motion/star-rating/star-rating.js

@@ -0,0 +1,191 @@
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "cn";
+import { StarIcon } from "lucide-react";
+import { useControllableValue } from "ahooks";
+import { AnimatePresence, motion, useAnimate, useReducedMotionConfig } from "motion/react";
+//#region src/motion/star-rating/star-rating.tsx
+const DEFAULT_LABELS = [
+	"Poor",
+	"Fair",
+	"Good",
+	"Great",
+	"Excellent"
+];
+/**
+* A star rating whose hover (or arrow-key focus) previews the rating: stars
+* up to the pointer lift and a label follows above. Click, Enter or Space
+* commits it with a small pop. A radio group: Tab enters at the committed
+* star, arrows move the preview, Enter or Space commits.
+*
+* Behavior reference: reactbits peek-rating.
+*/
+function StarRating({ value: _value, defaultValue: _defaultValue, onValueChange: _onValueChange, max = 5, labels = DEFAULT_LABELS, label = "Rating", clearable = false, readOnly = false, disabled = false, size = "default", className, ...props }) {
+	const reduced = useReducedMotionConfig() ?? false;
+	const controllable = {};
+	if (_value !== void 0) controllable.value = _value;
+	if (_defaultValue !== void 0) controllable.defaultValue = _defaultValue;
+	if (_onValueChange) controllable.onValueChange = _onValueChange;
+	const [value, setValue] = useControllableValue(controllable, {
+		trigger: "onValueChange",
+		defaultValue: null
+	});
+	const [preview, setPreview] = React.useState(null);
+	const [announcement, setAnnouncement] = React.useState("");
+	const [scope, animate] = useAnimate();
+	const buttons = React.useRef([]);
+	const shown = preview ?? value ?? 0;
+	const tabStop = value ?? 1;
+	const wordFor = (star) => labels[star - 1] ?? `${star}`;
+	const nameFor = (star) => `${wordFor(star)}, ${star} of ${max} stars`;
+	const commit = (star) => {
+		if (disabled) return;
+		const next = clearable && star === value ? null : star;
+		setValue(next);
+		setAnnouncement(next === null ? "Rating cleared" : `Rated ${nameFor(next)}`);
+		if (next !== null && !reduced && scope.current) animate(`[data-star="${next}"] [data-slot="star-rating-glyph"]`, { scale: [
+			1,
+			1.35,
+			1
+		] }, {
+			duration: .32,
+			ease: "easeOut"
+		});
+	};
+	const focusStar = (star) => {
+		const target = Math.min(max, Math.max(1, star));
+		buttons.current[target - 1]?.focus();
+		setPreview(target);
+	};
+	if (readOnly) return /* @__PURE__ */ jsx("div", {
+		role: "img",
+		"aria-label": value ? `${label}: ${nameFor(value)}` : `${label}: not rated`,
+		"data-slot": "star-rating",
+		"data-readonly": "",
+		className: cn("inline-flex items-center", className),
+		...props,
+		children: Array.from({ length: max }, (_, index) => index + 1).map((star) => /* @__PURE__ */ jsx("span", {
+			className: "inline-flex p-2",
+			children: /* @__PURE__ */ jsx(StarIcon, {
+				"aria-hidden": "true",
+				strokeWidth: 1.5,
+				className: cn(size === "sm" ? "size-4" : "size-5", star <= (value ?? 0) ? "fill-primary text-primary" : "fill-muted-foreground/50 text-muted-foreground/0")
+			})
+		}, star))
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		ref: scope,
+		role: "radiogroup",
+		"aria-label": label,
+		"aria-disabled": disabled || void 0,
+		"data-slot": "star-rating",
+		"data-motion": reduced ? "reduced" : "full",
+		className: cn("relative inline-flex items-center pt-6", className),
+		onPointerLeave: () => setPreview(null),
+		onBlur: (event) => {
+			if (!event.currentTarget.contains(event.relatedTarget)) setPreview(null);
+		},
+		...props,
+		children: [
+			/* @__PURE__ */ jsx(AnimatePresence, { children: preview !== null ? /* @__PURE__ */ jsx(motion.span, {
+				"aria-hidden": "true",
+				"data-slot": "star-rating-peek",
+				className: "pointer-events-none absolute top-0 -translate-x-1/2 rounded-md bg-primary px-1.5 py-0.5 text-[0.6875rem]/none font-medium whitespace-nowrap text-primary-foreground shadow-sm",
+				initial: {
+					opacity: 0,
+					y: reduced ? 0 : 4,
+					left: `${(preview - .5) / max * 100}%`
+				},
+				animate: {
+					opacity: 1,
+					y: 0,
+					left: `${(preview - .5) / max * 100}%`
+				},
+				exit: {
+					opacity: 0,
+					y: reduced ? 0 : 4
+				},
+				transition: reduced ? { duration: 0 } : {
+					type: "spring",
+					stiffness: 520,
+					damping: 34,
+					opacity: { duration: .12 }
+				},
+				children: wordFor(preview)
+			}, "peek") : null }),
+			Array.from({ length: max }, (_, index) => {
+				const star = index + 1;
+				const active = star <= shown;
+				const lifted = preview !== null && star <= preview && !reduced;
+				return /* @__PURE__ */ jsx("button", {
+					ref: (node) => {
+						buttons.current[index] = node;
+					},
+					type: "button",
+					role: "radio",
+					"aria-checked": value === star,
+					"aria-label": nameFor(star),
+					tabIndex: star === tabStop ? 0 : -1,
+					disabled,
+					"data-star": star,
+					"data-active": active || void 0,
+					"data-slot": "star-rating-star",
+					className: cn("group/star inline-flex items-center justify-center p-1 outline-none disabled:opacity-50"),
+					onPointerEnter: () => {
+						if (!disabled) setPreview(star);
+					},
+					onFocus: (event) => {
+						if (event.currentTarget.matches(":focus-visible")) setPreview(star);
+					},
+					onClick: () => commit(star),
+					onKeyDown: (event) => {
+						const next = {
+							ArrowRight: star + 1,
+							ArrowUp: star + 1,
+							ArrowLeft: star - 1,
+							ArrowDown: star - 1,
+							Home: 1,
+							End: max
+						}[event.key];
+						if (next === void 0) return;
+						event.preventDefault();
+						focusStar(next);
+					},
+					children: /* @__PURE__ */ jsx("span", {
+						className: "inline-flex rounded-full p-1 group-focus-visible/star:ring-2 group-focus-visible/star:ring-ring/50",
+						children: /* @__PURE__ */ jsx(motion.span, {
+							className: "inline-flex",
+							initial: false,
+							animate: {
+								y: lifted ? -2 : 0,
+								scale: lifted && star === preview ? 1.12 : 1
+							},
+							transition: reduced ? { duration: 0 } : {
+								type: "spring",
+								stiffness: 600,
+								damping: 28,
+								delay: index * .015
+							},
+							children: /* @__PURE__ */ jsx("span", {
+								"data-slot": "star-rating-glyph",
+								className: "inline-flex",
+								children: /* @__PURE__ */ jsx(StarIcon, {
+									"aria-hidden": "true",
+									strokeWidth: 1.5,
+									className: cn("transition-colors duration-150", size === "sm" ? "size-4" : "size-5", active ? "fill-primary text-primary" : "fill-muted-foreground/50 text-muted-foreground/0")
+								})
+							})
+						})
+					})
+				}, star);
+			}),
+			/* @__PURE__ */ jsx("span", {
+				role: "status",
+				className: "sr-only",
+				children: announcement
+			})
+		]
+	});
+}
+//#endregion
+export { StarRating };

package/dist/motion/status-glyph/status-glyph.d.ts

@@ -0,0 +1,28 @@
+import * as React from "react";
+//#region src/motion/status-glyph/status-glyph.d.ts
+export type StatusGlyphStatus = "pending" | "running" | "done" | "failed" | "cancelled";
+export interface StatusGlyphProps extends Omit<React.ComponentProps<"span">, "children"> {
+  status: StatusGlyphStatus;
+  /** 0 to 1. While running, draws a determinate ring instead of the spinner. */
+  progress?: number;
+  /** Visible text beside the glyph, for example the step or tool name. */
+  label?: React.ReactNode;
+  /** Glyph size in px. */
+  size?: number;
+  /** Strike the label through when cancelled. */
+  strike?: boolean;
+  /**
+   * Announce status changes politely to screen readers. Off by default:
+   * turn it on for a single prominent status, not for every row of a list.
+   */
+  announce?: boolean;
+}
+/**
+ * A status mark for agents, steps and tool calls: pending, running (a
+ * determinate ring or an indeterminate spinner), done, failed or cancelled,
+ * with an optional label. Not interactive.
+ *
+ * Behavior reference: reactbits status-mark.
+ */
+export declare function StatusGlyph({ status, progress, label, size, strike, announce, className, ...props }: StatusGlyphProps): React.JSX.Element;
+//#endregion

package/dist/motion/status-glyph/status-glyph.js

@@ -0,0 +1,171 @@
+import { useLoop } from "../../lib/motion-loop.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "cn";
+import { motion, useReducedMotionConfig } from "motion/react";
+//#region src/motion/status-glyph/status-glyph.tsx
+const STATUS_NAMES = {
+	pending: "Pending",
+	running: "Running",
+	done: "Done",
+	failed: "Failed",
+	cancelled: "Cancelled"
+};
+const STATUS_COLOR = {
+	pending: "text-muted-foreground",
+	running: "text-foreground",
+	done: "text-chart-2",
+	failed: "text-destructive",
+	cancelled: "text-muted-foreground"
+};
+const R = 9;
+const CIRCUMFERENCE = 2 * Math.PI * R;
+function clamp01(value) {
+	return Math.min(1, Math.max(0, value));
+}
+/**
+* A status mark for agents, steps and tool calls: pending, running (a
+* determinate ring or an indeterminate spinner), done, failed or cancelled,
+* with an optional label. Not interactive.
+*
+* Behavior reference: reactbits status-mark.
+*/
+function StatusGlyph({ status, progress, label, size = 16, strike = true, announce = false, className, ...props }) {
+	const reduced = useReducedMotionConfig() ?? false;
+	const determinate = status === "running" && progress !== void 0;
+	const pct = determinate ? Math.round(clamp01(progress) * 100) : null;
+	const spoken = pct === null ? STATUS_NAMES[status] : `${STATUS_NAMES[status]}, ${pct}%`;
+	const hasLabel = label !== void 0 && label !== null && label !== false;
+	const spin = useLoop([0, 360], {
+		duration: .9,
+		ease: "linear"
+	}, status === "running" && !determinate && !reduced, 0);
+	const draw = reduced ? { duration: 0 } : {
+		duration: .32,
+		ease: "easeOut"
+	};
+	const glyph = /* @__PURE__ */ jsxs("svg", {
+		viewBox: "0 0 24 24",
+		width: size,
+		height: size,
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: 2,
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"data-slot": "status-glyph-mark",
+		className: cn("shrink-0 overflow-visible", STATUS_COLOR[status]),
+		"aria-hidden": hasLabel || void 0,
+		role: hasLabel ? void 0 : "img",
+		"aria-label": hasLabel ? void 0 : spoken,
+		children: [
+			status === "pending" ? /* @__PURE__ */ jsx("circle", {
+				cx: 12,
+				cy: 12,
+				r: R,
+				strokeDasharray: "2.4 3.25",
+				opacity: .9
+			}) : null,
+			status === "running" && determinate ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("circle", {
+				cx: 12,
+				cy: 12,
+				r: R,
+				opacity: .2
+			}), /* @__PURE__ */ jsx(motion.circle, {
+				cx: 12,
+				cy: 12,
+				r: R,
+				transform: "rotate(-90 12 12)",
+				strokeDasharray: CIRCUMFERENCE,
+				initial: false,
+				animate: { strokeDashoffset: CIRCUMFERENCE * (1 - clamp01(progress ?? 0)) },
+				transition: reduced ? { duration: 0 } : {
+					type: "spring",
+					stiffness: 120,
+					damping: 20
+				}
+			})] }) : null,
+			status === "running" && !determinate ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("circle", {
+				cx: 12,
+				cy: 12,
+				r: R,
+				opacity: .2
+			}), reduced ? /* @__PURE__ */ jsx("circle", {
+				"data-slot": "status-glyph-spinner",
+				cx: 12,
+				cy: 12,
+				r: R,
+				transform: "rotate(-90 12 12)",
+				strokeDasharray: `${CIRCUMFERENCE * .3} ${CIRCUMFERENCE}`
+			}) : /* @__PURE__ */ jsx(motion.circle, {
+				"data-slot": "status-glyph-spinner",
+				cx: 12,
+				cy: 12,
+				r: R,
+				strokeDasharray: `${CIRCUMFERENCE * .3} ${CIRCUMFERENCE}`,
+				style: { rotate: spin }
+			})] }) : null,
+			status === "done" ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("circle", {
+				cx: 12,
+				cy: 12,
+				r: R
+			}), /* @__PURE__ */ jsx(motion.path, {
+				d: "M8 12.5l2.75 2.75L16 9.75",
+				initial: { pathLength: reduced ? 1 : 0 },
+				animate: { pathLength: 1 },
+				transition: draw
+			})] }) : null,
+			status === "failed" ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("circle", {
+				cx: 12,
+				cy: 12,
+				r: R
+			}), /* @__PURE__ */ jsx(motion.path, {
+				d: "M9.25 9.25l5.5 5.5M14.75 9.25l-5.5 5.5",
+				initial: { pathLength: reduced ? 1 : 0 },
+				animate: { pathLength: 1 },
+				transition: draw
+			})] }) : null,
+			status === "cancelled" ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("circle", {
+				cx: 12,
+				cy: 12,
+				r: R
+			}), /* @__PURE__ */ jsx(motion.path, {
+				d: "M8.5 12h7",
+				initial: { pathLength: reduced ? 1 : 0 },
+				animate: { pathLength: 1 },
+				transition: draw
+			})] }) : null
+		]
+	});
+	return /* @__PURE__ */ jsxs("span", {
+		"data-slot": "status-glyph",
+		"data-status": status,
+		"data-motion": reduced ? "reduced" : "full",
+		className: cn("inline-flex items-center gap-1.5 align-middle text-xs/relaxed", className),
+		...announce ? {
+			role: "status",
+			"aria-live": "polite"
+		} : {},
+		...props,
+		children: [glyph, hasLabel ? /* @__PURE__ */ jsxs("span", {
+			"data-slot": "status-glyph-label",
+			className: cn("relative min-w-0 truncate transition-colors", status === "cancelled" && "text-muted-foreground"),
+			children: [
+				/* @__PURE__ */ jsx("span", {
+					className: "sr-only",
+					children: `${spoken}: `
+				}),
+				label,
+				status === "cancelled" && strike ? /* @__PURE__ */ jsx(motion.span, {
+					"aria-hidden": "true",
+					"data-slot": "status-glyph-strike",
+					className: "pointer-events-none absolute inset-x-0 top-1/2 h-px origin-left bg-current",
+					initial: { scaleX: reduced ? 1 : 0 },
+					animate: { scaleX: 1 },
+					transition: draw
+				}) : null
+			]
+		}) : null]
+	});
+}
+//#endregion
+export { StatusGlyph };

package/dist/motion/stepper/stepper.d.ts

@@ -0,0 +1,56 @@
+import * as React from "react";
+//#region src/motion/stepper/stepper.d.ts
+export interface StepperStep {
+  id: string;
+  /** The step's heading. Focus moves to it when the step opens. */
+  title: string;
+  description?: React.ReactNode;
+  content: React.ReactNode;
+}
+export interface StepperProps {
+  steps: readonly StepperStep[];
+  /** Index of the open step (controlled). */
+  step?: number;
+  /** Index of the step that starts open (uncontrolled). Default 0. */
+  defaultStep?: number;
+  onStepChange?: (step: number) => void;
+  /** Whether the wizard is finished (controlled). */
+  completed?: boolean;
+  /** Whether the wizard starts finished (uncontrolled). */
+  defaultCompleted?: boolean;
+  /** The last step's Complete button was pressed. */
+  onComplete?: () => void;
+  /** Whether the open step may move on, for example once its fields are valid. Default true. */
+  canContinue?: boolean;
+  /** Let the indicators of reached steps jump to them. Default true. */
+  clickableSteps?: boolean;
+  /**
+   * Show the Back, Continue and Complete buttons. Default true. Turn it off
+   * (with `clickableSteps` off) for a read-only progress display, such as an
+   * agent's plan, where the app drives `step` and `completed`.
+   */
+  navigation?: boolean;
+  /** Shown in place of the steps once complete. */
+  completion?: React.ReactNode;
+  /** Heading of the completion panel. Default "All done". */
+  completionTitle?: string;
+  backLabel?: string;
+  continueLabel?: string;
+  completeLabel?: string;
+  /** Accessible name of the step list. Default "Progress". */
+  label?: string;
+  className?: string;
+}
+/**
+ * A multi-step wizard. Step indicators joined by connectors show progress;
+ * the content slides between steps with Back and Continue, and the last step
+ * completes the wizard.
+ *
+ * Indicators of reached steps are real buttons that jump to their step; the
+ * open step's indicator carries `aria-current="step"`. Each move puts focus
+ * on the new step's heading, so screen readers announce where they are.
+ *
+ * Behavior reference: reactbits stepper.
+ */
+export declare function Stepper(props: StepperProps): React.JSX.Element;
+//#endregion

package/dist/motion/stepper/stepper.js

@@ -0,0 +1,211 @@
+import { Button } from "../../components/ui/button.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "cn";
+import { CheckIcon } from "lucide-react";
+import { useControllableValue, useSize } from "ahooks";
+import { AnimatePresence, motion, useReducedMotionConfig } from "motion/react";
+//#region src/motion/stepper/stepper.tsx
+const SLIDE = {
+	type: "spring",
+	stiffness: 380,
+	damping: 36
+};
+const HEIGHT = {
+	type: "spring",
+	stiffness: 420,
+	damping: 42
+};
+const FILL = {
+	duration: .4,
+	ease: [
+		.22,
+		1,
+		.36,
+		1
+	]
+};
+/**
+* A multi-step wizard. Step indicators joined by connectors show progress;
+* the content slides between steps with Back and Continue, and the last step
+* completes the wizard.
+*
+* Indicators of reached steps are real buttons that jump to their step; the
+* open step's indicator carries `aria-current="step"`. Each move puts focus
+* on the new step's heading, so screen readers announce where they are.
+*
+* Behavior reference: reactbits stepper.
+*/
+function Stepper(props) {
+	const { steps, onComplete, canContinue = true, clickableSteps = true, navigation = true, completion, completionTitle = "All done", backLabel = "Back", continueLabel = "Continue", completeLabel = "Complete", label = "Progress", className } = props;
+	const [step, setStep] = useControllableValue(props, {
+		defaultValue: 0,
+		valuePropName: "step",
+		defaultValuePropName: "defaultStep",
+		trigger: "onStepChange"
+	});
+	const [completedState, setCompleted] = React.useState(props.defaultCompleted ?? false);
+	const completed = props.completed ?? completedState;
+	const reduced = useReducedMotionConfig() ?? false;
+	const baseId = React.useId();
+	const last = steps.length - 1;
+	const current = Math.min(Math.max(step, 0), Math.max(last, 0));
+	const [reached, setReached] = React.useState(current);
+	const [direction, setDirection] = React.useState(1);
+	const bodyRef = React.useRef(null);
+	const size = useSize(bodyRef);
+	const movedRef = React.useRef(false);
+	if (current > reached) setReached(current);
+	const headingId = (key) => `${baseId}-heading-${key}`;
+	const panelKey = completed ? "complete" : steps[current]?.id ?? "empty";
+	React.useEffect(() => {
+		if (!movedRef.current) return;
+		document.getElementById(`${baseId}-heading-${panelKey}`)?.focus({ preventScroll: true });
+	}, [baseId, panelKey]);
+	const go = (next) => {
+		if (next === current || next < 0 || next > last) return;
+		movedRef.current = true;
+		setDirection(next > current ? 1 : -1);
+		setStep(next);
+	};
+	const complete = () => {
+		movedRef.current = true;
+		setDirection(1);
+		setCompleted(true);
+		onComplete?.();
+	};
+	const active = completed ? void 0 : steps[current];
+	const offset = reduced ? 0 : 32;
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "stepper",
+		"data-reduced-motion": reduced ? "" : void 0,
+		className: cn("flex w-full flex-col gap-6", className),
+		children: [
+			/* @__PURE__ */ jsx("ol", {
+				"aria-label": label,
+				className: "flex items-center",
+				children: steps.map((item, index) => {
+					const done = completed || index < current;
+					const isCurrent = !completed && index === current;
+					const canJump = clickableSteps && !completed && !isCurrent && index <= reached;
+					const name = `Step ${index + 1}: ${item.title}${done ? ", completed" : ""}`;
+					const indicatorClass = cn("relative flex size-8 shrink-0 items-center justify-center rounded-full text-xs font-medium tabular-nums outline-none", "focus-visible:ring-[3px] focus-visible:ring-ring/50", !reduced && "transition-colors duration-300", done || isCurrent ? "bg-primary text-primary-foreground" : "bg-muted text-muted-foreground", canJump && !done && "hover:bg-muted/70 hover:text-foreground", canJump && done && "hover:bg-primary/85");
+					const glyph = done ? /* @__PURE__ */ jsx(motion.span, {
+						initial: reduced ? false : {
+							scale: .4,
+							opacity: 0
+						},
+						animate: {
+							scale: 1,
+							opacity: 1
+						},
+						transition: reduced ? { duration: 0 } : SLIDE,
+						className: "flex",
+						children: /* @__PURE__ */ jsx(CheckIcon, {
+							"aria-hidden": "true",
+							className: "size-4"
+						})
+					}, "done") : isCurrent ? /* @__PURE__ */ jsx("span", {
+						"aria-hidden": "true",
+						className: "size-2.5 rounded-full bg-primary-foreground"
+					}) : /* @__PURE__ */ jsx("span", {
+						"aria-hidden": "true",
+						children: index + 1
+					});
+					return /* @__PURE__ */ jsxs("li", {
+						className: cn("flex items-center", index < last && "flex-1"),
+						"data-state": done ? "complete" : isCurrent ? "current" : "upcoming",
+						children: [canJump ? /* @__PURE__ */ jsx("button", {
+							type: "button",
+							"aria-label": name,
+							onClick: () => go(index),
+							className: indicatorClass,
+							children: glyph
+						}) : /* @__PURE__ */ jsxs("span", {
+							"aria-current": isCurrent ? "step" : void 0,
+							className: indicatorClass,
+							children: [/* @__PURE__ */ jsx("span", {
+								className: "sr-only",
+								children: name
+							}), glyph]
+						}), index < last ? /* @__PURE__ */ jsx("span", {
+							"aria-hidden": "true",
+							className: "relative mx-2 h-0.5 flex-1 overflow-hidden rounded-full bg-muted",
+							children: /* @__PURE__ */ jsx(motion.span, {
+								"data-slot": "stepper-connector-fill",
+								className: "absolute inset-0 origin-left rounded-full bg-primary",
+								initial: false,
+								animate: { scaleX: completed || index < current ? 1 : 0 },
+								transition: reduced ? { duration: 0 } : FILL
+							})
+						}) : null]
+					}, item.id);
+				})
+			}),
+			/* @__PURE__ */ jsx(motion.div, {
+				initial: false,
+				animate: size ? { height: size.height } : void 0,
+				transition: reduced ? { duration: 0 } : HEIGHT,
+				className: "relative overflow-hidden",
+				children: /* @__PURE__ */ jsx("div", {
+					ref: bodyRef,
+					children: /* @__PURE__ */ jsx(AnimatePresence, {
+						initial: false,
+						mode: "popLayout",
+						custom: direction,
+						children: /* @__PURE__ */ jsxs(motion.section, {
+							custom: direction,
+							"aria-labelledby": headingId(panelKey),
+							"data-slot": "stepper-panel",
+							initial: {
+								opacity: 0,
+								x: direction * offset
+							},
+							animate: {
+								opacity: 1,
+								x: 0
+							},
+							exit: {
+								opacity: 0,
+								x: -direction * offset
+							},
+							transition: reduced ? { duration: .15 } : SLIDE,
+							className: "flex flex-col gap-1.5 px-0.5 pb-0.5",
+							children: [
+								/* @__PURE__ */ jsx("h3", {
+									id: headingId(panelKey),
+									tabIndex: -1,
+									className: "w-fit text-base font-semibold outline-none",
+									children: active ? active.title : completionTitle
+								}),
+								active?.description ? /* @__PURE__ */ jsx("p", {
+									className: "text-sm text-muted-foreground",
+									children: active.description
+								}) : null,
+								/* @__PURE__ */ jsx("div", {
+									className: "pt-2",
+									children: active ? active.content : completion
+								})
+							]
+						}, panelKey)
+					})
+				})
+			}),
+			completed || !navigation ? null : /* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-2",
+				children: [current > 0 ? /* @__PURE__ */ jsx(Button, {
+					variant: "outline",
+					onClick: () => go(current - 1),
+					children: backLabel
+				}) : null, /* @__PURE__ */ jsx(Button, {
+					className: "ml-auto",
+					disabled: !canContinue,
+					onClick: () => current === last ? complete() : go(current + 1),
+					children: current === last ? completeLabel : continueLabel
+				})]
+			})
+		]
+	});
+}
+//#endregion
+export { Stepper };