@ahmadinia/ui-kit 1.0.0

package/dist/components/RayButton.d.ts

@@ -0,0 +1,2 @@
+import { ButtonProps } from '@mui/material';
+export declare function RayButton(props: ButtonProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/RayButton.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Button } from '@mui/material';
+export function RayButton(props) {
+    return _jsx(Button, { ...props });
+}

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./theme/theme";
+export * from "./theme/themeModeContext";
+export * from "./components/RayButton";

package/dist/index.js

@@ -0,0 +1,3 @@
+export * from "./theme/theme";
+export * from "./theme/themeModeContext";
+export * from "./components/RayButton";

package/dist/theme/componentOverrides.d.ts

@@ -0,0 +1,2 @@
+import { Components } from "@mui/material/styles";
+export declare const componentOverrides: Components;

package/dist/theme/componentOverrides.js

@@ -0,0 +1,19 @@
+export const componentOverrides = {
+    MuiButton: {
+        defaultProps: {
+            size: "small",
+            variant: "contained"
+        }
+    },
+    MuiTextField: {
+        defaultProps: {
+            size: "small",
+            fullWidth: true
+        }
+    },
+    MuiSvgIcon: {
+        defaultProps: {
+            fontSize: "small"
+        }
+    }
+};

package/dist/theme/palette.d.ts

@@ -0,0 +1,2 @@
+import { PaletteOptions } from "@mui/material/styles";
+export declare const palette: PaletteOptions;

package/dist/theme/palette.js

@@ -0,0 +1,23 @@
+export const palette = {
+    primary: {
+        main: "#067af5",
+        light: "#388af7",
+        dark: "#04356d",
+        contrastText: "#fff",
+    },
+    secondary: {
+        main: "#9c27b0",
+        light: "#d05ce3",
+        dark: "#6a0080",
+        contrastText: "#fff"
+    },
+    success: {
+        main: "#95e7a7",
+        light: "#0af31d",
+        dark: "#046d5f",
+        contrastText: "#fff",
+    },
+    background: {
+        default: undefined
+    },
+};

package/dist/theme/theme.d.ts

@@ -0,0 +1 @@
+export declare const appTheme: import("@mui/material/styles").Theme;

package/dist/theme/theme.js

@@ -0,0 +1,9 @@
+import { createTheme } from "@mui/material/styles";
+import { palette } from "./palette";
+import { typography } from "./typography";
+import { componentOverrides } from "./componentOverrides";
+export const appTheme = createTheme({
+    palette,
+    typography,
+    components: componentOverrides
+});

package/dist/theme/themeModeContext.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+import { Theme } from "@mui/material/styles";
+type ThemeMode = "light" | "dark";
+interface ThemeModeContextValue {
+    mode: ThemeMode;
+    setMode: (mode: ThemeMode) => void;
+    toggleMode: () => void;
+    theme: Theme;
+}
+export declare const ThemeModeProvider: React.FC<{
+    children: React.ReactNode;
+}>;
+export declare const useThemeMode: () => ThemeModeContextValue;
+export {};

package/dist/theme/themeModeContext.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, useContext, useMemo, useState } from "react";
+import { ThemeProvider, createTheme } from "@mui/material/styles";
+import { appTheme } from "./theme";
+import { CssBaseline } from "@mui/material";
+const ThemeModeContext = createContext(undefined);
+export const ThemeModeProvider = ({ children }) => {
+    const [mode, setMode] = useState("light");
+    const lightPalette = {
+        ...appTheme.palette,
+        background: {
+            default: "#f5f7fa"
+        }
+    };
+    const darkPalette = {
+        ...appTheme.palette,
+        background: {
+            default: "#1d293f"
+        }
+    };
+    const theme = useMemo(() => createTheme({
+        ...appTheme,
+        palette: {
+            ...(mode === "light" ? lightPalette : darkPalette),
+            mode
+        }
+    }), [mode]);
+    const toggleMode = () => setMode((prev) => (prev === "light" ? "dark" : "light"));
+    const value = {
+        mode,
+        setMode,
+        toggleMode,
+        theme
+    };
+    return (_jsx(ThemeModeContext.Provider, { value: value, children: _jsxs(ThemeProvider, { theme: theme, children: [_jsx(CssBaseline, {}), children] }) }));
+};
+export const useThemeMode = () => {
+    const ctx = useContext(ThemeModeContext);
+    if (!ctx) {
+        throw new Error("useThemeMode must be used within ThemeModeProvider");
+    }
+    return ctx;
+};

package/dist/theme/typography.d.ts

@@ -0,0 +1,2 @@
+import { TypographyVariantsOptions } from "@mui/material";
+export declare const typography: TypographyVariantsOptions;

package/dist/theme/typography.js

@@ -0,0 +1,8 @@
+export const typography = {
+    fontFamily: "'Inter', sans-serif",
+    h1: { fontSize: "2rem", fontWeight: 700 },
+    h2: { fontSize: "1.75rem", fontWeight: 700 },
+    h3: { fontSize: "1.5rem", fontWeight: 700 },
+    body1: { fontSize: "1rem" },
+    body2: { fontSize: "0.875rem" }
+};

package/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "@ahmadinia/ui-kit",
+  "version": "1.0.0",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "build": "npx tsc -p tsconfig.json"
+  },
+  "peerDependencies": {
+    "react": "^19",
+    "react-dom": "^19",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "@mui/icons-material": "^7",
+    "@mui/material": "^7",
+    "@mui/x-data-grid": "^8",
+    "@mui/x-data-grid-premium": "^8"
+  },
+  "devDependencies": {
+    "typescript": "~5.9.3"
+  }
+}

package/src/components/RayButton.tsx

@@ -0,0 +1,6 @@
+import { Button, ButtonProps } from '@mui/material';
+
+export function RayButton(props: ButtonProps) {
+
+  return <Button  {...props} />;
+}

package/src/index.ts

@@ -0,0 +1,3 @@
+export * from "./theme/theme";
+export * from "./theme/themeModeContext";
+export * from "./components/RayButton";

package/src/theme/componentOverrides.ts

@@ -0,0 +1,21 @@
+import { Components } from "@mui/material/styles";
+
+export const componentOverrides: Components = {
+  MuiButton: {
+    defaultProps: {
+      size: "small",
+      variant: "contained"
+    }
+  },
+  MuiTextField: {
+    defaultProps: {
+      size: "small",
+      fullWidth: true
+    }
+  },
+  MuiSvgIcon:{
+    defaultProps: {
+      fontSize: "small"
+    }
+  }
+};

package/src/theme/palette.ts

@@ -0,0 +1,25 @@
+import { PaletteOptions } from "@mui/material/styles";
+
+export const palette: PaletteOptions = {
+  primary: {
+    main: "#067af5",
+    light: "#388af7",
+    dark: "#04356d",
+    contrastText: "#fff",
+  },
+  secondary: {
+    main: "#9c27b0",
+    light: "#d05ce3",
+    dark: "#6a0080",
+    contrastText: "#fff"
+  },
+  success: {
+    main: "#95e7a7",
+    light: "#0af31d",
+    dark: "#046d5f",
+    contrastText: "#fff",
+  },
+  background: {
+    default: undefined
+  },
+};

package/src/theme/theme.ts

@@ -0,0 +1,10 @@
+import { createTheme } from "@mui/material/styles";
+import { palette } from "./palette";
+import { typography } from "./typography";
+import { componentOverrides } from "./componentOverrides";
+
+export const appTheme = createTheme({
+  palette,
+  typography,
+  components: componentOverrides
+});

package/src/theme/themeModeContext.tsx

@@ -0,0 +1,77 @@
+import React, { createContext, useContext, useMemo, useState } from "react";
+import { ThemeProvider, createTheme, Theme } from "@mui/material/styles";
+import { appTheme } from "./theme";
+import { CssBaseline } from "@mui/material";
+
+type ThemeMode = "light" | "dark";
+
+interface ThemeModeContextValue {
+    mode: ThemeMode;
+    setMode: (mode: ThemeMode) => void;
+    toggleMode: () => void;
+    theme: Theme;
+}
+
+
+const ThemeModeContext = createContext<ThemeModeContextValue | undefined>(
+    undefined
+);
+
+export const ThemeModeProvider: React.FC<{ children: React.ReactNode }> = ({
+    children
+}) => {
+    const [mode, setMode] = useState<ThemeMode>("light");
+    const lightPalette = {
+        ...appTheme.palette,
+        background: {
+            default: "#f5f7fa"
+        }
+    };
+
+    const darkPalette = {
+        ...appTheme.palette,
+        background: {
+            default: "#1d293f"
+        }
+    };
+    const theme = useMemo(
+        () =>
+            createTheme({
+                ...appTheme,
+                palette: {
+                    ...(mode === "light" ? lightPalette : darkPalette),
+                    mode
+                }
+            }),
+        [mode]
+    );
+
+    const toggleMode = () =>
+        setMode((prev) => (prev === "light" ? "dark" : "light"));
+
+    const value: ThemeModeContextValue = {
+        mode,
+        setMode,
+        toggleMode,
+        theme
+    };
+    
+    return (
+        <ThemeModeContext.Provider value={value}>
+            <ThemeProvider theme={theme}>
+                <CssBaseline />
+                {children}
+            </ThemeProvider>
+        </ThemeModeContext.Provider>
+    );
+};
+
+
+export const useThemeMode = (): ThemeModeContextValue => {
+
+    const ctx = useContext(ThemeModeContext);
+    if (!ctx) {
+        throw new Error("useThemeMode must be used within ThemeModeProvider");
+    }
+    return ctx;
+};

package/src/theme/typography.ts

@@ -0,0 +1,10 @@
+import { TypographyVariantsOptions } from "@mui/material";
+
+export const typography: TypographyVariantsOptions = {
+  fontFamily: "'Inter', sans-serif",
+  h1: { fontSize: "2rem", fontWeight: 700 },
+  h2: { fontSize: "1.75rem", fontWeight: 700 },
+  h3: { fontSize: "1.5rem", fontWeight: 700 },
+  body1: { fontSize: "1rem" },
+  body2: { fontSize: "0.875rem" }
+};

package/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+	"target": "ES2022",
+    "module": "ESNext",
+    "lib": ["DOM", "ES2022"],
+    "jsx": "react-jsx",
+    "strict": true,
+    "moduleResolution": "Node",
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "skipLibCheck": true,
+    "outDir": "dist",
+    "declaration": true
+  },
+  "include": ["src"]
+}