@maanlamp/react-web-ui 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,163 @@
+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";
+// src/components/detail-list/detail-list.tsx
+var Root = (t0) => {
+	const $ = c(5);
+	const { className, children } = t0;
+	let t1;
+	if ($[0] !== className) {
+		t1 = clsx(detail_list_module_default.list, className);
+		$[0] = className;
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] !== children || $[3] !== t1) {
+		t2 = /* @__PURE__ */ jsx("dl", {
+			className: t1,
+			children
+		});
+		$[2] = children;
+		$[3] = t1;
+		$[4] = t2;
+	} else t2 = $[4];
+	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;
+};
+var Row = (t0) => {
+	const $ = c(13);
+	const { term, action, className, children } = t0;
+	let t1;
+	if ($[0] !== className) {
+		t1 = clsx(detail_list_module_default.row, className);
+		$[0] = className;
+		$[1] = t1;
+	} else t1 = $[1];
+	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", {
+			className: t1,
+			children: [
+				t2,
+				t3,
+				t4
+			]
+		});
+		$[8] = t1;
+		$[9] = t2;
+		$[10] = t3;
+		$[11] = t4;
+		$[12] = t5;
+	} else t5 = $[12];
+	return t5;
+};
+var IconRow = (t0) => {
+	const $ = c(14);
+	const { svg, label, action, className, children } = t0;
+	let t1;
+	if ($[0] !== className) {
+		t1 = clsx(detail_list_module_default.iconRow, className);
+		$[0] = className;
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] !== label || $[3] !== svg) {
+		t2 = /* @__PURE__ */ jsx("dt", {
+			className: detail_list_module_default.term,
+			children: /* @__PURE__ */ jsx(Icon, {
+				svg,
+				label
+			})
+		});
+		$[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] = 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", {
+			className: t1,
+			children: [
+				t2,
+				t3,
+				t4
+			]
+		});
+		$[9] = t1;
+		$[10] = t2;
+		$[11] = t3;
+		$[12] = t4;
+		$[13] = t5;
+	} else t5 = $[13];
+	return t5;
+};
+/**
+* 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.
+*
+* @example
+* <DetailList.Root>
+* 	<DetailList.Row term="Phone number">{client.phone}</DetailList.Row>
+* </DetailList.Root>
+*/
+var DetailList = {
+	Root,
+	Row,
+	IconRow
+};
+export { DetailList };

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

@@ -0,0 +1,14 @@
+import './detail-list.css';// src/components/detail-list/detail-list.module.scss
+var list = "_list_16bh4_3";
+var iconRow = "_iconRow_16bh4_7";
+var row = "_row_16bh4_7";
+var action = "_action_16bh4_16";
+var term = "_term_16bh4_26";
+var detail_list_module_default = {
+	list,
+	iconRow,
+	row,
+	action,
+	term
+};
+export { action, detail_list_module_default as default, iconRow, list, row, term };

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

@@ -0,0 +1,2 @@
+export * from "./detail-list.tsx";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/detail-list/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC"}

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

@@ -0,0 +1 @@
+export { DetailList } from "./detail-list.js";

package/dist/components/dialog/dialog.css

@@ -0,0 +1,78 @@
+@layer kit.reset, kit.base, kit.components;
+@layer kit.components {
+  ._backdrop_1ki7n_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);
+    opacity: var(--overlay-opacity);
+  }
+  @media not (prefers-reduced-motion) {
+    ._backdrop_1ki7n_3 {
+      transition: opacity var(--sys-motion-short) var(--sys-motion-standard);
+    }
+  }
+  html[data-theme="dark"] ._backdrop_1ki7n_3 {
+    --overlay-dim: 0.6;
+  }
+  @media (prefers-color-scheme: dark) {
+    html:not([data-theme="light"]) ._backdrop_1ki7n_3 {
+      --overlay-dim: 0.6;
+    }
+  }
+  ._backdrop_1ki7n_3[data-starting-style], ._backdrop_1ki7n_3[data-ending-style] {
+    opacity: 0;
+  }
+  ._popup_1ki7n_28 {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    box-sizing: border-box;
+    inline-size: min(32rem, 100dvw - var(--sys-unit-16));
+    border: none;
+    border-radius: var(--sys-radius-xl);
+    background: var(--sys-color-surface-overlay);
+    color: var(--sys-color-text);
+    transform: translate(-50%, -50%);
+  }
+  @media not (prefers-reduced-motion) {
+    ._popup_1ki7n_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] {
+    opacity: 0;
+    transform: translate(-50%, -48%) scale(0.96);
+  }
+  ._popup_1ki7n_28 {
+    display: flex;
+    flex-direction: column;
+    max-block-size: calc(100dvh - var(--sys-unit-24));
+  }
+  ._header_1ki7n_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);
+  }
+  ._title_1ki7n_61 {
+    color: var(--sys-color-text);
+    font: var(--sys-font-heading-small);
+  }
+  ._body_1ki7n_65 {
+    overflow-y: auto;
+    padding: var(--sys-unit-8) var(--sys-unit-20);
+    color: var(--sys-color-text);
+    font: var(--sys-font-body-medium);
+  }
+  ._footer_1ki7n_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);
+  }
+}

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

@@ -0,0 +1,62 @@
+import { Dialog as BaseDialog } from "@base-ui/react/dialog";
+import type { ComponentProps, ReactNode } from "react";
+declare const Backdrop: ({ className, ...props }: ComponentProps<typeof BaseDialog.Backdrop>) => ReactNode;
+declare const Popup: ({ className, ...props }: ComponentProps<typeof BaseDialog.Popup>) => ReactNode;
+declare const Title: ({ className, ...props }: ComponentProps<typeof BaseDialog.Title>) => ReactNode;
+export type DialogHeaderProps = Readonly<{
+    children?: ReactNode;
+    className?: string;
+}>;
+/** 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 = Readonly<{
+    /** Accessible name, surfaced as the tooltip hint and the `aria-label`. */
+    label: string;
+}>;
+/** The icon-only way out, for a header or a footer. */
+declare const CloseButton: ({ label, }: DialogCloseButtonProps) => ReactNode;
+declare const Body: ({ className, ...props }: ComponentProps<"div">) => ReactNode;
+declare const Footer: ({ className, ...props }: ComponentProps<"div">) => ReactNode;
+type DialogParts = Readonly<{
+    Root: typeof BaseDialog.Root;
+    Trigger: typeof BaseDialog.Trigger;
+    Portal: typeof BaseDialog.Portal;
+    Backdrop: typeof Backdrop;
+    Popup: typeof Popup;
+    Title: typeof Title;
+    Description: typeof BaseDialog.Description;
+    Close: typeof BaseDialog.Close;
+    CloseButton: typeof CloseButton;
+    Header: typeof Header;
+    Body: typeof Body;
+    Footer: typeof Footer;
+    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.
+ *
+ * @example
+ * <Dialog.Root>
+ *   <Dialog.Trigger>Edit</Dialog.Trigger>
+ *   <Dialog.Portal>
+ *     <Dialog.Backdrop />
+ *     <Dialog.Popup>
+ *       <Dialog.Header>
+ *         <Dialog.Title>Discard changes?</Dialog.Title>
+ *         <Dialog.CloseButton label="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.Root>
+ */
+export declare const Dialog: DialogParts;
+export {};
+//# sourceMappingURL=dialog.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"dialog.d.ts","sourceRoot":"","sources":["../../../src/components/dialog/dialog.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAG7D,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvD,QAAA,MAAM,QAAQ,4BAGX,cAAc,CAChB,OAAO,UAAU,CAAC,QAAQ,CAC1B,KAAG,SAKH,CAAC;AAEF,QAAA,MAAM,KAAK,4BAGR,cAAc,CAAC,OAAO,UAAU,CAAC,KAAK,CAAC,KAAG,SAK5C,CAAC;AAEF,QAAA,MAAM,KAAK,4BAGR,cAAc,CAAC,OAAO,UAAU,CAAC,KAAK,CAAC,KAAG,SAK5C,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG,QAAQ,CAAC;IACxC,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC,CAAC;AAEH,6EAA6E;AAC7E,QAAA,MAAM,MAAM,6BAGT,iBAAiB,KAAG,SAItB,CAAC;AAEF,MAAM,MAAM,sBAAsB,GAAG,QAAQ,CAAC;IAC7C,0EAA0E;IAC1E,KAAK,EAAE,MAAM,CAAC;CACd,CAAC,CAAC;AAEH,uDAAuD;AACvD,QAAA,MAAM,WAAW,eAEd,sBAAsB,KAAG,SAQ3B,CAAC;AAEF,QAAA,MAAM,IAAI,4BAGP,cAAc,CAAC,KAAK,CAAC,KAAG,SAK1B,CAAC;AAEF,QAAA,MAAM,MAAM,4BAGT,cAAc,CAAC,KAAK,CAAC,KAAG,SAK1B,CAAC;AAEF,KAAK,WAAW,GAAG,QAAQ,CAAC;IAC3B,IAAI,EAAE,OAAO,UAAU,CAAC,IAAI,CAAC;IAC7B,OAAO,EAAE,OAAO,UAAU,CAAC,OAAO,CAAC;IACnC,MAAM,EAAE,OAAO,UAAU,CAAC,MAAM,CAAC;IACjC,QAAQ,EAAE,OAAO,QAAQ,CAAC;IAC1B,KAAK,EAAE,OAAO,KAAK,CAAC;IACpB,KAAK,EAAE,OAAO,KAAK,CAAC;IACpB,WAAW,EAAE,OAAO,UAAU,CAAC,WAAW,CAAC;IAC3C,KAAK,EAAE,OAAO,UAAU,CAAC,KAAK,CAAC;IAC/B,WAAW,EAAE,OAAO,WAAW,CAAC;IAChC,MAAM,EAAE,OAAO,MAAM,CAAC;IACtB,IAAI,EAAE,OAAO,IAAI,CAAC;IAClB,MAAM,EAAE,OAAO,MAAM,CAAC;IACtB,YAAY,EAAE,OAAO,UAAU,CAAC,YAAY,CAAC;CAC7C,CAAC,CAAC;AAEH;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,eAAO,MAAM,MAAM,EAAE,WAcpB,CAAC"}

package/dist/components/dialog/dialog.js

@@ -0,0 +1,249 @@
+import SvgClose from "../../vendor/@material-design-icons/svg/outlined/close.js";
+import { Button } from "../button/button.js";
+import dialog_module_default from "./dialog.module.js";
+import { c } from "react/compiler-runtime";
+import { jsx } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { Dialog } from "@base-ui/react/dialog";
+// src/components/dialog/dialog.tsx
+var Backdrop = (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(dialog_module_default.backdrop, className);
+		$[3] = className;
+		$[4] = t1;
+	} else t1 = $[4];
+	let t2;
+	if ($[5] !== props || $[6] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Dialog.Backdrop, {
+			className: t1,
+			...props
+		});
+		$[5] = props;
+		$[6] = t1;
+		$[7] = t2;
+	} else t2 = $[7];
+	return t2;
+};
+var Popup = (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(dialog_module_default.popup, className);
+		$[3] = className;
+		$[4] = t1;
+	} else t1 = $[4];
+	let t2;
+	if ($[5] !== props || $[6] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Dialog.Popup, {
+			className: t1,
+			...props
+		});
+		$[5] = props;
+		$[6] = t1;
+		$[7] = t2;
+	} else t2 = $[7];
+	return t2;
+};
+var Title = (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(dialog_module_default.title, className);
+		$[3] = className;
+		$[4] = t1;
+	} else t1 = $[4];
+	let t2;
+	if ($[5] !== props || $[6] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Dialog.Title, {
+			className: t1,
+			...props
+		});
+		$[5] = props;
+		$[6] = t1;
+		$[7] = t2;
+	} else t2 = $[7];
+	return t2;
+};
+/** The title's line. Put a `Dialog.CloseButton` in it to trail a way out. */
+var Header = (t0) => {
+	const $ = c(5);
+	const { children, className } = t0;
+	let t1;
+	if ($[0] !== className) {
+		t1 = clsx(dialog_module_default.header, className);
+		$[0] = className;
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] !== children || $[3] !== t1) {
+		t2 = /* @__PURE__ */ jsx("div", {
+			className: t1,
+			children
+		});
+		$[2] = children;
+		$[3] = t1;
+		$[4] = t2;
+	} else t2 = $[4];
+	return t2;
+};
+/** The icon-only way out, for a header or a footer. */
+var CloseButton = (t0) => {
+	const $ = c(3);
+	const { label } = 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] !== label) {
+		t2 = /* @__PURE__ */ jsx(Button, {
+			variant: "tertiary",
+			iconOnly: true,
+			icon: SvgClose,
+			label,
+			render: t1
+		});
+		$[1] = label;
+		$[2] = t2;
+	} else t2 = $[2];
+	return t2;
+};
+var Body = (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(dialog_module_default.body, className);
+		$[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;
+};
+var Footer = (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(dialog_module_default.footer, className);
+		$[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;
+};
+/**
+* Dialog chrome over base-ui's Dialog. Provides `Header` / `Body` / `Footer`
+* regions plus a styled `Backdrop` and `Popup`. Footer actions are a slot.
+*
+* @example
+* <Dialog.Root>
+*   <Dialog.Trigger>Edit</Dialog.Trigger>
+*   <Dialog.Portal>
+*     <Dialog.Backdrop />
+*     <Dialog.Popup>
+*       <Dialog.Header>
+*         <Dialog.Title>Discard changes?</Dialog.Title>
+*         <Dialog.CloseButton label="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.Root>
+*/
+var Dialog$1 = {
+	Root: Dialog.Root,
+	Trigger: Dialog.Trigger,
+	Portal: Dialog.Portal,
+	Backdrop,
+	Popup,
+	Title,
+	Description: Dialog.Description,
+	Close: Dialog.Close,
+	CloseButton,
+	Header,
+	Body,
+	Footer,
+	createHandle: Dialog.createHandle
+};
+export { Dialog$1 as Dialog };

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

@@ -0,0 +1,16 @@
+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 dialog_module_default = {
+	backdrop,
+	popup,
+	header,
+	title,
+	body,
+	footer
+};
+export { backdrop, body, dialog_module_default as default, footer, header, popup, title };

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

@@ -0,0 +1,2 @@
+export * from "./dialog.tsx";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/dialog/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC"}

package/dist/components/dialog/index.js

@@ -0,0 +1 @@
+export { Dialog } from "./dialog.js";

package/dist/components/divider/divider.css

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

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

@@ -0,0 +1,14 @@
+import type { ReactNode } from "react";
+export type DividerProps = Readonly<{
+    /** A short line under the rule, naming what follows it. */
+    subtitle?: string;
+    className?: string;
+}>;
+/**
+ * A horizontal rule between two groups, with an optional subtitle under it.
+ *
+ * @example
+ * <Divider subtitle="Earlier messages" />
+ */
+export declare const Divider: ({ subtitle, className, }: DividerProps) => ReactNode;
+//# sourceMappingURL=divider.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"divider.d.ts","sourceRoot":"","sources":["../../../src/components/divider/divider.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,MAAM,MAAM,YAAY,GAAG,QAAQ,CAAC;IACnC,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC,CAAC;AAEH;;;;;GAKG;AACH,eAAO,MAAM,OAAO,6BAGjB,YAAY,KAAG,SAOjB,CAAC"}

package/dist/components/divider/divider.js

@@ -0,0 +1,47 @@
+import divider_module_default from "./divider.module.js";
+import { c } from "react/compiler-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
+// src/components/divider/divider.tsx
+/**
+* A horizontal rule between two groups, with an optional subtitle under it.
+*
+* @example
+* <Divider subtitle="Earlier messages" />
+*/
+var Divider = (t0) => {
+	const $ = c(8);
+	const { subtitle, className } = t0;
+	let t1;
+	if ($[0] !== className) {
+		t1 = clsx(divider_module_default.container, className);
+		$[0] = className;
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = /* @__PURE__ */ jsx("hr", { className: divider_module_default.divider });
+		$[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
+		});
+		$[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;
+};
+export { Divider };