pixelize-design-library 1.0.76 → 1.0.78

package/dist/Components/Button/Button.d.ts

@@ -1,3 +1,5 @@
 import React from "react";
 import { ButtonProps } from "./ButtonProps";
-export default function Button({ label, width, onClick, color, variant, leftIcon, rightIcon, size, isDisabled, isLoading, loadingText, type, }: ButtonProps): React.JSX.Element;
+declare function Button({ label, width, onClick, color, variant, leftIcon, rightIcon, size, isDisabled, isLoading, loadingText, type, }: ButtonProps): React.JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof Button>;
+export default _default;

package/dist/Components/Button/Button.js

@@ -1,18 +1,42 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importDefault(require("react"));
+var react_1 = __importStar(require("react"));
 var react_2 = require("@chakra-ui/react");
 var useCustomTheme_1 = require("../../Theme/useCustomTheme");
 function Button(_a) {
     var label = _a.label, _b = _a.width, width = _b === void 0 ? "100%" : _b, onClick = _a.onClick, color = _a.color, variant = _a.variant, leftIcon = _a.leftIcon, rightIcon = _a.rightIcon, size = _a.size, _c = _a.isDisabled, isDisabled = _c === void 0 ? false : _c, _d = _a.isLoading, isLoading = _d === void 0 ? false : _d, _e = _a.loadingText, loadingText = _e === void 0 ? "Loading" : _e, type = _a.type;
     var theme = (0, useCustomTheme_1.useCustomTheme)();
     console.log(theme);
-    return (react_1.default.createElement(react_2.Button, { type: type, onClick: onClick, width: width, colorScheme: color, variant: variant, size: size, isLoading: isLoading, isDisabled: isDisabled, loadingText: loadingText, leftIcon: leftIcon, rightIcon: rightIcon, sx: {
-            backgroundColor: theme.colors.primary[500]
-        } },
+    return (react_1.default.createElement(react_2.Button, { type: type, onClick: onClick, width: width, colorScheme: color, variant: variant, size: size, isLoading: isLoading, isDisabled: isDisabled, loadingText: loadingText, leftIcon: leftIcon, rightIcon: rightIcon, sx: !variant ? {
+            backgroundColor: theme.colors.primary[500],
+            color: theme.colors.white,
+            _hover: {
+                backgroundColor: theme.colors.primary[600],
+            },
+        } : {} },
         react_1.default.createElement(react_2.Box, { sx: {
                 overflow: "hidden",
                 textOverflow: "ellipsis",
@@ -20,4 +44,4 @@ function Button(_a) {
                 maxWidth: "100%",
             } }, label)));
 }
-exports.default = Button;
+exports.default = (0, react_1.memo)(Button);

package/dist/Components/Input/TextInput.d.ts

@@ -1,3 +1,3 @@
 import { TextInputProps } from "./TextInputProps";
 import React from "react";
-export default function TextInput({ label, type, id, name, onChange, onBlur, onFocus, isDisabled, isReadOnly, isRequired, value, placeholder, width, error, errorMessage, helperText, onRightIconclick, inputRightIcon, inputGroupStyle, inputStyle, }: TextInputProps): React.JSX.Element;
+export default function TextInput({ label, type, id, name, onChange, onBlur, onFocus, isDisabled, isReadOnly, isRequired, value, placeholder, width, error, errorMessage, helperText, onRightIconclick, inputRightIcon, inputGroupStyle, inputStyle, size }: TextInputProps): React.JSX.Element;

package/dist/Components/Input/TextInput.js

@@ -1,4 +1,15 @@
 "use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -6,11 +17,15 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = require("@chakra-ui/react");
 var react_2 = __importDefault(require("react"));
 function TextInput(_a) {
-    var label = _a.label, _b = _a.type, type = _b === void 0 ? "text" : _b, id = _a.id, name = _a.name, onChange = _a.onChange, onBlur = _a.onBlur, onFocus = _a.onFocus, _c = _a.isDisabled, isDisabled = _c === void 0 ? false : _c, _d = _a.isReadOnly, isReadOnly = _d === void 0 ? false : _d, _e = _a.isRequired, isRequired = _e === void 0 ? false : _e, value = _a.value, _f = _a.placeholder, placeholder = _f === void 0 ? "Placeholder" : _f, _g = _a.width, width = _g === void 0 ? "250px" : _g, error = _a.error, errorMessage = _a.errorMessage, helperText = _a.helperText, onRightIconclick = _a.onRightIconclick, inputRightIcon = _a.inputRightIcon, inputGroupStyle = _a.inputGroupStyle, inputStyle = _a.inputStyle;
+    var label = _a.label, _b = _a.type, type = _b === void 0 ? "text" : _b, id = _a.id, name = _a.name, onChange = _a.onChange, onBlur = _a.onBlur, onFocus = _a.onFocus, _c = _a.isDisabled, isDisabled = _c === void 0 ? false : _c, _d = _a.isReadOnly, isReadOnly = _d === void 0 ? false : _d, _e = _a.isRequired, isRequired = _e === void 0 ? false : _e, value = _a.value, _f = _a.placeholder, placeholder = _f === void 0 ? "Placeholder" : _f, _g = _a.width, width = _g === void 0 ? "250px" : _g, error = _a.error, errorMessage = _a.errorMessage, helperText = _a.helperText, onRightIconclick = _a.onRightIconclick, inputRightIcon = _a.inputRightIcon, inputGroupStyle = _a.inputGroupStyle, inputStyle = _a.inputStyle, _h = _a.size, size = _h === void 0 ? "sm" : _h;
     return (react_2.default.createElement(react_1.FormControl, { isRequired: isRequired, isInvalid: error },
-        label && react_2.default.createElement(react_1.FormLabel, { mb: "0.25rem" }, label),
+        label && react_2.default.createElement(react_1.FormLabel, { color: "#5a5a5a", mb: "0.1rem", fontSize: 14 }, label),
         react_2.default.createElement(react_1.InputGroup, { width: width, style: inputGroupStyle },
-            react_2.default.createElement(react_1.Input, { type: type, placeholder: placeholder, onChange: onChange, onBlur: onBlur, onFocus: onFocus, value: value, errorBorderColor: error ? "crimson" : "", isDisabled: isDisabled, isReadOnly: isReadOnly, id: id, name: name, style: inputStyle }),
+            react_2.default.createElement(react_1.Input, { type: type, 
+                // variant={"flushed"}
+                placeholder: placeholder, onChange: onChange, onBlur: onBlur, 
+                // focusBorderColor="#3182ce29"
+                onFocus: onFocus, value: value, errorBorderColor: error ? "crimson" : "", isDisabled: isDisabled, isReadOnly: isReadOnly, id: id, name: name, size: size, style: __assign(__assign({}, inputStyle), { borderColor: "#3182ce29" }) }),
             inputRightIcon && (react_2.default.createElement(react_1.InputRightElement, { onClick: onRightIconclick }, inputRightIcon))),
         error && react_2.default.createElement(react_1.FormErrorMessage, { pl: 4 }, errorMessage),
         helperText && !error && (react_2.default.createElement(react_1.FormHelperText, { pl: 4 }, helperText))));

package/dist/Components/Input/TextInputProps.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { InputProps } from "@chakra-ui/react";
-export type TextInputProps = Pick<InputProps, "value" | "type" | "onChange" | "placeholder" | "onBlur" | "onFocus" | "isDisabled" | "isRequired" | "isReadOnly" | "width" | "errorBorderColor"> & {
+export type TextInputProps = Pick<InputProps, "value" | "type" | "onChange" | "placeholder" | "onBlur" | "onFocus" | "isDisabled" | "isRequired" | "isReadOnly" | "width" | "errorBorderColor" | "size"> & {
     label?: string;
     id?: string;
     name?: string;

package/dist/Components/ProfileCard/ProfileCard.d.ts

@@ -9,4 +9,4 @@ export declare const ProfileCardBody: React.FC<{
 export declare const ProfileCardFooter: React.FC<{
     children: React.ReactNode;
 }>;
-export default function ProfileCard({ maxW, align, variant, direction, justify, children, size, color, overflow, dividercolor, dividersize, dividervariant, CardStyle }: ProfileCardProps): React.JSX.Element;
+export default function ProfileCard({ maxW, align, variant, direction, justify, children, size, color, overflow, dividercolor, dividersize, dividervariant, CardStyle, borderTopColor, borderLeftColor, }: ProfileCardProps): React.JSX.Element;

package/dist/Components/ProfileCard/ProfileCard.js

@@ -1,4 +1,15 @@
 "use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -22,14 +33,15 @@ var ProfileCardFooter = function (_a) {
 };
 exports.ProfileCardFooter = ProfileCardFooter;
 function ProfileCard(_a) {
-    var maxW = _a.maxW, align = _a.align, variant = _a.variant, direction = _a.direction, justify = _a.justify, children = _a.children, size = _a.size, color = _a.color, overflow = _a.overflow, _b = _a.dividercolor, dividercolor = _b === void 0 ? "#d5cfcf" : _b, _c = _a.dividersize, dividersize = _c === void 0 ? "0.5px" : _c, _d = _a.dividervariant, dividervariant = _d === void 0 ? "solid" : _d, CardStyle = _a.CardStyle;
+    var maxW = _a.maxW, align = _a.align, variant = _a.variant, direction = _a.direction, justify = _a.justify, children = _a.children, size = _a.size, color = _a.color, overflow = _a.overflow, _b = _a.dividercolor, dividercolor = _b === void 0 ? "#d5cfcf" : _b, _c = _a.dividersize, dividersize = _c === void 0 ? "0.5px" : _c, _d = _a.dividervariant, dividervariant = _d === void 0 ? "solid" : _d, CardStyle = _a.CardStyle, borderTopColor = _a.borderTopColor, borderLeftColor = _a.borderLeftColor;
     var isReactElement = function (child) {
         return child !== null && typeof child === "object" && "type" in child;
     };
     var header = react_1.default.Children.toArray(children).find(function (child) { return isReactElement(child) && child.type === exports.ProfileCardHeader; });
     var body = react_1.default.Children.toArray(children).find(function (child) { return isReactElement(child) && child.type === exports.ProfileCardBody; });
     var footer = react_1.default.Children.toArray(children).find(function (child) { return isReactElement(child) && child.type === exports.ProfileCardFooter; });
-    return (react_1.default.createElement(react_2.Card, { maxW: maxW, align: align, variant: variant, direction: direction, justify: justify, size: size, overflow: overflow, colorScheme: color, style: CardStyle },
+    var StylesWithBorder = borderLeftColor ? __assign(__assign({}, CardStyle), { borderLeft: "2px solid #3182CE" }) : borderTopColor ? __assign(__assign({}, CardStyle), { borderTop: "2px solid #3182CE" }) : __assign({}, CardStyle);
+    return (react_1.default.createElement(react_2.Card, { maxW: maxW, align: align, variant: variant, direction: direction, justify: justify, size: size, overflow: overflow, colorScheme: color, style: StylesWithBorder },
         header && (react_1.default.createElement(react_1.default.Fragment, null,
             react_1.default.createElement(react_2.CardHeader, { style: { fontWeight: "bold" } }, header),
             react_1.default.createElement(react_2.Divider, { style: {

package/dist/Components/ProfileCard/ProfileCardProps.d.ts

@@ -9,4 +9,6 @@ export type ProfileCardProps = Pick<CardProps, "direction" | "maxW" | "align" |
     dividersize?: string;
     dividervariant?: "solid" | "dashed" | "dotted" | "double" | "groove" | "ridge" | "inset" | "outset";
     CardStyle?: React.CSSProperties;
+    borderTopColor?: boolean;
+    borderLeftColor?: boolean;
 };

package/dist/Layout.js

@@ -96,6 +96,7 @@ var KaTable_1 = __importDefault(require("./Components/KaTable/KaTable"));
 //   PagingPosition,
 // } from "ka-table/enums";
 var KaTable_2 = require("./Components/KaTable/KaTable");
+// import { ICellTextProps } from "ka-table/props";
 // import { ICellTextProps } from 'ka-table/props';
 // import { openRowEditors } from 'ka-table/actionCreators';
 var Layout = function () {
@@ -420,6 +421,8 @@ var Layout = function () {
         setAlertActive(!alertActive);
     };
     var DataType = KaTable_2.TableEnums.DataType, SortingMode = KaTable_2.TableEnums.SortingMode, FilteringMode = KaTable_2.TableEnums.FilteringMode, PagingPosition = KaTable_2.TableEnums.PagingPosition;
+    // const { ICellTextProps } = TableProps;
+    // const { openRowEditors } = TableActionCreator;
     var dataArray = Array(120)
         .fill(undefined)
         .map(function (_, index) { return ({
@@ -562,15 +565,11 @@ var Layout = function () {
                 react_1.default.createElement("br", null),
                 react_1.default.createElement(Breadcrumbs_1.default, { separator: react_1.default.createElement(icons_1.ChevronRightIcon, { color: "gray.500" }), items: breadcrumbItems, handleClick: handleClick }),
                 react_1.default.createElement(react_2.Box, { p: "50px", height: height - 160, overflowY: "scroll", width: width - 75 },
-                    react_1.default.createElement(TextInput_1.default
-                    //label="hello"
-                    , { 
-                        //label="hello"
-                        id: "hello", name: "hello", 
+                    react_1.default.createElement(TextInput_1.default, { label: "my label", id: "hello", name: "hello", 
                         //helperText="Hello"
                         //errorMessage="Required"
                         //error={true}
-                        type: "file", 
+                        type: "text", 
                         // inputRightIcon={<FiUser color="gray.300" />}
                         // onRightIconclick={() => {
                         //     console.log("icon click");
@@ -585,7 +584,9 @@ var Layout = function () {
                     react_1.default.createElement("br", null),
                     react_1.default.createElement(Button_1.default, { label: "TestButton", onClick: function () {
                             console.log("hello");
-                        }, variant: "solid", color: "blue", size: "md", width: 100, type: "submit" }),
+                        }, 
+                        // variant={"solid"}
+                        color: "blue", size: "md", width: 100, type: "submit" }),
                     react_1.default.createElement("br", null),
                     react_1.default.createElement("br", null),
                     react_1.default.createElement(Button_1.default, { label: "Tosterbutton", onClick: handleOnclick, variant: "solid", color: "blue", size: "md", width: 100 }),
@@ -641,7 +642,7 @@ var Layout = function () {
                     react_1.default.createElement(PinInput_1.default, { pins: 5, label: "Enter pin" }),
                     react_1.default.createElement("br", null),
                     react_1.default.createElement("br", null),
-                    react_1.default.createElement(ProfileCard_1.default, { CardStyle: { marginRight: "10px" } },
+                    react_1.default.createElement(ProfileCard_1.default, { CardStyle: { marginRight: "10px" }, borderTopColor: true },
                         react_1.default.createElement(ProfileCard_1.ProfileCardHeader, null, "Customer dashboard"),
                         react_1.default.createElement(ProfileCard_1.ProfileCardBody, null,
                             react_1.default.createElement(react_2.Text, null, "View a summary of all your customers over the last month.")),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pixelize-design-library",
-  "version": "1.0.76",
+  "version": "1.0.78",
   "private": false,
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -78,4 +78,4 @@
       "prettier --write"
     ]
   }
-}
+}

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

@@ -1,35 +0,0 @@
-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

@@ -1,37 +0,0 @@
-"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;