beez-ui 2.7.0 → 3.0.0

package/dist/components/primitives/dialog.d.ts

@@ -0,0 +1,62 @@
+/**
+ * Internal composition behind Arc's Dialog (https://uiarc.dev, MIT License, see THIRD_PARTY_NOTICES.md): Radix's
+ * dialog parts on Arc's overlay, raised panel, title and description type and bordered close button, with Arc's swap
+ * of a title or description changed while open, Arc's dialog transition and the viewport close button
+ * placement. Not exported from the package: the public `Dialog` in `../dialog.tsx` builds Arc's API on these parts.
+ */
+import * as React from "react";
+import { Dialog as DialogPrimitive } from "radix-ui";
+import { type DialogCloseButtonPlacement } from "../dialog-surface.js";
+/**
+ * Root that keeps the open state so the content can animate out. Controlled or uncontrolled, as Radix.
+ * @param props - Radix root props.
+ * @returns The dialog root.
+ */
+declare function Dialog({ ...props }: React.ComponentProps<typeof DialogPrimitive.Root>): React.JSX.Element;
+declare function DialogTrigger({ ...props }: React.ComponentProps<typeof DialogPrimitive.Trigger>): React.JSX.Element;
+declare function DialogPortal({ ...props }: React.ComponentProps<typeof DialogPrimitive.Portal>): React.JSX.Element;
+declare function DialogClose({ ...props }: React.ComponentProps<typeof DialogPrimitive.Close>): React.JSX.Element;
+declare function DialogOverlay({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Overlay>): React.JSX.Element;
+/**
+ * Renders compact dialog content with viewport-safe scrolling. The panel rises 8px and scales
+ * from 0.96 on Arc's smooth spring while it fades in, and leaves with a short drop and fade.
+ * @param props - Primitive properties and optional consumer overrides.
+ * @param props.showCloseButton - Whether the dialog renders its own close button.
+ * @param props.closeButtonPlacement - `viewport` pins the close button to the viewport corner
+ * and shows it only once the panel has settled; `content` (default) keeps it in the panel.
+ * @param props.closeLabel - Accessible name of the close button.
+ * @param props.closeButtonRef - Ref of the close button, when it is rendered.
+ * @returns The styled primitive with its original interaction contract.
+ */
+declare function DialogContent({ className, children, showCloseButton, closeButtonPlacement, closeLabel, closeButtonRef, ...props }: React.ComponentProps<typeof DialogPrimitive.Content> & {
+    showCloseButton?: boolean;
+    closeButtonPlacement?: DialogCloseButtonPlacement;
+    closeLabel?: string;
+    closeButtonRef?: React.Ref<HTMLButtonElement>;
+}): React.JSX.Element;
+/**
+ * Stacks the title and description. While the panel shows its own close button, the header keeps Arc's gap to it so
+ * long copy never runs under the button.
+ * @param props - Native div properties and optional consumer overrides.
+ * @returns The header block.
+ */
+declare function DialogHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+/**
+ * Separates dialog actions with an edge-to-edge footer under a hairline, bleeding through the panel padding.
+ * @param props - Native div properties and optional consumer overrides.
+ * @returns The footer block.
+ */
+declare function DialogFooter({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+/**
+ * Renders the dialog heading in Arc's title type. Plain text that changes while open swaps with Arc's rise.
+ * @param props - Primitive properties and optional consumer overrides.
+ * @returns The styled primitive with its original interaction contract.
+ */
+declare function DialogTitle({ className, children, ...props }: React.ComponentProps<typeof DialogPrimitive.Title>): React.JSX.Element;
+/**
+ * Renders the dialog description in Arc's secondary text. Plain text that changes while open swaps with Arc's rise.
+ * @param props - Primitive properties and optional consumer overrides.
+ * @returns The styled primitive with its original interaction contract.
+ */
+declare function DialogDescription({ className, children, ...props }: React.ComponentProps<typeof DialogPrimitive.Description>): React.JSX.Element;
+export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, };

package/dist/components/primitives/dialog.js

@@ -0,0 +1,490 @@
+"use client";
+import { c as _c } from "react/compiler-runtime";
+/**
+* Internal composition behind Arc's Dialog (https://uiarc.dev, MIT License, see THIRD_PARTY_NOTICES.md): Radix's
+* dialog parts on Arc's overlay, raised panel, title and description type and bordered close button, with Arc's swap
+* of a title or description changed while open, Arc's dialog transition and the viewport close button
+* placement. Not exported from the package: the public `Dialog` in `../dialog.tsx` builds Arc's API on these parts.
+*/
+import * as React from "react";
+import { Dialog as DialogPrimitive } from "radix-ui";
+import { MotionSlot } from "../../motion/motion-slot.js";
+import { MotionPresence, MotionOpenProvider, useMotionOpenState } from "../../motion/presence.js";
+import { cn } from "../../lib/utils.js";
+import { keepOpenOnToastInteraction } from "../../lib/toast-layer.js";
+import { DialogSurfaceCloseButton, withDialogSwapText, dialogDescriptionClassName, dialogFooterClassName, dialogOverlayClassName, dialogSurfaceClassName, dialogTitleClassName } from "../dialog-surface.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+* Root that keeps the open state so the content can animate out. Controlled or uncontrolled, as Radix.
+* @param props - Radix root props.
+* @returns The dialog root.
+*/
+function Dialog(t0) {
+	const $ = _c(9);
+	let props;
+	if ($[0] !== t0) {
+		({...props} = t0);
+		$[0] = t0;
+		$[1] = props;
+	} else {
+		props = $[1];
+	}
+	const [motionOpen, setMotionOpen] = useMotionOpenState(props);
+	let t1;
+	if ($[2] !== motionOpen || $[3] !== props || $[4] !== setMotionOpen) {
+		t1 = /* @__PURE__ */ _jsx(DialogPrimitive.Root, {
+			"data-slot": "dialog",
+			...props,
+			open: motionOpen,
+			onOpenChange: setMotionOpen
+		});
+		$[2] = motionOpen;
+		$[3] = props;
+		$[4] = setMotionOpen;
+		$[5] = t1;
+	} else {
+		t1 = $[5];
+	}
+	let t2;
+	if ($[6] !== motionOpen || $[7] !== t1) {
+		t2 = /* @__PURE__ */ _jsx(MotionOpenProvider, {
+			scope: "dialog",
+			open: motionOpen,
+			children: t1
+		});
+		$[6] = motionOpen;
+		$[7] = t1;
+		$[8] = t2;
+	} else {
+		t2 = $[8];
+	}
+	return t2;
+}
+function DialogTrigger(t0) {
+	const $ = _c(4);
+	let props;
+	if ($[0] !== t0) {
+		({...props} = t0);
+		$[0] = t0;
+		$[1] = props;
+	} else {
+		props = $[1];
+	}
+	let t1;
+	if ($[2] !== props) {
+		t1 = /* @__PURE__ */ _jsx(DialogPrimitive.Trigger, {
+			"data-slot": "dialog-trigger",
+			...props
+		});
+		$[2] = props;
+		$[3] = t1;
+	} else {
+		t1 = $[3];
+	}
+	return t1;
+}
+function DialogPortal(t0) {
+	const $ = _c(4);
+	let props;
+	if ($[0] !== t0) {
+		({...props} = t0);
+		$[0] = t0;
+		$[1] = props;
+	} else {
+		props = $[1];
+	}
+	let t1;
+	if ($[2] !== props) {
+		t1 = /* @__PURE__ */ _jsx(DialogPrimitive.Portal, {
+			"data-slot": "dialog-portal",
+			...props
+		});
+		$[2] = props;
+		$[3] = t1;
+	} else {
+		t1 = $[3];
+	}
+	return t1;
+}
+function DialogClose(t0) {
+	const $ = _c(4);
+	let props;
+	if ($[0] !== t0) {
+		({...props} = t0);
+		$[0] = t0;
+		$[1] = props;
+	} else {
+		props = $[1];
+	}
+	let t1;
+	if ($[2] !== props) {
+		t1 = /* @__PURE__ */ _jsx(DialogPrimitive.Close, {
+			"data-slot": "dialog-close",
+			...props
+		});
+		$[2] = props;
+		$[3] = t1;
+	} else {
+		t1 = $[3];
+	}
+	return t1;
+}
+function DialogOverlay(t0) {
+	const $ = _c(8);
+	let className;
+	let props;
+	if ($[0] !== t0) {
+		({className, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+	} else {
+		className = $[1];
+		props = $[2];
+	}
+	let t1;
+	if ($[3] !== className) {
+		t1 = cn(dialogOverlayClassName, className);
+		$[3] = className;
+		$[4] = t1;
+	} else {
+		t1 = $[4];
+	}
+	let t2;
+	if ($[5] !== props || $[6] !== t1) {
+		t2 = /* @__PURE__ */ _jsx(DialogPrimitive.Overlay, {
+			"data-slot": "dialog-overlay",
+			className: t1,
+			...props
+		});
+		$[5] = props;
+		$[6] = t1;
+		$[7] = t2;
+	} else {
+		t2 = $[7];
+	}
+	return t2;
+}
+/**
+* Renders compact dialog content with viewport-safe scrolling. The panel rises 8px and scales
+* from 0.96 on Arc's smooth spring while it fades in, and leaves with a short drop and fade.
+* @param props - Primitive properties and optional consumer overrides.
+* @param props.showCloseButton - Whether the dialog renders its own close button.
+* @param props.closeButtonPlacement - `viewport` pins the close button to the viewport corner
+* and shows it only once the panel has settled; `content` (default) keeps it in the panel.
+* @param props.closeLabel - Accessible name of the close button.
+* @param props.closeButtonRef - Ref of the close button, when it is rendered.
+* @returns The styled primitive with its original interaction contract.
+*/
+function DialogContent(t0) {
+	const $ = _c(29);
+	let children;
+	let className;
+	let closeButtonRef;
+	let closeLabel;
+	let props;
+	let t1;
+	let t2;
+	if ($[0] !== t0) {
+		({className, children, showCloseButton: t1, closeButtonPlacement: t2, closeLabel, closeButtonRef, ...props} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = className;
+		$[3] = closeButtonRef;
+		$[4] = closeLabel;
+		$[5] = props;
+		$[6] = t1;
+		$[7] = t2;
+	} else {
+		children = $[1];
+		className = $[2];
+		closeButtonRef = $[3];
+		closeLabel = $[4];
+		props = $[5];
+		t1 = $[6];
+		t2 = $[7];
+	}
+	const showCloseButton = t1 === undefined ? true : t1;
+	const closeButtonPlacement = t2 === undefined ? "content" : t2;
+	const t3 = props.forceMount;
+	let t4;
+	if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
+		t4 = /* @__PURE__ */ _jsx(MotionSlot, {
+			kind: "overlay",
+			children: /* @__PURE__ */ _jsx(DialogOverlay, { forceMount: true })
+		});
+		$[8] = t4;
+	} else {
+		t4 = $[8];
+	}
+	const t5 = showCloseButton ? closeButtonPlacement : undefined;
+	const t6 = closeButtonPlacement === "viewport" ? "inset-0 m-auto h-fit" : "top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2";
+	let t7;
+	if ($[9] !== className || $[10] !== t6) {
+		t7 = cn(dialogSurfaceClassName, "fixed grid w-full max-w-[calc(100%-2rem)] max-h-[calc(100svh-2rem)] overflow-y-auto overscroll-contain sm:max-w-[440px]", t6, className);
+		$[9] = className;
+		$[10] = t6;
+		$[11] = t7;
+	} else {
+		t7 = $[11];
+	}
+	let t8;
+	if ($[12] !== props.onInteractOutside) {
+		t8 = keepOpenOnToastInteraction(props.onInteractOutside);
+		$[12] = props.onInteractOutside;
+		$[13] = t8;
+	} else {
+		t8 = $[13];
+	}
+	let t9;
+	if ($[14] !== closeButtonPlacement || $[15] !== closeButtonRef || $[16] !== closeLabel || $[17] !== showCloseButton) {
+		t9 = showCloseButton && /* @__PURE__ */ _jsx(DialogSurfaceCloseButton, {
+			kind: "dialog",
+			placement: closeButtonPlacement,
+			label: closeLabel,
+			buttonRef: closeButtonRef
+		});
+		$[14] = closeButtonPlacement;
+		$[15] = closeButtonRef;
+		$[16] = closeLabel;
+		$[17] = showCloseButton;
+		$[18] = t9;
+	} else {
+		t9 = $[18];
+	}
+	let t10;
+	if ($[19] !== children || $[20] !== props || $[21] !== t5 || $[22] !== t7 || $[23] !== t8 || $[24] !== t9) {
+		t10 = /* @__PURE__ */ _jsxs(React.Fragment, { children: [t4, /* @__PURE__ */ _jsx(MotionSlot, {
+			kind: "dialog",
+			children: /* @__PURE__ */ _jsxs(DialogPrimitive.Content, {
+				forceMount: true,
+				"data-slot": "dialog-content",
+				"data-close-button-placement": t5,
+				className: t7,
+				...props,
+				onInteractOutside: t8,
+				children: [children, t9]
+			})
+		})] });
+		$[19] = children;
+		$[20] = props;
+		$[21] = t5;
+		$[22] = t7;
+		$[23] = t8;
+		$[24] = t9;
+		$[25] = t10;
+	} else {
+		t10 = $[25];
+	}
+	let t11;
+	if ($[26] !== props.forceMount || $[27] !== t10) {
+		t11 = /* @__PURE__ */ _jsx(DialogPortal, {
+			forceMount: true,
+			children: /* @__PURE__ */ _jsx(MotionPresence, {
+				scope: "dialog",
+				forceMount: t3,
+				children: t10
+			})
+		});
+		$[26] = props.forceMount;
+		$[27] = t10;
+		$[28] = t11;
+	} else {
+		t11 = $[28];
+	}
+	return t11;
+}
+/**
+* Stacks the title and description. While the panel shows its own close button, the header keeps Arc's gap to it so
+* long copy never runs under the button.
+* @param props - Native div properties and optional consumer overrides.
+* @returns The header block.
+*/
+function DialogHeader(t0) {
+	const $ = _c(8);
+	let className;
+	let props;
+	if ($[0] !== t0) {
+		({className, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+	} else {
+		className = $[1];
+		props = $[2];
+	}
+	let t1;
+	if ($[3] !== className) {
+		t1 = cn("flex flex-col gap-(--space-2) in-data-[close-button-placement=content]:pr-[calc(var(--space-8)+var(--space-5))]", className);
+		$[3] = className;
+		$[4] = t1;
+	} else {
+		t1 = $[4];
+	}
+	let t2;
+	if ($[5] !== props || $[6] !== t1) {
+		t2 = /* @__PURE__ */ _jsx("div", {
+			"data-slot": "dialog-header",
+			className: t1,
+			...props
+		});
+		$[5] = props;
+		$[6] = t1;
+		$[7] = t2;
+	} else {
+		t2 = $[7];
+	}
+	return t2;
+}
+/**
+* Separates dialog actions with an edge-to-edge footer under a hairline, bleeding through the panel padding.
+* @param props - Native div properties and optional consumer overrides.
+* @returns The footer block.
+*/
+function DialogFooter(t0) {
+	const $ = _c(8);
+	let className;
+	let props;
+	if ($[0] !== t0) {
+		({className, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+	} else {
+		className = $[1];
+		props = $[2];
+	}
+	let t1;
+	if ($[3] !== className) {
+		t1 = cn(dialogFooterClassName, className);
+		$[3] = className;
+		$[4] = t1;
+	} else {
+		t1 = $[4];
+	}
+	let t2;
+	if ($[5] !== props || $[6] !== t1) {
+		t2 = /* @__PURE__ */ _jsx("div", {
+			"data-slot": "dialog-footer",
+			className: t1,
+			...props
+		});
+		$[5] = props;
+		$[6] = t1;
+		$[7] = t2;
+	} else {
+		t2 = $[7];
+	}
+	return t2;
+}
+/**
+* Renders the dialog heading in Arc's title type. Plain text that changes while open swaps with Arc's rise.
+* @param props - Primitive properties and optional consumer overrides.
+* @returns The styled primitive with its original interaction contract.
+*/
+function DialogTitle(t0) {
+	const $ = _c(13);
+	let children;
+	let className;
+	let props;
+	if ($[0] !== t0) {
+		({className, children, ...props} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = className;
+		$[3] = props;
+	} else {
+		children = $[1];
+		className = $[2];
+		props = $[3];
+	}
+	let t1;
+	if ($[4] !== className) {
+		t1 = cn(dialogTitleClassName, className);
+		$[4] = className;
+		$[5] = t1;
+	} else {
+		t1 = $[5];
+	}
+	let t2;
+	if ($[6] !== children || $[7] !== props.asChild) {
+		t2 = withDialogSwapText(children, props.asChild);
+		$[6] = children;
+		$[7] = props.asChild;
+		$[8] = t2;
+	} else {
+		t2 = $[8];
+	}
+	let t3;
+	if ($[9] !== props || $[10] !== t1 || $[11] !== t2) {
+		t3 = /* @__PURE__ */ _jsx(DialogPrimitive.Title, {
+			"data-slot": "dialog-title",
+			className: t1,
+			...props,
+			children: t2
+		});
+		$[9] = props;
+		$[10] = t1;
+		$[11] = t2;
+		$[12] = t3;
+	} else {
+		t3 = $[12];
+	}
+	return t3;
+}
+/**
+* Renders the dialog description in Arc's secondary text. Plain text that changes while open swaps with Arc's rise.
+* @param props - Primitive properties and optional consumer overrides.
+* @returns The styled primitive with its original interaction contract.
+*/
+function DialogDescription(t0) {
+	const $ = _c(13);
+	let children;
+	let className;
+	let props;
+	if ($[0] !== t0) {
+		({className, children, ...props} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = className;
+		$[3] = props;
+	} else {
+		children = $[1];
+		className = $[2];
+		props = $[3];
+	}
+	let t1;
+	if ($[4] !== className) {
+		t1 = cn(dialogDescriptionClassName, className);
+		$[4] = className;
+		$[5] = t1;
+	} else {
+		t1 = $[5];
+	}
+	let t2;
+	if ($[6] !== children || $[7] !== props.asChild) {
+		t2 = withDialogSwapText(children, props.asChild);
+		$[6] = children;
+		$[7] = props.asChild;
+		$[8] = t2;
+	} else {
+		t2 = $[8];
+	}
+	let t3;
+	if ($[9] !== props || $[10] !== t1 || $[11] !== t2) {
+		t3 = /* @__PURE__ */ _jsx(DialogPrimitive.Description, {
+			"data-slot": "dialog-description",
+			className: t1,
+			...props,
+			children: t2
+		});
+		$[9] = props;
+		$[10] = t1;
+		$[11] = t2;
+		$[12] = t3;
+	} else {
+		t3 = $[12];
+	}
+	return t3;
+}
+export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger };

package/dist/components/primitives/dropdown-menu-items.d.ts

@@ -0,0 +1,59 @@
+/**
+ * Internal renderer of Arc's data-driven menu items (https://uiarc.dev, MIT License, see THIRD_PARTY_NOTICES.md):
+ * turns `DropdownItem` objects into action, link, checkbox and radio rows of the dropdown menu primitive, with Arc's
+ * separators and danger tone. Shared by the public closed `DropdownMenu` and by composite components, such as
+ * `AccountMenu` and `DataTable`, that take extra items from their consumers.
+ */
+import type { AriaAttributes, HTMLAttributeAnchorTarget, ReactNode } from "react";
+/** Extra attributes for one item row: `data-*` attributes and ARIA attributes such as `aria-current`. */
+export type DropdownItemAttributes = AriaAttributes & {
+    [attribute: `data-${string}`]: string | number | boolean | undefined;
+};
+/** One row of a dropdown menu. */
+export type DropdownItem = {
+    /** Stable key. Defaults to `label` when it is a string, so keep string labels unique. */
+    id?: string;
+    /** Visible text of the row. */
+    label: ReactNode;
+    /** Called when the row is chosen. Call `event.preventDefault()` to keep the menu open. */
+    onSelect?: (event: Event) => void;
+    /** Skipped by the keyboard and dimmed. */
+    disabled?: boolean;
+    /** Leading icon. */
+    icon?: ReactNode;
+    /** Draws Arc's danger tone; say what the action destroys in the label. */
+    destructive?: boolean;
+    /** Draws a separator before the row, to group the items around it. */
+    separatorBefore?: boolean;
+    /** Renders the row as a link through the provider's `Link`, so routers can navigate client-side. */
+    href?: string;
+    /** Target of a link row. */
+    target?: HTMLAttributeAnchorTarget;
+    /** Relationship of a link row, such as `noreferrer` for external pages. */
+    rel?: string;
+    /** Renders the row as a checkbox with this state and its check at the end. */
+    checked?: boolean;
+    /** Content at the end of the row, such as a shortcut or a count. */
+    trailing?: ReactNode;
+    /** Value of the row inside a menu with `selection`; the row becomes a radio item. */
+    value?: string;
+    /** Class added to the row. */
+    className?: string;
+    /** Extra `data-*` and ARIA attributes of the row. */
+    itemProps?: DropdownItemAttributes;
+};
+/** Single selection of a menu: rows with a `value` render as radio items. */
+export type DropdownMenuSelection = {
+    value: string;
+    onValueChange: (value: string) => void;
+};
+/**
+ * Renders a list of rows inside a dropdown menu content, with the separators they ask for. With a `selection`, the
+ * rows live in one radio group and the rows that carry a `value` become its radio items.
+ * @param props - The rows and the optional single selection.
+ * @returns The rows.
+ */
+export declare function DropdownMenuItems({ items, selection }: {
+    items: DropdownItem[];
+    selection?: DropdownMenuSelection;
+}): import("react").JSX.Element;