@ankjs/react-ui 1.0.13 → 1.0.14

package/dist/index.cjs

@@ -26,10 +26,79 @@ const useSystemTheme = () => {
     return sysTheme;
 };
 
-//import MainUiView from './MainUiView';
+const light = {
+    primary: '#eee',
+    primaryColor: 'red',
+    mainBgColor: '#fff',
+    backgroundColor: '#f0f0f0',
+    secondryBgColor: '#808080',
+    pageBg: '#8d8d8d',
+    color: '#000',
+};
+const dark = {
+    primary: '#b30303',
+    primaryColor: 'red',
+    mainBgColor: '#009',
+    secondryBgColor: '808080',
+    pageBg: '#333',
+    backgroundColor: '#444',
+    color: '#eee',
+};
+
+const defaultColorsObject = {
+    light: light,
+    dark: dark,
+};
+const useThemeColors = () => {
+    const context = react.useContext(AnkThemeContext);
+    if (!context) {
+        throw new Error(` * useThemeColors must be used within a AnkThemeProvider * \n like this - \n import  AnkThemeProvider  from '@ankjs/react-ui;
+    
+        <AnkThemeProvider>
+         <App />
+        </AnkThemeProvider>
+    `);
+    }
+    const { light: light$1, dark: dark$1 } = react.useContext(ColorContext) ?? defaultColorsObject;
+    const reLight = light$1 ?? light;
+    const reDark = dark$1 ?? dark;
+    const theme = context.theme || undefined;
+    const themeMode = context.themeMode || 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;
+    
+        <AnkThemeProvider>
+         <App />
+        </AnkThemeProvider>
+    `);
+    }
+    else if (context.theme === "light") {
+        return {
+            ...reLight,
+            themeMode,
+        };
+    }
+    else if (context.theme === "dark") {
+        return {
+            ...reDark,
+            themeMode,
+        };
+    }
+    return {
+        ...reLight,
+        themeMode: "light"
+    };
+};
+
+const MainUiView = (props) => {
+    const { children, autoApply, style, overflow, } = props;
+    const mainBgColor = useThemeColors();
+    return (jsxRuntime.jsxs("div", { children: [JSON.stringify(mainBgColor), children] }));
+};
+
 const AnkThemeProvider = (props) => {
     //PROPERTY 
-    const { children, colorsObjectProvide = "", colorsObject = "", defaultThemeMode = "system", style = {} } = props;
+    const { children, colorsObjectProvide = "", colorsObject = "", defaultThemeMode = "system", autoApply = true, style = {}, overflow = 'visible', } = props;
     // SYSTEM THEME MODE 🪝 
     // Assumed returns 'light' | 'dark'
     const system = useSystemTheme();
@@ -71,7 +140,7 @@ const AnkThemeProvider = (props) => {
         ...colorsObject,
         ...colorsObjectProvide,
     }), [colorsObject, colorsObjectProvide]);
-    return (jsxRuntime.jsx(AnkThemeContext.Provider, { value: contextValue, children: jsxRuntime.jsx(ColorContext.Provider, { value: colorObj, 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, 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/providers/AnkThemeProvider.tsx"],"sourcesContent":[null,null,null],"names":["createContext","useState","useEffect","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

@@ -1,5 +1,5 @@
-import { jsx } from 'react/jsx-runtime';
-import { createContext, useState, useEffect, useCallback, useMemo } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { createContext, useState, useEffect, useContext, useCallback, useMemo } from 'react';
 
 /**
  * Copyright (c) [2026] [ankjs]
@@ -22,10 +22,79 @@ const useSystemTheme = () => {
     return sysTheme;
 };
 
-//import MainUiView from './MainUiView';
+const light = {
+    primary: '#eee',
+    primaryColor: 'red',
+    mainBgColor: '#fff',
+    backgroundColor: '#f0f0f0',
+    secondryBgColor: '#808080',
+    pageBg: '#8d8d8d',
+    color: '#000',
+};
+const dark = {
+    primary: '#b30303',
+    primaryColor: 'red',
+    mainBgColor: '#009',
+    secondryBgColor: '808080',
+    pageBg: '#333',
+    backgroundColor: '#444',
+    color: '#eee',
+};
+
+const defaultColorsObject = {
+    light: light,
+    dark: dark,
+};
+const useThemeColors = () => {
+    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;
+    
+        <AnkThemeProvider>
+         <App />
+        </AnkThemeProvider>
+    `);
+    }
+    const { light: light$1, dark: dark$1 } = useContext(ColorContext) ?? defaultColorsObject;
+    const reLight = light$1 ?? light;
+    const reDark = dark$1 ?? dark;
+    const theme = context.theme || undefined;
+    const themeMode = context.themeMode || 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;
+    
+        <AnkThemeProvider>
+         <App />
+        </AnkThemeProvider>
+    `);
+    }
+    else if (context.theme === "light") {
+        return {
+            ...reLight,
+            themeMode,
+        };
+    }
+    else if (context.theme === "dark") {
+        return {
+            ...reDark,
+            themeMode,
+        };
+    }
+    return {
+        ...reLight,
+        themeMode: "light"
+    };
+};
+
+const MainUiView = (props) => {
+    const { children, autoApply, style, overflow, } = props;
+    const mainBgColor = useThemeColors();
+    return (jsxs("div", { children: [JSON.stringify(mainBgColor), children] }));
+};
+
 const AnkThemeProvider = (props) => {
     //PROPERTY 
-    const { children, colorsObjectProvide = "", colorsObject = "", defaultThemeMode = "system", style = {} } = props;
+    const { children, colorsObjectProvide = "", colorsObject = "", defaultThemeMode = "system", autoApply = true, style = {}, overflow = 'visible', } = props;
     // SYSTEM THEME MODE 🪝 
     // Assumed returns 'light' | 'dark'
     const system = useSystemTheme();
@@ -67,7 +136,7 @@ const AnkThemeProvider = (props) => {
         ...colorsObject,
         ...colorsObjectProvide,
     }), [colorsObject, colorsObjectProvide]);
-    return (jsx(AnkThemeContext.Provider, { value: contextValue, children: jsx(ColorContext.Provider, { value: colorObj, children: children }) }));
+    return (jsx(AnkThemeContext.Provider, { value: contextValue, children: jsx(ColorContext.Provider, { value: colorObj, children: jsx(MainUiView, { autoApply: autoApply, style: style, overflow: overflow, 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/providers/AnkThemeProvider.tsx"],"sourcesContent":[null,null,null],"names":["_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/providers/MainUiView.d.ts

@@ -0,0 +1,3 @@
+import type { MainPropsType } from '../types/mainViewType';
+declare const MainUiView: (props: MainPropsType) => import("react/jsx-runtime").JSX.Element;
+export default MainUiView;

package/dist/types/mainViewType.d.ts

@@ -0,0 +1,7 @@
+import { CSSProperties, ReactNode } from 'react';
+export type MainPropsType = {
+    children: ReactNode;
+    autoApply: boolean;
+    style?: CSSProperties;
+    overflow?: CSSProperties['overflow'];
+};

package/dist/types/themeTypes.d.ts

@@ -10,11 +10,13 @@ export interface ThemeHookReturn extends ColorPalette {
     themeMode: ThemeModeType | undefined;
 }
 export type ThemeProviderProps = {
+    children: ReactNode;
     colorsObjectProvide?: any;
     colorsObject?: any;
+    autoApply?: boolean;
     defaultThemeMode?: 'light' | 'dark' | 'system';
     style?: CSSProperties;
-    children: ReactNode;
+    overflow?: CSSProperties['overflow'];
 };
 export type ThemeContextType = {
     theme?: 'light' | 'dark' | 'system';

package/package.json

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

package/src/providers/AnkThemeProvider.tsx

@@ -12,7 +12,7 @@ import {
 } from '../contexts/AnkThemeContext';
 import type { ThemeProviderProps } from '../types/themeTypes';
 import useSystemTheme from '../hook/useSystemTheme';
-//import MainUiView from './MainUiView';
+import MainUiView from './MainUiView';
 
 
 
@@ -26,7 +26,9 @@ const AnkThemeProvider = (props: ThemeProviderProps) => {
     colorsObjectProvide = "",
     colorsObject = "",
     defaultThemeMode = "system",
-    style = {}
+    autoApply = true,
+    style = {},
+    overflow = 'visible',
   } = props;
 
 
@@ -72,8 +74,6 @@ const AnkThemeProvider = (props: ThemeProviderProps) => {
       theme,
       themeType,
       setTheme,
-      
-      
       setDarkTheme,
       setLightTheme,
       setSystemTheme,
@@ -96,84 +96,15 @@ const AnkThemeProvider = (props: ThemeProviderProps) => {
       <ColorContext.Provider
         value={colorObj}
       >
-        {children}
+        <MainUiView
+          autoApply={autoApply}
+          style={style}
+          overflow={overflow}
+        >
+          {children}
+        </MainUiView>
       </ColorContext.Provider>
     </AnkThemeContext.Provider>
   )
 };
 export default AnkThemeProvider;
-
-/*
-
-import React, { useState, useCallback, useMemo, ReactNode } from 'react';
-
-interface ThemeProviderProps {
-  children: ReactNode; // Fixes the "Type {} is not assignable to ReactNode" error
-  colorsObjectProvide?: any;
-  colorsObject?: any;
-  defaultThemeMode?: 'light' | 'dark' | 'system';
-  style?: React.CSSProperties;
-}
-
-const AnkThemeProvider = (props: ThemeProviderProps) => {
-  const {
-    children,
-    colorsObjectProvide = {},
-    colorsObject = {},
-    defaultThemeMode = "system",
-  } = props;
-
-  const system = useSystemTheme(); // Assumed returns 'light' | 'dark'
-
-  // Determine initial active theme
-  const initialActiveTheme = defaultThemeMode === "system" ? system : defaultThemeMode;
-
-  // State for the active visual mode
-  const [theme, setTheme] = useState<'light' | 'dark'>(initialActiveTheme as 'light' | 'dark');
-  
-  // State for the user's selected preference
-  const [themeType, setType] = useState<'light' | 'dark' | 'system'>(defaultThemeMode);
-
-  const setDarkTheme = useCallback(() => {
-    setTheme('dark');
-    setType('dark');
-  }, []);
-
-  const setLightTheme = useCallback(() => {
-    setTheme('light');
-    setType('light');
-  }, []);
-
-  const setSystemTheme = useCallback(() => {
-    setType('system');
-    setTheme(system);
-  }, [system]);
-
-
-
-  const contextValue = useMemo(
-    () => ({
-      theme,
-      themeType,
-      setTheme,
-      setDarkTheme,
-      setLightTheme,
-      setSystemTheme,
-    }),
-    [theme, themeType, setTheme, setDarkTheme, setLightTheme, setSystemTheme],
-  );
-
-  const colorObj = useMemo(() => ({
-    ...colorsObject,
-    ...colorsObjectProvide,
-  }), [colorsObject, colorsObjectProvide]);
-
-  return (
-    <AnkThemeContext.Provider value={contextValue}>
-      <ColorContext.Provider value={colorObj}>
-        {children}
-      </ColorContext.Provider>
-    </AnkThemeContext.Provider>
-  );
-};
-*/

package/src/providers/MainUiView.tsx

@@ -0,0 +1,30 @@
+import useThemeColors from '../hook/useThemeColors';
+import type { MainPropsType } from '../types/mainViewType';
+
+
+
+
+
+
+const MainUiView = (props: MainPropsType) => {
+  const {
+    children,
+    autoApply,
+    style,
+    overflow,
+  } = props;
+
+  const mainBgColor = useThemeColors();
+
+
+  return (
+    <div
+    >
+      {
+        JSON.stringify(mainBgColor)
+      }
+      {children}
+    </div>
+  )
+};
+export default MainUiView;

package/src/types/mainViewType.ts

@@ -0,0 +1,13 @@
+
+
+
+
+import React, { CSSProperties, ReactNode } from 'react'
+
+
+export type MainPropsType = {
+  children: ReactNode,
+  autoApply: boolean,
+  style?: CSSProperties,
+  overflow?: CSSProperties['overflow']
+}

package/src/types/themeTypes.ts

@@ -13,11 +13,13 @@ export interface ThemeHookReturn extends ColorPalette {
 }
 
 export type ThemeProviderProps = {
+  children: ReactNode; // Fixes the "Type {} is not assignable to ReactNode" error
   colorsObjectProvide?: any,
   colorsObject?: any,
+  autoApply?: boolean,
   defaultThemeMode?: 'light' | 'dark' | 'system',
   style?: CSSProperties,
-  children: ReactNode; // Fixes the "Type {} is not assignable to ReactNode" error
+  overflow?: CSSProperties['overflow']
 }
 
 export type ThemeContextType = {

package/src/providers/MainUiView.jsx

@@ -1,33 +0,0 @@
-
-import useThemeColors from '../hook/useThemeColors'
-
-
-
-
-export default function MainUiView(props) {
-  const {
-    children,
-    autoColorApply,
-    colorObject,
-    style,
-    others,
-  } = props;
-
-  const colors = useThemeColors();
-
-
-  const styleContener = {
-    ...style
-  };
-
-  return (
-    <div
-      style={styleContener}
-    >
-      {
-        JSON.stringify(colors)
-      }
-      {children}
-    </div>
-  )
-};