pixelize-design-library 1.0.21 → 1.0.23

package/src/Theme/Dark/theme.ts

@@ -1,278 +0,0 @@
-import { extendTheme } from "@chakra-ui/react";
-import { mode } from "@chakra-ui/theme-tools";
-
-const space = {
-    px: "1px",
-    0: "0",
-    1: "0.25rem", // 4px
-    2: "0.5rem",  // 8px
-    3: "0.75rem", // 12px
-    4: "1rem",    // 16px
-    5: "1.25rem", // 20px
-    6: "1.5rem",  // 24px
-    7: "1.75rem", // 28px
-    8: "2rem",    // 32px
-    9: "2.25rem", // 36px
-    10: "2.5rem", // 40px
-    12: "3rem",   // 48px
-    14: "3.5rem", // 56px
-    16: "4rem",   // 64px
-    20: "5rem",   // 80px
-    24: "6rem",   // 96px
-    28: "7rem",   // 112px
-    32: "8rem",   // 128px
-    36: "9rem",   // 144px
-    40: "10rem",  // 160px
-    44: "11rem",  // 176px
-    48: "12rem",  // 192px
-    52: "13rem",  // 208px
-    56: "14rem",  // 224px
-    60: "15rem",  // 240px
-    64: "16rem",  // 256px
-    72: "18rem",  // 288px
-    80: "20rem",  // 320px
-    96: "24rem",  // 384px
-};
-
-const darkTheme = extendTheme({
-    initialColorMode: "dark",
-    useSystemColorMode: false,
-    styles: {
-        global: (props: any) => ({
-            body: {
-                bg: mode("gray.100", "gray.900")(props),
-                color: mode("gray.800", "whiteAlpha.900")(props),
-            },
-        }),
-    },
-    colors: {
-        transparent: "transparent",
-        black: "#000",
-        white: "#fff",
-        gray: {
-            50: "#f7fafc",
-            100: "#edf2f7",
-            200: "#e2e8f0",
-            300: "#cbd5e0",
-            400: "#a0aec0",
-            500: "#718096",
-            600: "#4a5568",
-            700: "#2d3748",
-            800: "#1a202c",
-            900: "#171923",
-        },
-        red: {
-            50: "#fff5f5",
-            100: "#fed7d7",
-            200: "#feb2b2",
-            300: "#fc8181",
-            400: "#f56565",
-            500: "#e53e3e",
-            600: "#c53030",
-            700: "#9b2c2c",
-            800: "#822727",
-            900: "#63171b",
-        },
-        orange: {
-            50: "#fffaf0",
-            100: "#feebc8",
-            200: "#fbd38d",
-            300: "#f6ad55",
-            400: "#ed8936",
-            500: "#dd6b20",
-            600: "#c05621",
-            700: "#9c4221",
-            800: "#7b341e",
-            900: "#652b19",
-        },
-        yellow: {
-            50: "#fffff0",
-            100: "#fefcbf",
-            200: "#faf089",
-            300: "#f6e05e",
-            400: "#ecc94b",
-            500: "#d69e2e",
-            600: "#b7791f",
-            700: "#975a16",
-            800: "#744210",
-            900: "#5f370e",
-        },
-        green: {
-            50: "#f0fff4",
-            100: "#c6f6d5",
-            200: "#9ae6b4",
-            300: "#68d391",
-            400: "#48bb78",
-            500: "#38a169",
-            600: "#2f855a",
-            700: "#276749",
-            800: "#22543d",
-            900: "#1c4532",
-        },
-        teal: {
-            50: "#e6fffa",
-            100: "#b2f5ea",
-            200: "#81e6d9",
-            300: "#4fd1c5",
-            400: "#38b2ac",
-            500: "#319795",
-            600: "#2c7a7b",
-            700: "#285e61",
-            800: "#234e52",
-            900: "#1d4044",
-        },
-        blue: {
-            50: "#ebf8ff",
-            100: "#bee3f8",
-            200: "#90cdf4",
-            300: "#63b3ed",
-            400: "#4299e1",
-            500: "#3182ce",
-            600: "#2b6cb0",
-            700: "#2c5282",
-            800: "#2a4365",
-            900: "#1a365d",
-        },
-        cyan: {
-            50: "#edfdfd",
-            100: "#c4f1f9",
-            200: "#9decf9",
-            300: "#76e4f7",
-            400: "#0bc5ea",
-            500: "#00b5d8",
-            600: "#00a3c4",
-            700: "#0987a0",
-            800: "#086f83",
-            900: "#065666",
-        },
-        purple: {
-            50: "#faf5ff",
-            100: "#e9d8fd",
-            200: "#d6bcfa",
-            300: "#b794f4",
-            400: "#9f7aea",
-            500: "#805ad5",
-            600: "#6b46c1",
-            700: "#553c9a",
-            800: "#44337a",
-            900: "#322659",
-        },
-        pink: {
-            50: "#fff5f7",
-            100: "#fed7e2",
-            200: "#fbb6ce",
-            300: "#f687b3",
-            400: "#ed64a6",
-            500: "#d53f8c",
-            600: "#b83280",
-            700: "#97266d",
-            800: "#702459",
-            900: "#521b41",
-        },
-    },
-    space: {
-        px: "1px",
-        0: "0",
-        1: "0.25rem", // 4px
-        2: "0.5rem",  // 8px
-        3: "0.75rem", // 12px
-        4: "1rem",    // 16px
-        5: "1.25rem", // 20px
-        6: "1.5rem",  // 24px
-        7: "1.75rem", // 28px
-        8: "2rem",    // 32px
-        9: "2.25rem", // 36px
-        10: "2.5rem", // 40px
-        12: "3rem",   // 48px
-        14: "3.5rem", // 56px
-        16: "4rem",   // 64px
-        20: "5rem",   // 80px
-        24: "6rem",   // 96px
-        28: "7rem",   // 112px
-        32: "8rem",   // 128px
-        36: "9rem",   // 144px
-        40: "10rem",  // 160px
-        44: "11rem",  // 176px
-        48: "12rem",  // 192px
-        52: "13rem",  // 208px
-        56: "14rem",  // 224px
-        60: "15rem",  // 240px
-        64: "16rem",  // 256px
-        72: "18rem",  // 288px
-        80: "20rem",  // 320px
-        96: "24rem",  // 384px
-    },
-    sizes: {
-        ...space,
-        full: "100%",
-        screenW: "100vw",
-        screenH: "100vh",
-    },
-    fonts: {
-        heading: "'Roboto', sans-serif",
-        body: "'Open Sans', sans-serif",
-    },
-    fontSizes: {
-        xs: "0.75rem",
-        sm: "0.875rem",
-        md: "1rem",
-        lg: "1.125rem",
-        xl: "1.25rem",
-        "2xl": "1.5rem",
-        "3xl": "1.875rem",
-        "4xl": "2.25rem",
-        "5xl": "3rem",
-        "6xl": "3.75rem",
-        "7xl": "4.5rem",
-        "8xl": "6rem",
-        "9xl": "8rem",
-    },
-    breakpoints: {
-        sm: "30em",
-        md: "48em",
-        lg: "62em",
-        xl: "80em",
-        "2xl": "96em",
-    },
-    shadows: {
-        xs: "0 0 0 1px rgba(0, 0, 0, 0.05)",
-        sm: "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
-        base: "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)",
-        md: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
-        lg: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",
-        xl: "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)",
-        "2xl": "0 25px 50px -12px rgba(0, 0, 0, 0.25)",
-        outline: "0 0 0 3px rgba(66, 153, 225, 0.6)",
-        inner: "inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)",
-        none: "none",
-        "dark-lg": "rgba(0, 0, 0, 0.25) 0px 10px 15px -3px, rgba(0, 0, 0, 0.1) 0px 4px 6px -2px",
-    },
-    radii: {
-        none: "0",
-        sm: "0.125rem",
-        base: "0.25rem",
-        md: "0.375rem",
-        lg: "0.5rem",
-        xl: "0.75rem",
-        "2xl": "1rem",
-        "3xl": "1.5rem",
-        full: "9999px",
-    },
-    zIndices: {
-        hide: -1,
-        auto: "auto",
-        base: 0,
-        docked: 10,
-        dropdown: 1000,
-        sticky: 1100,
-        banner: 1200,
-        overlay: 1300,
-        modal: 1400,
-        popover: 1500,
-        skipLink: 1600,
-        toast: 1700,
-        tooltip: 1800,
-    },
-});
-
-export default darkTheme;

package/src/Theme/Default/theme.ts

@@ -1,301 +0,0 @@
-import { extendTheme } from "@chakra-ui/react";
-
-const space = {
-    px: "1px",
-    0: "0",
-    1: "0.25rem", // 4px
-    2: "0.5rem",  // 8px
-    3: "0.75rem", // 12px
-    4: "1rem",    // 16px
-    5: "1.25rem", // 20px
-    6: "1.5rem",  // 24px
-    7: "1.75rem", // 28px
-    8: "2rem",    // 32px
-    9: "2.25rem", // 36px
-    10: "2.5rem", // 40px
-    12: "3rem",   // 48px
-    14: "3.5rem", // 56px
-    16: "4rem",   // 64px
-    20: "5rem",   // 80px
-    24: "6rem",   // 96px
-    28: "7rem",   // 112px
-    32: "8rem",   // 128px
-    36: "9rem",   // 144px
-    40: "10rem",  // 160px
-    44: "11rem",  // 176px
-    48: "12rem",  // 192px
-    52: "13rem",  // 208px
-    56: "14rem",  // 224px
-    60: "15rem",  // 240px
-    64: "16rem",  // 256px
-    72: "18rem",  // 288px
-    80: "20rem",  // 320px
-    96: "24rem",  // 384px
-};
-
-const theme = extendTheme({
-    colors: {
-        transparent: "transparent",
-        black: "#000",
-        white: "#fff",
-        gray: {
-            50: "#f7fafc",
-            100: "#edf2f7",
-            200: "#e2e8f0",
-            300: "#cbd5e0",
-            400: "#a0aec0",
-            500: "#718096",
-            600: "#4a5568",
-            700: "#2d3748",
-            800: "#1a202c",
-            900: "#171923",
-        },
-        red: {
-            50: "#fff5f5",
-            100: "#fed7d7",
-            200: "#feb2b2",
-            300: "#fc8181",
-            400: "#f56565",
-            500: "#e53e3e",
-            600: "#c53030",
-            700: "#9b2c2c",
-            800: "#822727",
-            900: "#63171b",
-        },
-        orange: {
-            50: "#fffaf0",
-            100: "#feebc8",
-            200: "#fbd38d",
-            300: "#f6ad55",
-            400: "#ed8936",
-            500: "#dd6b20",
-            600: "#c05621",
-            700: "#9c4221",
-            800: "#7b341e",
-            900: "#652b19",
-        },
-        yellow: {
-            50: "#fffff0",
-            100: "#fefcbf",
-            200: "#faf089",
-            300: "#f6e05e",
-            400: "#ecc94b",
-            500: "#d69e2e",
-            600: "#b7791f",
-            700: "#975a16",
-            800: "#744210",
-            900: "#5f370e",
-        },
-        green: {
-            50: "#f0fff4",
-            100: "#c6f6d5",
-            200: "#9ae6b4",
-            300: "#68d391",
-            400: "#48bb78",
-            500: "#38a169",
-            600: "#2f855a",
-            700: "#276749",
-            800: "#22543d",
-            900: "#1c4532",
-        },
-        teal: {
-            50: "#e6fffa",
-            100: "#b2f5ea",
-            200: "#81e6d9",
-            300: "#4fd1c5",
-            400: "#38b2ac",
-            500: "#319795",
-            600: "#2c7a7b",
-            700: "#285e61",
-            800: "#234e52",
-            900: "#1d4044",
-        },
-        blue: {
-            50: "#ebf8ff",
-            100: "#bee3f8",
-            200: "#90cdf4",
-            300: "#63b3ed",
-            400: "#4299e1",
-            500: "#3182ce",
-            600: "#2b6cb0",
-            700: "#2c5282",
-            800: "#2a4365",
-            900: "#1a365d",
-        },
-        cyan: {
-            50: "#edfdfd",
-            100: "#c4f1f9",
-            200: "#9decf9",
-            300: "#76e4f7",
-            400: "#0bc5ea",
-            500: "#00b5d8",
-            600: "#00a3c4",
-            700: "#0987a0",
-            800: "#086f83",
-            900: "#065666",
-        },
-        purple: {
-            50: "#faf5ff",
-            100: "#e9d8fd",
-            200: "#d6bcfa",
-            300: "#b794f4",
-            400: "#9f7aea",
-            500: "#805ad5",
-            600: "#6b46c1",
-            700: "#553c9a",
-            800: "#44337a",
-            900: "#322659",
-        },
-        pink: {
-            50: "#fff5f7",
-            100: "#fed7e2",
-            200: "#fbb6ce",
-            300: "#f687b3",
-            400: "#ed64a6",
-            500: "#d53f8c",
-            600: "#b83280",
-            700: "#97266d",
-            800: "#702459",
-            900: "#521b41",
-        },
-    },
-    fonts: {
-        body: "system-ui, sans-serif",
-        heading: "Georgia, serif",
-        mono: "Menlo, monospace",
-    },
-    fontSizes: {
-        xs: "0.75rem",
-        sm: "0.875rem",
-        md: "1rem",
-        lg: "1.125rem",
-        xl: "1.25rem",
-        "2xl": "1.5rem",
-        "3xl": "1.875rem",
-        "4xl": "2.25rem",
-        "5xl": "3rem",
-        "6xl": "3.75rem",
-        "7xl": "4.5rem",
-        "8xl": "6rem",
-        "9xl": "8rem",
-    },
-    fontWeights: {
-        hairline: 100,
-        thin: 200,
-        light: 300,
-        normal: 400,
-        medium: 500,
-        semibold: 600,
-        bold: 700,
-        extrabold: 800,
-        black: 900,
-    },
-    lineHeights: {
-        normal: "normal",
-        none: 1,
-        shorter: 1.25,
-        short: 1.375,
-        base: 1.5,
-        tall: 1.625,
-        taller: "2",
-        "3": ".75rem",
-        "4": "1rem",
-        "5": "1.25rem",
-        "6": "1.5rem",
-        "7": "1.75rem",
-        "8": "2rem",
-        "9": "2.25rem",
-        "10": "2.5rem",
-    },
-    letterSpacings: {
-        tighter: "-0.05em",
-        tight: "-0.025em",
-        normal: "0",
-        wide: "0.025em",
-        wider: "0.05em",
-        widest: "0.1em",
-    },
-    space: space,
-    sizes: {
-        ...space,
-        full: "100%",
-        screenW: "100vw",
-        screenH: "100vh",
-        max: 'max-content',
-        min: 'min-content',
-        '3xs': '14rem',
-        '2xs': '16rem',
-        xs: '20rem',
-        sm: '24rem',
-        md: '28rem',
-        lg: '32rem',
-        xl: '36rem',
-        '2xl': '42rem',
-        '3xl': '48rem',
-        '4xl': '56rem',
-        '5xl': '64rem',
-        '6xl': '72rem',
-        '7xl': '80rem',
-        '8xl': '90rem',
-        container: {
-            sm: '640px',
-            md: '768px',
-            lg: '1024px',
-            xl: '1280px',
-        },
-    },
-    breakpoints: {
-        sm: "30em",
-        md: "48em",
-        lg: "62em",
-        xl: "80em",
-        "2xl": "96em",
-    },
-    shadows: {
-        xs: "0 0 0 1px rgba(0, 0, 0, 0.05)",
-        sm: "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
-        base: "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)",
-        md: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
-        lg: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",
-        xl: "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)",
-        "2xl": "0 25px 50px -12px rgba(0, 0, 0, 0.25)",
-        outline: "0 0 0 3px rgba(66, 153, 225, 0.6)",
-        inner: "inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)",
-        none: "none",
-        darkLg: "0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.5)",
-    },
-    radii: {
-        none: "0",
-        sm: "0.125rem",
-        base: "0.25rem",
-        md: "0.375rem",
-        lg: "0.5rem",
-        xl: "0.75rem",
-        "2xl": "1rem",
-        "3xl": "1.5rem",
-        full: "9999px",
-    },
-    zIndices: {
-        hide: -1,
-        auto: "auto",
-        base: 0,
-        docked: 10,
-        dropdown: 1000,
-        sticky: 1100,
-        banner: 1200,
-        overlay: 1300,
-        modal: 1400,
-        popover: 1500,
-        skipLink: 1600,
-        toast: 1700,
-        tooltip: 1800,
-    },
-    config: {
-        cssVarPrefix: 'ck',
-    },
-    components: {
-        // Component style overrides go here
-    },
-});
-
-export default theme;

package/src/Theme/index.ts

@@ -1,4 +0,0 @@
-import theme from "./Default/theme";
-import darkTheme from "./Dark/theme";
-
-export { theme as defaultTheme, darkTheme };

package/src/bootstrap.tsx

@@ -1,13 +0,0 @@
-import React from "react";
-import ReactDOM from "react-dom/client";
-import App from "./App";
-import ToasterProvider from "./Components/Toaster/Toaster";
-
-const root = ReactDOM.createRoot(document.getElementById("root")!);
-root.render(
-    <React.StrictMode>
-        <ToasterProvider>
-            <App />
-        </ToasterProvider>
-    </React.StrictMode>
-)

package/src/index.ts

@@ -1,29 +0,0 @@
-// export * from "./Components/Apexcharts/ApexBarChart/ApexBarChart";
-// export * from "./Components/Apexcharts/ApexPieChart/ApexPieChart";
-// export * from "./Components/Breadcrumbs/Breadcrumbs";
-// export * from "./Components/Button/Button";
-// export * from "./Components/Checkbox/Checkbox";
-// export * from "./Components/ButtonGroupIcon/ButtonGroupIcon";
-// export * from "./Components/Input/TextInput";
-// export * from "./Components/InputTextArea/InputTextArea";
-// export * from "./Components/Loading/Loading";
-// export * from "./Components/Modal/Modal";
-// export * from "./Components/NavigationBar/NavigationBar";
-// export * from "./Components/NumberInput/NumberInput";
-// export * from "./Components/PinInput/PinInput";
-// export * from "./Components/ProfileCard/ProfileCard";
-// export * from "./Components/ProfilePhotoViewer/ProfilePhotoViewer";
-// export * from "./Components/ProgressBar/ProgressBar";
-// export * from "./Components/RadioButton/RadioButton";
-// export * from "./Components/Select/Select";
-// export * from "./Components/SideBar/SideBar";
-// export * from "./Components/Skeletons/Skeletons";
-// export * from "./Components/Table/Table";
-// export * from "./Components/Toaster/Toaster";
-// // export * from "./Components/ToolTip/ToolTip";
-// export * from "./Theme/index";
-
-import Loading from "./Components/Loading/Loading";
-import ToolTip from "./Components/ToolTip/ToolTip";
-
-export { Loading, ToolTip };

package/src/index.tsx

@@ -1,22 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import App from './App';
-import { ChakraProvider, ColorModeScript } from '@chakra-ui/react';
-import ToasterProvider from './Components/Toaster/Toaster';
-// import { darkTheme } from './Theme';
-import theme from './Theme/Default/theme';
-
-const root = ReactDOM.createRoot(
-  document.getElementById('root') as HTMLElement
-);
-//console.log(darkTheme);
-root.render(
-  <React.StrictMode>
-    <ChakraProvider theme={theme}>
-      <ColorModeScript initialColorMode={"dark"} />
-      <ToasterProvider>
-        <App />
-      </ToasterProvider>
-    </ChakraProvider>
-  </React.StrictMode>
-);

package/src/types/pixelize-design-library.d.ts

@@ -1,4 +0,0 @@
-declare module 'pixelize-design-library' {
-    const content: any;
-    export default content;
-}