@elmeragroup/fuse 0.1.0-canary.1

package/theme/disable-transition.js

@@ -0,0 +1,60 @@
+//#region src/theme/disable-transition.ts
+/**
+* Runtime transition suppression is adapted from next-themes
+* (https://github.com/pacocoursey/next-themes).
+*
+* MIT License
+* Copyright (c) 2022 Paco Coursey
+*
+* Permission is hereby granted, free of charge, to any person obtaining a copy
+* of this software and associated documentation files (the "Software"), to deal
+* in the Software without restriction, including without limitation the rights
+* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+* copies of the Software, and to permit persons to whom the Software is
+* furnished to do so, subject to the following conditions:
+*
+* The above copyright notice and this permission notice shall be included in all
+* copies or substantial portions of the Software.
+*
+* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+* SOFTWARE.
+*/
+const TRANSITION_DISABLE_CSS = "*,*::before,*::after{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}";
+/**
+* Suppresses CSS transitions for one synchronous `data-theme` write: it appends a nonce'd
+* style, and the returned restore flushes styles and removes it on the next task.
+*
+* @param host - The browser-shaped host whose document receives the style.
+* @param nonce - The CSP nonce for the style, when the host sets one.
+* @returns The restore to call right after the write; a no-op when the host has no document.
+*/
+function disableColorSchemeTransitions(host, nonce) {
+	try {
+		const document = host.document;
+		if (document === void 0) return () => void 0;
+		const css = document.createElement("style");
+		if (nonce !== void 0) css.setAttribute("nonce", nonce);
+		css.append(document.createTextNode(TRANSITION_DISABLE_CSS));
+		document.head.append(css);
+		return () => {
+			try {
+				const body = document.querySelector("body");
+				if (body !== null) host.getComputedStyle(body);
+			} catch {}
+			host.setTimeout(() => {
+				css.remove();
+			}, 1);
+		};
+	} catch {
+		return () => void 0;
+	}
+}
+//#endregion
+export { disableColorSchemeTransitions };
+
+//# sourceMappingURL=disable-transition.js.map

package/theme/disable-transition.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"disable-transition.js","names":[],"sources":["../../src/theme/disable-transition.ts"],"sourcesContent":["/**\n * Runtime transition suppression is adapted from next-themes\n * (https://github.com/pacocoursey/next-themes).\n *\n * MIT License\n * Copyright (c) 2022 Paco Coursey\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in all\n * copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n * SOFTWARE.\n */\n\nconst TRANSITION_DISABLE_CSS =\n  \"*,*::before,*::after{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}\";\n\n/** The window members transition suppression touches. `globalThis` satisfies it structurally. */\nexport type TransitionHost = {\n  /** Receives the style; absent during a server render or in a document-less sandbox. */\n  readonly document?: {\n    /** Receives the temporary transition-suppression style. */\n    readonly head: Pick<HTMLHeadElement, \"append\">;\n    /** Creates the transition-suppression style. */\n    createElement(tagName: \"style\"): HTMLStyleElement;\n    /** Creates the style's text. */\n    createTextNode(data: string): Text;\n    /** Finds the body whose style read flushes the suppression. */\n    querySelector(selectors: \"body\"): Element | null;\n  };\n  /** Flushes styles so the suppression applies before its removal. */\n  getComputedStyle(element: Element): void;\n  /** Schedules the suppression's removal. Required, so the style can never stay on. */\n  setTimeout(callback: () => void, ms: number): void;\n};\n\n/**\n * Suppresses CSS transitions for one synchronous `data-theme` write: it appends a nonce'd\n * style, and the returned restore flushes styles and removes it on the next task.\n *\n * @param host - The browser-shaped host whose document receives the style.\n * @param nonce - The CSP nonce for the style, when the host sets one.\n * @returns The restore to call right after the write; a no-op when the host has no document.\n */\nexport function disableColorSchemeTransitions(host: TransitionHost, nonce: string | undefined): () => void {\n  try {\n    const document = host.document;\n    if (document === undefined) {\n      return () => undefined;\n    }\n    const css = document.createElement(\"style\");\n    if (nonce !== undefined) {\n      css.setAttribute(\"nonce\", nonce);\n    }\n    css.append(document.createTextNode(TRANSITION_DISABLE_CSS));\n    document.head.append(css);\n\n    return () => {\n      try {\n        const body = document.querySelector(\"body\");\n        if (body !== null) {\n          host.getComputedStyle(body);\n        }\n      } catch {\n        // body may be absent during runtime writes\n      }\n      host.setTimeout(() => {\n        css.remove();\n      }, 1);\n    };\n  } catch {\n    return () => undefined;\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AA0BA,MAAM,yBACJ;;;;;;;;;AA6BF,SAAgB,8BAA8B,MAAsB,OAAuC;CACzG,IAAI;EACF,MAAM,WAAW,KAAK;EACtB,IAAI,aAAa,KAAA,GACf,aAAa,KAAA;EAEf,MAAM,MAAM,SAAS,cAAc,OAAO;EAC1C,IAAI,UAAU,KAAA,GACZ,IAAI,aAAa,SAAS,KAAK;EAEjC,IAAI,OAAO,SAAS,eAAe,sBAAsB,CAAC;EAC1D,SAAS,KAAK,OAAO,GAAG;EAExB,aAAa;GACX,IAAI;IACF,MAAM,OAAO,SAAS,cAAc,MAAM;IAC1C,IAAI,SAAS,MACX,KAAK,iBAAiB,IAAI;GAE9B,QAAQ,CAER;GACA,KAAK,iBAAiB;IACpB,IAAI,OAAO;GACb,GAAG,CAAC;EACN;CACF,QAAQ;EACN,aAAa,KAAA;CACf;AACF"}

package/theme/document-brand.d.ts

@@ -0,0 +1,15 @@
+import { ThemeAttributes } from "./theme-attributes.js";
+//#region src/theme/document-brand.d.ts
+/** True below the ThemeProvider that owns the document's brand attributes. */
+export declare const DocumentWriterContext: import("react").Context<boolean>;
+/**
+ * Keeps the document element's brand attributes on a resolved theme. The first commit warns in
+ * development when server-rendered attributes disagree, then writes them. Every later commit
+ * restores attributes that differ, so host code that overwrote them is corrected even when
+ * only color-scheme props changed; a later commit whose document already matches writes nothing.
+ *
+ * @param attributes - The validated theme's `data-theme-*` attributes.
+ */
+export declare function useDocumentBrand(attributes: ThemeAttributes): void;
+//#endregion
+//# sourceMappingURL=document-brand.d.ts.map

package/theme/document-brand.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"document-brand.d.ts","names":[],"sources":["../../src/theme/document-brand.ts"],"mappings":";;;qBAWa,uCAAqB;;;;;;;;;wBA0ClB,iBAAiB,YAAY"}

package/theme/document-brand.js

@@ -0,0 +1,47 @@
+"use client";
+import { isThemeDevelopment } from "./validate-theme.js";
+import { THEME_ATTRIBUTE_NAMES } from "./theme-attributes.js";
+import { createContext, useInsertionEffect, useRef } from "react";
+//#region src/theme/document-brand.ts
+/** True below the ThemeProvider that owns the document's brand attributes. */
+const DocumentWriterContext = createContext(false);
+function readSnapshot(root) {
+	return THEME_ATTRIBUTE_NAMES.map((name) => [name, root.getAttribute(name)]);
+}
+function differs(found, expected) {
+	return found.some(([name, value]) => value !== expected[name]);
+}
+function disagrees(found, expected) {
+	if (found.every(([, value]) => value === null)) return false;
+	return differs(found, expected);
+}
+function mismatchMessage(found, expected) {
+	return `ThemeProvider controlled theme does not match document brand attributes. Expected ${THEME_ATTRIBUTE_NAMES.map((name) => `${name}="${expected[name]}"`).join(" ")}, found ${found.map(([name, value]) => `${name}="${value}"`).join(" ")}. Recovering to the validated controlled theme.`;
+}
+function write(root, attributes) {
+	for (const name of THEME_ATTRIBUTE_NAMES) root.setAttribute(name, attributes[name]);
+}
+/**
+* Keeps the document element's brand attributes on a resolved theme. The first commit warns in
+* development when server-rendered attributes disagree, then writes them. Every later commit
+* restores attributes that differ, so host code that overwrote them is corrected even when
+* only color-scheme props changed; a later commit whose document already matches writes nothing.
+*
+* @param attributes - The validated theme's `data-theme-*` attributes.
+*/
+function useDocumentBrand(attributes) {
+	const diagnosed = useRef(false);
+	useInsertionEffect(() => {
+		const root = document.documentElement;
+		const found = readSnapshot(root);
+		if (!diagnosed.current) {
+			diagnosed.current = true;
+			if (isThemeDevelopment() && disagrees(found, attributes)) console.warn(mismatchMessage(found, attributes));
+			write(root, attributes);
+		} else if (differs(found, attributes)) write(root, attributes);
+	});
+}
+//#endregion
+export { DocumentWriterContext, useDocumentBrand };
+
+//# sourceMappingURL=document-brand.js.map

package/theme/document-brand.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"document-brand.js","names":[],"sources":["../../src/theme/document-brand.ts"],"sourcesContent":["\"use client\";\n\nimport { createContext, useInsertionEffect, useRef } from \"react\";\n\nimport { THEME_ATTRIBUTE_NAMES } from \"./theme-attributes\";\nimport type { ThemeAttributeName, ThemeAttributes } from \"./theme-attributes\";\nimport { isThemeDevelopment } from \"./validate-theme\";\n\ntype DocumentBrandSnapshot = ReadonlyArray<readonly [ThemeAttributeName, string | null]>;\n\n/** True below the ThemeProvider that owns the document's brand attributes. */\nexport const DocumentWriterContext = createContext(false);\n\nfunction readSnapshot(root: Element): DocumentBrandSnapshot {\n  return THEME_ATTRIBUTE_NAMES.map((name) => [name, root.getAttribute(name)] as const);\n}\n\nfunction differs(found: DocumentBrandSnapshot, expected: ThemeAttributes): boolean {\n  return found.some(([name, value]) => value !== expected[name]);\n}\n\n// A document without any brand attribute has no server opinion to disagree with.\nfunction disagrees(found: DocumentBrandSnapshot, expected: ThemeAttributes): boolean {\n  if (found.every(([, value]) => value === null)) {\n    return false;\n  }\n  return differs(found, expected);\n}\n\nfunction mismatchMessage(found: DocumentBrandSnapshot, expected: ThemeAttributes): string {\n  const expectedList = THEME_ATTRIBUTE_NAMES.map((name) => `${name}=\"${expected[name]}\"`).join(\" \");\n  const foundList = found.map(([name, value]) => `${name}=\"${value}\"`).join(\" \");\n  return (\n    \"ThemeProvider controlled theme does not match document brand attributes. \" +\n    `Expected ${expectedList}, found ${foundList}. ` +\n    \"Recovering to the validated controlled theme.\"\n  );\n}\n\nfunction write(root: Element, attributes: ThemeAttributes): void {\n  for (const name of THEME_ATTRIBUTE_NAMES) {\n    root.setAttribute(name, attributes[name]);\n  }\n}\n\n/**\n * Keeps the document element's brand attributes on a resolved theme. The first commit warns in\n * development when server-rendered attributes disagree, then writes them. Every later commit\n * restores attributes that differ, so host code that overwrote them is corrected even when\n * only color-scheme props changed; a later commit whose document already matches writes nothing.\n *\n * @param attributes - The validated theme's `data-theme-*` attributes.\n */\nexport function useDocumentBrand(attributes: ThemeAttributes): void {\n  const diagnosed = useRef(false);\n\n  // No dependency list on purpose, like ColorSchemeRoot's configure: every commit compares.\n  // Insertion runs before descendant useLayoutEffect so children never measure stale brand.\n  useInsertionEffect(() => {\n    const root = document.documentElement;\n    const found = readSnapshot(root);\n    if (!diagnosed.current) {\n      diagnosed.current = true;\n      if (isThemeDevelopment() && disagrees(found, attributes)) {\n        console.warn(mismatchMessage(found, attributes));\n      }\n      write(root, attributes);\n    } else if (differs(found, attributes)) {\n      write(root, attributes);\n    }\n  });\n}\n"],"mappings":";;;;;;AAWA,MAAa,wBAAwB,cAAc,KAAK;AAExD,SAAS,aAAa,MAAsC;CAC1D,OAAO,sBAAsB,KAAK,SAAS,CAAC,MAAM,KAAK,aAAa,IAAI,CAAC,CAAU;AACrF;AAEA,SAAS,QAAQ,OAA8B,UAAoC;CACjF,OAAO,MAAM,MAAM,CAAC,MAAM,WAAW,UAAU,SAAS,KAAK;AAC/D;AAGA,SAAS,UAAU,OAA8B,UAAoC;CACnF,IAAI,MAAM,OAAO,GAAG,WAAW,UAAU,IAAI,GAC3C,OAAO;CAET,OAAO,QAAQ,OAAO,QAAQ;AAChC;AAEA,SAAS,gBAAgB,OAA8B,UAAmC;CAGxF,OACE,qFAHmB,sBAAsB,KAAK,SAAS,GAAG,KAAK,IAAI,SAAS,MAAM,EAAE,CAAC,CAAC,KAAK,GAIpE,EAAE,UAHT,MAAM,KAAK,CAAC,MAAM,WAAW,GAAG,KAAK,IAAI,MAAM,EAAE,CAAC,CAAC,KAAK,GAG7B,EAAE;AAGjD;AAEA,SAAS,MAAM,MAAe,YAAmC;CAC/D,KAAK,MAAM,QAAQ,uBACjB,KAAK,aAAa,MAAM,WAAW,KAAK;AAE5C;;;;;;;;;AAUA,SAAgB,iBAAiB,YAAmC;CAClE,MAAM,YAAY,OAAO,KAAK;CAI9B,yBAAyB;EACvB,MAAM,OAAO,SAAS;EACtB,MAAM,QAAQ,aAAa,IAAI;EAC/B,IAAI,CAAC,UAAU,SAAS;GACtB,UAAU,UAAU;GACpB,IAAI,mBAAmB,KAAK,UAAU,OAAO,UAAU,GACrD,QAAQ,KAAK,gBAAgB,OAAO,UAAU,CAAC;GAEjD,MAAM,MAAM,UAAU;EACxB,OAAO,IAAI,QAAQ,OAAO,UAAU,GAClC,MAAM,MAAM,UAAU;CAE1B,CAAC;AACH"}

package/theme/force-color-scheme.d.ts

@@ -0,0 +1,11 @@
+import { ColorScheme } from "./color-scheme-types.js";
+import "./color-scheme.js";
+import { ReactNode } from "react";
+//#region src/theme/force-color-scheme.d.ts
+export type ForceColorSchemeProps = {
+  value: ColorScheme;
+  children?: ReactNode;
+};
+export declare function ForceColorScheme({ value, children }: ForceColorSchemeProps): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=force-color-scheme.d.ts.map

package/theme/force-color-scheme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"force-color-scheme.d.ts","names":[],"sources":["../../src/theme/force-color-scheme.tsx"],"mappings":";;;;YAQY;EACV,OAAO;EACP,WAAW;;wBAGG,mBAAmB,OAAO,YAAY,wCAAqB,IAAA"}

package/theme/force-color-scheme.js

@@ -0,0 +1,24 @@
+"use client";
+import { ColorSchemeForceContext, ColorSchemeForceDepthContext } from "./color-scheme-root.js";
+import { use, useInsertionEffect } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/theme/force-color-scheme.tsx
+function ForceColorScheme({ value, children }) {
+	const force = use(ColorSchemeForceContext);
+	const parentDepth = use(ColorSchemeForceDepthContext);
+	if (force === void 0) throw new Error("ForceColorScheme must be used within ThemeProvider");
+	const depth = parentDepth + 1;
+	useInsertionEffect(() => force(value, depth), [
+		force,
+		depth,
+		value
+	]);
+	return /* @__PURE__ */ jsx(ColorSchemeForceDepthContext.Provider, {
+		value: depth,
+		children
+	});
+}
+//#endregion
+export { ForceColorScheme };
+
+//# sourceMappingURL=force-color-scheme.js.map

package/theme/force-color-scheme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"force-color-scheme.js","names":[],"sources":["../../src/theme/force-color-scheme.tsx"],"sourcesContent":["\"use client\";\n\nimport { use, useInsertionEffect } from \"react\";\nimport type { ReactNode } from \"react\";\n\nimport type { ColorScheme } from \"./color-scheme\";\nimport { ColorSchemeForceContext, ColorSchemeForceDepthContext } from \"./color-scheme-root\";\n\nexport type ForceColorSchemeProps = {\n  value: ColorScheme;\n  children?: ReactNode;\n};\n\nexport function ForceColorScheme({ value, children }: ForceColorSchemeProps) {\n  const force = use(ColorSchemeForceContext);\n  const parentDepth = use(ColorSchemeForceDepthContext);\n  if (force === undefined) {\n    throw new Error(\"ForceColorScheme must be used within ThemeProvider\");\n  }\n\n  const depth = parentDepth + 1;\n\n  // The release force() returns is the cleanup, so a value change re-applies at the top.\n  useInsertionEffect(() => force(value, depth), [force, depth, value]);\n\n  return (\n    <ColorSchemeForceDepthContext.Provider value={depth}>{children}</ColorSchemeForceDepthContext.Provider>\n  );\n}\n"],"mappings":";;;;;AAaA,SAAgB,iBAAiB,EAAE,OAAO,YAAmC;CAC3E,MAAM,QAAQ,IAAI,uBAAuB;CACzC,MAAM,cAAc,IAAI,4BAA4B;CACpD,IAAI,UAAU,KAAA,GACZ,MAAM,IAAI,MAAM,oDAAoD;CAGtE,MAAM,QAAQ,cAAc;CAG5B,yBAAyB,MAAM,OAAO,KAAK,GAAG;EAAC;EAAO;EAAO;CAAK,CAAC;CAEnE,OACE,oBAAC,6BAA6B,UAA9B;EAAuC,OAAO;EAAQ;CAAgD,CAAA;AAE1G"}

package/theme/theme-attributes.d.ts

@@ -0,0 +1,33 @@
+import { ThemeInput } from "./tokens/themes.js";
+//#region src/theme/theme-attributes.d.ts
+/** The `data-theme-*` attributes that stamp a theme on an element. */
+export type ThemeAttributes = {
+  "data-theme-variant": ThemeInput["variant"];
+  "data-theme-brand": ThemeInput["brand"];
+  "data-theme-segment": ThemeInput["segment"];
+};
+/** One of the `data-theme-*` attribute names a theme stamps on its element. */
+export type ThemeAttributeName = keyof ThemeAttributes;
+/** Every `data-theme-*` attribute name, in write and diagnostic order. */
+export declare const THEME_ATTRIBUTE_NAMES: readonly ["data-theme-variant", "data-theme-brand", "data-theme-segment"];
+/**
+ * Projects an already validated theme onto its `data-theme-*` attributes without revalidating.
+ *
+ * @param theme - A theme `validateTheme` returned.
+ * @returns The attributes that stamp `theme` on an element.
+ */
+export declare function attributesOfValidatedTheme(theme: ThemeInput): ThemeAttributes;
+/**
+ * Validates a theme and returns the `data-theme-*` attributes to spread on an element.
+ *
+ * A segment a pinned brand does not allow throws in development. In production it is
+ * coerced to the brand's pinned segment with a `console.warn`.
+ *
+ * @param theme - The theme to stamp.
+ * @returns The attributes that stamp the validated theme on an element.
+ * @throws When `theme` has an unknown or missing axis, or in development a segment its
+ *   brand is not pinned to.
+ */
+export declare function themeAttributes(theme: ThemeInput): ThemeAttributes;
+//#endregion
+//# sourceMappingURL=theme-attributes.d.ts.map

package/theme/theme-attributes.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-attributes.d.ts","names":[],"sources":["../../src/theme/theme-attributes.ts"],"mappings":";;;YAIY;EACV,sBAAsB;EACtB,oBAAoB;EACpB,sBAAsB;;;YAIZ,2BAA2B;;qBAG1B;;;;;;;wBAYG,2BAA2B,OAAO,aAAa;;;;;;;;;;;;wBAmB/C,gBAAgB,OAAO,aAAa"}

package/theme/theme-attributes.js

@@ -0,0 +1,39 @@
+import { validateTheme } from "./validate-theme.js";
+//#region src/theme/theme-attributes.ts
+/** Every `data-theme-*` attribute name, in write and diagnostic order. */
+const THEME_ATTRIBUTE_NAMES = [
+	"data-theme-variant",
+	"data-theme-brand",
+	"data-theme-segment"
+];
+/**
+* Projects an already validated theme onto its `data-theme-*` attributes without revalidating.
+*
+* @param theme - A theme `validateTheme` returned.
+* @returns The attributes that stamp `theme` on an element.
+*/
+function attributesOfValidatedTheme(theme) {
+	return {
+		"data-theme-variant": theme.variant,
+		"data-theme-brand": theme.brand,
+		"data-theme-segment": theme.segment
+	};
+}
+/**
+* Validates a theme and returns the `data-theme-*` attributes to spread on an element.
+*
+* A segment a pinned brand does not allow throws in development. In production it is
+* coerced to the brand's pinned segment with a `console.warn`.
+*
+* @param theme - The theme to stamp.
+* @returns The attributes that stamp the validated theme on an element.
+* @throws When `theme` has an unknown or missing axis, or in development a segment its
+*   brand is not pinned to.
+*/
+function themeAttributes(theme) {
+	return attributesOfValidatedTheme(validateTheme(theme));
+}
+//#endregion
+export { THEME_ATTRIBUTE_NAMES, attributesOfValidatedTheme, themeAttributes };
+
+//# sourceMappingURL=theme-attributes.js.map

package/theme/theme-attributes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-attributes.js","names":[],"sources":["../../src/theme/theme-attributes.ts"],"sourcesContent":["import type { ThemeInput } from \"./tokens/themes\";\nimport { validateTheme } from \"./validate-theme\";\n\n/** The `data-theme-*` attributes that stamp a theme on an element. */\nexport type ThemeAttributes = {\n  \"data-theme-variant\": ThemeInput[\"variant\"];\n  \"data-theme-brand\": ThemeInput[\"brand\"];\n  \"data-theme-segment\": ThemeInput[\"segment\"];\n};\n\n/** One of the `data-theme-*` attribute names a theme stamps on its element. */\nexport type ThemeAttributeName = keyof ThemeAttributes;\n\n/** Every `data-theme-*` attribute name, in write and diagnostic order. */\nexport const THEME_ATTRIBUTE_NAMES = [\n  \"data-theme-variant\",\n  \"data-theme-brand\",\n  \"data-theme-segment\",\n] as const satisfies ReadonlyArray<ThemeAttributeName>;\n\n/**\n * Projects an already validated theme onto its `data-theme-*` attributes without revalidating.\n *\n * @param theme - A theme `validateTheme` returned.\n * @returns The attributes that stamp `theme` on an element.\n */\nexport function attributesOfValidatedTheme(theme: ThemeInput): ThemeAttributes {\n  return {\n    \"data-theme-variant\": theme.variant,\n    \"data-theme-brand\": theme.brand,\n    \"data-theme-segment\": theme.segment,\n  };\n}\n\n/**\n * Validates a theme and returns the `data-theme-*` attributes to spread on an element.\n *\n * A segment a pinned brand does not allow throws in development. In production it is\n * coerced to the brand's pinned segment with a `console.warn`.\n *\n * @param theme - The theme to stamp.\n * @returns The attributes that stamp the validated theme on an element.\n * @throws When `theme` has an unknown or missing axis, or in development a segment its\n *   brand is not pinned to.\n */\nexport function themeAttributes(theme: ThemeInput): ThemeAttributes {\n  return attributesOfValidatedTheme(validateTheme(theme));\n}\n"],"mappings":";;;AAcA,MAAa,wBAAwB;CACnC;CACA;CACA;AACF;;;;;;;AAQA,SAAgB,2BAA2B,OAAoC;CAC7E,OAAO;EACL,sBAAsB,MAAM;EAC5B,oBAAoB,MAAM;EAC1B,sBAAsB,MAAM;CAC9B;AACF;;;;;;;;;;;;AAaA,SAAgB,gBAAgB,OAAoC;CAClE,OAAO,2BAA2B,cAAc,KAAK,CAAC;AACxD"}

package/theme/theme-context.d.ts

@@ -0,0 +1,25 @@
+import { ThemeInput, ThemeSlug } from "./tokens/themes.js";
+import { ThemeAttributes } from "./theme-attributes.js";
+//#region src/theme/theme-context.d.ts
+export type Theme = ThemeInput & {
+  slug: ThemeSlug;
+};
+export declare const ThemeContext: import("react").Context<Theme | undefined>;
+/** A validated theme and the `data-theme-*` attributes that stamp it. */
+export type ResolvedTheme = {
+  theme: Theme;
+  attributes: ThemeAttributes;
+};
+/**
+ * Resolves a theme input once per axis change, so a production pinned-segment coercion warns
+ * once per axis change and equal inline theme literals keep their identity. An invalid theme
+ * throws its validation error at the calling boundary; a caller that has more hooks renders
+ * them in a child component, so the throw never changes its hook order.
+ *
+ * @param theme - The untyped host theme input.
+ * @returns The validated theme and its attributes.
+ * @throws The validation error for an invalid theme.
+ */
+export declare function useResolvedTheme(theme: ThemeInput): ResolvedTheme;
+//#endregion
+//# sourceMappingURL=theme-context.d.ts.map

package/theme/theme-context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-context.d.ts","names":[],"sources":["../../src/theme/theme-context.ts"],"mappings":";;;YAUY,QAAQ;EAAe,MAAM;;qBAE5B,8BAAY,QAAA;;YAGb;EAAkB,OAAO;EAAO,YAAY;;;;;;;;;;;;wBAYxC,iBAAiB,OAAO,aAAa"}

package/theme/theme-context.js

@@ -0,0 +1,38 @@
+"use client";
+import { themeSlug } from "./tokens/themes.js";
+import { validateTheme } from "./validate-theme.js";
+import { attributesOfValidatedTheme } from "./theme-attributes.js";
+import { createContext, useMemo } from "react";
+//#region src/theme/theme-context.ts
+const ThemeContext = createContext(void 0);
+/**
+* Resolves a theme input once per axis change, so a production pinned-segment coercion warns
+* once per axis change and equal inline theme literals keep their identity. An invalid theme
+* throws its validation error at the calling boundary; a caller that has more hooks renders
+* them in a child component, so the throw never changes its hook order.
+*
+* @param theme - The untyped host theme input.
+* @returns The validated theme and its attributes.
+* @throws The validation error for an invalid theme.
+*/
+function useResolvedTheme(theme) {
+	const axes = theme;
+	return useMemo(() => {
+		const validated = validateTheme(theme);
+		return {
+			theme: {
+				...validated,
+				slug: themeSlug(validated)
+			},
+			attributes: attributesOfValidatedTheme(validated)
+		};
+	}, [
+		axes?.variant,
+		axes?.brand,
+		axes?.segment
+	]);
+}
+//#endregion
+export { ThemeContext, useResolvedTheme };
+
+//# sourceMappingURL=theme-context.js.map

package/theme/theme-context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-context.js","names":[],"sources":["../../src/theme/theme-context.ts"],"sourcesContent":["\"use client\";\n\nimport { createContext, useMemo } from \"react\";\n\nimport { attributesOfValidatedTheme } from \"./theme-attributes\";\nimport type { ThemeAttributes } from \"./theme-attributes\";\nimport { themeSlug } from \"./tokens/themes\";\nimport type { ThemeInput, ThemeSlug } from \"./tokens/themes\";\nimport { validateTheme } from \"./validate-theme\";\n\nexport type Theme = ThemeInput & { slug: ThemeSlug };\n\nexport const ThemeContext = createContext<Theme | undefined>(undefined);\n\n/** A validated theme and the `data-theme-*` attributes that stamp it. */\nexport type ResolvedTheme = { theme: Theme; attributes: ThemeAttributes };\n\n/**\n * Resolves a theme input once per axis change, so a production pinned-segment coercion warns\n * once per axis change and equal inline theme literals keep their identity. An invalid theme\n * throws its validation error at the calling boundary; a caller that has more hooks renders\n * them in a child component, so the throw never changes its hook order.\n *\n * @param theme - The untyped host theme input.\n * @returns The validated theme and its attributes.\n * @throws The validation error for an invalid theme.\n */\nexport function useResolvedTheme(theme: ThemeInput): ResolvedTheme {\n  // SAFETY: untyped CMS/env input is the boundary; optional axis reads keep memo deps from\n  // throwing before the memo can validate and report the real error.\n  const axes = theme as ThemeInput | null;\n  return useMemo((): ResolvedTheme => {\n    const validated = validateTheme(theme);\n    return {\n      // SAFETY: validateTheme already coerced pinned segments, so validated satisfies ThemeInput's\n      // pin invariant; themeSlug returns the matching slug literal for that member.\n      theme: { ...validated, slug: themeSlug(validated) } as Theme,\n      attributes: attributesOfValidatedTheme(validated),\n    };\n    // oxlint-disable-next-line react-hooks/exhaustive-deps -- axis primitives are the equality key; equal inline theme literals must not revalidate\n  }, [axes?.variant, axes?.brand, axes?.segment]);\n}\n"],"mappings":";;;;;;AAYA,MAAa,eAAe,cAAiC,KAAA,CAAS;;;;;;;;;;;AAetE,SAAgB,iBAAiB,OAAkC;CAGjE,MAAM,OAAO;CACb,OAAO,cAA6B;EAClC,MAAM,YAAY,cAAc,KAAK;EACrC,OAAO;GAGL,OAAO;IAAE,GAAG;IAAW,MAAM,UAAU,SAAS;GAAE;GAClD,YAAY,2BAA2B,SAAS;EAClD;CAEF,GAAG;EAAC,MAAM;EAAS,MAAM;EAAO,MAAM;CAAO,CAAC;AAChD"}

package/theme/theme-provider.d.ts

@@ -0,0 +1,17 @@
+import { ThemeInput } from "./tokens/themes.js";
+import { ColorSchemeOptions, ColorSchemeScriptElementProps } from "./color-scheme.js";
+import { Theme } from "./theme-context.js";
+import { ReactNode } from "react";
+//#region src/theme/theme-provider.d.ts
+export type ThemeProviderProps = ColorSchemeOptions & {
+  theme: ThemeInput;
+  children: ReactNode;
+  disableTransitionOnChange?: boolean;
+  injectColorSchemeScript?: boolean;
+  nonce?: string;
+  scriptProps?: ColorSchemeScriptElementProps;
+};
+export declare function ThemeProvider(props: ThemeProviderProps): import("react").JSX.Element;
+export declare function useTheme(): Theme;
+//#endregion
+//# sourceMappingURL=theme-provider.d.ts.map

package/theme/theme-provider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-provider.d.ts","names":[],"sources":["../../src/theme/theme-provider.tsx"],"mappings":";;;;;YAaY,qBAAqB;EAC/B,OAAO;EACP,UAAU;EACV;EACA;EACA;EACA,cAAc;;wBAGA,cAAc,OAAO,qCAAkB,IAAA;wBA6CvC,YAAY"}

package/theme/theme-provider.js

@@ -0,0 +1,48 @@
+"use client";
+import { ColorSchemeRoot } from "./color-scheme-root.js";
+import { DocumentWriterContext, useDocumentBrand } from "./document-brand.js";
+import { ThemeContext, useResolvedTheme } from "./theme-context.js";
+import { use } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/theme/theme-provider.tsx
+function ThemeProvider(props) {
+	if (use(DocumentWriterContext)) return /* @__PURE__ */ jsx(NestedThemeValidator, {
+		theme: props.theme,
+		children: props.children
+	});
+	return /* @__PURE__ */ jsx(DocumentThemeWriter, { ...props });
+}
+function NestedThemeValidator({ theme, children }) {
+	useResolvedTheme(theme);
+	return children;
+}
+function DocumentThemeWriter({ theme, children, ...colorScheme }) {
+	const resolved = useResolvedTheme(theme);
+	return /* @__PURE__ */ jsx(DocumentBrandWriter, {
+		theme: resolved.theme,
+		attributes: resolved.attributes,
+		children: /* @__PURE__ */ jsx(ColorSchemeRoot, {
+			...colorScheme,
+			children
+		})
+	});
+}
+function DocumentBrandWriter({ theme, attributes, children }) {
+	useDocumentBrand(attributes);
+	return /* @__PURE__ */ jsx(DocumentWriterContext.Provider, {
+		value: true,
+		children: /* @__PURE__ */ jsx(ThemeContext.Provider, {
+			value: theme,
+			children
+		})
+	});
+}
+function useTheme() {
+	const theme = use(ThemeContext);
+	if (theme === void 0) throw new Error("useTheme must be used within ThemeProvider or ThemeScope");
+	return theme;
+}
+//#endregion
+export { ThemeProvider, useTheme };
+
+//# sourceMappingURL=theme-provider.js.map

package/theme/theme-provider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-provider.js","names":[],"sources":["../../src/theme/theme-provider.tsx"],"sourcesContent":["\"use client\";\n\nimport { use } from \"react\";\nimport type { ReactNode } from \"react\";\n\nimport type { ColorSchemeOptions, ColorSchemeScriptElementProps } from \"./color-scheme\";\nimport { ColorSchemeRoot } from \"./color-scheme-root\";\nimport { DocumentWriterContext, useDocumentBrand } from \"./document-brand\";\nimport type { ThemeAttributes } from \"./theme-attributes\";\nimport { ThemeContext, useResolvedTheme } from \"./theme-context\";\nimport type { Theme } from \"./theme-context\";\nimport type { ThemeInput } from \"./tokens/themes\";\n\nexport type ThemeProviderProps = ColorSchemeOptions & {\n  theme: ThemeInput;\n  children: ReactNode;\n  disableTransitionOnChange?: boolean;\n  injectColorSchemeScript?: boolean;\n  nonce?: string;\n  scriptProps?: ColorSchemeScriptElementProps;\n};\n\nexport function ThemeProvider(props: ThemeProviderProps) {\n  const hasDocumentWriter = use(DocumentWriterContext);\n  if (hasDocumentWriter) {\n    return <NestedThemeValidator theme={props.theme}>{props.children}</NestedThemeValidator>;\n  }\n  return <DocumentThemeWriter {...props} />;\n}\n\n// Nested providers never fork the document writer; they only validate their own theme.\n// useResolvedTheme memoizes on axis primitives so a production coercion warns once per\n// illegal theme, not on every re-render.\nfunction NestedThemeValidator({ theme, children }: { theme: ThemeInput; children: ReactNode }) {\n  useResolvedTheme(theme);\n  return children;\n}\n\n// The throw for an invalid theme directly follows the one hook it depends on; everything the\n// writer does with a valid theme lives in DocumentBrandWriter and ColorSchemeRoot below.\nfunction DocumentThemeWriter({ theme, children, ...colorScheme }: ThemeProviderProps) {\n  const resolved = useResolvedTheme(theme);\n  return (\n    <DocumentBrandWriter theme={resolved.theme} attributes={resolved.attributes}>\n      <ColorSchemeRoot {...colorScheme}>{children}</ColorSchemeRoot>\n    </DocumentBrandWriter>\n  );\n}\n\nfunction DocumentBrandWriter({\n  theme,\n  attributes,\n  children,\n}: {\n  theme: Theme;\n  attributes: ThemeAttributes;\n  children: ReactNode;\n}) {\n  useDocumentBrand(attributes);\n\n  return (\n    <DocumentWriterContext.Provider value={true}>\n      <ThemeContext.Provider value={theme}>{children}</ThemeContext.Provider>\n    </DocumentWriterContext.Provider>\n  );\n}\n\nexport function useTheme(): Theme {\n  const theme = use(ThemeContext);\n  if (theme === undefined) {\n    throw new Error(\"useTheme must be used within ThemeProvider or ThemeScope\");\n  }\n  return theme;\n}\n"],"mappings":";;;;;;;AAsBA,SAAgB,cAAc,OAA2B;CAEvD,IAD0B,IAAI,qBACV,GAClB,OAAO,oBAAC,sBAAD;EAAsB,OAAO,MAAM;EAAQ,UAAA,MAAM;CAA+B,CAAA;CAEzF,OAAO,oBAAC,qBAAD,EAAqB,GAAI,MAAQ,CAAA;AAC1C;AAKA,SAAS,qBAAqB,EAAE,OAAO,YAAwD;CAC7F,iBAAiB,KAAK;CACtB,OAAO;AACT;AAIA,SAAS,oBAAoB,EAAE,OAAO,UAAU,GAAG,eAAmC;CACpF,MAAM,WAAW,iBAAiB,KAAK;CACvC,OACE,oBAAC,qBAAD;EAAqB,OAAO,SAAS;EAAO,YAAY,SAAS;EAC/D,UAAA,oBAAC,iBAAD;GAAiB,GAAI;GAAc;EAA0B,CAAA;CAC1C,CAAA;AAEzB;AAEA,SAAS,oBAAoB,EAC3B,OACA,YACA,YAKC;CACD,iBAAiB,UAAU;CAE3B,OACE,oBAAC,sBAAsB,UAAvB;EAAgC,OAAO;EACrC,UAAA,oBAAC,aAAa,UAAd;GAAuB,OAAO;GAAQ;EAAgC,CAAA;CACxC,CAAA;AAEpC;AAEA,SAAgB,WAAkB;CAChC,MAAM,QAAQ,IAAI,YAAY;CAC9B,IAAI,UAAU,KAAA,GACZ,MAAM,IAAI,MAAM,0DAA0D;CAE5E,OAAO;AACT"}

package/theme/theme-scope-container.d.ts

@@ -0,0 +1,23 @@
+import { RefObject } from "react";
+//#region src/theme/theme-scope-container.d.ts
+export declare const ThemeScopeContainerContext: import("react").Context<HTMLElement | null | undefined>;
+/**
+ * Resolves the portal target for one overlay, in this order:
+ * explicit `container` element or ref → nearest `ThemeScope` element → primitive
+ * default. The three return arms are the whole contract, and every overlay reads
+ * them the same way:
+ *
+ * - an `HTMLElement` — portal there;
+ * - `null` — an explicit ref or an enclosing `ThemeScope` exists but its element is
+ *   not attached yet, so the overlay renders nothing and waits. It must never
+ *   briefly escape to `document.body`;
+ * - `undefined` — no scope and no explicit container, so the primitive's own default
+ *   (`document.body`) stays in place.
+ *
+ * The canonical call site is `if (resolved === null) return null;` followed by
+ * forwarding the value to the primitive's portal/container prop. Package-private:
+ * neither this hook nor the underlying context is exported.
+ */
+export declare function useResolvedPortalContainer(container?: HTMLElement | RefObject<HTMLElement | null>): HTMLElement | null | undefined;
+//#endregion
+//# sourceMappingURL=theme-scope-container.d.ts.map

package/theme/theme-scope-container.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-scope-container.d.ts","names":[],"sources":["../../src/theme/theme-scope-container.ts"],"mappings":";;qBAKa,4CAA0B,QAAA;;;;;;;;;;;;;;;;;;wBAyBvB,2BACd,YAAY,cAAc,UAAU,sBACnC"}

package/theme/theme-scope-container.js

@@ -0,0 +1,37 @@
+"use client";
+import { createContext, use, useEffect, useReducer } from "react";
+//#region src/theme/theme-scope-container.ts
+const ThemeScopeContainerContext = createContext(void 0);
+function isElementRef(value) {
+	return "current" in value && !("nodeType" in value);
+}
+/**
+* Resolves the portal target for one overlay, in this order:
+* explicit `container` element or ref → nearest `ThemeScope` element → primitive
+* default. The three return arms are the whole contract, and every overlay reads
+* them the same way:
+*
+* - an `HTMLElement` — portal there;
+* - `null` — an explicit ref or an enclosing `ThemeScope` exists but its element is
+*   not attached yet, so the overlay renders nothing and waits. It must never
+*   briefly escape to `document.body`;
+* - `undefined` — no scope and no explicit container, so the primitive's own default
+*   (`document.body`) stays in place.
+*
+* The canonical call site is `if (resolved === null) return null;` followed by
+* forwarding the value to the primitive's portal/container prop. Package-private:
+* neither this hook nor the underlying context is exported.
+*/
+function useResolvedPortalContainer(container) {
+	const scope = use(ThemeScopeContainerContext);
+	const [, refresh] = useReducer((version) => version + 1, 0);
+	const resolved = container === void 0 ? scope : isElementRef(container) ? container.current : container;
+	useEffect(() => {
+		if (container !== void 0 && isElementRef(container) && container.current !== resolved) refresh();
+	}, [container, resolved]);
+	return resolved;
+}
+//#endregion
+export { ThemeScopeContainerContext, useResolvedPortalContainer };
+
+//# sourceMappingURL=theme-scope-container.js.map

package/theme/theme-scope-container.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-scope-container.js","names":[],"sources":["../../src/theme/theme-scope-container.ts"],"sourcesContent":["\"use client\";\n\nimport { createContext, use, useEffect, useReducer } from \"react\";\nimport type { RefObject } from \"react\";\n\nexport const ThemeScopeContainerContext = createContext<HTMLElement | null | undefined>(undefined);\n\nfunction isElementRef(\n  value: HTMLElement | RefObject<HTMLElement | null>\n): value is RefObject<HTMLElement | null> {\n  return \"current\" in value && !(\"nodeType\" in value);\n}\n\n/**\n * Resolves the portal target for one overlay, in this order:\n * explicit `container` element or ref → nearest `ThemeScope` element → primitive\n * default. The three return arms are the whole contract, and every overlay reads\n * them the same way:\n *\n * - an `HTMLElement` — portal there;\n * - `null` — an explicit ref or an enclosing `ThemeScope` exists but its element is\n *   not attached yet, so the overlay renders nothing and waits. It must never\n *   briefly escape to `document.body`;\n * - `undefined` — no scope and no explicit container, so the primitive's own default\n *   (`document.body`) stays in place.\n *\n * The canonical call site is `if (resolved === null) return null;` followed by\n * forwarding the value to the primitive's portal/container prop. Package-private:\n * neither this hook nor the underlying context is exported.\n */\nexport function useResolvedPortalContainer(\n  container?: HTMLElement | RefObject<HTMLElement | null>\n): HTMLElement | null | undefined {\n  const scope = use(ThemeScopeContainerContext);\n  const [, refresh] = useReducer((version: number) => version + 1, 0);\n  const resolved = container === undefined ? scope : isElementRef(container) ? container.current : container;\n\n  // React attaches sibling refs during commit. One post-commit comparison makes\n  // that attachment observable without polling or ever choosing a body fallback.\n  useEffect(() => {\n    if (container !== undefined && isElementRef(container) && container.current !== resolved) {\n      refresh();\n    }\n  }, [container, resolved]);\n\n  return resolved;\n}\n"],"mappings":";;;AAKA,MAAa,6BAA6B,cAA8C,KAAA,CAAS;AAEjG,SAAS,aACP,OACwC;CACxC,OAAO,aAAa,SAAS,EAAE,cAAc;AAC/C;;;;;;;;;;;;;;;;;;AAmBA,SAAgB,2BACd,WACgC;CAChC,MAAM,QAAQ,IAAI,0BAA0B;CAC5C,MAAM,GAAG,WAAW,YAAY,YAAoB,UAAU,GAAG,CAAC;CAClE,MAAM,WAAW,cAAc,KAAA,IAAY,QAAQ,aAAa,SAAS,IAAI,UAAU,UAAU;CAIjG,gBAAgB;EACd,IAAI,cAAc,KAAA,KAAa,aAAa,SAAS,KAAK,UAAU,YAAY,UAC9E,QAAQ;CAEZ,GAAG,CAAC,WAAW,QAAQ,CAAC;CAExB,OAAO;AACT"}

package/theme/theme-scope.d.ts

@@ -0,0 +1,9 @@
+import { ThemeInput } from "./tokens/themes.js";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/theme/theme-scope.d.ts
+export type ThemeScopeProps = Omit<useRender.ComponentProps<"div">, "data-theme-variant" | "data-theme-brand" | "data-theme-segment"> & {
+  theme: ThemeInput;
+};
+export declare function ThemeScope({ theme, render, ref, children, ...rest }: ThemeScopeProps): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=theme-scope.d.ts.map

package/theme/theme-scope.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-scope.d.ts","names":[],"sources":["../../src/theme/theme-scope.tsx"],"mappings":";;;YAaY,kBAAkB,KAC5B,UAAU;EAGV,OAAO;;wBAGO,aAAa,OAAO,QAAQ,KAAK,aAAa,QAAQ,kCAAe,IAAA"}

package/theme/theme-scope.js

@@ -0,0 +1,45 @@
+"use client";
+import { ThemeScopeContainerContext } from "./theme-scope-container.js";
+import { ThemeContext, useResolvedTheme } from "./theme-context.js";
+import { useCallback, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/theme/theme-scope.tsx
+function ThemeScope({ theme, render, ref, children, ...rest }) {
+	const resolved = useResolvedTheme(theme);
+	return /* @__PURE__ */ jsx(ThemeScopeElement, {
+		...rest,
+		render,
+		ref,
+		theme: resolved.theme,
+		attributes: resolved.attributes,
+		children
+	});
+}
+function ThemeScopeElement({ theme, attributes, render, ref, children, ...rest }) {
+	const [element, setElement] = useState(null);
+	const setScopeElement = useCallback((node) => {
+		setElement(node);
+	}, []);
+	const rendered = useRender({
+		defaultTagName: "div",
+		render,
+		ref: ref === void 0 ? setScopeElement : [ref, setScopeElement],
+		props: mergeProps(rest, {
+			...attributes,
+			children
+		})
+	});
+	return /* @__PURE__ */ jsx(ThemeContext.Provider, {
+		value: theme,
+		children: /* @__PURE__ */ jsx(ThemeScopeContainerContext.Provider, {
+			value: element,
+			children: rendered
+		})
+	});
+}
+//#endregion
+export { ThemeScope };
+
+//# sourceMappingURL=theme-scope.js.map

package/theme/theme-scope.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-scope.js","names":[],"sources":["../../src/theme/theme-scope.tsx"],"sourcesContent":["\"use client\";\n\nimport { useCallback, useState } from \"react\";\n\nimport { mergeProps } from \"@base-ui/react/merge-props\";\nimport { useRender } from \"@base-ui/react/use-render\";\n\nimport type { ThemeAttributes } from \"./theme-attributes\";\nimport { ThemeContext, useResolvedTheme } from \"./theme-context\";\nimport type { Theme } from \"./theme-context\";\nimport { ThemeScopeContainerContext } from \"./theme-scope-container\";\nimport type { ThemeInput } from \"./tokens/themes\";\n\nexport type ThemeScopeProps = Omit<\n  useRender.ComponentProps<\"div\">,\n  \"data-theme-variant\" | \"data-theme-brand\" | \"data-theme-segment\"\n> & {\n  theme: ThemeInput;\n};\n\nexport function ThemeScope({ theme, render, ref, children, ...rest }: ThemeScopeProps) {\n  const resolved = useResolvedTheme(theme);\n  return (\n    <ThemeScopeElement\n      {...rest}\n      render={render}\n      ref={ref}\n      theme={resolved.theme}\n      attributes={resolved.attributes}>\n      {children}\n    </ThemeScopeElement>\n  );\n}\n\n// The throw for an invalid theme directly follows the one hook it depends on in ThemeScope;\n// the element's own hooks run only for a valid theme.\nfunction ThemeScopeElement({\n  theme,\n  attributes,\n  render,\n  ref,\n  children,\n  ...rest\n}: Omit<ThemeScopeProps, \"theme\"> & { theme: Theme; attributes: ThemeAttributes }) {\n  const [element, setElement] = useState<HTMLElement | null>(null);\n  const setScopeElement = useCallback((node: HTMLElement | null) => {\n    setElement(node);\n  }, []);\n\n  const rendered = useRender({\n    defaultTagName: \"div\",\n    render,\n    ref: ref === undefined ? setScopeElement : [ref, setScopeElement],\n    props: mergeProps<\"div\">(rest, {\n      ...attributes,\n      children,\n    }),\n  });\n\n  return (\n    <ThemeContext.Provider value={theme}>\n      <ThemeScopeContainerContext.Provider value={element}>{rendered}</ThemeScopeContainerContext.Provider>\n    </ThemeContext.Provider>\n  );\n}\n"],"mappings":";;;;;;;;AAoBA,SAAgB,WAAW,EAAE,OAAO,QAAQ,KAAK,UAAU,GAAG,QAAyB;CACrF,MAAM,WAAW,iBAAiB,KAAK;CACvC,OACE,oBAAC,mBAAD;EACE,GAAI;EACI;EACH;EACL,OAAO,SAAS;EAChB,YAAY,SAAS;EACpB;CACgB,CAAA;AAEvB;AAIA,SAAS,kBAAkB,EACzB,OACA,YACA,QACA,KACA,UACA,GAAG,QAC8E;CACjF,MAAM,CAAC,SAAS,cAAc,SAA6B,IAAI;CAC/D,MAAM,kBAAkB,aAAa,SAA6B;EAChE,WAAW,IAAI;CACjB,GAAG,CAAC,CAAC;CAEL,MAAM,WAAW,UAAU;EACzB,gBAAgB;EAChB;EACA,KAAK,QAAQ,KAAA,IAAY,kBAAkB,CAAC,KAAK,eAAe;EAChE,OAAO,WAAkB,MAAM;GAC7B,GAAG;GACH;EACF,CAAC;CACH,CAAC;CAED,OACE,oBAAC,aAAa,UAAd;EAAuB,OAAO;EAC5B,UAAA,oBAAC,2BAA2B,UAA5B;GAAqC,OAAO;GAAU,UAAA;EAA8C,CAAA;CAC/E,CAAA;AAE3B"}