@puzzle-ui/theme 0.0.0-stage → 0.1.0

package/dist/scope-context.js

@@ -0,0 +1,56 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { createContext, useContext, useEffect, useMemo, useRef, useState } from "react";
+// src/scope-context.tsx
+const ThemeScopeContext = createContext(null);
+const ThemeScopeProvider = ({ scopeId, theme, children }) => {
+	const scopeElementRef = useRef(null);
+	const [portalState, setPortalState] = useState(null);
+	useEffect(() => {
+		if (scopeId === null) return;
+		const ownerDocument = scopeElementRef.current?.ownerDocument;
+		if (!ownerDocument?.body) return;
+		const portalTarget = ownerDocument.createElement("div");
+		portalTarget.className = "puzzle-theme-scope puzzle-theme-scope--portal";
+		portalTarget.dataset.puzzleThemeScope = scopeId;
+		portalTarget.dataset.theme = theme;
+		portalTarget.dataset.puzzleThemePortal = "true";
+		ownerDocument.body.append(portalTarget);
+		setPortalState({
+			scopeId,
+			theme,
+			element: portalTarget
+		});
+		return () => {
+			portalTarget.remove();
+		};
+	}, [scopeId, theme]);
+	const portalTarget = scopeId !== null && portalState?.scopeId === scopeId && portalState.theme === theme ? portalState.element : null;
+	const value = useMemo(() => {
+		return scopeId === null ? null : {
+			scopeId,
+			theme,
+			portalTarget
+		};
+	}, [
+		scopeId,
+		theme,
+		portalTarget
+	]);
+	return /* @__PURE__ */ jsx(ThemeScopeContext.Provider, {
+		value,
+		children: scopeId === null ? children : /* @__PURE__ */ jsx("div", {
+			ref: scopeElementRef,
+			className: "puzzle-theme-scope",
+			"data-puzzle-theme-scope": scopeId,
+			"data-theme": theme,
+			children
+		})
+	});
+};
+const useThemeScope = () => {
+	return useContext(ThemeScopeContext);
+};
+export { ThemeScopeProvider, useThemeScope };
+
+//# sourceMappingURL=scope-context.js.map

package/dist/scope-context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"scope-context.js","names":[],"sources":["../src/scope-context.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  createContext,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n  type PropsWithChildren,\n} from \"react\";\n\nimport type { ThemeMode } from \"./types\";\n\ntype ThemeScopeContextValue = {\n  scopeId: string;\n  theme: ThemeMode;\n  portalTarget: HTMLDivElement | null;\n};\n\ntype ThemeScopePortalState = {\n  scopeId: string;\n  theme: ThemeMode;\n  element: HTMLDivElement;\n};\n\ntype ThemeScopeProviderProps = PropsWithChildren<{\n  scopeId: string | null;\n  theme: ThemeMode;\n}>;\n\nconst ThemeScopeContext = createContext<ThemeScopeContextValue | null>(null);\n\nconst ThemeScopeProvider = ({\n  scopeId,\n  theme,\n  children,\n}: ThemeScopeProviderProps) => {\n  const scopeElementRef = useRef<HTMLDivElement>(null);\n  const [portalState, setPortalState] = useState<ThemeScopePortalState | null>(\n    null,\n  );\n\n  useEffect(() => {\n    if (scopeId === null) {\n      return;\n    }\n\n    const ownerDocument = scopeElementRef.current?.ownerDocument;\n\n    if (!ownerDocument?.body) {\n      return;\n    }\n\n    const portalTarget = ownerDocument.createElement(\"div\");\n\n    portalTarget.className = \"puzzle-theme-scope puzzle-theme-scope--portal\";\n    portalTarget.dataset.puzzleThemeScope = scopeId;\n    portalTarget.dataset.theme = theme;\n    portalTarget.dataset.puzzleThemePortal = \"true\";\n\n    ownerDocument.body.append(portalTarget);\n\n    setPortalState({\n      scopeId,\n      theme,\n      element: portalTarget,\n    });\n\n    return () => {\n      portalTarget.remove();\n    };\n  }, [scopeId, theme]);\n\n  const portalTarget =\n    scopeId !== null &&\n    portalState?.scopeId === scopeId &&\n    portalState.theme === theme\n      ? portalState.element\n      : null;\n\n  const value = useMemo<ThemeScopeContextValue | null>(() => {\n    return scopeId === null\n      ? null\n      : {\n          scopeId,\n          theme,\n          portalTarget,\n        };\n  }, [scopeId, theme, portalTarget]);\n\n  return (\n    <ThemeScopeContext.Provider value={value}>\n      {scopeId === null ? (\n        children\n      ) : (\n        <div\n          ref={scopeElementRef}\n          className=\"puzzle-theme-scope\"\n          data-puzzle-theme-scope={scopeId}\n          data-theme={theme}\n        >\n          {children}\n        </div>\n      )}\n    </ThemeScopeContext.Provider>\n  );\n};\n\nconst useThemeScope = () => {\n  return useContext(ThemeScopeContext);\n};\n\nexport { ThemeScopeProvider, useThemeScope, type ThemeScopeContextValue };\n"],"mappings":";;;;AA+BA,MAAM,oBAAoB,cAA6C,IAAI;AAE3E,MAAM,sBAAsB,EAC1B,SACA,OACA,eAC6B;CAC7B,MAAM,kBAAkB,OAAuB,IAAI;CACnD,MAAM,CAAC,aAAa,kBAAkB,SACpC,IACF;CAEA,gBAAgB;EACd,IAAI,YAAY,MACd;EAGF,MAAM,gBAAgB,gBAAgB,SAAS;EAE/C,IAAI,CAAC,eAAe,MAClB;EAGF,MAAM,eAAe,cAAc,cAAc,KAAK;EAEtD,aAAa,YAAY;EACzB,aAAa,QAAQ,mBAAmB;EACxC,aAAa,QAAQ,QAAQ;EAC7B,aAAa,QAAQ,oBAAoB;EAEzC,cAAc,KAAK,OAAO,YAAY;EAEtC,eAAe;GACb;GACA;GACA,SAAS;EACX,CAAC;EAED,aAAa;GACX,aAAa,OAAO;EACtB;CACF,GAAG,CAAC,SAAS,KAAK,CAAC;CAEnB,MAAM,eACJ,YAAY,QACZ,aAAa,YAAY,WACzB,YAAY,UAAU,QAClB,YAAY,UACZ;CAEN,MAAM,QAAQ,cAA6C;EACzD,OAAO,YAAY,OACf,OACA;GACE;GACA;GACA;EACF;CACN,GAAG;EAAC;EAAS;EAAO;CAAY,CAAC;CAEjC,OACE,oBAAC,kBAAkB,UAAnB;EAAmC;EAChC,UAAA,YAAY,OACX,WAEA,oBAAC,OAAD;GACE,KAAK;GACL,WAAU;GACV,2BAAyB;GACzB,cAAY;GAEX;EACE,CAAA;CAEmB,CAAA;AAEhC;AAEA,MAAM,sBAAsB;CAC1B,OAAO,WAAW,iBAAiB;AACrC"}

package/dist/theme-scopes.css

@@ -0,0 +1,90 @@
+.puzzle-theme-scope {
+  color: var(--puzzle-color-text, inherit);
+  display: contents;
+}
+
+.puzzle-theme-scope[data-theme="light"], .puzzle-theme-scope[data-theme="system"] {
+  color-scheme: light;
+  --puzzle-color-background: var(--puzzle-color-scheme-light-background, #f7f4ea);
+  --puzzle-color-surface: var(--puzzle-color-scheme-light-surface, #fff);
+  --puzzle-color-surface-elevated: var(--puzzle-color-scheme-light-surface-elevated, #fff);
+  --puzzle-color-surface-sunken: var(--puzzle-color-scheme-light-surface-sunken, #f1eee6);
+  --puzzle-color-text: var(--puzzle-color-scheme-light-text, #171717);
+  --puzzle-color-text-muted: var(--puzzle-color-scheme-light-text-muted, #666);
+  --puzzle-color-text-subtle: var(--puzzle-color-scheme-light-text-subtle, #737373);
+  --puzzle-color-border: var(--puzzle-color-scheme-light-border, #e5e0d6);
+  --puzzle-color-border-strong: var(--puzzle-color-scheme-light-border-strong, #c9c2b6);
+  --puzzle-color-primary: var(--puzzle-color-scheme-light-primary, #2563eb);
+  --puzzle-color-primary-foreground: var(--puzzle-color-scheme-light-primary-foreground, #fff);
+  --puzzle-color-secondary: var(--puzzle-color-scheme-light-secondary, #64748b);
+  --puzzle-color-secondary-foreground: var(--puzzle-color-scheme-light-secondary-foreground, #fff);
+  --puzzle-color-accent: var(--puzzle-color-scheme-light-accent, #7c3aed);
+  --puzzle-color-accent-foreground: var(--puzzle-color-scheme-light-accent-foreground, #fff);
+  --puzzle-color-ring: var(--puzzle-color-scheme-light-ring, #2563eb);
+  --puzzle-color-success: var(--puzzle-color-scheme-light-success, #15803d);
+  --puzzle-color-success-foreground: var(--puzzle-color-scheme-light-success-foreground, #fff);
+  --puzzle-color-warning: var(--puzzle-color-scheme-light-warning, #a16207);
+  --puzzle-color-warning-foreground: var(--puzzle-color-scheme-light-warning-foreground, #fff);
+  --puzzle-color-danger: var(--puzzle-color-scheme-light-danger, #b91c1c);
+  --puzzle-color-danger-foreground: var(--puzzle-color-scheme-light-danger-foreground, #fff);
+  --puzzle-color-info: var(--puzzle-color-scheme-light-info, #0369a1);
+  --puzzle-color-info-foreground: var(--puzzle-color-scheme-light-info-foreground, #fff);
+}
+
+.puzzle-theme-scope[data-theme="dark"] {
+  color-scheme: dark;
+  --puzzle-color-background: var(--puzzle-color-scheme-dark-background, #111518);
+  --puzzle-color-surface: var(--puzzle-color-scheme-dark-surface, #1c2226);
+  --puzzle-color-surface-elevated: var(--puzzle-color-scheme-dark-surface-elevated, #242c31);
+  --puzzle-color-surface-sunken: var(--puzzle-color-scheme-dark-surface-sunken, #0d1113);
+  --puzzle-color-text: var(--puzzle-color-scheme-dark-text, #f5f5f5);
+  --puzzle-color-text-muted: var(--puzzle-color-scheme-dark-text-muted, #a4adb3);
+  --puzzle-color-text-subtle: var(--puzzle-color-scheme-dark-text-subtle, #8c969d);
+  --puzzle-color-border: var(--puzzle-color-scheme-dark-border, #343c42);
+  --puzzle-color-border-strong: var(--puzzle-color-scheme-dark-border-strong, #4a555d);
+  --puzzle-color-primary: var(--puzzle-color-scheme-dark-primary, #60a5fa);
+  --puzzle-color-primary-foreground: var(--puzzle-color-scheme-dark-primary-foreground, #0b1220);
+  --puzzle-color-secondary: var(--puzzle-color-scheme-dark-secondary, #94a3b8);
+  --puzzle-color-secondary-foreground: var(--puzzle-color-scheme-dark-secondary-foreground, #0f172a);
+  --puzzle-color-accent: var(--puzzle-color-scheme-dark-accent, #c4b5fd);
+  --puzzle-color-accent-foreground: var(--puzzle-color-scheme-dark-accent-foreground, #1e1b4b);
+  --puzzle-color-ring: var(--puzzle-color-scheme-dark-ring, #93c5fd);
+  --puzzle-color-success: var(--puzzle-color-scheme-dark-success, #4ade80);
+  --puzzle-color-success-foreground: var(--puzzle-color-scheme-dark-success-foreground, #052e16);
+  --puzzle-color-warning: var(--puzzle-color-scheme-dark-warning, #fbbf24);
+  --puzzle-color-warning-foreground: var(--puzzle-color-scheme-dark-warning-foreground, #422006);
+  --puzzle-color-danger: var(--puzzle-color-scheme-dark-danger, #f87171);
+  --puzzle-color-danger-foreground: var(--puzzle-color-scheme-dark-danger-foreground, #450a0a);
+  --puzzle-color-info: var(--puzzle-color-scheme-dark-info, #38bdf8);
+  --puzzle-color-info-foreground: var(--puzzle-color-scheme-dark-info-foreground, #082f49);
+}
+
+@media (prefers-color-scheme: dark) {
+  .puzzle-theme-scope[data-theme="system"] {
+    color-scheme: dark;
+    --puzzle-color-background: var(--puzzle-color-scheme-dark-background, #111518);
+    --puzzle-color-surface: var(--puzzle-color-scheme-dark-surface, #1c2226);
+    --puzzle-color-surface-elevated: var(--puzzle-color-scheme-dark-surface-elevated, #242c31);
+    --puzzle-color-surface-sunken: var(--puzzle-color-scheme-dark-surface-sunken, #0d1113);
+    --puzzle-color-text: var(--puzzle-color-scheme-dark-text, #f5f5f5);
+    --puzzle-color-text-muted: var(--puzzle-color-scheme-dark-text-muted, #a4adb3);
+    --puzzle-color-text-subtle: var(--puzzle-color-scheme-dark-text-subtle, #8c969d);
+    --puzzle-color-border: var(--puzzle-color-scheme-dark-border, #343c42);
+    --puzzle-color-border-strong: var(--puzzle-color-scheme-dark-border-strong, #4a555d);
+    --puzzle-color-primary: var(--puzzle-color-scheme-dark-primary, #60a5fa);
+    --puzzle-color-primary-foreground: var(--puzzle-color-scheme-dark-primary-foreground, #0b1220);
+    --puzzle-color-secondary: var(--puzzle-color-scheme-dark-secondary, #94a3b8);
+    --puzzle-color-secondary-foreground: var(--puzzle-color-scheme-dark-secondary-foreground, #0f172a);
+    --puzzle-color-accent: var(--puzzle-color-scheme-dark-accent, #c4b5fd);
+    --puzzle-color-accent-foreground: var(--puzzle-color-scheme-dark-accent-foreground, #1e1b4b);
+    --puzzle-color-ring: var(--puzzle-color-scheme-dark-ring, #93c5fd);
+    --puzzle-color-success: var(--puzzle-color-scheme-dark-success, #4ade80);
+    --puzzle-color-success-foreground: var(--puzzle-color-scheme-dark-success-foreground, #052e16);
+    --puzzle-color-warning: var(--puzzle-color-scheme-dark-warning, #fbbf24);
+    --puzzle-color-warning-foreground: var(--puzzle-color-scheme-dark-warning-foreground, #422006);
+    --puzzle-color-danger: var(--puzzle-color-scheme-dark-danger, #f87171);
+    --puzzle-color-danger-foreground: var(--puzzle-color-scheme-dark-danger-foreground, #450a0a);
+    --puzzle-color-info: var(--puzzle-color-scheme-dark-info, #38bdf8);
+    --puzzle-color-info-foreground: var(--puzzle-color-scheme-dark-info-foreground, #082f49);
+  }
+}

package/dist/theme.cjs

@@ -0,0 +1,56 @@
+const require_components_context = require("./components-context.cjs");
+const require_scope_context = require("./scope-context.cjs");
+const require_resolve_font_stylesheets = require("./fonts/resolve-font-stylesheets.cjs");
+const require_create_theme_variables = require("./create-theme-variables.cjs");
+const require_create_theme_css = require("./create-theme-css.cjs");
+;/* empty css            */
+;/* empty css                   */
+;/* empty css             */
+let react_jsx_runtime = require("react/jsx-runtime");
+let react = require("react");
+// src/theme.tsx
+const Theme = ({ nonce, fonts, theme = "system", scope = "root", globalStyles, tokens, colorTheme, components, children }) => {
+	const scopeId = (0, react.useId)();
+	const fontStylesheets = require_resolve_font_stylesheets.resolveFontStylesheets(fonts);
+	const cssVariables = require_create_theme_variables.createThemeVariables(fonts, tokens, theme, colorTheme);
+	const css = `${scope === "root" ? ":root" : `[data-puzzle-theme-scope="${scopeId}"]`} {\n${require_create_theme_css.createThemeCss(cssVariables)}\n}`;
+	const shouldApplyGlobalStyles = scope === "root" && (globalStyles ?? true);
+	const scopedContent = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_scope_context.ThemeScopeProvider, {
+		scopeId: scope === "local" ? scopeId : null,
+		theme,
+		children: components === void 0 ? children : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_context.ThemeComponentsProvider, {
+			components,
+			children
+		})
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+		fontStylesheets.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("link", {
+			rel: "preconnect",
+			href: "https://fonts.googleapis.com"
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("link", {
+			rel: "preconnect",
+			href: "https://fonts.gstatic.com",
+			crossOrigin: "anonymous"
+		})] }) : null,
+		fontStylesheets.map(({ href }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("link", {
+			rel: "stylesheet",
+			href,
+			precedence: "default"
+		}, href)),
+		shouldApplyGlobalStyles ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("style", {
+			nonce,
+			"data-puzzle-global-styles": ""
+		}) : null,
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("style", {
+			nonce,
+			"data-theme": theme,
+			"data-puzzle-theme": scope === "root" ? "true" : void 0,
+			"data-puzzle-theme-scope-style": scope === "local" ? scopeId : void 0,
+			children: css
+		}),
+		scopedContent
+	] });
+};
+exports.Theme = Theme;
+
+//# sourceMappingURL=theme.cjs.map

package/dist/theme.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.cjs","names":["useId","resolveFontStylesheets","createThemeVariables","createThemeCss","ThemeScopeProvider","ThemeComponentsProvider"],"sources":["../src/theme.tsx"],"sourcesContent":["import { useId, type PropsWithChildren } from \"react\";\n\nimport type { FontRole, FontConfig } from \"./fonts\";\nimport type { ColorThemes, ThemeMode, ThemeTokenOverrides } from \"./types\";\nimport type { ThemeComponents } from \"./components.types\";\n\nimport { ThemeComponentsProvider } from \"./components-context\";\nimport { ThemeScopeProvider } from \"./scope-context\";\n\nimport { resolveFontStylesheets } from \"./fonts/resolve-font-stylesheets\";\nimport { createThemeVariables } from \"./create-theme-variables\";\nimport { createThemeCss } from \"./create-theme-css\";\n\nimport \"./theme.css\";\nimport \"./theme-scopes.css\";\nimport \"./global.css\";\n\nexport type ThemeScope = \"root\" | \"local\";\n\nexport type ThemeProps = {\n  nonce?: string;\n  theme?: ThemeMode;\n  scope?: ThemeScope;\n  globalStyles?: boolean;\n  fonts?: Partial<Record<FontRole, FontConfig>>;\n  tokens?: ThemeTokenOverrides;\n  colorTheme?: ColorThemes;\n  components?: ThemeComponents;\n};\n\nconst Theme = ({\n  nonce,\n  fonts,\n  theme = \"system\",\n  scope = \"root\",\n  globalStyles,\n  tokens,\n  colorTheme,\n  components,\n  children,\n}: PropsWithChildren<ThemeProps>) => {\n  const scopeId = useId();\n\n  const fontStylesheets = resolveFontStylesheets(fonts);\n  const cssVariables = createThemeVariables(fonts, tokens, theme, colorTheme);\n\n  const cssSelector =\n    scope === \"root\" ? \":root\" : `[data-puzzle-theme-scope=\"${scopeId}\"]`;\n\n  const css = `${cssSelector} {\\n${createThemeCss(cssVariables)}\\n}`;\n\n  const shouldApplyGlobalStyles = scope === \"root\" && (globalStyles ?? true);\n\n  const content =\n    components === undefined ? (\n      children\n    ) : (\n      <ThemeComponentsProvider components={components}>\n        {children}\n      </ThemeComponentsProvider>\n    );\n\n  const scopedContent = (\n    <ThemeScopeProvider\n      scopeId={scope === \"local\" ? scopeId : null}\n      theme={theme}\n    >\n      {content}\n    </ThemeScopeProvider>\n  );\n\n  return (\n    <>\n      {fontStylesheets.length > 0 ? (\n        <>\n          <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\" />\n          <link\n            rel=\"preconnect\"\n            href=\"https://fonts.gstatic.com\"\n            crossOrigin=\"anonymous\"\n          />\n        </>\n      ) : null}\n\n      {fontStylesheets.map(({ href }) => (\n        <link key={href} rel=\"stylesheet\" href={href} precedence=\"default\" />\n      ))}\n\n      {shouldApplyGlobalStyles ? (\n        <style nonce={nonce} data-puzzle-global-styles=\"\" />\n      ) : null}\n\n      <style\n        nonce={nonce}\n        data-theme={theme}\n        data-puzzle-theme={scope === \"root\" ? \"true\" : undefined}\n        data-puzzle-theme-scope-style={scope === \"local\" ? scopeId : undefined}\n      >\n        {css}\n      </style>\n\n      {scopedContent}\n    </>\n  );\n};\n\nexport { Theme };\n"],"mappings":";;;;;;;;;;;AA8BA,MAAM,SAAS,EACb,OACA,OACA,QAAQ,UACR,QAAQ,QACR,cACA,QACA,YACA,YACA,eACmC;CACnC,MAAM,WAAA,GAAUA,MAAAA,MAAAA,CAAM;CAEtB,MAAM,kBAAkBC,iCAAAA,uBAAuB,KAAK;CACpD,MAAM,eAAeC,+BAAAA,qBAAqB,OAAO,QAAQ,OAAO,UAAU;CAK1E,MAAM,MAAM,GAFV,UAAU,SAAS,UAAU,6BAA6B,QAAQ,IAEzC,MAAMC,yBAAAA,eAAe,YAAY,EAAE;CAE9D,MAAM,0BAA0B,UAAU,WAAW,gBAAgB;CAWrE,MAAM,gBACJ,iBAAA,GAAA,kBAAA,IAAA,CAACC,sBAAAA,oBAAD;EACE,SAAS,UAAU,UAAU,UAAU;EAChC;EAXT,UAAA,eAAe,KAAA,IACb,WAEA,iBAAA,GAAA,kBAAA,IAAA,CAACC,2BAAAA,yBAAD;GAAqC;GAClC;EACsB,CAAA;CASP,CAAA;CAGtB,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAA,kBAAA,UAAA,EAAA,UAAA;EACG,gBAAgB,SAAS,IACxB,iBAAA,GAAA,kBAAA,KAAA,CAAA,kBAAA,UAAA,EAAA,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;GAAM,KAAI;GAAa,MAAK;EAAgC,CAAA,GAC5D,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;GACE,KAAI;GACJ,MAAK;GACL,aAAY;EACb,CAAA,CACD,EAAA,CAAA,IACA;EAEH,gBAAgB,KAAK,EAAE,WACtB,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;GAAiB,KAAI;GAAmB;GAAM,YAAW;EAAW,GAAzD,IAAyD,CACrE;EAEA,0BACC,iBAAA,GAAA,kBAAA,IAAA,CAAC,SAAD;GAAc;GAAO,6BAA0B;EAAI,CAAA,IACjD;EAEJ,iBAAA,GAAA,kBAAA,IAAA,CAAC,SAAD;GACS;GACP,cAAY;GACZ,qBAAmB,UAAU,SAAS,SAAS,KAAA;GAC/C,iCAA+B,UAAU,UAAU,UAAU,KAAA;GAE5D,UAAA;EACI,CAAA;EAEN;CACD,EAAA,CAAA;AAEN"}

package/dist/theme.css

@@ -0,0 +1,194 @@
+:root {
+  color-scheme: light;
+  --puzzle-container-gutter: clamp(1rem, 3vw, 3rem);
+  --puzzle-color-background: var(--puzzle-color-scheme-light-background, #f7f4ea);
+  --puzzle-color-surface: var(--puzzle-color-scheme-light-surface, #fff);
+  --puzzle-color-surface-elevated: var(--puzzle-color-scheme-light-surface-elevated, #fff);
+  --puzzle-color-surface-sunken: var(--puzzle-color-scheme-light-surface-sunken, #f1eee6);
+  --puzzle-color-text: var(--puzzle-color-scheme-light-text, #171717);
+  --puzzle-color-text-muted: var(--puzzle-color-scheme-light-text-muted, #666);
+  --puzzle-color-text-subtle: var(--puzzle-color-scheme-light-text-subtle, #737373);
+  --puzzle-color-border: var(--puzzle-color-scheme-light-border, #e5e0d6);
+  --puzzle-color-border-strong: var(--puzzle-color-scheme-light-border-strong, #c9c2b6);
+  --puzzle-color-primary: var(--puzzle-color-scheme-light-primary, #2563eb);
+  --puzzle-color-primary-foreground: var(--puzzle-color-scheme-light-primary-foreground, #fff);
+  --puzzle-color-secondary: var(--puzzle-color-scheme-light-secondary, #64748b);
+  --puzzle-color-secondary-foreground: var(--puzzle-color-scheme-light-secondary-foreground, #fff);
+  --puzzle-color-accent: var(--puzzle-color-scheme-light-accent, #7c3aed);
+  --puzzle-color-accent-foreground: var(--puzzle-color-scheme-light-accent-foreground, #fff);
+  --puzzle-color-ring: var(--puzzle-color-scheme-light-ring, #2563eb);
+  --puzzle-color-success: var(--puzzle-color-scheme-light-success, #15803d);
+  --puzzle-color-success-foreground: var(--puzzle-color-scheme-light-success-foreground, #fff);
+  --puzzle-color-warning: var(--puzzle-color-scheme-light-warning, #a16207);
+  --puzzle-color-warning-foreground: var(--puzzle-color-scheme-light-warning-foreground, #fff);
+  --puzzle-color-danger: var(--puzzle-color-scheme-light-danger, #b91c1c);
+  --puzzle-color-danger-foreground: var(--puzzle-color-scheme-light-danger-foreground, #fff);
+  --puzzle-color-info: var(--puzzle-color-scheme-light-info, #0369a1);
+  --puzzle-color-info-foreground: var(--puzzle-color-scheme-light-info-foreground, #fff);
+}
+
+:root:has(style[data-puzzle-theme="true"][data-theme="dark"]) {
+  color-scheme: dark;
+  --puzzle-color-background: var(--puzzle-color-scheme-dark-background, #111518);
+  --puzzle-color-surface: var(--puzzle-color-scheme-dark-surface, #1c2226);
+  --puzzle-color-surface-elevated: var(--puzzle-color-scheme-dark-surface-elevated, #242c31);
+  --puzzle-color-surface-sunken: var(--puzzle-color-scheme-dark-surface-sunken, #0d1113);
+  --puzzle-color-text: var(--puzzle-color-scheme-dark-text, #f5f5f5);
+  --puzzle-color-text-muted: var(--puzzle-color-scheme-dark-text-muted, #a4adb3);
+  --puzzle-color-text-subtle: var(--puzzle-color-scheme-dark-text-subtle, #8c969d);
+  --puzzle-color-border: var(--puzzle-color-scheme-dark-border, #343c42);
+  --puzzle-color-border-strong: var(--puzzle-color-scheme-dark-border-strong, #4a555d);
+  --puzzle-color-primary: var(--puzzle-color-scheme-dark-primary, #60a5fa);
+  --puzzle-color-primary-foreground: var(--puzzle-color-scheme-dark-primary-foreground, #0b1220);
+  --puzzle-color-secondary: var(--puzzle-color-scheme-dark-secondary, #94a3b8);
+  --puzzle-color-secondary-foreground: var(--puzzle-color-scheme-dark-secondary-foreground, #0f172a);
+  --puzzle-color-accent: var(--puzzle-color-scheme-dark-accent, #c4b5fd);
+  --puzzle-color-accent-foreground: var(--puzzle-color-scheme-dark-accent-foreground, #1e1b4b);
+  --puzzle-color-ring: var(--puzzle-color-scheme-dark-ring, #93c5fd);
+  --puzzle-color-success: var(--puzzle-color-scheme-dark-success, #4ade80);
+  --puzzle-color-success-foreground: var(--puzzle-color-scheme-dark-success-foreground, #052e16);
+  --puzzle-color-warning: var(--puzzle-color-scheme-dark-warning, #fbbf24);
+  --puzzle-color-warning-foreground: var(--puzzle-color-scheme-dark-warning-foreground, #422006);
+  --puzzle-color-danger: var(--puzzle-color-scheme-dark-danger, #f87171);
+  --puzzle-color-danger-foreground: var(--puzzle-color-scheme-dark-danger-foreground, #450a0a);
+  --puzzle-color-info: var(--puzzle-color-scheme-dark-info, #38bdf8);
+  --puzzle-color-info-foreground: var(--puzzle-color-scheme-dark-info-foreground, #082f49);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not(:has(style[data-puzzle-theme="true"][data-theme="light"], style[data-puzzle-theme="true"][data-theme="dark"])) {
+    color-scheme: dark;
+    --puzzle-color-background: var(--puzzle-color-scheme-dark-background, #111518);
+    --puzzle-color-surface: var(--puzzle-color-scheme-dark-surface, #1c2226);
+    --puzzle-color-surface-elevated: var(--puzzle-color-scheme-dark-surface-elevated, #242c31);
+    --puzzle-color-surface-sunken: var(--puzzle-color-scheme-dark-surface-sunken, #0d1113);
+    --puzzle-color-text: var(--puzzle-color-scheme-dark-text, #f5f5f5);
+    --puzzle-color-text-muted: var(--puzzle-color-scheme-dark-text-muted, #a4adb3);
+    --puzzle-color-text-subtle: var(--puzzle-color-scheme-dark-text-subtle, #8c969d);
+    --puzzle-color-border: var(--puzzle-color-scheme-dark-border, #343c42);
+    --puzzle-color-border-strong: var(--puzzle-color-scheme-dark-border-strong, #4a555d);
+    --puzzle-color-primary: var(--puzzle-color-scheme-dark-primary, #60a5fa);
+    --puzzle-color-primary-foreground: var(--puzzle-color-scheme-dark-primary-foreground, #0b1220);
+    --puzzle-color-secondary: var(--puzzle-color-scheme-dark-secondary, #94a3b8);
+    --puzzle-color-secondary-foreground: var(--puzzle-color-scheme-dark-secondary-foreground, #0f172a);
+    --puzzle-color-accent: var(--puzzle-color-scheme-dark-accent, #c4b5fd);
+    --puzzle-color-accent-foreground: var(--puzzle-color-scheme-dark-accent-foreground, #1e1b4b);
+    --puzzle-color-ring: var(--puzzle-color-scheme-dark-ring, #93c5fd);
+    --puzzle-color-success: var(--puzzle-color-scheme-dark-success, #4ade80);
+    --puzzle-color-success-foreground: var(--puzzle-color-scheme-dark-success-foreground, #052e16);
+    --puzzle-color-warning: var(--puzzle-color-scheme-dark-warning, #fbbf24);
+    --puzzle-color-warning-foreground: var(--puzzle-color-scheme-dark-warning-foreground, #422006);
+    --puzzle-color-danger: var(--puzzle-color-scheme-dark-danger, #f87171);
+    --puzzle-color-danger-foreground: var(--puzzle-color-scheme-dark-danger-foreground, #450a0a);
+    --puzzle-color-info: var(--puzzle-color-scheme-dark-info, #38bdf8);
+    --puzzle-color-info-foreground: var(--puzzle-color-scheme-dark-info-foreground, #082f49);
+  }
+}
+
+.puzzle-typography-display1, .puzzle-typography-display2, .puzzle-typography-headline1, .puzzle-typography-headline2, .puzzle-typography-headline3, .puzzle-typography-headline4, .puzzle-typography-subtitle1, .puzzle-typography-subtitle2, .puzzle-typography-body1, .puzzle-typography-body2, .puzzle-typography-button, .puzzle-typography-caption, .puzzle-typography-overline {
+  font-family: var(--puzzle-font-family-body, inherit);
+}
+
+.puzzle-typography-display1 {
+  font-family: var(--puzzle-font-family-display1, inherit);
+  font-size: var(--puzzle-font-size-display1, inherit);
+  font-weight: var(--puzzle-font-weight-display1, inherit);
+  line-height: var(--puzzle-font-line-height-display1, inherit);
+  letter-spacing: var(--puzzle-font-letter-spacing-display1, inherit);
+}
+
+.puzzle-typography-display2 {
+  font-family: var(--puzzle-font-family-display2, inherit);
+  font-size: var(--puzzle-font-size-display2, inherit);
+  font-weight: var(--puzzle-font-weight-display2, inherit);
+  line-height: var(--puzzle-font-line-height-display2, inherit);
+  letter-spacing: var(--puzzle-font-letter-spacing-display2, inherit);
+}
+
+.puzzle-typography-headline1 {
+  font-family: var(--puzzle-font-family-headline1, inherit);
+  font-size: var(--puzzle-font-size-headline1, inherit);
+  font-weight: var(--puzzle-font-weight-headline1, inherit);
+  line-height: var(--puzzle-font-line-height-headline1, inherit);
+  letter-spacing: var(--puzzle-font-letter-spacing-headline1, inherit);
+}
+
+.puzzle-typography-headline2 {
+  font-family: var(--puzzle-font-family-headline2, inherit);
+  font-size: var(--puzzle-font-size-headline2, inherit);
+  font-weight: var(--puzzle-font-weight-headline2, inherit);
+  line-height: var(--puzzle-font-line-height-headline2, inherit);
+  letter-spacing: var(--puzzle-font-letter-spacing-headline2, inherit);
+}
+
+.puzzle-typography-headline3 {
+  font-family: var(--puzzle-font-family-headline3, inherit);
+  font-size: var(--puzzle-font-size-headline3, inherit);
+  font-weight: var(--puzzle-font-weight-headline3, inherit);
+  line-height: var(--puzzle-font-line-height-headline3, inherit);
+  letter-spacing: var(--puzzle-font-letter-spacing-headline3, inherit);
+}
+
+.puzzle-typography-headline4 {
+  font-family: var(--puzzle-font-family-headline4, inherit);
+  font-size: var(--puzzle-font-size-headline4, inherit);
+  font-weight: var(--puzzle-font-weight-headline4, inherit);
+  line-height: var(--puzzle-font-line-height-headline4, inherit);
+  letter-spacing: var(--puzzle-font-letter-spacing-headline4, inherit);
+}
+
+.puzzle-typography-subtitle1 {
+  font-family: var(--puzzle-font-family-subtitle1, inherit);
+  font-size: var(--puzzle-font-size-subtitle1, inherit);
+  font-weight: var(--puzzle-font-weight-subtitle1, inherit);
+  line-height: var(--puzzle-font-line-height-subtitle1, inherit);
+  letter-spacing: var(--puzzle-font-letter-spacing-subtitle1, inherit);
+}
+
+.puzzle-typography-subtitle2 {
+  font-family: var(--puzzle-font-family-subtitle2, inherit);
+  font-size: var(--puzzle-font-size-subtitle2, inherit);
+  font-weight: var(--puzzle-font-weight-subtitle2, inherit);
+  line-height: var(--puzzle-font-line-height-subtitle2, inherit);
+  letter-spacing: var(--puzzle-font-letter-spacing-subtitle2, inherit);
+}
+
+.puzzle-typography-body1 {
+  font-family: var(--puzzle-font-family-body1, inherit);
+  font-size: var(--puzzle-font-size-body1, inherit);
+  font-weight: var(--puzzle-font-weight-body1, inherit);
+  line-height: var(--puzzle-font-line-height-body1, inherit);
+  letter-spacing: var(--puzzle-font-letter-spacing-body1, inherit);
+}
+
+.puzzle-typography-body2 {
+  font-family: var(--puzzle-font-family-body2, inherit);
+  font-size: var(--puzzle-font-size-body2, inherit);
+  font-weight: var(--puzzle-font-weight-body2, inherit);
+  line-height: var(--puzzle-font-line-height-body2, inherit);
+  letter-spacing: var(--puzzle-font-letter-spacing-body2, inherit);
+}
+
+.puzzle-typography-button {
+  font-family: var(--puzzle-font-family-button, inherit);
+  font-size: var(--puzzle-font-size-button, inherit);
+  font-weight: var(--puzzle-font-weight-button, inherit);
+  line-height: var(--puzzle-font-line-height-button, inherit);
+  letter-spacing: var(--puzzle-font-letter-spacing-button, inherit);
+}
+
+.puzzle-typography-caption {
+  font-family: var(--puzzle-font-family-caption, inherit);
+  font-size: var(--puzzle-font-size-caption, inherit);
+  font-weight: var(--puzzle-font-weight-caption, inherit);
+  line-height: var(--puzzle-font-line-height-caption, inherit);
+  letter-spacing: var(--puzzle-font-letter-spacing-caption, inherit);
+}
+
+.puzzle-typography-overline {
+  font-family: var(--puzzle-font-family-overline, inherit);
+  font-size: var(--puzzle-font-size-overline, inherit);
+  font-weight: var(--puzzle-font-weight-overline, inherit);
+  line-height: var(--puzzle-font-line-height-overline, inherit);
+  letter-spacing: var(--puzzle-font-letter-spacing-overline, inherit);
+}

package/dist/theme.d.cts

@@ -0,0 +1,18 @@
+import { FontConfig, FontRole } from "./fonts/types.cjs";
+import "./fonts/index.cjs";
+import { ColorThemes, ThemeMode, ThemeTokenOverrides } from "./types.cjs";
+import { ThemeComponents } from "./components.types.cjs";
+import { PropsWithChildren } from "react";
+export type ThemeScope = "root" | "local";
+export type ThemeProps = {
+  nonce?: string;
+  theme?: ThemeMode;
+  scope?: ThemeScope;
+  globalStyles?: boolean;
+  fonts?: Partial<Record<FontRole, FontConfig>>;
+  tokens?: ThemeTokenOverrides;
+  colorTheme?: ColorThemes;
+  components?: ThemeComponents;
+};
+declare const Theme: ({ nonce, fonts, theme, scope, globalStyles, tokens, colorTheme, components, children }: PropsWithChildren<ThemeProps>) => import("react").JSX.Element;
+export { Theme };

package/dist/theme.d.ts

@@ -0,0 +1,17 @@
+import { FontConfig, FontRole } from "./fonts/types.js";
+import { ColorThemes, ThemeMode, ThemeTokenOverrides } from "./types.js";
+import { ThemeComponents } from "./components.types.js";
+import { PropsWithChildren } from "react";
+export type ThemeScope = "root" | "local";
+export type ThemeProps = {
+  nonce?: string;
+  theme?: ThemeMode;
+  scope?: ThemeScope;
+  globalStyles?: boolean;
+  fonts?: Partial<Record<FontRole, FontConfig>>;
+  tokens?: ThemeTokenOverrides;
+  colorTheme?: ColorThemes;
+  components?: ThemeComponents;
+};
+declare const Theme: ({ nonce, fonts, theme, scope, globalStyles, tokens, colorTheme, components, children }: PropsWithChildren<ThemeProps>) => import("react").JSX.Element;
+export { Theme };

package/dist/theme.js

@@ -0,0 +1,56 @@
+import { ThemeComponentsProvider } from "./components-context.js";
+import { ThemeScopeProvider } from "./scope-context.js";
+import { resolveFontStylesheets } from "./fonts/resolve-font-stylesheets.js";
+import { createThemeVariables } from "./create-theme-variables.js";
+import { createThemeCss } from "./create-theme-css.js";
+import "./theme.css";
+import "./theme-scopes.css";
+import "./global.css";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+// src/theme.tsx
+const Theme = ({ nonce, fonts, theme = "system", scope = "root", globalStyles, tokens, colorTheme, components, children }) => {
+	const scopeId = useId();
+	const fontStylesheets = resolveFontStylesheets(fonts);
+	const cssVariables = createThemeVariables(fonts, tokens, theme, colorTheme);
+	const css = `${scope === "root" ? ":root" : `[data-puzzle-theme-scope="${scopeId}"]`} {\n${createThemeCss(cssVariables)}\n}`;
+	const shouldApplyGlobalStyles = scope === "root" && (globalStyles ?? true);
+	const scopedContent = /* @__PURE__ */ jsx(ThemeScopeProvider, {
+		scopeId: scope === "local" ? scopeId : null,
+		theme,
+		children: components === void 0 ? children : /* @__PURE__ */ jsx(ThemeComponentsProvider, {
+			components,
+			children
+		})
+	});
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		fontStylesheets.length > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("link", {
+			rel: "preconnect",
+			href: "https://fonts.googleapis.com"
+		}), /* @__PURE__ */ jsx("link", {
+			rel: "preconnect",
+			href: "https://fonts.gstatic.com",
+			crossOrigin: "anonymous"
+		})] }) : null,
+		fontStylesheets.map(({ href }) => /* @__PURE__ */ jsx("link", {
+			rel: "stylesheet",
+			href,
+			precedence: "default"
+		}, href)),
+		shouldApplyGlobalStyles ? /* @__PURE__ */ jsx("style", {
+			nonce,
+			"data-puzzle-global-styles": ""
+		}) : null,
+		/* @__PURE__ */ jsx("style", {
+			nonce,
+			"data-theme": theme,
+			"data-puzzle-theme": scope === "root" ? "true" : void 0,
+			"data-puzzle-theme-scope-style": scope === "local" ? scopeId : void 0,
+			children: css
+		}),
+		scopedContent
+	] });
+};
+export { Theme };
+
+//# sourceMappingURL=theme.js.map

package/dist/theme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.js","names":[],"sources":["../src/theme.tsx"],"sourcesContent":["import { useId, type PropsWithChildren } from \"react\";\n\nimport type { FontRole, FontConfig } from \"./fonts\";\nimport type { ColorThemes, ThemeMode, ThemeTokenOverrides } from \"./types\";\nimport type { ThemeComponents } from \"./components.types\";\n\nimport { ThemeComponentsProvider } from \"./components-context\";\nimport { ThemeScopeProvider } from \"./scope-context\";\n\nimport { resolveFontStylesheets } from \"./fonts/resolve-font-stylesheets\";\nimport { createThemeVariables } from \"./create-theme-variables\";\nimport { createThemeCss } from \"./create-theme-css\";\n\nimport \"./theme.css\";\nimport \"./theme-scopes.css\";\nimport \"./global.css\";\n\nexport type ThemeScope = \"root\" | \"local\";\n\nexport type ThemeProps = {\n  nonce?: string;\n  theme?: ThemeMode;\n  scope?: ThemeScope;\n  globalStyles?: boolean;\n  fonts?: Partial<Record<FontRole, FontConfig>>;\n  tokens?: ThemeTokenOverrides;\n  colorTheme?: ColorThemes;\n  components?: ThemeComponents;\n};\n\nconst Theme = ({\n  nonce,\n  fonts,\n  theme = \"system\",\n  scope = \"root\",\n  globalStyles,\n  tokens,\n  colorTheme,\n  components,\n  children,\n}: PropsWithChildren<ThemeProps>) => {\n  const scopeId = useId();\n\n  const fontStylesheets = resolveFontStylesheets(fonts);\n  const cssVariables = createThemeVariables(fonts, tokens, theme, colorTheme);\n\n  const cssSelector =\n    scope === \"root\" ? \":root\" : `[data-puzzle-theme-scope=\"${scopeId}\"]`;\n\n  const css = `${cssSelector} {\\n${createThemeCss(cssVariables)}\\n}`;\n\n  const shouldApplyGlobalStyles = scope === \"root\" && (globalStyles ?? true);\n\n  const content =\n    components === undefined ? (\n      children\n    ) : (\n      <ThemeComponentsProvider components={components}>\n        {children}\n      </ThemeComponentsProvider>\n    );\n\n  const scopedContent = (\n    <ThemeScopeProvider\n      scopeId={scope === \"local\" ? scopeId : null}\n      theme={theme}\n    >\n      {content}\n    </ThemeScopeProvider>\n  );\n\n  return (\n    <>\n      {fontStylesheets.length > 0 ? (\n        <>\n          <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\" />\n          <link\n            rel=\"preconnect\"\n            href=\"https://fonts.gstatic.com\"\n            crossOrigin=\"anonymous\"\n          />\n        </>\n      ) : null}\n\n      {fontStylesheets.map(({ href }) => (\n        <link key={href} rel=\"stylesheet\" href={href} precedence=\"default\" />\n      ))}\n\n      {shouldApplyGlobalStyles ? (\n        <style nonce={nonce} data-puzzle-global-styles=\"\" />\n      ) : null}\n\n      <style\n        nonce={nonce}\n        data-theme={theme}\n        data-puzzle-theme={scope === \"root\" ? \"true\" : undefined}\n        data-puzzle-theme-scope-style={scope === \"local\" ? scopeId : undefined}\n      >\n        {css}\n      </style>\n\n      {scopedContent}\n    </>\n  );\n};\n\nexport { Theme };\n"],"mappings":";;;;;;;;;;;AA8BA,MAAM,SAAS,EACb,OACA,OACA,QAAQ,UACR,QAAQ,QACR,cACA,QACA,YACA,YACA,eACmC;CACnC,MAAM,UAAU,MAAM;CAEtB,MAAM,kBAAkB,uBAAuB,KAAK;CACpD,MAAM,eAAe,qBAAqB,OAAO,QAAQ,OAAO,UAAU;CAK1E,MAAM,MAAM,GAFV,UAAU,SAAS,UAAU,6BAA6B,QAAQ,IAEzC,MAAM,eAAe,YAAY,EAAE;CAE9D,MAAM,0BAA0B,UAAU,WAAW,gBAAgB;CAWrE,MAAM,gBACJ,oBAAC,oBAAD;EACE,SAAS,UAAU,UAAU,UAAU;EAChC;EAXT,UAAA,eAAe,KAAA,IACb,WAEA,oBAAC,yBAAD;GAAqC;GAClC;EACsB,CAAA;CASP,CAAA;CAGtB,OACE,qBAAA,UAAA,EAAA,UAAA;EACG,gBAAgB,SAAS,IACxB,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,QAAD;GAAM,KAAI;GAAa,MAAK;EAAgC,CAAA,GAC5D,oBAAC,QAAD;GACE,KAAI;GACJ,MAAK;GACL,aAAY;EACb,CAAA,CACD,EAAA,CAAA,IACA;EAEH,gBAAgB,KAAK,EAAE,WACtB,oBAAC,QAAD;GAAiB,KAAI;GAAmB;GAAM,YAAW;EAAW,GAAzD,IAAyD,CACrE;EAEA,0BACC,oBAAC,SAAD;GAAc;GAAO,6BAA0B;EAAI,CAAA,IACjD;EAEJ,oBAAC,SAAD;GACS;GACP,cAAY;GACZ,qBAAmB,UAAU,SAAS,SAAS,KAAA;GAC/C,iCAA+B,UAAU,UAAU,UAAU,KAAA;GAE5D,UAAA;EACI,CAAA;EAEN;CACD,EAAA,CAAA;AAEN"}