@puzzle-ui/theme 0.4.0 → 0.5.0

package/dist/fonts/resolve-font-stylesheets.cjs

@@ -24,11 +24,16 @@ const resolveFontStylesheets = (fonts) => {
 				family: font.family,
 				display: font.display,
 				weights: /* @__PURE__ */ new Set(),
-				styles: /* @__PURE__ */ new Set()
+				styles: /* @__PURE__ */ new Set(),
+				variable: false
 			};
 			groups.set(key, group);
 		}
 		font.weights.forEach((weight) => group.weights.add(weight));
+		if (font.weightRange) {
+			group.variable = true;
+			font.weightRange.forEach((weight) => group.weights.add(weight));
+		}
 		font.styles.forEach((style) => group.styles.add(style));
 	}
 	return [...groups.values()].map((group) => ({
@@ -37,6 +42,7 @@ const resolveFontStylesheets = (fonts) => {
 		href: require_create_google_font_url.createGoogleFontUrl({
 			family: group.family,
 			weights: [...group.weights].sort((a, b) => a - b),
+			weightRange: group.variable ? [Math.min(...group.weights), Math.max(...group.weights)] : void 0,
 			styles: [...group.styles].sort((a, b) => (a === "normal" ? 0 : 1) - (b === "normal" ? 0 : 1)),
 			display: group.display
 		})

package/dist/fonts/resolve-font-stylesheets.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"resolve-font-stylesheets.cjs","names":["resolveFontConfig","createGoogleFontUrl"],"sources":["../../src/fonts/resolve-font-stylesheets.ts"],"sourcesContent":["import { createGoogleFontUrl } from \"./create-google-font-url\";\nimport { resolveFontConfig } from \"./resolve-font-config\";\nimport type {\n  FontStylesheet,\n  ResolvedFontConfig,\n  ThemeFonts,\n  FontDisplay,\n  FontStyle,\n} from \"./types\";\n\nexport const resolveFontStylesheets = (\n  fonts?: ThemeFonts,\n): FontStylesheet[] => {\n  if (fonts === undefined) return [];\n\n  const resolved: ResolvedFontConfig[] = [];\n  for (const role of [\"heading\", \"body\", \"accent\"] as const) {\n    const font = fonts[role];\n    if (font !== undefined) {\n      resolved.push(resolveFontConfig({ ...font, role }));\n    }\n  }\n\n  // Merge requests for the same family and display mode. This avoids loading\n  // separate stylesheets when roles share a family but need different weights.\n  const groups = new Map<\n    string,\n    {\n      family: ResolvedFontConfig[\"family\"];\n      display: FontDisplay;\n      weights: Set<number>;\n      styles: Set<FontStyle>;\n    }\n  >();\n\n  for (const font of resolved) {\n    const key = `${font.family.toLocaleLowerCase(\"en-US\")}\\u0000${font.display}`;\n    let group = groups.get(key);\n    if (!group) {\n      group = {\n        family: font.family,\n        display: font.display,\n        weights: new Set<number>(),\n        styles: new Set<FontStyle>(),\n      };\n      groups.set(key, group);\n    }\n    font.weights.forEach((weight) => group!.weights.add(weight));\n    font.styles.forEach((style) => group!.styles.add(style));\n  }\n\n  return [...groups.values()].map((group) => ({\n    family: group.family,\n    display: group.display,\n    href: createGoogleFontUrl({\n      family: group.family,\n      weights: [...group.weights].sort((a, b) => a - b),\n      styles: [...group.styles].sort(\n        (a, b) => (a === \"normal\" ? 0 : 1) - (b === \"normal\" ? 0 : 1),\n      ),\n      display: group.display,\n    }),\n  }));\n};\n"],"mappings":";;;AAUA,MAAa,0BACX,UACqB;CACrB,IAAI,UAAU,KAAA,GAAW,OAAO,CAAC;CAEjC,MAAM,WAAiC,CAAC;CACxC,KAAK,MAAM,QAAQ;EAAC;EAAW;EAAQ;CAAQ,GAAY;EACzD,MAAM,OAAO,MAAM;EACnB,IAAI,SAAS,KAAA,GACX,SAAS,KAAKA,4BAAAA,kBAAkB;GAAE,GAAG;GAAM;EAAK,CAAC,CAAC;CAEtD;CAIA,MAAM,yBAAS,IAAI,IAQjB;CAEF,KAAK,MAAM,QAAQ,UAAU;EAC3B,MAAM,MAAM,GAAG,KAAK,OAAO,kBAAkB,OAAO,EAAE,QAAQ,KAAK;EACnE,IAAI,QAAQ,OAAO,IAAI,GAAG;EAC1B,IAAI,CAAC,OAAO;GACV,QAAQ;IACN,QAAQ,KAAK;IACb,SAAS,KAAK;IACd,yBAAS,IAAI,IAAY;IACzB,wBAAQ,IAAI,IAAe;GAC7B;GACA,OAAO,IAAI,KAAK,KAAK;EACvB;EACA,KAAK,QAAQ,SAAS,WAAW,MAAO,QAAQ,IAAI,MAAM,CAAC;EAC3D,KAAK,OAAO,SAAS,UAAU,MAAO,OAAO,IAAI,KAAK,CAAC;CACzD;CAEA,OAAO,CAAC,GAAG,OAAO,OAAO,CAAC,CAAC,CAAC,KAAK,WAAW;EAC1C,QAAQ,MAAM;EACd,SAAS,MAAM;EACf,MAAMC,+BAAAA,oBAAoB;GACxB,QAAQ,MAAM;GACd,SAAS,CAAC,GAAG,MAAM,OAAO,CAAC,CAAC,MAAM,GAAG,MAAM,IAAI,CAAC;GAChD,QAAQ,CAAC,GAAG,MAAM,MAAM,CAAC,CAAC,MACvB,GAAG,OAAO,MAAM,WAAW,IAAI,MAAM,MAAM,WAAW,IAAI,EAC7D;GACA,SAAS,MAAM;EACjB,CAAC;CACH,EAAE;AACJ"}
+{"version":3,"file":"resolve-font-stylesheets.cjs","names":["resolveFontConfig","createGoogleFontUrl"],"sources":["../../src/fonts/resolve-font-stylesheets.ts"],"sourcesContent":["import { createGoogleFontUrl } from \"./create-google-font-url\";\nimport { resolveFontConfig } from \"./resolve-font-config\";\nimport type {\n  FontStylesheet,\n  ResolvedFontConfig,\n  ThemeFonts,\n  FontDisplay,\n  FontStyle,\n} from \"./types\";\n\nexport const resolveFontStylesheets = (\n  fonts?: ThemeFonts,\n): FontStylesheet[] => {\n  if (fonts === undefined) return [];\n\n  const resolved: ResolvedFontConfig[] = [];\n  for (const role of [\"heading\", \"body\", \"accent\"] as const) {\n    const font = fonts[role];\n    if (font !== undefined) {\n      resolved.push(resolveFontConfig({ ...font, role }));\n    }\n  }\n\n  // Merge requests for the same family and display mode. This avoids loading\n  // separate stylesheets when roles share a family but need different weights.\n  const groups = new Map<\n    string,\n    {\n      family: ResolvedFontConfig[\"family\"];\n      display: FontDisplay;\n      weights: Set<number>;\n      styles: Set<FontStyle>;\n      variable: boolean;\n    }\n  >();\n\n  for (const font of resolved) {\n    const key = `${font.family.toLocaleLowerCase(\"en-US\")}\\u0000${font.display}`;\n    let group = groups.get(key);\n    if (!group) {\n      group = {\n        family: font.family,\n        display: font.display,\n        weights: new Set<number>(),\n        styles: new Set<FontStyle>(),\n        variable: false,\n      };\n      groups.set(key, group);\n    }\n    font.weights.forEach((weight) => group!.weights.add(weight));\n    if (font.weightRange) {\n      group.variable = true;\n      font.weightRange.forEach((weight) => group!.weights.add(weight));\n    }\n    font.styles.forEach((style) => group!.styles.add(style));\n  }\n\n  return [...groups.values()].map((group) => ({\n    family: group.family,\n    display: group.display,\n    href: createGoogleFontUrl({\n      family: group.family,\n      weights: [...group.weights].sort((a, b) => a - b),\n      weightRange: group.variable\n        ? [Math.min(...group.weights), Math.max(...group.weights)]\n        : undefined,\n      styles: [...group.styles].sort(\n        (a, b) => (a === \"normal\" ? 0 : 1) - (b === \"normal\" ? 0 : 1),\n      ),\n      display: group.display,\n    }),\n  }));\n};\n"],"mappings":";;;AAUA,MAAa,0BACX,UACqB;CACrB,IAAI,UAAU,KAAA,GAAW,OAAO,CAAC;CAEjC,MAAM,WAAiC,CAAC;CACxC,KAAK,MAAM,QAAQ;EAAC;EAAW;EAAQ;CAAQ,GAAY;EACzD,MAAM,OAAO,MAAM;EACnB,IAAI,SAAS,KAAA,GACX,SAAS,KAAKA,4BAAAA,kBAAkB;GAAE,GAAG;GAAM;EAAK,CAAC,CAAC;CAEtD;CAIA,MAAM,yBAAS,IAAI,IASjB;CAEF,KAAK,MAAM,QAAQ,UAAU;EAC3B,MAAM,MAAM,GAAG,KAAK,OAAO,kBAAkB,OAAO,EAAE,QAAQ,KAAK;EACnE,IAAI,QAAQ,OAAO,IAAI,GAAG;EAC1B,IAAI,CAAC,OAAO;GACV,QAAQ;IACN,QAAQ,KAAK;IACb,SAAS,KAAK;IACd,yBAAS,IAAI,IAAY;IACzB,wBAAQ,IAAI,IAAe;IAC3B,UAAU;GACZ;GACA,OAAO,IAAI,KAAK,KAAK;EACvB;EACA,KAAK,QAAQ,SAAS,WAAW,MAAO,QAAQ,IAAI,MAAM,CAAC;EAC3D,IAAI,KAAK,aAAa;GACpB,MAAM,WAAW;GACjB,KAAK,YAAY,SAAS,WAAW,MAAO,QAAQ,IAAI,MAAM,CAAC;EACjE;EACA,KAAK,OAAO,SAAS,UAAU,MAAO,OAAO,IAAI,KAAK,CAAC;CACzD;CAEA,OAAO,CAAC,GAAG,OAAO,OAAO,CAAC,CAAC,CAAC,KAAK,WAAW;EAC1C,QAAQ,MAAM;EACd,SAAS,MAAM;EACf,MAAMC,+BAAAA,oBAAoB;GACxB,QAAQ,MAAM;GACd,SAAS,CAAC,GAAG,MAAM,OAAO,CAAC,CAAC,MAAM,GAAG,MAAM,IAAI,CAAC;GAChD,aAAa,MAAM,WACf,CAAC,KAAK,IAAI,GAAG,MAAM,OAAO,GAAG,KAAK,IAAI,GAAG,MAAM,OAAO,CAAC,IACvD,KAAA;GACJ,QAAQ,CAAC,GAAG,MAAM,MAAM,CAAC,CAAC,MACvB,GAAG,OAAO,MAAM,WAAW,IAAI,MAAM,MAAM,WAAW,IAAI,EAC7D;GACA,SAAS,MAAM;EACjB,CAAC;CACH,EAAE;AACJ"}

package/dist/fonts/resolve-font-stylesheets.js

@@ -24,11 +24,16 @@ const resolveFontStylesheets = (fonts) => {
 				family: font.family,
 				display: font.display,
 				weights: /* @__PURE__ */ new Set(),
-				styles: /* @__PURE__ */ new Set()
+				styles: /* @__PURE__ */ new Set(),
+				variable: false
 			};
 			groups.set(key, group);
 		}
 		font.weights.forEach((weight) => group.weights.add(weight));
+		if (font.weightRange) {
+			group.variable = true;
+			font.weightRange.forEach((weight) => group.weights.add(weight));
+		}
 		font.styles.forEach((style) => group.styles.add(style));
 	}
 	return [...groups.values()].map((group) => ({
@@ -37,6 +42,7 @@ const resolveFontStylesheets = (fonts) => {
 		href: createGoogleFontUrl({
 			family: group.family,
 			weights: [...group.weights].sort((a, b) => a - b),
+			weightRange: group.variable ? [Math.min(...group.weights), Math.max(...group.weights)] : void 0,
 			styles: [...group.styles].sort((a, b) => (a === "normal" ? 0 : 1) - (b === "normal" ? 0 : 1)),
 			display: group.display
 		})

package/dist/fonts/resolve-font-stylesheets.js.map

@@ -1 +1 @@
-{"version":3,"file":"resolve-font-stylesheets.js","names":[],"sources":["../../src/fonts/resolve-font-stylesheets.ts"],"sourcesContent":["import { createGoogleFontUrl } from \"./create-google-font-url\";\nimport { resolveFontConfig } from \"./resolve-font-config\";\nimport type {\n  FontStylesheet,\n  ResolvedFontConfig,\n  ThemeFonts,\n  FontDisplay,\n  FontStyle,\n} from \"./types\";\n\nexport const resolveFontStylesheets = (\n  fonts?: ThemeFonts,\n): FontStylesheet[] => {\n  if (fonts === undefined) return [];\n\n  const resolved: ResolvedFontConfig[] = [];\n  for (const role of [\"heading\", \"body\", \"accent\"] as const) {\n    const font = fonts[role];\n    if (font !== undefined) {\n      resolved.push(resolveFontConfig({ ...font, role }));\n    }\n  }\n\n  // Merge requests for the same family and display mode. This avoids loading\n  // separate stylesheets when roles share a family but need different weights.\n  const groups = new Map<\n    string,\n    {\n      family: ResolvedFontConfig[\"family\"];\n      display: FontDisplay;\n      weights: Set<number>;\n      styles: Set<FontStyle>;\n    }\n  >();\n\n  for (const font of resolved) {\n    const key = `${font.family.toLocaleLowerCase(\"en-US\")}\\u0000${font.display}`;\n    let group = groups.get(key);\n    if (!group) {\n      group = {\n        family: font.family,\n        display: font.display,\n        weights: new Set<number>(),\n        styles: new Set<FontStyle>(),\n      };\n      groups.set(key, group);\n    }\n    font.weights.forEach((weight) => group!.weights.add(weight));\n    font.styles.forEach((style) => group!.styles.add(style));\n  }\n\n  return [...groups.values()].map((group) => ({\n    family: group.family,\n    display: group.display,\n    href: createGoogleFontUrl({\n      family: group.family,\n      weights: [...group.weights].sort((a, b) => a - b),\n      styles: [...group.styles].sort(\n        (a, b) => (a === \"normal\" ? 0 : 1) - (b === \"normal\" ? 0 : 1),\n      ),\n      display: group.display,\n    }),\n  }));\n};\n"],"mappings":";;;AAUA,MAAa,0BACX,UACqB;CACrB,IAAI,UAAU,KAAA,GAAW,OAAO,CAAC;CAEjC,MAAM,WAAiC,CAAC;CACxC,KAAK,MAAM,QAAQ;EAAC;EAAW;EAAQ;CAAQ,GAAY;EACzD,MAAM,OAAO,MAAM;EACnB,IAAI,SAAS,KAAA,GACX,SAAS,KAAK,kBAAkB;GAAE,GAAG;GAAM;EAAK,CAAC,CAAC;CAEtD;CAIA,MAAM,yBAAS,IAAI,IAQjB;CAEF,KAAK,MAAM,QAAQ,UAAU;EAC3B,MAAM,MAAM,GAAG,KAAK,OAAO,kBAAkB,OAAO,EAAE,QAAQ,KAAK;EACnE,IAAI,QAAQ,OAAO,IAAI,GAAG;EAC1B,IAAI,CAAC,OAAO;GACV,QAAQ;IACN,QAAQ,KAAK;IACb,SAAS,KAAK;IACd,yBAAS,IAAI,IAAY;IACzB,wBAAQ,IAAI,IAAe;GAC7B;GACA,OAAO,IAAI,KAAK,KAAK;EACvB;EACA,KAAK,QAAQ,SAAS,WAAW,MAAO,QAAQ,IAAI,MAAM,CAAC;EAC3D,KAAK,OAAO,SAAS,UAAU,MAAO,OAAO,IAAI,KAAK,CAAC;CACzD;CAEA,OAAO,CAAC,GAAG,OAAO,OAAO,CAAC,CAAC,CAAC,KAAK,WAAW;EAC1C,QAAQ,MAAM;EACd,SAAS,MAAM;EACf,MAAM,oBAAoB;GACxB,QAAQ,MAAM;GACd,SAAS,CAAC,GAAG,MAAM,OAAO,CAAC,CAAC,MAAM,GAAG,MAAM,IAAI,CAAC;GAChD,QAAQ,CAAC,GAAG,MAAM,MAAM,CAAC,CAAC,MACvB,GAAG,OAAO,MAAM,WAAW,IAAI,MAAM,MAAM,WAAW,IAAI,EAC7D;GACA,SAAS,MAAM;EACjB,CAAC;CACH,EAAE;AACJ"}
+{"version":3,"file":"resolve-font-stylesheets.js","names":[],"sources":["../../src/fonts/resolve-font-stylesheets.ts"],"sourcesContent":["import { createGoogleFontUrl } from \"./create-google-font-url\";\nimport { resolveFontConfig } from \"./resolve-font-config\";\nimport type {\n  FontStylesheet,\n  ResolvedFontConfig,\n  ThemeFonts,\n  FontDisplay,\n  FontStyle,\n} from \"./types\";\n\nexport const resolveFontStylesheets = (\n  fonts?: ThemeFonts,\n): FontStylesheet[] => {\n  if (fonts === undefined) return [];\n\n  const resolved: ResolvedFontConfig[] = [];\n  for (const role of [\"heading\", \"body\", \"accent\"] as const) {\n    const font = fonts[role];\n    if (font !== undefined) {\n      resolved.push(resolveFontConfig({ ...font, role }));\n    }\n  }\n\n  // Merge requests for the same family and display mode. This avoids loading\n  // separate stylesheets when roles share a family but need different weights.\n  const groups = new Map<\n    string,\n    {\n      family: ResolvedFontConfig[\"family\"];\n      display: FontDisplay;\n      weights: Set<number>;\n      styles: Set<FontStyle>;\n      variable: boolean;\n    }\n  >();\n\n  for (const font of resolved) {\n    const key = `${font.family.toLocaleLowerCase(\"en-US\")}\\u0000${font.display}`;\n    let group = groups.get(key);\n    if (!group) {\n      group = {\n        family: font.family,\n        display: font.display,\n        weights: new Set<number>(),\n        styles: new Set<FontStyle>(),\n        variable: false,\n      };\n      groups.set(key, group);\n    }\n    font.weights.forEach((weight) => group!.weights.add(weight));\n    if (font.weightRange) {\n      group.variable = true;\n      font.weightRange.forEach((weight) => group!.weights.add(weight));\n    }\n    font.styles.forEach((style) => group!.styles.add(style));\n  }\n\n  return [...groups.values()].map((group) => ({\n    family: group.family,\n    display: group.display,\n    href: createGoogleFontUrl({\n      family: group.family,\n      weights: [...group.weights].sort((a, b) => a - b),\n      weightRange: group.variable\n        ? [Math.min(...group.weights), Math.max(...group.weights)]\n        : undefined,\n      styles: [...group.styles].sort(\n        (a, b) => (a === \"normal\" ? 0 : 1) - (b === \"normal\" ? 0 : 1),\n      ),\n      display: group.display,\n    }),\n  }));\n};\n"],"mappings":";;;AAUA,MAAa,0BACX,UACqB;CACrB,IAAI,UAAU,KAAA,GAAW,OAAO,CAAC;CAEjC,MAAM,WAAiC,CAAC;CACxC,KAAK,MAAM,QAAQ;EAAC;EAAW;EAAQ;CAAQ,GAAY;EACzD,MAAM,OAAO,MAAM;EACnB,IAAI,SAAS,KAAA,GACX,SAAS,KAAK,kBAAkB;GAAE,GAAG;GAAM;EAAK,CAAC,CAAC;CAEtD;CAIA,MAAM,yBAAS,IAAI,IASjB;CAEF,KAAK,MAAM,QAAQ,UAAU;EAC3B,MAAM,MAAM,GAAG,KAAK,OAAO,kBAAkB,OAAO,EAAE,QAAQ,KAAK;EACnE,IAAI,QAAQ,OAAO,IAAI,GAAG;EAC1B,IAAI,CAAC,OAAO;GACV,QAAQ;IACN,QAAQ,KAAK;IACb,SAAS,KAAK;IACd,yBAAS,IAAI,IAAY;IACzB,wBAAQ,IAAI,IAAe;IAC3B,UAAU;GACZ;GACA,OAAO,IAAI,KAAK,KAAK;EACvB;EACA,KAAK,QAAQ,SAAS,WAAW,MAAO,QAAQ,IAAI,MAAM,CAAC;EAC3D,IAAI,KAAK,aAAa;GACpB,MAAM,WAAW;GACjB,KAAK,YAAY,SAAS,WAAW,MAAO,QAAQ,IAAI,MAAM,CAAC;EACjE;EACA,KAAK,OAAO,SAAS,UAAU,MAAO,OAAO,IAAI,KAAK,CAAC;CACzD;CAEA,OAAO,CAAC,GAAG,OAAO,OAAO,CAAC,CAAC,CAAC,KAAK,WAAW;EAC1C,QAAQ,MAAM;EACd,SAAS,MAAM;EACf,MAAM,oBAAoB;GACxB,QAAQ,MAAM;GACd,SAAS,CAAC,GAAG,MAAM,OAAO,CAAC,CAAC,MAAM,GAAG,MAAM,IAAI,CAAC;GAChD,aAAa,MAAM,WACf,CAAC,KAAK,IAAI,GAAG,MAAM,OAAO,GAAG,KAAK,IAAI,GAAG,MAAM,OAAO,CAAC,IACvD,KAAA;GACJ,QAAQ,CAAC,GAAG,MAAM,MAAM,CAAC,CAAC,MACvB,GAAG,OAAO,MAAM,WAAW,IAAI,MAAM,MAAM,WAAW,IAAI,EAC7D;GACA,SAAS,MAAM;EACjB,CAAC;CACH,EAAE;AACJ"}

package/dist/fonts/types.d.cts

@@ -2,21 +2,32 @@ import { GoogleFontFamily } from "./google-font-familiy.cjs";
 export type FontRole = "heading" | "body" | "accent";
 export type FontStyle = "normal" | "italic";
 export type FontDisplay = "auto" | "block" | "swap" | "fallback" | "optional";
+export type FontPreload = FontRole | false;
+/**
+ * Determines where configured fonts are loaded from.
+ *
+ * - google: Load stylesheets directly from Google Fonts.
+ * - local: Load the generated stylesheet from the application's public directory.
+ */
+export type FontSource = "google" | "local";
 export type FontConfig = {
   family: GoogleFontFamily;
   role?: FontRole;
   weights?: readonly number[];
+  weightRange?: readonly [number, number];
   styles?: readonly FontStyle[];
   display?: FontDisplay;
   fallback?: readonly string[];
   nonce?: string;
 };
-export type ResolvedFontConfig = Required<Omit<FontConfig, "nonce">> & {
+export type ResolvedFontConfig = Required<Omit<FontConfig, "nonce" | "weightRange">> & {
   nonce?: string;
+  weightRange?: readonly [number, number];
 };
 export type CreateGoogleFontUrlOptions = {
   family: GoogleFontFamily;
   weights?: readonly number[];
+  weightRange?: readonly [number, number];
   styles?: readonly FontStyle[];
   display?: FontDisplay;
 };

package/dist/fonts/types.d.ts

@@ -2,21 +2,32 @@ import { GoogleFontFamily } from "./google-font-familiy.js";
 export type FontRole = "heading" | "body" | "accent";
 export type FontStyle = "normal" | "italic";
 export type FontDisplay = "auto" | "block" | "swap" | "fallback" | "optional";
+export type FontPreload = FontRole | false;
+/**
+ * Determines where configured fonts are loaded from.
+ *
+ * - google: Load stylesheets directly from Google Fonts.
+ * - local: Load the generated stylesheet from the application's public directory.
+ */
+export type FontSource = "google" | "local";
 export type FontConfig = {
   family: GoogleFontFamily;
   role?: FontRole;
   weights?: readonly number[];
+  weightRange?: readonly [number, number];
   styles?: readonly FontStyle[];
   display?: FontDisplay;
   fallback?: readonly string[];
   nonce?: string;
 };
-export type ResolvedFontConfig = Required<Omit<FontConfig, "nonce">> & {
+export type ResolvedFontConfig = Required<Omit<FontConfig, "nonce" | "weightRange">> & {
   nonce?: string;
+  weightRange?: readonly [number, number];
 };
 export type CreateGoogleFontUrlOptions = {
   family: GoogleFontFamily;
   weights?: readonly number[];
+  weightRange?: readonly [number, number];
   styles?: readonly FontStyle[];
   display?: FontDisplay;
 };

package/dist/global.css

@@ -1,12 +1,12 @@
-:root:has(style[data-puzzle-global-styles]) *, :root:has(style[data-puzzle-global-styles]) :before, :root:has(style[data-puzzle-global-styles]) :after {
+:root *, :root :before, :root :after {
   box-sizing: border-box;
 }
 
-:root:has(style[data-puzzle-global-styles]) {
+:root {
   color-scheme: light;
 }
 
-:root:has(style[data-puzzle-global-styles]) body {
+:root body {
   -webkit-text-size-adjust: 100%;
   text-size-adjust: 100%;
   color: var(--puzzle-color-text, #171717);
@@ -19,11 +19,11 @@
   margin: 0;
 }
 
-:root:has(style[data-puzzle-global-styles]) :where(input, textarea, select, button) {
+:where(input, textarea, select, button) {
   font: inherit;
 }
 
-:root:has(style[data-puzzle-global-styles]) :where(button) {
+:where(button) {
   cursor: pointer;
   font-family: var(--puzzle-font-family-button, inherit);
   font-size: var(--puzzle-font-size-button, inherit);
@@ -32,15 +32,15 @@
   letter-spacing: var(--puzzle-font-letter-spacing-button, inherit);
 }
 
-:root:has(style[data-puzzle-global-styles]) :where(button:disabled, input:disabled, textarea:disabled, select:disabled) {
+:where(button:disabled, input:disabled, textarea:disabled, select:disabled) {
   cursor: not-allowed;
 }
 
-:root:has(style[data-puzzle-global-styles]) :where(h1, h2, h3, h4, p) {
+:where(h1, h2, h3, h4, p) {
   margin-block: 0;
 }
 
-:root:has(style[data-puzzle-global-styles]) :where(h1) {
+:where(h1) {
   font-family: var(--puzzle-font-family-headline1, inherit);
   font-size: var(--puzzle-font-size-headline1, 2.25rem);
   font-weight: var(--puzzle-font-weight-headline1, 700);
@@ -48,7 +48,7 @@
   letter-spacing: var(--puzzle-font-letter-spacing-headline1, -.025em);
 }
 
-:root:has(style[data-puzzle-global-styles]) :where(h2) {
+:where(h2) {
   font-family: var(--puzzle-font-family-headline2, inherit);
   font-size: var(--puzzle-font-size-headline2, 1.875rem);
   font-weight: var(--puzzle-font-weight-headline2, 700);
@@ -56,7 +56,7 @@
   letter-spacing: var(--puzzle-font-letter-spacing-headline2, -.025em);
 }
 
-:root:has(style[data-puzzle-global-styles]) :where(h3) {
+:where(h3) {
   font-family: var(--puzzle-font-family-headline3, inherit);
   font-size: var(--puzzle-font-size-headline3, 1.5rem);
   font-weight: var(--puzzle-font-weight-headline3, 600);
@@ -64,7 +64,7 @@
   letter-spacing: var(--puzzle-font-letter-spacing-headline3, 0);
 }
 
-:root:has(style[data-puzzle-global-styles]) :where(h4) {
+:where(h4) {
   font-family: var(--puzzle-font-family-headline4, inherit);
   font-size: var(--puzzle-font-size-headline4, 1.25rem);
   font-weight: var(--puzzle-font-weight-headline4, 600);
@@ -72,33 +72,33 @@
   letter-spacing: var(--puzzle-font-letter-spacing-headline4, 0);
 }
 
-:root:has(style[data-puzzle-global-styles]) :where(h1, h2, h3, h4) + :where(h1, h2, h3, h4) {
+:where(h1, h2, h3, h4) + :where(h1, h2, h3, h4) {
   margin-block-start: var(--puzzle-font-gap-heading-stack-gap, .3em);
 }
 
-:root:has(style[data-puzzle-global-styles]) :where(h1, h2, h3, h4) + :where(p) {
+:where(h1, h2, h3, h4) + :where(p) {
   margin-block-start: var(--puzzle-font-gap-heading-paragraph-gap, .65em);
 }
 
-:root:has(style[data-puzzle-global-styles]) :where(p) + :where(p) {
+:where(p) + :where(p) {
   margin-block-start: var(--puzzle-font-gap-paragraph-gap, 1em);
 }
 
-:root:has(style[data-puzzle-global-styles]) :where(p) + :where(h1, h2, h3, h4) {
+:where(p) + :where(h1, h2, h3, h4) {
   margin-block-start: var(--puzzle-font-gap-section-gap, 1.5em);
 }
 
-:where(:root:has(style[data-puzzle-global-styles])) :where(a) {
+:where(:root) :where(a) {
   color: var(--puzzle-color-primary, #2563eb);
 }
 
-:root:has(style[data-puzzle-global-styles]) :where(:focus-visible) {
+:where(:focus-visible) {
   outline: 2px solid var(--puzzle-color-ring, #2563eb);
   outline-offset: 2px;
 }
 
 @media (prefers-reduced-motion: reduce) {
-  :root:has(style[data-puzzle-global-styles]) *, :root:has(style[data-puzzle-global-styles]) :before, :root:has(style[data-puzzle-global-styles]) :after {
+  :root *, :root :before, :root :after {
     scroll-behavior: auto !important;
     transition-duration: .01ms !important;
     animation-duration: .01ms !important;
@@ -107,29 +107,29 @@
 }
 
 @media (forced-colors: active) {
-  :root:has(style[data-puzzle-global-styles]) :where(:focus-visible) {
+  :where(:focus-visible) {
     outline-offset: 2px;
     outline: 2px solid highlight;
   }
 
-  :root:has(style[data-puzzle-global-styles]) :where(a) {
+  :where(a) {
     color: linktext;
   }
 
-  :root:has(style[data-puzzle-global-styles]) :where(button, input, textarea, select, [role="button"], [role="option"]) {
+  :where(button, input, textarea, select, [role="button"], [role="option"]) {
     forced-color-adjust: auto;
   }
 
-  :root:has(style[data-puzzle-global-styles]) :where(input, textarea, select) {
+  :where(input, textarea, select) {
     border-color: buttontext;
   }
 
-  :root:has(style[data-puzzle-global-styles]) :where(button:disabled, input:disabled, textarea:disabled, select:disabled) {
+  :where(button:disabled, input:disabled, textarea:disabled, select:disabled) {
     color: graytext;
     border-color: graytext;
   }
 
-  :root:has(style[data-puzzle-global-styles]) :where([aria-invalid="true"], [data-invalid="true"]) {
+  :where([aria-invalid="true"], [data-invalid="true"]) {
     outline-color: mark;
   }
 }

package/dist/index.d.cts

@@ -1,4 +1,4 @@
-import { FontConfig, FontDisplay, FontRole, FontStyle, FontStylesheet, ResolvedFontConfig, ThemeFonts } from "./fonts/types.cjs";
+import { FontConfig, FontDisplay, FontPreload, FontRole, FontSource, FontStyle, FontStylesheet, ResolvedFontConfig, ThemeFonts } from "./fonts/types.cjs";
 import { createGoogleFontUrl } from "./fonts/create-google-font-url.cjs";
 import { GoogleFont } from "./fonts/google-font.cjs";
 import "./fonts/index.cjs";
@@ -7,4 +7,4 @@ import "./fonts/typography.cjs";
 import { BREAKPOINTS, Breakpoint } from "./breakpoints.cjs";
 import { ColorTheme, ThemeColorSchemeTokens, ThemeMode, ThemeTokenOverrides, ThemeTokens, ThemeTypographyFontRole, ThemeTypographyRoleTokens, TypographyStyle } from "./types.cjs";
 import { ThemeComponents, ThemeImageComponent, ThemeLinkComponent, ThemeLinkComponentConfig } from "./components.types.cjs";
-export { BREAKPOINTS, type Breakpoint, type ColorTheme, type FontConfig, type FontDisplay, type FontRole, type FontStyle, type FontStylesheet, GoogleFont, type ResolvedFontConfig, Theme, type ThemeColorSchemeTokens, type ThemeComponents, type ThemeFonts, type ThemeImageComponent, type ThemeLinkComponent, type ThemeLinkComponentConfig, type ThemeMode, type ThemeProps, type ThemeScope, type ThemeTokenOverrides, type ThemeTokens, type ThemeTypographyFontRole, type ThemeTypographyRoleTokens, type TypographyStyle, createGoogleFontUrl };
+export { BREAKPOINTS, type Breakpoint, type ColorTheme, type FontConfig, type FontDisplay, type FontPreload, type FontRole, type FontSource, type FontStyle, type FontStylesheet, GoogleFont, type ResolvedFontConfig, Theme, type ThemeColorSchemeTokens, type ThemeComponents, type ThemeFonts, type ThemeImageComponent, type ThemeLinkComponent, type ThemeLinkComponentConfig, type ThemeMode, type ThemeProps, type ThemeScope, type ThemeTokenOverrides, type ThemeTokens, type ThemeTypographyFontRole, type ThemeTypographyRoleTokens, type TypographyStyle, createGoogleFontUrl };

package/dist/index.d.ts

@@ -1,9 +1,9 @@
 import { createGoogleFontUrl } from "./fonts/create-google-font-url.js";
 import { GoogleFont } from "./fonts/google-font.js";
-import { FontConfig, FontDisplay, FontRole, FontStyle, FontStylesheet, ResolvedFontConfig, ThemeFonts } from "./fonts/types.js";
+import { FontConfig, FontDisplay, FontPreload, FontRole, FontSource, FontStyle, FontStylesheet, ResolvedFontConfig, ThemeFonts } from "./fonts/types.js";
 import { Theme, ThemeProps, ThemeScope } from "./theme.js";
 import "./fonts/typography.js";
 import { BREAKPOINTS, Breakpoint } from "./breakpoints.js";
 import { ColorTheme, ThemeColorSchemeTokens, ThemeMode, ThemeTokenOverrides, ThemeTokens, ThemeTypographyFontRole, ThemeTypographyRoleTokens, TypographyStyle } from "./types.js";
 import { ThemeComponents, ThemeImageComponent, ThemeLinkComponent, ThemeLinkComponentConfig } from "./components.types.js";
-export { BREAKPOINTS, type Breakpoint, type ColorTheme, type FontConfig, type FontDisplay, type FontRole, type FontStyle, type FontStylesheet, GoogleFont, type ResolvedFontConfig, Theme, type ThemeColorSchemeTokens, type ThemeComponents, type ThemeFonts, type ThemeImageComponent, type ThemeLinkComponent, type ThemeLinkComponentConfig, type ThemeMode, type ThemeProps, type ThemeScope, type ThemeTokenOverrides, type ThemeTokens, type ThemeTypographyFontRole, type ThemeTypographyRoleTokens, type TypographyStyle, createGoogleFontUrl };
+export { BREAKPOINTS, type Breakpoint, type ColorTheme, type FontConfig, type FontDisplay, type FontPreload, type FontRole, type FontSource, type FontStyle, type FontStylesheet, GoogleFont, type ResolvedFontConfig, Theme, type ThemeColorSchemeTokens, type ThemeComponents, type ThemeFonts, type ThemeImageComponent, type ThemeLinkComponent, type ThemeLinkComponentConfig, type ThemeMode, type ThemeProps, type ThemeScope, type ThemeTokenOverrides, type ThemeTokens, type ThemeTypographyFontRole, type ThemeTypographyRoleTokens, type TypographyStyle, createGoogleFontUrl };

package/dist/theme-scopes.css

@@ -23,7 +23,7 @@
   --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: var(--puzzle-color-scheme-light-warning, #fabc0a);
   --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);
@@ -51,7 +51,7 @@
   --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: var(--puzzle-color-scheme-dark-warning, #fabc0a);
   --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);
@@ -80,7 +80,7 @@
     --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: var(--puzzle-color-scheme-dark-warning, #fabc0a);
     --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);

package/dist/theme.cjs

@@ -1,6 +1,8 @@
 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_local_font_stylesheet_url = require("./fonts/create-local-font-stylesheet-url.cjs");
+const require_create_font_preload_filename = require("./fonts/create-font-preload-filename.cjs");
 const require_create_theme_variables = require("./create-theme-variables.cjs");
 const require_create_theme_css = require("./create-theme-css.cjs");
 ;/* empty css            */
@@ -9,9 +11,16 @@ const require_create_theme_css = require("./create-theme-css.cjs");
 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 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 = (0, react.useId)();
 	const fontStylesheets = require_resolve_font_stylesheets.resolveFontStylesheets(fonts);
+	const localFontStylesheet = fontSource === "local" && fontStylesheets.length > 0 ? require_create_local_font_stylesheet_url.createLocalFontStylesheetUrl(fontBasePath) : null;
+	const preloadFont = fontPreload !== false ? fonts?.[fontPreload] : void 0;
+	const normalizedFontBasePath = normalizeFontBasePath(fontBasePath);
+	const fontPreloadHref = fontSource === "local" && preloadFont?.family ? `${normalizedFontBasePath}/${require_create_font_preload_filename.createFontPreloadFilename(preloadFont.family)}` : null;
 	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);
@@ -23,8 +32,16 @@ const Theme = ({ nonce, fonts, theme = "system", scope = "root", globalStyles, t
 			children
 		})
 	});
+	const usesGoogleFonts = fontSource === "google" && fontStylesheets.length > 0;
 	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", {
+		fontPreloadHref ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("link", {
+			rel: "preload",
+			href: fontPreloadHref,
+			as: "font",
+			type: "font/woff2",
+			crossOrigin: "anonymous"
+		}) : null,
+		usesGoogleFonts ? /* @__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", {
@@ -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__ */ (0, react_jsx_runtime.jsx)("link", {
+		fontSource === "google" ? fontStylesheets.map(({ href }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("link", {
 			rel: "stylesheet",
 			href,
 			precedence: "default"
-		}, href)),
+		}, href)) : null,
+		localFontStylesheet ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("link", {
+			rel: "stylesheet",
+			href: localFontStylesheet,
+			precedence: "default"
+		}, localFontStylesheet) : null,
 		shouldApplyGlobalStyles ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("style", {
 			nonce,
 			"data-puzzle-global-styles": ""

package/dist/theme.cjs.map

@@ -1 +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"}
+{"version":3,"file":"theme.cjs","names":["useId","resolveFontStylesheets","createLocalFontStylesheetUrl","createFontPreloadFilename","createThemeVariables","createThemeCss","ThemeScopeProvider","ThemeComponentsProvider"],"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,WAAA,GAAUA,MAAAA,MAAAA,CAAM;CAEtB,MAAM,kBAAkBC,iCAAAA,uBAAuB,KAAK;CAEpD,MAAM,sBACJ,eAAe,WAAW,gBAAgB,SAAS,IAC/CC,yCAAAA,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,GAAGC,qCAAAA,0BAA0B,YAAY,MAAM,MACzE;CAEN,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,MAAM,kBAAkB,eAAe,YAAY,gBAAgB,SAAS;CAE5E,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAA,kBAAA,UAAA,EAAA,UAAA;EACG,kBACC,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;GACE,KAAI;GACJ,MAAM;GACN,IAAG;GACH,MAAK;GACL,aAAY;EACb,CAAA,IACC;EAEH,kBACC,iBAAA,GAAA,kBAAA,KAAA,CAAA,kBAAA,UAAA,EAAA,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;GAAM,KAAI;GAAa,MAAK;EAAgC,CAAA,GAE5D,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;GACE,KAAI;GACJ,MAAK;GACL,aAAY;EACb,CAAA,CACD,EAAA,CAAA,IACA;EAEH,eAAe,WACZ,gBAAgB,KAAK,EAAE,WACrB,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;GAEE,KAAI;GACE;GACN,YAAW;EACZ,GAJM,IAIN,CACF,IACD;EAEH,sBACC,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;GAEE,KAAI;GACJ,MAAM;GACN,YAAW;EACZ,GAJM,mBAIN,IACC;EAEH,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

@@ -1,6 +1,6 @@
 :root {
   color-scheme: light;
-  --puzzle-container-gutter: clamp(1rem, 3vw, 3rem);
+  --puzzle-container-gutter: clamp(2rem, 6vw, 6rem);
   --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);
@@ -19,7 +19,7 @@
   --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: var(--puzzle-color-scheme-light-warning, #fabc0a);
   --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);
@@ -85,11 +85,11 @@
   }
 }
 
-.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 {
+:root .puzzle-typography-display1, :root .puzzle-typography-display2, :root .puzzle-typography-headline1, :root .puzzle-typography-headline2, :root .puzzle-typography-headline3, :root .puzzle-typography-headline4, :root .puzzle-typography-subtitle1, :root .puzzle-typography-subtitle2, :root .puzzle-typography-body1, :root .puzzle-typography-body2, :root .puzzle-typography-button, :root .puzzle-typography-caption, :root .puzzle-typography-overline {
   font-family: var(--puzzle-font-family-body, inherit);
 }
 
-.puzzle-typography-display1 {
+:root .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);
@@ -97,7 +97,7 @@
   letter-spacing: var(--puzzle-font-letter-spacing-display1, inherit);
 }
 
-.puzzle-typography-display2 {
+:root .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);
@@ -105,7 +105,7 @@
   letter-spacing: var(--puzzle-font-letter-spacing-display2, inherit);
 }
 
-.puzzle-typography-headline1 {
+:root .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);
@@ -113,7 +113,7 @@
   letter-spacing: var(--puzzle-font-letter-spacing-headline1, inherit);
 }
 
-.puzzle-typography-headline2 {
+:root .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);
@@ -121,7 +121,7 @@
   letter-spacing: var(--puzzle-font-letter-spacing-headline2, inherit);
 }
 
-.puzzle-typography-headline3 {
+:root .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);
@@ -129,7 +129,7 @@
   letter-spacing: var(--puzzle-font-letter-spacing-headline3, inherit);
 }
 
-.puzzle-typography-headline4 {
+:root .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);
@@ -137,7 +137,7 @@
   letter-spacing: var(--puzzle-font-letter-spacing-headline4, inherit);
 }
 
-.puzzle-typography-subtitle1 {
+:root .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);
@@ -145,7 +145,7 @@
   letter-spacing: var(--puzzle-font-letter-spacing-subtitle1, inherit);
 }
 
-.puzzle-typography-subtitle2 {
+:root .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);
@@ -153,7 +153,7 @@
   letter-spacing: var(--puzzle-font-letter-spacing-subtitle2, inherit);
 }
 
-.puzzle-typography-body1 {
+:root .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);
@@ -161,7 +161,7 @@
   letter-spacing: var(--puzzle-font-letter-spacing-body1, inherit);
 }
 
-.puzzle-typography-body2 {
+:root .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);
@@ -169,7 +169,7 @@
   letter-spacing: var(--puzzle-font-letter-spacing-body2, inherit);
 }
 
-.puzzle-typography-button {
+:root .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);
@@ -177,7 +177,7 @@
   letter-spacing: var(--puzzle-font-letter-spacing-button, inherit);
 }
 
-.puzzle-typography-caption {
+:root .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);
@@ -185,7 +185,7 @@
   letter-spacing: var(--puzzle-font-letter-spacing-caption, inherit);
 }
 
-.puzzle-typography-overline {
+:root .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);

package/dist/theme.d.cts

@@ -1,4 +1,4 @@
-import { FontConfig, FontRole } from "./fonts/types.cjs";
+import { FontConfig, FontRole, FontSource } from "./fonts/types.cjs";
 import "./fonts/index.cjs";
 import { ColorThemes, ThemeMode, ThemeTokenOverrides } from "./types.cjs";
 import { ThemeComponents } from "./components.types.cjs";
@@ -9,10 +9,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 };