@dheme/react 2.12.0 → 2.13.0

package/README.md

@@ -314,15 +314,17 @@ The component renders as a pill in the corner of the screen. Clicking it expands
 
 ```tsx
 <ThemeGenerator
-  defaultTheme="#4332f6"           // Initial primary color
-  defaultSecondaryColor="#ab67f1"  // Initial secondary color
-  defaultSaturation={10}           // Initial saturation adjust (-100 to 100)
-  defaultLightness={2}             // Initial lightness adjust (-100 to 100)
-  defaultRadius={0}                // Initial border radius (0 to 2 rem)
-  position="bottom-right"          // 'bottom-right' | 'bottom-left'
-  open={isOpen}                    // Controlled open state (optional)
-  onOpenChange={setIsOpen}         // Controlled open callback (optional)
-  labels={{                        // i18n overrides (all optional)
+  defaultTheme="#4332f6"              // Initial primary color
+  defaultSecondaryColor="#ab67f1"     // Initial secondary color
+  defaultSecondaryEnabled={false}     // Whether secondary starts enabled
+  defaultSaturation={10}              // Initial saturation adjust (-100 to 100)
+  defaultLightness={2}                // Initial lightness adjust (-100 to 100)
+  defaultRadius={0}                   // Initial border radius (0 to 2 rem)
+  defaultBackgroundIsColored={false}  // Initial colorful background toggle
+  position="bottom-right"             // 'bottom-right' | 'bottom-left'
+  open={isOpen}                       // Controlled open state (optional)
+  onOpenChange={setIsOpen}            // Controlled open callback (optional)
+  labels={{                           // i18n overrides (all optional)
     title: 'Theme Generator',
     primary: 'Primary Color',
     secondary: 'Secondary Color',
@@ -330,7 +332,7 @@ The component renders as a pill in the corner of the screen. Clicking it expands
     lightness: 'Brightness',
     reset: 'Restore defaults',
   }}
-  className="my-fab"               // Extra class on the container (optional)
+  className="my-fab"                  // Extra class on the container (optional)
 />
 ```
 
@@ -338,9 +340,11 @@ The component renders as a pill in the corner of the screen. Clicking it expands
 | --- | --- | --- | --- |
 | `defaultTheme` | `string` | `'#4332f6'` | Initial primary HEX color. |
 | `defaultSecondaryColor` | `string` | `'#ab67f1'` | Initial secondary HEX color. |
+| `defaultSecondaryEnabled` | `boolean` | `false` | Whether secondary color starts enabled. |
 | `defaultSaturation` | `number` | `10` | Initial saturation adjust (-100–100). |
 | `defaultLightness` | `number` | `2` | Initial lightness adjust (-100–100). |
 | `defaultRadius` | `number` | `0` | Initial border radius (0–2 rem). |
+| `defaultBackgroundIsColored` | `boolean` | `false` | Initial state of the colorful background toggle. |
 | `position` | `'bottom-right' \| 'bottom-left'` | `'bottom-right'` | Corner to anchor the FAB. |
 | `open` | `boolean` | — | Controlled open state. Omit for uncontrolled. |
 | `onOpenChange` | `(open: boolean) => void` | — | Called when open state changes. |

package/dist/index.d.mts

@@ -67,9 +67,11 @@ declare function DhemeScript({ defaultMode, nonce, }: DhemeScriptProps): React__
 interface ThemeGeneratorProps {
     defaultTheme?: string;
     defaultSecondaryColor?: string;
+    defaultSecondaryEnabled?: boolean;
     defaultSaturation?: number;
     defaultLightness?: number;
     defaultRadius?: number;
+    defaultBackgroundIsColored?: boolean;
     position?: 'bottom-right' | 'bottom-left';
     open?: boolean;
     onOpenChange?: (open: boolean) => void;
@@ -93,7 +95,7 @@ interface ThemeGeneratorProps {
     };
     className?: string;
 }
-declare function ThemeGenerator({ defaultTheme, defaultSecondaryColor, defaultSaturation, defaultLightness, defaultRadius, position, open: controlledOpen, onOpenChange, labels: labelsProp, className, }: ThemeGeneratorProps): React__default.ReactElement;
+declare function ThemeGenerator({ defaultTheme, defaultSecondaryColor, defaultSecondaryEnabled, defaultSaturation, defaultLightness, defaultRadius, defaultBackgroundIsColored, position, open: controlledOpen, onOpenChange, labels: labelsProp, className, }: ThemeGeneratorProps): React__default.ReactElement;
 
 declare function useTheme(): ThemeDataState;
 

package/dist/index.d.ts

@@ -67,9 +67,11 @@ declare function DhemeScript({ defaultMode, nonce, }: DhemeScriptProps): React__
 interface ThemeGeneratorProps {
     defaultTheme?: string;
     defaultSecondaryColor?: string;
+    defaultSecondaryEnabled?: boolean;
     defaultSaturation?: number;
     defaultLightness?: number;
     defaultRadius?: number;
+    defaultBackgroundIsColored?: boolean;
     position?: 'bottom-right' | 'bottom-left';
     open?: boolean;
     onOpenChange?: (open: boolean) => void;
@@ -93,7 +95,7 @@ interface ThemeGeneratorProps {
     };
     className?: string;
 }
-declare function ThemeGenerator({ defaultTheme, defaultSecondaryColor, defaultSaturation, defaultLightness, defaultRadius, position, open: controlledOpen, onOpenChange, labels: labelsProp, className, }: ThemeGeneratorProps): React__default.ReactElement;
+declare function ThemeGenerator({ defaultTheme, defaultSecondaryColor, defaultSecondaryEnabled, defaultSaturation, defaultLightness, defaultRadius, defaultBackgroundIsColored, position, open: controlledOpen, onOpenChange, labels: labelsProp, className, }: ThemeGeneratorProps): React__default.ReactElement;
 
 declare function useTheme(): ThemeDataState;
 

package/dist/index.js

@@ -1015,9 +1015,11 @@ function cn(...classes) {
 function ThemeGenerator({
   defaultTheme = "#4332f6",
   defaultSecondaryColor = "#ab67f1",
+  defaultSecondaryEnabled = false,
   defaultSaturation = 10,
   defaultLightness = 2,
   defaultRadius = 0,
+  defaultBackgroundIsColored = false,
   position = "bottom-right",
   open: controlledOpen,
   onOpenChange,
@@ -1055,12 +1057,12 @@ function ThemeGenerator({
   );
   const [localPrimary, setLocalPrimary] = (0, import_react7.useState)(defaultTheme);
   const [localSecondary, setLocalSecondary] = (0, import_react7.useState)(defaultSecondaryColor);
-  const [isSecondaryEnabled, setIsSecondaryEnabled] = (0, import_react7.useState)(false);
+  const [isSecondaryEnabled, setIsSecondaryEnabled] = (0, import_react7.useState)(defaultSecondaryEnabled);
   const [localSaturation, setLocalSaturation] = (0, import_react7.useState)([defaultSaturation]);
   const [localLightness, setLocalLightness] = (0, import_react7.useState)([defaultLightness]);
   const [localRadius, setLocalRadius] = (0, import_react7.useState)([defaultRadius]);
   const [localCardIsColored, setLocalCardIsColored] = (0, import_react7.useState)(false);
-  const [localBackgroundIsColored, setLocalBackgroundIsColored] = (0, import_react7.useState)(false);
+  const [localBackgroundIsColored, setLocalBackgroundIsColored] = (0, import_react7.useState)(defaultBackgroundIsColored);
   const [localBorderIsColored, setLocalBorderIsColored] = (0, import_react7.useState)(false);
   const paramsRef = (0, import_react7.useRef)({
     theme: localPrimary,
@@ -1133,17 +1135,18 @@ function ThemeGenerator({
     setLocalSaturation([defaultSaturation]);
     setLocalLightness([defaultLightness]);
     setLocalRadius([defaultRadius]);
-    setIsSecondaryEnabled(false);
+    setIsSecondaryEnabled(defaultSecondaryEnabled);
     setLocalCardIsColored(false);
-    setLocalBackgroundIsColored(false);
+    setLocalBackgroundIsColored(defaultBackgroundIsColored);
     setLocalBorderIsColored(false);
     generateTheme({
       theme: defaultTheme,
+      secondaryColor: defaultSecondaryEnabled ? defaultSecondaryColor : void 0,
       saturationAdjust: defaultSaturation,
       lightnessAdjust: defaultLightness,
       radius: defaultRadius,
       cardIsColored: false,
-      backgroundIsColored: false,
+      backgroundIsColored: defaultBackgroundIsColored,
       borderIsColored: false
     });
   };

package/dist/index.mjs

@@ -965,9 +965,11 @@ function cn(...classes) {
 function ThemeGenerator({
   defaultTheme = "#4332f6",
   defaultSecondaryColor = "#ab67f1",
+  defaultSecondaryEnabled = false,
   defaultSaturation = 10,
   defaultLightness = 2,
   defaultRadius = 0,
+  defaultBackgroundIsColored = false,
   position = "bottom-right",
   open: controlledOpen,
   onOpenChange,
@@ -1005,12 +1007,12 @@ function ThemeGenerator({
   );
   const [localPrimary, setLocalPrimary] = useState3(defaultTheme);
   const [localSecondary, setLocalSecondary] = useState3(defaultSecondaryColor);
-  const [isSecondaryEnabled, setIsSecondaryEnabled] = useState3(false);
+  const [isSecondaryEnabled, setIsSecondaryEnabled] = useState3(defaultSecondaryEnabled);
   const [localSaturation, setLocalSaturation] = useState3([defaultSaturation]);
   const [localLightness, setLocalLightness] = useState3([defaultLightness]);
   const [localRadius, setLocalRadius] = useState3([defaultRadius]);
   const [localCardIsColored, setLocalCardIsColored] = useState3(false);
-  const [localBackgroundIsColored, setLocalBackgroundIsColored] = useState3(false);
+  const [localBackgroundIsColored, setLocalBackgroundIsColored] = useState3(defaultBackgroundIsColored);
   const [localBorderIsColored, setLocalBorderIsColored] = useState3(false);
   const paramsRef = useRef2({
     theme: localPrimary,
@@ -1083,17 +1085,18 @@ function ThemeGenerator({
     setLocalSaturation([defaultSaturation]);
     setLocalLightness([defaultLightness]);
     setLocalRadius([defaultRadius]);
-    setIsSecondaryEnabled(false);
+    setIsSecondaryEnabled(defaultSecondaryEnabled);
     setLocalCardIsColored(false);
-    setLocalBackgroundIsColored(false);
+    setLocalBackgroundIsColored(defaultBackgroundIsColored);
     setLocalBorderIsColored(false);
     generateTheme({
       theme: defaultTheme,
+      secondaryColor: defaultSecondaryEnabled ? defaultSecondaryColor : void 0,
       saturationAdjust: defaultSaturation,
       lightnessAdjust: defaultLightness,
       radius: defaultRadius,
       cardIsColored: false,
-      backgroundIsColored: false,
+      backgroundIsColored: defaultBackgroundIsColored,
       borderIsColored: false
     });
   };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dheme/react",
-  "version": "2.12.0",
+  "version": "2.13.0",
   "description": "React bindings for Dheme SDK with zero-FOUC theme application",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",