@passui/react 0.1.46 → 0.2.0

package/dist/date-time-picker.js

@@ -0,0 +1,235 @@
+"use client";
+import { formatDay, parseDay } from "./lib/calendar-month.js";
+import { cx } from "./lib/cx.js";
+import { Wheel } from "./lib/wheel.js";
+import { buttonVariants } from "./button.js";
+import { Calendar } from "./calendar.js";
+import { Popover, PopoverContent, PopoverTrigger } from "./popover.js";
+import { useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/date-time-picker.tsx
+const pad = (n) => String(n).padStart(2, "0");
+function parseTime(value) {
+	const match = /^(\d{2}):(\d{2})$/.exec(value);
+	if (!match) return null;
+	const hour = Number(match[1]);
+	const minute = Number(match[2]);
+	return hour < 24 && minute < 60 ? {
+		hour,
+		minute
+	} : null;
+}
+const today = () => {
+	const now = /* @__PURE__ */ new Date();
+	return formatDay({
+		year: now.getFullYear(),
+		month: now.getMonth() + 1,
+		day: now.getDate()
+	});
+};
+/** Hour, minute and (where the locale uses one) AM/PM wheels, like the iOS time wheels. */
+function TimeWheels({ value, onChange, locale, step, labels }) {
+	const time = parseTime(value) ?? {
+		hour: 9,
+		minute: 0
+	};
+	const twelve = new Intl.DateTimeFormat(locale, { hour: "numeric" }).resolvedOptions().hour12 ?? false;
+	const emit = (hour, minute) => onChange(`${pad(hour)}:${pad(minute)}`);
+	const pm = time.hour >= 12;
+	const hours = useMemo(() => (twelve ? Array.from({ length: 12 }, (_, i) => i + 1) : Array.from({ length: 24 }, (_, i) => i)).map((hour) => ({
+		value: hour,
+		label: pad(hour)
+	})), [twelve]);
+	const minutes = useMemo(() => {
+		const all = Array.from({ length: Math.ceil(60 / step) }, (_, index) => index * step);
+		if (!all.includes(time.minute)) all.push(time.minute);
+		return all.sort((a, b) => a - b).map((minute) => ({
+			value: minute,
+			label: pad(minute)
+		}));
+	}, [step, time.minute]);
+	const periods = useMemo(() => {
+		const name = (hour) => new Intl.DateTimeFormat(locale, {
+			hour: "numeric",
+			hour12: true,
+			timeZone: "UTC"
+		}).formatToParts(new Date(Date.UTC(2e3, 0, 1, hour))).find((part) => part.type === "dayPeriod")?.value ?? "";
+		return [{
+			value: "am",
+			label: name(1)
+		}, {
+			value: "pm",
+			label: name(13)
+		}];
+	}, [locale]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex justify-center gap-1",
+		children: [
+			/* @__PURE__ */ jsx(Wheel, {
+				label: labels.hour,
+				options: hours,
+				value: twelve ? time.hour % 12 || 12 : time.hour,
+				onValueChange: (hour) => emit(twelve ? hour % 12 + (pm ? 12 : 0) : hour, time.minute),
+				className: "w-16"
+			}),
+			/* @__PURE__ */ jsx(Wheel, {
+				label: labels.minute,
+				options: minutes,
+				value: time.minute,
+				onValueChange: (minute) => emit(time.hour, minute),
+				className: "w-16"
+			}),
+			twelve ? /* @__PURE__ */ jsx(Wheel, {
+				label: labels.period,
+				options: periods,
+				value: pm ? "pm" : "am",
+				onValueChange: (next) => emit(time.hour % 12 + (next === "pm" ? 12 : 0), time.minute),
+				className: "w-16"
+			}) : null
+		]
+	});
+}
+/** One chip that opens its own panel, the way the iOS compact date picker does. */
+function Chip({ label, shown, placeholder, disabled, className, children }) {
+	const [open, setOpen] = useState(false);
+	return /* @__PURE__ */ jsxs(Popover, {
+		open,
+		onOpenChange: (details) => setOpen(details.open),
+		children: [/* @__PURE__ */ jsx(PopoverTrigger, {
+			disabled,
+			"aria-label": label,
+			className: cx(buttonVariants({
+				variant: "secondary",
+				className: "justify-between gap-3 font-medium"
+			}), !shown && "text-label-tertiary", className),
+			children: shown || placeholder || label
+		}), /* @__PURE__ */ jsx(PopoverContent, {
+			"aria-label": label,
+			className: "w-auto",
+			children: children(() => setOpen(false))
+		})]
+	});
+}
+/**
+* One picker for dates, times, both together, and ranges, the way Apple's
+* compact DatePicker works: a chip for the date, a chip for the time, each
+* opening its own panel. The date panel is a calendar whose month title opens
+* month and year wheels, so a far date is one flick and not a hundred taps.
+* The time panel is hour, minute and period wheels. Values are plain strings
+* (`YYYY-MM-DD`, `HH:MM`, `YYYY-MM-DDTHH:MM`) or a `{ from, to }` range, so
+* they go straight to a form or an API.
+*/
+function DateTimePicker(props) {
+	const { label, locale, placeholder, min, max, labels, disabled, className } = props;
+	const dayFormat = new Intl.DateTimeFormat(locale, {
+		dateStyle: "medium",
+		timeZone: "UTC"
+	});
+	const timeFormat = new Intl.DateTimeFormat(locale, {
+		timeStyle: "short",
+		timeZone: "UTC"
+	});
+	const showDay = (value) => {
+		const day = parseDay(value.slice(0, 10));
+		return day ? dayFormat.format(new Date(Date.UTC(day.year, day.month - 1, day.day))) : "";
+	};
+	const showTime = (value) => {
+		const time = parseTime(value);
+		return time ? timeFormat.format(new Date(Date.UTC(2e3, 0, 1, time.hour, time.minute))) : "";
+	};
+	const step = props.minuteStep ?? 5;
+	if (props.mode === "range") {
+		const { from, to } = props.value;
+		return /* @__PURE__ */ jsx(Chip, {
+			label,
+			shown: from ? `${showDay(from)}${to ? ` – ${showDay(to)}` : " –"}` : "",
+			placeholder,
+			disabled,
+			className,
+			children: (close) => /* @__PURE__ */ jsx(Calendar, {
+				mode: "range",
+				label,
+				locale,
+				min,
+				max,
+				labels,
+				value: props.value,
+				onValueChange: (next) => {
+					props.onValueChange(next);
+					if (next.to) close();
+				}
+			})
+		});
+	}
+	if (props.mode === "time") return /* @__PURE__ */ jsx(Chip, {
+		label,
+		shown: showTime(props.value),
+		placeholder,
+		disabled,
+		className,
+		children: () => /* @__PURE__ */ jsx(TimeWheels, {
+			value: props.value,
+			onChange: props.onValueChange,
+			locale,
+			step,
+			labels
+		})
+	});
+	if (props.mode === "datetime") {
+		const [date = "", time = ""] = props.value.split("T");
+		return /* @__PURE__ */ jsxs("div", {
+			"data-slot": "date-time-picker",
+			className: cx("inline-flex flex-wrap gap-1.5", className),
+			children: [/* @__PURE__ */ jsx(Chip, {
+				label,
+				shown: showDay(date),
+				placeholder,
+				disabled,
+				children: (close) => /* @__PURE__ */ jsx(Calendar, {
+					label,
+					locale,
+					min,
+					max,
+					labels,
+					value: date,
+					onValueChange: (next) => {
+						props.onValueChange(`${next}T${time || "09:00"}`);
+						close();
+					}
+				})
+			}), /* @__PURE__ */ jsx(Chip, {
+				label: labels.hour,
+				shown: showTime(time),
+				placeholder: showTime("09:00"),
+				disabled,
+				children: () => /* @__PURE__ */ jsx(TimeWheels, {
+					value: time,
+					onChange: (next) => props.onValueChange(`${date || today()}T${next}`),
+					locale,
+					step,
+					labels
+				})
+			})]
+		});
+	}
+	return /* @__PURE__ */ jsx(Chip, {
+		label,
+		shown: showDay(props.value),
+		placeholder,
+		disabled,
+		className,
+		children: (close) => /* @__PURE__ */ jsx(Calendar, {
+			label,
+			locale,
+			min,
+			max,
+			labels,
+			value: props.value,
+			onValueChange: (next) => {
+				props.onValueChange(next);
+				close();
+			}
+		})
+	});
+}
+export { DateTimePicker };

package/dist/date.d.ts

@@ -0,0 +1,50 @@
+declare const PRESETS: {
+  /** Aug 30, 2026 */
+  PP: {
+    dateStyle: "medium";
+  };
+  /** August 30, 2026 */
+  PPP: {
+    dateStyle: "long";
+  };
+  /** Aug 30, 2026, 2:15 PM */
+  PPp: {
+    dateStyle: "medium";
+    timeStyle: "short";
+  };
+  /** August 30, 2026 at 2:15 PM */
+  PPPp: {
+    dateStyle: "long";
+    timeStyle: "short";
+  };
+  /** Aug 30 */
+  "MMM d": {
+    month: "short";
+    day: "numeric";
+  };
+  /** Aug 30, 14:15 */
+  "MMM d, HH:mm": {
+    month: "short";
+    day: "numeric";
+    hour: "2-digit";
+    minute: "2-digit";
+    hourCycle: "h23";
+  };
+  /** Aug 30, 14:15:09 */
+  "MMM d, HH:mm:ss": {
+    month: "short";
+    day: "numeric";
+    hour: "2-digit";
+    minute: "2-digit";
+    second: "2-digit";
+    hourCycle: "h23";
+  };
+};
+export type DatePreset = keyof typeof PRESETS;
+/** A stored UTC timestamp shown as its UTC wall-clock time, whatever the viewer's timezone. */
+export declare function formatUtc(date: Date | string | number, preset: DatePreset): string;
+/** The viewer's local time of day, like 2:15 PM. */
+export declare function formatTime(date: Date | string | number): string;
+/** "5 minutes ago", "in 30 days": the largest whole unit that fits. */
+export declare function fromNow(date: Date | string | number): string;
+export {};

package/dist/date.js

@@ -0,0 +1,77 @@
+// src/lib/date.ts
+const LOCALE = "en-US";
+const PRESETS = {
+	/** Aug 30, 2026 */
+	PP: { dateStyle: "medium" },
+	/** August 30, 2026 */
+	PPP: { dateStyle: "long" },
+	/** Aug 30, 2026, 2:15 PM */
+	PPp: {
+		dateStyle: "medium",
+		timeStyle: "short"
+	},
+	/** August 30, 2026 at 2:15 PM */
+	PPPp: {
+		dateStyle: "long",
+		timeStyle: "short"
+	},
+	/** Aug 30 */
+	"MMM d": {
+		month: "short",
+		day: "numeric"
+	},
+	/** Aug 30, 14:15 */
+	"MMM d, HH:mm": {
+		month: "short",
+		day: "numeric",
+		hour: "2-digit",
+		minute: "2-digit",
+		hourCycle: "h23"
+	},
+	/** Aug 30, 14:15:09 */
+	"MMM d, HH:mm:ss": {
+		month: "short",
+		day: "numeric",
+		hour: "2-digit",
+		minute: "2-digit",
+		second: "2-digit",
+		hourCycle: "h23"
+	}
+};
+const formatters = /* @__PURE__ */ new Map();
+function formatter(key, options) {
+	let cached = formatters.get(key);
+	if (!cached) {
+		cached = new Intl.DateTimeFormat(LOCALE, options);
+		formatters.set(key, cached);
+	}
+	return cached;
+}
+/** A stored UTC timestamp shown as its UTC wall-clock time, whatever the viewer's timezone. */
+function formatUtc(date, preset) {
+	return formatter(`utc:${preset}`, {
+		...PRESETS[preset],
+		timeZone: "UTC"
+	}).format(new Date(date));
+}
+/** The viewer's local time of day, like 2:15 PM. */
+function formatTime(date) {
+	return formatter("local:time", { timeStyle: "short" }).format(new Date(date));
+}
+const UNITS = [
+	["year", 31536e3],
+	["month", 2592e3],
+	["week", 604800],
+	["day", 86400],
+	["hour", 3600],
+	["minute", 60]
+];
+let relative;
+/** "5 minutes ago", "in 30 days": the largest whole unit that fits. */
+function fromNow(date) {
+	relative ??= new Intl.RelativeTimeFormat(LOCALE, { numeric: "auto" });
+	const seconds = (new Date(date).getTime() - Date.now()) / 1e3;
+	for (const [unit, size] of UNITS) if (Math.abs(seconds) >= size) return relative.format(Math.round(seconds / size), unit);
+	return relative.format(0, "second");
+}
+export { formatTime, formatUtc, fromNow };

package/dist/dialog.d.ts

@@ -0,0 +1,21 @@
+import { RenderProp } from "./lib/render.js";
+import { ComponentProps, ReactNode } from "react";
+import * as dialog from "@zag-js/dialog";
+export interface DialogProps extends Omit<dialog.Props, "id" | "ids" | "role"> {
+  children?: ReactNode;
+}
+/** Owns the open state. Renders no element, so parts can sit anywhere inside it. */
+export declare function Dialog({ children, ...props }: DialogProps): import("react").JSX.Element;
+type PartProps<T extends "button" | "div" | "h2" | "p"> = ComponentProps<T> & {
+  /** Render your own element instead of the default one. */
+  render?: RenderProp;
+};
+export declare function DialogTrigger({ render, ...props }: PartProps<"button">): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export declare function DialogClose({ render, ...props }: PartProps<"button">): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+/** The backdrop, centred panel and focus trap. Mounts only while open or leaving. */
+export declare function DialogContent({ className, render, ...props }: PartProps<"div">): import("react").JSX.Element | null;
+export declare function DialogHeader({ className, ...props }: ComponentProps<"div">): import("react").JSX.Element;
+export declare function DialogFooter({ className, ...props }: ComponentProps<"div">): import("react").JSX.Element;
+export declare function DialogTitle({ className, ...props }: ComponentProps<"h2">): import("react").JSX.Element;
+export declare function DialogDescription({ className, ...props }: ComponentProps<"p">): import("react").JSX.Element;
+export {};

package/dist/dialog.js

@@ -0,0 +1,113 @@
+"use client";
+import { cx } from "./lib/cx.js";
+import { Portal } from "./lib/portal.js";
+import { usePresence } from "./lib/presence.js";
+import { mergeProps, renderPart } from "./lib/render.js";
+import { useVisualViewportVars } from "./lib/visual-viewport.js";
+import { useWaterDrop } from "./lib/water-drop.js";
+import { normalizeProps, useMachine } from "@zag-js/react";
+import { createContext, useContext, useId, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as dialog from "@zag-js/dialog";
+// src/components/dialog.tsx
+const Context = createContext(null);
+function useDialog() {
+	const api = useContext(Context);
+	if (!api) throw new Error("Dialog parts must be used inside <Dialog>.");
+	return api;
+}
+/** Owns the open state. Renders no element, so parts can sit anywhere inside it. */
+function Dialog({ children, ...props }) {
+	const id = useId();
+	const service = useMachine(dialog.machine, {
+		id,
+		...props
+	});
+	const api = dialog.connect(service, normalizeProps);
+	return /* @__PURE__ */ jsx(Context.Provider, {
+		value: api,
+		children
+	});
+}
+function DialogTrigger({ render, ...props }) {
+	const api = useDialog();
+	return renderPart("button", mergeProps({
+		...api.getTriggerProps(),
+		"data-slot": "dialog-trigger"
+	}, props), render);
+}
+function DialogClose({ render, ...props }) {
+	const { id: _id, ...closeProps } = useDialog().getCloseTriggerProps();
+	return renderPart("button", mergeProps({
+		...closeProps,
+		"data-slot": "dialog-close"
+	}, props), render);
+}
+/** The backdrop, centred panel and focus trap. Mounts only while open or leaving. */
+function DialogContent({ className, render, ...props }) {
+	const api = useDialog();
+	const drop = useWaterDrop({
+		sourceId: api.getTriggerProps().id,
+		material: "glass-menu squircle [--squircle-radius:1.75rem]"
+	});
+	const { ref, mounted, attrs } = usePresence(api.open, drop);
+	const positioner = useRef(null);
+	useVisualViewportVars(positioner, mounted);
+	if (!mounted) return null;
+	const state = {
+		...attrs,
+		"data-open": api.open ? "" : void 0
+	};
+	return /* @__PURE__ */ jsxs(Portal, { children: [/* @__PURE__ */ jsx("div", {
+		...api.getBackdropProps(),
+		...state,
+		hidden: false,
+		"data-slot": "dialog-overlay",
+		className: "ease-standard fixed inset-0 z-[60] bg-black/30 backdrop-blur-sm transition-opacity duration-(--duration-normal) data-ending-style:opacity-0 data-starting-style:opacity-0 motion-reduce:transition-none"
+	}), /* @__PURE__ */ jsx("div", {
+		...api.getPositionerProps(),
+		ref: positioner,
+		className: "fixed inset-x-0 top-(--visual-viewport-top,0px) z-[60] flex h-(--visual-viewport-height,100dvh) items-center justify-center p-4",
+		children: renderPart("div", mergeProps({
+			...api.getContentProps(),
+			...state,
+			ref,
+			hidden: false,
+			"data-slot": "dialog-content",
+			className: cx("relative grid max-h-full w-full max-w-lg gap-4 overflow-y-auto glass-menu squircle morph-reset [--squircle-radius:1.75rem] p-6 text-label outline-none transition spring-smooth data-ending-style:scale-[0.88] data-starting-style:scale-[0.88] data-ending-style:opacity-0 data-starting-style:opacity-0 motion-reduce:transition-none motion-reduce:data-ending-style:scale-100 motion-reduce:data-starting-style:scale-100", className)
+		}, props), render)
+	})] });
+}
+function DialogHeader({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "dialog-header",
+		className: cx("flex flex-col gap-1.5", className),
+		...props
+	});
+}
+function DialogFooter({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "dialog-footer",
+		className: cx("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className),
+		...props
+	});
+}
+function DialogTitle({ className, ...props }) {
+	const api = useDialog();
+	return /* @__PURE__ */ jsx("h2", {
+		...api.getTitleProps(),
+		"data-slot": "dialog-title",
+		className: cx("text-headline font-semibold text-label", className),
+		...props
+	});
+}
+function DialogDescription({ className, ...props }) {
+	const api = useDialog();
+	return /* @__PURE__ */ jsx("p", {
+		...api.getDescriptionProps(),
+		"data-slot": "dialog-description",
+		className: cx("text-footnote text-label-secondary", className),
+		...props
+	});
+}
+export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger };

package/dist/drawer.d.ts

@@ -0,0 +1,30 @@
+import { RenderProp } from "./lib/render.js";
+import { ComponentProps, ReactNode } from "react";
+import * as drawer from "@zag-js/drawer";
+export interface DrawerProps extends Omit<drawer.Props, "id" | "ids" | "role" | "stack" | "swipeDirection" | "snapPoint" | "defaultSnapPoint"> {
+  /** Snap point to rest at first. Uncontrolled. */
+  defaultSnapPoint?: drawer.SnapPoint;
+  /** Controlled snap point. Pair with `onSnapPointChange`. */
+  activeSnapPoint?: drawer.SnapPoint | null;
+  children?: ReactNode;
+}
+/** A bottom sheet you drag down to dismiss. Renders no element of its own. */
+export declare function Drawer({ children, activeSnapPoint, ...props }: DrawerProps): import("react").JSX.Element;
+type PartProps<T extends "button" | "div" | "h2" | "p"> = ComponentProps<T> & {
+  /** Render your own element instead of the default one. */
+  render?: RenderProp;
+};
+export declare function DrawerTrigger({ render, ...props }: PartProps<"button">): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export declare function DrawerClose({ render, ...props }: PartProps<"button">): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+/**
+ * Backdrop, panel and focus trap. Mounts while open or leaving. As tall as its
+ * content, or as tall as the biggest numeric `snapPoints` entry.
+ */
+export declare function DrawerContent({ className, render, style, ...props }: PartProps<"div">): import("react").JSX.Element | null;
+/** The grab handle. Dragging it moves the drawer even when the content scrolls. */
+export declare function DrawerHandle({ className, ...props }: ComponentProps<"div">): import("react").JSX.Element;
+export declare function DrawerHeader({ className, ...props }: ComponentProps<"div">): import("react").JSX.Element;
+export declare function DrawerFooter({ className, ...props }: ComponentProps<"div">): import("react").JSX.Element;
+export declare function DrawerTitle({ className, ...props }: ComponentProps<"h2">): import("react").JSX.Element;
+export declare function DrawerDescription({ className, ...props }: ComponentProps<"p">): import("react").JSX.Element;
+export {};

package/dist/drawer.js

@@ -0,0 +1,140 @@
+"use client";
+import { cx } from "./lib/cx.js";
+import { tallestSnapPoint } from "./lib/drawer.math.js";
+import { usePageScale } from "./lib/page-scale.js";
+import { Portal } from "./lib/portal.js";
+import { usePresence } from "./lib/presence.js";
+import { mergeProps, renderPart } from "./lib/render.js";
+import { useSwipeTouchAction } from "./lib/swipe-touch-action.js";
+import { useVisualViewportVars } from "./lib/visual-viewport.js";
+import { normalizeProps, useMachine } from "@zag-js/react";
+import { createContext, useContext, useId, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as drawer from "@zag-js/drawer";
+// src/components/drawer.tsx
+const Context = createContext(null);
+function useDrawer() {
+	const api = useContext(Context);
+	if (!api) throw new Error("Drawer parts must be used inside <Drawer>.");
+	return api;
+}
+/** A bottom sheet you drag down to dismiss. Renders no element of its own. */
+function Drawer({ children, activeSnapPoint, ...props }) {
+	const id = useId();
+	const service = useMachine(drawer.machine, {
+		id,
+		swipeDirection: "down",
+		snapPoint: activeSnapPoint,
+		...props
+	});
+	const api = drawer.connect(service, normalizeProps);
+	return /* @__PURE__ */ jsx(Context.Provider, {
+		value: api,
+		children
+	});
+}
+function DrawerTrigger({ render, ...props }) {
+	const api = useDrawer();
+	return renderPart("button", mergeProps({
+		...api.getTriggerProps(),
+		"data-slot": "drawer-trigger"
+	}, props), render);
+}
+function DrawerClose({ render, ...props }) {
+	const { id: _id, ...closeProps } = useDrawer().getCloseTriggerProps();
+	return renderPart("button", mergeProps({
+		...closeProps,
+		"data-slot": "drawer-close"
+	}, props), render);
+}
+/**
+* Backdrop, panel and focus trap. Mounts while open or leaving. As tall as its
+* content, or as tall as the biggest numeric `snapPoints` entry.
+*/
+function DrawerContent({ className, render, style, ...props }) {
+	const api = useDrawer();
+	const id = useId();
+	const { ref, mounted, attrs } = usePresence(api.open);
+	const positioner = useRef(null);
+	useVisualViewportVars(positioner, mounted);
+	useSwipeTouchAction(ref, mounted, "y");
+	const openness = !api.open ? 0 : api.getContentSize() ? api.getOpenPercentage() : 1;
+	usePageScale(id, mounted, openness, api.dragging);
+	if (!mounted) return null;
+	const state = {
+		...attrs,
+		"data-open": api.open ? "" : void 0
+	};
+	const tallest = tallestSnapPoint(api.snapPoints);
+	return /* @__PURE__ */ jsxs(Portal, { children: [/* @__PURE__ */ jsx("div", {
+		...api.getBackdropProps(),
+		...state,
+		hidden: false,
+		"data-slot": "drawer-overlay",
+		className: "ease-standard fixed inset-0 z-[60] bg-black/30 backdrop-blur-sm transition-opacity duration-(--duration-normal) data-ending-style:opacity-0 data-starting-style:opacity-0 data-swiping:opacity-[calc(1-var(--drawer-swipe-progress))] data-swiping:transition-none motion-reduce:transition-none"
+	}), /* @__PURE__ */ jsx("div", {
+		...api.getPositionerProps(),
+		ref: positioner,
+		hidden: false,
+		className: "fixed inset-x-0 top-(--visual-viewport-top,0px) z-[60] flex h-(--visual-viewport-height,100dvh) items-end justify-center",
+		children: renderPart("div", mergeProps({
+			...api.getContentProps(),
+			...state,
+			ref,
+			hidden: false,
+			"data-slot": "drawer-content",
+			style: {
+				...tallest ? { height: `${tallest * 100}%` } : null,
+				...style
+			},
+			className: cx("relative flex max-h-[calc(100%-1.625rem)] w-full max-w-xl flex-col overflow-y-auto overscroll-contain rounded-t-3xl glass-menu squircle pb-[env(safe-area-inset-bottom)] text-label outline-none transition-[transform,translate,scale] duration-(--duration-sheet) ease-(--ease-sheet) data-ending-style:translate-y-full data-starting-style:translate-y-full data-nested-drawer-open:origin-bottom data-nested-drawer-open:scale-[calc(1-0.04*var(--nested-drawers,0))] motion-reduce:transition-none motion-reduce:data-ending-style:translate-y-0 motion-reduce:data-starting-style:translate-y-0 motion-reduce:data-ending-style:opacity-0 motion-reduce:data-starting-style:opacity-0", className)
+		}, props), render)
+	})] });
+}
+/** The grab handle. Dragging it moves the drawer even when the content scrolls. */
+function DrawerHandle({ className, ...props }) {
+	const api = useDrawer();
+	return /* @__PURE__ */ jsx("div", {
+		...api.getGrabberProps(),
+		"data-slot": "drawer-handle",
+		className: cx("flex h-6 w-full shrink-0 cursor-grab items-center justify-center", className),
+		...props,
+		children: /* @__PURE__ */ jsx("div", {
+			...api.getGrabberIndicatorProps(),
+			className: "bg-label-secondary/40 h-1.5 w-10 rounded-full"
+		})
+	});
+}
+function DrawerHeader({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "drawer-header",
+		className: cx("flex flex-col gap-1.5 px-6 pt-2 text-center", className),
+		...props
+	});
+}
+function DrawerFooter({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "drawer-footer",
+		className: cx("mt-auto flex flex-col gap-2 p-6", className),
+		...props
+	});
+}
+function DrawerTitle({ className, ...props }) {
+	const api = useDrawer();
+	return /* @__PURE__ */ jsx("h2", {
+		...api.getTitleProps(),
+		"data-slot": "drawer-title",
+		className: cx("text-headline font-semibold text-label", className),
+		...props
+	});
+}
+function DrawerDescription({ className, ...props }) {
+	const api = useDrawer();
+	return /* @__PURE__ */ jsx("p", {
+		...api.getDescriptionProps(),
+		"data-slot": "drawer-description",
+		className: cx("text-footnote text-label-secondary", className),
+		...props
+	});
+}
+export { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHandle, DrawerHeader, DrawerTitle, DrawerTrigger };