@marwes-ui/react 1.0.3 → 1.0.5

package/README.md

@@ -378,6 +378,29 @@ By default Marwes keeps theme state scoped to the provider element. If your app
 
 Use one global-target provider per app shell. If multiple providers target `html` or `body`, deciding which provider owns that global element is app-owned behavior.
 
+### Tailwind And shadcn Compatibility
+
+Marwes is compatible with Tailwind and shadcn-style dark variants through `target="html" attribute="class"`. App-owned Tailwind tokens can also reference Marwes `--mw-*` variables when rendered inside the provider subtree.
+
+```tsx
+<MarwesProvider
+  defaultPreference="system"
+  storageKey="marwes-theme"
+  target="html"
+  attribute="class"
+>
+  <AppShell />
+</MarwesProvider>
+```
+
+Read the [Tailwind and shadcn integration guide](https://github.com/niklas-westman/marwes/blob/main/docs/guides/tailwind-shadcn-integration.md) for Tailwind v3/v4 examples, token mapping, provider-scoped variable limits, and the SSR no-flash boundary.
+
+### Next.js App Router SSR
+
+Use `MarwesThemeStyle`, `MarwesThemeScript`, and `variableStrategy="style-tag"` when a server-rendered app needs the correct light or dark variables before hydration. This is opt-in; normal React apps keep inline provider variables by default.
+
+Read the [theme SSR no-flash guide](https://github.com/niklas-westman/marwes/blob/main/docs/guides/theme-ssr-no-flash.md) for Next.js App Router setup, CSP nonces, `suppressHydrationWarning`, custom light/dark themes, and stored/system preference behavior.
+
 For a simple brand pass, override shared values once and let Marwes fill the rest. If your product needs different brand colors in light and dark mode, control `mode` and switch between two small `ThemeInput` override objects:
 
 ```tsx

package/dist/chunk-VFY2GW62.js

@@ -0,0 +1,34 @@
+import { createMarwesThemeScript as createMarwesThemeScript$1, createMarwesThemeStyle as createMarwesThemeStyle$1 } from '@marwes-ui/core';
+import { jsx } from 'react/jsx-runtime';
+
+// src/ssr.tsx
+function createMarwesThemeScript(options) {
+  return createMarwesThemeScript$1(options);
+}
+function createMarwesThemeStyle(options) {
+  return createMarwesThemeStyle$1(options);
+}
+function MarwesThemeScript({ nonce, ...options }) {
+  return /* @__PURE__ */ jsx(
+    "script",
+    {
+      "data-marwes-ssr-theme-script": "true",
+      nonce,
+      dangerouslySetInnerHTML: { __html: createMarwesThemeScript(options) }
+    }
+  );
+}
+function MarwesThemeStyle({ nonce, ...options }) {
+  return /* @__PURE__ */ jsx(
+    "style",
+    {
+      "data-marwes-ssr-theme-style": "true",
+      nonce,
+      dangerouslySetInnerHTML: { __html: createMarwesThemeStyle(options) }
+    }
+  );
+}
+
+export { MarwesThemeScript, MarwesThemeStyle, createMarwesThemeScript, createMarwesThemeStyle };
+//# sourceMappingURL=chunk-VFY2GW62.js.map
+//# sourceMappingURL=chunk-VFY2GW62.js.map

package/dist/chunk-VFY2GW62.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/ssr.tsx"],"names":["createCoreMarwesThemeScript","createCoreMarwesThemeStyle"],"mappings":";;;;AAgBO,SAAS,wBAAwB,OAAA,EAA4C;AAClF,EAAA,OAAOA,0BAA4B,OAAO,CAAA;AAC5C;AAEO,SAAS,uBAAuB,OAAA,EAA2C;AAChF,EAAA,OAAOC,yBAA2B,OAAO,CAAA;AAC3C;AAEO,SAAS,iBAAA,CAAkB,EAAE,KAAA,EAAO,GAAG,SAAQ,EAA2B;AAC/E,EAAA,uBACE,GAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,8BAAA,EAA6B,MAAA;AAAA,MAC7B,KAAA;AAAA,MAEA,uBAAA,EAAyB,EAAE,MAAA,EAAQ,uBAAA,CAAwB,OAAO,CAAA;AAAE;AAAA,GACtE;AAEJ;AAEO,SAAS,gBAAA,CAAiB,EAAE,KAAA,EAAO,GAAG,SAAQ,EAA0B;AAC7E,EAAA,uBACE,GAAA;AAAA,IAAC,OAAA;AAAA,IAAA;AAAA,MACC,6BAAA,EAA4B,MAAA;AAAA,MAC5B,KAAA;AAAA,MAEA,uBAAA,EAAyB,EAAE,MAAA,EAAQ,sBAAA,CAAuB,OAAO,CAAA;AAAE;AAAA,GACrE;AAEJ","file":"chunk-VFY2GW62.js","sourcesContent":["import type { MarwesThemeScriptOptions, MarwesThemeStyleOptions } from \"@marwes-ui/core\"\nimport {\n  createMarwesThemeScript as createCoreMarwesThemeScript,\n  createMarwesThemeStyle as createCoreMarwesThemeStyle,\n} from \"@marwes-ui/core\"\n\nexport type { MarwesThemeScriptOptions, MarwesThemeStyleOptions }\n\nexport type MarwesThemeScriptProps = MarwesThemeScriptOptions & {\n  nonce?: string\n}\n\nexport type MarwesThemeStyleProps = MarwesThemeStyleOptions & {\n  nonce?: string\n}\n\nexport function createMarwesThemeScript(options?: MarwesThemeScriptOptions): string {\n  return createCoreMarwesThemeScript(options)\n}\n\nexport function createMarwesThemeStyle(options?: MarwesThemeStyleOptions): string {\n  return createCoreMarwesThemeStyle(options)\n}\n\nexport function MarwesThemeScript({ nonce, ...options }: MarwesThemeScriptProps) {\n  return (\n    <script\n      data-marwes-ssr-theme-script=\"true\"\n      nonce={nonce}\n      // biome-ignore lint/security/noDangerouslySetInnerHtml: SSR helper emits deterministic Marwes-owned code before hydration.\n      dangerouslySetInnerHTML={{ __html: createMarwesThemeScript(options) }}\n    />\n  )\n}\n\nexport function MarwesThemeStyle({ nonce, ...options }: MarwesThemeStyleProps) {\n  return (\n    <style\n      data-marwes-ssr-theme-style=\"true\"\n      nonce={nonce}\n      // biome-ignore lint/security/noDangerouslySetInnerHtml: SSR helper emits deterministic Marwes-owned CSS before hydration.\n      dangerouslySetInnerHTML={{ __html: createMarwesThemeStyle(options) }}\n    />\n  )\n}\n"]}

package/dist/index.d.ts

@@ -1,7 +1,8 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ThemeInput, ThemePreference, ThemeMode, FontLoadingConfig, ResolvedTheme, ButtonOptions, InputOptions, SelectOptions, SelectAppearance as SelectAppearance$1, SelectOption as SelectOption$1, TextareaOptions, RichTextOptions, InputOtpOptions, CurrencyCode, iconRegistry, IconSize, IconStrokeWidth, AvatarOptions, CheckboxProps as CheckboxProps$1, DividerOptions, DividerSize, DividerOrientation, SpinnerOptions, SpacingOptions, SpacingSize, HeadingOptions, HeadingSize, ParagraphOptions, ParagraphSize, ToastOptions, ToastVariant, ToastIntent, ToastPlacement, TooltipOptions, IconNameType, RadioOptions, BadgeOptions, SwitchOptions, SliderOptions, TabOptions, DialogOptions } from '@marwes-ui/core';
-export { AvatarSize, AvatarType, BadgeVariant, ButtonAction, ButtonSize, ButtonVariant, Density, FontLoadingConfig, FontLoadingMode, FontLoadingOptions, IconName, MwAvailableFont, MwFontFallback, MwGoogleFontFamily, MwStyledTheme, MwThemeVarName, MwThemeVarNames, MwThemeVarReference, MwThemeVars, ResolvedTheme, SpacingSize, Spacings, SwitchSize, Theme, ThemeInput, ThemeMode, ThemePreference, ToneName, createFontStack, mwAvailableFonts, mwFontFallbacks, mwGoogleFontFamilies, mwStyledTheme, mwThemeVarNames, mwThemeVars, mwVar } from '@marwes-ui/core';
+import { ThemeInput, ThemePreference, ThemeMode, FontLoadingConfig, ThemeVariableStrategy, ResolvedTheme, ButtonOptions, InputOptions, SelectOptions, SelectAppearance as SelectAppearance$1, SelectOption as SelectOption$1, TextareaOptions, RichTextOptions, InputOtpOptions, CurrencyCode, iconRegistry, IconSize, IconStrokeWidth, AvatarOptions, CheckboxProps as CheckboxProps$1, DividerOptions, DividerSize, DividerOrientation, SpinnerOptions, SpacingOptions, SpacingSize, HeadingOptions, HeadingSize, ParagraphOptions, ParagraphSize, ToastOptions, ToastVariant, ToastIntent, ToastPlacement, TooltipOptions, IconNameType, RadioOptions, BadgeOptions, SwitchOptions, SliderOptions, TabOptions, DialogOptions } from '@marwes-ui/core';
+export { AvatarSize, AvatarType, BadgeVariant, ButtonAction, ButtonSize, ButtonVariant, Density, FontLoadingConfig, FontLoadingMode, FontLoadingOptions, IconName, MarwesThemeScriptOptions, MarwesThemeStyleOptions, MwAvailableFont, MwFontFallback, MwGoogleFontFamily, MwStyledTheme, MwThemeVarName, MwThemeVarNames, MwThemeVarReference, MwThemeVars, ResolvedTheme, SpacingSize, Spacings, SwitchSize, Theme, ThemeInput, ThemeMode, ThemeModeAttribute, ThemeModeRootTarget, ThemePreference, ThemeVariableStrategy, ToneName, createFontStack, mwAvailableFonts, mwFontFallbacks, mwGoogleFontFamilies, mwStyledTheme, mwThemeVarNames, mwThemeVars, mwVar } from '@marwes-ui/core';
 import * as React from 'react';
+export { MarwesThemeScript, MarwesThemeScriptProps, MarwesThemeStyle, MarwesThemeStyleProps, createMarwesThemeScript, createMarwesThemeStyle } from './ssr.js';
 
 type ThemeTarget = "provider" | "html" | "body";
 type ThemeAttribute = "class" | "data-theme" | "data-mode";
@@ -20,9 +21,10 @@ type MarwesProviderProps = {
     target?: ThemeTarget;
     attribute?: ThemeAttribute;
     disableTransitionOnChange?: boolean;
+    variableStrategy?: ThemeVariableStrategy;
     children: React.ReactNode;
 };
-declare function MarwesProvider({ theme, defaultPreference, preference: controlledPreference, defaultMode, mode: controlledMode, fontLoading, onPreferenceChange, onModeChange, storageKey, enableSystem, target, attribute, disableTransitionOnChange, children, }: MarwesProviderProps): react_jsx_runtime.JSX.Element;
+declare function MarwesProvider({ theme, defaultPreference, preference: controlledPreference, defaultMode, mode: controlledMode, fontLoading, onPreferenceChange, onModeChange, storageKey, enableSystem, target, attribute, disableTransitionOnChange, variableStrategy, children, }: MarwesProviderProps): react_jsx_runtime.JSX.Element;
 
 declare function useTheme(): ResolvedTheme;
 

package/dist/index.js

@@ -1,3 +1,4 @@
+export { MarwesThemeScript, MarwesThemeStyle, createMarwesThemeScript, createMarwesThemeStyle } from './chunk-VFY2GW62.js';
 import '@marwes-ui/presets/firstEdition/styles.css';
 import { createRichTextRecipe, resolveRichTextAllowedFormats, normalizeRichTextHtml, isRichTextHtmlEmpty, createDividerRecipe, createSpacingRecipe, createSliderRecipe, richTextCommandByFormat, resolveIconSize, resolveIconStrokeWidth, iconRegistry, resolveIconA11y, ThemeMode, resolveThemePreference, nextThemeMode, resolveThemeInput, createSpinnerRecipe, createButtonRecipe, ButtonAction, ButtonVariant, IconName, createInputRecipe, createSelectRecipe, resolveSelectMode, createTextareaRecipe, paragraphRecipe, buildInputFieldA11yIds, sanitizeInputOtpValue, createInputOtpRecipe, buildRichTextFieldA11yIds, buildCurrencyHelperText, getCurrencySymbol, createAvatarRecipe, createPurposeSemanticAttributes, checkboxRecipe, buildCheckboxFieldA11yIds, buildCheckboxGroupFieldA11yIds, headingRecipe, createCardRecipe, createToastRecipe, createTooltipRecipe, createAccordionRecipe, buildAccordionFieldA11yIds, radioRecipe, buildRadioGroupFieldA11yIds, createBadgeRecipe, createSwitchRecipe, buildSwitchFieldA11yIds, buildSliderFieldA11yIds, createTabRecipe, resolveTabValue, buildTabGroupA11yIds, moveTabSelection, createDialogRecipe, sanitizeCurrencyValue, isThemePreference, themeToCSSVars, extractUsedWeights, extractFontFamilyName, shouldLoadGoogleFont, buildGoogleFontsUrl } from '@marwes-ui/core';
 export { AvatarSize, AvatarType, BadgeVariant, ButtonAction, ButtonSize, ButtonVariant, IconName, Spacings, SwitchSize, ThemeMode, createFontStack, mwAvailableFonts, mwFontFallbacks, mwGoogleFontFamilies, mwStyledTheme, mwThemeVarNames, mwThemeVars, mwVar } from '@marwes-ui/core';
@@ -6,7 +7,6 @@ import { useEffect } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { createPortal } from 'react-dom';
 
-// src/index.ts
 var MarwesContext = React2.createContext(null);
 var loadedFonts = /* @__PURE__ */ new Set();
 var preconnected = false;
@@ -19,6 +19,7 @@ function themeToRootStyle(theme) {
 }
 function applyThemeToElement(element, theme) {
   element.setAttribute("data-marwes-theme", "true");
+  element.setAttribute("data-marwes-mode", theme.mode);
   for (const [property, value] of Object.entries(themeToRootStyle(theme))) {
     if (property === "backgroundColor") {
       element.style.backgroundColor = value;
@@ -153,6 +154,7 @@ function MarwesProvider({
   target = "provider",
   attribute = "class",
   disableTransitionOnChange = false,
+  variableStrategy = "inline",
   children
 }) {
   const rootRef = React2.useRef(null);
@@ -206,15 +208,16 @@ function MarwesProvider({
     () => resolveThemeInput({ ...theme ?? {}, mode: activeMode }),
     [activeMode, theme]
   );
-  const rootStyle = React2.useMemo(
-    () => themeToRootStyle(resolved),
-    [resolved]
-  );
+  const rootStyle = React2.useMemo(() => {
+    if (variableStrategy === "style-tag") return void 0;
+    return themeToRootStyle(resolved);
+  }, [resolved, variableStrategy]);
   React2.useEffect(() => {
+    if (variableStrategy === "style-tag") return;
     if (rootRef.current) {
       applyThemeToElement(rootRef.current, resolved);
     }
-  }, [resolved]);
+  }, [resolved, variableStrategy]);
   React2.useEffect(() => {
     if (target === "provider") return;
     const apply = () => {
@@ -252,6 +255,7 @@ function MarwesProvider({
       ref: rootRef,
       className: `mw-theme--${resolved.mode}`,
       "data-marwes-theme": "true",
+      "data-marwes-mode": resolved.mode,
       style: rootStyle,
       children
     }