pixelize-design-library 2.0.6 → 2.0.8

package/dist/Theme/Default/fonts.d.ts

@@ -0,0 +1,35 @@
+import "@fontsource/ubuntu-sans";
+declare const fontOptions: {
+    fonts: {
+        body: string;
+        heading: string;
+        mono: string;
+    };
+    fontSizes: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        "2xl": string;
+        "3xl": string;
+        "4xl": string;
+        "5xl": string;
+        "6xl": string;
+        "7xl": string;
+        "8xl": string;
+        "9xl": string;
+    };
+    fontWeights: {
+        hairline: number;
+        thin: number;
+        light: number;
+        normal: number;
+        medium: number;
+        semibold: number;
+        bold: number;
+        extrabold: number;
+        black: number;
+    };
+};
+export default fontOptions;

package/dist/Theme/Default/fonts.js

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+require("@fontsource/ubuntu-sans");
+var fontOptions = {
+    fonts: {
+        body: "Ubuntu Sans, serif",
+        heading: "Ubuntu Sans, serif",
+        mono: "Ubuntu Sans, 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,
+    },
+};
+exports.default = fontOptions;

package/dist/Theme/componentStyles.d.ts

@@ -3,4 +3,5 @@ export declare const componentStyles: {
     Input: import("@chakra-ui/theme").ComponentStyleConfig;
     Button: import("@chakra-ui/theme").ComponentStyleConfig;
     Select: import("@chakra-ui/theme").ComponentStyleConfig;
+    Tag: import("@chakra-ui/theme").ComponentStyleConfig;
 };

package/dist/Theme/componentStyles.js

@@ -5,9 +5,11 @@ var Button_styles_1 = require("../Components/Button/Button.styles");
 var Checkbox_styles_1 = require("../Components/Checkbox/Checkbox.styles");
 var TextInput_styles_1 = require("../Components/Input/TextInput.styles");
 var Select_styles_1 = require("../Components/Select/Select.styles");
+var Tag_styles_1 = require("../Components/Tag/Tag.styles");
 exports.componentStyles = {
     Checkbox: Checkbox_styles_1.Checkbox,
     Input: TextInput_styles_1.Input,
     Button: Button_styles_1.Button,
     Select: Select_styles_1.Select,
+    Tag: Tag_styles_1.Tag,
 };

package/dist/index.d.ts

@@ -11,6 +11,7 @@ import DatePicker from "./Components/DatePicker/DatePicker";
 import Drawer, { DrawerHeader, DrawerBody, DrawerFooter } from "./Components/Drawer/Drawer";
 import Dropdown from "./Components/Dropdown/DropDown";
 import Editor from "./Components/Editor/Editor";
+import FormWrapper from "./Components/Form/FormWrapper";
 import HeaderActions from "./Components/Header/HeaderActions";
 import InputTextArea from "./Components/InputTextArea/InputTextArea";
 import KanbanBoard from "./Components/KanbanBoard/KanbanBoard";
@@ -32,6 +33,7 @@ import SideBar from "./Components/SideBar/SideBar";
 import Skeletons from "./Components/Skeletons/Skeletons";
 import Switch from "./Components/Switch/Switch";
 import Table from "./Components/Table/Table";
+import Tag from "./Components/Tag/Tag";
 import TextInput from "./Components/Input/TextInput";
 import Timeline from "./Components/Timeline/Timeline";
 import Toaster, { useToaster } from "./Components/Toaster/Toaster";
@@ -42,5 +44,5 @@ import withTheme from "./withTheme";
 import { useCustomTheme } from "./Theme/useCustomTheme";
 import { ThemesList } from "./Theme";
 import { debounce } from "./Utils/table";
-export { Accordian, AlertDialog, ApexBarChart, ApexPieChart, Breadcrumbs, Button, ButtonGroupIcon, Card, Checkbox, DatePicker, Drawer, DrawerHeader, DrawerBody, DrawerFooter, Dropdown, Editor, HeaderActions, InputTextArea, KanbanBoard, Loading, Modal, ModalHeader, ModalBody, ModalFooter, NavigationBar, NoteTextArea, MultiSelect, NumberInput, PinInput, ProfileCard, ProfileCardHeader, ProfileCardBody, ProfileCardFooter, ProfilePhotoViewer, ProgressBar, RadioButton, RadioButtonGroup, Search, Select, SelectSearch, SideBar, Skeletons, Switch, Table, TableToggle, TextInput, Timeline, Toaster, ToolTip, useToaster, VerifyEmailOtp, useCustomTheme, ThemesList, debounce, };
+export { Accordian, AlertDialog, ApexBarChart, ApexPieChart, Breadcrumbs, Button, ButtonGroupIcon, Card, Checkbox, DatePicker, Drawer, DrawerHeader, DrawerBody, DrawerFooter, Dropdown, Editor, FormWrapper, HeaderActions, InputTextArea, KanbanBoard, Loading, Modal, ModalHeader, ModalBody, ModalFooter, NavigationBar, NoteTextArea, MultiSelect, NumberInput, PinInput, ProfileCard, ProfileCardHeader, ProfileCardBody, ProfileCardFooter, ProfilePhotoViewer, ProgressBar, RadioButton, RadioButtonGroup, Search, Select, SelectSearch, SideBar, Skeletons, Switch, Table, TableToggle, Tag, TextInput, Timeline, Toaster, ToolTip, useToaster, VerifyEmailOtp, useCustomTheme, ThemesList, debounce, };
 export default withTheme;

package/dist/index.js

@@ -27,8 +27,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useToaster = exports.ToolTip = exports.Toaster = exports.Timeline = exports.TextInput = exports.TableToggle = 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.KanbanBoard = exports.InputTextArea = exports.HeaderActions = 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 = exports.ThemesList = exports.useCustomTheme = exports.VerifyEmailOtp = void 0;
+exports.Toaster = exports.Timeline = exports.TextInput = exports.Tag = exports.TableToggle = 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.KanbanBoard = exports.InputTextArea = exports.HeaderActions = exports.FormWrapper = 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 = exports.ThemesList = exports.useCustomTheme = exports.VerifyEmailOtp = exports.useToaster = exports.ToolTip = void 0;
 var Accordion_1 = __importDefault(require("./Components/Accordion/Accordion"));
 exports.Accordian = Accordion_1.default;
 var AlertDialog_1 = __importDefault(require("./Components/AlertDialog/AlertDialog"));
@@ -58,6 +58,8 @@ var DropDown_1 = __importDefault(require("./Components/Dropdown/DropDown"));
 exports.Dropdown = DropDown_1.default;
 var Editor_1 = __importDefault(require("./Components/Editor/Editor"));
 exports.Editor = Editor_1.default;
+var FormWrapper_1 = __importDefault(require("./Components/Form/FormWrapper"));
+exports.FormWrapper = FormWrapper_1.default;
 var HeaderActions_1 = __importDefault(require("./Components/Header/HeaderActions"));
 exports.HeaderActions = HeaderActions_1.default;
 var InputTextArea_1 = __importDefault(require("./Components/InputTextArea/InputTextArea"));
@@ -107,6 +109,8 @@ var Switch_1 = __importDefault(require("./Components/Switch/Switch"));
 exports.Switch = Switch_1.default;
 var Table_1 = __importDefault(require("./Components/Table/Table"));
 exports.Table = Table_1.default;
+var Tag_1 = __importDefault(require("./Components/Tag/Tag"));
+exports.Tag = Tag_1.default;
 var TextInput_1 = __importDefault(require("./Components/Input/TextInput"));
 exports.TextInput = TextInput_1.default;
 var Timeline_1 = __importDefault(require("./Components/Timeline/Timeline"));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pixelize-design-library",
-  "version": "2.0.6",
+  "version": "2.0.8",
   "private": false,
   "main": "dist/index.js",
   "module": "dist/index.js",

package/postcss.config.js

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

package/tailwind.config.js

@@ -1,239 +0,0 @@
-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: [],
-};