@botiverse/raft-ui 0.51.0 → 0.52.0

package/dist/components/drag/drop-placeholder.mjs

@@ -0,0 +1,161 @@
+"use client";
+import { drag } from "./drag.recipe.mjs";
+import { dragPointer } from "./drag-lift.mjs";
+import { useEffect, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { createPortal } from "react-dom";
+import { useDndContext } from "@dnd-kit/core";
+//#region src/components/drag/drop-placeholder.tsx
+/**
+* Where a dragged item will land (design/patterns/drag-and-drop.md#where-it-will-land):
+* a 1.5px dashed `line-strong` outline on `fill-subtle`, with the item's
+* radius and size. One look for every place. The control radius is the
+* default; pass the item's own (`rounded-container` for a card). Hidden from
+* assistive technology: the announcements say where the item is.
+*/
+function DropPlaceholder({ opaque = false, className, render, ...props }) {
+	const { placeholder } = drag({ opaque });
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps({
+			"aria-hidden": true,
+			className: placeholder({ className })
+		}, props, { "data-slot": "drop-placeholder" })
+	});
+}
+/** The chip sits this far right of and below the pointer. */
+const HINT_OFFSET = {
+	x: 14,
+	y: 16
+};
+/** It stays at least this far inside the window on every side. */
+const HINT_INSET = 8;
+/** Pushed off the lifted copy, it keeps this far from it. */
+const HINT_GAP = 6;
+function overlaps(a, b) {
+	return a.left < b.right && a.right > b.left && a.top < b.bottom && a.bottom > b.top;
+}
+function clamp(value, min, max) {
+	return Math.max(min, Math.min(value, Math.max(min, max)));
+}
+/**
+* Where the refusal chip goes (design/patterns/drag-and-drop.md#refused-places):
+* right of and below the pointer; left of it (and of the copy) where the
+* window's right edge would cut it, above it where the bottom edge would; off
+* the lifted copy, which is drawn over it; and always at least 8px inside the
+* window.
+*/
+function placeRefusalHint(point, size, lift, viewport) {
+	const { width, height } = size;
+	const maxX = viewport.width - HINT_INSET - width;
+	const maxY = viewport.height - HINT_INSET - height;
+	const fitsX = (x) => x >= HINT_INSET && x <= maxX;
+	const fitsY = (y) => y >= HINT_INSET && y <= maxY;
+	const right = point.x + HINT_OFFSET.x;
+	const onRight = right <= maxX;
+	let x = onRight ? right : Math.min(point.x, lift?.left ?? point.x) - HINT_OFFSET.x - width;
+	const below = point.y + HINT_OFFSET.y;
+	const onBelow = below <= maxY;
+	let y = onBelow ? below : point.y - HINT_OFFSET.y - height;
+	const box = (bx, by) => ({
+		left: bx,
+		top: by,
+		right: bx + width,
+		bottom: by + height
+	});
+	if (lift && overlaps(box(x, y), lift)) {
+		const clearBelow = lift.bottom + HINT_GAP;
+		const clearAbove = lift.top - HINT_GAP - height;
+		const vertical = (onBelow ? [clearBelow, clearAbove] : [clearAbove, clearBelow]).find(fitsY);
+		if (vertical !== void 0) y = vertical;
+		else {
+			const besideRight = lift.right + HINT_OFFSET.x;
+			const besideLeft = lift.left - HINT_OFFSET.x - width;
+			const beside = (onRight ? [besideRight, besideLeft] : [besideLeft, besideRight]).find(fitsX);
+			if (beside !== void 0) x = beside;
+		}
+	}
+	return {
+		x: Math.round(clamp(x, HINT_INSET, maxX)),
+		y: Math.round(clamp(y, HINT_INSET, maxY))
+	};
+}
+/**
+* Shown while the hand is over a place that refuses the item
+* (design/patterns/drag-and-drop.md#refused-places): the reason, in a HUD
+* chip by the pointer (by the lifted copy in a keyboard drag), and the
+* not-allowed cursor. Render it only while the place is refused, inside the
+* `DndContext`, with no placeholder anywhere. Announce the reason as well:
+* the chip is not read out.
+*
+* The chip sits right of and below the pointer. Near the window's right edge
+* it goes left of the pointer and of the lifted copy, near the bottom edge
+* above the pointer; it never sits under the copy, and always stays 8px inside
+* the window. Its size is measured when its content changes, not every frame.
+*/
+function DragRefusalHint({ children, container, className, style, ...props }) {
+	const { hint } = drag();
+	const ref = useRef(null);
+	const { active, activatorEvent } = useDndContext();
+	const dragging = active != null;
+	const viaKeyboard = typeof KeyboardEvent !== "undefined" && activatorEvent instanceof KeyboardEvent;
+	useEffect(() => {
+		if (!dragging) return;
+		const root = document.documentElement;
+		root.setAttribute("data-drag-refused", "");
+		const node = ref.current;
+		const size = {
+			width: node?.offsetWidth ?? 0,
+			height: node?.offsetHeight ?? 0
+		};
+		const observer = node && typeof ResizeObserver !== "undefined" ? new ResizeObserver(() => {
+			size.width = node.offsetWidth;
+			size.height = node.offsetHeight;
+		}) : null;
+		if (node) observer?.observe(node);
+		let frame = 0;
+		const tick = () => {
+			if (node) {
+				const lift = document.querySelector("[data-slot=drag-lift]")?.getBoundingClientRect();
+				let point = dragPointer();
+				if ((viaKeyboard || !point) && lift) point = {
+					x: lift.right,
+					y: lift.top + lift.height / 2
+				};
+				if (point) {
+					const at = placeRefusalHint(point, size, lift ?? null, {
+						width: window.innerWidth,
+						height: window.innerHeight
+					});
+					node.style.transform = `translate(${at.x}px, ${at.y}px)`;
+					node.style.visibility = "visible";
+				}
+			}
+			frame = requestAnimationFrame(tick);
+		};
+		tick();
+		return () => {
+			root.removeAttribute("data-drag-refused");
+			observer?.disconnect();
+			cancelAnimationFrame(frame);
+		};
+	}, [dragging, viaKeyboard]);
+	if (!dragging || typeof document === "undefined") return null;
+	return createPortal(/* @__PURE__ */ jsx("div", {
+		...props,
+		ref,
+		"data-slot": "drag-refusal-hint",
+		"aria-hidden": true,
+		className: hint({ className }),
+		style: {
+			visibility: "hidden",
+			...style
+		},
+		children
+	}), container ?? document.body);
+}
+//#endregion
+export { DragRefusalHint, DropPlaceholder, placeRefusalHint };

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

@@ -0,0 +1,8 @@
+import { DEFAULT_DRAG_MESSAGES, DragAnnouncementSource, DragMessages, DragNamed, DragPlace, createDragAnnouncements, dragInstructions, dragMessages } from "./drag-announcements.mjs";
+import { HoldThenMoveOptions, HoldThenMoveTouchSensor, MouseOnlyPointerSensor, TOUCH_DRAG_DISTANCE_PX, TOUCH_DRAG_HOLD_MS, TOUCH_DRAG_TOLERANCE_PX, useHoldThenMoveTouchSensor, useMouseOnlyPointerSensor } from "../../lib/touch-drag.mjs";
+import { DRAG_KEYBOARD_CODES, DragAcrossLists, DragRemeasure, DragRemeasureProps, DragSensorsOptions, MOUSE_DRAG_DISTANCE_PX, listKeyboardCoordinates, useDragAcrossLists, useDragSensors } from "./drag-sensors.mjs";
+import { LIFT_CLASS } from "./drag.recipe.mjs";
+import { DRAG_AUTO_SCROLL_ZONE_PX, DRAG_KEYBOARD_OFFSET_PX, DRAG_LIFT_Z_INDEX, DRAG_SETTLE, DRAG_SIBLING_TRANSITION, DROP_GLIDE, DragLift, DragLiftProps, ORIGIN_OPACITY, cancelDrag, keepGrabInside, useDragSiblingTransition } from "./drag-lift.mjs";
+import { DragRefusalHint, DragRefusalHintProps, DropPlaceholder, DropPlaceholderProps } from "./drop-placeholder.mjs";
+import { DragListsItems, DragLiveRegion, DraggedSlot, DraggedSlotProps, UseDragListsOptions, dragListStrategy, useDragAnnouncer, useDragLists } from "./drag-lists.mjs";
+export { DEFAULT_DRAG_MESSAGES, DRAG_AUTO_SCROLL_ZONE_PX, DRAG_KEYBOARD_CODES, DRAG_KEYBOARD_OFFSET_PX, DRAG_LIFT_Z_INDEX, DRAG_SETTLE, DRAG_SIBLING_TRANSITION, DROP_GLIDE, type DragAcrossLists, type DragAnnouncementSource, DragLift, type DragLiftProps, type DragListsItems, DragLiveRegion, type DragMessages, type DragNamed, type DragPlace, DragRefusalHint, type DragRefusalHintProps, DragRemeasure, type DragRemeasureProps, type DragSensorsOptions, DraggedSlot, type DraggedSlotProps, DropPlaceholder, type DropPlaceholderProps, type HoldThenMoveOptions, HoldThenMoveTouchSensor, LIFT_CLASS, MOUSE_DRAG_DISTANCE_PX, MouseOnlyPointerSensor, ORIGIN_OPACITY, TOUCH_DRAG_DISTANCE_PX, TOUCH_DRAG_HOLD_MS, TOUCH_DRAG_TOLERANCE_PX, type UseDragListsOptions, cancelDrag, createDragAnnouncements, dragInstructions, dragListStrategy, dragMessages, keepGrabInside, listKeyboardCoordinates, useDragAcrossLists, useDragAnnouncer, useDragLists, useDragSensors, useDragSiblingTransition, useHoldThenMoveTouchSensor, useMouseOnlyPointerSensor };

package/dist/components/drawer/drawer.d.mts

@@ -0,0 +1,34 @@
+import { StyledProps } from "../../lib/styled-props.mjs";
+import { ButtonProps } from "../button/button.mjs";
+import "../button/index.mjs";
+import { useRender } from "@base-ui/react/use-render";
+import { Drawer } from "@base-ui/react/drawer";
+//#region src/components/drawer/drawer.d.ts
+export type DrawerProps = Drawer.Root.Props;
+declare function Drawer$1({ modal, snapPoints, swipeDirection, children, ...props }: DrawerProps): import("react").JSX.Element;
+export type DrawerTriggerProps = Drawer.Trigger.Props;
+export declare function DrawerTrigger(props: DrawerTriggerProps): import("react").JSX.Element;
+export type DrawerPortalProps = Drawer.Portal.Props;
+export declare function DrawerPortal(props: DrawerPortalProps): import("react").JSX.Element;
+export type DrawerOverlayProps = StyledProps<Drawer.Backdrop.Props>;
+export declare function DrawerOverlay({ className, ...props }: DrawerOverlayProps): import("react").JSX.Element;
+export type DrawerContentProps = StyledProps<Drawer.Popup.Props> & {
+  portalProps?: DrawerPortalProps;
+};
+export declare function DrawerContent({ className, children, portalProps, ...props }: DrawerContentProps): import("react").JSX.Element;
+export type DrawerCloseProps = StyledProps<Drawer.Close.Props> & Pick<ButtonProps, "variant" | "size">;
+export declare function DrawerClose({ className, variant, size, children, render, "aria-label": ariaLabel, ...props }: DrawerCloseProps): import("react").JSX.Element;
+export type DrawerHeaderProps = useRender.ComponentProps<"div">;
+export declare function DrawerHeader({ className, render, ...props }: DrawerHeaderProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type DrawerFooterProps = useRender.ComponentProps<"div">;
+export declare function DrawerFooter({ className, render, ...props }: DrawerFooterProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type DrawerBodyProps = useRender.ComponentProps<"div">;
+export declare function DrawerBody({ className, render, ...props }: DrawerBodyProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type DrawerActionsProps = useRender.ComponentProps<"div">;
+export declare function DrawerActions({ className, render, children, ...props }: DrawerActionsProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type DrawerTitleProps = StyledProps<Drawer.Title.Props>;
+export declare function DrawerTitle({ className, ...props }: DrawerTitleProps): import("react").JSX.Element;
+export type DrawerDescriptionProps = StyledProps<Drawer.Description.Props>;
+export declare function DrawerDescription({ className, ...props }: DrawerDescriptionProps): import("react").JSX.Element;
+//#endregion
+export { Drawer$1 as Drawer };

package/dist/components/drawer/drawer.mjs

@@ -0,0 +1,202 @@
+import { cn } from "../../cn.mjs";
+import { useThemeScopeProps } from "../../lib/theme/theme-scope.mjs";
+import { useParentOverlayKind, withOverlayLayer } from "../../lib/overlay-depth.mjs";
+import { Button } from "../button/button.mjs";
+import { DialogSheetReset } from "../dialog/dialog-sheet-context.mjs";
+import { drawer } from "./drawer.recipe.mjs";
+import { X } from "lucide-react";
+import { createContext, useContext, useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { Drawer } from "@base-ui/react/drawer";
+//#region src/components/drawer/drawer.tsx
+const DrawerConfigContext = createContext(null);
+function useDrawerConfig() {
+	const context = useContext(DrawerConfigContext);
+	if (!context) throw new Error("Drawer parts must be used within Drawer.");
+	return context;
+}
+function Drawer$1({ modal = true, snapPoints, swipeDirection = "down", children, ...props }) {
+	const hasSnapPoints = snapPoints != null && snapPoints.length > 0;
+	const swipeAxis = swipeDirection === "down" || swipeDirection === "up" ? "y" : "x";
+	const contextValue = useMemo(() => ({
+		hasSnapPoints,
+		modal,
+		swipeAxis,
+		swipeDirection
+	}), [
+		hasSnapPoints,
+		modal,
+		swipeAxis,
+		swipeDirection
+	]);
+	return /* @__PURE__ */ jsx(DrawerConfigContext.Provider, {
+		value: contextValue,
+		children: /* @__PURE__ */ jsx(Drawer.Root, {
+			modal,
+			snapPoints,
+			swipeDirection,
+			...props,
+			children: withOverlayLayer("drawer", modal === true, children)
+		})
+	});
+}
+function DrawerTrigger(props) {
+	return /* @__PURE__ */ jsx(Drawer.Trigger, {
+		"data-slot": "drawer-trigger",
+		...props
+	});
+}
+function DrawerPortal(props) {
+	return /* @__PURE__ */ jsx(Drawer.Portal, {
+		"data-slot": "drawer-portal",
+		...useThemeScopeProps(props)
+	});
+}
+function DrawerOverlay({ className, ...props }) {
+	const { hasSnapPoints } = useDrawerConfig();
+	const nested = useParentOverlayKind() === "dialog";
+	const { overlay } = drawer({
+		snapPoints: hasSnapPoints,
+		nested
+	});
+	return /* @__PURE__ */ jsx(Drawer.Backdrop, {
+		"data-slot": "drawer-overlay",
+		"data-nested": nested ? "" : void 0,
+		forceRender: nested,
+		className: overlay({ className }),
+		...props
+	});
+}
+function DrawerSwipeHandle() {
+	const { swipeAxis, swipeDirection } = useDrawerConfig();
+	const { swipeHandle } = drawer({
+		side: swipeDirection,
+		axis: swipeAxis
+	});
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "drawer-swipe-handle",
+		"aria-hidden": "true",
+		className: swipeHandle()
+	});
+}
+function DrawerContent({ className, children, portalProps, ...props }) {
+	const { hasSnapPoints, modal, swipeAxis, swipeDirection } = useDrawerConfig();
+	const { content, popup, viewport } = drawer({
+		side: swipeDirection,
+		axis: swipeAxis,
+		snapPoints: hasSnapPoints
+	});
+	return /* @__PURE__ */ jsxs(DrawerPortal, {
+		...portalProps,
+		children: [modal === true ? /* @__PURE__ */ jsx(DrawerOverlay, {}) : null, /* @__PURE__ */ jsx(Drawer.Viewport, {
+			"data-slot": "drawer-viewport",
+			className: cn(viewport(), modal === true && "pointer-events-auto"),
+			children: /* @__PURE__ */ jsxs(Drawer.Popup, {
+				"data-slot": "drawer-popup",
+				className: popup({ className }),
+				...props,
+				children: [hasSnapPoints ? /* @__PURE__ */ jsx(DrawerSwipeHandle, {}) : null, /* @__PURE__ */ jsx(Drawer.Content, {
+					"data-slot": "drawer-content",
+					className: content(),
+					children: /* @__PURE__ */ jsx(DialogSheetReset, { children })
+				})]
+			})
+		})]
+	});
+}
+function DrawerClose({ className, variant, size, children, render, "aria-label": ariaLabel, ...props }) {
+	const { close, closeIcon } = drawer();
+	if (render) return /* @__PURE__ */ jsx(Drawer.Close, {
+		"data-slot": "drawer-close",
+		className,
+		render,
+		"aria-label": ariaLabel,
+		...props,
+		children
+	});
+	return /* @__PURE__ */ jsx(Drawer.Close, {
+		"data-slot": "drawer-close",
+		render: /* @__PURE__ */ jsx(Button, {
+			variant: variant ?? "ghost",
+			size: size ?? "icon-lg",
+			"aria-label": ariaLabel ?? "Close"
+		}),
+		className: close({ className }),
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(X, { className: closeIcon() })
+	});
+}
+function DrawerHeader({ className, render, ...props }) {
+	const { hasSnapPoints, swipeAxis, swipeDirection } = useDrawerConfig();
+	const { header } = drawer({
+		side: swipeDirection,
+		axis: swipeAxis,
+		snapPoints: hasSnapPoints
+	});
+	const defaultProps = { className: header({ className }) };
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: { slot: "drawer-header" }
+	});
+}
+function DrawerFooter({ className, render, ...props }) {
+	const { swipeAxis } = useDrawerConfig();
+	const { footer } = drawer({ axis: swipeAxis });
+	const defaultProps = { className: footer({ className }) };
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: { slot: "drawer-footer" }
+	});
+}
+function DrawerBody({ className, render, ...props }) {
+	const { swipeAxis } = useDrawerConfig();
+	const { body } = drawer({ axis: swipeAxis });
+	const defaultProps = { className: body({ className }) };
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: { slot: "drawer-body" }
+	});
+}
+function DrawerActions({ className, render, children, ...props }) {
+	const swipeAxis = useContext(DrawerConfigContext)?.swipeAxis;
+	const { actions } = drawer({ axis: swipeAxis });
+	const defaultProps = {
+		className: actions({ className }),
+		"data-stacked": swipeAxis === "x" ? void 0 : "",
+		children
+	};
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: { slot: "drawer-actions" }
+	});
+}
+function DrawerTitle({ className, ...props }) {
+	const { swipeAxis } = useDrawerConfig();
+	const { title } = drawer({ axis: swipeAxis });
+	return /* @__PURE__ */ jsx(Drawer.Title, {
+		"data-slot": "drawer-title",
+		className: title({ className }),
+		...props
+	});
+}
+function DrawerDescription({ className, ...props }) {
+	const { swipeAxis } = useDrawerConfig();
+	const { description } = drawer({ axis: swipeAxis });
+	return /* @__PURE__ */ jsx(Drawer.Description, {
+		"data-slot": "drawer-description",
+		className: description({ className }),
+		...props
+	});
+}
+//#endregion
+export { Drawer$1 as Drawer, DrawerActions, DrawerBody, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger };

package/dist/components/drawer/drawer.recipe.mjs

@@ -0,0 +1,175 @@
+import { tv } from "../../lib/tv.mjs";
+import { panelHeadEdges } from "../panel/panel-header.recipe.mjs";
+//#region src/components/drawer/drawer.recipe.ts
+const drawerMotion = tv({
+	slots: {
+		overlay: [
+			"opacity-[max(var(--drawer-overlay-min-opacity,0),calc(1-var(--drawer-swipe-progress)))]",
+			"transition-opacity duration-200 ease-slide",
+			"data-starting-style:opacity-0 data-ending-style:pointer-events-none data-ending-style:opacity-0 data-ending-style:duration-150",
+			"motion-reduce:transition-none"
+		],
+		popup: [
+			"[--drawer-blur:2px] [--drawer-ease:var(--ease-slide)]",
+			"[--closed-transform:translate3d(var(--drawer-exit-x,0px),var(--drawer-exit-y,0px),0)]",
+			"[--drawer-stack-peek:16px] [--drawer-stack-step:0.05]",
+			"[--drawer-stack-progress:clamp(0,var(--drawer-swipe-progress),1)]",
+			"[--drawer-stack-offset:max(0px,calc((var(--nested-drawers)-var(--drawer-stack-progress))*var(--drawer-stack-peek)))]",
+			"[--drawer-stack-scale-base:calc(max(0,1-(var(--nested-drawers)*var(--drawer-stack-step))))]",
+			"[--drawer-stack-scale:clamp(0,calc(var(--drawer-stack-scale-base)+(var(--drawer-stack-step)*var(--drawer-stack-progress))),1)]",
+			"[--drawer-stack-shrink:calc(1-var(--drawer-stack-scale))]",
+			"[--drawer-stack-shrink-offset:calc(var(--drawer-stack-shrink)*var(--drawer-stack-size))]",
+			"origin-(--drawer-transform-origin)",
+			"transform-[translate3d(calc(var(--drawer-swipe-x,0px)+var(--drawer-stack-x,0px)),calc(var(--drawer-swipe-y,0px)+var(--drawer-stack-y,0px)),0)_scale(var(--drawer-stack-scale))]",
+			"opacity-100 blur-0",
+			"transition-[transform,height,opacity,filter] duration-240 ease-(--drawer-ease) will-change-transform",
+			"data-ending-style:duration-[calc(var(--drawer-swipe-strength,1)*180ms)]",
+			"data-starting-style:transform-(--closed-transform) data-starting-style:opacity-0 data-starting-style:blur-(--drawer-blur)",
+			"data-ending-style:transform-(--closed-transform) data-ending-style:opacity-0 data-ending-style:blur-(--drawer-blur)",
+			"data-swiping:duration-0 data-nested-drawer-swiping:duration-0 motion-reduce:transition-none"
+		],
+		content: ["transition-opacity duration-150 ease-slide motion-reduce:transition-none", "group-data-nested-drawer-open/drawer-popup:opacity-0 group-data-nested-drawer-swiping/drawer-popup:opacity-100"],
+		swipeHandle: ["transition-opacity duration-150 motion-reduce:transition-none", "group-data-nested-drawer-open/drawer-popup:opacity-0 group-data-nested-drawer-swiping/drawer-popup:opacity-100"]
+	},
+	variants: {
+		side: {
+			down: { popup: [
+				"[--drawer-exit-y:calc(100%+var(--drawer-inset)+2px)]",
+				"[--drawer-stack-y:calc(0px-var(--drawer-stack-offset)-var(--drawer-stack-shrink-offset))]",
+				"[--drawer-transform-origin:50%_100%]"
+			] },
+			up: { popup: [
+				"[--drawer-exit-y:calc(-100%-var(--drawer-inset)-2px)]",
+				"[--drawer-stack-y:calc(var(--drawer-stack-offset)+var(--drawer-stack-shrink-offset))]",
+				"[--drawer-transform-origin:50%_0%]"
+			] },
+			left: { popup: [
+				"[--drawer-exit-x:calc(-100%-var(--drawer-inset)-2px)]",
+				"[--drawer-stack-x:calc(var(--drawer-stack-offset)+var(--drawer-stack-shrink-offset))]",
+				"[--drawer-transform-origin:0%_50%]"
+			] },
+			right: { popup: [
+				"[--drawer-exit-x:calc(100%+var(--drawer-inset)+2px)]",
+				"[--drawer-stack-x:calc(0px-var(--drawer-stack-offset)-var(--drawer-stack-shrink-offset))]",
+				"[--drawer-transform-origin:100%_50%]"
+			] }
+		},
+		axis: {
+			x: { popup: ["[--drawer-stack-size:100%]", "[--drawer-swipe-x:var(--drawer-swipe-movement-x)]"] },
+			y: { popup: ["[--drawer-stack-size:max(0px,var(--drawer-frontmost-height,var(--drawer-height)))]", "[--drawer-swipe-y:calc(var(--drawer-snap-point-offset,0px)+var(--drawer-swipe-movement-y))]"] }
+		},
+		snapPoints: { true: { overlay: ["[--drawer-overlay-min-opacity:0.5]"] } }
+	}
+});
+const drawer = tv({
+	extend: drawerMotion,
+	slots: {
+		overlay: [
+			"fixed inset-0 z-50 min-h-dvh select-none",
+			"supports-[-webkit-touch-callout:none]:absolute",
+			"bg-layer-backdrop"
+		],
+		viewport: ["pointer-events-none fixed inset-0 z-50 select-none"],
+		popup: [
+			"group/drawer-popup pointer-events-auto fixed z-50 flex h-(--drawer-content-height) flex-col outline-none",
+			"[--drawer-inset:12px] [--drawer-content-height:var(--drawer-height,auto)]",
+			"data-nested-drawer-open:overflow-hidden",
+			"bg-layer-popover text-foreground",
+			"shadow-float ring-1 ring-line-seam"
+		],
+		content: ["flex min-h-0 flex-1 flex-col rounded-[inherit] select-text", "group-data-swiping/drawer-popup:select-none"],
+		swipeHandle: [
+			"relative z-10 shrink-0 cursor-grab select-none active:cursor-grabbing",
+			"before:absolute before:content-['']",
+			"before:rounded-full before:bg-line-seam"
+		],
+		close: ["shrink-0"],
+		closeIcon: ["size-control-icon"],
+		header: ["flex flex-col", "items-stretch gap-1 px-4 pt-4 pb-2 text-left"],
+		body: ["flex flex-1 flex-col", "items-stretch px-4 pt-2 pb-4 text-left"],
+		footer: ["mt-auto py-5", "px-4 pt-3 pb-4"],
+		actions: [
+			"flex w-full flex-col items-stretch",
+			"**:data-[slot=button]:w-full",
+			"gap-2"
+		],
+		title: ["text-pretty text-foreground", "max-w-none text-left font-sans text-headline font-bold"],
+		description: ["text-pretty", "max-w-none text-left font-sans text-callout text-foreground-muted"]
+	},
+	variants: {
+		nested: {
+			false: {},
+			true: { overlay: ["bg-layer-backdrop-nested"] }
+		},
+		side: {
+			down: {
+				popup: [
+					"bottom-(--drawer-inset) min-h-64 max-h-[82vh]",
+					"rounded-t-dialog [--drawer-inset:0px]",
+					"pb-[env(safe-area-inset-bottom,0px)]"
+				],
+				swipeHandle: ["before:top-3"]
+			},
+			up: {
+				popup: [
+					"top-(--drawer-inset) max-h-[80vh]",
+					"rounded-b-dialog [--drawer-inset:0px]",
+					"pt-[env(safe-area-inset-top,0px)]"
+				],
+				swipeHandle: ["order-last", "before:bottom-3"]
+			},
+			left: {
+				popup: ["left-(--drawer-inset)"],
+				swipeHandle: ["order-last", "before:right-3"]
+			},
+			right: {
+				popup: ["right-(--drawer-inset)"],
+				swipeHandle: ["before:left-3"]
+			}
+		},
+		axis: {
+			x: {
+				popup: ["flex-row", "inset-y-0 w-full max-w-[420px] [--drawer-inset:0px]"],
+				swipeHandle: [
+					"my-auto h-16 w-11",
+					"before:top-1/2 before:-translate-y-1/2",
+					"before:w-1 before:h-9"
+				],
+				header: [
+					"min-h-14 shrink-0 flex-row items-center justify-between gap-2 py-0 text-left",
+					"border-b border-line-seam",
+					panelHeadEdges
+				],
+				body: ["items-stretch text-left", "min-h-0 overflow-y-auto px-5 py-4"],
+				footer: ["border-t border-line-seam px-5 py-3"],
+				title: ["min-w-0 max-w-none flex-1 text-left"],
+				description: ["max-w-none text-left"],
+				actions: ["flex-row flex-wrap justify-end", "**:data-[slot=button]:w-auto"]
+			},
+			y: {
+				popup: [
+					"data-nested-drawer-open:h-(--drawer-frontmost-height)",
+					"mx-auto md:max-w-md",
+					"inset-x-0"
+				],
+				swipeHandle: [
+					"mx-auto w-16",
+					"before:left-1/2 before:-translate-x-1/2",
+					"h-4",
+					"before:top-1.5 before:h-1 before:w-9"
+				]
+			}
+		}
+	},
+	compoundVariants: [{
+		side: "down",
+		snapPoints: true,
+		class: { header: ["pt-2"] }
+	}, {
+		axis: "y",
+		snapPoints: true,
+		class: { popup: ["[--drawer-content-height:100dvh]"] }
+	}]
+});
+//#endregion
+export { drawer };

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

@@ -0,0 +1,2 @@
+import { Drawer, DrawerActions, DrawerActionsProps, DrawerBody, DrawerBodyProps, DrawerClose, DrawerCloseProps, DrawerContent, DrawerContentProps, DrawerDescription, DrawerDescriptionProps, DrawerFooter, DrawerFooterProps, DrawerHeader, DrawerHeaderProps, DrawerOverlay, DrawerOverlayProps, DrawerPortal, DrawerPortalProps, DrawerProps, DrawerTitle, DrawerTitleProps, DrawerTrigger, DrawerTriggerProps } from "./drawer.mjs";
+export { Drawer, DrawerActions, type DrawerActionsProps, DrawerBody, type DrawerBodyProps, DrawerClose, type DrawerCloseProps, DrawerContent, type DrawerContentProps, DrawerDescription, type DrawerDescriptionProps, DrawerFooter, type DrawerFooterProps, DrawerHeader, type DrawerHeaderProps, DrawerOverlay, type DrawerOverlayProps, DrawerPortal, type DrawerPortalProps, type DrawerProps, DrawerTitle, type DrawerTitleProps, DrawerTrigger, type DrawerTriggerProps };

package/dist/components/dropdown-menu/dropdown-menu.d.mts

@@ -0,0 +1,62 @@
+import { StyledProps } from "../../lib/styled-props.mjs";
+import { BadgeProps } from "../badge/badge.mjs";
+import "../badge/index.mjs";
+import { KbdProps } from "../kbd/kbd.mjs";
+import "../kbd/index.mjs";
+import { ComponentPropsWithRef } from "react";
+import { Menu } from "@base-ui/react/menu";
+//#region src/components/dropdown-menu/dropdown-menu.d.ts
+export type DropdownMenuProps = Menu.Root.Props;
+export declare function DropdownMenu(props: DropdownMenuProps): import("react").JSX.Element;
+export type DropdownMenuSubmenuProps = Menu.SubmenuRoot.Props;
+export declare function DropdownMenuSubmenu(props: DropdownMenuSubmenuProps): import("react").JSX.Element;
+export type DropdownMenuTriggerProps = StyledProps<Menu.Trigger.Props>;
+export declare function DropdownMenuTrigger({ className, render, ...props }: DropdownMenuTriggerProps): import("react").JSX.Element;
+export type DropdownMenuPortalProps = Menu.Portal.Props;
+export declare function DropdownMenuPortal(props: DropdownMenuPortalProps): import("react").JSX.Element;
+export type DropdownMenuPopupProps = ComponentPropsWithRef<"div">;
+export declare function DropdownMenuPopup({ className, ...props }: DropdownMenuPopupProps): import("react").JSX.Element;
+export type DropdownMenuContentProps = StyledProps<Menu.Popup.Props> & Pick<Menu.Positioner.Props, "align" | "alignOffset" | "anchor" | "arrowPadding" | "collisionAvoidance" | "collisionBoundary" | "collisionPadding" | "disableAnchorTracking" | "positionMethod" | "side" | "sideOffset" | "sticky"> & {
+  portalProps?: DropdownMenuPortalProps;
+};
+export declare function DropdownMenuContent({ align, alignOffset, anchor, arrowPadding, collisionAvoidance, collisionBoundary, collisionPadding, disableAnchorTracking, positionMethod, side, sideOffset, sticky, portalProps, className, ...props }: DropdownMenuContentProps): import("react").JSX.Element;
+export type DropdownMenuItemProps = StyledProps<Menu.Item.Props>;
+export declare function DropdownMenuItem({ className, ...props }: DropdownMenuItemProps): import("react").JSX.Element;
+export type DropdownMenuItemLabelProps = StyledProps<ComponentPropsWithRef<"span">>;
+export declare function DropdownMenuItemLabel({ className, ...props }: DropdownMenuItemLabelProps): import("react").JSX.Element;
+export type DropdownMenuFooterProps = StyledProps<ComponentPropsWithRef<"div">>;
+export declare function DropdownMenuFooter({ className, ...props }: DropdownMenuFooterProps): import("react").JSX.Element;
+export type DropdownMenuSubmenuTriggerProps = StyledProps<Menu.SubmenuTrigger.Props>;
+export declare function DropdownMenuSubmenuTrigger({ children, className, ...props }: DropdownMenuSubmenuTriggerProps): import("react").JSX.Element;
+export type DropdownMenuLabelProps = StyledProps<ComponentPropsWithRef<"div">>;
+export declare function DropdownMenuLabel({ className, ...props }: DropdownMenuLabelProps): import("react").JSX.Element;
+export type DropdownMenuShortcutProps = KbdProps;
+export declare function DropdownMenuShortcut({ className, ...props }: DropdownMenuShortcutProps): import("react").JSX.Element;
+export type DropdownMenuItemCountProps = BadgeProps;
+export declare function DropdownMenuItemCount({ className, ...props }: DropdownMenuItemCountProps): import("react").JSX.Element;
+export type DropdownMenuSeparatorProps = StyledProps<Menu.Separator.Props>;
+export declare function DropdownMenuSeparator({ className, ...props }: DropdownMenuSeparatorProps): import("react").JSX.Element;
+export type DropdownMenuRadioGroupProps = StyledProps<Menu.RadioGroup.Props>;
+export declare function DropdownMenuRadioGroup({ ...props }: DropdownMenuRadioGroupProps): import("react").JSX.Element;
+export type DropdownMenuRadioItemProps = StyledProps<Menu.RadioItem.Props>;
+export declare function DropdownMenuRadioItem({ className, children, closeOnClick, ...props }: DropdownMenuRadioItemProps): import("react").JSX.Element;
+export type DropdownMenuRadioItemIndicatorProps = StyledProps<Menu.RadioItemIndicator.Props>;
+export declare function DropdownMenuRadioItemIndicator({ className, ...props }: DropdownMenuRadioItemIndicatorProps): import("react").JSX.Element;
+export type DropdownMenuCheckboxItemProps = StyledProps<Menu.CheckboxItem.Props>;
+export declare function DropdownMenuCheckboxItem({ className, children, ...props }: DropdownMenuCheckboxItemProps): import("react").JSX.Element;
+export type DropdownMenuCheckboxItemIndicatorProps = StyledProps<Menu.CheckboxItemIndicator.Props>;
+export declare function DropdownMenuCheckboxItemIndicator({ className, ...props }: DropdownMenuCheckboxItemIndicatorProps): import("react").JSX.Element;
+export type DropdownMenuLinkItemProps = StyledProps<Menu.LinkItem.Props> & {
+  /**
+   * The page being shown: `aria-current="page"`, drawn as the chosen value
+   * of a radio group (a check mark and bold text).
+   */
+  current?: boolean;
+};
+/**
+ * One choice that is another page, such as the same page in another
+ * language: a link, so it opens in a new tab and can be copied. Its
+ * `href` goes on the item; `current` marks the page being shown.
+ */
+export declare function DropdownMenuLinkItem({ current, className, children, ...props }: DropdownMenuLinkItemProps): import("react").JSX.Element;
+//#endregion