@puzzle-ui/theme 0.4.0 → 0.5.0

package/dist/theme.d.ts

@@ -1,4 +1,4 @@
-import { FontConfig, FontRole } from "./fonts/types.js";
+import { FontConfig, FontRole, FontSource } from "./fonts/types.js";
 import { ColorThemes, ThemeMode, ThemeTokenOverrides } from "./types.js";
 import { ThemeComponents } from "./components.types.js";
 import { PropsWithChildren } from "react";
@@ -8,10 +8,34 @@ export type ThemeProps = {
   theme?: ThemeMode;
   scope?: ThemeScope;
   globalStyles?: boolean;
-  fonts?: Partial<Record<FontRole, FontConfig>>;
+  fonts?: Partial<Record<FontRole, FontConfig>> | Record<string, unknown>;
+  /**
+   * Determines how configured fonts are loaded.
+   *
+   * - google: Load stylesheets directly from Google Fonts (default).
+   * - local: Load the generated stylesheet from the application's public directory.
+   */
+  fontSource?: FontSource;
+  /**
+   * Public URL directory containing puzzle-fonts.css.
+   *
+   * Defaults to "/fonts".
+   */
+  fontBasePath?: string;
+  /**
+   * Determines which local font is preloaded.
+   *
+   * - body: Preload the body font (default).
+   * - heading: Preload the heading font.
+   * - accent: Preload the accent font.
+   * - false: Disable font preloading.
+   *
+   * Only applies when fontSource="local".
+   */
+  fontPreload?: FontRole | false;
   tokens?: ThemeTokenOverrides;
   colorTheme?: ColorThemes;
   components?: ThemeComponents;
 };
-declare const Theme: ({ nonce, fonts, theme, scope, globalStyles, tokens, colorTheme, components, children }: PropsWithChildren<ThemeProps>) => import("react").JSX.Element;
+declare const Theme: ({ nonce, fonts, fontSource, fontBasePath, fontPreload, theme, scope, globalStyles, tokens, colorTheme, components, children }: PropsWithChildren<ThemeProps>) => import("react").JSX.Element;
 export { Theme };

package/dist/theme.js

@@ -1,6 +1,8 @@
 import { ThemeComponentsProvider } from "./components-context.js";
 import { ThemeScopeProvider } from "./scope-context.js";
 import { resolveFontStylesheets } from "./fonts/resolve-font-stylesheets.js";
+import { createLocalFontStylesheetUrl } from "./fonts/create-local-font-stylesheet-url.js";
+import { createFontPreloadFilename } from "./fonts/create-font-preload-filename.js";
 import { createThemeVariables } from "./create-theme-variables.js";
 import { createThemeCss } from "./create-theme-css.js";
 import "./theme.css";
@@ -9,9 +11,16 @@ 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 normalizeFontBasePath = (path) => {
+	return path.replace(/\/+$/, "");
+};
+const Theme = ({ nonce, fonts, fontSource = "google", fontBasePath = "/fonts", fontPreload = "body", theme = "system", scope = "root", globalStyles, tokens, colorTheme, components, children }) => {
 	const scopeId = useId();
 	const fontStylesheets = resolveFontStylesheets(fonts);
+	const localFontStylesheet = fontSource === "local" && fontStylesheets.length > 0 ? createLocalFontStylesheetUrl(fontBasePath) : null;
+	const preloadFont = fontPreload !== false ? fonts?.[fontPreload] : void 0;
+	const normalizedFontBasePath = normalizeFontBasePath(fontBasePath);
+	const fontPreloadHref = fontSource === "local" && preloadFont?.family ? `${normalizedFontBasePath}/${createFontPreloadFilename(preloadFont.family)}` : null;
 	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);
@@ -23,8 +32,16 @@ const Theme = ({ nonce, fonts, theme = "system", scope = "root", globalStyles, t
 			children
 		})
 	});
+	const usesGoogleFonts = fontSource === "google" && fontStylesheets.length > 0;
 	return /* @__PURE__ */ jsxs(Fragment, { children: [
-		fontStylesheets.length > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("link", {
+		fontPreloadHref ? /* @__PURE__ */ jsx("link", {
+			rel: "preload",
+			href: fontPreloadHref,
+			as: "font",
+			type: "font/woff2",
+			crossOrigin: "anonymous"
+		}) : null,
+		usesGoogleFonts ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("link", {
 			rel: "preconnect",
 			href: "https://fonts.googleapis.com"
 		}), /* @__PURE__ */ jsx("link", {
@@ -32,11 +49,16 @@ const Theme = ({ nonce, fonts, theme = "system", scope = "root", globalStyles, t
 			href: "https://fonts.gstatic.com",
 			crossOrigin: "anonymous"
 		})] }) : null,
-		fontStylesheets.map(({ href }) => /* @__PURE__ */ jsx("link", {
+		fontSource === "google" ? fontStylesheets.map(({ href }) => /* @__PURE__ */ jsx("link", {
 			rel: "stylesheet",
 			href,
 			precedence: "default"
-		}, href)),
+		}, href)) : null,
+		localFontStylesheet ? /* @__PURE__ */ jsx("link", {
+			rel: "stylesheet",
+			href: localFontStylesheet,
+			precedence: "default"
+		}, localFontStylesheet) : null,
 		shouldApplyGlobalStyles ? /* @__PURE__ */ jsx("style", {
 			nonce,
 			"data-puzzle-global-styles": ""

package/dist/theme.js.map

@@ -1 +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"}
+{"version":3,"file":"theme.js","names":[],"sources":["../src/theme.tsx"],"sourcesContent":["import { useId, type PropsWithChildren } from \"react\";\n\nimport type { FontRole, FontConfig, FontSource } from \"./fonts\";\n\nimport type { ColorThemes, ThemeMode, ThemeTokenOverrides } from \"./types\";\n\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 { createLocalFontStylesheetUrl } from \"./fonts/create-local-font-stylesheet-url\";\nimport { createFontPreloadFilename } from \"./fonts/create-font-preload-filename\";\n\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\n  fonts?: Partial<Record<FontRole, FontConfig>> | Record<string, unknown>;\n\n  /**\n   * Determines how configured fonts are loaded.\n   *\n   * - google: Load stylesheets directly from Google Fonts (default).\n   * - local: Load the generated stylesheet from the application's public directory.\n   */\n  fontSource?: FontSource;\n\n  /**\n   * Public URL directory containing puzzle-fonts.css.\n   *\n   * Defaults to \"/fonts\".\n   */\n  fontBasePath?: string;\n\n  /**\n   * Determines which local font is preloaded.\n   *\n   * - body: Preload the body font (default).\n   * - heading: Preload the heading font.\n   * - accent: Preload the accent font.\n   * - false: Disable font preloading.\n   *\n   * Only applies when fontSource=\"local\".\n   */\n  fontPreload?: FontRole | false;\n\n  tokens?: ThemeTokenOverrides;\n  colorTheme?: ColorThemes;\n  components?: ThemeComponents;\n};\n\nconst normalizeFontBasePath = (path: string): string => {\n  return path.replace(/\\/+$/, \"\");\n};\n\nconst Theme = ({\n  nonce,\n  fonts,\n  fontSource = \"google\",\n  fontBasePath = \"/fonts\",\n  fontPreload = \"body\",\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\n  const localFontStylesheet =\n    fontSource === \"local\" && fontStylesheets.length > 0\n      ? createLocalFontStylesheetUrl(fontBasePath)\n      : null;\n\n  const preloadFont =\n    fontPreload !== false\n      ? (fonts?.[fontPreload] as FontConfig | undefined)\n      : undefined;\n\n  const normalizedFontBasePath = normalizeFontBasePath(fontBasePath);\n\n  const fontPreloadHref =\n    fontSource === \"local\" && preloadFont?.family\n      ? `${normalizedFontBasePath}/${createFontPreloadFilename(preloadFont.family)}`\n      : null;\n\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  const usesGoogleFonts = fontSource === \"google\" && fontStylesheets.length > 0;\n\n  return (\n    <>\n      {fontPreloadHref ? (\n        <link\n          rel=\"preload\"\n          href={fontPreloadHref}\n          as=\"font\"\n          type=\"font/woff2\"\n          crossOrigin=\"anonymous\"\n        />\n      ) : null}\n\n      {usesGoogleFonts ? (\n        <>\n          <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\" />\n\n          <link\n            rel=\"preconnect\"\n            href=\"https://fonts.gstatic.com\"\n            crossOrigin=\"anonymous\"\n          />\n        </>\n      ) : null}\n\n      {fontSource === \"google\"\n        ? fontStylesheets.map(({ href }) => (\n            <link\n              key={href}\n              rel=\"stylesheet\"\n              href={href}\n              precedence=\"default\"\n            />\n          ))\n        : null}\n\n      {localFontStylesheet ? (\n        <link\n          key={localFontStylesheet}\n          rel=\"stylesheet\"\n          href={localFontStylesheet}\n          precedence=\"default\"\n        />\n      ) : null}\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":";;;;;;;;;;;;;AAgEA,MAAM,yBAAyB,SAAyB;CACtD,OAAO,KAAK,QAAQ,QAAQ,EAAE;AAChC;AAEA,MAAM,SAAS,EACb,OACA,OACA,aAAa,UACb,eAAe,UACf,cAAc,QACd,QAAQ,UACR,QAAQ,QACR,cACA,QACA,YACA,YACA,eACmC;CACnC,MAAM,UAAU,MAAM;CAEtB,MAAM,kBAAkB,uBAAuB,KAAK;CAEpD,MAAM,sBACJ,eAAe,WAAW,gBAAgB,SAAS,IAC/C,6BAA6B,YAAY,IACzC;CAEN,MAAM,cACJ,gBAAgB,QACX,QAAQ,eACT,KAAA;CAEN,MAAM,yBAAyB,sBAAsB,YAAY;CAEjE,MAAM,kBACJ,eAAe,WAAW,aAAa,SACnC,GAAG,uBAAuB,GAAG,0BAA0B,YAAY,MAAM,MACzE;CAEN,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,MAAM,kBAAkB,eAAe,YAAY,gBAAgB,SAAS;CAE5E,OACE,qBAAA,UAAA,EAAA,UAAA;EACG,kBACC,oBAAC,QAAD;GACE,KAAI;GACJ,MAAM;GACN,IAAG;GACH,MAAK;GACL,aAAY;EACb,CAAA,IACC;EAEH,kBACC,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,QAAD;GAAM,KAAI;GAAa,MAAK;EAAgC,CAAA,GAE5D,oBAAC,QAAD;GACE,KAAI;GACJ,MAAK;GACL,aAAY;EACb,CAAA,CACD,EAAA,CAAA,IACA;EAEH,eAAe,WACZ,gBAAgB,KAAK,EAAE,WACrB,oBAAC,QAAD;GAEE,KAAI;GACE;GACN,YAAW;EACZ,GAJM,IAIN,CACF,IACD;EAEH,sBACC,oBAAC,QAAD;GAEE,KAAI;GACJ,MAAM;GACN,YAAW;EACZ,GAJM,mBAIN,IACC;EAEH,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"}

package/package.json

@@ -1,13 +1,19 @@
 {
   "name": "@puzzle-ui/theme",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "Theme components for Puzzle",
   "license": "MIT",
+  "type": "module",
+  "bin": {
+    "puzzle-theme": "./dist/cli.js"
+  },
+  "engines": {
+    "node": ">=20.19"
+  },
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "type": "module",
   "sideEffects": [
     "**/*.css"
   ],
@@ -58,7 +64,7 @@
     "prepack": "tsdown"
   },
   "dependencies": {
-    "@puzzle-ui/core": "^0.4.0"
+    "@puzzle-ui/core": "^0.5.0"
   },
   "peerDependencies": {
     "react": "^19.0.0",
@@ -70,7 +76,7 @@
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
     "tsdown": "^0.23.1",
-    "typescript": "^6.0.3",
+    "typescript": "^7.0.2",
     "vitest": "latest"
   }
 }