solid-baseui 0.1.0-alpha.0 → 0.1.0-alpha.1

package/CHANGELOG.md

@@ -0,0 +1,30 @@
+# Changelog
+
+## 0.1.0-alpha.1
+
+### Breaking Changes
+
+- Replace polymorphic `as` with callback-only `render`. For example, use
+  `<Dialog.Trigger render={(props) => <Button {...props} />}>Open</Dialog.Trigger>`.
+- Put replacement-only attributes and required custom-component props inside the
+  callback. Forward its live props and ref to the final DOM element.
+- Render selection is mount-time. Use conditional JSX inside a stable callback
+  for reactive root changes. JSX-valued render props are not supported.
+- Preserve semantic flags such as `nativeButton={false}` for non-button roots.
+
+### Added
+
+- Export Solid-native `useRender` from the package root and `solid-baseui/use-render`.
+- Provide live DOM props and component state to render callbacks, with native JSX
+  defaults when no callback is supplied.
+- Add custom-component composition, type-contract, SSR, and hydration coverage.
+
+### Fixed
+
+- Avoid Button's dynamic state-attribute spread and unnecessary stable-ref
+  reapplication on disabled-state changes.
+- Preserve Toolbar disabled/focusable semantics independently of render callback
+  presence, and install its owned event bridge before hydration event replay.
+
+The package remains an unstable alpha. Further performance work is deferred;
+benchmarks and profiling artifacts are not included in the published package.

package/README.md

@@ -15,8 +15,8 @@ maintained by MUI or the Base UI team, nor by the SolidJS core team.
 
 ## Install
 
-Released only under the `alpha` dist-tag, so you have to ask for it explicitly —
-there is no `latest` release yet:
+Install explicitly from the `alpha` dist-tag to get the current prerelease.
+There is no stable release:
 
 ```bash
 bun add solid-baseui@alpha
@@ -25,12 +25,15 @@ bun add solid-baseui@alpha
 Peer dependencies:
 
 ```
-solid-js     ^2.0.0-rc.0
-@solidjs/web ^2.0.0-rc.0
+solid-js     ^2.0.0-rc.6
+@solidjs/web ^2.0.0-rc.6
 ```
 
 Solid 2 is itself a release candidate, which is part of why this package is
-alpha.
+alpha. Upgrade both runtimes together and use a compatible Solid 2 compiler.
+RC.6 includes the portal event-delegation fix required by this port; no local
+dependency patch is needed. This workspace uses `@solidjs/vite-plugin@3.0.0-next.38`
+with the RC.6 compiler.
 
 ## Usage
 
@@ -78,9 +81,93 @@ export function App() {
 Every family is available from the root entry point or its own subpath
 (`solid-baseui/dialog`, `solid-baseui/select`, and so on).
 
+Polymorphic parts render their native element by default. To replace it, supply
+a callback and forward its live DOM props, including `ref`, to the final element:
+
+```tsx
+import { Button } from "solid-baseui/button";
+
+<Button
+  nativeButton={false}
+  render={(props, state) => (
+    <a {...props} href="/settings" data-disabled={state.disabled ? "" : undefined} />
+  )}
+>
+  Settings
+</Button>;
+```
+
+The callback receives live object state, not an accessor. Read `state.disabled`
+and supplied props in JSX or reactive computations. Destructuring or eagerly
+copying them during callback setup loses liveness. Always forward props and ref,
+including through custom components, so events, accessibility, focus, and
+registration reach the final DOM node.
+
+## Migrating To 0.1.0-alpha.1
+
+Version `0.1.0-alpha.1` replaces `as` with callback-only `render`. There is no compatibility
+alias, and JSX-valued `render={<a />}` is unsupported. Replace an old
+`<Button as="a" href="/settings" nativeButton={false}>` with the callback above.
+No `Dynamic`, `dynamic()`, or `withoutComponentBinding` adapter is needed: the
+callback writes native or custom-component JSX directly.
+
+- Outer attributes remain typed for the default native element. Put `href` and
+  other replacement-only attributes inside the callback, not on a native-button
+  outer API. Likewise, supply required custom-component props inside the callback,
+  for example `render={(props) => <AppLink {...props} to="/settings" />}`.
+- Keep semantic flags such as `nativeButton={false}` where supported when the
+  final element is not a button. Selecting an element does not automatically
+  select the component's keyboard or disabled policy.
+- Render selection happens at mount. Replacing the `render` prop later does not
+  switch the renderer. To change the root, use conditional JSX inside one stable
+  callback and forward props/ref to every possible final element, for example
+  `render={(props) => <>{compact() ? <span {...props} /> : <div {...props} />}</>}` on a
+  visual part that supports those roots.
+- A spread does not compose an overridden handler, ref, or class. Preserve supplied
+  values explicitly when adding behavior: use Solid ref/class arrays and the
+  focused event helper for ordered cancellation. A custom component must do the
+  same when it overrides forwarded props.
+
+```tsx
+import { Button } from "solid-baseui/button";
+import { composeEventHandlers } from "solid-baseui/internals/composeEventHandlers";
+
+<Button
+  render={(props) => (
+    <button
+      {...props}
+      class={[props.class, "action"]}
+      ref={[props.ref, (element) => { element.dataset.action = "save"; }]}
+      onClick={composeEventHandlers(
+        () => props.onClick,
+        () => () => console.info("Save activated"),
+      )}
+    />
+  )}
+>
+  Save
+</Button>;
+```
+
+The event accessor reads the current supplied handler at event time; the helper
+preserves its Base UI cancellation contract. Prefer putting ordinary caller
+handlers on the outer component when no callback-specific composition is needed.
+
+Component authors can import `useRender` from `solid-baseui/use-render` or the
+package root. Its signature is
+`useRender(props, stateAccessor, nativeFallbackCallback)`, returning a local JSX
+component. For example, `const Render = useRender(props, () => state(), (domProps) =>
+<div {...domProps} />)` selects the callback or native default. Pass explicit
+attributes to `<Render>` and spread props with component-only keys omitted last;
+the helper does not build component behavior or merge event handlers for you.
+`ComponentRenderFn` and `ComponentRenderProps` are exported as types from the
+root, `solid-baseui/use-render`, and `solid-baseui/types`.
+
+See [CHANGELOG.md](./CHANGELOG.md) for this alpha's changes.
+
 ## Status
 
-Most of the port is done: 40 public subpaths are shipped, backed by the shared P0
+Most of the port is done: component and utility subpaths are backed by the shared P0
 and overlay foundations. Not everything is finished:
 
 | Area                   | State                                                               |
@@ -103,8 +190,8 @@ This is a port, not a transliteration. Where React idioms do not carry over, the
 Solid-native equivalent wins:
 
 - Components use `class`, not `className`.
-- Polymorphic components use `as` with `Dynamic`. There is no React-style
-  `render` prop.
+- Polymorphic components use callback-only `render` with native JSX defaults.
+  React element cloning and JSX-valued render props are not supported.
 - Provider hooks return accessors, because replacing a Solid context value is not
   reactive.
 - Refs are ordinary props and compose through Solid ref arrays. There is no

package/dist/lib/client/DialogHandle-BGyIbcvg.js

@@ -0,0 +1,521 @@
+import { t as e } from "./useRender-CxZ8PI-g.js";
+import { getStateAttributesProps as t } from "./internals/getStateAttributesProps.js";
+import { P as n, d as r, i } from "./reasons-Co5CzjKq.js";
+import { n as a, t as o } from "./resolveStyle-XcgAuaKR.js";
+import { createChangeEventDetails as s } from "./internals/createBaseUIEventDetails.js";
+import { transitionStatusMapping as c } from "./internals/stateAttributesMapping.js";
+import { composeEventHandlers as l } from "./internals/composeEventHandlers.js";
+import { a as u, n as d, r as f } from "./dom-BEAeQ9Eb.js";
+import { n as p, t as m } from "./InternalBackdrop-cSK13gaM.js";
+import { c as h, i as ee, n as te, r as g, s as _, t as v } from "./FloatingTree-23B7KKPD.js";
+import { a as y, n as b, o as x, t as S } from "./PopupStore-Du0O57fL.js";
+import { a as ne, o as C } from "./popupStateMapping-C6jQ_LKo.js";
+import { i as re, n as w, r as T, t as E } from "./PopupHandle-CQI6Om1Z.js";
+import { t as D } from "./setRef-fXF6OIo3.js";
+import { a as O, i as ie, n as ae, r as k, t as oe } from "./buttonSemantics-paljfpOX.js";
+import { createComponent as A, getNextElement as j, memo as M, mergeProps as N, runHydrationEvents as P, spread as F, template as I } from "@solidjs/web";
+import { $REFRESH as se, Show as L, createContext as R, createEffect as z, createMemo as B, createSignal as V, createUniqueId as H, omit as U, onCleanup as W, untrack as G, useContext as K } from "solid-js";
+//#region src/dialog/store/DialogStore.ts
+var ce = class extends S {
+	openMethodAccessor;
+	setOpenMethodSignal;
+	openMethodRevisionAccessor;
+	setOpenMethodRevision;
+	constructor(e = {}) {
+		super(e);
+		let [t, n] = V(null, { ownedWrite: !0 });
+		this.openMethodAccessor = t, this.setOpenMethodSignal = n;
+		let [r, i] = V(0, { ownedWrite: !0 });
+		this.openMethodRevisionAccessor = r, this.setOpenMethodRevision = i;
+	}
+	openMethod() {
+		return this.openMethodAccessor();
+	}
+	setOpenMethod(e) {
+		this.setOpenMethodSignal(e), this.setOpenMethodRevision((e) => e + 1);
+	}
+	openMethodRevision() {
+		return this.openMethodRevisionAccessor();
+	}
+	setPayload(e) {
+		this.set("payload", e);
+	}
+	setOpen(e, t) {
+		return !e && t.trigger == null && this.activeTriggerId() != null && (t.trigger = this.state.activeTriggerElement ?? void 0), super.setOpen(e, t);
+	}
+}, q = class extends w {
+	openMethod() {
+		return null;
+	}
+	setOpenMethod(e) {}
+	setPayload(e) {}
+}, J = Symbol("DialogRootContext"), le = R(J);
+function Y(e = !1) {
+	let t = K(le);
+	if (t === J) {
+		if (e) return;
+		throw Error("Base UI: DialogRootContext is missing. Dialog parts must be placed within <Dialog.Root>.");
+	}
+	return t;
+}
+//#endregion
+//#region src/dialog/root/DialogRoot.tsx
+function ue(e) {
+	return X("dialog", e);
+}
+function X(e, t, n = {}) {
+	let i = Y(!0), a = h(), o = _(), c = a ?? new g(), l = H(), m = H(), b = G(() => t.open !== void 0), S = G(() => t.triggerId !== void 0), ne = i !== void 0, C = e === "alert-dialog", re = e === "drawer", w = B(() => C ? !0 : t.modal ?? !0), E = B(() => C || (t.disablePointerDismissal ?? !1)), D = new ce({
+		controlledOpen: () => b ? t.open : void 0,
+		controlledTriggerId: () => S ? t.triggerId : void 0,
+		floatingId: m,
+		nested: o !== null,
+		nodeId: l,
+		onOpenChange: () => t.onOpenChange,
+		onOpenChangeComplete: () => t.onOpenChangeComplete
+	});
+	D.update({
+		open: b ? !!G(() => t.open) : !!G(() => t.defaultOpen),
+		activeTriggerId: G(() => t.defaultTriggerId ?? null)
+	});
+	let O = D.access((e) => e.payload), ie = ee({
+		tree: c,
+		id: l,
+		parentId: o,
+		context: () => D.context.floatingRoot
+	}), [ae, k] = V(), [oe, j] = V(), [N, P] = V(null, { ownedWrite: !0 }), [F, I] = V(null, { ownedWrite: !0 }), [L, R] = V(null, { ownedWrite: !0 }), [U, K] = V(0, {
+		equals: !1,
+		ownedWrite: !0
+	}), q = /* @__PURE__ */ new Map(), J = B(() => {
+		U();
+		let e = 0;
+		for (let t of q.values()) e += t.dialogCount;
+		return e;
+	}), ue = B(() => {
+		U();
+		let e = 0;
+		for (let t of q.values()) e += t.drawerCount;
+		return e;
+	}), X = { current: !0 }, Z = y(D, () => D.track().popupElement, { onUnmount: () => D.setOpenMethod(null) });
+	function de(e, t, n) {
+		let r = q.get(e);
+		(r?.dialogCount !== t || r.drawerCount !== n) && (q.set(e, {
+			dialogCount: t,
+			drawerCount: n
+		}), K((e) => e + 1));
+	}
+	function fe(e) {
+		q.delete(e) && K((e) => e + 1);
+	}
+	let pe = {
+		store: D,
+		tree: c,
+		nested: ne,
+		role: C ? "alertdialog" : "dialog",
+		modal: w,
+		disablePointerDismissal: E,
+		nestedOpenDialogCount: J,
+		nestedOpenDrawerCount: ue,
+		outsidePressEnabled: X,
+		titleId: ae,
+		setTitleId: k,
+		descriptionId: oe,
+		setDescriptionId: j,
+		backdropElement: N,
+		setBackdropElement: P,
+		internalBackdropElement: F,
+		setInternalBackdropElement: I,
+		viewportElement: L,
+		setViewportElement: R,
+		presence: Z,
+		updateNestedLayer: de,
+		removeNestedLayer: fe
+	};
+	D.context.floatingRoot.context.data.insideElements = () => [
+		N(),
+		F(),
+		L()
+	], D.configureTriggerUnmount({ closeOnActiveTriggerUnmount: !1 }), T(() => t.handle, D);
+	let Q = x({
+		context: D.context.floatingRoot,
+		tree: () => c,
+		escapeKey: () => J() === 0,
+		outsidePress: () => (e) => {
+			if (!X.current || E() || J() > 0 || "button" in e && e.button !== 0) return !1;
+			if ("touches" in e) {
+				if (e.type === "touchend") {
+					if (e.changedTouches.length !== 1 || e.touches.length !== 0) return !1;
+				} else if (e.touches.length !== 1) return !1;
+			}
+			if (w() === !1) return !0;
+			let t = f(e), n = F(), r = N();
+			return !n && !r || t === n || t === r || u(t) && d(t, D.state.popupElement) && !t.hasAttribute("data-base-ui-portal");
+		},
+		outsidePressEvent: () => F() || N() ? "intentional" : {
+			mouse: w() === "trap-focus" ? "sloppy" : "intentional",
+			touch: "sloppy"
+		}
+	});
+	D.setInteractionProps({
+		activeTriggerProps: { onKeyDown: Q.onKeyDown },
+		inactiveTriggerProps: { onKeyDown: Q.onKeyDown },
+		popupProps: {}
+	}), p(() => D.open() && w() === !0, () => D.track().popupElement), z(() => ({
+		open: D.open(),
+		activeTriggerId: D.activeTriggerId()
+	}), () => G(() => D.reconcileTriggers()));
+	let $ = G(() => D.open()), me = G(() => D.openMethodRevision());
+	z(() => ({
+		open: D.open(),
+		openMethodRevision: D.openMethodRevision()
+	}), (e) => {
+		!e.open && $ ? me = e.openMethodRevision : e.open && !$ && e.openMethodRevision === me && D.setOpenMethod(null), $ = e.open;
+	});
+	let he = Symbol("DialogRoot");
+	z(() => ({
+		open: D.open(),
+		nestedDialogs: J(),
+		nestedDrawers: ue()
+	}), (e) => {
+		i?.updateNestedLayer(he, e.open ? e.nestedDialogs + 1 : 0, e.open ? e.nestedDrawers + +!!re : 0);
+	});
+	let ge = {
+		unmount: Z.forceUnmount,
+		close() {
+			D.setOpen(!1, s(r));
+		}
+	};
+	z(() => t.actionsRef, (e) => {
+		e?.(ge);
+	});
+	function _e() {
+		let e = B(() => t.children), n = G(e), r = n;
+		return typeof n == "function" && (r = n.name === "bound read" && Object.prototype.hasOwnProperty.call(n, se) ? M(() => e()) : G(() => n({ payload: O }))), r;
+	}
+	return W(() => {
+		i?.removeNestedLayer(he), D.clearInteractionProps(), delete D.context.floatingRoot.context.data.insideElements;
+	}), A(le, {
+		value: pe,
+		get children() {
+			return A(te, {
+				value: c,
+				get children() {
+					return A(v, {
+						get value() {
+							return ie.id ?? null;
+						},
+						get children() {
+							return [M(() => n.extraContent?.()), A(_e, {})];
+						}
+					});
+				}
+			});
+		}
+	});
+}
+//#endregion
+//#region src/dialog/utils/mergeDialogStyles.ts
+function Z(e, t) {
+	if (typeof t == "string") {
+		let n = Object.entries(e).filter((e) => e[1] != null).map(([e, t]) => `${e}:${String(t)}`).join(";");
+		return n ? `${n};${t}` : t;
+	}
+	return {
+		...e,
+		...t || void 0
+	};
+}
+//#endregion
+//#region src/dialog/utils/stateAttributesMapping.ts
+var de = { "data-open": "" }, fe = { "data-closed": "" }, pe = { "data-nested-dialog-open": "" }, Q = {
+	open: (e) => e ? de : fe,
+	...c
+}, $ = {
+	...Q,
+	nestedDialogOpen: (e) => e ? pe : null
+}, me = /* @__PURE__ */ I("<button>");
+function he(n) {
+	let r = Y(), c = n, u = n, d = B(() => c.disabled ?? !1), f = B(() => c.nativeButton ?? !0), p = B(() => ({ disabled: d() })), m = e(n, () => p(), (e) => (() => {
+		var t = j(me);
+		return F(t, e, !1), P(), t;
+	})()), h = B(() => a(n.class, p())), ee = B(() => o(n.style, p())), te = B(() => t(p())), g = U(u, "render", "class", "disabled", "nativeButton", "onClick", "onKeyDown", "onKeyUp", "onMouseDown", "onPointerDown", "ref", "style");
+	function _(e) {
+		r.store.open() && r.store.setOpen(!1, s(i, e));
+	}
+	let v = l(() => G(() => d() ? k : void 0), () => c.onClick, () => _), y = l(() => G(() => d() ? k : void 0), () => c.onPointerDown), b = l(() => G(() => d() ? O : void 0), () => c.onMouseDown), x = l(() => G(() => d() ? ie : void 0), () => c.onKeyDown, () => G(() => f() ? void 0 : oe)), S = l(() => G(() => d() ? O : void 0), () => c.onKeyUp, () => G(() => f() ? void 0 : ae));
+	return A(m, N({
+		ref: [c.ref],
+		get type() {
+			return f() ? "button" : void 0;
+		},
+		get role() {
+			return f() ? void 0 : "button";
+		},
+		get tabIndex() {
+			return !f() && d() ? -1 : 0;
+		},
+		get disabled() {
+			return (M(() => !!f())() ? d() : f()) || void 0;
+		},
+		get "aria-disabled"() {
+			return !f() && d() ? "true" : void 0;
+		},
+		get class() {
+			return h();
+		},
+		get style() {
+			return ee();
+		},
+		onClick: v,
+		onKeyDown: x,
+		onKeyUp: S,
+		onMouseDown: b,
+		onPointerDown: y
+	}, te, g));
+}
+//#endregion
+//#region src/dialog/description/DialogDescription.tsx
+var ge = /* @__PURE__ */ I("<p>");
+function _e(t) {
+	let n = Y(), r = t, i = t, s = `base-ui-${H()}`, c = B(() => r.id || s), l = {}, u = e(t, () => l, (e) => (() => {
+		var t = j(ge);
+		return F(t, e, !1), P(), t;
+	})()), d = B(() => a(t.class, l)), f = B(() => o(t.style, l)), p = U(i, "render", "class", "id", "ref", "style");
+	return z(() => c(), (e) => (n.setDescriptionId(e), () => n.setDescriptionId((t) => t === e ? void 0 : t))), A(u, N({
+		ref: [r.ref],
+		get id() {
+			return c();
+		},
+		get class() {
+			return d();
+		},
+		get style() {
+			return f();
+		}
+	}, p));
+}
+//#endregion
+//#region src/dialog/portal/DialogPortalContext.ts
+var ve = Symbol("DialogPortalContext"), ye = R(ve);
+function be() {
+	let e = K(ye);
+	if (e === ve) throw Error("Base UI: <Dialog.Portal> is missing.");
+	return e;
+}
+//#endregion
+//#region src/dialog/portal/DialogPortal.tsx
+function xe(e) {
+	let t = Y(), n = e, r = e, i = B(() => n.keepMounted ?? !1), s = B(() => t.presence.mounted() || i()), c = {}, l = B(() => a(e.class, c)), u = B(() => o(e.style, c)), d = U(r, "render", "class", "container", "keepMounted", "ref", "style"), f = { keepMounted: i };
+	function p() {
+		let e = null;
+		return W(() => {
+			t.internalBackdropElement() === e && t.setInternalBackdropElement(null);
+		}), A(m, {
+			ref: (n) => {
+				e = n, t.setInternalBackdropElement(n);
+			},
+			get open() {
+				return t.store.open();
+			}
+		});
+	}
+	return A(L, {
+		get when() {
+			return s();
+		},
+		get children() {
+			return A(ye, {
+				value: f,
+				get children() {
+					return A(C, N({
+						get render() {
+							return e.render;
+						},
+						get container() {
+							return n.container;
+						},
+						ref: (e) => {
+							n.ref && D(n.ref, e);
+						},
+						get class() {
+							return l();
+						},
+						get style() {
+							return u();
+						}
+					}, d, { get children() {
+						return [A(L, {
+							get when() {
+								return M(() => !!t.presence.mounted())() ? t.modal() === !0 : t.presence.mounted();
+							},
+							get children() {
+								return A(p, {});
+							}
+						}), M(() => e.children)];
+					} }));
+				}
+			});
+		}
+	});
+}
+//#endregion
+//#region src/dialog/title/DialogTitle.tsx
+var Se = /* @__PURE__ */ I("<h2>");
+function Ce(t) {
+	let n = Y(), r = t, i = t, s = `base-ui-${H()}`, c = B(() => r.id || s), l = {}, u = e(t, () => l, (e) => (() => {
+		var t = j(Se);
+		return F(t, e, !1), P(), t;
+	})()), d = B(() => a(t.class, l)), f = B(() => o(t.style, l)), p = U(i, "render", "class", "id", "ref", "style");
+	return z(() => c(), (e) => (n.setTitleId(e), () => n.setTitleId((t) => t === e ? void 0 : t))), A(u, N({
+		ref: [r.ref],
+		get id() {
+			return c();
+		},
+		get class() {
+			return d();
+		},
+		get style() {
+			return f();
+		}
+	}, p));
+}
+//#endregion
+//#region src/dialog/trigger/DialogTrigger.tsx
+var we = /* @__PURE__ */ I("<button>");
+function Te(r) {
+	let i = Y(!0), c = r;
+	if (!i && !G(() => c.handle)) throw Error("Base UI: <Dialog.Trigger> must be used within <Dialog.Root> or provided with a handle.");
+	let u = r, d = `base-ui-${H()}`, f = B(() => c.id || d), p = B(() => c.disabled ?? !1), m = B(() => c.nativeButton ?? !0), [h, ee] = V(null, { ownedWrite: !0 }), te = re(() => c.handle), g = B(() => te() ?? i?.store), _ = B(() => {
+		let e = g();
+		return !!(e?.open() && e.activeTriggerId() === f());
+	}), v = B(() => ({
+		disabled: p(),
+		open: _()
+	})), y = e(r, () => v(), (e) => (() => {
+		var t = j(we);
+		return F(t, e, !1), P(), t;
+	})()), x = B(() => a(r.class, v())), S = B(() => o(r.style, v())), C = B(() => t(v(), ne)), w = U(u, "render", "class", "disabled", "handle", "id", "nativeButton", "onClick", "onKeyDown", "onKeyUp", "onMouseDown", "onPointerDown", "payload", "ref", "style"), T = "", E = "";
+	b(g, f, h, () => ({ payload: c.payload }));
+	function D(e) {
+		let t = g(), r = h();
+		!t || !r || e.button !== 0 || (t.open() || t.setOpenMethod(E || (e.detail === 0 ? "keyboard" : Ee() ? "touch" : "mouse")), t.setOpen(!(t.open() && t.activeTriggerId() === f()), s(n, e, r)));
+	}
+	function I() {
+		E = T, T = "";
+	}
+	function se(e) {
+		T = e.pointerType;
+	}
+	function L(e) {
+		T = "keyboard";
+		let t = g(), n = t?.state.popupElement, r = t ? (t.activeTriggerId() === f() ? t.state.activeTriggerProps : t.state.inactiveTriggerProps).onKeyDown : void 0, i = e.currentTarget;
+		n && i && n.ownerDocument !== i.ownerDocument && typeof r == "function" && r(e);
+	}
+	let R = l(() => G(() => p() ? k : void 0), () => I, () => c.onClick, () => D), z = l(() => G(() => p() ? k : void 0), () => c.onPointerDown, () => se), W = l(() => G(() => p() ? O : void 0), () => c.onMouseDown), K = l(() => G(() => p() ? ie : void 0), () => c.onKeyDown, () => L, () => G(() => m() ? void 0 : oe)), ce = l(() => G(() => p() ? O : void 0), () => c.onKeyUp, () => G(() => m() ? void 0 : ae));
+	return A(y, N({
+		ref: [((e) => ee(e)), c.ref],
+		get id() {
+			return f();
+		},
+		get type() {
+			return m() ? "button" : void 0;
+		},
+		get role() {
+			return m() ? void 0 : "button";
+		},
+		get tabIndex() {
+			return !m() && p() ? -1 : 0;
+		},
+		get disabled() {
+			return (M(() => !!m())() ? p() : m()) || void 0;
+		},
+		get "aria-disabled"() {
+			return !m() && p() ? "true" : void 0;
+		},
+		"aria-haspopup": "dialog",
+		get "aria-expanded"() {
+			return _() ? "true" : "false";
+		},
+		get "aria-controls"() {
+			return g()?.triggerPopupId(f());
+		},
+		"data-base-ui-click-trigger": "",
+		get class() {
+			return x();
+		},
+		get style() {
+			return S();
+		},
+		onClick: R,
+		onKeyDown: K,
+		onKeyUp: ce,
+		onMouseDown: W,
+		onPointerDown: z
+	}, C, w));
+}
+function Ee() {
+	if (typeof navigator > "u") return !1;
+	let e = navigator.platform.toLowerCase();
+	return /^i(os$|p)/.test(e) || e === "macintel" && navigator.maxTouchPoints > 1;
+}
+//#endregion
+//#region src/dialog/viewport/DialogViewport.tsx
+var De = /* @__PURE__ */ I("<div>");
+function Oe(n) {
+	let r = be(), i = Y(), s = n, c = U(n, "render", "class", "ref", "style"), l = B(() => ({
+		open: i.store.open(),
+		transitionStatus: i.store.track().transitionStatus,
+		nested: i.nested,
+		nestedDialogOpen: i.nestedOpenDialogCount() > 0
+	})), u = e(n, () => l(), (e) => (() => {
+		var t = j(De);
+		return F(t, e, !1), P(), t;
+	})()), d = B(() => a(n.class, l())), f = B(() => Z({ "pointer-events": i.store.open() ? void 0 : "none" }, o(n.style, l()))), p = B(() => t(l(), $)), m = B(() => r.keepMounted() || i.presence.mounted()), h = null;
+	return W(() => {
+		i.viewportElement() === h && i.setViewportElement(null);
+	}), A(L, {
+		get when() {
+			return m();
+		},
+		get children() {
+			return A(u, N({
+				ref: [((e) => {
+					h = e, i.setViewportElement(e);
+				}), s.ref],
+				role: "presentation",
+				get hidden() {
+					return !i.presence.mounted();
+				},
+				get class() {
+					return d();
+				},
+				get style() {
+					return f();
+				}
+			}, p, c));
+		}
+	});
+}
+//#endregion
+//#region src/dialog/store/DialogHandle.ts
+var ke = class extends E {
+	constructor() {
+		super("Dialog", !1, new q());
+	}
+	open(e) {
+		this.openByTrigger(e);
+	}
+	openWithPayload(e) {
+		this.attachedStore && (this.attachedStore.setPayload(e), this.attachedStore.setOpen(!0, s(r)));
+	}
+	close() {
+		this.closePopup();
+	}
+	get isOpen() {
+		return this.attachedStore?.open() ?? !1;
+	}
+};
+function Ae() {
+	return new ke();
+}
+//#endregion
+export { Ce as a, _e as c, Q as d, Z as f, Y as h, Te as i, he as l, X as m, Ae as n, xe as o, ue as p, Oe as r, be as s, ke as t, $ as u };