pixelize-design-library 1.1.89 → 1.1.92

package/dist/global.css

@@ -0,0 +1,225 @@
+:root {
+    --color-primary-50: #ecddfb;
+    --color-primary-100: #d6b7f6;
+    --color-primary-200: #be8ef0;
+    --color-primary-300: #aa6ae9;
+    --color-primary-400: #944cde;
+    --color-primary-500: #9A4FE5;
+    --color-primary-600: #8b48d8;
+    --color-primary-700: #7a3ccc;
+    --color-primary-800: #6933b2;
+    --color-primary-900: #59299a;
+
+    --color-primary-opacity-8: rgba(154, 82, 226, 0.08);
+    --color-primary-opacity-16: rgba(154, 82, 226, 0.16);
+    --color-primary-opacity-24: rgba(154, 82, 226, 0.24);
+    --color-primary-opacity-28: rgba(154, 82, 226, 0.28);
+    --color-primary-opacity-32: rgba(154, 82, 226, 0.32);
+    --color-primary-opacity-40: rgba(154, 82, 226, 0.40);
+
+    --color-success-50: #e9fdf1;
+    --color-success-100: #c8f7d8;
+    --color-success-200: #a5f1bd;
+    --color-success-300: #84e7a2;
+    --color-success-400: #60d987;
+    --color-success-500: #23B85C;
+    --color-success-600: #1dbb51;
+    --color-success-700: #189946;
+    --color-success-800: #14753a;
+    --color-success-900: #0f5b2f;
+
+    --color-error-50: #fff5f2;
+    --color-error-100: #fee8e1;
+    --color-error-200: #fdd0c8;
+    --color-error-300: #fca9a0;
+    --color-error-400: #f9897c;
+    --color-error-500: #F2463A;
+    --color-error-600: #c32e23;
+    --color-error-700: #a6261d;
+    --color-error-800: #8a1f18;
+    --color-error-900: #701812;
+
+    --color-warning-50: #fffaf5;
+    --color-warning-100: #fff0e0;
+    --color-warning-200: #fedcc0;
+    --color-warning-300: #fec59e;
+    --color-warning-400: #fdaf7c;
+    --color-warning-500: #FB8F3D;
+    --color-warning-600: #db6d1e;
+    --color-warning-700: #b75d18;
+    --color-warning-800: #924c13;
+    --color-warning-900: #6e3b0e;
+
+    --color-info-50: #f1fcfe;
+    --color-info-100: #dcf6fb;
+    --color-info-200: #c0ecf7;
+    --color-info-300: #9eddef;
+    --color-info-400: #7fd0e6;
+    --color-info-500: #5FC4DE;
+    --color-info-600: #4bb8d6;
+    --color-info-700: #3aaacb;
+    --color-info-800: #2a9dc0;
+    --color-info-900: #1b8fb5;
+
+    --color-gray-50: #f7fafc;
+    --color-gray-100: #edf2f7;
+    --color-gray-200: #e2e8f0;
+    --color-gray-300: #cbd5e0;
+    --color-gray-400: #a0aec0;
+    --color-gray-500: #718096;
+    --color-gray-600: #4a5568;
+    --color-gray-700: #2d3748;
+    --color-gray-800: #1a202c;
+    --color-gray-900: #171923;
+
+    --color-red-50: #fff5f5;
+    --color-red-100: #fed7d7;
+    --color-red-200: #feb2b2;
+    --color-red-300: #fc8181;
+    --color-red-400: #f56565;
+    --color-red-500: #e53e3e;
+    --color-red-600: #c53030;
+    --color-red-700: #9b2c2c;
+    --color-red-800: #822727;
+    --color-red-900: #63171b;
+
+    --color-orange-50: #fffaf0;
+    --color-orange-100: #feebc8;
+    --color-orange-200: #fbd38d;
+    --color-orange-300: #f6ad55;
+    --color-orange-400: #ed8936;
+    --color-orange-500: #dd6b20;
+    --color-orange-600: #c05621;
+    --color-orange-700: #9c4221;
+    --color-orange-800: #7b341e;
+    --color-orange-900: #652b19;
+
+    --color-yellow-50: #fffff0;
+    --color-yellow-100: #fefcbf;
+    --color-yellow-200: #faf089;
+    --color-yellow-300: #f6e05e;
+    --color-yellow-400: #ecc94b;
+    --color-yellow-500: #d69e2e;
+    --color-yellow-600: #b7791f;
+    --color-yellow-700: #975a16;
+    --color-yellow-800: #744210;
+    --color-yellow-900: #5f370e;
+
+    --color-green-50: #f0fff4;
+    --color-green-100: #c6f6d5;
+    --color-green-200: #9ae6b4;
+    --color-green-300: #68d391;
+    --color-green-400: #48bb78;
+    --color-green-500: #38a169;
+    --color-green-600: #2f855a;
+    --color-green-700: #276749;
+    --color-green-800: #22543d;
+    --color-green-900: #1c4532;
+
+    --color-teal-50: #e6fffa;
+    --color-teal-100: #b2f5ea;
+    --color-teal-200: #81e6d9;
+    --color-teal-300: #4fd1c5;
+    --color-teal-400: #38b2ac;
+    --color-teal-500: #319795;
+    --color-teal-600: #2c7a7b;
+    --color-teal-700: #285e61;
+    --color-teal-800: #234e52;
+    --color-teal-900: #1d4044;
+
+    --color-blue-50: #ebf8ff;
+    --color-blue-100: #bee3f8;
+    --color-blue-200: #90cdf4;
+    --color-blue-300: #63b3ed;
+    --color-blue-400: #4299e1;
+    --color-blue-500: #3182ce;
+    --color-blue-600: #2b6cb0;
+    --color-blue-700: #2c5282;
+    --color-blue-800: #2a4365;
+    --color-blue-900: #1a365d;
+
+    --color-cyan-50: #edfdfd;
+    --color-cyan-100: #c4f1f9;
+    --color-cyan-200: #9decf9;
+    --color-cyan-300: #76e4f7;
+    --color-cyan-400: #0bc5ea;
+    --color-cyan-500: #00b5d8;
+    --color-cyan-600: #00a3c4;
+    --color-cyan-700: #0987a0;
+    --color-cyan-800: #086f83;
+    --color-cyan-900: #065666;
+
+    --color-purple-50: #faf5ff;
+    --color-purple-100: #e9d8fd;
+    --color-purple-200: #d6bcfa;
+    --color-purple-300: #b794f4;
+    --color-purple-400: #9f7aea;
+    --color-purple-500: #805ad5;
+    --color-purple-600: #6b46c1;
+    --color-purple-700: #553c9a;
+    --color-purple-800: #44337a;
+    --color-purple-900: #322659;
+
+    --color-pink-50: #fff5f7;
+    --color-pink-100: #fed7e2;
+    --color-pink-200: #fbb6ce;
+    --color-pink-300: #f687b3;
+    --color-pink-400: #ed64a6;
+    --color-pink-500: #d53f8c;
+    --color-pink-600: #b83280;
+    --color-pink-700: #97266d;
+    --color-pink-800: #702459;
+    --color-pink-900: #521b41;
+
+    --color-bg-main: #f8f9fa;
+    --color-bg-secondary: #f1f1f1;
+    --color-bg-tertiary: #ececec;
+    --color-bg-quaternary: #e2e6ea;
+    --color-bg-light: #fafafa;
+    --color-bg-medium: #eaeaea;
+    --color-bg-accent: #e5e5e5;
+    --color-bg-subtle: #f5f6f7;
+    --color-bg-muted: #dfe3e6;
+    --color-bg-neutral: #ebedef;
+    --color-bg-base: #FBFBFB;
+    --color-bg-table-header: #F6F6F6;
+
+    --color-text-heading: #161B25;
+    --color-text-body: #555A64;
+    --color-text-subtle: #434853;
+    --color-text-input: #717680;
+
+    --color-heading-opacity-4: #161B250A;
+    --color-heading-opacity-8: #161B2512;
+
+    --color-border-default: #D6D8DB;
+    --color-border-light: #E8E8E8;
+    --color-border-dark: #adb5bd;
+    --color-border-input: #6c757d;
+    --color-border-error: #dc3545;
+    --color-border-success: #28a745;
+    --color-border-warning: #ffc107;
+    --color-border-info: #17a2b8;
+
+
+
+    /* --color-dropshadow-default: #9A52E247; */
+
+    --color-transparent: rgba(0, 0, 0, 0);
+    --color-black: #000000;
+    --color-white: #ffffff;
+}
+
+[data-theme="theme2"] {
+    --color-primary-500: #3182ce;
+    /* blue */
+    --color-success-500: #38a169;
+    --color-error-500: #e53e3e;
+}
+
+[data-theme="theme3"] {
+    --color-primary-500: #00b5d8;
+    /* cyan */
+    --color-success-500: #319795;
+    --color-error-500: #d53f8c;
+}

package/dist/index.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

package/dist/index.d.ts

@@ -1,3 +1,4 @@
+import "./bootstrap";
 import Accordian from "./Components/Accordion/Accordion";
 import AlertDialog from "./Components/AlertDialog/AlertDialog";
 import ApexBarChart from "./Components/Apexcharts/ApexBarChart/ApexBarChart";

package/dist/index.js

@@ -1,5 +1,4 @@
 "use strict";
-// import "./bootstrap";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -29,6 +28,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ThemesList = exports.useCustomTheme = exports.VerifyEmailOtp = exports.useToaster = exports.ToolTip = exports.Toaster = exports.Timeline = exports.TextInput = exports.Table = exports.Switch = exports.Skeletons = exports.SideBar = exports.SelectSearch = exports.Select = exports.Search = exports.RadioButtonGroup = exports.RadioButton = exports.ProgressBar = exports.ProfilePhotoViewer = exports.ProfileCardFooter = exports.ProfileCardBody = exports.ProfileCardHeader = exports.ProfileCard = exports.PinInput = exports.NumberInput = exports.MultiSelect = exports.NoteTextArea = exports.NavigationBar = exports.ModalFooter = exports.ModalBody = exports.ModalHeader = exports.Modal = exports.Loading = exports.InputTextArea = exports.Editor = exports.Dropdown = exports.DrawerFooter = exports.DrawerBody = exports.DrawerHeader = exports.Drawer = exports.DatePicker = exports.Checkbox = exports.Card = exports.ButtonGroupIcon = exports.Button = exports.Breadcrumbs = exports.ApexPieChart = exports.ApexBarChart = exports.AlertDialog = exports.Accordian = void 0;
 exports.debounce = void 0;
+require("./bootstrap");
 var Accordion_1 = __importDefault(require("./Components/Accordion/Accordion"));
 exports.Accordian = Accordion_1.default;
 var AlertDialog_1 = __importDefault(require("./Components/AlertDialog/AlertDialog"));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pixelize-design-library",
-  "version": "1.1.89",
+  "version": "1.1.92",
   "private": false,
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -22,7 +22,6 @@
     "build": "tsc && copyfiles -u 1 src/**/*.css src/assets/**/* dist/",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
-    "prepare": "husky install",
     "package": "npm version patch && npm run build && npm publish"
   },
   "eslintConfig": {
@@ -55,24 +54,14 @@
     "@types/node": "^16.18.97",
     "@types/react": "^18.3.2",
     "@types/react-dom": "^18.3.0",
+    "autoprefixer": "^10.4.21",
     "copyfiles": "^2.4.1",
-    "husky": "^8.0.0",
-    "lint-staged": "^15.2.7",
     "path": "^0.12.7",
+    "postcss": "^8.5.4",
     "prettier": "^3.3.2",
     "prop-types": "^15.8.1",
+    "tailwindcss": "^3.4.17",
     "typescript": "^4.9.5",
     "webpack": "^5.91.0"
-  },
-  "husky": {
-    "hooks": {
-      "pre-commit": "lint-staged"
-    }
-  },
-  "lint-staged": {
-    "*.{js,jsx,ts,tsx,css}": [
-      "eslint --cache --fix",
-      "prettier --write"
-    ]
   }
 }

package/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+    plugins: {
+        tailwindcss: {},
+        autoprefixer: {},
+    },
+};

package/tailwind.config.js

@@ -0,0 +1,239 @@
+module.exports = {
+  content: [
+    './src/**/*.{html,js,jsx,ts,tsx}', // Adjust paths based on your project structure
+  ],
+  theme: {
+    extend: {
+      colors: {
+        primary: {
+          50: 'var(--color-primary-50)',
+          100: 'var(--color-primary-100)',
+          200: 'var(--color-primary-200)',
+          300: 'var(--color-primary-300)',
+          400: 'var(--color-primary-400)',
+          500: 'var(--color-primary-500)',
+          600: 'var(--color-primary-600)',
+          700: 'var(--color-primary-700)',
+          800: 'var(--color-primary-800)',
+          900: 'var(--color-primary-900)',
+          opacity: {
+            8: 'var(--color-primary-opacity-8)',
+            16: 'var(--color-primary-opacity-16)',
+            24: 'var(--color-primary-opacity-24)',
+            28: 'var(--color-primary-opacity-28)',
+            32: 'var(--color-primary-opacity-32)',
+            40: 'var(--color-primary-opacity-40)',
+          },
+        },
+        semantic: {
+          success: {
+            50: 'var(--color-success-50)',
+            100: 'var(--color-success-100)',
+            200: 'var(--color-success-200)',
+            300: 'var(--color-success-300)',
+            400: 'var(--color-success-400)',
+            500: 'var(--color-success-500)',
+            600: 'var(--color-success-600)',
+            700: 'var(--color-success-700)',
+            800: 'var(--color-success-800)',
+            900: 'var(--color-success-900)',
+          },
+          error: {
+            50: 'var(--color-error-50)',
+            100: 'var(--color-error-100)',
+            200: 'var(--color-error-200)',
+            300: 'var(--color-error-300)',
+            400: 'var(--color-error-400)',
+            500: 'var(--color-error-500)',
+            600: 'var(--color-error-600)',
+            700: 'var(--color-error-700)',
+            800: 'var(--color-error-800)',
+            900: 'var(--color-error-900)',
+          },
+          warning: {
+            50: 'var(--color-warning-50)',
+            100: 'var(--color-warning-100)',
+            200: 'var(--color-warning-200)',
+            300: 'var(--color-warning-300)',
+            400: 'var(--color-warning-400)',
+            500: 'var(--color-warning-500)',
+            600: 'var(--color-warning-600)',
+            700: 'var(--color-warning-700)',
+            800: 'var(--color-warning-800)',
+            900: 'var(--color-warning-900)',
+          },
+          info: {
+            50: 'var(--color-info-50)',
+            100: 'var(--color-info-100)',
+            200: 'var(--color-info-200)',
+            300: 'var(--color-info-300)',
+            400: 'var(--color-info-400)',
+            500: 'var(--color-info-500)',
+            600: 'var(--color-info-600)',
+            700: 'var(--color-info-700)',
+            800: 'var(--color-info-800)',
+            900: 'var(--color-info-900)',
+          },
+        },
+        gray: {
+          50: 'var(--color-gray-50)',
+          100: 'var(--color-gray-100)',
+          200: 'var(--color-gray-200)',
+          300: 'var(--color-gray-300)',
+          400: 'var(--color-gray-400)',
+          500: 'var(--color-gray-500)',
+          600: 'var(--color-gray-600)',
+          700: 'var(--color-gray-700)',
+          800: 'var(--color-gray-800)',
+          900: 'var(--color-gray-900)',
+        },
+        red: {
+          50: 'var(--color-red-50)',
+          100: 'var(--color-red-100)',
+          200: 'var(--color-red-200)',
+          300: 'var(--color-red-300)',
+          400: 'var(--color-red-400)',
+          500: 'var(--color-red-500)',
+          600: 'var(--color-red-600)',
+          700: 'var(--color-red-700)',
+          800: 'var(--color-red-800)',
+          900: 'var(--color-red-900)',
+        },
+        orange: {
+          50: 'var(--color-orange-50)',
+          100: 'var(--color-orange-100)',
+          200: 'var(--color-orange-200)',
+          300: 'var(--color-orange-300)',
+          400: 'var(--color-orange-400)',
+          500: 'var(--color-orange-500)',
+          600: 'var(--color-orange-600)',
+          700: 'var(--color-orange-700)',
+          800: 'var(--color-orange-800)',
+          900: 'var(--color-orange-900)',
+        },
+        yellow: {
+          50: 'var(--color-yellow-50)',
+          100: 'var(--color-yellow-100)',
+          200: 'var(--color-yellow-200)',
+          300: 'var(--color-yellow-300)',
+          400: 'var(--color-yellow-400)',
+          500: 'var(--color-yellow-500)',
+          600: 'var(--color-yellow-600)',
+          700: 'var(--color-yellow-700)',
+          800: 'var(--color-yellow-800)',
+          900: 'var(--color-yellow-900)',
+        },
+        green: {
+          50: 'var(--color-green-50)',
+          100: 'var(--color-green-100)',
+          200: 'var(--color-green-200)',
+          300: 'var(--color-green-300)',
+          400: 'var(--color-green-400)',
+          500: 'var(--color-green-500)',
+          600: 'var(--color-green-600)',
+          700: 'var(--color-green-700)',
+          800: 'var(--color-green-800)',
+          900: 'var(--color-green-900)',
+        },
+        teal: {
+          50: 'var(--color-teal-50)',
+          100: 'var(--color-teal-100)',
+          200: 'var(--color-teal-200)',
+          300: 'var(--color-teal-300)',
+          400: 'var(--color-teal-400)',
+          500: 'var(--color-teal-500)',
+          600: 'var(--color-teal-600)',
+          700: 'var(--color-teal-700)',
+          800: 'var(--color-teal-800)',
+          900: 'var(--color-teal-900)',
+        },
+        blue: {
+          50: 'var(--color-blue-50)',
+          100: 'var(--color-blue-100)',
+          200: 'var(--color-blue-200)',
+          300: 'var(--color-blue-300)',
+          400: 'var(--color-blue-400)',
+          500: 'var(--color-blue-500)',
+          600: 'var(--color-blue-600)',
+          700: 'var(--color-blue-700)',
+          800: 'var(--color-blue-800)',
+          900: 'var(--color-blue-900)',
+        },
+        cyan: {
+          50: 'var(--color-cyan-50)',
+          100: 'var(--color-cyan-100)',
+          200: 'var(--color-cyan-200)',
+          300: 'var(--color-cyan-300)',
+          400: 'var(--color-cyan-400)',
+          500: 'var(--color-cyan-500)',
+          600: 'var(--color-cyan-600)',
+          700: 'var(--color-cyan-700)',
+          800: 'var(--color-cyan-800)',
+          900: 'var(--color-cyan-900)',
+        },
+        purple: {
+          50: 'var(--color-purple-50)',
+          100: 'var(--color-purple-100)',
+          200: 'var(--color-purple-200)',
+          300: 'var(--color-purple-300)',
+          400: 'var(--color-purple-400)',
+          500: 'var(--color-purple-500)',
+          600: 'var(--color-purple-600)',
+          700: 'var(--color-purple-700)',
+          800: 'var(--color-purple-800)',
+          900: 'var(--color-purple-900)',
+        },
+        pink: {
+          50: 'var(--color-pink-50)',
+          100: 'var(--color-pink-100)',
+          200: 'var(--color-pink-200)',
+          300: 'var(--color-pink-300)',
+          400: 'var(--color-pink-400)',
+          500: 'var(--color-pink-500)',
+          600: 'var(--color-pink-600)',
+          700: 'var(--color-pink-700)',
+          800: 'var(--color-pink-800)',
+          900: 'var(--color-pink-900)',
+        },
+        background: {
+          main: 'var(--color-bg-main)',
+          secondary: 'var(--color-bg-secondary)',
+          tertiary: 'var(--color-bg-tertiary)',
+          quaternary: 'var(--color-bg-quaternary)',
+          light: 'var(--color-bg-light)',
+          medium: 'var(--color-bg-medium)',
+          accent: 'var(--color-bg-accent)',
+          subtle: 'var(--color-bg-subtle)',
+          muted: 'var(--color-bg-muted)',
+          neutral: 'var(--color-bg-neutral)',
+          base: 'var(--color-bg-base)',
+          tableHeader: 'var(--color-bg-table-header)',
+        },
+        text: {
+          heading: 'var(--color-text-heading)',
+          body: 'var(--color-text-body)',
+          subtle: 'var(--color-text-subtle)',
+          input: 'var(--color-text-input)',
+          headingOpacity: {
+            4: 'var(--color-heading-opacity-4)',
+            8: 'var(--color-heading-opacity-8)',
+          }
+        },
+        border: {
+          default: 'var(--color-border-default)',
+          light: 'var(--color-border-light)',
+          dark: 'var(--color-border-dark)',
+          input: 'var(--color-border-input)',
+          error: 'var(--color-border-error)',
+          success: 'var(--color-border-success)',
+          warning: 'var(--color-border-warning)',
+          info: 'var(--color-border-info)',
+        },
+        transparent: 'var(--color-transparent)',
+        black: 'var(--color-black)',
+        white: 'var(--color-white)',
+      },
+    },
+  },
+  plugins: [],
+};