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

package/dist/components/dialog/dialog.css

@@ -1,78 +1,78 @@
 @layer kit.reset, kit.base, kit.components;
 @layer kit.components {
-  ._backdrop_1ki7n_3 {
-    --overlay-dim: 0.4;
+  ._backdrop_jzq5w_3 {
+    --_overlay-dim: 0.4;
     --overlay-opacity: 1;
     position: fixed;
     inset: 0;
-    background-color: rgb(0, 0, 0, var(--overlay-dim));
-    backdrop-filter: blur(1px);
+    background-color: var(--overlay-bg, rgb(0, 0, 0, var(--overlay-dim, var(--_overlay-dim))));
+    backdrop-filter: var(--overlay-backdrop-filter, blur(1px));
     opacity: var(--overlay-opacity);
   }
   @media not (prefers-reduced-motion) {
-    ._backdrop_1ki7n_3 {
+    ._backdrop_jzq5w_3 {
       transition: opacity var(--sys-motion-short) var(--sys-motion-standard);
     }
   }
-  html[data-theme="dark"] ._backdrop_1ki7n_3 {
-    --overlay-dim: 0.6;
+  html[data-theme="dark"] ._backdrop_jzq5w_3 {
+    --_overlay-dim: 0.6;
   }
   @media (prefers-color-scheme: dark) {
-    html:not([data-theme="light"]) ._backdrop_1ki7n_3 {
-      --overlay-dim: 0.6;
+    html:not([data-theme="light"]) ._backdrop_jzq5w_3 {
+      --_overlay-dim: 0.6;
     }
   }
-  ._backdrop_1ki7n_3[data-starting-style], ._backdrop_1ki7n_3[data-ending-style] {
+  ._backdrop_jzq5w_3[data-starting-style], ._backdrop_jzq5w_3[data-ending-style] {
     opacity: 0;
   }
-  ._popup_1ki7n_28 {
+  ._popup_jzq5w_28 {
     position: fixed;
     top: 50%;
     left: 50%;
     box-sizing: border-box;
-    inline-size: min(32rem, 100dvw - var(--sys-unit-16));
+    inline-size: min(var(--dialog-inline-size, 32rem), var(--dialog-max-inline-size, calc(100dvw - var(--sys-unit-16))));
     border: none;
-    border-radius: var(--sys-radius-xl);
-    background: var(--sys-color-surface-overlay);
-    color: var(--sys-color-text);
+    border-radius: var(--dialog-radius, var(--sys-radius-xl));
+    background: var(--dialog-bg, var(--sys-color-surface-overlay));
+    color: var(--dialog-fg, var(--sys-color-text));
     transform: translate(-50%, -50%);
   }
   @media not (prefers-reduced-motion) {
-    ._popup_1ki7n_28 {
+    ._popup_jzq5w_28 {
       transition: opacity var(--sys-motion-short) var(--sys-motion-standard), transform var(--sys-motion-short) var(--sys-motion-emphasized);
     }
   }
-  ._popup_1ki7n_28[data-starting-style], ._popup_1ki7n_28[data-ending-style] {
+  ._popup_jzq5w_28[data-starting-style], ._popup_jzq5w_28[data-ending-style] {
     opacity: 0;
     transform: translate(-50%, -48%) scale(0.96);
   }
-  ._popup_1ki7n_28 {
+  ._popup_jzq5w_28 {
     display: flex;
     flex-direction: column;
-    max-block-size: calc(100dvh - var(--sys-unit-24));
+    max-block-size: var(--dialog-max-block-size, calc(100dvh - var(--sys-unit-24)));
   }
-  ._header_1ki7n_54 {
+  ._header_jzq5w_54 {
     display: flex;
     align-items: flex-start;
     justify-content: space-between;
-    gap: var(--sys-unit-10);
-    padding: var(--sys-unit-20) var(--sys-unit-20) var(--sys-unit-8);
+    gap: var(--dialog-header-gap, var(--sys-unit-10));
+    padding: var(--dialog-header-pad, var(--sys-unit-20) var(--sys-unit-20) var(--sys-unit-8));
   }
-  ._title_1ki7n_61 {
-    color: var(--sys-color-text);
-    font: var(--sys-font-heading-small);
+  ._title_jzq5w_61 {
+    color: var(--dialog-title-fg, var(--dialog-fg, var(--sys-color-text)));
+    font: var(--dialog-title-font, var(--sys-font-heading-small));
   }
-  ._body_1ki7n_65 {
+  ._body_jzq5w_65 {
     overflow-y: auto;
-    padding: var(--sys-unit-8) var(--sys-unit-20);
-    color: var(--sys-color-text);
-    font: var(--sys-font-body-medium);
+    padding: var(--dialog-body-pad, var(--sys-unit-8) var(--sys-unit-20));
+    color: var(--dialog-body-fg, var(--dialog-fg, var(--sys-color-text)));
+    font: var(--dialog-body-font, var(--sys-font-body-medium));
   }
-  ._footer_1ki7n_71 {
+  ._footer_jzq5w_71 {
     display: flex;
     flex-wrap: wrap;
     justify-content: end;
-    gap: var(--sys-unit-8);
-    padding: var(--sys-unit-12) var(--sys-unit-20) var(--sys-unit-20);
+    gap: var(--dialog-footer-gap, var(--sys-unit-8));
+    padding: var(--dialog-footer-pad, var(--sys-unit-12) var(--sys-unit-20) var(--sys-unit-20));
   }
 }

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

@@ -1,6 +1,5 @@
 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;
@@ -22,11 +21,8 @@ declare const Popup: ({ className, ...props }: ComponentProps<typeof BaseDialog.
 /** The dialog's heading, which names it. */
 declare const Title: ({ className, ...props }: ComponentProps<typeof BaseDialog.Title>) => ReactNode;
 export type DialogHeaderProps = ComponentProps<"div">;
-/** The title's line. Put a `Dialog.CloseButton` in it to trail a way out. */
+/** The title's line. Put a `Dialog.Close` in it to trail a way out. */
 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"];
@@ -47,7 +43,6 @@ type DialogParts = Readonly<{
     Title: typeof Title;
     Description: typeof BaseDialog.Description;
     Close: typeof BaseDialog.Close;
-    CloseButton: typeof CloseButton;
     Header: typeof Header;
     Body: typeof Body;
     Footer: typeof Footer;
@@ -63,7 +58,13 @@ type DialogParts = Readonly<{
  *   <Dialog.Content>
  *     <Dialog.Header>
  *       <Dialog.Title>Discard changes?</Dialog.Title>
- *       <Dialog.CloseButton closeLabel="Close" icon={<CloseIcon />} />
+ *       <Dialog.Close
+ *         render={
+ *           <IconButton label="Close" variant="tertiary">
+ *             <CloseIcon />
+ *           </IconButton>
+ *         }
+ *       />
  *     </Dialog.Header>
  *     <Dialog.Body>
  *       <Dialog.Description>Your edits will be lost.</Dialog.Description>

package/dist/components/dialog/dialog.js

@@ -1,4 +1,3 @@
-import { CloseButton as CloseButton$1 } from "../button/close-button.js";
 import dialog_module_default from "./dialog.module.js";
 import { c } from "react/compiler-runtime";
 import { clsx } from "clsx";
@@ -112,7 +111,7 @@ var Title = (t0) => {
 	} else t2 = $[7];
 	return t2;
 };
-/** The title's line. Put a `Dialog.CloseButton` in it to trail a way out. */
+/** The title's line. Put a `Dialog.Close` in it to trail a way out. */
 var Header = (t0) => {
 	const $ = c(8);
 	let className;
@@ -144,28 +143,6 @@ var Header = (t0) => {
 	} else t2 = $[7];
 	return t2;
 };
-/** The icon-only way out, for a header or a footer, drawn with the app's `icon`. */
-var CloseButton = (t0) => {
-	const $ = c(4);
-	const { closeLabel, icon } = t0;
-	let t1;
-	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-		t1 = /* @__PURE__ */ jsx(Dialog.Close, {});
-		$[0] = t1;
-	} else t1 = $[0];
-	let t2;
-	if ($[1] !== closeLabel || $[2] !== icon) {
-		t2 = /* @__PURE__ */ jsx(CloseButton$1, {
-			closeLabel,
-			icon,
-			render: t1
-		});
-		$[1] = closeLabel;
-		$[2] = icon;
-		$[3] = t2;
-	} else t2 = $[3];
-	return t2;
-};
 /** `Portal`, `Backdrop` and `Popup` in one: the dialog's surface, above the page. */
 var Content = (t0) => {
 	const $ = c(9);
@@ -277,7 +254,13 @@ var Footer = (t0) => {
 *   <Dialog.Content>
 *     <Dialog.Header>
 *       <Dialog.Title>Discard changes?</Dialog.Title>
-*       <Dialog.CloseButton closeLabel="Close" icon={<CloseIcon />} />
+*       <Dialog.Close
+*         render={
+*           <IconButton label="Close" variant="tertiary">
+*             <CloseIcon />
+*           </IconButton>
+*         }
+*       />
 *     </Dialog.Header>
 *     <Dialog.Body>
 *       <Dialog.Description>Your edits will be lost.</Dialog.Description>
@@ -299,7 +282,6 @@ var Dialog$1 = {
 	Title,
 	Description: Dialog.Description,
 	Close: Dialog.Close,
-	CloseButton,
 	Header,
 	Body,
 	Footer,

package/dist/components/dialog/dialog.module.js

@@ -1,10 +1,10 @@
 import './dialog.css';// src/components/dialog/dialog.module.scss
-var backdrop = "_backdrop_1ki7n_3";
-var popup = "_popup_1ki7n_28";
-var header = "_header_1ki7n_54";
-var title = "_title_1ki7n_61";
-var body = "_body_1ki7n_65";
-var footer = "_footer_1ki7n_71";
+var backdrop = "_backdrop_jzq5w_3";
+var popup = "_popup_jzq5w_28";
+var header = "_header_jzq5w_54";
+var title = "_title_jzq5w_61";
+var body = "_body_jzq5w_65";
+var footer = "_footer_jzq5w_71";
 var dialog_module_default = {
 	backdrop,
 	popup,

package/dist/components/divider/divider.css

@@ -1,16 +1,16 @@
 @layer kit.reset, kit.base, kit.components;
 @layer kit.components {
-  ._container_1y7jl_3 {
+  ._container_1125n_3 {
     margin-block: var(--divider-space, var(--sys-unit-6));
   }
-  ._divider_1y7jl_6 {
+  ._divider_1125n_6 {
     inline-size: 100%;
     border: none;
-    border-block-start: 1px solid var(--divider-color, var(--sys-color-border));
+    border-block-start: var(--divider-border-width, 1px) solid var(--divider-color, var(--sys-color-border));
   }
-  ._subtitle_1y7jl_11 {
-    margin-block-start: var(--sys-unit-4);
+  ._subtitle_1125n_11 {
+    margin-block-start: var(--divider-subtitle-space, var(--sys-unit-4));
     color: var(--divider-subtitle-fg, var(--sys-color-text-muted));
-    font: var(--sys-font-body-small);
+    font: var(--divider-subtitle-font, var(--sys-font-body-small));
   }
 }

package/dist/components/divider/divider.d.ts

@@ -1,13 +1,47 @@
-import type { ReactNode } from "react";
+import { useRender } from "@base-ui/react/use-render";
+import type { ReactElement, ReactNode } from "react";
+export type DividerRootProps = useRender.ComponentProps<"div">;
+/**
+ * The space around a divider, holding its `Rule` and any `Label`.
+ *
+ * @example
+ * <Divider.Root><Divider.Rule /></Divider.Root>
+ */
+declare const Root: ({ render, className, ref, ...props }: DividerRootProps) => ReactElement;
+export type DividerRuleProps = useRender.ComponentProps<"hr">;
+/**
+ * The rule itself, a bare `<hr>`.
+ *
+ * @example
+ * <Divider.Rule />
+ */
+declare const Rule: ({ render, className, ref, ...props }: DividerRuleProps) => ReactElement;
+export type DividerLabelProps = useRender.ComponentProps<"p">;
+/**
+ * A short line under the rule, naming what follows it.
+ *
+ * @example
+ * <Divider.Label>Earlier messages</Divider.Label>
+ */
+declare const Label: ({ render, className, ref, ...props }: DividerLabelProps) => ReactElement;
 export type DividerProps = Readonly<{
     /** A short line under the rule, naming what follows it. */
     subtitle?: string;
     className?: string;
 }>;
+declare const Prefab: ({ subtitle, className, }: DividerProps) => ReactNode;
+/** The parts of a divider, hanging off its prefab. */
+export type DividerParts = typeof Prefab & Readonly<{
+    Root: typeof Root;
+    Rule: typeof Rule;
+    Label: typeof Label;
+}>;
 /**
  * A horizontal rule between two groups, with an optional subtitle under it.
+ * The parts hanging off it compose one by hand.
  *
  * @example
  * <Divider subtitle="Earlier messages" />
  */
-export declare const Divider: ({ subtitle, className, }: DividerProps) => ReactNode;
+export declare const Divider: DividerParts;
+export {};

package/dist/components/divider/divider.js

@@ -1,47 +1,213 @@
 import divider_module_default from "./divider.module.js";
 import { c } from "react/compiler-runtime";
+import { useRender } from "@base-ui/react/use-render";
 import { clsx } from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
 // src/components/divider/divider.tsx
 /**
-* A horizontal rule between two groups, with an optional subtitle under it.
+* The space around a divider, holding its `Rule` and any `Label`.
 *
 * @example
-* <Divider subtitle="Earlier messages" />
+* <Divider.Root><Divider.Rule /></Divider.Root>
 */
-var Divider = (t0) => {
-	const $ = c(8);
-	const { subtitle, className } = t0;
+var Root = (t0) => {
+	const $ = c(14);
+	let className;
+	let props;
+	let ref;
+	let render;
+	if ($[0] !== t0) {
+		({render, className, ref, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+		$[3] = ref;
+		$[4] = render;
+	} else {
+		className = $[1];
+		props = $[2];
+		ref = $[3];
+		render = $[4];
+	}
 	let t1;
-	if ($[0] !== className) {
+	if ($[5] !== className) {
 		t1 = clsx(divider_module_default.container, className);
-		$[0] = className;
-		$[1] = t1;
-	} else t1 = $[1];
+		$[5] = className;
+		$[6] = t1;
+	} else t1 = $[6];
+	let t2;
+	if ($[7] !== props || $[8] !== t1) {
+		t2 = {
+			...props,
+			className: t1
+		};
+		$[7] = props;
+		$[8] = t1;
+		$[9] = t2;
+	} else t2 = $[9];
+	let t3;
+	if ($[10] !== ref || $[11] !== render || $[12] !== t2) {
+		t3 = {
+			defaultTagName: "div",
+			render,
+			ref,
+			props: t2
+		};
+		$[10] = ref;
+		$[11] = render;
+		$[12] = t2;
+		$[13] = t3;
+	} else t3 = $[13];
+	return useRender(t3);
+};
+/**
+* The rule itself, a bare `<hr>`.
+*
+* @example
+* <Divider.Rule />
+*/
+var Rule = (t0) => {
+	const $ = c(14);
+	let className;
+	let props;
+	let ref;
+	let render;
+	if ($[0] !== t0) {
+		({render, className, ref, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+		$[3] = ref;
+		$[4] = render;
+	} else {
+		className = $[1];
+		props = $[2];
+		ref = $[3];
+		render = $[4];
+	}
+	let t1;
+	if ($[5] !== className) {
+		t1 = clsx(divider_module_default.divider, className);
+		$[5] = className;
+		$[6] = t1;
+	} else t1 = $[6];
 	let t2;
-	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
-		t2 = /* @__PURE__ */ jsx("hr", { className: divider_module_default.divider });
+	if ($[7] !== props || $[8] !== t1) {
+		t2 = {
+			...props,
+			className: t1
+		};
+		$[7] = props;
+		$[8] = t1;
+		$[9] = t2;
+	} else t2 = $[9];
+	let t3;
+	if ($[10] !== ref || $[11] !== render || $[12] !== t2) {
+		t3 = {
+			defaultTagName: "hr",
+			render,
+			ref,
+			props: t2
+		};
+		$[10] = ref;
+		$[11] = render;
+		$[12] = t2;
+		$[13] = t3;
+	} else t3 = $[13];
+	return useRender(t3);
+};
+/**
+* A short line under the rule, naming what follows it.
+*
+* @example
+* <Divider.Label>Earlier messages</Divider.Label>
+*/
+var Label = (t0) => {
+	const $ = c(14);
+	let className;
+	let props;
+	let ref;
+	let render;
+	if ($[0] !== t0) {
+		({render, className, ref, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+		$[3] = ref;
+		$[4] = render;
+	} else {
+		className = $[1];
+		props = $[2];
+		ref = $[3];
+		render = $[4];
+	}
+	let t1;
+	if ($[5] !== className) {
+		t1 = clsx(divider_module_default.subtitle, className);
+		$[5] = className;
+		$[6] = t1;
+	} else t1 = $[6];
+	let t2;
+	if ($[7] !== props || $[8] !== t1) {
+		t2 = {
+			...props,
+			className: t1
+		};
+		$[7] = props;
+		$[8] = t1;
+		$[9] = t2;
+	} else t2 = $[9];
+	let t3;
+	if ($[10] !== ref || $[11] !== render || $[12] !== t2) {
+		t3 = {
+			defaultTagName: "p",
+			render,
+			ref,
+			props: t2
+		};
+		$[10] = ref;
+		$[11] = render;
+		$[12] = t2;
+		$[13] = t3;
+	} else t3 = $[13];
+	return useRender(t3);
+};
+var Prefab = (t0) => {
+	const $ = c(6);
+	const { subtitle, className } = t0;
+	let t1;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = /* @__PURE__ */ jsx(Rule, {});
+		$[0] = t1;
+	} else t1 = $[0];
+	let t2;
+	if ($[1] !== subtitle) {
+		t2 = subtitle === void 0 ? null : /* @__PURE__ */ jsx(Label, { children: subtitle });
+		$[1] = subtitle;
 		$[2] = t2;
 	} else t2 = $[2];
 	let t3;
-	if ($[3] !== subtitle) {
-		t3 = subtitle === void 0 ? null : /* @__PURE__ */ jsx("p", {
-			className: divider_module_default.subtitle,
-			children: subtitle
+	if ($[3] !== className || $[4] !== t2) {
+		t3 = /* @__PURE__ */ jsxs(Root, {
+			className,
+			children: [t1, t2]
 		});
-		$[3] = subtitle;
-		$[4] = t3;
-	} else t3 = $[4];
-	let t4;
-	if ($[5] !== t1 || $[6] !== t3) {
-		t4 = /* @__PURE__ */ jsxs("div", {
-			className: t1,
-			children: [t2, t3]
-		});
-		$[5] = t1;
-		$[6] = t3;
-		$[7] = t4;
-	} else t4 = $[7];
-	return t4;
+		$[3] = className;
+		$[4] = t2;
+		$[5] = t3;
+	} else t3 = $[5];
+	return t3;
 };
+/**
+* A horizontal rule between two groups, with an optional subtitle under it.
+* The parts hanging off it compose one by hand.
+*
+* @example
+* <Divider subtitle="Earlier messages" />
+*/
+var Divider = Object.assign(Prefab, {
+	Root,
+	Rule,
+	Label
+});
 export { Divider };

package/dist/components/divider/divider.module.js

@@ -1,7 +1,7 @@
 import './divider.css';// src/components/divider/divider.module.scss
-var container = "_container_1y7jl_3";
-var divider = "_divider_1y7jl_6";
-var subtitle = "_subtitle_1y7jl_11";
+var container = "_container_1125n_3";
+var divider = "_divider_1125n_6";
+var subtitle = "_subtitle_1125n_11";
 var divider_module_default = {
 	container,
 	divider,