@khanacademy/wonder-blocks-theming 3.2.0 → 3.3.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @khanacademy/wonder-blocks-theming
 
+## 3.3.0
+
+### Minor Changes
+
+- 7f79943: Export THEME_DATA_ATTRIBUTE to centralize how the theme is set in WB
+- 7bbf311: Add ThemeSwitcher component to change themes using CSS variables
+
+## 3.2.1
+
+### Patch Changes
+
+- 1d7be37: Use pnpm catalog to pin dependency versions across packages
+
 ## 3.2.0
 
 ### Minor Changes

package/dist/components/theme-switcher.d.ts

@@ -0,0 +1,17 @@
+import * as React from "react";
+import { SupportedThemes } from "../types";
+type Props = {
+    /**
+     * The theme to use.
+     */
+    theme: SupportedThemes;
+    /**
+     * The children where the theme will be applied.
+     */
+    children: React.ReactNode;
+};
+/**
+ * ThemeSwitcher is a component that allows users to switch between themes.
+ */
+export declare function ThemeSwitcher({ theme, children }: Props): string | number | boolean | Iterable<React.ReactNode> | React.JSX.Element | null | undefined;
+export {};

package/dist/es/index.js

@@ -57,4 +57,19 @@ function useStyles(styles, theme) {
   return styleSheet;
 }
 
-export { ThemeSwitcherContext, createThemeContext, mergeTheme, useScopedTheme, useStyles, withScopedTheme };
+const THEME_DATA_ATTRIBUTE = "data-wb-theme";
+
+function ThemeSwitcher({
+  theme,
+  children
+}) {
+  if (!theme) {
+    return children;
+  }
+  const props = {
+    [THEME_DATA_ATTRIBUTE]: theme
+  };
+  return React.createElement("div", props, children);
+}
+
+export { THEME_DATA_ATTRIBUTE, ThemeSwitcher, ThemeSwitcherContext, createThemeContext, mergeTheme, useScopedTheme, useStyles, withScopedTheme };

package/dist/index.d.ts

@@ -4,4 +4,6 @@ export { default as useScopedTheme } from "./hooks/use-scoped-theme";
 export { default as withScopedTheme, type WithThemeProps, type WithoutTheme, } from "./components/with-scoped-theme";
 export { type ThemedStylesFn, type SupportedThemes, type Themes } from "./types";
 export { default as useStyles } from "./hooks/use-styles";
+export { THEME_DATA_ATTRIBUTE } from "./utils/constants";
 export { ThemeSwitcherContext } from "./utils/theme-switcher-context";
+export { ThemeSwitcher } from "./components/theme-switcher";

package/dist/index.js

@@ -81,6 +81,23 @@ function useStyles(styles, theme) {
   return styleSheet;
 }
 
+const THEME_DATA_ATTRIBUTE = "data-wb-theme";
+
+function ThemeSwitcher({
+  theme,
+  children
+}) {
+  if (!theme) {
+    return children;
+  }
+  const props = {
+    [THEME_DATA_ATTRIBUTE]: theme
+  };
+  return React__namespace.createElement("div", props, children);
+}
+
+exports.THEME_DATA_ATTRIBUTE = THEME_DATA_ATTRIBUTE;
+exports.ThemeSwitcher = ThemeSwitcher;
 exports.ThemeSwitcherContext = ThemeSwitcherContext;
 exports.createThemeContext = createThemeContext;
 exports.mergeTheme = mergeTheme;

package/dist/utils/constants.d.ts

@@ -0,0 +1,8 @@
+/**
+ * The data attribute that scopes the theme to a specific element.
+ * This is used to apply the theme to a specific element(s) in the DOM.
+ *
+ * NOTE: The -wb- prefix is used to avoid conflicts with other libraries, and
+ * scope the theme to Wonder Blocks.
+ */
+export declare const THEME_DATA_ATTRIBUTE = "data-wb-theme";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-theming",
-  "version": "3.2.0",
+  "version": "3.3.0",
   "publishConfig": {
     "access": "public"
   },