@igne-agency/react-web-ui 0.3.0 → 0.4.0

package/dist/components/detail-list/detail-list.d.ts

@@ -1,40 +1,41 @@
-import type { ReactNode } from "react";
-import { type SvgComponent } from "../icon/icon.tsx";
-type PartProps = Readonly<{
-    className?: string;
-    children?: ReactNode;
-}>;
-type RowAction = Readonly<{
-    /** A control at the row's end, whose label names the term it acts on. */
-    action?: ReactNode;
-}>;
-export type DetailListRootProps = PartProps;
-export type DetailListRowProps = PartProps & RowAction & Readonly<{
-    /** What the detail is, such as "Phone number". */
-    term: ReactNode;
-}>;
-export type DetailListIconRowProps = PartProps & RowAction & Readonly<{
-    /** The pictogram that stands for the term. */
-    svg: SvgComponent;
-    /** The term the pictogram stands for, as its accessible name. */
-    label: string;
-}>;
-declare const Root: ({ className, children, }: DetailListRootProps) => ReactNode;
-declare const Row: ({ term, action, className, children, }: DetailListRowProps) => ReactNode;
-declare const IconRow: ({ svg, label, action, className, children, }: DetailListIconRowProps) => ReactNode;
+import type { ComponentPropsWithRef, ReactNode } from "react";
+export type DetailListRootProps = ComponentPropsWithRef<"dl">;
+export type DetailListRowProps = ComponentPropsWithRef<"div">;
+export type DetailListIconRowProps = ComponentPropsWithRef<"div">;
+export type DetailListTermProps = ComponentPropsWithRef<"dt">;
+export type DetailListDetailProps = ComponentPropsWithRef<"dd">;
+export type DetailListActionProps = ComponentPropsWithRef<"dd">;
+/** The list: a `<dl>` of rows. */
+declare const Root: ({ className, ...props }: DetailListRootProps) => ReactNode;
+/** One row: a `Term`, its `Detail`, and an optional `Action`. The term takes a third of the row. */
+declare const Row: ({ className, ...props }: DetailListRowProps) => ReactNode;
+/** A row whose `Term` is a pictogram, which takes only its own width. */
+declare const IconRow: ({ className, ...props }: DetailListIconRowProps) => ReactNode;
+/** What the detail is, such as "Phone number", or a pictogram with that as its accessible name. */
+declare const Term: ({ className, ...props }: DetailListTermProps) => ReactNode;
+/** The stored information that answers the term. */
+declare const Detail: ({ className, ...props }: DetailListDetailProps) => ReactNode;
+/** A control at the row's end, whose label names the term it acts on. */
+declare const Action: ({ className, ...props }: DetailListActionProps) => ReactNode;
 type DetailListNamespace = Readonly<{
     Root: typeof Root;
     Row: typeof Row;
     IconRow: typeof IconRow;
+    Term: typeof Term;
+    Detail: typeof Detail;
+    Action: typeof Action;
 }>;
 /**
  * Stored information, as the terms that name it and the details that answer
- * them, in a description list. `IconRow` is a row whose term is a pictogram.
- * A row's `action` sits at its end, and its control names the term it acts on.
+ * them, in a description list. Each row groups a `Term`, its `Detail` and an
+ * optional `Action`; an `IconRow` is a row whose term is a pictogram.
  *
  * @example
  * <DetailList.Root>
- * 	<DetailList.Row term="Phone number">{client.phone}</DetailList.Row>
+ * 	<DetailList.Row>
+ * 		<DetailList.Term>Phone number</DetailList.Term>
+ * 		<DetailList.Detail>{client.phone}</DetailList.Detail>
+ * 	</DetailList.Row>
  * </DetailList.Root>
  */
 export declare const DetailList: DetailListNamespace;

package/dist/components/detail-list/detail-list.js

@@ -1,163 +1,219 @@
-import { Icon } from "../icon/icon.js";
 import detail_list_module_default from "./detail-list.module.js";
 import { c } from "react/compiler-runtime";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
+import { jsx } from "react/jsx-runtime";
 // src/components/detail-list/detail-list.tsx
+/** The list: a `<dl>` of rows. */
 var Root = (t0) => {
-	const $ = c(5);
-	const { className, children } = 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 ($[0] !== className) {
+	if ($[3] !== className) {
 		t1 = clsx(detail_list_module_default.list, className);
-		$[0] = className;
-		$[1] = t1;
-	} else t1 = $[1];
+		$[3] = className;
+		$[4] = t1;
+	} else t1 = $[4];
 	let t2;
-	if ($[2] !== children || $[3] !== t1) {
+	if ($[5] !== props || $[6] !== t1) {
 		t2 = /* @__PURE__ */ jsx("dl", {
 			className: t1,
-			children
+			...props
 		});
-		$[2] = children;
-		$[3] = t1;
-		$[4] = t2;
-	} else t2 = $[4];
+		$[5] = props;
+		$[6] = t1;
+		$[7] = t2;
+	} else t2 = $[7];
 	return t2;
 };
-var ActionSlot = (t0) => {
-	const $ = c(2);
-	const { action } = t0;
-	let t1;
-	if ($[0] !== action) {
-		t1 = action === void 0 ? null : /* @__PURE__ */ jsx("dd", {
-			className: detail_list_module_default.action,
-			children: action
-		});
-		$[0] = action;
-		$[1] = t1;
-	} else t1 = $[1];
-	return t1;
-};
+/** One row: a `Term`, its `Detail`, and an optional `Action`. The term takes a third of the row. */
 var Row = (t0) => {
-	const $ = c(13);
-	const { term, action, className, children } = 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 ($[0] !== className) {
+	if ($[3] !== className) {
 		t1 = clsx(detail_list_module_default.row, className);
-		$[0] = className;
-		$[1] = t1;
-	} else t1 = $[1];
+		$[3] = className;
+		$[4] = t1;
+	} else t1 = $[4];
 	let t2;
-	if ($[2] !== term) {
-		t2 = /* @__PURE__ */ jsx("dt", {
-			className: detail_list_module_default.term,
-			children: term
-		});
-		$[2] = term;
-		$[3] = t2;
-	} else t2 = $[3];
-	let t3;
-	if ($[4] !== children) {
-		t3 = /* @__PURE__ */ jsx("dd", {
-			className: detail_list_module_default.detail,
-			children
-		});
-		$[4] = children;
-		$[5] = t3;
-	} else t3 = $[5];
-	let t4;
-	if ($[6] !== action) {
-		t4 = /* @__PURE__ */ jsx(ActionSlot, { action });
-		$[6] = action;
-		$[7] = t4;
-	} else t4 = $[7];
-	let t5;
-	if ($[8] !== t1 || $[9] !== t2 || $[10] !== t3 || $[11] !== t4) {
-		t5 = /* @__PURE__ */ jsxs("div", {
+	if ($[5] !== props || $[6] !== t1) {
+		t2 = /* @__PURE__ */ jsx("div", {
 			className: t1,
-			children: [
-				t2,
-				t3,
-				t4
-			]
+			...props
 		});
-		$[8] = t1;
-		$[9] = t2;
-		$[10] = t3;
-		$[11] = t4;
-		$[12] = t5;
-	} else t5 = $[12];
-	return t5;
+		$[5] = props;
+		$[6] = t1;
+		$[7] = t2;
+	} else t2 = $[7];
+	return t2;
 };
+/** A row whose `Term` is a pictogram, which takes only its own width. */
 var IconRow = (t0) => {
-	const $ = c(14);
-	const { svg, label, action, className, children } = 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 ($[0] !== className) {
+	if ($[3] !== className) {
 		t1 = clsx(detail_list_module_default.iconRow, className);
-		$[0] = className;
-		$[1] = t1;
-	} else t1 = $[1];
+		$[3] = className;
+		$[4] = t1;
+	} else t1 = $[4];
+	let t2;
+	if ($[5] !== props || $[6] !== t1) {
+		t2 = /* @__PURE__ */ jsx("div", {
+			className: t1,
+			...props
+		});
+		$[5] = props;
+		$[6] = t1;
+		$[7] = t2;
+	} else t2 = $[7];
+	return t2;
+};
+/** What the detail is, such as "Phone number", or a pictogram with that as its accessible name. */
+var Term = (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 = clsx(detail_list_module_default.term, className);
+		$[3] = className;
+		$[4] = t1;
+	} else t1 = $[4];
 	let t2;
-	if ($[2] !== label || $[3] !== svg) {
+	if ($[5] !== props || $[6] !== t1) {
 		t2 = /* @__PURE__ */ jsx("dt", {
-			className: detail_list_module_default.term,
-			children: /* @__PURE__ */ jsx(Icon, {
-				svg,
-				label
-			})
+			className: t1,
+			...props
 		});
-		$[2] = label;
-		$[3] = svg;
-		$[4] = t2;
-	} else t2 = $[4];
-	let t3;
-	if ($[5] !== children) {
-		t3 = /* @__PURE__ */ jsx("dd", {
-			className: detail_list_module_default.detail,
-			children
+		$[5] = props;
+		$[6] = t1;
+		$[7] = t2;
+	} else t2 = $[7];
+	return t2;
+};
+/** The stored information that answers the term. */
+var Detail = (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 = clsx(detail_list_module_default.detail, className);
+		$[3] = className;
+		$[4] = t1;
+	} else t1 = $[4];
+	let t2;
+	if ($[5] !== props || $[6] !== t1) {
+		t2 = /* @__PURE__ */ jsx("dd", {
+			className: t1,
+			...props
 		});
-		$[5] = children;
-		$[6] = t3;
-	} else t3 = $[6];
-	let t4;
-	if ($[7] !== action) {
-		t4 = /* @__PURE__ */ jsx(ActionSlot, { action });
-		$[7] = action;
-		$[8] = t4;
-	} else t4 = $[8];
-	let t5;
-	if ($[9] !== t1 || $[10] !== t2 || $[11] !== t3 || $[12] !== t4) {
-		t5 = /* @__PURE__ */ jsxs("div", {
+		$[5] = props;
+		$[6] = t1;
+		$[7] = t2;
+	} else t2 = $[7];
+	return t2;
+};
+/** A control at the row's end, whose label names the term it acts on. */
+var Action = (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 = clsx(detail_list_module_default.action, className);
+		$[3] = className;
+		$[4] = t1;
+	} else t1 = $[4];
+	let t2;
+	if ($[5] !== props || $[6] !== t1) {
+		t2 = /* @__PURE__ */ jsx("dd", {
 			className: t1,
-			children: [
-				t2,
-				t3,
-				t4
-			]
+			...props
 		});
-		$[9] = t1;
-		$[10] = t2;
-		$[11] = t3;
-		$[12] = t4;
-		$[13] = t5;
-	} else t5 = $[13];
-	return t5;
+		$[5] = props;
+		$[6] = t1;
+		$[7] = t2;
+	} else t2 = $[7];
+	return t2;
 };
 /**
 * Stored information, as the terms that name it and the details that answer
-* them, in a description list. `IconRow` is a row whose term is a pictogram.
-* A row's `action` sits at its end, and its control names the term it acts on.
+* them, in a description list. Each row groups a `Term`, its `Detail` and an
+* optional `Action`; an `IconRow` is a row whose term is a pictogram.
 *
 * @example
 * <DetailList.Root>
-* 	<DetailList.Row term="Phone number">{client.phone}</DetailList.Row>
+* 	<DetailList.Row>
+* 		<DetailList.Term>Phone number</DetailList.Term>
+* 		<DetailList.Detail>{client.phone}</DetailList.Detail>
+* 	</DetailList.Row>
 * </DetailList.Root>
 */
 var DetailList = {
 	Root,
 	Row,
-	IconRow
+	IconRow,
+	Term,
+	Detail,
+	Action
 };
 export { DetailList };

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

@@ -1,26 +1,49 @@
 import { Dialog as BaseDialog } from "@base-ui/react/dialog";
 import type { ComponentProps, ReactNode } from "react";
 import { type CloseButtonProps } from "../button/close-button.tsx";
+export type DialogRootProps<Payload = unknown> = Omit<BaseDialog.Root.Props<Payload>, "open" | "defaultOpen" | "onOpenChange" | "modal" | "children"> & Readonly<{
+    /** Whether the dialog is open. Leave it out for a dialog that keeps its own state. */
+    open?: boolean;
+    /** Whether the dialog starts open, when it keeps its own state. @default false */
+    defaultOpen?: boolean;
+    /** Called with the new open state when the dialog opens or closes. */
+    onOpenChange?: BaseDialog.Root.Props<Payload>["onOpenChange"];
+    /** Whether focus stays inside the dialog and the page behind it is inert while it is open. @default true */
+    modal?: BaseDialog.Root.Props<Payload>["modal"];
+    /** The trigger and the dialog's content. */
+    children?: BaseDialog.Root.Props<Payload>["children"];
+}>;
+/** Holds the dialog's open state for its parts. It renders no element of its own. */
+declare const Root: <Payload>(props: DialogRootProps<Payload>) => ReactNode;
+/** The dimmed layer behind a modal dialog. */
 declare const Backdrop: ({ className, ...props }: ComponentProps<typeof BaseDialog.Backdrop>) => ReactNode;
+/** The dialog's surface. */
 declare const Popup: ({ className, ...props }: ComponentProps<typeof BaseDialog.Popup>) => ReactNode;
+/** The dialog's heading, which names it. */
 declare const Title: ({ className, ...props }: ComponentProps<typeof BaseDialog.Title>) => ReactNode;
-export type DialogHeaderProps = Readonly<{
-    children?: ReactNode;
-    className?: string;
-}>;
+export type DialogHeaderProps = ComponentProps<"div">;
 /** The title's line. Put a `Dialog.CloseButton` in it to trail a way out. */
-declare const Header: ({ children, className, }: DialogHeaderProps) => ReactNode;
-export type DialogCloseButtonProps = Pick<CloseButtonProps, "closeLabel">;
-/** The icon-only way out, for a header or a footer. */
-declare const CloseButton: ({ closeLabel, }: DialogCloseButtonProps) => ReactNode;
+declare const Header: ({ className, ...props }: DialogHeaderProps) => ReactNode;
+export type DialogCloseButtonProps = Pick<CloseButtonProps, "closeLabel" | "icon">;
+/** The icon-only way out, for a header or a footer, drawn with the app's `icon`. */
+declare const CloseButton: ({ closeLabel, icon, }: DialogCloseButtonProps) => ReactNode;
+export type DialogContentProps = ComponentProps<typeof BaseDialog.Popup> & Readonly<{
+    /** The element the dialog is portalled into. @default document.body */
+    container?: BaseDialog.Portal.Props["container"];
+}>;
+/** `Portal`, `Backdrop` and `Popup` in one: the dialog's surface, above the page. */
+declare const Content: ({ container, ...props }: DialogContentProps) => ReactNode;
+/** The dialog's content, scrolling when it outgrows the surface. */
 declare const Body: ({ className, ...props }: ComponentProps<"div">) => ReactNode;
+/** The row the dialog's actions sit on. */
 declare const Footer: ({ className, ...props }: ComponentProps<"div">) => ReactNode;
 type DialogParts = Readonly<{
-    Root: typeof BaseDialog.Root;
+    Root: typeof Root;
     Trigger: typeof BaseDialog.Trigger;
     Portal: typeof BaseDialog.Portal;
     Backdrop: typeof Backdrop;
     Popup: typeof Popup;
+    Content: typeof Content;
     Title: typeof Title;
     Description: typeof BaseDialog.Description;
     Close: typeof BaseDialog.Close;
@@ -31,28 +54,25 @@ type DialogParts = Readonly<{
     createHandle: typeof BaseDialog.createHandle;
 }>;
 /**
- * Dialog chrome over base-ui's Dialog. Provides `Header` / `Body` / `Footer`
- * regions plus a styled `Backdrop` and `Popup`. Footer actions are a slot.
+ * A dialog over base-ui's `Dialog`, in `Header`, `Body` and `Footer` regions.
+ * `Content` bundles the portal, backdrop and popup; the unbundled parts stay.
  *
  * @example
  * <Dialog.Root>
  *   <Dialog.Trigger>Edit</Dialog.Trigger>
- *   <Dialog.Portal>
- *     <Dialog.Backdrop />
- *     <Dialog.Popup>
- *       <Dialog.Header>
- *         <Dialog.Title>Discard changes?</Dialog.Title>
- *         <Dialog.CloseButton closeLabel="Close" />
- *       </Dialog.Header>
- *       <Dialog.Body>
- *         <Dialog.Description>Your edits will be lost.</Dialog.Description>
- *       </Dialog.Body>
- *       <Dialog.Footer>
- *         <Dialog.Close>Keep editing</Dialog.Close>
- *         <button onClick={discard}>Discard</button>
- *       </Dialog.Footer>
- *     </Dialog.Popup>
- *   </Dialog.Portal>
+ *   <Dialog.Content>
+ *     <Dialog.Header>
+ *       <Dialog.Title>Discard changes?</Dialog.Title>
+ *       <Dialog.CloseButton closeLabel="Close" icon={<CloseIcon />} />
+ *     </Dialog.Header>
+ *     <Dialog.Body>
+ *       <Dialog.Description>Your edits will be lost.</Dialog.Description>
+ *     </Dialog.Body>
+ *     <Dialog.Footer>
+ *       <Dialog.Close>Keep editing</Dialog.Close>
+ *       <button onClick={discard}>Discard</button>
+ *     </Dialog.Footer>
+ *   </Dialog.Content>
  * </Dialog.Root>
  */
 export declare const Dialog: DialogParts;