pixelize-design-library 2.1.25 → 2.1.27

package/dist/Components/ContactForm/ContactForm.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import { ContactFormProps } from "./ContactFormProps";
-declare const ContactForm: ({ apiKey, customFields, getCustomValues, isDisabled, organizationId, customerId, }: ContactFormProps) => React.JSX.Element;
+declare const ContactForm: ({ apiKey, customFields, getCustomValues, isDisabled, organizationId, customerId, buttonColorScheme }: ContactFormProps) => React.JSX.Element;
 export default ContactForm;

package/dist/Components/ContactForm/ContactForm.js

@@ -78,22 +78,24 @@ var react_2 = require("@chakra-ui/react");
 var TextInput_1 = __importDefault(require("../Input/TextInput"));
 var lucide_react_1 = require("lucide-react");
 var useCustomTheme_1 = require("../../Theme/useCustomTheme");
+var InputTextArea_1 = __importDefault(require("../InputTextArea/InputTextArea"));
+var Button_1 = __importDefault(require("../Button/Button"));
 var ContactForm = function (_a) {
     var _b;
-    var apiKey = _a.apiKey, customFields = _a.customFields, getCustomValues = _a.getCustomValues, _c = _a.isDisabled, isDisabled = _c === void 0 ? false : _c, organizationId = _a.organizationId, customerId = _a.customerId;
+    var apiKey = _a.apiKey, customFields = _a.customFields, getCustomValues = _a.getCustomValues, _c = _a.isDisabled, isDisabled = _c === void 0 ? false : _c, organizationId = _a.organizationId, customerId = _a.customerId, _d = _a.buttonColorScheme, buttonColorScheme = _d === void 0 ? "primary" : _d;
     var colors = (0, useCustomTheme_1.useCustomTheme)().colors;
-    var _d = (0, react_1.useState)({
+    var _e = (0, react_1.useState)({
         firstName: "",
         lastName: "",
         email: "",
         phone: "",
         enquiry: "",
-    }), formData = _d[0], setFormData = _d[1];
-    var _e = (0, react_1.useState)({
+    }), formData = _e[0], setFormData = _e[1];
+    var _f = (0, react_1.useState)({
         title: "",
         isSuccess: false,
-    }), response = _e[0], setResponse = _e[1];
-    var _f = (0, react_1.useState)({}), errors = _f[0], setErrors = _f[1];
+    }), response = _f[0], setResponse = _f[1];
+    var _g = (0, react_1.useState)({}), errors = _g[0], setErrors = _g[1];
     var handleChange = function (field, value) {
         setFormData(function (prev) {
             var _a;
@@ -108,11 +110,12 @@ var ContactForm = function (_a) {
         var newErrors = {};
         if (!formData.firstName.trim())
             newErrors.firstName = "First name is required";
-        // if (!formData.email.trim()) {
-        //   newErrors.email = "Email is required";
-        // } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.email)) {
-        //   newErrors.email = "Invalid email format";
-        // }
+        if (!formData.email.trim()) {
+            // newErrors.email = "Email is required";
+        }
+        else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.email)) {
+            newErrors.email = "Invalid email format";
+        }
         if (!formData.phone.trim()) {
             newErrors.phone = "Phone is required";
         }
@@ -194,22 +197,22 @@ var ContactForm = function (_a) {
         react_1.default.createElement(react_2.Box, { as: "form", onSubmit: handleSubmit },
             react_1.default.createElement(react_2.VStack, { spacing: 4 },
                 react_1.default.createElement(react_2.SimpleGrid, { columns: { base: 1, md: 2 }, spacing: 4, w: "100%" },
-                    react_1.default.createElement(react_2.FormControl, { isInvalid: !!errors.firstName, isRequired: true },
-                        react_1.default.createElement(TextInput_1.default, { label: "First Name", placeholder: "Enter first name", value: formData.firstName, onChange: function (e) { return handleChange("firstName", e.target.value); }, isRequired: true }),
-                        react_1.default.createElement(react_2.FormErrorMessage, null, errors.firstName)),
+                    react_1.default.createElement(react_2.FormControl, null,
+                        react_1.default.createElement(TextInput_1.default, { label: "First Name", placeholder: "Enter first name", value: formData.firstName, onChange: function (e) { return handleChange("firstName", e.target.value); }, error: Boolean(errors.firstName), errorMessage: errors.firstName, isRequired: true })),
                     react_1.default.createElement(react_2.FormControl, null,
                         react_1.default.createElement(TextInput_1.default, { label: "Last Name", placeholder: "Enter last name", value: formData.lastName, onChange: function (e) { return handleChange("lastName", e.target.value); } }))),
                 react_1.default.createElement(react_2.SimpleGrid, { columns: { base: 1, md: 2 }, spacing: 4, w: "100%" },
-                    react_1.default.createElement(react_2.FormControl, { isInvalid: !!errors.phone, isRequired: true },
-                        react_1.default.createElement(TextInput_1.default, { label: "Phone", placeholder: "Enter phone number", value: formData.phone, onChange: function (e) { return handleChange("phone", e.target.value); }, isRequired: true }),
-                        react_1.default.createElement(react_2.FormErrorMessage, null, errors.phone)),
+                    react_1.default.createElement(react_2.FormControl, null,
+                        react_1.default.createElement(TextInput_1.default, { label: "Phone", placeholder: "Enter phone number", value: formData.phone, onChange: function (e) { return handleChange("phone", e.target.value); }, isRequired: true, error: Boolean(errors.phone), errorMessage: errors.phone })),
                     react_1.default.createElement(react_2.FormControl, { isInvalid: !!errors.email },
-                        react_1.default.createElement(TextInput_1.default, { label: "Email", placeholder: "Enter email", value: formData.email, onChange: function (e) { return handleChange("email", e.target.value); } }),
-                        react_1.default.createElement(react_2.FormErrorMessage, null, errors.email))),
+                        react_1.default.createElement(TextInput_1.default, { label: "Email", placeholder: "Enter email", value: formData.email, onChange: function (e) { return handleChange("email", e.target.value); }, error: Boolean(errors.email), errorMessage: errors.email }))),
                 customFields,
-                react_1.default.createElement(react_2.FormControl, { w: "100%" },
+                react_1.default.createElement(react_2.FormControl, null,
                     react_1.default.createElement(react_2.Text, { fontSize: "sm", mb: 1 }, "Enquiry"),
-                    react_1.default.createElement(react_2.Textarea, { placeholder: "Enter your enquiry", rows: 5, value: formData.enquiry, onChange: function (e) { return handleChange("enquiry", e.target.value); } })),
-                react_1.default.createElement(react_2.Button, { type: "submit", disabled: isDisabled, colorScheme: "blue", w: "full", mt: 2 }, "Send Message")))));
+                    react_1.default.createElement(react_2.Box, null,
+                        react_1.default.createElement(InputTextArea_1.default, { placeholder: "Enter your enquiry", rows: 4, width: "100%", value: formData.enquiry, onChange: function (e) { return handleChange("enquiry", e.target.value); } }))),
+                react_1.default.createElement(Button_1.default, { type: "submit", isDisabled: isDisabled, colorScheme: buttonColorScheme, width: "full", sx: {
+                        mt: 2
+                    } }, "Send Message")))));
 };
 exports.default = ContactForm;

package/dist/Components/ContactForm/ContactFormProps.d.ts

@@ -6,4 +6,5 @@ export interface ContactFormProps {
     isDisabled?: boolean;
     customFields?: ReactNode;
     getCustomValues?: () => Record<string, any>;
+    buttonColorScheme?: "primary" | "blue" | "cyan" | "gray" | "green" | "orange" | "pink" | "purple" | "red" | "teal" | "yellow" | "secondary" | "tertiary" | undefined;
 }

package/dist/Components/InputTextArea/InputTextArea.d.ts

@@ -1,3 +1,3 @@
 import React from "react";
 import { InputTextAreaProps } from "./InputTextAreaProps";
-export default function InputTextArea({ label, placeholder, value, onChange, size, resize, width, isDisabled, errorBorderColor, focusBorderColor, isReadOnly, isRequired, error, errorMessage, helperText, rows, height, }: InputTextAreaProps): React.JSX.Element;
+export default function InputTextArea({ label, placeholder, value, onChange, size, resize, width, isDisabled, errorBorderColor, focusBorderColor, isReadOnly, isRequired, error, errorMessage, helperText, rows, height, isInformation, informationMessage, id, autoComplete }: InputTextAreaProps): React.JSX.Element;

package/dist/Components/InputTextArea/InputTextArea.js

@@ -5,12 +5,15 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
 var react_2 = require("@chakra-ui/react");
+var FormLabel_1 = require("../Common/FormLabel");
+var ErrorMessage_1 = __importDefault(require("../Common/ErrorMessage"));
+var HelperText_1 = __importDefault(require("../Common/HelperText"));
 function InputTextArea(_a) {
-    var label = _a.label, placeholder = _a.placeholder, value = _a.value, onChange = _a.onChange, _b = _a.size, size = _b === void 0 ? "md" : _b, _c = _a.resize, resize = _c === void 0 ? "both" : _c, _d = _a.width, width = _d === void 0 ? 500 : _d, isDisabled = _a.isDisabled, errorBorderColor = _a.errorBorderColor, focusBorderColor = _a.focusBorderColor, isReadOnly = _a.isReadOnly, _e = _a.isRequired, isRequired = _e === void 0 ? false : _e, error = _a.error, errorMessage = _a.errorMessage, helperText = _a.helperText, rows = _a.rows, height = _a.height;
-    return (react_1.default.createElement(react_2.FormControl, { isRequired: isRequired, isInvalid: error },
-        label && react_1.default.createElement(react_2.FormLabel, { mb: "0.25rem" }, label),
-        react_1.default.createElement(react_2.Textarea, { placeholder: placeholder, value: value, onChange: onChange, size: size, resize: resize, isDisabled: isDisabled, errorBorderColor: errorBorderColor, focusBorderColor: focusBorderColor, isReadOnly: isReadOnly, isInvalid: error, width: width, rows: rows, height: height }),
-        error && react_1.default.createElement(react_2.FormErrorMessage, { pl: 4 }, errorMessage),
-        helperText && !error && (react_1.default.createElement(react_2.FormHelperText, { pl: 4 }, helperText))));
+    var label = _a.label, placeholder = _a.placeholder, value = _a.value, onChange = _a.onChange, _b = _a.size, size = _b === void 0 ? "md" : _b, _c = _a.resize, resize = _c === void 0 ? "both" : _c, _d = _a.width, width = _d === void 0 ? 500 : _d, isDisabled = _a.isDisabled, errorBorderColor = _a.errorBorderColor, focusBorderColor = _a.focusBorderColor, isReadOnly = _a.isReadOnly, _e = _a.isRequired, isRequired = _e === void 0 ? false : _e, error = _a.error, errorMessage = _a.errorMessage, helperText = _a.helperText, rows = _a.rows, height = _a.height, isInformation = _a.isInformation, informationMessage = _a.informationMessage, id = _a.id, _f = _a.autoComplete, autoComplete = _f === void 0 ? "" : _f;
+    return (react_1.default.createElement(react_2.FormControl, null,
+        label && react_1.default.createElement(FormLabel_1.TextLabel, { label: label, id: id, isInformation: isInformation, informationMessage: informationMessage, isRequired: isRequired }),
+        react_1.default.createElement(react_2.Textarea, { id: id, placeholder: placeholder, value: value, onChange: onChange, size: size, resize: resize, isDisabled: isDisabled, isReadOnly: isReadOnly, isInvalid: error, width: width, rows: rows, height: height, autoComplete: autoComplete }),
+        error && react_1.default.createElement(ErrorMessage_1.default, { errorMessage: errorMessage }),
+        helperText && !error && react_1.default.createElement(HelperText_1.default, { helperText: helperText })));
 }
 exports.default = InputTextArea;

package/dist/Components/InputTextArea/InputTextArea.style.d.ts

@@ -0,0 +1,2 @@
+import { ComponentStyleConfig } from "@chakra-ui/react";
+export declare const Textarea: ComponentStyleConfig;

package/dist/Components/InputTextArea/InputTextArea.style.js

@@ -0,0 +1,76 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Textarea = void 0;
+exports.Textarea = {
+    baseStyle: {
+        fontWeight: 500,
+        fontSize: "0.875rem",
+        letterSpacing: "0.044rem",
+        pt: "0.813rem",
+        pb: "0.813rem",
+        borderRadius: "0.25rem",
+        _placeholder: {
+            fontStyle: "italic",
+        },
+    },
+    sizes: {
+        md: {
+            fontSize: "0.875rem",
+            h: "2.75rem",
+        },
+    },
+    variants: {
+        outline: function (props) {
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
+            var theme = props.theme;
+            var errorColor = (_c = (_b = (_a = theme.colors.semantic) === null || _a === void 0 ? void 0 : _a.error) === null || _b === void 0 ? void 0 : _b[500]) !== null && _c !== void 0 ? _c : "red.500";
+            var borderColor = (_e = (_d = theme.colors.boxborder) === null || _d === void 0 ? void 0 : _d[500]) !== null && _e !== void 0 ? _e : "gray.300";
+            var shadowPrimary = (_g = (_f = theme.colors.boxShadow) === null || _f === void 0 ? void 0 : _f.primary) !== null && _g !== void 0 ? _g : "blue.100";
+            var shadowError = (_j = (_h = theme.colors.boxShadow) === null || _h === void 0 ? void 0 : _h.error) !== null && _j !== void 0 ? _j : "red.100";
+            var primary = (_l = (_k = theme.colors.primary) === null || _k === void 0 ? void 0 : _k[500]) !== null && _l !== void 0 ? _l : "blue.500";
+            return {
+                border: "0.063rem solid",
+                borderColor: borderColor,
+                bg: (_o = (_m = theme.colors.gray) === null || _m === void 0 ? void 0 : _m[50]) !== null && _o !== void 0 ? _o : "gray.50",
+                _hover: {
+                    borderColor: primary,
+                    outline: "0",
+                },
+                _focus: {
+                    borderColor: primary,
+                    boxShadow: "0 0 0 0.125rem ".concat(shadowPrimary),
+                    outline: "0",
+                },
+                _invalid: {
+                    borderColor: errorColor,
+                    boxShadow: "0 0 0 0.125rem ".concat(shadowError),
+                    _hover: {
+                        borderColor: errorColor,
+                        outline: "0",
+                    },
+                    _focus: {
+                        borderColor: errorColor,
+                        boxShadow: "0 0 0 0.125rem ".concat(shadowError),
+                        outline: "0",
+                    },
+                },
+                _readOnly: {
+                    boxShadow: 'inherit',
+                },
+                _disabled: {
+                    bg: (_q = (_p = theme.colors.gray) === null || _p === void 0 ? void 0 : _p[100]) !== null && _q !== void 0 ? _q : "gray.100",
+                    opacity: 1,
+                    cursor: "not-allowed",
+                    _hover: {
+                        border: "0.063rem solid",
+                        borderColor: borderColor,
+                    },
+                },
+            };
+        },
+    },
+    defaultProps: {
+        variant: "outline",
+        size: "md",
+    },
+};

package/dist/Components/InputTextArea/InputTextAreaProps.d.ts

@@ -1,5 +1,5 @@
 import { TextareaProps } from "@chakra-ui/react";
-export type InputTextAreaProps = Pick<TextareaProps, "placeholder" | "value" | "onChange" | "size" | "resize" | "isDisabled" | "errorBorderColor" | "focusBorderColor" | "isReadOnly" | "isRequired" | "variant"> & {
+export type InputTextAreaProps = Pick<TextareaProps, "placeholder" | "value" | "onChange" | "id" | "size" | "resize" | "isDisabled" | "errorBorderColor" | "focusBorderColor" | "isReadOnly" | "isRequired" | "variant" | "autoComplete"> & {
     label?: string;
     error?: boolean;
     errorMessage?: string;
@@ -7,4 +7,6 @@ export type InputTextAreaProps = Pick<TextareaProps, "placeholder" | "value" | "
     width?: string | number;
     rows?: number;
     height?: string | number;
+    isInformation?: boolean;
+    informationMessage?: string;
 };

package/dist/Components/ProductCard/ProductCard.js

@@ -29,7 +29,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
 var react_2 = require("@chakra-ui/react");
 var ProductTags_1 = __importDefault(require("./ProductTags"));
-var ProductReview_1 = __importDefault(require("./ProductReview"));
+// import ProductReview from './ProductReview';
 var ProductPrice_1 = __importDefault(require("./ProductPrice"));
 var Button_1 = __importDefault(require("../Button/Button"));
 var ProductLabel_1 = __importDefault(require("./ProductLabel"));
@@ -43,8 +43,6 @@ var ProductCard = function (_a) {
         react_1.default.createElement(react_2.VStack, { spacing: 2, align: "start", mt: 3 },
             react_1.default.createElement(ProductLabel_1.default, { label: label, description: description }),
             tags && react_1.default.createElement(ProductTags_1.default, { tags: tags }),
-            rating && reviews &&
-                react_1.default.createElement(ProductReview_1.default, { rating: rating, reviewCount: reviews }),
             options && react_1.default.createElement(ProductPrice_1.default, { options: options }),
             onAddToCart && react_1.default.createElement(Button_1.default, { colorScheme: "orange", size: "sm", width: "100%", onClick: onAddToCart }, "Add to Cart"))));
 };

package/dist/Pages/textArea.js

@@ -7,6 +7,9 @@ var react_1 = __importDefault(require("react"));
 var InputTextArea_1 = __importDefault(require("../Components/InputTextArea/InputTextArea"));
 var TextAreaPage = function () {
     return (react_1.default.createElement("div", null,
-        react_1.default.createElement(InputTextArea_1.default, { label: "hello", helperText: "Hello", errorMessage: "Required", error: true, rows: 5 })));
+        react_1.default.createElement(InputTextArea_1.default, { label: "hello", helperText: "Hello", 
+            // errorMessage="Required"
+            // error={true}
+            rows: 5 })));
 };
 exports.default = TextAreaPage;

package/dist/Theme/componentStyles.d.ts

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

package/dist/Theme/componentStyles.js

@@ -6,10 +6,12 @@ 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");
+var InputTextArea_style_1 = require("../Components/InputTextArea/InputTextArea.style");
 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,
+    Textarea: InputTextArea_style_1.Textarea,
 };

package/package.json

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