@june-ai/june-ui 0.2.1 → 0.2.2

package/dist/index.cjs

@@ -152,9 +152,7 @@ var darkTheme = {
   "--june-muted": "#9ca3af",
   "--june-border": "#1f2937",
   "--june-accent": "#818cf8",
-  "--june-danger": "#f87171",
-  "--june-radius": "8px",
-  "--june-font-family": "system-ui, -apple-system, 'Segoe UI', sans-serif"
+  "--june-danger": "#f87171"
 };
 
 // src/themes/light.ts
@@ -163,9 +161,7 @@ var lightTheme = {
   "--june-muted": "#6b7280",
   "--june-border": "#e5e7eb",
   "--june-accent": "#4f46e5",
-  "--june-danger": "#b91c1c",
-  "--june-radius": "8px",
-  "--june-font-family": "system-ui, -apple-system, 'Segoe UI', sans-serif"
+  "--june-danger": "#b91c1c"
 };
 
 // src/themes/theme-provider.tsx
@@ -190,23 +186,33 @@ function useResolvedTheme(mode) {
   return mode === "system" ? system : mode;
 }
 function JuneThemeProvider({
-  mode = "light",
+  mode,
   vars,
   className,
   style,
   children
 }) {
-  const resolved = useResolvedTheme(mode);
+  const explicit = mode !== void 0;
+  const resolved = useResolvedTheme(mode ?? "system");
   const mergedStyle = (0, import_react2.useMemo)(() => {
-    const base = resolved === "dark" ? darkTheme : lightTheme;
-    return { ...base, ...vars, colorScheme: resolved, ...style };
-  }, [resolved, vars, style]);
-  const context = (0, import_react2.useMemo)(() => ({ mode, theme: resolved }), [mode, resolved]);
+    if (!explicit && !vars && !style) return void 0;
+    const base = explicit ? resolved === "dark" ? darkTheme : lightTheme : void 0;
+    return {
+      ...base,
+      ...vars,
+      ...explicit ? { colorScheme: resolved } : {},
+      ...style
+    };
+  }, [explicit, resolved, vars, style]);
+  const context = (0, import_react2.useMemo)(
+    () => ({ mode: mode ?? "system", theme: resolved }),
+    [mode, resolved]
+  );
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(JuneContext.Provider, { value: context, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "div",
     {
       className: className ? `june-ui-root ${className}` : "june-ui-root",
-      "data-june-theme": resolved,
+      "data-june-theme": explicit ? resolved : void 0,
       style: mergedStyle,
       children
     }
@@ -665,7 +671,7 @@ function JuneRenderer(props) {
     isStreaming = false,
     mixedContent = true,
     renderText,
-    theme = "light",
+    theme,
     themeVars,
     className,
     style,

package/dist/index.d.cts

@@ -89,6 +89,7 @@ declare function runAction(event: OpenUIActionEvent, options: RunActionOptions):
 declare function createActionHandler(options: RunActionOptions): (event: OpenUIActionEvent) => void;
 
 type JuneThemeVars = Record<string, string>;
+/** Colors only. June never sets fonts, radii or backgrounds. */
 declare const lightTheme: JuneThemeVars;
 
 interface FallbackArgs {
@@ -149,6 +150,10 @@ declare function JuneRenderer(props: JuneRendererProps): react.JSX.Element;
 
 declare function useResolvedTheme(mode: JuneThemeMode): JuneResolvedTheme;
 interface JuneThemeProviderProps {
+    /**
+     * Omit to inherit the host app's look: no colors, fonts or color-scheme are applied.
+     * "light" | "dark" | "system" opt in to June's text colors.
+     */
     mode?: JuneThemeMode;
     /** CSS variable overrides, e.g. { "--june-accent": "#0ea5e9" }. */
     vars?: JuneThemeVars;

package/dist/index.d.ts

@@ -89,6 +89,7 @@ declare function runAction(event: OpenUIActionEvent, options: RunActionOptions):
 declare function createActionHandler(options: RunActionOptions): (event: OpenUIActionEvent) => void;
 
 type JuneThemeVars = Record<string, string>;
+/** Colors only. June never sets fonts, radii or backgrounds. */
 declare const lightTheme: JuneThemeVars;
 
 interface FallbackArgs {
@@ -149,6 +150,10 @@ declare function JuneRenderer(props: JuneRendererProps): react.JSX.Element;
 
 declare function useResolvedTheme(mode: JuneThemeMode): JuneResolvedTheme;
 interface JuneThemeProviderProps {
+    /**
+     * Omit to inherit the host app's look: no colors, fonts or color-scheme are applied.
+     * "light" | "dark" | "system" opt in to June's text colors.
+     */
     mode?: JuneThemeMode;
     /** CSS variable overrides, e.g. { "--june-accent": "#0ea5e9" }. */
     vars?: JuneThemeVars;

package/dist/index.js

@@ -113,9 +113,7 @@ var darkTheme = {
   "--june-muted": "#9ca3af",
   "--june-border": "#1f2937",
   "--june-accent": "#818cf8",
-  "--june-danger": "#f87171",
-  "--june-radius": "8px",
-  "--june-font-family": "system-ui, -apple-system, 'Segoe UI', sans-serif"
+  "--june-danger": "#f87171"
 };
 
 // src/themes/light.ts
@@ -124,9 +122,7 @@ var lightTheme = {
   "--june-muted": "#6b7280",
   "--june-border": "#e5e7eb",
   "--june-accent": "#4f46e5",
-  "--june-danger": "#b91c1c",
-  "--june-radius": "8px",
-  "--june-font-family": "system-ui, -apple-system, 'Segoe UI', sans-serif"
+  "--june-danger": "#b91c1c"
 };
 
 // src/themes/theme-provider.tsx
@@ -151,23 +147,33 @@ function useResolvedTheme(mode) {
   return mode === "system" ? system : mode;
 }
 function JuneThemeProvider({
-  mode = "light",
+  mode,
   vars,
   className,
   style,
   children
 }) {
-  const resolved = useResolvedTheme(mode);
+  const explicit = mode !== void 0;
+  const resolved = useResolvedTheme(mode ?? "system");
   const mergedStyle = useMemo(() => {
-    const base = resolved === "dark" ? darkTheme : lightTheme;
-    return { ...base, ...vars, colorScheme: resolved, ...style };
-  }, [resolved, vars, style]);
-  const context = useMemo(() => ({ mode, theme: resolved }), [mode, resolved]);
+    if (!explicit && !vars && !style) return void 0;
+    const base = explicit ? resolved === "dark" ? darkTheme : lightTheme : void 0;
+    return {
+      ...base,
+      ...vars,
+      ...explicit ? { colorScheme: resolved } : {},
+      ...style
+    };
+  }, [explicit, resolved, vars, style]);
+  const context = useMemo(
+    () => ({ mode: mode ?? "system", theme: resolved }),
+    [mode, resolved]
+  );
   return /* @__PURE__ */ jsx(JuneContext.Provider, { value: context, children: /* @__PURE__ */ jsx(
     "div",
     {
       className: className ? `june-ui-root ${className}` : "june-ui-root",
-      "data-june-theme": resolved,
+      "data-june-theme": explicit ? resolved : void 0,
       style: mergedStyle,
       children
     }
@@ -626,7 +632,7 @@ function JuneRenderer(props) {
     isStreaming = false,
     mixedContent = true,
     renderText,
-    theme = "light",
+    theme,
     themeVars,
     className,
     style,

package/dist/june.css

@@ -1,21 +1,30 @@
 .june-ui-root {
-    box-sizing: border-box;
-    max-width: 100%;
-    color: var(--june-foreground);
-    background: var(--june-background);
-    font-family: var(--june-font-family);
-    border-radius: var(--june-radius);
-  }
-  
-  .june-ui-root img,
-  .june-ui-root video {
-    max-width: 100%;
-    height: auto;
-  }
-  
-  [data-june-error] {
-    padding: 12px 16px;
-    border: 1px solid var(--june-danger);
-    border-radius: var(--june-radius);
-    color: var(--june-danger);
-  }
+  box-sizing: border-box;
+  max-width: 100%;
+  min-width: 0;
+}
+
+/* Colors apply only when a theme is explicitly chosen. */
+.june-ui-root[data-june-theme] {
+  color: var(--june-foreground);
+}
+
+.june-ui-root img,
+.june-ui-root video {
+  max-width: 100%;
+  height: auto;
+}
+
+.june-text {
+  margin: 0 0 8px;
+  line-height: 1.5;
+  overflow-wrap: anywhere;
+  white-space: pre-wrap;
+}
+
+[data-june-error] {
+  padding: 12px 16px;
+  border: 1px solid var(--june-danger, #b91c1c);
+  border-radius: 8px;
+  color: var(--june-danger, #b91c1c);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@june-ai/june-ui",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "description": "A React Generative UI SDK powered by OpenUI",
   "license": "MIT",
   "type": "module",