@arcfusionz/arc-primitive-ui 0.1.0 → 0.2.1

package/dist/components/DateRangePicker/DateRangePicker.js

@@ -0,0 +1,161 @@
+import { cn } from "../../lib/cn.js";
+import { Calendar } from "../Calendar/Calendar.js";
+import { Popover, PopoverPopup, PopoverTrigger } from "../Popover/Popover.js";
+import { datePickerVariants } from "../DatePicker/DatePicker.js";
+import { forwardRef, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/DateRangePicker/DateRangePicker.tsx
+/** Class list for an element styled as the DateRangePicker trigger. */
+function dateRangePickerVariants({ variant = "outline", size = "md", fullWidth = false, className } = {}) {
+	return cn(datePickerVariants({
+		variant,
+		size,
+		fullWidth
+	}), !fullWidth && "w-72", className);
+}
+function CalendarRangeIcon(props) {
+	return /* @__PURE__ */ jsxs("svg", {
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: 2,
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("path", { d: "M8 2v4M16 2v4M3 9h18" }),
+			/* @__PURE__ */ jsx("rect", {
+				x: "3",
+				y: "4",
+				width: "18",
+				height: "17",
+				rx: "2"
+			}),
+			/* @__PURE__ */ jsx("path", { d: "M7 14h3M14 14h3" })
+		]
+	});
+}
+function mergeAnchorWidth(anchorWidth, style) {
+	if (anchorWidth == null) return style;
+	const anchorStyle = { width: anchorWidth };
+	return typeof style === "function" ? (state) => ({
+		...anchorStyle,
+		...style(state)
+	}) : {
+		...anchorStyle,
+		...style ?? {}
+	};
+}
+function createFormatter(locale, options) {
+	try {
+		return new Intl.DateTimeFormat(locale, options);
+	} catch {
+		return new Intl.DateTimeFormat(void 0, options);
+	}
+}
+function compareDays(a, b) {
+	return a.getFullYear() - b.getFullYear() || a.getMonth() - b.getMonth() || a.getDate() - b.getDate();
+}
+function orderRange(range) {
+	return compareDays(range.start, range.end) <= 0 ? range : {
+		start: range.end,
+		end: range.start
+	};
+}
+function toLocalISODate(date) {
+	return `${String(date.getFullYear()).padStart(4, "0")}-${String(date.getMonth() + 1).padStart(2, "0")}-${String(date.getDate()).padStart(2, "0")}`;
+}
+const emptyDataAttribute = { "data-empty": "" };
+const readOnlyDataAttribute = { "data-readonly": "" };
+const DEFAULT_FORMAT_OPTIONS = { dateStyle: "medium" };
+/**
+* A localized date-range trigger with an ArcFusion Calendar in a Base UI Popover.
+*
+* The visible trigger text is always its baseline accessible name. Add
+* `aria-label`/`aria-labelledby` when surrounding context (for example,
+* "Booking dates") must be part of the name.
+*/
+const DateRangePicker = forwardRef(({ value: valueProp, defaultValue = null, onValueChange, open, defaultOpen = false, onOpenChange, onOpenChangeComplete, closeOnSelect = true, placeholder = "Pick a date range", locale, formatOptions = DEFAULT_FORMAT_OPTIONS, formatValue, calendarLabel = "Choose date range", calendarProps, popupProps, popupClassName, variant = "outline", size = "md", fullWidth = false, anchorWidth, icon, disabled = false, readOnly = false, startName, endName, form, type = "button", style, className, ...rest }, ref) => {
+	const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue ? orderRange(defaultValue) : null);
+	const selectedRange = valueProp !== void 0 ? valueProp && orderRange(valueProp) : uncontrolledValue;
+	const actionsRef = useRef(null);
+	const popupRef = useRef(null);
+	const formatter = useMemo(() => createFormatter(locale, formatOptions), [locale, formatOptions]);
+	const valueText = selectedRange ? formatValue?.(selectedRange, locale) ?? formatter.formatRange(selectedRange.start, selectedRange.end) : placeholder;
+	const handleValueChange = (nextValue) => {
+		const orderedValue = nextValue && orderRange(nextValue);
+		if (valueProp === void 0) setUncontrolledValue(orderedValue);
+		onValueChange?.(orderedValue);
+		if (closeOnSelect && orderedValue) actionsRef.current?.close();
+	};
+	return /* @__PURE__ */ jsxs(Popover, {
+		actionsRef,
+		open,
+		defaultOpen,
+		onOpenChange,
+		onOpenChangeComplete,
+		children: [
+			/* @__PURE__ */ jsxs(PopoverTrigger, {
+				ref,
+				type,
+				disabled,
+				form,
+				style: mergeAnchorWidth(anchorWidth, style),
+				className: cn(dateRangePickerVariants({
+					variant,
+					size,
+					fullWidth
+				}), className),
+				...!selectedRange ? emptyDataAttribute : void 0,
+				...readOnly ? readOnlyDataAttribute : void 0,
+				...rest,
+				children: [icon !== null && /* @__PURE__ */ jsx("span", {
+					"aria-hidden": "true",
+					className: "inline-flex shrink-0 text-muted-foreground",
+					children: icon ?? /* @__PURE__ */ jsx(CalendarRangeIcon, {})
+				}), /* @__PURE__ */ jsx("span", {
+					className: "min-w-0 flex-1 truncate text-left font-normal",
+					children: valueText
+				})]
+			}),
+			startName && /* @__PURE__ */ jsx("input", {
+				type: "hidden",
+				name: startName,
+				form,
+				disabled: disabled || void 0,
+				value: selectedRange ? toLocalISODate(selectedRange.start) : ""
+			}),
+			endName && /* @__PURE__ */ jsx("input", {
+				type: "hidden",
+				name: endName,
+				form,
+				disabled: disabled || void 0,
+				value: selectedRange ? toLocalISODate(selectedRange.end) : ""
+			}),
+			/* @__PURE__ */ jsx(PopoverPopup, {
+				ref: popupRef,
+				"aria-label": calendarLabel,
+				align: "start",
+				initialFocus: () => popupRef.current?.querySelector("[role=\"grid\"] button[tabindex=\"0\"]") ?? true,
+				...popupProps,
+				className: cn("w-auto max-w-[var(--available-width)] p-0", popupClassName),
+				children: /* @__PURE__ */ jsx(Calendar, {
+					"aria-label": calendarLabel,
+					fixedWeeks: true,
+					numberOfMonths: 2,
+					...calendarProps,
+					mode: "range",
+					value: selectedRange,
+					onValueChange: handleValueChange,
+					disabled,
+					readOnly,
+					locale
+				})
+			})
+		]
+	});
+});
+DateRangePicker.displayName = "DateRangePicker";
+//#endregion
+export { DateRangePicker, dateRangePickerVariants };

package/dist/components/DateRangePicker/index.d.ts

@@ -0,0 +1,2 @@
+import { DateRangePicker, DateRangePickerCalendarProps, DateRangePickerPopupProps, DateRangePickerProps, DateRangePickerSize, DateRangePickerVariant, DateRangePickerVariantsOptions, dateRangePickerVariants } from "./DateRangePicker.js";
+export { DateRangePicker, type DateRangePickerCalendarProps, type DateRangePickerPopupProps, type DateRangePickerProps, type DateRangePickerSize, type DateRangePickerVariant, type DateRangePickerVariantsOptions, dateRangePickerVariants };

package/dist/components/DateRangePicker/index.js

@@ -0,0 +1,2 @@
+import { DateRangePicker, dateRangePickerVariants } from "./DateRangePicker.js";
+export { DateRangePicker, dateRangePickerVariants };

package/dist/components/Dialog/Dialog.d.ts

@@ -0,0 +1,112 @@
+import { ComponentPropsWithoutRef, HTMLAttributes } from "react";
+import { Dialog } from "@base-ui/react/dialog";
+//#region src/components/Dialog/Dialog.d.ts
+type DialogSize = "sm" | "md" | "lg" | "full";
+type DialogScrollBehavior = "inside" | "outside";
+/**
+ * Groups all parts of the dialog and owns its state. Renders no DOM.
+ *
+ * This is Base UI's `Dialog.Root` re-exported unchanged, so every root
+ * feature is available: `open`/`defaultOpen`/`onOpenChange(open, details)`,
+ * `modal` (`true` | `false` | `"trap-focus"`), `disablePointerDismissal`,
+ * `onOpenChangeComplete`, `actionsRef`, and detached triggers via
+ * `Dialog.createHandle()` payloads.
+ */
+declare const Dialog$1: typeof Dialog.Root;
+type DialogProps = Dialog.Root.Props;
+interface DialogTriggerProps extends Omit<ComponentPropsWithoutRef<typeof Dialog.Trigger>, "className"> {
+  className?: string;
+}
+/**
+ * Opens the dialog. Renders an unstyled `<button>` and exposes
+ * `data-popup-open` while its dialog is open — compose it with Button for
+ * the usual look: `<DialogTrigger render={<Button>Open</Button>} />`.
+ */
+declare const DialogTrigger: import("react").ForwardRefExoticComponent<DialogTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+interface DialogCloseProps extends Omit<ComponentPropsWithoutRef<typeof Dialog.Close>, "className"> {
+  className?: string;
+}
+/**
+ * Closes the dialog. Renders an unstyled `<button>` — compose it with
+ * Button for footer actions:
+ * `<DialogClose render={<Button variant="outline">Cancel</Button>} />`.
+ */
+declare const DialogClose: import("react").ForwardRefExoticComponent<DialogCloseProps & import("react").RefAttributes<HTMLButtonElement>>;
+interface DialogPopupVariantsOptions {
+  size?: DialogSize;
+  scrollBehavior?: DialogScrollBehavior;
+  className?: string;
+}
+/**
+ * Class list for the dialog surface itself. Useful when composing Base UI's
+ * dialog parts directly (custom portals, alert dialogs) while keeping the
+ * ArcFusion look.
+ */
+declare function dialogPopupVariants({ size, scrollBehavior, className }?: DialogPopupVariantsOptions): string;
+interface DialogPopupProps extends Omit<ComponentPropsWithoutRef<typeof Dialog.Popup>, "className"> {
+  /**
+   * Width preset: `sm` 384px for confirmations, `md` 512px (default) for
+   * forms, `lg` 672px for rich content, `full` for an edge-to-edge
+   * full-screen dialog. Below the preset the popup shrinks with the
+   * viewport, keeping a 16px margin.
+   */
+  size?: DialogSize;
+  /**
+   * How content taller than the viewport scrolls. `inside` (default) caps
+   * the popup at the viewport and scrolls within it; `outside` lets the
+   * popup grow and scrolls the page-like viewport behind the backdrop
+   * instead. `full` dialogs always scroll inside.
+   */
+  scrollBehavior?: DialogScrollBehavior;
+  /**
+   * Show the corner close button. When disabling it for a required
+   * decision, keep another `DialogClose` action inside the popup — with
+   * `modal` dialogs a visible close control is what lets touch
+   * screen-reader users escape.
+   */
+  showCloseButton?: boolean;
+  /** Accessible name (and tooltip-free label) of the corner close button — localize it alongside your content. */
+  closeLabel?: string;
+  /**
+   * Render the dimming scrim behind the dialog. Disable it together with
+   * `modal={false}` on the root so the rest of the page stays visible and
+   * interactive.
+   */
+  showBackdrop?: boolean;
+  /**
+   * Keep the dialog mounted in the DOM while closed. Off by default —
+   * enable it to preserve heavy content or form state across reopens.
+   */
+  keepMounted?: boolean;
+  /** Element the dialog portals into instead of `<body>` — for scoped stacking contexts, shadow DOM, or inline previews. */
+  container?: ComponentPropsWithoutRef<typeof Dialog.Portal>["container"];
+  className?: string;
+}
+/**
+ * The dialog surface. Bundles Base UI's Portal, Backdrop, Viewport, and
+ * Popup parts into one styled component; `initialFocus`/`finalFocus` and
+ * every other Base UI popup prop pass straight through.
+ */
+declare const DialogPopup: import("react").ForwardRefExoticComponent<DialogPopupProps & import("react").RefAttributes<HTMLDivElement>>;
+interface DialogHeaderProps extends HTMLAttributes<HTMLDivElement> {}
+/** Groups the title and description with standard spacing at the top of the popup. */
+declare const DialogHeader: import("react").ForwardRefExoticComponent<DialogHeaderProps & import("react").RefAttributes<HTMLDivElement>>;
+interface DialogFooterProps extends HTMLAttributes<HTMLDivElement> {}
+/** Action row: right-aligned on desktop, stacked with the primary action on top on small screens. */
+declare const DialogFooter: import("react").ForwardRefExoticComponent<DialogFooterProps & import("react").RefAttributes<HTMLDivElement>>;
+interface DialogTitleProps extends Omit<ComponentPropsWithoutRef<typeof Dialog.Title>, "className"> {
+  className?: string;
+}
+/**
+ * Labels the dialog — Base UI wires it to the popup's `aria-labelledby`.
+ * Renders an `<h2>`; every dialog should have one (or an `aria-label` on
+ * the popup) so the dialog announces meaningfully.
+ */
+declare const DialogTitle: import("react").ForwardRefExoticComponent<DialogTitleProps & import("react").RefAttributes<HTMLHeadingElement>>;
+interface DialogDescriptionProps extends Omit<ComponentPropsWithoutRef<typeof Dialog.Description>, "className"> {
+  className?: string;
+}
+/** Supporting copy announced when the dialog opens — wired to `aria-describedby`. */
+declare const DialogDescription: import("react").ForwardRefExoticComponent<DialogDescriptionProps & import("react").RefAttributes<HTMLParagraphElement>>;
+//#endregion
+export { Dialog$1 as Dialog, DialogClose, DialogCloseProps, DialogDescription, DialogDescriptionProps, DialogFooter, DialogFooterProps, DialogHeader, DialogHeaderProps, DialogPopup, DialogPopupProps, DialogPopupVariantsOptions, DialogProps, DialogScrollBehavior, DialogSize, DialogTitle, DialogTitleProps, DialogTrigger, DialogTriggerProps, dialogPopupVariants };

package/dist/components/Dialog/Dialog.js

@@ -0,0 +1,141 @@
+import { cn } from "../../lib/cn.js";
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Dialog } from "@base-ui/react/dialog";
+//#region src/components/Dialog/Dialog.tsx
+/**
+* Groups all parts of the dialog and owns its state. Renders no DOM.
+*
+* This is Base UI's `Dialog.Root` re-exported unchanged, so every root
+* feature is available: `open`/`defaultOpen`/`onOpenChange(open, details)`,
+* `modal` (`true` | `false` | `"trap-focus"`), `disablePointerDismissal`,
+* `onOpenChangeComplete`, `actionsRef`, and detached triggers via
+* `Dialog.createHandle()` payloads.
+*/
+const Dialog$1 = Dialog.Root;
+/**
+* Opens the dialog. Renders an unstyled `<button>` and exposes
+* `data-popup-open` while its dialog is open — compose it with Button for
+* the usual look: `<DialogTrigger render={<Button>Open</Button>} />`.
+*/
+const DialogTrigger = forwardRef((props, ref) => /* @__PURE__ */ jsx(Dialog.Trigger, {
+	ref,
+	...props
+}));
+DialogTrigger.displayName = "DialogTrigger";
+/**
+* Closes the dialog. Renders an unstyled `<button>` — compose it with
+* Button for footer actions:
+* `<DialogClose render={<Button variant="outline">Cancel</Button>} />`.
+*/
+const DialogClose = forwardRef((props, ref) => /* @__PURE__ */ jsx(Dialog.Close, {
+	ref,
+	...props
+}));
+DialogClose.displayName = "DialogClose";
+const backdropClasses = "fixed inset-0 z-50 min-h-dvh bg-overlay supports-[-webkit-touch-callout:none]:absolute motion-safe:transition-opacity motion-safe:duration-150 motion-safe:ease-out data-starting-style:opacity-0 data-ending-style:opacity-0";
+const viewportBaseClasses = "fixed inset-0 z-50 flex data-closed:pointer-events-none";
+const viewportInsideClasses = "pointer-events-none";
+const viewportSizeClasses = {
+	sm: "p-4",
+	md: "p-4",
+	lg: "p-4",
+	full: "p-0"
+};
+const viewportOutsideClasses = "overflow-y-auto overscroll-contain py-12";
+const popupBaseClasses = "relative m-auto flex w-full flex-col gap-4 rounded-md border border-border bg-background p-6 font-sans text-foreground shadow-lg outline-none pointer-events-auto data-closed:pointer-events-none scale-[calc(1-0.05*var(--nested-dialogs))] after:pointer-events-none after:absolute after:inset-0 after:rounded-md after:bg-slate-950/5 after:opacity-0 data-nested-dialog-open:after:opacity-100 motion-safe:transition-[opacity,scale] motion-safe:duration-150 motion-safe:ease-out motion-safe:after:transition-opacity motion-safe:after:duration-150 data-starting-style:scale-95 data-starting-style:opacity-0 data-ending-style:scale-95 data-ending-style:opacity-0";
+const popupSizeClasses = {
+	sm: "max-w-sm",
+	md: "max-w-lg",
+	lg: "max-w-2xl",
+	full: "h-full max-w-none overflow-y-auto rounded-none border-none shadow-none"
+};
+const popupInsideScrollClasses = "max-h-full overflow-y-auto overscroll-contain";
+const closeClearanceClasses = "[&>[data-dialog-header]]:pr-8 [&>[data-dialog-title]]:pr-8";
+const cornerCloseClasses = "absolute top-4 right-4 inline-flex size-8 shrink-0 cursor-pointer items-center justify-center rounded-md text-muted-foreground transition-colors duration-150 hover:bg-muted hover:text-foreground active:bg-slate-200 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring";
+function XIcon(props) {
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 16 16",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: 1.5,
+		strokeLinecap: "round",
+		"aria-hidden": "true",
+		className: "size-4",
+		...props,
+		children: /* @__PURE__ */ jsx("path", { d: "m3.5 3.5 9 9m-9 0 9-9" })
+	});
+}
+/**
+* Class list for the dialog surface itself. Useful when composing Base UI's
+* dialog parts directly (custom portals, alert dialogs) while keeping the
+* ArcFusion look.
+*/
+function dialogPopupVariants({ size = "md", scrollBehavior = "inside", className } = {}) {
+	return cn(popupBaseClasses, popupSizeClasses[size], scrollBehavior === "inside" && size !== "full" && popupInsideScrollClasses, className);
+}
+/**
+* The dialog surface. Bundles Base UI's Portal, Backdrop, Viewport, and
+* Popup parts into one styled component; `initialFocus`/`finalFocus` and
+* every other Base UI popup prop pass straight through.
+*/
+const DialogPopup = forwardRef(({ size = "md", scrollBehavior = "inside", showCloseButton = true, closeLabel = "Close", showBackdrop = true, keepMounted = false, container, className, children, ...rest }, ref) => {
+	const scroll = size === "full" ? "inside" : scrollBehavior;
+	return /* @__PURE__ */ jsxs(Dialog.Portal, {
+		keepMounted,
+		container,
+		children: [showBackdrop && /* @__PURE__ */ jsx(Dialog.Backdrop, { className: backdropClasses }), /* @__PURE__ */ jsx(Dialog.Viewport, {
+			className: cn(viewportBaseClasses, viewportSizeClasses[size], scroll === "inside" ? viewportInsideClasses : viewportOutsideClasses),
+			children: /* @__PURE__ */ jsxs(Dialog.Popup, {
+				ref,
+				className: cn(dialogPopupVariants({
+					size,
+					scrollBehavior: scroll
+				}), showCloseButton && closeClearanceClasses, className),
+				...rest,
+				children: [children, showCloseButton && /* @__PURE__ */ jsx(Dialog.Close, {
+					"aria-label": closeLabel,
+					className: cornerCloseClasses,
+					children: /* @__PURE__ */ jsx(XIcon, {})
+				})]
+			})
+		})]
+	});
+});
+DialogPopup.displayName = "DialogPopup";
+/** Groups the title and description with standard spacing at the top of the popup. */
+const DialogHeader = forwardRef(({ className, ...rest }, ref) => /* @__PURE__ */ jsx("div", {
+	ref,
+	"data-dialog-header": "",
+	className: cn("flex flex-col gap-1.5", className),
+	...rest
+}));
+DialogHeader.displayName = "DialogHeader";
+/** Action row: right-aligned on desktop, stacked with the primary action on top on small screens. */
+const DialogFooter = forwardRef(({ className, ...rest }, ref) => /* @__PURE__ */ jsx("div", {
+	ref,
+	className: cn("flex flex-col-reverse gap-2 sm:flex-row sm:items-center sm:justify-end", className),
+	...rest
+}));
+DialogFooter.displayName = "DialogFooter";
+/**
+* Labels the dialog — Base UI wires it to the popup's `aria-labelledby`.
+* Renders an `<h2>`; every dialog should have one (or an `aria-label` on
+* the popup) so the dialog announces meaningfully.
+*/
+const DialogTitle = forwardRef(({ className, ...rest }, ref) => /* @__PURE__ */ jsx(Dialog.Title, {
+	ref,
+	"data-dialog-title": "",
+	className: cn("font-heading text-xl font-semibold text-foreground", className),
+	...rest
+}));
+DialogTitle.displayName = "DialogTitle";
+/** Supporting copy announced when the dialog opens — wired to `aria-describedby`. */
+const DialogDescription = forwardRef(({ className, ...rest }, ref) => /* @__PURE__ */ jsx(Dialog.Description, {
+	ref,
+	className: cn("font-sans text-sm text-muted-foreground", className),
+	...rest
+}));
+DialogDescription.displayName = "DialogDescription";
+//#endregion
+export { Dialog$1 as Dialog, DialogClose, DialogDescription, DialogFooter, DialogHeader, DialogPopup, DialogTitle, DialogTrigger, dialogPopupVariants };

package/dist/components/Dialog/index.d.ts

@@ -0,0 +1,2 @@
+import { Dialog, DialogClose, DialogCloseProps, DialogDescription, DialogDescriptionProps, DialogFooter, DialogFooterProps, DialogHeader, DialogHeaderProps, DialogPopup, DialogPopupProps, DialogPopupVariantsOptions, DialogProps, DialogScrollBehavior, DialogSize, DialogTitle, DialogTitleProps, DialogTrigger, DialogTriggerProps, dialogPopupVariants } from "./Dialog.js";
+export { Dialog, DialogClose, type DialogCloseProps, DialogDescription, type DialogDescriptionProps, DialogFooter, type DialogFooterProps, DialogHeader, type DialogHeaderProps, DialogPopup, type DialogPopupProps, type DialogPopupVariantsOptions, type DialogProps, type DialogScrollBehavior, type DialogSize, DialogTitle, type DialogTitleProps, DialogTrigger, type DialogTriggerProps, dialogPopupVariants };

package/dist/components/Dialog/index.js

@@ -0,0 +1,2 @@
+import { Dialog, DialogClose, DialogDescription, DialogFooter, DialogHeader, DialogPopup, DialogTitle, DialogTrigger, dialogPopupVariants } from "./Dialog.js";
+export { Dialog, DialogClose, DialogDescription, DialogFooter, DialogHeader, DialogPopup, DialogTitle, DialogTrigger, dialogPopupVariants };

package/dist/components/Drawer/Drawer.d.ts

@@ -0,0 +1,188 @@
+import { ComponentPropsWithoutRef, HTMLAttributes } from "react";
+import { Drawer } from "@base-ui/react/drawer";
+//#region src/components/Drawer/Drawer.d.ts
+type DrawerSide = "top" | "right" | "bottom" | "left";
+type DrawerSize = "sm" | "md" | "lg" | "full";
+interface DrawerProps extends Drawer.Root.Props {
+  /**
+   * Screen edge the drawer is attached to. `right` (default) suits detail
+   * and settings panels, `left` navigation, `bottom` mobile sheets (snap
+   * points and the drag handle are designed for it), `top` banners. Also
+   * sets the matching swipe-to-dismiss direction.
+   */
+  side?: DrawerSide;
+}
+/**
+ * Groups all parts of the drawer and owns its state. Renders no DOM.
+ *
+ * Wraps Base UI's `Drawer.Root`, deriving `swipeDirection` from `side` (pass
+ * `swipeDirection` yourself only to decouple them). Every other root feature
+ * passes through: `open`/`defaultOpen`/`onOpenChange(open, details)`,
+ * `snapPoints` with `snapPoint`/`defaultSnapPoint`/`onSnapPointChange`,
+ * `modal` (`true` | `false` | `"trap-focus"`), `disablePointerDismissal`,
+ * `onOpenChangeComplete`, `actionsRef`, and detached triggers via
+ * `createDrawerHandle()` payloads.
+ */
+declare function Drawer$1({ side, swipeDirection, ...rest }: DrawerProps): import("react").JSX.Element;
+declare namespace Drawer$1 {
+  var displayName: string;
+}
+interface DrawerTriggerProps extends Omit<ComponentPropsWithoutRef<typeof Drawer.Trigger>, "className"> {
+  className?: string;
+}
+/**
+ * Opens the drawer. Renders an unstyled `<button>` and exposes
+ * `data-popup-open` while its drawer is open — compose it with Button for
+ * the usual look: `<DrawerTrigger render={<Button>Open</Button>} />`.
+ */
+declare const DrawerTrigger: import("react").ForwardRefExoticComponent<DrawerTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+interface DrawerCloseProps extends Omit<ComponentPropsWithoutRef<typeof Drawer.Close>, "className"> {
+  className?: string;
+}
+/**
+ * Closes the drawer. Renders an unstyled `<button>` — compose it with
+ * Button for footer actions:
+ * `<DrawerClose render={<Button variant="outline">Cancel</Button>} />`.
+ */
+declare const DrawerClose: import("react").ForwardRefExoticComponent<DrawerCloseProps & import("react").RefAttributes<HTMLButtonElement>>;
+interface DrawerPopupVariantsOptions {
+  side?: DrawerSide;
+  size?: DrawerSize;
+  className?: string;
+}
+/**
+ * Class list for the drawer surface itself. Useful when composing Base UI's
+ * drawer parts directly (custom viewports, snap-point layouts) while keeping
+ * the ArcFusion look.
+ */
+declare function drawerPopupVariants({ side, size, className }?: DrawerPopupVariantsOptions): string;
+interface DrawerPopupProps extends Omit<ComponentPropsWithoutRef<typeof Drawer.Popup>, "className"> {
+  /**
+   * Amount of screen the drawer takes on its `side`'s axis. Side panels:
+   * `sm` 320px, `md` 384px (default), `lg` 512px, `full` edge-to-edge — all
+   * but `full` keep a 48px page peek on narrow screens. Sheets (`top`/
+   * `bottom`) size to their content up to `sm` 40dvh, `md` 75dvh, `lg`
+   * 90dvh, or a `full` viewport takeover.
+   */
+  size?: DrawerSize;
+  /**
+   * Show the corner close button. When disabling it for a required
+   * decision, keep another `DrawerClose` action inside the popup — swiping
+   * is not discoverable or possible for everyone, and with `modal` drawers
+   * a visible close control is what lets touch screen-reader users escape.
+   */
+  showCloseButton?: boolean;
+  /** Accessible name (and tooltip-free label) of the corner close button — localize it alongside your content. */
+  closeLabel?: string;
+  /**
+   * Show the drag-handle affordance on the swipe edge. Recommended for
+   * `bottom` sheets on touch surfaces; it is decorative (the whole drawer
+   * responds to swipes) and hidden from assistive technology.
+   */
+  showHandle?: boolean;
+  /**
+   * Render the dimming scrim behind the drawer. Disable it together with
+   * `modal={false}` on the root so the rest of the page stays visible and
+   * interactive.
+   */
+  showBackdrop?: boolean;
+  /**
+   * Keep the drawer mounted in the DOM while closed. Off by default —
+   * enable it to preserve heavy content or form state across reopens.
+   */
+  keepMounted?: boolean;
+  /**
+   * Enable Base UI's keyboard-aware focus and scroll handling — turn it on
+   * for bottom sheets with form fields so software keyboards don't cover
+   * the focused input. No effect on devices without a virtual keyboard.
+   */
+  virtualKeyboard?: boolean;
+  /** Element the drawer portals into instead of `<body>` — for scoped stacking contexts, shadow DOM, or inline previews. */
+  container?: ComponentPropsWithoutRef<typeof Drawer.Portal>["container"];
+  className?: string;
+}
+/**
+ * The drawer surface. Bundles Base UI's Portal, Backdrop, Viewport, Popup,
+ * and Content parts into one styled component positioned on the root's
+ * `side`; `initialFocus`/`finalFocus` and every other Base UI popup prop
+ * pass straight through. Children render inside the scrollable content
+ * region while the handle and corner close stay pinned to the frame.
+ */
+declare const DrawerPopup: import("react").ForwardRefExoticComponent<DrawerPopupProps & import("react").RefAttributes<HTMLDivElement>>;
+interface DrawerHeaderProps extends HTMLAttributes<HTMLDivElement> {}
+/** Groups the title and description with standard spacing at the top of the drawer. */
+declare const DrawerHeader: import("react").ForwardRefExoticComponent<DrawerHeaderProps & import("react").RefAttributes<HTMLDivElement>>;
+interface DrawerFooterProps extends HTMLAttributes<HTMLDivElement> {}
+/**
+ * Action row: right-aligned on desktop, stacked with the primary action on
+ * top on small screens. As a direct child of the popup it pins to the
+ * drawer's bottom edge when the content is shorter than a full-height panel.
+ */
+declare const DrawerFooter: import("react").ForwardRefExoticComponent<DrawerFooterProps & import("react").RefAttributes<HTMLDivElement>>;
+interface DrawerTitleProps extends Omit<ComponentPropsWithoutRef<typeof Drawer.Title>, "className"> {
+  className?: string;
+}
+/**
+ * Labels the drawer — Base UI wires it to the popup's `aria-labelledby`.
+ * Renders an `<h2>`; every drawer should have one (or an `aria-label` on
+ * the popup) so the panel announces meaningfully.
+ */
+declare const DrawerTitle: import("react").ForwardRefExoticComponent<DrawerTitleProps & import("react").RefAttributes<HTMLHeadingElement>>;
+interface DrawerDescriptionProps extends Omit<ComponentPropsWithoutRef<typeof Drawer.Description>, "className"> {
+  className?: string;
+}
+/** Supporting copy announced when the drawer opens — wired to `aria-describedby`. */
+declare const DrawerDescription: import("react").ForwardRefExoticComponent<DrawerDescriptionProps & import("react").RefAttributes<HTMLParagraphElement>>;
+interface DrawerSwipeAreaProps extends Omit<ComponentPropsWithoutRef<typeof Drawer.SwipeArea>, "className"> {
+  className?: string;
+}
+/**
+ * Invisible strip along the drawer's edge that opens it with a swipe-in
+ * gesture (mobile-navigation pattern). Positions itself on the root's
+ * `side` with a 24px hit area — pass `className` to widen it or add a
+ * visible affordance as children. Keep a regular `DrawerTrigger` too:
+ * edge swipes are invisible to most users and unavailable to keyboards.
+ */
+declare const DrawerSwipeArea: import("react").ForwardRefExoticComponent<DrawerSwipeAreaProps & import("react").RefAttributes<HTMLDivElement>>;
+/**
+ * Shares drawer state across the app shell so `DrawerIndent` /
+ * `DrawerIndentBackground` can react to any drawer opening. Renders no DOM —
+ * wrap it around the app root only when using the indent effect.
+ */
+declare const DrawerProvider: typeof Drawer.Provider;
+/**
+ * Keyboard-aware focus and scroll handling for bottom sheets that contain
+ * form fields. Prefer the `virtualKeyboard` prop on `DrawerPopup`; this raw
+ * part exists for custom compositions and MUST render inside a `Drawer`
+ * (it reads the root's context), wrapping the drawer's parts. Exposes
+ * `--drawer-keyboard-inset` on the viewport. Renders no DOM.
+ */
+declare const DrawerVirtualKeyboardProvider: typeof Drawer.VirtualKeyboardProvider;
+/**
+ * Creates a handle that connects detached `DrawerTrigger`s (or imperative
+ * `open`/`close` calls) to a `Drawer` rendered elsewhere — e.g. opening a
+ * drawer from a menu item. Pass it to both as the `handle` prop.
+ */
+declare const createDrawerHandle: typeof Drawer.createHandle;
+interface DrawerIndentProps extends Omit<ComponentPropsWithoutRef<typeof Drawer.Indent>, "className"> {
+  className?: string;
+}
+/**
+ * Wrapper for the app's main UI inside a `DrawerProvider`; gets
+ * `data-active` while any drawer is open. Unstyled on purpose — the app
+ * shell owns the effect, e.g.
+ * `className="motion-safe:transition-transform data-active:scale-[0.98]"`
+ * for the iOS-style recede.
+ */
+declare const DrawerIndent: import("react").ForwardRefExoticComponent<DrawerIndentProps & import("react").RefAttributes<HTMLDivElement>>;
+interface DrawerIndentBackgroundProps extends Omit<ComponentPropsWithoutRef<typeof Drawer.IndentBackground>, "className"> {
+  className?: string;
+}
+/**
+ * Backdrop layer rendered behind `DrawerIndent` (place it just before) so
+ * the receded app has something to sit on — style it with `data-active`
+ * like the indent itself. Unstyled on purpose.
+ */
+declare const DrawerIndentBackground: import("react").ForwardRefExoticComponent<DrawerIndentBackgroundProps & import("react").RefAttributes<HTMLDivElement>>;
+//#endregion
+export { Drawer$1 as Drawer, DrawerClose, DrawerCloseProps, DrawerDescription, DrawerDescriptionProps, DrawerFooter, DrawerFooterProps, DrawerHeader, DrawerHeaderProps, DrawerIndent, DrawerIndentBackground, DrawerIndentBackgroundProps, DrawerIndentProps, DrawerPopup, DrawerPopupProps, DrawerPopupVariantsOptions, DrawerProps, DrawerProvider, DrawerSide, DrawerSize, DrawerSwipeArea, DrawerSwipeAreaProps, DrawerTitle, DrawerTitleProps, DrawerTrigger, DrawerTriggerProps, DrawerVirtualKeyboardProvider, createDrawerHandle, drawerPopupVariants };