@ankjs/react-ui 1.0.14 → 1.0.15

package/dist/constants/colors.d.ts

@@ -1,38 +1,38 @@
 export declare const light: {
     primary: string;
     primaryColor: string;
+    pageBg: string;
     mainBgColor: string;
     backgroundColor: string;
     secondryBgColor: string;
-    pageBg: string;
     color: string;
 };
 export declare const dark: {
     primary: string;
     primaryColor: string;
     mainBgColor: string;
-    secondryBgColor: string;
     pageBg: string;
     backgroundColor: string;
+    secondryBgColor: string;
     color: string;
 };
 declare const colors: {
     light: {
         primary: string;
         primaryColor: string;
+        pageBg: string;
         mainBgColor: string;
         backgroundColor: string;
         secondryBgColor: string;
-        pageBg: string;
         color: string;
     };
     dark: {
         primary: string;
         primaryColor: string;
         mainBgColor: string;
-        secondryBgColor: string;
         pageBg: string;
         backgroundColor: string;
+        secondryBgColor: string;
         color: string;
     };
 };

package/dist/index.cjs

@@ -12,36 +12,38 @@ const AnkThemeContext = react.createContext(undefined);
 const ColorContext = react.createContext(undefined);
 
 const useSystemTheme = () => {
-    const [sysTheme, setSysTheme] = react.useState(window.matchMedia('(prefers-color-scheme: dark)').matches
+    const theme = window.matchMedia('(prefers-color-scheme: dark)').matches
         ? "dark"
-        : "light");
+        : "light";
+    const [sysTheme, setSysTheme] = react.useState(theme);
     react.useEffect(() => {
         const media = window.matchMedia('(prefers-color-scheme: dark)');
         const handleChange = () => {
             setSysTheme(media.matches ? "dark" : "light");
         };
+        handleChange();
         media.addEventListener("change", handleChange);
         return () => media.removeEventListener("change", handleChange);
-    }, []);
+    }, [theme, setSysTheme]);
     return sysTheme;
 };
 
 const light = {
-    primary: '#eee',
+    primary: 'red',
     primaryColor: 'red',
+    pageBg: '#8d8d8d',
     mainBgColor: '#fff',
     backgroundColor: '#f0f0f0',
     secondryBgColor: '#808080',
-    pageBg: '#8d8d8d',
     color: '#000',
 };
 const dark = {
-    primary: '#b30303',
+    primary: 'red',
     primaryColor: 'red',
-    mainBgColor: '#009',
-    secondryBgColor: '808080',
+    mainBgColor: '#000',
     pageBg: '#333',
     backgroundColor: '#444',
+    secondryBgColor: '808080',
     color: '#eee',
 };
 
@@ -63,7 +65,7 @@ const useThemeColors = () => {
     const reLight = light$1 ?? light;
     const reDark = dark$1 ?? dark;
     const theme = context.theme || undefined;
-    const themeMode = context.themeMode || undefined;
+    const themeMode = context.themeType || undefined;
     if (theme === undefined || themeMode === undefined) {
         throw new Error(` * useThemeColors must be used within a AnkThemeProvider * \n like this - \n import  AnkThemeProvider  from '@ankjs/react-ui;
     
@@ -91,14 +93,25 @@ const useThemeColors = () => {
 };
 
 const MainUiView = (props) => {
-    const { children, autoApply, style, overflow, } = props;
-    const mainBgColor = useThemeColors();
-    return (jsxRuntime.jsxs("div", { children: [JSON.stringify(mainBgColor), children] }));
+    const { children, autoApply, style, overflow, backgroundColor, fontolor } = props;
+    const colors = useThemeColors();
+    const { mainBgColor, color } = useThemeColors();
+    const bg = autoApply ? mainBgColor : backgroundColor;
+    const text = autoApply ? color : fontolor;
+    const styleContener = {
+        backgroundColor: bg,
+        color: text,
+        height: "100dvh",
+        width: "100%",
+        overflow,
+        ...style
+    };
+    return (jsxRuntime.jsxs("div", { style: styleContener, children: [JSON.stringify(colors), children] }));
 };
 
 const AnkThemeProvider = (props) => {
     //PROPERTY 
-    const { children, colorsObjectProvide = "", colorsObject = "", defaultThemeMode = "system", autoApply = true, style = {}, overflow = 'visible', } = props;
+    const { children, colorsObjectProvide = "", colorsObject = "", defaultThemeMode = "system", autoApply = true, style = {}, overflow = 'scroll', backgroundColor = "pink", color = "black" } = props;
     // SYSTEM THEME MODE 🪝 
     // Assumed returns 'light' | 'dark'
     const system = useSystemTheme();
@@ -108,24 +121,30 @@ const AnkThemeProvider = (props) => {
     const [theme, setTheme] = react.useState(initialActiveTheme);
     // State for the user's selected preference
     const [themeType, setThemeType] = react.useState(defaultThemeMode);
+    react.useEffect(() => {
+        if (defaultThemeMode === 'system') {
+            setTheme(initialActiveTheme);
+            return setThemeType('system');
+        }
+    }, [defaultThemeMode, initialActiveTheme, setTheme, setThemeType]);
     const setDarkTheme = react.useCallback(() => {
         if (theme === 'dark')
             return;
         setThemeType('dark');
-        setTheme('dark');
+        return setTheme('dark');
     }, [theme, setThemeType, setTheme]);
     const setLightTheme = react.useCallback(() => {
         if (theme === 'light')
             return;
         setThemeType('light');
-        setTheme('light');
+        return setTheme('light');
     }, [theme, setThemeType, setTheme]);
     const setSystemTheme = react.useCallback(() => {
         if (themeType === 'system')
             return;
         setThemeType('system');
-        setTheme(system);
-    }, [theme, setTheme, system, setThemeType]);
+        return setTheme(system);
+    }, [themeType, setTheme, system, setThemeType]);
     // Memoize the context value to prevent unnecessary re-renders in consumers
     const contextValue = react.useMemo(() => ({
         theme,
@@ -134,13 +153,13 @@ const AnkThemeProvider = (props) => {
         setDarkTheme,
         setLightTheme,
         setSystemTheme,
-    }), [theme, setTheme, setDarkTheme, setLightTheme, setSystemTheme]);
+    }), [theme, themeType, setTheme, setDarkTheme, setLightTheme, setSystemTheme]);
     // WONER COLOUR OBJECT 
     const colorObj = react.useMemo(() => ({
         ...colorsObject,
         ...colorsObjectProvide,
     }), [colorsObject, colorsObjectProvide]);
-    return (jsxRuntime.jsx(AnkThemeContext.Provider, { value: contextValue, children: jsxRuntime.jsx(ColorContext.Provider, { value: colorObj, children: jsxRuntime.jsx(MainUiView, { autoApply: autoApply, style: style, overflow: overflow, children: children }) }) }));
+    return (jsxRuntime.jsx(AnkThemeContext.Provider, { value: contextValue, children: jsxRuntime.jsx(ColorContext.Provider, { value: colorObj, children: jsxRuntime.jsx(MainUiView, { autoApply: autoApply, style: style, overflow: overflow, backgroundColor: backgroundColor, fontolor: color, children: children }) }) }));
 };
 
 exports.default = AnkThemeProvider;

package/dist/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../src/contexts/AnkThemeContext.ts","../src/hook/useSystemTheme.ts","../src/constants/colors.ts","../src/hook/useThemeColors.ts","../src/providers/MainUiView.tsx","../src/providers/AnkThemeProvider.tsx"],"sourcesContent":[null,null,null,null,null,null],"names":["createContext","useState","useEffect","defaultLight","defaultDark","useContext","light","dark","_jsxs","useCallback","useMemo","_jsx"],"mappings":"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"}
+{"version":3,"file":"index.cjs","sources":["../src/contexts/AnkThemeContext.ts","../src/hook/useSystemTheme.ts","../src/constants/colors.ts","../src/hook/useThemeColors.ts","../src/providers/MainUiView.tsx","../src/providers/AnkThemeProvider.tsx"],"sourcesContent":[null,null,null,null,null,null],"names":["createContext","useState","useEffect","defaultLight","defaultDark","useContext","light","dark","_jsxs","useCallback","useMemo","_jsx"],"mappings":"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"}

package/dist/index.esm.js

@@ -8,36 +8,38 @@ const AnkThemeContext = createContext(undefined);
 const ColorContext = createContext(undefined);
 
 const useSystemTheme = () => {
-    const [sysTheme, setSysTheme] = useState(window.matchMedia('(prefers-color-scheme: dark)').matches
+    const theme = window.matchMedia('(prefers-color-scheme: dark)').matches
         ? "dark"
-        : "light");
+        : "light";
+    const [sysTheme, setSysTheme] = useState(theme);
     useEffect(() => {
         const media = window.matchMedia('(prefers-color-scheme: dark)');
         const handleChange = () => {
             setSysTheme(media.matches ? "dark" : "light");
         };
+        handleChange();
         media.addEventListener("change", handleChange);
         return () => media.removeEventListener("change", handleChange);
-    }, []);
+    }, [theme, setSysTheme]);
     return sysTheme;
 };
 
 const light = {
-    primary: '#eee',
+    primary: 'red',
     primaryColor: 'red',
+    pageBg: '#8d8d8d',
     mainBgColor: '#fff',
     backgroundColor: '#f0f0f0',
     secondryBgColor: '#808080',
-    pageBg: '#8d8d8d',
     color: '#000',
 };
 const dark = {
-    primary: '#b30303',
+    primary: 'red',
     primaryColor: 'red',
-    mainBgColor: '#009',
-    secondryBgColor: '808080',
+    mainBgColor: '#000',
     pageBg: '#333',
     backgroundColor: '#444',
+    secondryBgColor: '808080',
     color: '#eee',
 };
 
@@ -59,7 +61,7 @@ const useThemeColors = () => {
     const reLight = light$1 ?? light;
     const reDark = dark$1 ?? dark;
     const theme = context.theme || undefined;
-    const themeMode = context.themeMode || undefined;
+    const themeMode = context.themeType || undefined;
     if (theme === undefined || themeMode === undefined) {
         throw new Error(` * useThemeColors must be used within a AnkThemeProvider * \n like this - \n import  AnkThemeProvider  from '@ankjs/react-ui;
     
@@ -87,14 +89,25 @@ const useThemeColors = () => {
 };
 
 const MainUiView = (props) => {
-    const { children, autoApply, style, overflow, } = props;
-    const mainBgColor = useThemeColors();
-    return (jsxs("div", { children: [JSON.stringify(mainBgColor), children] }));
+    const { children, autoApply, style, overflow, backgroundColor, fontolor } = props;
+    const colors = useThemeColors();
+    const { mainBgColor, color } = useThemeColors();
+    const bg = autoApply ? mainBgColor : backgroundColor;
+    const text = autoApply ? color : fontolor;
+    const styleContener = {
+        backgroundColor: bg,
+        color: text,
+        height: "100dvh",
+        width: "100%",
+        overflow,
+        ...style
+    };
+    return (jsxs("div", { style: styleContener, children: [JSON.stringify(colors), children] }));
 };
 
 const AnkThemeProvider = (props) => {
     //PROPERTY 
-    const { children, colorsObjectProvide = "", colorsObject = "", defaultThemeMode = "system", autoApply = true, style = {}, overflow = 'visible', } = props;
+    const { children, colorsObjectProvide = "", colorsObject = "", defaultThemeMode = "system", autoApply = true, style = {}, overflow = 'scroll', backgroundColor = "pink", color = "black" } = props;
     // SYSTEM THEME MODE 🪝 
     // Assumed returns 'light' | 'dark'
     const system = useSystemTheme();
@@ -104,24 +117,30 @@ const AnkThemeProvider = (props) => {
     const [theme, setTheme] = useState(initialActiveTheme);
     // State for the user's selected preference
     const [themeType, setThemeType] = useState(defaultThemeMode);
+    useEffect(() => {
+        if (defaultThemeMode === 'system') {
+            setTheme(initialActiveTheme);
+            return setThemeType('system');
+        }
+    }, [defaultThemeMode, initialActiveTheme, setTheme, setThemeType]);
     const setDarkTheme = useCallback(() => {
         if (theme === 'dark')
             return;
         setThemeType('dark');
-        setTheme('dark');
+        return setTheme('dark');
     }, [theme, setThemeType, setTheme]);
     const setLightTheme = useCallback(() => {
         if (theme === 'light')
             return;
         setThemeType('light');
-        setTheme('light');
+        return setTheme('light');
     }, [theme, setThemeType, setTheme]);
     const setSystemTheme = useCallback(() => {
         if (themeType === 'system')
             return;
         setThemeType('system');
-        setTheme(system);
-    }, [theme, setTheme, system, setThemeType]);
+        return setTheme(system);
+    }, [themeType, setTheme, system, setThemeType]);
     // Memoize the context value to prevent unnecessary re-renders in consumers
     const contextValue = useMemo(() => ({
         theme,
@@ -130,13 +149,13 @@ const AnkThemeProvider = (props) => {
         setDarkTheme,
         setLightTheme,
         setSystemTheme,
-    }), [theme, setTheme, setDarkTheme, setLightTheme, setSystemTheme]);
+    }), [theme, themeType, setTheme, setDarkTheme, setLightTheme, setSystemTheme]);
     // WONER COLOUR OBJECT 
     const colorObj = useMemo(() => ({
         ...colorsObject,
         ...colorsObjectProvide,
     }), [colorsObject, colorsObjectProvide]);
-    return (jsx(AnkThemeContext.Provider, { value: contextValue, children: jsx(ColorContext.Provider, { value: colorObj, children: jsx(MainUiView, { autoApply: autoApply, style: style, overflow: overflow, children: children }) }) }));
+    return (jsx(AnkThemeContext.Provider, { value: contextValue, children: jsx(ColorContext.Provider, { value: colorObj, children: jsx(MainUiView, { autoApply: autoApply, style: style, overflow: overflow, backgroundColor: backgroundColor, fontolor: color, children: children }) }) }));
 };
 
 export { AnkThemeProvider as default };

package/dist/index.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.esm.js","sources":["../src/contexts/AnkThemeContext.ts","../src/hook/useSystemTheme.ts","../src/constants/colors.ts","../src/hook/useThemeColors.ts","../src/providers/MainUiView.tsx","../src/providers/AnkThemeProvider.tsx"],"sourcesContent":[null,null,null,null,null,null],"names":["defaultLight","defaultDark","light","dark","_jsxs","_jsx"],"mappings":"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"}
+{"version":3,"file":"index.esm.js","sources":["../src/contexts/AnkThemeContext.ts","../src/hook/useSystemTheme.ts","../src/constants/colors.ts","../src/hook/useThemeColors.ts","../src/providers/MainUiView.tsx","../src/providers/AnkThemeProvider.tsx"],"sourcesContent":[null,null,null,null,null,null],"names":["defaultLight","defaultDark","light","dark","_jsxs","_jsx"],"mappings":"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"}

package/dist/types/mainViewType.d.ts

@@ -4,4 +4,5 @@ export type MainPropsType = {
     autoApply: boolean;
     style?: CSSProperties;
     overflow?: CSSProperties['overflow'];
+    fontolor?: CSSProperties['color'];
 };

package/dist/types/themeTypes.d.ts

@@ -17,6 +17,7 @@ export type ThemeProviderProps = {
     defaultThemeMode?: 'light' | 'dark' | 'system';
     style?: CSSProperties;
     overflow?: CSSProperties['overflow'];
+    color?: CSSProperties['color'];
 };
 export type ThemeContextType = {
     theme?: 'light' | 'dark' | 'system';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ankjs/react-ui",
-  "version": "1.0.14",
+  "version": "1.0.15",
   "description": "A simple React UI Library",
   "main": "index.js",
   "module": "dist/index.esm.js",

package/src/constants/colors.ts

@@ -2,22 +2,22 @@
 
 
 export const light = {
-  primary: '#eee',
+  primary: 'red',
   primaryColor: 'red',
+  pageBg: '#8d8d8d',
   mainBgColor: '#fff',
   backgroundColor: '#f0f0f0',
   secondryBgColor: '#808080',
-  pageBg: '#8d8d8d',
   color: '#000',
 }
 
 export const dark = {
-  primary: '#b30303',
+  primary: 'red',
   primaryColor: 'red',
-  mainBgColor: '#009',
-  secondryBgColor: '808080',
+  mainBgColor: '#000',
   pageBg: '#333',
   backgroundColor: '#444',
+  secondryBgColor: '808080',
   color: '#eee',
 }
 

package/src/hook/useSystemTheme.ts

@@ -2,25 +2,27 @@ import { useEffect, useState } from "react";
 
 
 
-type Theme = "light" | "dark";
+
+
 const useSystemTheme = () => {
 
+  const theme = window.matchMedia('(prefers-color-scheme: dark)').matches
+    ? "dark"
+    : "light"
 
   const [sysTheme, setSysTheme] = useState<'light' | 'dark'>(
-    window.matchMedia('(prefers-color-scheme: dark)').matches
-      ? "dark"
-      : "light"
+    theme
   );
 
-
   useEffect(() => {
     const media = window.matchMedia('(prefers-color-scheme: dark)');
     const handleChange = () => {
       setSysTheme(media.matches ? "dark" : "light");
     };
+    handleChange();
     media.addEventListener("change", handleChange);
     return () => media.removeEventListener("change", handleChange);
-  }, []);
+  }, [theme, setSysTheme]);
 
   return sysTheme;
 };

package/src/hook/useThemeColors.ts

@@ -15,6 +15,7 @@ const defaultColorsObject = {
 const useThemeColors = (): ThemeContextType | undefined => {
   const context = useContext(AnkThemeContext);
 
+
   if (!context) {
     throw new Error(` * useThemeColors must be used within a AnkThemeProvider * \n like this - \n import  AnkThemeProvider  from '@ankjs/react-ui;
     
@@ -23,13 +24,18 @@ const useThemeColors = (): ThemeContextType | undefined => {
         </AnkThemeProvider>
     `)
   };
+
+
   const { light, dark } = useContext(ColorContext) ?? defaultColorsObject;
 
   const reLight = light ?? defaultLight;
   const reDark = dark ?? defaultDark;
 
   const theme = context.theme || undefined;
-  const themeMode = context.themeMode || undefined;
+  const themeMode = context.themeType || undefined;
+
+
+  
 
   if (theme === undefined || themeMode === undefined) {
     throw new Error(` * useThemeColors must be used within a AnkThemeProvider * \n like this - \n import  AnkThemeProvider  from '@ankjs/react-ui;

package/src/providers/AnkThemeProvider.tsx

@@ -5,7 +5,7 @@ Copyright (c) [2026] [ankjs]
 Filename: AnkThemeProvider.tsx
 */
 
-import React, { useState, useCallback, useMemo } from 'react';
+import React, { useState, useCallback, useMemo, useEffect } from 'react';
 import {
   AnkThemeContext,
   ColorContext
@@ -28,7 +28,9 @@ const AnkThemeProvider = (props: ThemeProviderProps) => {
     defaultThemeMode = "system",
     autoApply = true,
     style = {},
-    overflow = 'visible',
+    overflow = 'scroll',
+    backgroundColor = "pink",
+    color = "black"
   } = props;
 
 
@@ -48,23 +50,32 @@ const AnkThemeProvider = (props: ThemeProviderProps) => {
 
 
 
+  useEffect(() => {
+    if (defaultThemeMode === 'system') {
+      setTheme(initialActiveTheme);
+      return setThemeType('system');
+    };
+  }, [defaultThemeMode, initialActiveTheme, setTheme, setThemeType]);
+
+
+
   const setDarkTheme = useCallback(() => {
     if (theme === 'dark') return;
     setThemeType('dark');
-    setTheme('dark');
+    return setTheme('dark');
   }, [theme, setThemeType, setTheme]);
 
   const setLightTheme = useCallback(() => {
     if (theme === 'light') return;
     setThemeType('light');
-    setTheme('light');
+    return setTheme('light');
   }, [theme, setThemeType, setTheme]);
 
   const setSystemTheme = useCallback(() => {
     if (themeType === 'system') return
     setThemeType('system');
-    setTheme(system);
-  }, [theme, setTheme, system, setThemeType]);
+    return setTheme(system);
+  }, [themeType, setTheme, system, setThemeType]);
 
 
 
@@ -78,7 +89,7 @@ const AnkThemeProvider = (props: ThemeProviderProps) => {
       setLightTheme,
       setSystemTheme,
     }),
-    [theme, setTheme, setDarkTheme, setLightTheme, setSystemTheme],
+    [theme, themeType, setTheme, setDarkTheme, setLightTheme, setSystemTheme],
   );
 
 
@@ -100,7 +111,10 @@ const AnkThemeProvider = (props: ThemeProviderProps) => {
           autoApply={autoApply}
           style={style}
           overflow={overflow}
+          backgroundColor={backgroundColor}
+          fontolor={color}
         >
+
           {children}
         </MainUiView>
       </ColorContext.Provider>
@@ -108,3 +122,6 @@ const AnkThemeProvider = (props: ThemeProviderProps) => {
   )
 };
 export default AnkThemeProvider;
+
+/*
+      */

package/src/providers/MainUiView.tsx

@@ -12,16 +12,34 @@ const MainUiView = (props: MainPropsType) => {
     autoApply,
     style,
     overflow,
+    backgroundColor,
+    fontolor
   } = props;
 
-  const mainBgColor = useThemeColors();
+  const colors = useThemeColors();
+  const {
+    mainBgColor, color
+  } = useThemeColors();
+
+  const bg = autoApply ? mainBgColor : backgroundColor
+  const text = autoApply ? color: fontolor ;
+
+  const styleContener = {
+    backgroundColor: bg,
+    color: text,
+    height: "100dvh",
+    width: "100%",
+    overflow,
+    ...style
+  }
 
 
   return (
     <div
+      style={styleContener}
     >
       {
-        JSON.stringify(mainBgColor)
+        JSON.stringify(colors)
       }
       {children}
     </div>

package/src/types/mainViewType.ts

@@ -9,5 +9,6 @@ export type MainPropsType = {
   children: ReactNode,
   autoApply: boolean,
   style?: CSSProperties,
-  overflow?: CSSProperties['overflow']
+  overflow?: CSSProperties['overflow'],
+  fontolor?: CSSProperties['color']
 }

package/src/types/themeTypes.ts

@@ -20,6 +20,7 @@ export type ThemeProviderProps = {
   defaultThemeMode?: 'light' | 'dark' | 'system',
   style?: CSSProperties,
   overflow?: CSSProperties['overflow']
+  color?: CSSProperties['color']
 }
 
 export type ThemeContextType = {