pixelize-design-library 2.4.2-beta.9 → 3.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pixelize-design-library",
-  "version": "2.4.2-beta.9",
+  "version": "3.0.0",
   "description": "React component library for Pixelize apps: themeable Chakra-based components, design tokens and light/dark brand theming.",
   "keywords": [
     "react",
@@ -28,11 +28,15 @@
   "types": "dist/index.d.ts",
   "files": [
     "dist",
-    "README.md"
+    "README.md",
+    "COMPONENT-GOTCHAS.md",
+    "DESIGN-GUIDE.md",
+    "CHANGELOG.md"
   ],
   "dependencies": {
     "@fontsource-variable/inter": "^5.2.8",
     "@hello-pangea/dnd": "^18.0.1",
+    "apexcharts": "^6.5.0",
     "date-fns": "^3.6.0",
     "jodit-react": "^5.2.38",
     "lucide-react": "^0.487.0",
@@ -42,20 +46,24 @@
   },
   "scripts": {
     "start": "vite",
-    "build": "npm run clean && tsc -p tsconfig.build.json && tsc -p tsconfig.esm.json && node scripts/finalize-esm.mjs dist/esm && copyfiles -u 1 src/**/*.css src/assets/**/* dist/",
+    "build": "npm run clean && tsc -p tsconfig.build.json && tsc -p tsconfig.esm.json && node scripts/finalize-esm.mjs dist/esm && copyfiles -u 1 \"src/**/*.css\" \"src/assets/**/*.{png,jpg,jpeg,gif,svg,webp,ico,woff,woff2,ttf,eot}\" dist/",
+    "build:web": "vite build",
     "test": "jest",
     "test:watch": "jest --watch",
     "remove": "rm -rf dist/Pages dist/App.js dist/App.d.ts dist/Layout.js dist/Layout.d.ts dist/bootstrap.js dist/bootstrap.d.ts",
     "package": "npm version patch && npm run build && npm run remove && npm publish",
+    "size:web": "node scripts/bundle-size.mjs",
     "typecheck": "tsc --noEmit",
     "lint": "eslint src",
     "format:check": "prettier --check .",
     "format": "prettier --write .",
     "test:coverage": "jest --coverage",
-    "clean": "node -e \"require('fs').rmSync('dist',{recursive:true,force:true})\""
+    "clean": "node -e \"require('fs').rmSync('dist',{recursive:true,force:true})\"",
+    "prepare": "husky"
   },
   "jest": {
     "testEnvironment": "jsdom",
+    "testTimeout": 15000,
     "collectCoverage": true,
     "coverageThreshold": {
       "global": {
@@ -90,16 +98,23 @@
     "moduleNameMapper": {
       "\\.(css|less|scss|sass)$": "<rootDir>/__mocks__/styleMock.js"
     },
+    "modulePathIgnorePatterns": [
+      "<rootDir>/.worktrees/"
+    ],
     "testPathIgnorePatterns": [
       "/node_modules/",
       "<rootDir>/dist/",
-      "<rootDir>/.claude/"
+      "<rootDir>/.claude/",
+      "<rootDir>/.worktrees/"
     ],
     "testMatch": [
       "**/__tests__/**/*.[jt]s?(x)",
       "**/?(*.)+(spec|test).[jt]s?(x)"
     ]
   },
+  "lint-staged": {
+    "**/*Props.{ts,tsx}": "eslint"
+  },
   "browserslist": {
     "production": [
       ">0.2%",
@@ -139,15 +154,18 @@
     "autoprefixer": "^10.4.21",
     "babel-jest": "^29.7.0",
     "copyfiles": "^2.4.1",
+    "esbuild": "^0.25.12",
     "eslint": "^9.39.4",
+    "eslint-plugin-jsdoc": "^64.5.0",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^7.1.1",
     "framer-motion": "^10.18.0",
     "globals": "^17.6.0",
+    "husky": "^9.1.7",
     "jest": "^29.7.0",
     "jest-axe": "^11.0.0",
     "jest-environment-jsdom": "^29.7.0",
-    "path": "^0.12.7",
+    "lint-staged": "^17.5.1",
     "postcss": "^8.5.4",
     "prettier": "^3.3.2",
     "prop-types": "^15.8.1",
@@ -161,6 +179,8 @@
   },
   "peerDependencies": {
     "@chakra-ui/react": "^2.8.2",
+    "@emotion/react": "^11.11.4",
+    "@emotion/styled": "^11.11.5",
     "framer-motion": "^10.18.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"

package/dist/Assets/defaultLogo.tsx

@@ -1,26 +0,0 @@
-const DefaultLogo = () => {
-  return (
-    <svg
-      width="12.09"
-      height="15.95"
-      viewBox="0 0 31 29"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M30.4999 6.26137V7.81058H15.9761H14.8787V22.8508V28.8862H12.5226C9.6824 28.8862 7.32632 26.4656 7.06812 23.3995C7.06812 23.2381 7.06812 23.0444 7.06812 22.8508V18.3323C7.06812 18.2677 7.06812 18.2032 7.06812 18.1063V15.5889V6.2291C7.06812 2.80793 9.84378 -5.72205e-06 13.2972 -5.72205e-06H24.8517C28.0147 0.355021 30.4676 3.00158 30.4676 6.2291L30.4999 6.26137Z"
-        fill="currentColor"
-      />
-      <path
-        d="M7.10053 23.3672H7.03598C5.16402 23.2381 3.48571 22.4635 2.25926 21.3338C0.871428 20.0428 0 18.2677 0 16.3312V15.6211H7.06825V18.1386C7.06825 18.2032 7.06825 18.2677 7.06825 18.3645V22.883C7.06825 23.0767 7.06825 23.2381 7.06825 23.4317L7.10053 23.3672Z"
-        fill="currentColor"
-      />
-      <path
-        d="M30.4678 12.0063V15.6211V17.1703C30.4678 20.6238 26.272 23.3994 21.0757 23.3994H14.8789V22.8508V15.6211H22.6572V7.81056C22.6895 7.81056 30.5001 7.81056 30.5001 7.81056V11.5868C30.5001 11.7159 30.5001 11.8772 30.5001 12.0063H30.4678Z"
-        fill="currentColor"
-      />
-    </svg>
-  );
-};
-
-export default DefaultLogo;

package/dist/Components/Buttons/Buttons.d.ts

@@ -1,3 +0,0 @@
-import { ButtonsProps } from './ButtonsProps';
-declare const Buttons: ({ onClick, label, className, disabled }: ButtonsProps) => import("react/jsx-runtime").JSX.Element;
-export default Buttons;

package/dist/Components/Buttons/Buttons.js

@@ -1,7 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const Buttons = ({ onClick, label, className, disabled }) => {
-    return ((0, jsx_runtime_1.jsx)("button", { onClick: onClick, className: `bg-purple-600 text-white font-medium py-2 px-4 rounded focus:outline-none focus:ring-offset-2  ${className} ${disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}`, disabled: disabled, children: label }));
-};
-exports.default = Buttons;

package/dist/Components/Buttons/ButtonsProps.d.ts

@@ -1,6 +0,0 @@
-export type ButtonsProps = {
-    label: string;
-    onClick: () => void;
-    className?: string;
-    disabled?: boolean;
-};

package/dist/Components/Common/ErrorComponent.d.ts

@@ -1,5 +0,0 @@
-declare const ErrorComponent: ({ error, errorClassName, }: {
-    error: string;
-    errorClassName?: string;
-}) => import("react/jsx-runtime").JSX.Element;
-export default ErrorComponent;

package/dist/Components/Common/ErrorComponent.js

@@ -1,14 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("@chakra-ui/react");
-const useCustomTheme_1 = require("../../Theme/useCustomTheme");
-const accentText_1 = require("../../Theme/tokens/builders/accentText");
-const ErrorComponent = ({ error, errorClassName, }) => {
-    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
-    const errorFill = colors.semanticText.error;
-    // errorFill is ink, not a fill tuned to carry a mark — pick the mark's ink structurally.
-    const markInk = (0, accentText_1.onFilled)(errorFill, colors.white, colors.black);
-    return ((0, jsx_runtime_1.jsxs)(react_1.HStack, { as: "p", align: "flex-start", spacing: 1, mt: 1, fontSize: "sm", color: errorFill, className: errorClassName, children: [(0, jsx_runtime_1.jsxs)("svg", { width: "12", height: "12", viewBox: "0 0 100 100", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": true, children: [(0, jsx_runtime_1.jsx)("circle", { cx: "50", cy: "50", r: "50", fill: errorFill }), (0, jsx_runtime_1.jsx)("rect", { x: "46", y: "40", width: "8", height: "30", rx: "2", fill: markInk }), (0, jsx_runtime_1.jsx)("circle", { cx: "50", cy: "28", r: "4", fill: markInk })] }), (0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", children: error })] }));
-};
-exports.default = ErrorComponent;

package/dist/Components/Common/FormattedDescription.d.ts

@@ -1,5 +0,0 @@
-type Props = {
-    content?: string;
-};
-declare const FormattedDescription: ({ content }: Props) => import("react/jsx-runtime").JSX.Element | null;
-export default FormattedDescription;

package/dist/Components/Common/FormattedDescription.js

@@ -1,61 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("@chakra-ui/react");
-const useCustomTheme_1 = require("../../Theme/useCustomTheme");
-const InlineText = ({ text }) => {
-    const nodes = [];
-    let i = 0;
-    while (i < text.length) {
-        if (text.startsWith("**", i)) {
-            const end = text.indexOf("**", i + 2);
-            if (end !== -1) {
-                nodes.push((0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", fontWeight: "bold", children: text.slice(i + 2, end) }, `b-${i}`));
-                i = end + 2;
-                continue;
-            }
-        }
-        if (text.startsWith("*", i)) {
-            const end = text.indexOf("*", i + 1);
-            if (end !== -1) {
-                nodes.push((0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", children: text.slice(i + 1, end) }, `i-${i}`));
-                i = end + 1;
-                continue;
-            }
-        }
-        const nextBold = text.indexOf("**", i);
-        const nextIt = text.indexOf("*", i);
-        const next = nextBold === -1
-            ? nextIt
-            : nextIt === -1
-                ? nextBold
-                : Math.min(nextBold, nextIt);
-        if (next === -1) {
-            nodes.push((0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", children: text.slice(i) }, `t-${i}`));
-            break;
-        }
-        else {
-            nodes.push((0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", children: text.slice(i, next) }, `t-${i}`));
-            i = next;
-        }
-    }
-    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: nodes });
-};
-const FormattedDescription = ({ content }) => {
-    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
-    if (!content)
-        return null;
-    const lines = content.split(/\r?\n/);
-    return ((0, jsx_runtime_1.jsx)(react_1.Box, { children: lines.map((line, idx) => {
-            const m = line.match(/^(#{1,3})\s+(.*)$/);
-            if (m) {
-                const level = m[1].length;
-                const text = m[2];
-                const size = level === 1 ? "lg" : level === 2 ? "md" : "sm";
-                const weight = level === 1 ? "bold" : level === 2 ? "semibold" : "medium";
-                return ((0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: size, fontWeight: weight, mt: idx === 0 ? 0 : 2, textAlign: "left", children: (0, jsx_runtime_1.jsx)(InlineText, { text: text }) }, `h-${idx}`));
-            }
-            return ((0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "sm", color: colors.text[500], mt: idx === 0 ? 0 : 2, textAlign: "justify", children: (0, jsx_runtime_1.jsx)(InlineText, { text: line }) }, `p-${idx}`));
-        }) }));
-};
-exports.default = FormattedDescription;

package/dist/Components/Common/Label.d.ts

@@ -1,8 +0,0 @@
-declare const Label: ({ label, htmlFor, labelClassName, isRequired, }: {
-    label: string;
-    /** id of the control being labelled. Omit rather than guess — `label` text is not an id. */
-    htmlFor?: string;
-    labelClassName?: string;
-    isRequired?: boolean;
-}) => import("react/jsx-runtime").JSX.Element;
-export default Label;

package/dist/Components/Common/Label.js

@@ -1,10 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("@chakra-ui/react");
-const useCustomTheme_1 = require("../../Theme/useCustomTheme");
-const Label = ({ label, htmlFor, labelClassName, isRequired, }) => {
-    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
-    return ((0, jsx_runtime_1.jsxs)(react_1.FormLabel, { htmlFor: htmlFor, mb: 1, fontSize: "sm", fontWeight: "medium", className: labelClassName, color: colors.header[500], children: [label, isRequired && ((0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", color: colors.semanticText.error, ml: 1, children: "*" }))] }));
-};
-exports.default = Label;

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

@@ -1,4 +0,0 @@
-import React from "react";
-import { InputProps } from "./InputProps";
-declare const _default: React.MemoExoticComponent<({ label, type, value, onChange, error, placeholder, className, inputBoxClassName, isRequired, isInformation, informationMessage, }: InputProps) => import("react/jsx-runtime").JSX.Element>;
-export default _default;

package/dist/Components/Input/Input/Input.js

@@ -1,74 +0,0 @@
-"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 () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = __importStar(require("react"));
-const react_2 = require("@chakra-ui/react");
-const lucide_react_1 = require("lucide-react");
-const FormLabel_1 = require("../../Common/FormLabel");
-const fieldStyles_1 = require("../../Common/fieldStyles");
-const ErrorComponent_1 = __importDefault(require("../../Common/ErrorComponent"));
-const accentText_1 = require("../../../Theme/tokens/builders/accentText");
-const useCustomTheme_1 = require("../../../Theme/useCustomTheme");
-const Input = ({ label, type, value, onChange, error, placeholder, className, inputBoxClassName, isRequired, isInformation, informationMessage, }) => {
-    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
-    const [showPassword, setShowPassword] = (0, react_1.useState)(false);
-    const isPassword = type === "password";
-    const inputType = isPassword ? (showPassword ? "text" : "password") : type;
-    const borderColor = error
-        ? colors.semanticText.error
-        : value
-            ? colors.primary[500]
-            : colors.boxborder[500];
-    const shadowPrimary = colors.boxShadow.primary;
-    const shadowError = colors.boxShadow.error;
-    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { className: inputBoxClassName, mb: 4, children: [(0, jsx_runtime_1.jsx)(FormLabel_1.TextLabel, { label: label, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage }), (0, jsx_runtime_1.jsxs)(react_2.Box, { position: "relative", w: "100%", overflow: "hidden", children: [(0, jsx_runtime_1.jsx)(react_2.Input, { type: inputType, value: value, onChange: (e) => onChange(e.target.value), placeholder: placeholder, className: className, px: 4, py: 2, borderRadius: fieldStyles_1.FIELD_RADIUS, borderWidth: "1px", borderColor: borderColor, color: (0, accentText_1.accentTextOnCanvas)(colors.secondary, colors.backgroundColor.main), pr: isPassword ? 10 : 4, _hover: {
-                            borderColor: error
-                                ? colors.semantic.error[600]
-                                : value
-                                    ? colors.primary[600]
-                                    : colors.gray[400],
-                        }, _focus: {
-                            borderColor: error ? colors.semanticText.error : colors.primary[500],
-                            boxShadow: error
-                                ? `0 0 0 0.125rem ${shadowError}`
-                                : `0 0 0 0.125rem ${shadowPrimary}`,
-                            outline: "none",
-                        }, required: isRequired }), isPassword && ((0, jsx_runtime_1.jsx)(react_2.IconButton, { type: "button", "aria-label": showPassword ? "Hide password" : "Show password", variant: "ghost", size: "sm", position: "absolute", right: 2, top: "50%", transform: "translateY(-50%)", icon: showPassword ? (0, jsx_runtime_1.jsx)(lucide_react_1.Eye, { size: 20 }) : (0, jsx_runtime_1.jsx)(lucide_react_1.EyeOff, { size: 20 }), onClick: () => setShowPassword((prev) => !prev), color: colors.textMuted }))] }), error && (0, jsx_runtime_1.jsx)(ErrorComponent_1.default, { error: error })] }));
-};
-exports.default = react_1.default.memo(Input);

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

@@ -1,19 +0,0 @@
-export type InputProps = {
-    label: string;
-    type?: "email" | "password" | "text" | "number";
-    value: string;
-    onChange: (val: string) => void;
-    error?: string;
-    placeholder?: string;
-    className?: string;
-    inputBoxClassName?: string;
-    inputClassName?: string;
-    labelClassName?: string;
-    errorClassName?: string;
-    disabled?: boolean;
-    autoComplete?: string;
-    autoFocus?: boolean;
-    isRequired?: boolean;
-    isInformation?: boolean;
-    informationMessage?: string;
-};

package/dist/Components/PinInputs/PinInputs.d.ts

@@ -1,3 +0,0 @@
-import { PinInputsProps } from "./PinInputsProps";
-declare const PinInputs: ({ length, label, error, onChange, onComplete, mask, placeholder, }: PinInputsProps) => import("react/jsx-runtime").JSX.Element;
-export default PinInputs;

package/dist/Components/PinInputs/PinInputs.js

@@ -1,46 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const react_2 = require("@chakra-ui/react");
-const Label_1 = __importDefault(require("../Common/Label"));
-const ErrorComponent_1 = __importDefault(require("../Common/ErrorComponent"));
-const useCustomTheme_1 = require("../../Theme/useCustomTheme");
-const PinInputs = ({ length = 3, label, error, onChange, onComplete, mask = false, placeholder = "*", }) => {
-    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
-    const [values, setValues] = (0, react_1.useState)(Array(length).fill(""));
-    const inputsRef = (0, react_1.useRef)([]);
-    const borderColor = error
-        ? colors.semanticText.error
-        : colors.boxborder[500];
-    const focusRing = error ? colors.boxShadow.error : colors.boxShadow.primary;
-    const focusShadow = `0 0 0 0.125rem ${focusRing}`;
-    const handleChange = (index, value) => {
-        var _a;
-        if (!/^[0-9]?$/.test(value))
-            return;
-        const newValues = [...values];
-        newValues[index] = value;
-        setValues(newValues);
-        onChange === null || onChange === void 0 ? void 0 : onChange(newValues.join(""));
-        if (value && index < length - 1) {
-            (_a = inputsRef.current[index + 1]) === null || _a === void 0 ? void 0 : _a.focus();
-        }
-        if (newValues.every((v) => v !== "")) {
-            onComplete === null || onComplete === void 0 ? void 0 : onComplete(newValues.join(""));
-        }
-    };
-    const handleKeyDown = (e, index) => {
-        var _a;
-        if (e.key === "Backspace" && !values[index] && index > 0) {
-            (_a = inputsRef.current[index - 1]) === null || _a === void 0 ? void 0 : _a.focus();
-        }
-    };
-    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { children: [label && (0, jsx_runtime_1.jsx)(Label_1.default, { label: label }), (0, jsx_runtime_1.jsx)(react_2.HStack, { spacing: 2, children: Array.from({ length }).map((_, index) => ((0, jsx_runtime_1.jsx)(react_2.Input, { ref: (el) => {
-                        inputsRef.current[index] = el;
-                    }, type: mask ? "password" : "text", inputMode: "numeric", maxLength: 1, placeholder: placeholder, value: values[index], onChange: (e) => handleChange(index, e.target.value), onKeyDown: (e) => handleKeyDown(e, index), w: 12, h: 12, textAlign: "center", fontSize: "lg", borderWidth: "1px", borderColor: borderColor, borderRadius: "md", _focus: { boxShadow: focusShadow, outline: "none" } }, index))) }), error && (0, jsx_runtime_1.jsx)(ErrorComponent_1.default, { error: error })] }));
-};
-exports.default = PinInputs;

package/dist/Components/PinInputs/PinInputsProps.d.ts

@@ -1,9 +0,0 @@
-export type PinInputsProps = {
-    length?: number;
-    label?: string;
-    error?: string;
-    mask?: boolean;
-    placeholder?: string;
-    onChange?: (value: string) => void;
-    onComplete?: (value: string) => void;
-};

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

@@ -1,7 +0,0 @@
-import { SizeType } from './ProductCardProps';
-declare const ProductLabel: ({ label, description, size }: {
-    label: string;
-    description?: string;
-    size: SizeType;
-}) => import("react/jsx-runtime").JSX.Element;
-export default ProductLabel;

package/dist/Components/ProductCard/ProductLabel.js

@@ -1,20 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("@chakra-ui/react");
-const ProductLabel = ({ label, description, size }) => {
-    const fontSizes = {
-        xs: "md",
-        sm: "lg",
-        md: "xl",
-        lg: "2xl"
-    };
-    const descriptionSizes = {
-        xs: 'xs',
-        sm: 'sm',
-        md: 'md',
-        lg: 'lg',
-    };
-    return ((0, jsx_runtime_1.jsxs)(react_1.Box, { children: [(0, jsx_runtime_1.jsx)(react_1.Text, { fontWeight: "bold", fontSize: fontSizes[size], children: label }), description && (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: descriptionSizes[size], fontStyle: "italic", children: description })] }));
-};
-exports.default = ProductLabel;

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

@@ -1,10 +0,0 @@
-import React from 'react';
-import { options, SizeType } from './ProductCardProps';
-type ProductPriceProps = {
-    options: options[];
-    size: SizeType;
-    onSelect?: (option: options) => void;
-    rightSlot?: React.ReactNode;
-};
-declare const ProductPrice: ({ options, size, onSelect, rightSlot }: ProductPriceProps) => import("react/jsx-runtime").JSX.Element;
-export default ProductPrice;

package/dist/Components/ProductCard/ProductPrice.js

@@ -1,115 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const react_2 = require("@chakra-ui/react");
-const OverflowTooltipText_1 = __importDefault(require("../SideBar/components/OverflowTooltipText"));
-const useCustomTheme_1 = require("../../Theme/useCustomTheme");
-const accentText_1 = require("../../Theme/tokens/builders/accentText");
-const rafThrottle_1 = require("../../Utils/rafThrottle");
-const sizeConfig = {
-    xs: {
-        font: "xs",
-        label: "sm",
-        price: "sm",
-        px: 2,
-        py: 1,
-        rowHeight: "2rem",
-        iconSize: "0.75rem",
-        dotSize: "0.375rem",
-    },
-    sm: {
-        font: "sm",
-        label: "md",
-        price: "md",
-        px: 3,
-        py: 1.5,
-        rowHeight: "2.5rem",
-        iconSize: "1rem",
-        dotSize: "0.5rem",
-    },
-    md: {
-        font: "md",
-        label: "lg",
-        price: "lg",
-        px: 4,
-        py: 2,
-        rowHeight: "3rem",
-        iconSize: "1.25rem",
-        dotSize: "0.625rem",
-    },
-    lg: {
-        font: "lg",
-        label: "xl",
-        price: "xl",
-        px: 5,
-        py: 2.5,
-        rowHeight: "3.5rem",
-        iconSize: "1.5rem",
-        dotSize: "0.75rem",
-    },
-};
-const ProductPrice = ({ options, size, onSelect, rightSlot }) => {
-    const cfg = sizeConfig[size];
-    const theme = (0, useCustomTheme_1.useCustomTheme)();
-    const [isOpen, setIsOpen] = (0, react_1.useState)(false);
-    const [selected, setSelected] = (0, react_1.useState)(options[0]);
-    const [dropdownPosition, setDropdownPosition] = (0, react_1.useState)({ top: 0, left: 0, width: 0 });
-    const buttonRef = (0, react_1.useRef)(null);
-    const dropdownRef = (0, react_1.useRef)(null);
-    const isSingleOption = options.length === 1;
-    const isMobile = (0, react_2.useBreakpointValue)({ base: true, md: false });
-    (0, react_2.useOutsideClick)({
-        ref: dropdownRef,
-        handler: () => setIsOpen(false),
-    });
-    const getDiscountedPrice = (option) => Math.round(option.price - (option.price * option.offer) / 100);
-    (0, react_1.useEffect)(() => {
-        const updatePosition = () => {
-            if (buttonRef.current) {
-                const rect = buttonRef.current.getBoundingClientRect();
-                setDropdownPosition({
-                    top: rect.bottom + 4,
-                    left: rect.left,
-                    width: rect.width
-                });
-            }
-        };
-        if (!isOpen)
-            return;
-        updatePosition();
-        const onReposition = (0, rafThrottle_1.rafThrottle)(updatePosition);
-        window.addEventListener("resize", onReposition);
-        window.addEventListener("scroll", onReposition, {
-            capture: true, // every scrollable ancestor, not just the window
-            passive: true,
-        });
-        return () => {
-            onReposition.cancel();
-            window.removeEventListener("resize", onReposition);
-            window.removeEventListener("scroll", onReposition, true);
-        };
-    }, [isOpen]);
-    (0, react_1.useEffect)(() => {
-        onSelect === null || onSelect === void 0 ? void 0 : onSelect(selected);
-    }, [selected, onSelect]);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isSingleOption ? ((0, jsx_runtime_1.jsx)(react_2.Box, { border: "0.063rem solid", borderColor: theme.colors.red[300], bg: theme.colors.red[50], px: cfg.px, 
-                // py={cfg.py}
-                rounded: "md", display: "inline-block", w: "100%", children: (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: cfg.label, fontWeight: "medium", children: options[0].label }) })) : ((0, jsx_runtime_1.jsxs)(react_2.Box, { ref: buttonRef, onClick: () => setIsOpen(!isOpen), border: "0.063rem solid", borderColor: theme.colors.red[300], bg: theme.colors.red[50], px: cfg.px, 
-                // py={cfg.py}
-                rounded: "md", cursor: "pointer", display: "flex", justifyContent: "space-between", alignItems: "center", w: "100%", children: [(0, jsx_runtime_1.jsx)(react_2.Box, { flex: "1", minW: 0, children: (0, jsx_runtime_1.jsx)(OverflowTooltipText_1.default, { placement: "top", maxWidth: "100%", fontSize: cfg.label, fontWeight: "medium", whiteSpace: "nowrap", children: selected.label }) }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: cfg.font, color: (0, accentText_1.accentTextOnCanvas)(theme.colors.red, theme.colors.red[50]), transform: isOpen ? 'rotate(180deg)' : 'rotate(0deg)', transition: "transform 0.2s", children: "\u25BE" })] })), !isSingleOption && isOpen && ((0, jsx_runtime_1.jsx)(react_2.Portal, { children: (0, jsx_runtime_1.jsx)(react_2.Box, { ref: dropdownRef, position: "fixed", top: `${dropdownPosition.top}px`, left: `${dropdownPosition.left}px`, width: `${dropdownPosition.width}px`, bg: theme.colors.background[50], border: "0.063rem solid", borderColor: theme.colors.red[300], borderRadius: "md", overflow: "hidden", maxH: "13rem", overflowY: "auto", shadow: "md", zIndex: 100000, children: options.map((option) => {
-                        const discounted = getDiscountedPrice(option);
-                        const isSelected = selected.var_id === option.var_id;
-                        return ((0, jsx_runtime_1.jsxs)(react_2.Grid, { px: 1, py: 0.5, cursor: "pointer", bg: isSelected ? theme.colors.red[50] : theme.colors.background[50], borderLeft: isSelected ? '0.25rem solid' : '0.25rem solid transparent', borderLeftColor: isSelected ? theme.colors.red[300] : "transparent", _hover: { bg: theme.colors.red[100] }, onClick: () => {
-                                setSelected(option);
-                                setIsOpen(false);
-                            }, templateColumns: { base: '1fr auto', md: '1fr auto' }, 
-                            // columnGap={{ base: 2, md: 3 }}
-                            // rowGap={{ base: 1.5, md: 2 }}
-                            alignItems: "center", children: [(0, jsx_runtime_1.jsx)(react_2.HStack, { gridColumn: 1, gridRow: 1, spacing: 2, align: "center", minW: 0, mb: 0, children: (0, jsx_runtime_1.jsx)(react_2.Box, { flex: "1", minW: 0, children: (0, jsx_runtime_1.jsx)(OverflowTooltipText_1.default, { placement: "top", maxWidth: "100%", fontSize: { base: "xs", md: "sm" }, fontWeight: "medium", whiteSpace: "nowrap", children: option.label }) }) }), (0, jsx_runtime_1.jsx)(react_2.Box, { gridColumn: 1, gridRow: 2, mt: 0, textAlign: "left", children: (0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 2, align: "center", children: [option.offer > 0 && ((0, jsx_runtime_1.jsx)(react_2.Badge, { bg: theme.colors.green[100], color: (0, accentText_1.accentTextOnCanvas)(theme.colors.green, theme.colors.green[100]), borderRadius: "md", px: { base: 0, md: 0.5 }, py: { base: 0, md: 0.25 }, fontWeight: "bold", fontSize: "10px", flexShrink: 0, children: isMobile ? `${option.offer}%` : `${option.offer}% OFF` })), (0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "sm", fontWeight: "bold", color: (0, accentText_1.accentTextOnCanvas)(theme.colors.red, isSelected ? theme.colors.red[50] : theme.colors.background[50]), whiteSpace: "nowrap", children: ["\u20B9", discounted] }), option.offer > 0 && ((0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "xs", color: theme.colors.textMuted, textDecoration: "line-through", whiteSpace: "nowrap", children: ["\u20B9", option.price] }))] }) }), (0, jsx_runtime_1.jsx)(react_2.Box, { gridColumn: 2, gridRow: 1, ml: { base: 0, md: 0 }, justifySelf: "end", w: { base: "0.625rem", md: "0.75rem" }, h: { base: "0.625rem", md: "0.75rem" }, minW: { base: "0.625rem", md: "0.75rem" }, borderRadius: "full", border: "0.125rem solid", borderColor: isSelected ? theme.colors.red[500] : theme.colors.boxborder[500], bg: theme.colors.background[50], display: "flex", alignItems: "center", justifyContent: "center", boxShadow: "none", children: isSelected && ((0, jsx_runtime_1.jsx)(react_2.Box, { w: { base: "0.25rem", md: "0.3125rem" }, h: { base: "0.25rem", md: "0.3125rem" }, bg: theme.colors.red[500], borderRadius: "full" })) })] }, option.var_id));
-                    }) }) })), (0, jsx_runtime_1.jsxs)(react_2.Flex, { mt: 2, w: "full", gap: 3, direction: { base: "column", md: "row" }, align: { base: "flex-start", md: "center" }, justify: { base: "flex-start", md: rightSlot ? "space-between" : "flex-start" }, children: [(0, jsx_runtime_1.jsxs)(react_2.Box, { display: "flex", alignItems: "center", fontSize: cfg.price, gap: 2, minW: 0, children: [selected.offer > 0 && ((0, jsx_runtime_1.jsxs)(react_2.Text, { color: theme.colors.textMuted, textDecoration: "line-through", children: ["\u20B9", selected.price] })), (0, jsx_runtime_1.jsxs)(react_2.Text, { color: (0, accentText_1.accentTextOnCanvas)(theme.colors.red, theme.colors.backgroundColor.main), fontWeight: "semibold", children: ["\u20B9", getDiscountedPrice(selected)] })] }), rightSlot && ((0, jsx_runtime_1.jsx)(react_2.Box, { flexShrink: 0, mt: { base: 2, md: 0 }, children: rightSlot }))] })] }));
-};
-exports.default = ProductPrice;

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

@@ -1,7 +0,0 @@
-type ProductReviewProps = {
-    rating?: string | number;
-    reviewCount?: string | number;
-    mb?: number;
-};
-declare const ProductReview: ({ rating, reviewCount, mb }: ProductReviewProps) => import("react/jsx-runtime").JSX.Element;
-export default ProductReview;

package/dist/Components/ProductCard/ProductReview.js

@@ -1,24 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("@chakra-ui/react");
-const lucide_react_1 = require("lucide-react");
-const useCustomTheme_1 = require("../../Theme/useCustomTheme");
-const accentText_1 = require("../../Theme/tokens/builders/accentText");
-// The theme's `yellow` scale reverses index roles in dark mode (like every utility hue), so
-// pulling it through the theme would silently flip this decorative "filled star" from gold to
-// pale. A rating star is a universal, brand-independent gold — not something that should follow
-// canvas/mode — so it's pinned here instead. Needs a design-token addition (a mode-stable
-// "rating gold") to pixelize-design-library if this pattern is needed elsewhere.
-const RATING_STAR_FILL = "#ECC94B";
-const ProductReview = ({ rating, reviewCount, mb = 0 }) => {
-    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
-    const hasRating = rating !== undefined && rating !== null;
-    const hasReviewCount = reviewCount !== undefined && reviewCount !== null;
-    // Convert rating to number and ensure it's between 0 and 5
-    // Calculate fill percentage: (rating / 5) * 100%
-    const numericRating = hasRating ? Math.min(Math.max(Number(rating), 0), 5) : 0;
-    const fillPercentage = (numericRating / 6) * 100;
-    return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: 2, mb: mb, children: [hasRating && ((0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: 1, bg: colors.teal[50], color: (0, accentText_1.accentTextOnCanvas)(colors.teal, colors.teal[50]), px: 2, borderRadius: "md", children: [(0, jsx_runtime_1.jsxs)(react_1.Box, { position: "relative", flexShrink: 0, display: "inline-block", width: "14px", height: "14px", lineHeight: 0, children: [(0, jsx_runtime_1.jsx)(react_1.Box, { position: "absolute", top: 0, left: 0, width: "14px", height: "14px", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Star, { size: 14, fill: "none", strokeWidth: 1.5 }) }), fillPercentage > 0 && ((0, jsx_runtime_1.jsx)(react_1.Box, { position: "absolute", top: 0, left: 0, width: `${fillPercentage}%`, height: "100%", overflow: "hidden", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Star, { size: 14, color: RATING_STAR_FILL, fill: RATING_STAR_FILL }) }))] }), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "sm", fontWeight: "bold", children: numericRating })] })), hasRating && hasReviewCount && (0, jsx_runtime_1.jsx)(react_1.Box, { h: "4", w: "0.063rem", bg: colors.boxborder[500] }), hasReviewCount && ((0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: "1", children: [(0, jsx_runtime_1.jsx)(react_1.Icon, { as: lucide_react_1.BookCheck, boxSize: 3.5 }), (0, jsx_runtime_1.jsxs)(react_1.Text, { fontSize: "sm", color: colors.textMuted, children: ["(", reviewCount, ")"] })] }))] }));
-};
-exports.default = ProductReview;