pixelize-design-library 2.4.2-beta.64 → 2.4.2-beta.66

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

@@ -1,75 +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, isDisabled, disabled, }) => {
-    const isFieldDisabled = isDisabled !== null && isDisabled !== void 0 ? isDisabled : disabled;
-    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, isDisabled: isFieldDisabled, _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,24 +0,0 @@
-/** Internal, not exported from index.ts — use TextInput for a public field. No id prop; the label always renders as a plain span, never linked to the input. */
-export type InputProps = {
-    label: string;
-    type?: "email" | "password" | "text" | "number";
-    value: string;
-    onChange: (val: string) => void;
-    error?: string;
-    placeholder?: string;
-    className?: string;
-    inputBoxClassName?: string;
-    /** autoComplete, autoFocus, inputClassName, labelClassName, errorClassName are typed here but Input.tsx never reads them — no effect. */
-    inputClassName?: string;
-    labelClassName?: string;
-    errorClassName?: string;
-    /** Disables the field; wins over `disabled` when both are set. */
-    isDisabled?: boolean;
-    /** @deprecated Use `isDisabled` — renamed to match every other field. */
-    disabled?: boolean;
-    autoComplete?: string;
-    autoFocus?: boolean;
-    isRequired?: boolean;
-    isInformation?: boolean;
-    informationMessage?: string;
-};

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

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

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

@@ -1,7 +0,0 @@
-import type { OptionAxis, ProductMedia, ProductVariant } from "../Commerce/commerceTypes";
-export declare const jacketMedia: ProductMedia[];
-export declare const jacketAxes: OptionAxis[];
-export declare const jacketVariants: ProductVariant[];
-export declare const jacketMediaIds: Record<string, string[]>;
-export declare const mugMedia: ProductMedia[];
-export declare const mugVariants: ProductVariant[];

package/dist/Components/ProductCard/productCardFixtures.js

@@ -1,61 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.mugVariants = exports.mugMedia = exports.jacketMediaIds = exports.jacketVariants = exports.jacketAxes = exports.jacketMedia = void 0;
-exports.jacketMedia = [
-    { id: "indigo-front", src: "/p/indigo-front.webp", alt: "Jacket in indigo, front" },
-    { id: "indigo-back", src: "/p/indigo-back.webp", alt: "Jacket in indigo, back" },
-    { id: "ice-front", src: "/p/ice-front.webp", alt: "Jacket in ice blue, front" },
-    { id: "ice-back", src: "/p/ice-back.webp", alt: "Jacket in ice blue, back" },
-    { id: "black-front", src: "/p/black-front.webp", alt: "Jacket in black, front" },
-    { id: "olive-front", src: "/p/olive-front.webp", alt: "Jacket in olive, front" },
-];
-exports.jacketAxes = [
-    {
-        id: "colour",
-        label: "Colour",
-        type: "swatch",
-        values: [
-            { id: "indigo", label: "Indigo Wash", swatch: "steelblue" },
-            { id: "ice", label: "Ice Blue", swatch: "lightsteelblue" },
-            { id: "black", label: "Washed Black", swatch: "black" },
-            { id: "olive", label: "Olive", swatch: "olive" },
-        ],
-    },
-    {
-        id: "size",
-        label: "Size",
-        type: "chip",
-        values: [
-            { id: "m", label: "M" },
-            { id: "l", label: "L" },
-        ],
-    },
-];
-const sized = (colour, size, stock) => ({
-    id: `jacket-${colour}-${size}`,
-    options: { colour, size },
-    price: 3499,
-    mrp: 4999,
-    stock,
-});
-exports.jacketVariants = [
-    sized("indigo", "m", 10),
-    sized("indigo", "l", 4),
-    sized("ice", "m", 9),
-    sized("ice", "l", 9),
-    sized("black", "m", 0),
-    sized("black", "l", 0),
-    sized("olive", "m", 6),
-    sized("olive", "l", 6),
-];
-exports.jacketMediaIds = {
-    "colour:indigo": ["indigo-front", "indigo-back"],
-    "colour:ice": ["ice-front", "ice-back"],
-    "colour:black": ["black-front"],
-    "colour:olive": ["olive-front"],
-};
-exports.mugMedia = [
-    { id: "front", src: "/p/mug.webp", alt: "Mug, front" },
-    { id: "detail", src: "/p/mug-d.webp", alt: "Mug, glaze close-up" },
-];
-exports.mugVariants = [{ id: "mug-default", options: {}, price: 699, stock: 46 }];

package/dist/esm/Components/Buttons/Buttons.js

@@ -1,4 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import Button from '../Button/Button.js';
-const Buttons = ({ onClick, label, isDisabled, disabled }) => (_jsx(Button, { label: label, onClick: onClick, isDisabled: isDisabled !== null && isDisabled !== void 0 ? isDisabled : disabled, colorScheme: "primary" }));
-export default Buttons;

package/dist/esm/Components/Common/ErrorComponent.js

@@ -1,14 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { HStack, Text } from "@chakra-ui/react";
-import { useCustomTheme } from "../../Theme/useCustomTheme.js";
-import { resolveFilledSurface } from "../../Theme/tokens/builders/filledSurface.js";
-/** Inline error row for Input; `error` is the message text itself, not ErrorMessage's boolean `error` + `errorMessage` pair, and there's no `id` for aria-describedby. */
-const ErrorComponent = ({ error, errorClassName, }) => {
-    const { colors } = useCustomTheme();
-    const errorText = colors.semanticText.error;
-    const errorSolid = resolveFilledSurface(colors.semantic.error, colors);
-    const errorFill = errorSolid.fill;
-    const markInk = errorSolid.color;
-    return (_jsxs(HStack, { as: "p", align: "flex-start", spacing: 1, mt: 1, fontSize: "sm", color: errorText, className: errorClassName, children: [_jsxs("svg", { width: "12", height: "12", viewBox: "0 0 100 100", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": true, children: [_jsx("circle", { cx: "50", cy: "50", r: "50", fill: errorFill }), _jsx("rect", { x: "46", y: "40", width: "8", height: "30", rx: "2", fill: markInk }), _jsx("circle", { cx: "50", cy: "28", r: "4", fill: markInk })] }), _jsx(Text, { as: "span", children: error })] }));
-};
-export default ErrorComponent;

package/dist/esm/Components/Common/FormattedDescription.js

@@ -1,60 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-import { Box, Text } from "@chakra-ui/react";
-import { useCustomTheme } from "../../Theme/useCustomTheme.js";
-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(_jsx(Text, { as: "span", fontWeight: 700, 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(_jsx(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(_jsx(Text, { as: "span", children: text.slice(i) }, `t-${i}`));
-            break;
-        }
-        else {
-            nodes.push(_jsx(Text, { as: "span", children: text.slice(i, next) }, `t-${i}`));
-            i = next;
-        }
-    }
-    return _jsx(_Fragment, { children: nodes });
-};
-/** Not a full Markdown renderer — lists, links and code blocks render as literal text; returns null (no wrapper) when `content` is falsy. */
-const FormattedDescription = ({ content }) => {
-    const { colors } = useCustomTheme();
-    if (!content)
-        return null;
-    const lines = content.split(/\r?\n/);
-    return (_jsx(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 (_jsx(Text, { fontSize: size, fontWeight: weight, mt: idx === 0 ? 0 : 2, textAlign: "left", children: _jsx(InlineText, { text: text }) }, `h-${idx}`));
-            }
-            return (_jsx(Text, { fontSize: "sm", color: colors.text[500], mt: idx === 0 ? 0 : 2, textAlign: "justify", children: _jsx(InlineText, { text: line }) }, `p-${idx}`));
-        }) }));
-};
-export default FormattedDescription;

package/dist/esm/Components/Common/Label.js

@@ -1,10 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { FormLabel, Text } from "@chakra-ui/react";
-import { useCustomTheme } from "../../Theme/useCustomTheme.js";
-import { fieldLabelStyles } from "./FormLabel.js";
-/** Always renders a real Chakra `<label>` (FormLabel), even without `htmlFor` — unlike `TextLabel` (FormLabel.tsx), which falls back to a plain `<span>`. Same look as `TextLabel`. */
-const Label = ({ label, htmlFor, labelClassName, isRequired, }) => {
-    const { colors } = useCustomTheme();
-    return (_jsxs(FormLabel, { htmlFor: htmlFor, className: labelClassName, me: 0, ...fieldLabelStyles(colors), children: [label, isRequired && (_jsx(Text, { as: "span", color: colors.semanticText.error, ml: "0.125rem", children: "*" }))] }));
-};
-export default Label;

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

@@ -1,37 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useState } from "react";
-import { Box, Input as ChakraInput, IconButton } from "@chakra-ui/react";
-import { Eye, EyeOff } from "lucide-react";
-import { TextLabel } from "../../Common/FormLabel.js";
-import { FIELD_RADIUS } from "../../Common/fieldStyles.js";
-import ErrorComponent from "../../Common/ErrorComponent.js";
-import { accentTextOnCanvas } from "../../../Theme/tokens/builders/accentText.js";
-import { useCustomTheme } from "../../../Theme/useCustomTheme.js";
-const Input = ({ label, type, value, onChange, error, placeholder, className, inputBoxClassName, isRequired, isInformation, informationMessage, isDisabled, disabled, }) => {
-    const isFieldDisabled = isDisabled !== null && isDisabled !== void 0 ? isDisabled : disabled;
-    const { colors } = useCustomTheme();
-    const [showPassword, setShowPassword] = 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 (_jsxs(Box, { className: inputBoxClassName, mb: 4, children: [_jsx(TextLabel, { label: label, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage }), _jsxs(Box, { position: "relative", w: "100%", overflow: "hidden", children: [_jsx(ChakraInput, { type: inputType, value: value, onChange: (e) => onChange(e.target.value), placeholder: placeholder, className: className, px: 4, py: 2, borderRadius: FIELD_RADIUS, borderWidth: "1px", borderColor: borderColor, color: accentTextOnCanvas(colors.secondary, colors.backgroundColor.main), pr: isPassword ? 10 : 4, isDisabled: isFieldDisabled, _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 && (_jsx(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 ? _jsx(Eye, { size: 20 }) : _jsx(EyeOff, { size: 20 }), onClick: () => setShowPassword((prev) => !prev), color: colors.textMuted }))] }), error && _jsx(ErrorComponent, { error: error })] }));
-};
-export default React.memo(Input);

package/dist/esm/Components/Input/Input/InputProps.js

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

package/dist/esm/Components/ProductCard/productCardFixtures.js

@@ -1,58 +0,0 @@
-export const jacketMedia = [
-    { id: "indigo-front", src: "/p/indigo-front.webp", alt: "Jacket in indigo, front" },
-    { id: "indigo-back", src: "/p/indigo-back.webp", alt: "Jacket in indigo, back" },
-    { id: "ice-front", src: "/p/ice-front.webp", alt: "Jacket in ice blue, front" },
-    { id: "ice-back", src: "/p/ice-back.webp", alt: "Jacket in ice blue, back" },
-    { id: "black-front", src: "/p/black-front.webp", alt: "Jacket in black, front" },
-    { id: "olive-front", src: "/p/olive-front.webp", alt: "Jacket in olive, front" },
-];
-export const jacketAxes = [
-    {
-        id: "colour",
-        label: "Colour",
-        type: "swatch",
-        values: [
-            { id: "indigo", label: "Indigo Wash", swatch: "steelblue" },
-            { id: "ice", label: "Ice Blue", swatch: "lightsteelblue" },
-            { id: "black", label: "Washed Black", swatch: "black" },
-            { id: "olive", label: "Olive", swatch: "olive" },
-        ],
-    },
-    {
-        id: "size",
-        label: "Size",
-        type: "chip",
-        values: [
-            { id: "m", label: "M" },
-            { id: "l", label: "L" },
-        ],
-    },
-];
-const sized = (colour, size, stock) => ({
-    id: `jacket-${colour}-${size}`,
-    options: { colour, size },
-    price: 3499,
-    mrp: 4999,
-    stock,
-});
-export const jacketVariants = [
-    sized("indigo", "m", 10),
-    sized("indigo", "l", 4),
-    sized("ice", "m", 9),
-    sized("ice", "l", 9),
-    sized("black", "m", 0),
-    sized("black", "l", 0),
-    sized("olive", "m", 6),
-    sized("olive", "l", 6),
-];
-export const jacketMediaIds = {
-    "colour:indigo": ["indigo-front", "indigo-back"],
-    "colour:ice": ["ice-front", "ice-back"],
-    "colour:black": ["black-front"],
-    "colour:olive": ["olive-front"],
-};
-export const mugMedia = [
-    { id: "front", src: "/p/mug.webp", alt: "Mug, front" },
-    { id: "detail", src: "/p/mug-d.webp", alt: "Mug, glaze close-up" },
-];
-export const mugVariants = [{ id: "mug-default", options: {}, price: 699, stock: 46 }];

package/dist/esm/services/feedback.js

@@ -1,15 +0,0 @@
-export async function submitFeedback(options) {
-    const { endpoint, payload, headers } = options;
-    const res = await fetch(endpoint, {
-        method: "POST",
-        headers: {
-            "Content-Type": "application/json",
-            ...(headers !== null && headers !== void 0 ? headers : {}),
-        },
-        body: JSON.stringify(payload),
-    });
-    if (!res.ok) {
-        const text = await res.text().catch(() => "");
-        throw new Error(`Feedback submit failed: ${res.status} ${text}`);
-    }
-}

package/dist/services/feedback.d.ts

@@ -1,12 +0,0 @@
-export type SubmitFeedbackOptions = {
-    endpoint: string;
-    payload: {
-        type: "comments" | "suggestions" | "questions";
-        message: string;
-        firstName: string;
-        lastName: string;
-        email: string;
-    };
-    headers?: Record<string, string>;
-};
-export declare function submitFeedback(options: SubmitFeedbackOptions): Promise<void>;

package/dist/services/feedback.js

@@ -1,18 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.submitFeedback = submitFeedback;
-async function submitFeedback(options) {
-    const { endpoint, payload, headers } = options;
-    const res = await fetch(endpoint, {
-        method: "POST",
-        headers: {
-            "Content-Type": "application/json",
-            ...(headers !== null && headers !== void 0 ? headers : {}),
-        },
-        body: JSON.stringify(payload),
-    });
-    if (!res.ok) {
-        const text = await res.text().catch(() => "");
-        throw new Error(`Feedback submit failed: ${res.status} ${text}`);
-    }
-}