@nizivo/react 0.0.0-stage → 0.2.0

package/dist/dialog/dialog.client.d.ts

@@ -0,0 +1,25 @@
+import { DialogBodyProps, DialogCloseProps, DialogDescriptionProps, DialogFooterProps, DialogPopupProps, DialogRootProps, DialogTitleProps, DialogTriggerProps } from "./dialog.contract.js";
+import { JSX } from "react";
+//#region src/dialog/dialog.client.d.ts
+export declare function DialogRoot({ returnFocus, ...props }: DialogRootProps): JSX.Element;
+/**
+ * Without `render`, its own `<button>`: `nz-hit-target` gives it the 44 px coarse-pointer hit area of
+ * every standalone pressable, and dialog.css gives that bare button a 24 x 24 px minimum (WCAG 2.2
+ * 2.5.8; M27). A composed Button or IconButton keeps its own size and classes.
+ */
+export declare function DialogTrigger({ className, render, ...rest }: DialogTriggerProps): JSX.Element;
+export declare function DialogPopup({ role, size, backdrop, container, className, children, ...rest }: DialogPopupProps): JSX.Element;
+export declare function DialogTitle({ level, className, render, ...rest }: DialogTitleProps): JSX.Element;
+export declare function DialogDescription({ className, render, ...rest }: DialogDescriptionProps): JSX.Element;
+/** The only scroller inside the popup. */
+export declare function DialogBody({ className, render, ...rest }: DialogBodyProps): JSX.Element;
+export declare function DialogFooter({ className, render, ...rest }: DialogFooterProps): JSX.Element;
+/**
+ * With `render` or `children`, the consumer's button. With neither, an IconButton (tertiary, `md`)
+ * showing the core close glyph (§12.3, §14.2), named by `labels.close`. Its markup is the IconButton
+ * element's (`iconButtonElement`, icon-button-static.tsx since M31), written out: importing that
+ * builder cost the Dialog entry about 280 B gzip against its 31 KiB cap. An overlay-lane case
+ * compares the two.
+ */
+export declare function DialogClose({ className, render, children, labels: labelsProp, ...rest }: DialogCloseProps): JSX.Element;
+//#endregion

package/dist/dialog/dialog.client.js

@@ -0,0 +1,145 @@
+"use client";
+import { cx } from "../_internal/cx.js";
+import { renderElement, toRenderFn } from "../contracts/render.js";
+import { useLabels } from "../config/config.client.js";
+import { CloseGlyph } from "../_internal/glyphs.js";
+import { ModalNestingScope, initialFocus, useModalNesting } from "../_internal/modal.client.js";
+import { Close, Description, Popup, Root, Title, Trigger } from "../_engines/react-aria/dialog.client.js";
+import { createContext, use } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/dialog/dialog.client.tsx
+/** `Dialog.Root`'s `returnFocus`, for its Popup. */
+const ReturnFocusContext = createContext(true);
+const renderDiv = toRenderFn(void 0, "div");
+const renderP = toRenderFn(void 0, "p");
+/** Focus on open (§12.2), from the Dialog's own slots. */
+const INITIAL_FOCUS = {
+	dialog: initialFocus("dialog", "dialog"),
+	alertdialog: initialFocus("dialog", "alertdialog")
+};
+function DialogRoot({ returnFocus = true, ...props }) {
+	return /* @__PURE__ */ jsx(ReturnFocusContext, {
+		value: returnFocus,
+		children: /* @__PURE__ */ jsx(Root, { ...props })
+	});
+}
+/**
+* Without `render`, its own `<button>`: `nz-hit-target` gives it the 44 px coarse-pointer hit area of
+* every standalone pressable, and dialog.css gives that bare button a 24 x 24 px minimum (WCAG 2.2
+* 2.5.8; M27). A composed Button or IconButton keeps its own size and classes.
+*/
+function DialogTrigger({ className, render, ...rest }) {
+	return /* @__PURE__ */ jsx(Trigger, {
+		...rest,
+		className: cx("nz-dialog-trigger", render === void 0 && "nz-hit-target", className),
+		"data-slot": "dialog-trigger",
+		render: toRenderFn(render, "button")
+	});
+}
+function DialogPopup({ role = "dialog", size = "md", backdrop, container, className, children, ...rest }) {
+	const { parent, nesting, childOpen } = useModalNesting();
+	const returnFocus = use(ReturnFocusContext);
+	return /* @__PURE__ */ jsx(Popup, {
+		...rest,
+		role,
+		container,
+		backdrop: backdrop ?? parent === null,
+		positioner: {
+			className: "nz-dialog-positioner",
+			"data-slot": "dialog-positioner"
+		},
+		backdropProps: {
+			className: "nz-dialog-backdrop",
+			"data-slot": "dialog-backdrop"
+		},
+		contentProps: {
+			className: "nz-dialog-content",
+			"data-slot": "dialog-content"
+		},
+		initialFocus: INITIAL_FOCUS[role],
+		returnFocus,
+		className: cx("nz-dialog-popup", className),
+		"data-slot": "dialog-popup",
+		"data-size": size,
+		"data-nested-open": childOpen ? "" : void 0,
+		render: renderDiv,
+		children: /* @__PURE__ */ jsx(ModalNestingScope, {
+			parent,
+			nesting,
+			children
+		})
+	});
+}
+const HEADINGS = {
+	2: toRenderFn(void 0, "h2"),
+	3: toRenderFn(void 0, "h3"),
+	4: toRenderFn(void 0, "h4"),
+	5: toRenderFn(void 0, "h5"),
+	6: toRenderFn(void 0, "h6")
+};
+function DialogTitle({ level = 2, className, render, ...rest }) {
+	return /* @__PURE__ */ jsx(Title, {
+		...rest,
+		level,
+		className: cx("nz-dialog-title", className),
+		"data-slot": "dialog-title",
+		render: render === void 0 ? HEADINGS[level] : toRenderFn(render, `h${level}`)
+	});
+}
+function DialogDescription({ className, render, ...rest }) {
+	return /* @__PURE__ */ jsx(Description, {
+		...rest,
+		className: cx("nz-dialog-description", className),
+		"data-slot": "dialog-description",
+		render: render === void 0 ? renderP : toRenderFn(render, "p")
+	});
+}
+/** The only scroller inside the popup. */
+function DialogBody({ className, render, ...rest }) {
+	return renderElement("div", render, {}, {
+		...rest,
+		className: cx("nz-dialog-body", className),
+		"data-slot": "dialog-body"
+	});
+}
+function DialogFooter({ className, render, ...rest }) {
+	return renderElement("div", render, {}, {
+		...rest,
+		className: cx("nz-dialog-footer", className),
+		"data-slot": "dialog-footer"
+	});
+}
+/**
+* With `render` or `children`, the consumer's button. With neither, an IconButton (tertiary, `md`)
+* showing the core close glyph (§12.3, §14.2), named by `labels.close`. Its markup is the IconButton
+* element's (`iconButtonElement`, icon-button-static.tsx since M31), written out: importing that
+* builder cost the Dialog entry about 280 B gzip against its 31 KiB cap. An overlay-lane case
+* compares the two.
+*/
+function DialogClose({ className, render, children, labels: labelsProp, ...rest }) {
+	const labels = useLabels("dialog", labelsProp);
+	return /* @__PURE__ */ jsx(Close, {
+		...rest,
+		className: cx("nz-dialog-close", className),
+		"data-slot": "dialog-close",
+		render: toRenderFn(render ?? (children === void 0 ? closeIcon(rest["aria-label"] ?? labels?.close ?? "Close") : void 0), "button"),
+		children
+	});
+}
+function closeIcon(label) {
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		className: "nz-icon-button nz-hit-target",
+		"data-variant": "tertiary",
+		"data-size": "md",
+		"aria-label": label,
+		children: /* @__PURE__ */ jsx("span", {
+			className: "nz-icon-button-icon",
+			"data-slot": "icon-button-icon",
+			"aria-hidden": "true",
+			children: /* @__PURE__ */ jsx(CloseGlyph, {})
+		})
+	});
+}
+//#endregion
+export { DialogBody, DialogClose, DialogDescription, DialogFooter, DialogPopup, DialogRoot, DialogTitle, DialogTrigger };

package/dist/dialog/dialog.contract.d.ts

@@ -0,0 +1,97 @@
+import { RenderProp } from "../contracts/render.js";
+import { ChangeDetails, OpenReason } from "../contracts/details.js";
+import "../_internal/engine-part.js";
+import { ReturnFocusTarget } from "../_internal/overlay.js";
+import { ComponentPropsWithRef, ReactElement, ReactNode } from "react";
+//#region src/dialog/dialog.contract.d.ts
+/** Figma Modal `Type`: Default → `dialog`, Destructive → `alertdialog`. */
+export type DialogRole = "dialog" | "alertdialog";
+/** `md` is Figma's only Modal width (480 px); `sm` (400) and `lg` (640) are provisional. */
+export type DialogSize = "sm" | "md" | "lg";
+export type DialogTitleLevel = 2 | 3 | 4 | 5 | 6;
+/**
+ * Strings the Dialog renders (§9.3 rule 7, §16.4). `close` is the accessible name of the default
+ * `Dialog.Close` (an IconButton showing the close glyph), set through that part's `labels`.
+ * Engine-owned with React Aria (not overridable): `dismiss`, the visually hidden "Dismiss" button
+ * rendered inside a dismissable dialog.
+ */
+export interface DialogLabels {
+  /** @default 'Close' */
+  close: string;
+  dismiss: string;
+}
+export interface DialogRootProps {
+  open?: boolean;
+  defaultOpen?: boolean;
+  /** `details.reason` is `'unknown'` with React Aria, which reports no cause. */
+  onOpenChange?: (open: boolean, details: ChangeDetails<OpenReason>) => void;
+  /**
+   * Where focus goes when the dialog closes (§12.2 Focus return). `true` returns it to the trigger
+   * (the element that opened the dialog), else to the trigger of the overlay it was opened from (a
+   * Menu button, after a Menu item opened it), else it stays on `<body>` and development builds warn.
+   * An element ref, or a function returning an element, goes first while that element is on the page;
+   * `false` leaves focus where the browser puts it, for an app that moves it itself.
+   * @default true
+   */
+  returnFocus?: ReturnFocusTarget;
+  children: ReactNode;
+}
+export interface DialogTriggerState {
+  open: boolean;
+  pressed: boolean;
+  focusVisible: boolean;
+  disabled: boolean;
+}
+export interface DialogPopupState {
+  entering: boolean;
+  exiting: boolean;
+}
+export interface DialogCloseState {
+  pressed: boolean;
+  focusVisible: boolean;
+  disabled: boolean;
+}
+export interface DialogTriggerProps extends Omit<ComponentPropsWithRef<"button">, "children"> {
+  /** Must render a `<button>`, for example `render={<Button variant="critical">Delete</Button>}`. */
+  render?: RenderProp<DialogTriggerState>;
+  children?: ReactNode;
+}
+export interface DialogPopupProps extends Omit<ComponentPropsWithRef<"div">, "children" | "role"> {
+  /** `alertdialog` disables outside-press dismissal. @default 'dialog' */
+  role?: DialogRole;
+  /** @default 'md' */
+  size?: DialogSize;
+  /** The scrim element. Defaults to on for the root modal and off for nested modals. */
+  backdrop?: boolean;
+  /** Portal container. Defaults to the parent overlay, else `document.body` (§12.1 L2). */
+  container?: Element | null;
+  children: ReactNode;
+}
+export interface DialogTitleProps extends Omit<ComponentPropsWithRef<"h2">, "id"> {
+  /** @default 2 */
+  level?: DialogTitleLevel;
+  render?: RenderProp<Record<string, never>>;
+}
+export interface DialogDescriptionProps extends Omit<ComponentPropsWithRef<"p">, "id"> {
+  render?: RenderProp<Record<string, never>>;
+}
+export interface DialogBodyProps extends ComponentPropsWithRef<"div"> {
+  render?: RenderProp<Record<string, never>>;
+}
+export interface DialogFooterProps extends ComponentPropsWithRef<"div"> {
+  render?: RenderProp<Record<string, never>>;
+}
+export interface DialogCloseProps extends Omit<ComponentPropsWithRef<"button">, "children"> {
+  /**
+   * Must render a `<button>`, for example `render={<Button>Cancel</Button>}`. With neither `render`
+   * nor `children`, the part is an IconButton showing the close glyph, named by `labels.close`, which
+   * sits in the popup's top corner when it is a direct child of `Dialog.Popup` (§12.3).
+   */
+  render?: RenderProp<DialogCloseState>;
+  /** Text content, rendered in a plain `<button>`; leave it out for the default IconButton. */
+  children?: ReactNode;
+  /** The default IconButton's accessible name; an `aria-label` you pass wins. */
+  labels?: Partial<Pick<DialogLabels, "close">>;
+}
+//#endregion
+export type { OpenReason };

package/dist/dialog/dialog.parts.d.ts

@@ -0,0 +1,6 @@
+import { DialogBody, DialogClose, DialogDescription, DialogFooter, DialogPopup, DialogRoot, DialogTitle, DialogTrigger } from "./dialog.client.js";
+declare namespace dialog_parts_d_exports {
+  export { DialogBody as Body, DialogClose as Close, DialogDescription as Description, DialogFooter as Footer, DialogPopup as Popup, DialogRoot as Root, DialogTitle as Title, DialogTrigger as Trigger };
+}
+//#endregion
+export { DialogBody as Body, DialogClose as Close, DialogDescription as Description, DialogFooter as Footer, DialogPopup as Popup, DialogRoot as Root, DialogTitle as Title, DialogTrigger as Trigger, dialog_parts_d_exports };

package/dist/dialog/dialog.parts.js

@@ -0,0 +1,15 @@
+import { __exportAll } from "../_virtual/_rolldown/runtime.js";
+import { DialogBody, DialogClose, DialogDescription, DialogFooter, DialogPopup, DialogRoot, DialogTitle, DialogTrigger } from "./dialog.client.js";
+//#region src/dialog/dialog.parts.ts
+var dialog_parts_exports = /* @__PURE__ */ __exportAll({
+	Body: () => DialogBody,
+	Close: () => DialogClose,
+	Description: () => DialogDescription,
+	Footer: () => DialogFooter,
+	Popup: () => DialogPopup,
+	Root: () => DialogRoot,
+	Title: () => DialogTitle,
+	Trigger: () => DialogTrigger
+});
+//#endregion
+export { DialogBody as Body, DialogClose as Close, DialogDescription as Description, DialogFooter as Footer, DialogPopup as Popup, DialogRoot as Root, DialogTitle as Title, DialogTrigger as Trigger, dialog_parts_exports };

package/dist/dialog/index.d.ts

@@ -0,0 +1,5 @@
+import { OpenReason } from "../contracts/details.js";
+import { DialogBodyProps, DialogCloseProps, DialogCloseState, DialogDescriptionProps, DialogFooterProps, DialogLabels, DialogPopupProps, DialogPopupState, DialogRole, DialogRootProps, DialogSize, DialogTitleLevel, DialogTitleProps, DialogTriggerProps, DialogTriggerState } from "./dialog.contract.js";
+import { DialogBody, DialogClose, DialogDescription, DialogFooter, DialogPopup, DialogRoot, DialogTitle, DialogTrigger } from "./dialog.client.js";
+import { dialog_parts_d_exports } from "./dialog.parts.js";
+export { dialog_parts_d_exports as Dialog, DialogBody, type DialogBodyProps, DialogClose, type DialogCloseProps, type DialogCloseState, DialogDescription, type DialogDescriptionProps, DialogFooter, type DialogFooterProps, type DialogLabels, DialogPopup, type DialogPopupProps, type DialogPopupState, type DialogRole, DialogRoot, type DialogRootProps, type DialogSize, DialogTitle, type DialogTitleLevel, type DialogTitleProps, DialogTrigger, type DialogTriggerProps, type DialogTriggerState, type OpenReason };

package/dist/dialog/index.js

@@ -0,0 +1,3 @@
+import { DialogBody, DialogClose, DialogDescription, DialogFooter, DialogPopup, DialogRoot, DialogTitle, DialogTrigger } from "./dialog.client.js";
+import { dialog_parts_exports } from "./dialog.parts.js";
+export { dialog_parts_exports as Dialog, DialogBody, DialogClose, DialogDescription, DialogFooter, DialogPopup, DialogRoot, DialogTitle, DialogTrigger };

package/dist/drawer/drawer.client.d.ts

@@ -0,0 +1,25 @@
+import { DrawerBodyProps, DrawerCloseProps, DrawerDescriptionProps, DrawerFooterProps, DrawerHeaderProps, DrawerPopupProps, DrawerRootProps, DrawerTitleProps, DrawerTriggerProps } from "./drawer.contract.js";
+import { JSX } from "react";
+//#region src/drawer/drawer.client.d.ts
+export declare function DrawerRoot({ returnFocus, ...props }: DrawerRootProps): JSX.Element;
+/**
+ * Without `render`, its own `<button>` with `nz-hit-target` and, from drawer.css, a 24 x 24 px
+ * minimum (WCAG 2.2 2.5.8, as the Dialog's, M27). A composed Button or IconButton keeps its own size.
+ */
+export declare function DrawerTrigger({ className, render, ...rest }: DrawerTriggerProps): JSX.Element;
+export declare function DrawerPopup({ side, backdrop, container, className, children, ...rest }: DrawerPopupProps): JSX.Element;
+/** Figma's Header frame: the title, an optional description and badges, above a 1 px rule. */
+export declare function DrawerHeader({ className, render, ...rest }: DrawerHeaderProps): JSX.Element;
+export declare function DrawerTitle({ level, className, render, ...rest }: DrawerTitleProps): JSX.Element;
+export declare function DrawerDescription({ className, render, ...rest }: DrawerDescriptionProps): JSX.Element;
+/** The only scroller inside the drawer; it fills the height between the header and the footer. */
+export declare function DrawerBody({ className, render, ...rest }: DrawerBodyProps): JSX.Element;
+/** Figma's Footer frame: actions that share its width, above a 1 px rule. */
+export declare function DrawerFooter({ className, render, ...rest }: DrawerFooterProps): JSX.Element;
+/**
+ * With `render` or `children`, the consumer's button. With neither, an IconButton (tertiary, `md`)
+ * showing the core close glyph, named by `labels.close`: the IconButton element's markup written out,
+ * as `Dialog.Close` does, so the Drawer entry does not pull in IconButton's tooltip chain.
+ */
+export declare function DrawerClose({ className, render, children, labels: labelsProp, ...rest }: DrawerCloseProps): JSX.Element;
+//#endregion

package/dist/drawer/drawer.client.js

@@ -0,0 +1,154 @@
+"use client";
+import { cx } from "../_internal/cx.js";
+import { renderElement, toRenderFn } from "../contracts/render.js";
+import { useLabels } from "../config/config.client.js";
+import { CloseGlyph } from "../_internal/glyphs.js";
+import { ModalNestingScope, initialFocus, useModalNesting } from "../_internal/modal.client.js";
+import { Close, Description, Popup, Root, Title, Trigger } from "../_engines/react-aria/dialog.client.js";
+import { useDirection } from "../_engines/react-aria/drawer.client.js";
+import { createContext, use } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/drawer/drawer.client.tsx
+/** `Drawer.Root`'s `returnFocus`, for its Popup. */
+const ReturnFocusContext = createContext(true);
+const renderDiv = toRenderFn(void 0, "div");
+const renderP = toRenderFn(void 0, "p");
+/** A drawer is always a dialog (an alertdialog is the Dialog's job). */
+const ROLE = "dialog";
+/** Focus on open (§12.2): the first tabbable element in `Drawer.Body`, else the drawer itself. */
+const INITIAL_FOCUS = initialFocus("drawer", ROLE);
+function DrawerRoot({ returnFocus = true, ...props }) {
+	return /* @__PURE__ */ jsx(ReturnFocusContext, {
+		value: returnFocus,
+		children: /* @__PURE__ */ jsx(Root, { ...props })
+	});
+}
+/**
+* Without `render`, its own `<button>` with `nz-hit-target` and, from drawer.css, a 24 x 24 px
+* minimum (WCAG 2.2 2.5.8, as the Dialog's, M27). A composed Button or IconButton keeps its own size.
+*/
+function DrawerTrigger({ className, render, ...rest }) {
+	return /* @__PURE__ */ jsx(Trigger, {
+		...rest,
+		className: cx("nz-drawer-trigger", render === void 0 && "nz-hit-target", className),
+		"data-slot": "drawer-trigger",
+		render: toRenderFn(render, "button")
+	});
+}
+function DrawerPopup({ side = "end", backdrop, container, className, children, ...rest }) {
+	const { parent, nesting, childOpen } = useModalNesting();
+	const returnFocus = use(ReturnFocusContext);
+	const ltr = useDirection() === "ltr";
+	const physical = side === "bottom" ? side : side === "end" === ltr ? "right" : "left";
+	return /* @__PURE__ */ jsx(Popup, {
+		...rest,
+		role: ROLE,
+		container,
+		backdrop: backdrop ?? parent === null,
+		positioner: {
+			className: "nz-drawer-positioner",
+			"data-slot": "drawer-positioner",
+			"data-side": physical
+		},
+		backdropProps: {
+			className: "nz-drawer-backdrop",
+			"data-slot": "drawer-backdrop"
+		},
+		contentProps: {
+			className: "nz-drawer-content",
+			"data-slot": "drawer-content"
+		},
+		initialFocus: INITIAL_FOCUS,
+		returnFocus,
+		className: cx("nz-drawer-popup", className),
+		"data-slot": "drawer-popup",
+		"data-side": physical,
+		"data-nested-open": childOpen ? "" : void 0,
+		render: renderDiv,
+		children: /* @__PURE__ */ jsx(ModalNestingScope, {
+			parent,
+			nesting,
+			children
+		})
+	});
+}
+/** Figma's Header frame: the title, an optional description and badges, above a 1 px rule. */
+function DrawerHeader({ className, render, ...rest }) {
+	return renderElement("div", render, {}, {
+		...rest,
+		className: cx("nz-drawer-header", className),
+		"data-slot": "drawer-header"
+	});
+}
+const HEADINGS = {
+	2: toRenderFn(void 0, "h2"),
+	3: toRenderFn(void 0, "h3"),
+	4: toRenderFn(void 0, "h4"),
+	5: toRenderFn(void 0, "h5"),
+	6: toRenderFn(void 0, "h6")
+};
+function DrawerTitle({ level = 2, className, render, ...rest }) {
+	return /* @__PURE__ */ jsx(Title, {
+		...rest,
+		level,
+		className: cx("nz-drawer-title", className),
+		"data-slot": "drawer-title",
+		render: render === void 0 ? HEADINGS[level] : toRenderFn(render, `h${level}`)
+	});
+}
+function DrawerDescription({ className, render, ...rest }) {
+	return /* @__PURE__ */ jsx(Description, {
+		...rest,
+		className: cx("nz-drawer-description", className),
+		"data-slot": "drawer-description",
+		render: render === void 0 ? renderP : toRenderFn(render, "p")
+	});
+}
+/** The only scroller inside the drawer; it fills the height between the header and the footer. */
+function DrawerBody({ className, render, ...rest }) {
+	return renderElement("div", render, {}, {
+		...rest,
+		className: cx("nz-drawer-body", className),
+		"data-slot": "drawer-body"
+	});
+}
+/** Figma's Footer frame: actions that share its width, above a 1 px rule. */
+function DrawerFooter({ className, render, ...rest }) {
+	return renderElement("div", render, {}, {
+		...rest,
+		className: cx("nz-drawer-footer", className),
+		"data-slot": "drawer-footer"
+	});
+}
+/**
+* With `render` or `children`, the consumer's button. With neither, an IconButton (tertiary, `md`)
+* showing the core close glyph, named by `labels.close`: the IconButton element's markup written out,
+* as `Dialog.Close` does, so the Drawer entry does not pull in IconButton's tooltip chain.
+*/
+function DrawerClose({ className, render, children, labels: labelsProp, ...rest }) {
+	const labels = useLabels("drawer", labelsProp);
+	return /* @__PURE__ */ jsx(Close, {
+		...rest,
+		className: cx("nz-drawer-close", className),
+		"data-slot": "drawer-close",
+		render: toRenderFn(render ?? (children === void 0 ? closeIcon(rest["aria-label"] ?? labels?.close ?? "Close") : void 0), "button"),
+		children
+	});
+}
+function closeIcon(label) {
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		className: "nz-icon-button nz-hit-target",
+		"data-variant": "tertiary",
+		"data-size": "md",
+		"aria-label": label,
+		children: /* @__PURE__ */ jsx("span", {
+			className: "nz-icon-button-icon",
+			"data-slot": "icon-button-icon",
+			"aria-hidden": "true",
+			children: /* @__PURE__ */ jsx(CloseGlyph, {})
+		})
+	});
+}
+//#endregion
+export { DrawerBody, DrawerClose, DrawerDescription, DrawerFooter, DrawerHeader, DrawerPopup, DrawerRoot, DrawerTitle, DrawerTrigger };

package/dist/drawer/drawer.contract.d.ts

@@ -0,0 +1,98 @@
+import { RenderProp } from "../contracts/render.js";
+import { ChangeDetails, OpenReason } from "../contracts/details.js";
+import { ReturnFocusTarget } from "../_internal/overlay.js";
+import "../dialog/dialog.contract.js";
+import { ComponentPropsWithRef, ReactNode } from "react";
+//#region src/drawer/drawer.contract.d.ts
+/**
+ * The edge the drawer slides in from, in logical terms: `start` and `end` follow the writing direction
+ * (`end` is the right edge in a left-to-right page, as Figma draws the Drawer); `bottom` is the sheet,
+ * as AppShell's "More" sheet below 640 px.
+ */
+export type DrawerSide = "start" | "end" | "bottom";
+export type DrawerTitleLevel = 2 | 3 | 4 | 5 | 6;
+/**
+ * Strings the Drawer renders (§9.3 rule 7, §16.4). `close` is the accessible name of the default
+ * `Drawer.Close` (an IconButton showing the close glyph), set through that part's `labels`.
+ * Engine-owned with React Aria (not overridable): `dismiss`, the visually hidden "Dismiss" button
+ * rendered inside the drawer.
+ */
+export interface DrawerLabels {
+  /** @default 'Close' */
+  close: string;
+  dismiss: string;
+}
+export interface DrawerRootProps {
+  open?: boolean;
+  defaultOpen?: boolean;
+  /** `details.reason` is `'unknown'` with React Aria, which reports no cause. */
+  onOpenChange?: (open: boolean, details: ChangeDetails<OpenReason>) => void;
+  /**
+   * Where focus goes when the drawer closes (§12.2 Focus return), as `Dialog.Root`'s: the trigger,
+   * else the trigger of the overlay it was opened from, else `<body>` with a development warning; an
+   * element ref or a function returning one goes first; `false` leaves focus alone.
+   * @default true
+   */
+  returnFocus?: ReturnFocusTarget;
+  children: ReactNode;
+}
+export interface DrawerTriggerState {
+  open: boolean;
+  pressed: boolean;
+  focusVisible: boolean;
+  disabled: boolean;
+}
+export interface DrawerPopupState {
+  entering: boolean;
+  exiting: boolean;
+}
+export interface DrawerCloseState {
+  pressed: boolean;
+  focusVisible: boolean;
+  disabled: boolean;
+}
+export interface DrawerTriggerProps extends Omit<ComponentPropsWithRef<"button">, "children"> {
+  /** Must render a `<button>`, for example `render={<Button>View order</Button>}`. */
+  render?: RenderProp<DrawerTriggerState>;
+  children?: ReactNode;
+}
+export interface DrawerPopupProps extends Omit<ComponentPropsWithRef<"div">, "children" | "role"> {
+  /** The edge it slides in from. @default 'end' */
+  side?: DrawerSide;
+  /** The scrim element. Defaults to on for the root modal and off when opened from another modal. */
+  backdrop?: boolean;
+  /** Portal container. Defaults to the parent overlay, else `document.body` (§12.1 L2). */
+  container?: Element | null;
+  children: ReactNode;
+}
+export interface DrawerHeaderProps extends ComponentPropsWithRef<"div"> {
+  render?: RenderProp<Record<string, never>>;
+}
+export interface DrawerTitleProps extends Omit<ComponentPropsWithRef<"h2">, "id"> {
+  /** @default 2 */
+  level?: DrawerTitleLevel;
+  render?: RenderProp<Record<string, never>>;
+}
+export interface DrawerDescriptionProps extends Omit<ComponentPropsWithRef<"p">, "id"> {
+  render?: RenderProp<Record<string, never>>;
+}
+export interface DrawerBodyProps extends ComponentPropsWithRef<"div"> {
+  render?: RenderProp<Record<string, never>>;
+}
+export interface DrawerFooterProps extends ComponentPropsWithRef<"div"> {
+  render?: RenderProp<Record<string, never>>;
+}
+export interface DrawerCloseProps extends Omit<ComponentPropsWithRef<"button">, "children"> {
+  /**
+   * Must render a `<button>`, for example `render={<Button>Cancel</Button>}`. With neither `render`
+   * nor `children`, the part is an IconButton showing the close glyph, named by `labels.close`, which
+   * sits in the header's end corner when it is a direct child of `Drawer.Popup`.
+   */
+  render?: RenderProp<DrawerCloseState>;
+  /** Text content, rendered in a plain `<button>`; leave it out for the default IconButton. */
+  children?: ReactNode;
+  /** The default IconButton's accessible name; an `aria-label` you pass wins. */
+  labels?: Partial<Pick<DrawerLabels, "close">>;
+}
+//#endregion
+export type { OpenReason };

package/dist/drawer/drawer.parts.d.ts

@@ -0,0 +1,6 @@
+import { DrawerBody, DrawerClose, DrawerDescription, DrawerFooter, DrawerHeader, DrawerPopup, DrawerRoot, DrawerTitle, DrawerTrigger } from "./drawer.client.js";
+declare namespace drawer_parts_d_exports {
+  export { DrawerBody as Body, DrawerClose as Close, DrawerDescription as Description, DrawerFooter as Footer, DrawerHeader as Header, DrawerPopup as Popup, DrawerRoot as Root, DrawerTitle as Title, DrawerTrigger as Trigger };
+}
+//#endregion
+export { DrawerBody as Body, DrawerClose as Close, DrawerDescription as Description, DrawerFooter as Footer, DrawerHeader as Header, DrawerPopup as Popup, DrawerRoot as Root, DrawerTitle as Title, DrawerTrigger as Trigger, drawer_parts_d_exports };

package/dist/drawer/drawer.parts.js

@@ -0,0 +1,16 @@
+import { __exportAll } from "../_virtual/_rolldown/runtime.js";
+import { DrawerBody, DrawerClose, DrawerDescription, DrawerFooter, DrawerHeader, DrawerPopup, DrawerRoot, DrawerTitle, DrawerTrigger } from "./drawer.client.js";
+//#region src/drawer/drawer.parts.ts
+var drawer_parts_exports = /* @__PURE__ */ __exportAll({
+	Body: () => DrawerBody,
+	Close: () => DrawerClose,
+	Description: () => DrawerDescription,
+	Footer: () => DrawerFooter,
+	Header: () => DrawerHeader,
+	Popup: () => DrawerPopup,
+	Root: () => DrawerRoot,
+	Title: () => DrawerTitle,
+	Trigger: () => DrawerTrigger
+});
+//#endregion
+export { DrawerBody as Body, DrawerClose as Close, DrawerDescription as Description, DrawerFooter as Footer, DrawerHeader as Header, DrawerPopup as Popup, DrawerRoot as Root, DrawerTitle as Title, DrawerTrigger as Trigger, drawer_parts_exports };

package/dist/drawer/index.d.ts

@@ -0,0 +1,5 @@
+import { OpenReason } from "../contracts/details.js";
+import { DrawerBodyProps, DrawerCloseProps, DrawerCloseState, DrawerDescriptionProps, DrawerFooterProps, DrawerHeaderProps, DrawerLabels, DrawerPopupProps, DrawerPopupState, DrawerRootProps, DrawerSide, DrawerTitleLevel, DrawerTitleProps, DrawerTriggerProps, DrawerTriggerState } from "./drawer.contract.js";
+import { DrawerBody, DrawerClose, DrawerDescription, DrawerFooter, DrawerHeader, DrawerPopup, DrawerRoot, DrawerTitle, DrawerTrigger } from "./drawer.client.js";
+import { drawer_parts_d_exports } from "./drawer.parts.js";
+export { drawer_parts_d_exports as Drawer, DrawerBody, type DrawerBodyProps, DrawerClose, type DrawerCloseProps, type DrawerCloseState, DrawerDescription, type DrawerDescriptionProps, DrawerFooter, type DrawerFooterProps, DrawerHeader, type DrawerHeaderProps, type DrawerLabels, DrawerPopup, type DrawerPopupProps, type DrawerPopupState, DrawerRoot, type DrawerRootProps, type DrawerSide, DrawerTitle, type DrawerTitleLevel, type DrawerTitleProps, DrawerTrigger, type DrawerTriggerProps, type DrawerTriggerState, type OpenReason };

package/dist/drawer/index.js

@@ -0,0 +1,3 @@
+import { DrawerBody, DrawerClose, DrawerDescription, DrawerFooter, DrawerHeader, DrawerPopup, DrawerRoot, DrawerTitle, DrawerTrigger } from "./drawer.client.js";
+import { drawer_parts_exports } from "./drawer.parts.js";
+export { drawer_parts_exports as Drawer, DrawerBody, DrawerClose, DrawerDescription, DrawerFooter, DrawerHeader, DrawerPopup, DrawerRoot, DrawerTitle, DrawerTrigger };

package/dist/empty-state/empty-state.d.ts

@@ -0,0 +1,18 @@
+import { RenderProp } from "../contracts/render.js";
+import { ComponentPropsWithRef, ReactElement, ReactNode } from "react";
+//#region src/empty-state/empty-state.d.ts
+export type EmptyStateTitleLevel = 2 | 3 | 4 | 5 | 6;
+export interface EmptyStateProps extends Omit<ComponentPropsWithRef<"div">, "title" | "children"> {
+  /** The headline. Its look is Heading/H3 at every `level`. */
+  title: ReactNode;
+  /** @default 2 */
+  level?: EmptyStateTitleLevel;
+  /** A render or illustration above the title, for example `<Image … />`. */
+  media?: ReactNode;
+  /** One action, for example `<Button variant="primary">Share your store</Button>`. */
+  actions?: ReactNode;
+  render?: RenderProp<Record<string, never>>;
+}
+/** Figma: "A render, a headline, one action. No paragraphs." */
+export declare function EmptyState({ title, level, media, actions, render, className, ...rest }: EmptyStateProps): ReactElement;
+//#endregion