@vjdesigns/vjdesigns-ui 0.0.0-stage → 2.0.0

package/dist/components/overlays/CommandPalette/commandPaletteUtils.mjs

@@ -0,0 +1,147 @@
+import { hotkeyToAria as e, isTypingTarget as t, matchesHotkey as n, parseHotkey as r } from "../../../utils/hotkeys.mjs";
+//#region src/components/overlays/CommandPalette/commandPaletteUtils.ts
+var i = /[̀-ͯ]/g;
+function a(e) {
+	let t = "", n = [];
+	for (let r = 0; r < e.length; r += 1) {
+		let a = e[r].normalize("NFD").replace(i, "").toLowerCase();
+		for (let e = 0; e < a.length; e += 1) t += a[e], n.push(r);
+	}
+	return {
+		text: t,
+		map: n
+	};
+}
+function o(e) {
+	return a(e.trim()).text.replace(/\s+/g, " ");
+}
+var s = /[\p{L}\p{N}]/u;
+function c(e, t) {
+	return t === 0 || !s.test(e[t - 1]) && s.test(e[t]);
+}
+function l(e, t) {
+	return Array.from({ length: t }, (t, n) => e + n);
+}
+function u(e, t) {
+	let n = e.indexOf(t);
+	for (; n !== -1;) {
+		if (c(e, n)) return n;
+		n = e.indexOf(t, n + 1);
+	}
+	return -1;
+}
+function d(e, t, n) {
+	let r = [], i = 0;
+	for (let a of t) {
+		let t = e.indexOf(a, i);
+		if (t === -1) return null;
+		if (n) {
+			let n = t;
+			for (; n !== -1 && !c(e, n);) n = e.indexOf(a, n + 1);
+			let i = r.length > 0 && t === r[r.length - 1] + 1;
+			n !== -1 && !i && (t = n);
+		}
+		r.push(t), i = t + 1;
+	}
+	return r;
+}
+function f(e, t) {
+	if (!t) return {
+		score: 1,
+		indexes: []
+	};
+	let { text: n, map: r } = a(e), i = (e) => Array.from(new Set(e.map((e) => r[e])));
+	if (n === t) return {
+		score: 1,
+		indexes: i(l(0, t.length))
+	};
+	if (n.startsWith(t)) return {
+		score: .9,
+		indexes: i(l(0, t.length))
+	};
+	let o = u(n, t);
+	if (o !== -1) return {
+		score: .8,
+		indexes: i(l(o, t.length))
+	};
+	let s = n.indexOf(t);
+	if (s !== -1) return {
+		score: .7,
+		indexes: i(l(s, t.length))
+	};
+	let f = t.split(" ").filter(Boolean);
+	if (f.length > 1) {
+		let e = [], t = 0;
+		if (f.every((r) => {
+			let i = u(n, r), a = i === -1 ? n.indexOf(r) : i;
+			return a !== -1 && (i !== -1 && (t += 1), e.push(...l(a, r.length)), !0);
+		})) return {
+			score: .55 + .1 * (t / f.length),
+			indexes: i(e)
+		};
+	}
+	let p = t.replace(/ /g, ""), m = d(n, p, !0) ?? d(n, p, !1);
+	if (!m) return null;
+	let h = 0, g = 0;
+	return m.forEach((e, t) => {
+		t > 0 && (h += e - m[t - 1] - 1), c(n, e) && (g += 1);
+	}), {
+		score: .1 + .25 * (g / m.length) + .15 / (1 + h),
+		indexes: i(m)
+	};
+}
+function p(e, t, n = []) {
+	let r = o(t);
+	if (!r) return 1;
+	let i = f(e, r)?.score ?? 0;
+	for (let e of n) {
+		let t = (f(e, r)?.score ?? 0) * .95;
+		t > i && (i = t);
+	}
+	return i;
+}
+var m = /* @__PURE__ */ new WeakMap(), h = 0;
+function g(e) {
+	let t = m.get(e);
+	return t === void 0 && (t = h++, m.set(e, t)), t;
+}
+function _(e) {
+	return e.hasAttribute("data-command-heading") ? -Infinity : Number(e.dataset?.order ?? 0);
+}
+function v(e, t) {
+	return _(e) - _(t) || g(e) - g(t);
+}
+function y(e) {
+	let t = Array.from(e.children);
+	t.forEach(g), [...t].sort(v).forEach((t, n) => {
+		e.children[n] !== t && e.insertBefore(t, e.children[n] ?? null);
+	});
+}
+function b(e) {
+	if (e) {
+		y(e);
+		for (let t of Array.from(e.children)) t.getAttribute("role") === "group" && y(t);
+	}
+}
+function x(e) {
+	return Array.from(e.children).filter((e) => e instanceof HTMLElement && !e.hidden);
+}
+function S(e) {
+	if (!e) return [];
+	let t = [], n = (e) => {
+		e.forEach((t, n) => {
+			t.setAttribute("aria-posinset", String(n + 1)), t.setAttribute("aria-setsize", String(e.length));
+		});
+	}, r = [];
+	for (let i of x(e)) {
+		let e = i.getAttribute("role");
+		if (e === "option") r.push(i), t.push(i);
+		else if (e === "group") {
+			let e = x(i).filter((e) => e.getAttribute("role") === "option");
+			n(e), t.push(...e);
+		}
+	}
+	return n(r), t;
+}
+//#endregion
+export { p as defaultCommandScore, S as getOrderedOptions, e as hotkeyToAria, t as isTypingTarget, f as matchText, n as matchesHotkey, o as normalizeQuery, a as normalizeText, r as parseHotkey, b as syncDomOrder };

package/dist/components/overlays/CommandPalette/index.d.ts

@@ -0,0 +1 @@
+export * from './CommandPalette';

package/dist/components/overlays/Drawer/Drawer.cjs.js

@@ -0,0 +1 @@
+const e=require("../../../hooks/useControllableState.cjs.js"),t=require("../../../hooks/useMergedRef.cjs.js"),n=require("../../primitives/Button/Button.cjs.js"),r=require("./DrawerContext.cjs.js"),i=require("./DrawerContent.cjs.js"),a=require("./DrawerParts.cjs.js");let o=require("react"),s=require("react/jsx-runtime");var c=({children:t,open:n,defaultOpen:i=!1,onOpenChange:a,side:c=`end`,size:l=`md`,modal:u=!0,closeOnOverlayPress:d=!0,closeOnEscape:f=!0,swipeToClose:p=!0,initialFocusRef:m,finalFocusRef:h})=>{let[g,_]=e.useControllableState({value:n,defaultValue:i,onChange:a}),v=(0,o.useId)(),y=(0,o.useRef)(null),[b,x]=(0,o.useState)(0),[S,C]=(0,o.useState)(0),[w,T]=(0,o.useState)(null),E=(0,o.useCallback)(()=>(x(e=>e+1),()=>x(e=>e-1)),[]),D=(0,o.useCallback)(()=>(C(e=>e+1),()=>C(e=>e-1)),[]),O=(0,o.useCallback)(e=>_(e),[_]),k=(0,o.useMemo)(()=>({open:g,setOpen:O,side:c,size:l,modal:u,closeOnOverlayPress:d,closeOnEscape:f,swipeToClose:p,initialFocusRef:m,finalFocusRef:h,triggerRef:y,contentId:`${v}-content`,titleId:`${v}-title`,descriptionId:`${v}-description`,hasTitle:b>0,hasDescription:S>0,registerTitle:E,registerDescription:D,mountedContentId:w,setMountedContentId:T}),[g,O,c,l,u,d,f,p,m,h,v,b,S,E,D,w]);return(0,s.jsx)(r.DrawerContext.Provider,{value:k,children:t})};c.displayName=`Drawer`;var l=({onClick:e,ref:i,asChild:a=!1,children:c,...l})=>{let{open:u,setOpen:d,triggerRef:f,mountedContentId:p}=r.useDrawerContext(`Drawer.Trigger`),m=a&&(0,o.isValidElement)(c)?c:null,h=t.useMergedRef(f,i,m?.props.ref);return m?(0,o.cloneElement)(m,{"aria-haspopup":`dialog`,"aria-expanded":u,"aria-controls":p??void 0,ref:h,onClick:t=>{m.props.onClick?.(t),e?.(t),t.defaultPrevented||d(!u)}}):(0,s.jsx)(n.Button,{"aria-haspopup":`dialog`,"aria-expanded":u,"aria-controls":p??void 0,...l,ref:h,onClick:t=>{e?.(t),t.defaultPrevented||d(!u)},children:c})};l.displayName=`Drawer.Trigger`;var u=({onClick:e,variant:t=`outline`,tone:i=`neutral`,...a})=>{let{setOpen:o}=r.useDrawerContext(`Drawer.Close`);return(0,s.jsx)(n.Button,{variant:t,tone:i,...a,onClick:t=>{e?.(t),t.defaultPrevented||o(!1)}})};u.displayName=`Drawer.Close`;var d=Object.assign(c,{Trigger:l,Content:i.DrawerContent,Header:a.DrawerHeader,Title:a.DrawerTitle,Description:a.DrawerDescription,Body:a.DrawerBody,Footer:a.DrawerFooter,Close:u});exports.Drawer=d,exports.DrawerBody=a.DrawerBody,exports.DrawerClose=u,exports.DrawerContent=i.DrawerContent,exports.DrawerDescription=a.DrawerDescription,exports.DrawerFooter=a.DrawerFooter,exports.DrawerHeader=a.DrawerHeader,exports.DrawerTitle=a.DrawerTitle,exports.DrawerTrigger=l;

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

@@ -0,0 +1,148 @@
+import { ReactNode, RefObject } from 'react';
+import { ButtonProps } from '../../primitives/Button';
+import { DrawerSide, DrawerSize } from './DrawerContext';
+import { DrawerContent } from './DrawerContent';
+import { DrawerBody, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle } from './DrawerParts';
+export type { DrawerSide, DrawerSize, DrawerSizePreset } from './DrawerContext';
+export type { DrawerContentProps } from './DrawerContent';
+export type { DrawerBodyProps, DrawerDescriptionProps, DrawerFooterProps, DrawerHeaderProps, DrawerTitleElement, DrawerTitleProps, } from './DrawerParts';
+export { DrawerBody, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle };
+export interface DrawerProps {
+    /** `Drawer.Trigger` and `Drawer.Content`, plus anything else that should read the drawer's state. */
+    children?: ReactNode;
+    /** Controlled open state. */
+    open?: boolean;
+    /** Initial open state when uncontrolled. @default false */
+    defaultOpen?: boolean;
+    /** Called with the next open state whenever the drawer opens or closes. */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Edge the drawer slides in from. `start` and `end` are logical: in a
+     * right-to-left layout `end` is the left edge. `bottom` is a mobile-style
+     * bottom sheet with a grab handle. @default "end"
+     */
+    side?: DrawerSide;
+    /**
+     * Width (`start`/`end`) or height (`top`/`bottom`). Presets: `sm` 20rem,
+     * `md` 30rem, `lg` 40rem wide (or 33%, 50%, 75% of the viewport tall), and
+     * `full`. Pass a CSS length (`"28rem"`) or a number of px for a custom size.
+     * Never wider than the viewport minus a gutter, except `full`. @default "md"
+     */
+    size?: DrawerSize;
+    /**
+     * `true` (default): a modal dialog. A backdrop covers the page, the page is
+     * `inert` and can't scroll, and focus is trapped in the drawer.
+     *
+     * `false`: a non-modal dialog (a side panel). No backdrop, no focus trap,
+     * the page stays interactive and scrollable. Focus moves into the panel
+     * when it opens; Escape closes it only while focus is inside it. Pass
+     * `role="complementary"` on `Drawer.Content` instead if the panel is
+     * persistent supporting content rather than a task.
+     * @default true
+     */
+    modal?: boolean;
+    /** Close when the backdrop is pressed (modal drawers only). @default true */
+    closeOnOverlayPress?: boolean;
+    /** Close on Escape. Only the topmost open drawer responds. @default true */
+    closeOnEscape?: boolean;
+    /**
+     * Bottom sheets only: let users swipe the grab handle down to close. It's a
+     * shortcut; the Close button stays, so dragging is never required. @default true
+     */
+    swipeToClose?: boolean;
+    /** Element to focus when the drawer opens. Defaults to the first focusable element (usually the close button). */
+    initialFocusRef?: RefObject<HTMLElement | null>;
+    /** Element to focus when the drawer closes. Defaults to `Drawer.Trigger`, or whatever was focused when it opened. */
+    finalFocusRef?: RefObject<HTMLElement | null>;
+}
+/** `Button` props (button form, not link). */
+export type DrawerTriggerProps = Extract<ButtonProps, {
+    href?: undefined;
+}> & {
+    /**
+     * Clone the single child element instead of wrapping `children` in a
+     * `Button`. Use it for an icon-only trigger:
+     * `<Drawer.Trigger asChild><IconButton aria-label="Menu">...</IconButton></Drawer.Trigger>`.
+     * The child must be a button that accepts `ref`, `onClick`, and `aria-*`. @default false
+     */
+    asChild?: boolean;
+};
+/**
+ * A `Button` (or, with `asChild`, your own button such as an `IconButton`)
+ * that toggles the drawer. Gets `aria-haspopup="dialog"`, `aria-expanded`,
+ * and `aria-controls`, and receives focus back when the drawer closes.
+ */
+export declare const DrawerTrigger: {
+    ({ onClick, ref, asChild, children, ...rest }: DrawerTriggerProps): import("react").JSX.Element;
+    displayName: string;
+};
+/** `Button` props (button form, not link). */
+export type DrawerCloseProps = Extract<ButtonProps, {
+    href?: undefined;
+}>;
+/**
+ * A `Button` that closes the drawer, e.g. "Cancel" or "Done" in the footer.
+ * Call `event.preventDefault()` in `onClick` to keep the drawer open.
+ * Defaults to `variant="outline"` and `tone="neutral"`.
+ */
+export declare const DrawerClose: {
+    ({ onClick, variant, tone, ...rest }: DrawerCloseProps): import("react").JSX.Element;
+    displayName: string;
+};
+/**
+ * A panel that slides in from an edge of the screen: navigation, filters,
+ * details, or a mobile bottom sheet. Follows the WAI-ARIA APG modal dialog
+ * pattern (or a non-modal dialog with `modal={false}`).
+ *
+ * ```tsx
+ * <Drawer>
+ *   <Drawer.Trigger>Filters</Drawer.Trigger>
+ *   <Drawer.Content>
+ *     <Drawer.Header>
+ *       <Drawer.Title>Filters</Drawer.Title>
+ *     </Drawer.Header>
+ *     <Drawer.Body>...</Drawer.Body>
+ *     <Drawer.Footer>
+ *       <Drawer.Close>Cancel</Drawer.Close>
+ *     </Drawer.Footer>
+ *   </Drawer.Content>
+ * </Drawer>
+ * ```
+ */
+export declare const Drawer: {
+    ({ children, open: openProp, defaultOpen, onOpenChange, side, size, modal, closeOnOverlayPress, closeOnEscape, swipeToClose, initialFocusRef, finalFocusRef, }: DrawerProps): import("react").JSX.Element;
+    displayName: string;
+} & {
+    Trigger: {
+        ({ onClick, ref, asChild, children, ...rest }: DrawerTriggerProps): import("react").JSX.Element;
+        displayName: string;
+    };
+    Content: {
+        ({ children, hideCloseButton, closeLabel: closeLabelProp, overlayClassName, container, className, style, ref, id: idProp, onAnimationEnd, dir: dirProp, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, ...rest }: import('./DrawerContent').DrawerContentProps): import("react").JSX.Element | null;
+        displayName: string;
+    };
+    Header: {
+        ({ className, children, ...rest }: import('./DrawerParts').DrawerHeaderProps): import("react").JSX.Element;
+        displayName: string;
+    };
+    Title: {
+        ({ as: Element, className, children, ...rest }: import('./DrawerParts').DrawerTitleProps): import("react").JSX.Element;
+        displayName: string;
+    };
+    Description: {
+        ({ className, children, ...rest }: import('./DrawerParts').DrawerDescriptionProps): import("react").JSX.Element;
+        displayName: string;
+    };
+    Body: {
+        ({ className, children, flush, ref, ...rest }: import('./DrawerParts').DrawerBodyProps): import("react").JSX.Element;
+        displayName: string;
+    };
+    Footer: {
+        ({ className, children, ...rest }: import('./DrawerParts').DrawerFooterProps): import("react").JSX.Element;
+        displayName: string;
+    };
+    Close: {
+        ({ onClick, variant, tone, ...rest }: DrawerCloseProps): import("react").JSX.Element;
+        displayName: string;
+    };
+};

package/dist/components/overlays/Drawer/Drawer.mjs

@@ -0,0 +1,106 @@
+import { useControllableState as e } from "../../../hooks/useControllableState.mjs";
+import { useMergedRef as t } from "../../../hooks/useMergedRef.mjs";
+import { Button as n } from "../../primitives/Button/Button.mjs";
+import { DrawerContext as r, useDrawerContext as i } from "./DrawerContext.mjs";
+import { DrawerContent as a } from "./DrawerContent.mjs";
+import { DrawerBody as o, DrawerDescription as s, DrawerFooter as c, DrawerHeader as l, DrawerTitle as u } from "./DrawerParts.mjs";
+import { cloneElement as d, isValidElement as f, useCallback as p, useId as m, useMemo as h, useRef as g, useState as _ } from "react";
+import { jsx as v } from "react/jsx-runtime";
+//#region src/components/overlays/Drawer/Drawer.tsx
+var y = ({ children: t, open: n, defaultOpen: i = !1, onOpenChange: a, side: o = "end", size: s = "md", modal: c = !0, closeOnOverlayPress: l = !0, closeOnEscape: u = !0, swipeToClose: d = !0, initialFocusRef: f, finalFocusRef: y }) => {
+	let [b, x] = e({
+		value: n,
+		defaultValue: i,
+		onChange: a
+	}), S = m(), C = g(null), [w, T] = _(0), [E, D] = _(0), [O, k] = _(null), A = p(() => (T((e) => e + 1), () => T((e) => e - 1)), []), j = p(() => (D((e) => e + 1), () => D((e) => e - 1)), []), M = p((e) => x(e), [x]), N = h(() => ({
+		open: b,
+		setOpen: M,
+		side: o,
+		size: s,
+		modal: c,
+		closeOnOverlayPress: l,
+		closeOnEscape: u,
+		swipeToClose: d,
+		initialFocusRef: f,
+		finalFocusRef: y,
+		triggerRef: C,
+		contentId: `${S}-content`,
+		titleId: `${S}-title`,
+		descriptionId: `${S}-description`,
+		hasTitle: w > 0,
+		hasDescription: E > 0,
+		registerTitle: A,
+		registerDescription: j,
+		mountedContentId: O,
+		setMountedContentId: k
+	}), [
+		b,
+		M,
+		o,
+		s,
+		c,
+		l,
+		u,
+		d,
+		f,
+		y,
+		S,
+		w,
+		E,
+		A,
+		j,
+		O
+	]);
+	return /* @__PURE__ */ v(r.Provider, {
+		value: N,
+		children: t
+	});
+};
+y.displayName = "Drawer";
+var b = ({ onClick: e, ref: r, asChild: a = !1, children: o, ...s }) => {
+	let { open: c, setOpen: l, triggerRef: u, mountedContentId: p } = i("Drawer.Trigger"), m = a && f(o) ? o : null, h = t(u, r, m?.props.ref);
+	return m ? d(m, {
+		"aria-haspopup": "dialog",
+		"aria-expanded": c,
+		"aria-controls": p ?? void 0,
+		ref: h,
+		onClick: (t) => {
+			m.props.onClick?.(t), e?.(t), t.defaultPrevented || l(!c);
+		}
+	}) : /* @__PURE__ */ v(n, {
+		"aria-haspopup": "dialog",
+		"aria-expanded": c,
+		"aria-controls": p ?? void 0,
+		...s,
+		ref: h,
+		onClick: (t) => {
+			e?.(t), t.defaultPrevented || l(!c);
+		},
+		children: o
+	});
+};
+b.displayName = "Drawer.Trigger";
+var x = ({ onClick: e, variant: t = "outline", tone: r = "neutral", ...a }) => {
+	let { setOpen: o } = i("Drawer.Close");
+	return /* @__PURE__ */ v(n, {
+		variant: t,
+		tone: r,
+		...a,
+		onClick: (t) => {
+			e?.(t), t.defaultPrevented || o(!1);
+		}
+	});
+};
+x.displayName = "Drawer.Close";
+var S = Object.assign(y, {
+	Trigger: b,
+	Content: a,
+	Header: l,
+	Title: u,
+	Description: s,
+	Body: o,
+	Footer: c,
+	Close: x
+});
+//#endregion
+export { S as Drawer, o as DrawerBody, x as DrawerClose, a as DrawerContent, s as DrawerDescription, c as DrawerFooter, l as DrawerHeader, u as DrawerTitle, b as DrawerTrigger };

package/dist/components/overlays/Drawer/Drawer.module.css.cjs.js

@@ -0,0 +1 @@
+var e=`_root_txjis_17`,t=`_rootModal_txjis_43`,n=`_rootNonModal_txjis_53`,r=`_panel_txjis_63`,i=`_overlay_txjis_75`,a=`_fadeIn_txjis_1`,o=`_fadeOut_txjis_1`,s=`_panelIn_txjis_1`,c=`_panelOut_txjis_1`,l=`_sideEnd_txjis_229`,u=`_sideStart_txjis_231`,d=`_sideTop_txjis_295`,f=`_sideBottom_txjis_297`,p=`_sizeSm_txjis_365`,m=`_sizeMd_txjis_375`,h=`_sizeLg_txjis_385`,g=`_sizeFull_txjis_425`,_=`_sizeCustom_txjis_439`,v=`_handleArea_txjis_451`,y=`_handleDraggable_txjis_465`,b=`_handle_txjis_451`,x=`_closeButton_txjis_503`,S=`_header_txjis_529`,C=`_hasClose_txjis_545`,w=`_title_txjis_563`,T=`_description_txjis_583`,E=`_body_txjis_601`,D=`_flush_txjis_635`,O=`_footer_txjis_657`,k={root:e,rootModal:t,rootNonModal:n,panel:r,overlay:i,fadeIn:a,fadeOut:o,panelIn:s,panelOut:c,sideEnd:l,sideStart:u,sideTop:d,sideBottom:f,sizeSm:p,sizeMd:m,sizeLg:h,sizeFull:g,sizeCustom:_,handleArea:v,handleDraggable:y,handle:b,closeButton:x,header:S,hasClose:C,title:w,description:T,body:E,flush:D,footer:O};exports.body=E,exports.closeButton=x,exports.default=k,exports.description=T,exports.fadeIn=a,exports.fadeOut=o,exports.flush=D,exports.footer=O,exports.handle=b,exports.handleArea=v,exports.handleDraggable=y,exports.hasClose=C,exports.header=S,exports.overlay=i,exports.panel=r,exports.panelIn=s,exports.panelOut=c,exports.root=e,exports.rootModal=t,exports.rootNonModal=n,exports.sideBottom=f,exports.sideEnd=l,exports.sideStart=u,exports.sideTop=d,exports.sizeCustom=_,exports.sizeFull=g,exports.sizeLg=h,exports.sizeMd=m,exports.sizeSm=p,exports.title=w;

package/dist/components/overlays/Drawer/Drawer.module.css.mjs

@@ -0,0 +1,34 @@
+//#region src/components/overlays/Drawer/Drawer.module.css
+var e = "_root_txjis_17", t = "_rootModal_txjis_43", n = "_rootNonModal_txjis_53", r = "_panel_txjis_63", i = "_overlay_txjis_75", a = "_fadeIn_txjis_1", o = "_fadeOut_txjis_1", s = "_panelIn_txjis_1", c = "_panelOut_txjis_1", l = "_sideEnd_txjis_229", u = "_sideStart_txjis_231", d = "_sideTop_txjis_295", f = "_sideBottom_txjis_297", p = "_sizeSm_txjis_365", m = "_sizeMd_txjis_375", h = "_sizeLg_txjis_385", g = "_sizeFull_txjis_425", _ = "_sizeCustom_txjis_439", v = "_handleArea_txjis_451", y = "_handleDraggable_txjis_465", b = "_handle_txjis_451", x = "_closeButton_txjis_503", S = "_header_txjis_529", C = "_hasClose_txjis_545", w = "_title_txjis_563", T = "_description_txjis_583", E = "_body_txjis_601", D = "_flush_txjis_635", O = "_footer_txjis_657", k = {
+	root: e,
+	rootModal: t,
+	rootNonModal: n,
+	panel: r,
+	overlay: i,
+	fadeIn: a,
+	fadeOut: o,
+	panelIn: s,
+	panelOut: c,
+	sideEnd: l,
+	sideStart: u,
+	sideTop: d,
+	sideBottom: f,
+	sizeSm: p,
+	sizeMd: m,
+	sizeLg: h,
+	sizeFull: g,
+	sizeCustom: _,
+	handleArea: v,
+	handleDraggable: y,
+	handle: b,
+	closeButton: x,
+	header: S,
+	hasClose: C,
+	title: w,
+	description: T,
+	body: E,
+	flush: D,
+	footer: O
+};
+//#endregion
+export { E as body, x as closeButton, k as default, T as description, a as fadeIn, o as fadeOut, D as flush, O as footer, b as handle, v as handleArea, y as handleDraggable, C as hasClose, S as header, i as overlay, r as panel, s as panelIn, c as panelOut, e as root, t as rootModal, n as rootNonModal, f as sideBottom, l as sideEnd, u as sideStart, d as sideTop, _ as sizeCustom, g as sizeFull, h as sizeLg, m as sizeMd, p as sizeSm, w as title };

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

@@ -0,0 +1,16 @@
+import { CSSProperties, ReactNode } from 'react';
+import { DrawerProps } from './Drawer';
+export declare const Label: ({ children }: {
+    children: ReactNode;
+}) => import("react").JSX.Element;
+export declare const row: CSSProperties;
+export declare const paragraph: CSSProperties;
+/** A few paragraphs of realistic copy. `count` repeats the list. */
+export declare const PlaybookCopy: ({ count }: {
+    count?: number;
+}) => import("react").JSX.Element;
+/** A complete drawer with a trigger, used by the side-by-side stories. */
+export declare const DemoDrawer: ({ label, title, ...props }: Omit<DrawerProps, "children"> & {
+    label: string;
+    title: string;
+}) => import("react").JSX.Element;

package/dist/components/overlays/Drawer/DrawerContent.cjs.js

@@ -0,0 +1 @@
+const e=require("../../../hooks/useOverlayLayer.cjs.js"),t=require("../../../hooks/useDismiss.cjs.js"),n=require("../../../hooks/useFocusTrap.cjs.js"),r=require("../../utilities/LocaleProvider/LocaleProvider.cjs.js"),i=require("../../../hooks/useInertOutside.cjs.js"),ee=require("../../../hooks/useScrollLock.cjs.js"),te=require("../../../hooks/useMergedRef.cjs.js"),a=require("../../../utils/cx.cjs.js"),ne=require("../../utilities/Portal/Portal.cjs.js"),re=require("../../primitives/Button/Button.cjs.js"),ie=require("../../primitives/Icon/icons.cjs.js"),ae=require("./DrawerContext.cjs.js"),oe=require("./internal.cjs.js"),o=require("./useDragToClose.cjs.js"),s=require("./Drawer.module.css.cjs.js");let c=require("react"),l=require("react/jsx-runtime");var se={start:s.default.sideStart,end:s.default.sideEnd,top:s.default.sideTop,bottom:s.default.sideBottom},ce={sm:s.default.sizeSm,md:s.default.sizeMd,lg:s.default.sizeLg,full:s.default.sizeFull},u=e=>e===`sm`||e===`md`||e===`lg`||e===`full`;function le(e){return Math.max(0,...e.split(`,`).map(e=>{let t=e.trim(),n=parseFloat(t);return Number.isNaN(n)?0:t.endsWith(`ms`)?n:n*1e3}))}var d=({children:d,hideCloseButton:f=!1,closeLabel:ue,overlayClassName:de,container:fe,className:p,style:m,ref:h,id:g,onAnimationEnd:_,dir:v,"aria-label":y,"aria-labelledby":b,"aria-describedby":pe,...me})=>{let he=r.useMessages(),ge=ue??he.drawer.close,{open:x,setOpen:S,side:C,size:w,modal:T,closeOnOverlayPress:_e,closeOnEscape:E,swipeToClose:D,initialFocusRef:O,finalFocusRef:k,triggerRef:A,contentId:j,titleId:M,descriptionId:N,hasTitle:P,hasDescription:F,setMountedContentId:I}=ae.useDrawerContext(`Drawer.Content`),L=g??j,[R,z]=(0,c.useState)(x);x&&!R&&z(!0),(0,c.useLayoutEffect)(()=>{I(R?L:null)},[R,L,I]),(0,c.useEffect)(()=>()=>I(null),[I]);let[B,ve]=(0,c.useState)(null),[V,ye]=(0,c.useState)(null),H=(0,c.useRef)(null),be=te.useMergedRef(H,ye,h),U=x&&V!==null,W=e.useOverlayLayer({active:U,modal:T,elements:()=>[B,V]}),[xe,Se]=(0,c.useState)(void 0);(0,c.useLayoutEffect)(()=>{if(!x||v)return;let e=A.current??document.activeElement??document.documentElement;Se(window.getComputedStyle(e).direction===`rtl`?`rtl`:`ltr`)},[x,v,A]);let Ce=v??xe,G=(0,c.useRef)(k);G.current=k;let K=(0,c.useRef)(O);K.current=O,(0,c.useEffect)(()=>{if(!x||!B||!V)return;let e=document.activeElement,t=T?i.inertOutsideLayer(W.id,B):()=>{},r=T?ee.lockScroll():()=>{};return T||(K.current?.current??n.getFocusable(V)[0]??V).focus(),()=>{t(),r();let n=document.activeElement,i=!n||n===document.body||V.contains(n);(T||i)&&(G.current?.current??(A.current?.isConnected?A.current:null)??(e?.isConnected?e:null))?.focus()}},[x,T,B,V,A,W.id]);let q=(0,c.useRef)(null),J=T&&U&&!W.hasModalAbove;(0,c.useEffect)(()=>{if(!J||!V)return;let e=document.activeElement;q.current=e&&e!==V&&V.contains(e)?e:K.current?.current??null},[J,V]),n.useFocusTrap(V,{active:T&&U,initialFocusRef:q,restoreFocus:!1,layer:W}),t.useDismiss([H],{active:U&&E,outsidePress:!1,layer:W,onDismiss:()=>{(T||H.current?.contains(document.activeElement))&&S(!1)}}),(0,c.useEffect)(()=>{if(x||!R)return;let e=H.current;if(!e){z(!1);return}let t=le(window.getComputedStyle(e).animationDuration);if(t===0){z(!1);return}let n=window.setTimeout(()=>z(!1),t+100);return()=>window.clearTimeout(n)},[x,R]);let Y=e=>{_?.(e),!x&&e.target===e.currentTarget&&z(!1)},X=o.useDragToClose({enabled:C===`bottom`&&D&&x,panel:V,onClose:()=>S(!1)});(0,c.useEffect)(()=>{oe.isDev&&U&&!P&&!y&&!b&&console.warn(`Drawer.Content: add a <Drawer.Title> (or aria-label) so the dialog has an accessible name.`)},[U,P,y,b]);let Z=(0,c.useRef)(!1);if(!R)return null;let Q=x?`open`:`closed`,$=u(w)?void 0:typeof w==`number`?`${w}px`:w,we={...m,...$?{"--drawer-size":$}:null,...X.offset>0?{"--drawer-drag-offset":`${X.offset}px`}:null},Te=b??(y?void 0:P?M:void 0),Ee=[pe,F?N:void 0].filter(Boolean).join(` `)||void 0;return(0,l.jsx)(ne.Portal,{container:fe,children:(0,l.jsx)(e.OverlayLayerProvider,{layer:W,children:(0,l.jsxs)(`div`,{ref:ve,dir:Ce,"data-state":Q,className:a.cx(s.default.root,T?s.default.rootModal:s.default.rootNonModal),children:[T&&(0,l.jsx)(`div`,{"aria-hidden":`true`,"data-state":Q,className:a.cx(s.default.overlay,de),onPointerDown:()=>{Z.current=W.getIsTopmost()},onClick:()=>{let e=Z.current;Z.current=!1,_e&&e&&W.getIsTopmost()&&S(!1)}}),(0,l.jsxs)(`div`,{role:`dialog`,"aria-modal":T?!0:void 0,"aria-label":y,"aria-labelledby":Te,"aria-describedby":Ee,tabIndex:-1,...me,id:L,ref:be,"data-side":C,"data-state":Q,"data-dragging":X.dragging||void 0,className:a.cx(s.default.panel,se[C],u(w)?ce[w]:s.default.sizeCustom,!f&&s.default.hasClose,p),style:we,onAnimationEnd:Y,children:[C===`bottom`&&(0,l.jsx)(`div`,{"aria-hidden":`true`,className:a.cx(s.default.handleArea,D&&s.default.handleDraggable),...D?X.handlers:null,children:(0,l.jsx)(`span`,{className:s.default.handle})}),!f&&(0,l.jsx)(re.IconButton,{"aria-label":ge,variant:`ghost`,tone:`neutral`,className:s.default.closeButton,onClick:()=>S(!1),children:(0,l.jsx)(ie.CloseIcon,{})}),d]})]})})})};d.displayName=`Drawer.Content`,exports.DrawerContent=d;

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

@@ -0,0 +1,27 @@
+import { ComponentPropsWithRef, ReactNode } from 'react';
+export interface DrawerContentProps extends ComponentPropsWithRef<"div"> {
+    /** Header, body, and footer parts. */
+    children?: ReactNode;
+    /** Hide the built-in close button in the top corner. Only do this if the drawer has another visible `Drawer.Close`. @default false */
+    hideCloseButton?: boolean;
+    /** Accessible name of the built-in close button. @default "Close" */
+    closeLabel?: string;
+    /** Extra class for the backdrop (modal drawers only). */
+    overlayClassName?: string;
+    /** Element to portal into. @default document.body */
+    container?: HTMLElement | null;
+}
+/**
+ * The drawer panel. Renders in a Portal with a backdrop and acts as an
+ * APG modal dialog: `role="dialog"`, `aria-modal="true"`, labelled by
+ * `Drawer.Title`, focus trapped inside, the rest of the page `inert`, and
+ * page scrolling locked. With `modal={false}` on `Drawer` it is a non-modal
+ * dialog: no backdrop, no trap, and the page stays usable.
+ *
+ * Other props (including `role`, `aria-label`, and `dir`) go on the panel.
+ * Set `--drawer-size` through the `size` prop rather than `style`.
+ */
+export declare const DrawerContent: {
+    ({ children, hideCloseButton, closeLabel: closeLabelProp, overlayClassName, container, className, style, ref, id: idProp, onAnimationEnd, dir: dirProp, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, ...rest }: DrawerContentProps): import("react").JSX.Element | null;
+    displayName: string;
+};