pixelize-design-library 2.1.16 → 2.1.17

package/dist/Components/ProductCard/ProductPrice.js

@@ -0,0 +1,88 @@
+"use strict";
+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 = __importStar(require("react"));
+var react_2 = require("@chakra-ui/react");
+var ProductPrice = function (_a) {
+    var options = _a.options;
+    var _b = (0, react_1.useState)(false), isOpen = _b[0], setIsOpen = _b[1];
+    var _c = (0, react_1.useState)(options[0]), selected = _c[0], setSelected = _c[1];
+    var _d = (0, react_1.useState)({ top: 0, left: 0, width: 0 }), dropdownPosition = _d[0], setDropdownPosition = _d[1];
+    var buttonRef = (0, react_1.useRef)(null);
+    var dropdownRef = (0, react_1.useRef)(null);
+    var isSingleOption = options.length === 1;
+    (0, react_2.useOutsideClick)({
+        ref: dropdownRef,
+        handler: function () { return setIsOpen(false); },
+    });
+    var getDiscountedPrice = function (option) {
+        return Math.round(option.price - (option.price * option.offer) / 100);
+    };
+    (0, react_1.useEffect)(function () {
+        if (isOpen && buttonRef.current) {
+            var rect = buttonRef.current.getBoundingClientRect();
+            setDropdownPosition({
+                top: rect.bottom + window.scrollY,
+                left: rect.left + window.scrollX,
+                width: rect.width,
+            });
+        }
+    }, [isOpen]);
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        isSingleOption ? (react_1.default.createElement(react_2.Box, { border: "0.063rem solid", borderColor: "orange.300", bg: "#FFFCF5", px: 3, py: 1, rounded: "md", display: "inline-block", w: "100%" },
+            react_1.default.createElement(react_2.Text, { fontSize: "sm", fontWeight: "medium" }, options[0].label))) : (react_1.default.createElement(react_2.Box, { ref: buttonRef, onClick: function () { return setIsOpen(!isOpen); }, border: "0.063rem solid", borderColor: "orange.300", bg: "#FFFCF5", px: 3, py: 1, rounded: "md", cursor: "pointer", display: "flex", justifyContent: "space-between", alignItems: "center", w: "100%" },
+            react_1.default.createElement(react_2.Text, { fontSize: "sm", fontWeight: "medium" }, selected.label),
+            react_1.default.createElement(react_2.Text, { fontSize: "xs", color: "orange.400", transform: isOpen ? 'rotate(180deg)' : 'rotate(0deg)', transition: "transform 0.2s" }, "\u25BE"))),
+        !isSingleOption && isOpen && (react_1.default.createElement(react_2.Portal, null,
+            react_1.default.createElement(react_2.Box, { ref: dropdownRef, position: "absolute", top: "".concat(dropdownPosition.top, "px"), left: "".concat(dropdownPosition.left, "px"), width: "".concat(dropdownPosition.width, "px"), bg: "white", border: "0.063rem solid", borderColor: "orange.300", shadow: "md", zIndex: 9999 }, options.map(function (option) {
+                var discounted = getDiscountedPrice(option);
+                var isSelected = selected.weight === option.weight;
+                return (react_1.default.createElement(react_2.Box, { key: option.weight, px: 4, h: "2.5rem", cursor: "pointer", bg: isSelected ? 'orange.50' : 'white', _hover: { bg: 'orange.100' }, onClick: function () {
+                        setSelected(option);
+                        setIsOpen(false);
+                    }, display: "flex", alignItems: "center", justifyContent: "space-between" },
+                    react_1.default.createElement(react_2.Box, null,
+                        react_1.default.createElement(react_2.Text, { fontSize: "sm", fontWeight: "medium" }, option.label),
+                        option.offer > 0 && (react_1.default.createElement(react_2.Text, { fontSize: "xs", color: "green.600", fontWeight: "semibold" },
+                            option.offer,
+                            "% OFF"))),
+                    react_1.default.createElement(react_2.Box, { textAlign: "right" },
+                        react_1.default.createElement(react_2.Text, { fontSize: "sm", fontWeight: "semibold", color: "orange.500" },
+                            "\u20B9",
+                            discounted),
+                        option.offer > 0 && (react_1.default.createElement(react_2.Text, { fontSize: "xs", color: "gray.400", textDecoration: "line-through" },
+                            "\u20B9",
+                            option.price))),
+                    react_1.default.createElement(react_2.Box, { ml: 4, w: "1rem", h: "1rem", minW: "1rem", borderRadius: "full", border: "0.125rem solid", borderColor: isSelected ? 'orange.400' : 'gray.300', display: "flex", alignItems: "center", justifyContent: "center" }, isSelected && (react_1.default.createElement(react_2.Box, { w: "0.5rem", h: "0.5rem", bg: "orange.400", borderRadius: "full" })))));
+            })))),
+        react_1.default.createElement(react_2.Box, { mt: 2, display: "flex", alignItems: "center", fontSize: "sm", gap: 2 },
+            selected.offer > 0 && (react_1.default.createElement(react_2.Text, { color: "gray.400", textDecoration: "line-through" },
+                "\u20B9",
+                selected.price)),
+            react_1.default.createElement(react_2.Text, { color: "orange.500", fontWeight: "semibold" },
+                "\u20B9",
+                getDiscountedPrice(selected)))));
+};
+exports.default = ProductPrice;

package/dist/Components/ProductCard/ProductReview.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+type ProductReviewProps = {
+    rating: string | number;
+    reviewCount: string | number;
+};
+declare const ProductReview: ({ rating, reviewCount }: ProductReviewProps) => React.JSX.Element;
+export default ProductReview;

package/dist/Components/ProductCard/ProductReview.js

@@ -0,0 +1,23 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var react_2 = require("@chakra-ui/react");
+var lucide_react_1 = require("lucide-react");
+var ProductReview = function (_a) {
+    var rating = _a.rating, reviewCount = _a.reviewCount;
+    return (react_1.default.createElement(react_2.Flex, { align: "center", gap: 2 },
+        react_1.default.createElement(react_2.Flex, { align: "center", gap: "1", bg: "teal.900", color: "white", px: 2, borderRadius: "md", fontSize: "sm", fontWeight: "bold" },
+            react_1.default.createElement(react_2.Icon, { as: lucide_react_1.Star, boxSize: 3.5 }),
+            react_1.default.createElement(react_2.Text, null, rating)),
+        react_1.default.createElement(react_2.Box, { h: "4", w: "0.063rem", bg: "gray.400" }),
+        react_1.default.createElement(react_2.Flex, { align: "center", gap: "1" },
+            react_1.default.createElement(react_2.Icon, { as: lucide_react_1.BookCheck, boxSize: 3.5 }),
+            react_1.default.createElement(react_2.Text, { fontSize: "sm", color: "gray.600" },
+                "(",
+                reviewCount,
+                ")"))));
+};
+exports.default = ProductReview;

package/dist/Components/ProductCard/ProductTags.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+type ProductTagsProps = {
+    tags: string[];
+    className?: string;
+};
+declare const ProductTags: ({ tags, className }: ProductTagsProps) => React.JSX.Element;
+export default ProductTags;

package/dist/Components/ProductCard/ProductTags.js

@@ -0,0 +1,30 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var react_2 = require("@chakra-ui/react");
+var ProductTags = function (_a) {
+    var tags = _a.tags, className = _a.className;
+    var getRows = function (tags) {
+        var count = tags.length;
+        if (count === 1)
+            return [tags];
+        if (count === 2)
+            return [tags];
+        if (count === 3)
+            return [[tags[0]], tags.slice(1)];
+        if (count === 4)
+            return [tags.slice(0, 2), tags.slice(2, 4)];
+        return [];
+    };
+    return (react_1.default.createElement(react_2.Flex, { direction: "column", gap: "1", className: className, w: "full" }, getRows(tags).map(function (row, rowIndex) { return (react_1.default.createElement(react_2.Flex, { key: rowIndex, gap: "1" }, row.map(function (tag, tagIndex) { return (
+    // <></>
+    react_1.default.createElement(Tag, { key: tagIndex, fullWidth: row.length === 1 }, tag)); }))); })));
+};
+var Tag = function (_a) {
+    var children = _a.children, _b = _a.fullWidth, fullWidth = _b === void 0 ? false : _b;
+    return (react_1.default.createElement(react_2.Box, { flex: fullWidth ? '1' : '1', border: "0.063rem solid #f89f24", color: "black", fontSize: "0.625rem", fontWeight: "semibold", borderRadius: "full", px: "0.5rem", py: "0.125rem", textAlign: "center", whiteSpace: "nowrap", backgroundColor: "orange.100" }, children));
+};
+exports.default = ProductTags;

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

@@ -0,0 +1,12 @@
+import React from "react";
+import { ProfileCardProps } from "./ProfileCardProps";
+export declare const ProfileCardHeader: React.FC<{
+    children: React.ReactNode;
+}>;
+export declare const ProfileCardBody: React.FC<{
+    children: React.ReactNode;
+}>;
+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, CardHeaderStyle, CardBodyStyle, borderTopColor, borderLeftColor, }: ProfileCardProps): React.JSX.Element;

package/dist/Components/ProfileCard/ProfileCard.js

@@ -0,0 +1,57 @@
+"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 };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ProfileCardFooter = exports.ProfileCardBody = exports.ProfileCardHeader = void 0;
+var react_1 = __importDefault(require("react"));
+var react_2 = require("@chakra-ui/react");
+var ProfileCardHeader = function (_a) {
+    var children = _a.children;
+    return react_1.default.createElement(react_1.default.Fragment, null, children);
+};
+exports.ProfileCardHeader = ProfileCardHeader;
+var ProfileCardBody = function (_a) {
+    var children = _a.children;
+    return react_1.default.createElement(react_1.default.Fragment, null, children);
+};
+exports.ProfileCardBody = ProfileCardBody;
+var ProfileCardFooter = function (_a) {
+    var children = _a.children;
+    return react_1.default.createElement(react_1.default.Fragment, null, children);
+};
+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, CardHeaderStyle = _a.CardHeaderStyle, CardBodyStyle = _a.CardBodyStyle, 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; });
+    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, { sx: __assign(__assign({}, CardHeaderStyle), { fontWeight: "bold" }) }, header),
+            react_1.default.createElement(react_2.Divider, { style: {
+                    borderColor: dividercolor,
+                    borderWidth: dividersize,
+                    borderStyle: dividervariant,
+                } }))),
+        react_1.default.createElement(react_2.CardBody, { sx: CardBodyStyle }, body),
+        footer && react_1.default.createElement(react_2.CardFooter, null, footer)));
+}
+exports.default = ProfileCard;

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

@@ -0,0 +1 @@
+export {};

package/dist/Components/ProfileCard/ProfileCard.stories.js

@@ -0,0 +1,6 @@
+"use strict";
+// import React from 'react';
+// import { StoryFn, Meta } from '@storybook/react/types-6-0';
+// import ProfileCard from './ProfileCard';
+// import { ProfileCardProps } from './ProfileCardProps';
+Object.defineProperty(exports, "__esModule", { value: true });

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

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import { CardProps } from "@chakra-ui/react";
+export type ProfileCardProps = Pick<CardProps, "direction" | "maxW" | "align" | "justify" | "overflow"> & {
+    children: React.ReactNode;
+    variant?: "elevated" | "outlein" | "filled" | "unstyled";
+    size?: "sm" | "md" | "lg";
+    color?: "whiteAlpha" | "blackAlpha" | "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink";
+    dividercolor?: string;
+    dividersize?: string;
+    dividervariant?: "solid" | "dashed" | "dotted" | "double" | "groove" | "ridge" | "inset" | "outset";
+    CardStyle?: React.CSSProperties;
+    CardHeaderStyle?: React.CSSProperties;
+    CardBodyStyle?: React.CSSProperties;
+    borderTopColor?: boolean;
+    borderLeftColor?: boolean;
+};

package/dist/Components/ProfileCard/ProfileCardProps.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/Components/ProfilePhotoViewer/ProfilePhotoViewer.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { ProfilePhotoViewerProps } from "./ProfilePhotoViewerProps";
+export default function ProfilePhotoViewer({ photoUrl, onPhotoChange, imageWidth, imageAlt, imageObjectFit, imageBorderRadius, editIconSize, editIconPositionRight, editIconPositionBottom, isRound, boxStyle, isEditable, isView, style, handleIsView, fallbackText, }: ProfilePhotoViewerProps): React.JSX.Element;

package/dist/Components/ProfilePhotoViewer/ProfilePhotoViewer.js

@@ -0,0 +1,94 @@
+"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 __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 = __importStar(require("react"));
+var react_2 = require("@chakra-ui/react");
+var lucide_react_1 = require("lucide-react");
+function ProfilePhotoViewer(_a) {
+    var photoUrl = _a.photoUrl, onPhotoChange = _a.onPhotoChange, _b = _a.imageWidth, imageWidth = _b === void 0 ? "100px" : _b, _c = _a.imageAlt, imageAlt = _c === void 0 ? "Profile Photo" : _c, _d = _a.imageObjectFit, imageObjectFit = _d === void 0 ? "cover" : _d, _e = _a.imageBorderRadius, imageBorderRadius = _e === void 0 ? "full" : _e, _f = _a.editIconSize, editIconSize = _f === void 0 ? "sm" : _f, _g = _a.editIconPositionRight, editIconPositionRight = _g === void 0 ? "0px" : _g, _h = _a.editIconPositionBottom, editIconPositionBottom = _h === void 0 ? "0px" : _h, _j = _a.isRound, isRound = _j === void 0 ? true : _j, boxStyle = _a.boxStyle, _k = _a.isEditable, isEditable = _k === void 0 ? false : _k, _l = _a.isView, isView = _l === void 0 ? false : _l, style = _a.style, handleIsView = _a.handleIsView, fallbackText = _a.fallbackText;
+    var _m = (0, react_1.useState)(photoUrl), photo = _m[0], setPhoto = _m[1];
+    var fileInputRef = (0, react_1.useRef)(null);
+    var handlePhotoChange = function (event) {
+        var _a;
+        if (!isEditable)
+            return;
+        var file = (_a = event.target.files) === null || _a === void 0 ? void 0 : _a[0];
+        if (file) {
+            var reader_1 = new FileReader();
+            reader_1.onload = function () {
+                var photoUrl = reader_1.result;
+                setPhoto(photoUrl);
+                onPhotoChange(file);
+            };
+            reader_1.readAsDataURL(file);
+        }
+    };
+    var handleClick = function () {
+        var _a;
+        if (!isEditable)
+            return;
+        (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click();
+    };
+    var isPdf = photo === null || photo === void 0 ? void 0 : photo.endsWith(".pdf");
+    return (react_1.default.createElement(react_2.Box, { position: "relative", display: "inline-block", style: boxStyle, sx: {
+            "&:hover .icon-button": {
+                opacity: 1,
+            },
+        } },
+        photo ? (isPdf ? (react_1.default.createElement(react_2.Box, { width: imageWidth, height: imageWidth, borderRadius: imageBorderRadius, bg: "gray.200", display: "flex", alignItems: "center", justifyContent: "center", overflow: "hidden" },
+            react_1.default.createElement(lucide_react_1.FileText, { size: "50%" }))) : (react_1.default.createElement(react_2.Image, { src: photo, alt: imageAlt, boxSize: imageWidth, objectFit: imageObjectFit, borderRadius: imageBorderRadius }))) : fallbackText ? (react_1.default.createElement(react_2.Box, { boxSize: imageWidth, display: "flex", alignItems: "center", justifyContent: "center", borderRadius: imageBorderRadius, bg: "gray.200" },
+            react_1.default.createElement(react_2.Text, { fontSize: "2xl", fontWeight: "bold" }, fallbackText))) : (react_1.default.createElement(react_2.Box, { boxSize: imageWidth, display: "flex", alignItems: "center", justifyContent: "center", borderRadius: imageBorderRadius, bg: "gray.200" },
+            react_1.default.createElement(lucide_react_1.User, { size: "50%" }))),
+        (isEditable || isView) && (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement(react_2.Box, { className: "icon-button", position: "absolute", right: editIconPositionRight, bottom: editIconPositionBottom, transform: "translate(-25%, -25%)", sx: {
+                    opacity: 0,
+                    transition: "opacity 0.3s",
+                } },
+                isEditable && (react_1.default.createElement(react_2.Tooltip, { label: "Edit", "aria-label": "Edit" },
+                    react_1.default.createElement(react_2.IconButton, { icon: react_1.default.createElement(lucide_react_1.SquarePen, { size: 14 }), isRound: isRound, size: editIconSize, onClick: handleClick, "aria-label": "Edit photo", style: __assign(__assign({}, style), { transition: "transform 0.3s, box-shadow 0.3s", boxShadow: "0 4px 8px rgba(0, 0, 0, 0.2)", marginRight: "3px" }), _hover: {
+                            transform: "scale(1.1)",
+                            color: "blue.500",
+                            boxShadow: "0 8px 16px rgba(0, 0, 0, 0.3)",
+                        } }))),
+                isView && (react_1.default.createElement(react_2.Tooltip, { label: "View", "aria-label": "View" },
+                    react_1.default.createElement(react_2.IconButton, { icon: react_1.default.createElement(lucide_react_1.Eye, { size: 14 }), isRound: isRound, size: editIconSize, onClick: handleIsView, "aria-label": "View photo", style: __assign(__assign({}, style), { transition: "transform 0.3s, box-shadow 0.3s", boxShadow: "0 4px 8px rgba(0, 0, 0, 0.2)" }), _hover: {
+                            transform: "scale(1.1)",
+                            color: "blue.500",
+                            boxShadow: "0 8px 16px rgba(0, 0, 0, 0.3)",
+                        } })))),
+            isEditable && (react_1.default.createElement(react_2.Input, { type: "file", accept: "image/*", onChange: handlePhotoChange, hidden: true, ref: fileInputRef }))))));
+}
+exports.default = ProfilePhotoViewer;

package/dist/Components/ProfilePhotoViewer/ProfilePhotoViewer.stories.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/Components/ProfilePhotoViewer/ProfilePhotoViewer.stories.js

@@ -0,0 +1,6 @@
+"use strict";
+// import React from 'react';
+// import { StoryFn, Meta } from '@storybook/react';
+// import ProfilePhotoViewer from './ProfilePhotoViewer';
+// import { ProfilePhotoViewerProps } from './ProfilePhotoViewerProps';
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/Components/ProfilePhotoViewer/ProfilePhotoViewerProps.d.ts

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+export type ProfilePhotoViewerProps = {
+    photoUrl: string;
+    onPhotoChange: (photoUrl: File) => void;
+    imageWidth?: string;
+    imageAlt?: string;
+    imageObjectFit?: "cover" | "contain" | "fill" | "none" | "scale-down";
+    imageBorderRadius?: string;
+    isEditable?: boolean;
+    editIconSize?: string;
+    editIconPositionRight?: string;
+    editIconPositionBottom?: string;
+    isRound?: boolean;
+    boxStyle?: React.CSSProperties;
+    isView?: boolean;
+    style?: React.CSSProperties;
+    handleIsView?: () => void;
+    fallbackText?: string;
+};

package/dist/Components/ProfilePhotoViewer/ProfilePhotoViewerProps.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/Components/ProgressBar/ProgressBar.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { ProgressBarProps } from "./ProgressBarProps";
+export default function ProgressBar({ size, isIndeterminate, color, hasStripe, height, value, isAnimated, max, min, variant, }: ProgressBarProps): React.JSX.Element;

package/dist/Components/ProgressBar/ProgressBar.js

@@ -0,0 +1,12 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var react_2 = require("@chakra-ui/react");
+function ProgressBar(_a) {
+    var size = _a.size, isIndeterminate = _a.isIndeterminate, color = _a.color, hasStripe = _a.hasStripe, height = _a.height, value = _a.value, isAnimated = _a.isAnimated, max = _a.max, min = _a.min, variant = _a.variant;
+    return (react_1.default.createElement(react_2.Progress, { size: size, isIndeterminate: isIndeterminate, colorScheme: color, hasStripe: hasStripe, height: height, value: value, isAnimated: isAnimated, max: max, min: min, variant: variant }));
+}
+exports.default = ProgressBar;

package/dist/Components/ProgressBar/ProgressBar.stories.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/Components/ProgressBar/ProgressBar.stories.js

@@ -0,0 +1,7 @@
+"use strict";
+// import React from 'react';
+// import { Meta, StoryFn } from '@storybook/react';
+// import { ChakraProvider } from '@chakra-ui/react';
+// import ProgressBar from './ProgressBar'; // Adjust the import path and component type if needed
+// import { ProgressBarProps } from "./ProgressBarProps";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/Components/ProgressBar/ProgressBarProps.d.ts

@@ -0,0 +1,6 @@
+import { ProgressProps } from "@chakra-ui/react";
+export type ProgressBarProps = Pick<ProgressProps, "size" | "isIndeterminate" | "value" | "height" | "hasStripe" | "isAnimated" | "max" | "min"> & {
+    color?: "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "whiteAlpha" | "blackAlpha";
+    variant?: "solid" | "outline" | "ghost" | "link" | "unstyled";
+    size?: "lg" | "md" | "sm" | "xs";
+};

package/dist/Components/ProgressBar/ProgressBarProps.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/Components/RadioButton/RadioButton.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import { ChakraRadioProps, ChakraRadioGroupProps } from "./RadioButtonProps";
+declare const RadioButton: ({ label, colorScheme, isChecked, onChange, isDisabled, size, value, defaultChecked, }: ChakraRadioProps) => React.JSX.Element;
+declare const RadioButtonGroup: ({ options, onChange, value, defaultValue, isDisabled, size, colorScheme, }: ChakraRadioGroupProps) => React.JSX.Element;
+export { RadioButton, RadioButtonGroup };

package/dist/Components/RadioButton/RadioButton.js

@@ -0,0 +1,31 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RadioButtonGroup = exports.RadioButton = void 0;
+var react_1 = __importDefault(require("react"));
+var react_2 = require("@chakra-ui/react");
+var useCustomTheme_1 = require("../../Theme/useCustomTheme");
+var RadioButton = function (_a) {
+    var label = _a.label, colorScheme = _a.colorScheme, isChecked = _a.isChecked, onChange = _a.onChange, isDisabled = _a.isDisabled, size = _a.size, value = _a.value, defaultChecked = _a.defaultChecked;
+    var theme = (0, useCustomTheme_1.useCustomTheme)();
+    return (react_1.default.createElement(react_2.Radio, { colorScheme: colorScheme, isChecked: isChecked, onChange: onChange, isDisabled: isDisabled, size: size, value: value, defaultChecked: defaultChecked, sx: {
+            "&[data-checked]": {
+                backgroundColor: theme.colors.primary[500],
+                borderColor: theme.colors.primary[500]
+            },
+            "&[data-checked]:hover": {
+                backgroundColor: theme.colors.primary[300],
+                borderColor: theme.colors.primary[300], // Change this to your desired hover color
+            },
+        } },
+        react_1.default.createElement(react_2.Box, { as: "span" }, label)));
+};
+exports.RadioButton = RadioButton;
+var RadioButtonGroup = function (_a) {
+    var options = _a.options, onChange = _a.onChange, value = _a.value, defaultValue = _a.defaultValue, isDisabled = _a.isDisabled, size = _a.size, colorScheme = _a.colorScheme;
+    return (react_1.default.createElement(react_2.RadioGroup, { onChange: onChange, value: value, defaultValue: defaultValue },
+        react_1.default.createElement(react_2.Stack, { direction: "row", spacing: 4 }, options.map(function (option) { return (react_1.default.createElement(RadioButton, { key: option.id, label: option.label, value: option.id, isDisabled: isDisabled, size: size, colorScheme: colorScheme })); }))));
+};
+exports.RadioButtonGroup = RadioButtonGroup;

package/dist/Components/RadioButton/RadioButton.stories.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/Components/RadioButton/RadioButton.stories.js

@@ -0,0 +1,7 @@
+"use strict";
+// import React, { useState } from 'react';
+// import { Meta, StoryFn } from '@storybook/react';
+// import { ChakraProvider } from '@chakra-ui/react';
+// import { RadioButton, RadioButtonGroup } from './RadioButton';
+// import { ChakraRadioProps, ChakraRadioGroupProps } from './RadioButtonProps';
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/Components/RadioButton/RadioButtonProps.d.ts

@@ -0,0 +1,11 @@
+import { RadioProps, RadioGroupProps } from '@chakra-ui/react';
+export type ChakraRadioProps = Pick<RadioProps, "size" | "colorScheme" | "isChecked" | "onChange" | "isDisabled" | "value" | "defaultChecked"> & {
+    label: string;
+};
+export type ChakraRadioGroupProps = Pick<RadioGroupProps, "size" | "colorScheme" | "isDisabled" | "defaultValue" | "value"> & {
+    options: {
+        label: string;
+        id: string;
+    }[];
+    onChange?: (value: string) => void;
+};

package/dist/Components/RadioButton/RadioButtonProps.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/Components/Reorder/Reorder.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { ReorderItem, ReorderListProps } from "./ReorderProps";
+declare const ReorderList: <T extends ReorderItem>({ label, items, onReorder, }: ReorderListProps<T>) => JSX.Element;
+export default ReorderList;

package/dist/Components/Reorder/Reorder.js

@@ -0,0 +1,50 @@
+"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 };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var react_2 = require("@chakra-ui/react");
+var dnd_1 = require("@hello-pangea/dnd");
+var lucide_react_1 = require("lucide-react");
+var useCustomTheme_1 = require("../../Theme/useCustomTheme");
+var ReorderList = function (_a) {
+    var _b = _a.label, label = _b === void 0 ? "" : _b, items = _a.items, onReorder = _a.onReorder;
+    var colors = (0, useCustomTheme_1.useCustomTheme)().colors;
+    var handleDragEnd = function (result) {
+        if (!result.destination)
+            return;
+        var reordered = Array.from(items);
+        var moved = reordered.splice(result.source.index, 1)[0];
+        reordered.splice(result.destination.index, 0, moved);
+        onReorder(reordered);
+    };
+    return (react_1.default.createElement(react_2.Box, { borderWidth: "0.063rem", borderRadius: "md", px: 3, py: 2, bg: colors === null || colors === void 0 ? void 0 : colors.white },
+        react_1.default.createElement(react_2.Box, { display: "flex", alignItems: "center", gap: 2 },
+            react_1.default.createElement(lucide_react_1.BetweenHorizonalStart, null),
+            react_1.default.createElement(react_2.Text, { fontFamily: "open-sans, sans-serif", fontWeight: 600, fontSize: 14, lineHeight: "100%", letterSpacing: "4%", textTransform: "uppercase", py: 4 }, label)),
+        react_1.default.createElement(react_2.Divider, null),
+        react_1.default.createElement("br", null),
+        react_1.default.createElement(dnd_1.DragDropContext, { onDragEnd: handleDragEnd },
+            react_1.default.createElement(dnd_1.Droppable, { droppableId: "item-list", direction: "horizontal" }, function (provided) { return (react_1.default.createElement(react_2.HStack, __assign({ ref: provided.innerRef }, provided.droppableProps, { spacing: 4, overflowX: "auto" }),
+                items.map(function (item, index) { return (react_1.default.createElement(dnd_1.Draggable, { key: item.id, draggableId: item.id, index: index }, function (provided) {
+                    var _a, _b, _c;
+                    return (react_1.default.createElement(react_2.Box, __assign({ ref: provided.innerRef }, provided.draggableProps, provided.dragHandleProps, { position: "relative", border: "0.063rem solid", borderColor: (_a = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _a === void 0 ? void 0 : _a[300], borderRadius: "md", overflow: "hidden" }),
+                        react_1.default.createElement(react_2.Image, { src: item.previewUrl, alt: (_b = item.name) !== null && _b !== void 0 ? _b : "item-".concat(index), boxSize: "7.5rem", objectFit: "cover" }),
+                        react_1.default.createElement(react_2.IconButton, { icon: react_1.default.createElement(lucide_react_1.GripVertical, { size: 16, color: (_c = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _c === void 0 ? void 0 : _c[500] }), "aria-label": "Drag", size: "sm", position: "absolute", top: 1, left: 1, variant: "ghost" }),
+                        react_1.default.createElement(react_2.Badge, { position: "absolute", colorScheme: "gray", variant: "solid", bottom: 1, right: 1 }, index + 1)));
+                })); }),
+                provided.placeholder)); }))));
+};
+exports.default = ReorderList;

package/dist/Components/Reorder/ReorderProps.d.ts

@@ -0,0 +1,10 @@
+export interface ReorderItem {
+    id: string;
+    previewUrl: string;
+    name?: string;
+}
+export interface ReorderListProps<T extends ReorderItem> {
+    label?: string;
+    items: T[];
+    onReorder: (items: T[]) => void;
+}

package/dist/Components/Reorder/ReorderProps.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/Components/Search/Search.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { SearchProps } from "./SearchProps";
+export default function Search({ placeholder, onSearch, onclose, shortcut, query, }: SearchProps): React.JSX.Element;