@jfrader/ui 0.7.0 → 0.7.3

package/README.md

@@ -2,7 +2,15 @@
 
 React components styled with Emotion and themed through the CSS custom properties from `@jfrader/tokens`.
 
-## Components
+## Start here
+
+- [Getting started](https://github.com/jfrader/jfrader-ui/blob/master/docs/consuming-jfrader-ui.md): installation and complete React / Vite and Next.js examples.
+- [Theming](https://github.com/jfrader/jfrader-ui/blob/master/docs/theming.md): light/dark palettes, brand accents and token overrides.
+- [Styling](https://github.com/jfrader/jfrader-ui/blob/master/docs/styling.md): customize instances, public parts and reusable wrappers.
+
+Requires React 19 and the `@jfrader/tokens/tokens.css` stylesheet. The same guides appear under **Foundations** in Storybook.
+
+## Component subpath examples
 
 | Subpath | Exports |
 | --- | --- |
@@ -22,8 +30,10 @@ React components styled with Emotion and themed through the CSS custom propertie
 | `@jfrader/ui/date-picker` | `DatePicker` |
 | `@jfrader/ui/dialog` | `Dialog` |
 | `@jfrader/ui/divider` | `Divider` |
+| `@jfrader/ui/editable-details` | `EditableDetails` |
 | `@jfrader/ui/emblem` | `Emblem` |
 | `@jfrader/ui/flex` | `Flex` |
+| `@jfrader/ui/flip-game-card` | `FlipGameCard` |
 | `@jfrader/ui/game-card` | `GameCard` |
 | `@jfrader/ui/kbd` | `Kbd` |
 | `@jfrader/ui/menu` | `Menu` |
@@ -46,7 +56,7 @@ React components styled with Emotion and themed through the CSS custom propertie
 | `@jfrader/ui/toggle-group` | `ToggleGroup` |
 | `@jfrader/ui/tooltip` | `Tooltip` |
 
-Each subpath also exports its prop types. The package root re-exports everything.
+Each component subpath also exports its prop types. The package root re-exports component APIs; optional integrations such as `@jfrader/ui/next` and `@jfrader/ui/code-block/shiki` remain separate imports.
 
 ## Usage
 
@@ -66,35 +76,11 @@ import { ThemeRoot } from '@jfrader/ui/theme-root';
 
 ## Next.js App Router
 
-`@jfrader/ui/next` exports `EmotionRegistry`, the required Emotion registry. It needs the optional `next` and `@emotion/cache` peers:
-
-```sh
-pnpm add @emotion/cache
-```
-
-```tsx
-// app/layout.tsx
-import { EmotionRegistry } from '@jfrader/ui/next';
-
-<body>
-  <EmotionRegistry>{children}</EmotionRegistry>
-</body>;
-```
-
-See [Next.js App Router](https://github.com/jfrader/jfrader-ui/blob/master/docs/consuming-jfrader-ui.md#nextjs-app-router) for Server Component boundaries.
+Use the `EmotionRegistry` adapter from `@jfrader/ui/next`. See the complete [App Router layout](https://github.com/jfrader/jfrader-ui/blob/master/docs/consuming-jfrader-ui.md#nextjs-app-router), including dependencies and Server Component boundaries.
 
 ## Theming
 
-Components read CSS custom properties defined by `@jfrader/tokens`. Load the stylesheet once and wrap the app in `ThemeRoot`:
-
-```tsx
-import '@jfrader/tokens/tokens.css';
-import { ThemeRoot } from '@jfrader/ui/theme-root';
-
-<ThemeRoot theme="light">{app}</ThemeRoot>;
-```
-
-Token names and values live in `packages/tokens/src/tokens.ts`.
+Set `data-theme` on `<html>` for the page, or use `ThemeRoot` for a subtree. `ThemeProvider` supplies styling callbacks with token references; it does not choose light or dark. See [Theming](https://github.com/jfrader/jfrader-ui/blob/master/docs/theming.md) for complete recipes and portal behavior.
 
 ## Build
 

package/dist/avatar-BuM1zB_f.js

@@ -0,0 +1,164 @@
+'use client';
+import { a as e, i as t } from "./css-BYJhdGh-.js";
+import { n, r } from "./media-8yrN85VT.js";
+import { t as i } from "./sx-BJXJ2xJK.js";
+import { t as a } from "./initials-DEdwNe9_.js";
+import { useState as o } from "react";
+import { vars as s } from "@jfrader/tokens/vars";
+import { jsx as c, jsxs as l } from "@emotion/react/jsx-runtime";
+//#region src/components/avatar/avatar.tsx
+var u = 2, d = t({
+	position: "relative",
+	display: "inline-flex",
+	alignItems: "center",
+	justifyContent: "center",
+	flexShrink: 0,
+	boxSizing: "border-box",
+	borderRadius: s.radius.full,
+	backgroundColor: s.color.surfaceHover,
+	color: s.color.text,
+	fontWeight: s.fontWeight.medium,
+	lineHeight: 1,
+	userSelect: "none",
+	verticalAlign: "middle",
+	[n]: { outline: "1px solid CanvasText" }
+}), f = {
+	sm: t({
+		inlineSize: s.space[6],
+		blockSize: s.space[6],
+		fontSize: s.textSize.xs
+	}),
+	md: t({
+		inlineSize: s.space[8],
+		blockSize: s.space[8],
+		fontSize: s.textSize.sm
+	}),
+	lg: t({
+		inlineSize: s.space[10],
+		blockSize: s.space[10],
+		fontSize: s.textSize.md
+	})
+}, p = t({
+	display: "block",
+	inlineSize: "100%",
+	blockSize: "100%",
+	borderRadius: s.radius.full,
+	objectFit: "cover"
+}), m = t({
+	position: "absolute",
+	insetBlockEnd: 0,
+	insetInlineEnd: 0,
+	inlineSize: "25%",
+	blockSize: "25%",
+	pointerEvents: "none",
+	"&::before": {
+		content: "\"\"",
+		position: "absolute",
+		insetBlockStart: 0,
+		insetInlineStart: 0,
+		inlineSize: "100%",
+		blockSize: "100%",
+		boxSizing: "border-box",
+		borderRadius: s.radius.full,
+		boxShadow: `0 0 0 2px ${s.color.bg}`
+	}
+}), h = {
+	online: t({ "&::before": { backgroundColor: s.color.success } }),
+	away: t({ "&::before": {
+		border: `2px solid ${s.color.warning}`,
+		backgroundColor: "transparent"
+	} }),
+	busy: t({ "&::before": {
+		backgroundColor: s.color.danger,
+		blockSize: "30%",
+		insetBlockStart: "35%"
+	} }),
+	offline: t({ "&::before": {
+		backgroundColor: s.color.textSubtle,
+		inlineSize: "60%",
+		blockSize: "60%",
+		insetBlockStart: "20%",
+		insetInlineStart: "20%"
+	} })
+}, g = t({ [n]: {
+	"&::before": {
+		forcedColorAdjust: "none",
+		backgroundColor: "CanvasText",
+		outline: "2px solid Canvas"
+	},
+	"&[data-status=\"away\"]::before": {
+		borderColor: "CanvasText",
+		backgroundColor: "Canvas"
+	}
+} }), _ = e({
+	from: {
+		transform: "scale(.8)",
+		opacity: 1
+	},
+	to: {
+		transform: "scale(2.4)",
+		opacity: 0
+	}
+}), v = { "&[data-status=\"online\"][data-pulse]::after": {
+	content: "none",
+	display: "none",
+	animation: "none"
+} }, y = t({
+	"&[data-status=\"online\"][data-pulse]::after": {
+		content: "\"\"",
+		position: "absolute",
+		insetBlockStart: 0,
+		insetInlineStart: 0,
+		inlineSize: "100%",
+		blockSize: "100%",
+		borderRadius: s.radius.full,
+		color: s.color.success,
+		border: "1px solid currentColor",
+		animation: `${_} ${s.motion.duration.presence} infinite ${s.motion.easePresence}`
+	},
+	[r]: v,
+	[n]: v
+});
+function b({ ref: e, name: t, src: n, size: r = "md", status: s, pulse: _ = !1, statusLabel: v, slotProps: b, className: x, sx: S, ...C }) {
+	let [w, T] = o(), E = n !== void 0 && n !== "" && n !== w, D = s === void 0 ? t : `${t}, ${v ?? s}`;
+	return /* @__PURE__ */ c(i, {
+		className: x,
+		styles: [d, f[r]],
+		sx: S,
+		children: (r) => /* @__PURE__ */ l("span", {
+			...C,
+			ref: e,
+			"data-ui": "avatar",
+			role: "img",
+			"aria-label": D,
+			className: r,
+			children: [E ? /* @__PURE__ */ c("img", {
+				src: n,
+				alt: "",
+				onError: () => T(n),
+				className: b?.image?.className,
+				css: [p, b?.image?.css]
+			}) : /* @__PURE__ */ c("span", {
+				"aria-hidden": "true",
+				className: b?.fallback?.className,
+				css: b?.fallback?.css,
+				children: a(t, u)
+			}), s !== void 0 && /* @__PURE__ */ c("span", {
+				"aria-hidden": "true",
+				"data-status": s,
+				"data-pulse": _ && s === "online" ? "" : void 0,
+				className: b?.status?.className,
+				css: [
+					m,
+					h[s],
+					g,
+					y,
+					b?.status?.css
+				]
+			})]
+		})
+	});
+}
+b.displayName = "Avatar";
+//#endregion
+export { b as t };

package/dist/{avatar-group-BlMLNw4J.js → avatar-group-D1UEihvh.js}

@@ -3,7 +3,7 @@ import { i as e } from "./css-BYJhdGh-.js";
 import { n as t } from "./media-8yrN85VT.js";
 import { t as n } from "./sx-BJXJ2xJK.js";
 import { t as r } from "./visually-hidden-DgVO3NaB.js";
-import { t as i } from "./avatar-sPxDqFiZ.js";
+import { t as i } from "./avatar-BuM1zB_f.js";
 import { useId as a } from "react";
 import { vars as o } from "@jfrader/tokens/vars";
 import { jsx as s, jsxs as c } from "@emotion/react/jsx-runtime";

package/dist/avatar-group.js

@@ -1,2 +1,2 @@
 'use client';
-export { t as AvatarGroup } from "./avatar-group-BlMLNw4J.js";
+export { t as AvatarGroup } from "./avatar-group-D1UEihvh.js";

package/dist/avatar.js

@@ -1,2 +1,2 @@
 'use client';
-export { t as Avatar } from "./avatar-sPxDqFiZ.js";
+export { t as Avatar } from "./avatar-BuM1zB_f.js";

package/dist/card-frame-CcLa6NQ4.js

@@ -0,0 +1,13 @@
+'use client';
+//#region src/components/game-card/card-frame.ts
+var e = {
+	ratio: 1.48,
+	cornerDivisor: 13
+}, t = {
+	markWidthRatio: .35,
+	watermarkInsetPercent: 3,
+	watermarkOpacity: .15,
+	contentPaddingPercent: 4
+};
+//#endregion
+export { e as n, t };

package/dist/{chat-thread-DkB-WMWJ.js → chat-thread-CMhwxhoA.js}

@@ -8,7 +8,7 @@ import { t as s } from "./visually-hidden-DgVO3NaB.js";
 import { t as c } from "./button-C6OV0C7J.js";
 import { t as ee } from "./part-id-D0zksy32.js";
 import { t as te } from "./card-C008OQCp.js";
-import { c as l, d as ne, g as re, h as u, i as ie, m as ae, n as d, p as oe, r as se, t as f } from "./thread-parts-Cpktor6D.js";
+import { c as l, d as ne, g as re, h as u, i as ie, m as ae, n as d, p as oe, r as se, t as f } from "./thread-parts-DbKhuwVU.js";
 import { useEffect as ce, useId as le, useLayoutEffect as p, useMemo as m, useRef as h, useState as g } from "react";
 import { vars as _ } from "@jfrader/tokens/vars";
 import { Fragment as v, jsx as y, jsxs as b } from "@emotion/react/jsx-runtime";

package/dist/chat-thread.js

@@ -1,2 +1,2 @@
 'use client';
-export { t as ChatThread } from "./chat-thread-DkB-WMWJ.js";
+export { t as ChatThread } from "./chat-thread-CMhwxhoA.js";

package/dist/{comment-thread-DXfqgRNI.js → comment-thread-DbOzYr0q.js}

@@ -8,7 +8,7 @@ import { t as ee } from "./renderable-DzcIj1Lo.js";
 import { t as s } from "./button-C6OV0C7J.js";
 import { t as c } from "./part-id-D0zksy32.js";
 import { t as l } from "./card-C008OQCp.js";
-import { a as u, c as d, d as f, f as te, g as p, h as m, i as ne, l as re, n as ie, o as ae, p as oe, r as se, s as ce, t as le, u as ue } from "./thread-parts-Cpktor6D.js";
+import { a as u, c as d, d as f, f as te, g as p, h as m, i as ne, l as re, n as ie, o as ae, p as oe, r as se, s as ce, t as le, u as ue } from "./thread-parts-DbKhuwVU.js";
 import { useEffect as de, useId as fe, useLayoutEffect as h, useMemo as g, useRef as _, useState as v } from "react";
 import { vars as y } from "@jfrader/tokens/vars";
 import { Fragment as pe, jsx as b, jsxs as x } from "@emotion/react/jsx-runtime";

package/dist/comment-thread.js

@@ -1,2 +1,2 @@
 'use client';
-export { t as CommentThread } from "./comment-thread-DXfqgRNI.js";
+export { t as CommentThread } from "./comment-thread-DbOzYr0q.js";

package/dist/editable-details-BndqEnYF.js

@@ -0,0 +1,365 @@
+'use client';
+import { i as e } from "./css-BYJhdGh-.js";
+import { t } from "./disclosure-caret-C5T3fcl6.js";
+import { n, t as r } from "./focus-ring-BK5W5_NY.js";
+import { n as i, r as a } from "./media-8yrN85VT.js";
+import { t as o } from "./sx-BJXJ2xJK.js";
+import { t as s } from "./use-controlled-state-DpeVQZNR.js";
+import { createContext as c, useCallback as l, useContext as u, useId as d, useLayoutEffect as f, useMemo as p, useRef as m } from "react";
+import { vars as h } from "@jfrader/tokens/vars";
+import { jsx as g, jsxs as _ } from "@emotion/react/jsx-runtime";
+import { useMergeRefs as v } from "@floating-ui/react";
+//#region src/components/editable-details/editable-details.tsx
+var y = { edit: "Edit" }, b = {
+	1: "h1",
+	2: "h2",
+	3: "h3",
+	4: "h4",
+	5: "h5",
+	6: "h6"
+}, x = c(y), S = c({
+	visible: !0,
+	triggers: []
+}), C = e({
+	label: "editable-details",
+	display: "grid",
+	gap: h.space[6],
+	minInlineSize: 0,
+	maxInlineSize: "100%",
+	fontFamily: h.font.sans,
+	color: h.color.text,
+	lineHeight: h.lineHeight.base,
+	textAlign: "start",
+	overflowWrap: "anywhere"
+}), w = e({ minInlineSize: 0 }), T = e({
+	margin: 0,
+	font: "inherit"
+}), E = e({
+	display: "flex",
+	alignItems: "center",
+	justifyContent: "space-between",
+	gap: h.space[3],
+	inlineSize: "100%",
+	minInlineSize: 0,
+	minBlockSize: h.space[10],
+	paddingBlock: h.space[2],
+	paddingInlineStart: 0,
+	paddingInlineEnd: h.space[2],
+	border: 0,
+	background: "transparent",
+	color: "inherit",
+	font: "inherit",
+	fontWeight: h.fontWeight.semibold,
+	textAlign: "start",
+	overflowWrap: "anywhere",
+	cursor: "pointer",
+	"&::after": t,
+	"&[aria-expanded=\"true\"]::after": { transform: "rotate(90deg)" },
+	"&[aria-expanded=\"true\"]:dir(rtl)::after": { transform: "rotate(-90deg)" },
+	"&:hover": { backgroundColor: h.color.surfaceHover },
+	"&:focus-visible": r,
+	[a]: { "&::after": { transitionDuration: "0s" } },
+	[i]: { "&::after": {
+		forcedColorAdjust: "none",
+		borderInlineStartColor: "ButtonText"
+	} }
+}), D = e({
+	display: "grid",
+	gap: h.space[4],
+	minInlineSize: 0,
+	paddingBlockStart: h.space[2],
+	"&[hidden]": { display: "none" }
+}), O = e({
+	margin: 0,
+	minInlineSize: 0
+}), k = e({
+	display: "flex",
+	flexWrap: "wrap",
+	gap: h.space[2],
+	minInlineSize: 0,
+	paddingBlock: h.space[3],
+	"&:where(:not(:last-child))": { borderBlockEnd: `1px solid ${h.color.border}` }
+}), A = e({
+	flex: "1 1 10rem",
+	minInlineSize: 0,
+	color: h.color.textMuted,
+	fontWeight: h.fontWeight.regular
+}), j = e({
+	flex: "2 1 16rem",
+	minInlineSize: 0,
+	margin: 0
+}), M = e({
+	display: "flex",
+	flexWrap: "wrap",
+	alignItems: "start",
+	gap: h.space[2],
+	minInlineSize: 0
+}), N = e({
+	flex: "1 1 8rem",
+	minInlineSize: 0
+}), P = e({
+	minBlockSize: h.space[8],
+	paddingInline: h.space[2],
+	paddingBlock: h.space[1],
+	border: `1px solid ${h.color.borderControl}`,
+	borderRadius: h.radius.sm,
+	background: "transparent",
+	color: h.color.text,
+	font: "inherit",
+	cursor: "pointer",
+	"&:hover": { backgroundColor: h.color.surfaceHover },
+	"&:focus-visible": n,
+	[i]: {
+		borderColor: "ButtonText",
+		color: "ButtonText"
+	}
+}), F = e({
+	minInlineSize: 0,
+	maxInlineSize: "100%",
+	"&:focus": r
+});
+function I(e) {
+	return e !== null && e.isConnected && e.getClientRects().length > 0 && !e.closest("[hidden], [inert]") && e.ownerDocument.defaultView?.getComputedStyle(e).visibility !== "hidden";
+}
+function L(e) {
+	for (let t of e) if (I(t.current)) {
+		t.current.focus();
+		return;
+	}
+}
+function R(e, t = !1) {
+	let n = m(null), r = m(!1);
+	return f(() => {
+		let i = e.current;
+		if (!i) return;
+		let a = i.ownerDocument;
+		n.current = a.activeElement;
+		let o = () => {
+			n.current = a.activeElement, (t || !i.contains(a.activeElement)) && (r.current = !1);
+		}, s = (e) => {
+			!e.defaultPrevented && (t || !e.composedPath().includes(i)) && (r.current = !1), !e.defaultPrevented && !e.composedPath().includes(i) && (n.current = null);
+		};
+		return a.addEventListener("focusin", o), a.addEventListener("mousedown", s), () => {
+			a.removeEventListener("focusin", o), a.removeEventListener("mousedown", s);
+		};
+	}, [e, t]), {
+		last: n,
+		intent: r
+	};
+}
+function z(e, t) {
+	let n = e.ownerDocument.activeElement;
+	return e.contains(n) || n === e.ownerDocument.body && t !== null && e.contains(t);
+}
+function B({ messages: e, className: t, sx: n, ...r }) {
+	let i = u(x), a = p(() => ({
+		...i,
+		...e
+	}), [i, e]);
+	return /* @__PURE__ */ g(x.Provider, {
+		value: a,
+		children: /* @__PURE__ */ g(o, {
+			className: t,
+			styles: C,
+			sx: n,
+			children: (e) => /* @__PURE__ */ g("div", {
+				...r,
+				className: e,
+				"data-ui": "editable-details"
+			})
+		})
+	});
+}
+B.displayName = "EditableDetails";
+function V({ ref: e, title: t, headingLevel: n = 3, open: r, defaultOpen: i = !1, onOpenChange: a, triggerRef: c, slotProps: l, children: h, className: y, sx: x, ...C }) {
+	let [O, k] = s(r, i, a), A = u(S), j = m(null), M = v([j, c]), N = m(null), P = R(N), F = d(), I = b[n], B = A.visible && !!O, V = p(() => [j, ...A.triggers], [A.triggers]), H = p(() => ({
+		visible: B,
+		triggers: V
+	}), [B, V]);
+	return f(() => {
+		let e = N.current;
+		!B && e && z(e, P.last.current) && L(H.triggers);
+	}, [
+		B,
+		H,
+		P.last
+	]), /* @__PURE__ */ g(o, {
+		className: y,
+		styles: w,
+		sx: x,
+		children: (n) => /* @__PURE__ */ _("section", {
+			...C,
+			ref: e,
+			className: n,
+			"data-ui": "editable-details-section",
+			"data-state": O ? "open" : "closed",
+			children: [/* @__PURE__ */ g(I, {
+				css: [T, l?.heading?.css],
+				className: l?.heading?.className,
+				children: /* @__PURE__ */ g("button", {
+					ref: M,
+					type: "button",
+					id: `${F}-trigger`,
+					"aria-expanded": !!O,
+					"aria-controls": `${F}-panel`,
+					onClick: () => k(!O),
+					css: [E, l?.trigger?.css],
+					className: l?.trigger?.className,
+					"data-ui": "editable-details-section-trigger",
+					children: t
+				})
+			}), /* @__PURE__ */ g(S.Provider, {
+				value: H,
+				children: /* @__PURE__ */ g("div", {
+					ref: N,
+					id: `${F}-panel`,
+					hidden: !O,
+					css: [D, l?.panel?.css],
+					className: l?.panel?.className,
+					"data-ui": "editable-details-section-panel",
+					children: h
+				})
+			})]
+		})
+	});
+}
+V.displayName = "EditableDetails.Section";
+function H({ className: e, sx: t, ...n }) {
+	return /* @__PURE__ */ g(o, {
+		className: e,
+		styles: O,
+		sx: t,
+		children: (e) => /* @__PURE__ */ g("dl", {
+			...n,
+			className: e,
+			"data-ui": "editable-details-list"
+		})
+	});
+}
+H.displayName = "EditableDetails.List";
+function U({ renderEditor: e, labelId: t, hostId: n, part: r, edit: i, requestClose: a, focusIntent: o, acceptedClose: s }) {
+	let c = u(S), d = m(null), p = m(null), h = R(d), _ = m(!1), v = m(!1), y = h.intent, b = l((e) => (p.current = e, () => {
+		p.current === e && (p.current = null);
+	}), []), x = l(() => {
+		if (!_.current) return;
+		v.current = !0;
+		let e = d.current;
+		y.current = !!e && z(e, h.last.current), a();
+	}, [
+		a,
+		h.last,
+		y
+	]);
+	return f(() => {
+		_.current = !0;
+		let e = d.current;
+		return () => {
+			if (_.current = !1, !e) return;
+			let t = z(e, h.last.current);
+			queueMicrotask(() => {
+				!e.isConnected && t && e.ownerDocument.activeElement === e.ownerDocument.body && (s.current && v.current && !y.current || (y.current && I(i.current) ? i.current.focus() : L(c.triggers)));
+			});
+		};
+	}, [
+		s,
+		i,
+		h.last,
+		y,
+		c.triggers
+	]), f(() => {
+		if (!o.current) return;
+		o.current = !1;
+		let e = d.current;
+		e && c.visible && (I(p.current) && (p.current.focus(), e.ownerDocument.activeElement === p.current) || e.focus());
+	}, [o, c.visible]), /* @__PURE__ */ g("div", {
+		ref: d,
+		id: n,
+		role: "group",
+		"aria-labelledby": t,
+		tabIndex: -1,
+		className: r?.className,
+		css: [F, r?.css],
+		"data-ui": "editable-details-editor",
+		children: e({
+			initialFocusRef: b,
+			complete: x,
+			cancel: x,
+			visible: c.visible
+		})
+	});
+}
+function W({ ref: e, label: t, renderEditor: n, open: r, defaultOpen: i = !1, onOpenChange: a, children: c, slotProps: p, className: h, sx: y, ...b }) {
+	let [C, w, T] = s(r, n ? i : !1, a), E = u(S), D = u(x), O = m(null), F = m(null), I = R(O, !0), B = m(!!n), V = m(!1);
+	V.current = !C && !!n;
+	let H = d();
+	f(() => {
+		B.current && !n && (I.intent.current = !1, T()), B.current = !!n;
+	}, [
+		n,
+		T,
+		I.intent
+	]);
+	let W = l((e) => (O.current = e, () => {
+		e && z(e, I.last.current) && queueMicrotask(() => {
+			!e.isConnected && e.ownerDocument.activeElement === e.ownerDocument.body && L(E.triggers);
+		}), O.current = null;
+	}), [I.last, E.triggers]), G = v([W, e]), K = l(() => w(!1), [w]), q = !!C && !!n;
+	return /* @__PURE__ */ g(o, {
+		className: h,
+		styles: k,
+		sx: y,
+		children: (e) => /* @__PURE__ */ _("div", {
+			...b,
+			ref: G,
+			className: e,
+			"data-ui": "editable-details-item",
+			"data-state": q ? "open" : "closed",
+			children: [/* @__PURE__ */ g("dt", {
+				id: `${H}-label`,
+				css: [A, p?.label?.css],
+				className: p?.label?.className,
+				children: t
+			}), /* @__PURE__ */ g("dd", {
+				css: [j, p?.description?.css],
+				className: p?.description?.className,
+				children: q ? /* @__PURE__ */ g(U, {
+					renderEditor: n,
+					labelId: `${H}-label`,
+					hostId: `${H}-editor`,
+					part: p?.editor,
+					edit: F,
+					requestClose: K,
+					focusIntent: I.intent,
+					acceptedClose: V
+				}) : /* @__PURE__ */ _("div", {
+					css: [M, p?.summary?.css],
+					className: p?.summary?.className,
+					children: [/* @__PURE__ */ g("div", {
+						css: N,
+						children: c
+					}), n && /* @__PURE__ */ g("button", {
+						ref: F,
+						type: "button",
+						id: `${H}-edit`,
+						"aria-labelledby": `${H}-edit ${H}-label`,
+						onClick: () => {
+							I.intent.current = !0, w(!0);
+						},
+						css: [P, p?.edit?.css],
+						className: p?.edit?.className,
+						"data-ui": "editable-details-edit",
+						children: D.edit
+					})]
+				})
+			})]
+		})
+	});
+}
+W.displayName = "EditableDetails.Item";
+var G = Object.assign(B, {
+	Section: V,
+	List: H,
+	Item: W
+});
+//#endregion
+export { G as t };

package/dist/editable-details.js

@@ -0,0 +1,2 @@
+'use client';
+export { t as EditableDetails } from "./editable-details-BndqEnYF.js";