@ultraviolet/ui 3.0.0-beta.0 → 3.0.0-beta.2

package/dist/components/Dialog/index.d.ts

@@ -52,7 +52,7 @@ export declare const Dialog: (({ ariaLabel, className, children, "data-testid":
         href?: string;
         target?: string;
         download?: string;
-    } & import("react").RefAttributes<Element>, "onClick" | "tooltip" | "disabled">) => import("@emotion/react/jsx-runtime").JSX.Element;
+    } & import("react").RefAttributes<Element>, "tooltip" | "onClick" | "disabled">) => import("@emotion/react/jsx-runtime").JSX.Element;
     Buttons: ({ secondaryButton, primaryButton, }: {
         secondaryButton: import("react").ReactNode;
         primaryButton: import("react").ReactNode;

package/dist/components/Slider/styles.d.ts

@@ -53,7 +53,7 @@ export declare const StyledTooltip: import("@emotion/styled").StyledComponent<Pi
     disableAnimation?: boolean;
     portalTarget?: HTMLElement;
     dynamicDomRendering?: boolean;
-} & import("react").RefAttributes<HTMLDivElement>, "children" | "className" | "text" | "id" | "tabIndex" | "role" | "maxWidth" | "data-testid" | "containerFullHeight" | "containerFullWidth" | "visible" | "debounceDelay" | "portalTarget" | "innerRef"> & {
+} & import("react").RefAttributes<HTMLDivElement>, "children" | "className" | "text" | "maxWidth" | "id" | "tabIndex" | "role" | "data-testid" | "containerFullHeight" | "containerFullWidth" | "visible" | "debounceDelay" | "portalTarget" | "innerRef"> & {
     placement?: Exclude<import("react").ComponentProps<typeof import("..").Popup>["placement"], "nested-menu">;
 } & import("react").RefAttributes<HTMLDivElement> & {
     theme?: Theme;

package/dist/components/Tabs/index.d.ts

@@ -23,7 +23,7 @@ export declare const Tabs: {
         subtitle?: string;
         tooltip?: string;
         value?: string | number;
-    } & Omit<any, "children" | "className" | "value" | "role" | "tooltip" | "as" | "disabled" | "badge" | "counter">, "ref"> & import("react").RefAttributes<HTMLElement>>;
+    } & Omit<any, "children" | "className" | "value" | "tooltip" | "role" | "as" | "disabled" | "badge" | "counter">, "ref"> & import("react").RefAttributes<HTMLElement>>;
     Menu: import("react").ForwardRefExoticComponent<{
         children: ReactNode;
         disclosure: ReactNode;

package/dist/components/Tooltip/index.d.ts

@@ -36,6 +36,6 @@ export declare const Tooltip: import("react").ForwardRefExoticComponent<Pick<{
     disableAnimation?: boolean;
     portalTarget?: HTMLElement;
     dynamicDomRendering?: boolean;
-} & import("react").RefAttributes<HTMLDivElement>, "children" | "className" | "text" | "id" | "tabIndex" | "role" | "maxWidth" | "data-testid" | "containerFullHeight" | "containerFullWidth" | "visible" | "debounceDelay" | "portalTarget" | "innerRef"> & {
+} & import("react").RefAttributes<HTMLDivElement>, "children" | "className" | "text" | "maxWidth" | "id" | "tabIndex" | "role" | "data-testid" | "containerFullHeight" | "containerFullWidth" | "visible" | "debounceDelay" | "portalTarget" | "innerRef"> & {
     placement?: Exclude<ComponentProps<typeof Popup>["placement"], "nested-menu">;
 } & import("react").RefAttributes<HTMLDivElement>>;

package/dist/theme/ThemeProvider.cjs

@@ -16,6 +16,28 @@ const useTheme = () => {
 const ThemeProvider = ({
   children,
   theme = themes.consoleLightTheme
-}) => /* @__PURE__ */ jsxRuntime.jsx(ThemeContext.Provider, { value: theme, children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: dynamic.assignInlineVars(themes.theme, theme), children }) });
+}) => {
+  react.useEffect(() => {
+    const styleId = "uv-theme";
+    const existingStyle = document.getElementById(styleId);
+    const cssVars = dynamic.assignInlineVars(themes.theme, theme);
+    const cssString = `:root { ${Object.entries(cssVars).map(([key, value]) => `${key}: ${value};`).join(" ")} }`;
+    if (existingStyle) {
+      existingStyle.textContent = cssString;
+    } else {
+      const style = document.createElement("style");
+      style.id = styleId;
+      style.textContent = cssString;
+      document.head.appendChild(style);
+    }
+    return () => {
+      const style = document.getElementById(styleId);
+      if (style) {
+        style.remove();
+      }
+    };
+  }, [theme]);
+  return /* @__PURE__ */ jsxRuntime.jsx(ThemeContext.Provider, { value: theme, children });
+};
 exports.ThemeProvider = ThemeProvider;
 exports.useTheme = useTheme;

package/dist/theme/ThemeProvider.d.ts

@@ -730,7 +730,7 @@ type ThemeProviderProps = {
     children: ReactNode;
 };
 /**
- * ThemeProvider will apply generated global CSS variables to the application.
+ * ThemeProvider will apply generated global CSS variables to the application in the `<head>`.
  * If no theme is provided, it will default to `lightTheme`.
  */
 export declare const ThemeProvider: ({ children, theme, }: ThemeProviderProps) => import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/theme/ThemeProvider.js

@@ -1,8 +1,8 @@
 "use client";
 import { jsx } from "@emotion/react/jsx-runtime";
-import { consoleLightTheme, theme } from "@ultraviolet/themes";
+import { theme, consoleLightTheme } from "@ultraviolet/themes";
 import { assignInlineVars } from "@vanilla-extract/dynamic";
-import { createContext, useContext } from "react";
+import { useEffect, createContext, useContext } from "react";
 const ThemeContext = createContext(consoleLightTheme);
 const useTheme = () => {
   const context = useContext(ThemeContext);
@@ -14,7 +14,29 @@ const useTheme = () => {
 const ThemeProvider = ({
   children,
   theme: theme$1 = consoleLightTheme
-}) => /* @__PURE__ */ jsx(ThemeContext.Provider, { value: theme$1, children: /* @__PURE__ */ jsx("div", { style: assignInlineVars(theme, theme$1), children }) });
+}) => {
+  useEffect(() => {
+    const styleId = "uv-theme";
+    const existingStyle = document.getElementById(styleId);
+    const cssVars = assignInlineVars(theme, theme$1);
+    const cssString = `:root { ${Object.entries(cssVars).map(([key, value]) => `${key}: ${value};`).join(" ")} }`;
+    if (existingStyle) {
+      existingStyle.textContent = cssString;
+    } else {
+      const style = document.createElement("style");
+      style.id = styleId;
+      style.textContent = cssString;
+      document.head.appendChild(style);
+    }
+    return () => {
+      const style = document.getElementById(styleId);
+      if (style) {
+        style.remove();
+      }
+    };
+  }, [theme$1]);
+  return /* @__PURE__ */ jsx(ThemeContext.Provider, { value: theme$1, children });
+};
 export {
   ThemeProvider,
   useTheme

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ultraviolet/ui",
-  "version": "3.0.0-beta.0",
+  "version": "3.0.0-beta.2",
   "description": "Ultraviolet UI",
   "homepage": "https://github.com/scaleway/ultraviolet#readme",
   "repository": {
@@ -89,8 +89,8 @@
     "deepmerge": "4.3.1",
     "react-toastify": "11.0.5",
     "react-use-clipboard": "1.0.9",
-    "@ultraviolet/icons": "4.0.3",
-    "@ultraviolet/themes": "2.0.0"
+    "@ultraviolet/icons": "4.0.4-beta.0",
+    "@ultraviolet/themes": "2.1.0-beta.0"
   },
   "scripts": {
     "type:generate": "tsc --declaration -p tsconfig.build.json",