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

package/dist/Components/ProductDetails/productDetailsModel.js

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.clampQuantity = exports.quantityCeiling = exports.soldOutEverywhere = exports.firstUnpickedAxis = exports.packUnitPrice = exports.activeMediaIds = exports.resolveVariants = exports.DEFAULT_MAX_QUANTITY = void 0;
+const commerceVariants_1 = require("../Commerce/commerceVariants");
+const price_1 = require("../../Utils/price");
+exports.DEFAULT_MAX_QUANTITY = 10;
+/** A product without variants sells as one variant at its own price. */
+const resolveVariants = (product) => product.variants.length > 0
+    ? product.variants
+    : [{ id: "default", options: {}, price: product.price, mrp: product.mrp }];
+exports.resolveVariants = resolveVariants;
+/** A variant's own frames win; otherwise the frames of each picked option, in axis order. */
+const activeMediaIds = (product, selection, variant) => {
+    if ((variant === null || variant === void 0 ? void 0 : variant.mediaIds) && variant.mediaIds.length > 0)
+        return variant.mediaIds;
+    const byOption = product.mediaIdsByOption;
+    if (!byOption)
+        return undefined;
+    const ids = product.axes.flatMap((axis) => { var _a; return (_a = byOption[`${axis.id}:${selection[axis.id]}`]) !== null && _a !== void 0 ? _a : []; });
+    return ids.length > 0 ? [...new Set(ids)] : undefined;
+};
+exports.activeMediaIds = activeMediaIds;
+const packUnitPrice = (product, selection, price) => {
+    if (!product.unit)
+        return null;
+    const axis = product.axes.find((candidate) => candidate.type === "pack");
+    const picked = axis === null || axis === void 0 ? void 0 : axis.values.find((value) => value.id === selection[axis.id]);
+    if (!(picked === null || picked === void 0 ? void 0 : picked.quantity))
+        return null;
+    return (0, price_1.unitPrice)(price, picked.quantity, product.unit.unit, product.unit.per);
+};
+exports.packUnitPrice = packUnitPrice;
+const firstUnpickedAxis = (axes, selection) => axes.find((axis) => selection[axis.id] === undefined);
+exports.firstUnpickedAxis = firstUnpickedAxis;
+const soldOutEverywhere = (variants) => variants.length > 0 && variants.every((variant) => (0, commerceVariants_1.stockState)(variant) === "out-of-stock");
+exports.soldOutEverywhere = soldOutEverywhere;
+/** Real remaining stock caps the order; backorder and untracked stock fall back to the per-order ceiling. */
+const quantityCeiling = (variant, maxQuantity) => {
+    if ((variant === null || variant === void 0 ? void 0 : variant.stock) === undefined || variant.backorder)
+        return maxQuantity;
+    return Math.max(0, Math.min(variant.stock, maxQuantity));
+};
+exports.quantityCeiling = quantityCeiling;
+const clampQuantity = (value, ceiling) => Math.max(1, Math.min(value, Math.max(1, ceiling)));
+exports.clampQuantity = clampQuantity;

package/dist/Components/ProductDetails/useInViewport.d.ts

@@ -0,0 +1,3 @@
+import type { RefObject } from "react";
+/** Whether the element is on screen; true until an observer reports otherwise, and always true where IntersectionObserver is missing. */
+export declare const useInViewport: (ref: RefObject<Element>, enabled?: boolean) => boolean;

package/dist/Components/ProductDetails/useInViewport.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useInViewport = void 0;
+const react_1 = require("react");
+/** Whether the element is on screen; true until an observer reports otherwise, and always true where IntersectionObserver is missing. */
+const useInViewport = (ref, enabled = true) => {
+    const [inView, setInView] = (0, react_1.useState)(true);
+    (0, react_1.useEffect)(() => {
+        const node = ref.current;
+        if (!enabled || !node || typeof IntersectionObserver === "undefined")
+            return undefined;
+        const observer = new IntersectionObserver(([entry]) => setInView(entry.isIntersecting));
+        observer.observe(node);
+        return () => observer.disconnect();
+    }, [ref, enabled]);
+    return inView;
+};
+exports.useInViewport = useInViewport;

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

@@ -1,12 +1,7 @@
 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;
-}>;
+import { ProfileCardProps, ProfileCardHeaderSlotProps, ProfileCardBodySlotProps, ProfileCardFooterSlotProps } from "./ProfileCardProps";
+export declare const ProfileCardHeader: React.FC<ProfileCardHeaderSlotProps>;
+export declare const ProfileCardBody: React.FC<ProfileCardBodySlotProps>;
+export declare const ProfileCardFooter: React.FC<ProfileCardFooterSlotProps>;
+/** Card built from ProfileCardHeader, Body and Footer slots; other children are dropped. */
 export default function ProfileCard({ maxW, align, variant, direction, justify, children, size, color, overflow, dividercolor, dividersize, dividervariant, CardStyle, CardHeaderStyle, CardBodyStyle, borderTopColor, borderLeftColor, }: ProfileCardProps): import("react/jsx-runtime").JSX.Element;

package/dist/Components/ProfileCard/ProfileCard.js

@@ -1,14 +1,12 @@
 "use strict";
-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;
 exports.default = ProfileCard;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = __importDefault(require("react"));
-const react_2 = require("@chakra-ui/react");
+const react_1 = require("@chakra-ui/react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const warnDroppedSlotChildren_1 = require("../Modal/warnDroppedSlotChildren");
+const findSlot_1 = require("../Common/findSlot");
 const ProfileCardHeader = ({ children, }) => {
     return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children });
 };
@@ -21,24 +19,27 @@ const ProfileCardFooter = ({ children, }) => {
     return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children });
 };
 exports.ProfileCardFooter = ProfileCardFooter;
-function ProfileCard({ maxW, align, variant, direction, justify, children, size, color, overflow, dividercolor, dividersize = "0.5px", dividervariant = "solid", CardStyle, CardHeaderStyle, CardBodyStyle, borderTopColor, borderLeftColor, }) {
+const SLOTS = [exports.ProfileCardHeader, exports.ProfileCardBody, exports.ProfileCardFooter];
+const DROPPED_ADVICE = "Render it outside the card.";
+/** Card built from ProfileCardHeader, Body and Footer slots; other children are dropped. */
+function ProfileCard({ maxW, align, variant, direction, justify, children, size, color, overflow, dividercolor, dividersize = "1px", dividervariant = "solid", CardStyle, CardHeaderStyle, CardBodyStyle, borderTopColor, borderLeftColor, }) {
+    var _a;
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
     const resolvedDividerColor = dividercolor !== null && dividercolor !== void 0 ? dividercolor : colors.boxborder[200];
     const accentBorder = `2px solid ${colors.primary[500]}`;
-    const isReactElement = (child) => {
-        return child !== null && typeof child === "object" && "type" in child;
-    };
-    const header = react_1.default.Children.toArray(children).find((child) => isReactElement(child) && child.type === exports.ProfileCardHeader);
-    const body = react_1.default.Children.toArray(children).find((child) => isReactElement(child) && child.type === exports.ProfileCardBody);
-    const footer = react_1.default.Children.toArray(children).find((child) => isReactElement(child) && child.type === exports.ProfileCardFooter);
+    const header = (0, findSlot_1.findSlot)(children, exports.ProfileCardHeader);
+    const body = (0, findSlot_1.findSlot)(children, exports.ProfileCardBody);
+    const footer = (0, findSlot_1.findSlot)(children, exports.ProfileCardFooter);
+    (0, warnDroppedSlotChildren_1.warnDroppedSlotChildren)("ProfileCard", children, SLOTS, DROPPED_ADVICE);
     const StylesWithBorder = borderLeftColor
         ? { ...CardStyle, borderLeft: accentBorder }
         : borderTopColor
             ? { ...CardStyle, borderTop: accentBorder }
             : { ...CardStyle };
-    return ((0, jsx_runtime_1.jsxs)(react_2.Card, { maxW: maxW, align: align, variant: variant, direction: direction, justify: justify, size: size, overflow: overflow, colorScheme: color, style: StylesWithBorder, children: [header && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_2.CardHeader, { sx: { ...CardHeaderStyle, fontWeight: "bold" }, py: 15, children: header }), (0, jsx_runtime_1.jsx)(react_2.Divider, { style: {
+    return ((0, jsx_runtime_1.jsxs)(react_1.Card, { maxW: maxW, align: align, variant: variant === "outlein" ? "outline" : variant, direction: direction, justify: justify, size: size, overflow: overflow, colorScheme: color, style: StylesWithBorder, children: [header && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_1.CardHeader, { sx: CardHeaderStyle, ...header.props, children: header }), (0, jsx_runtime_1.jsx)(react_1.Divider, { opacity: 1, style: {
                             borderColor: resolvedDividerColor,
-                            borderWidth: dividersize,
+                            borderWidth: 0,
+                            borderBottomWidth: dividersize,
                             borderStyle: dividervariant,
-                        } })] })), (0, jsx_runtime_1.jsx)(react_2.CardBody, { sx: CardBodyStyle, children: body }), footer && (0, jsx_runtime_1.jsx)(react_2.CardFooter, { children: footer })] }));
+                        } })] })), (0, jsx_runtime_1.jsx)(react_1.CardBody, { sx: CardBodyStyle, ...((_a = body === null || body === void 0 ? void 0 : body.props) !== null && _a !== void 0 ? _a : {}), children: body }), footer && (0, jsx_runtime_1.jsx)(react_1.CardFooter, { ...footer.props, children: footer })] }));
 }

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

@@ -1,18 +1,38 @@
-import { CardProps } from "@chakra-ui/react";
+import { CardProps, CardHeaderProps, CardBodyProps, CardFooterProps } from "@chakra-ui/react";
+/** Mirrors Chakra Card's own variant strings — forwarded to the underlying Card unchanged. */
 export type ProfileCardVariant = "elevated" | "outline" | "filled" | "unstyled";
 /** @deprecated Misspelling kept for existing callers — use "outline". */
 export type ProfileCardVariantLegacy = "outlein";
+/** borderTopColor/borderLeftColor are booleans toggling a fixed accent border color, not custom-color props; borderLeftColor wins if both are true. */
 export type ProfileCardProps = Pick<CardProps, "direction" | "maxW" | "align" | "justify" | "overflow"> & {
+    /** Only ProfileCardHeader/Body/Footer children render, matched by type through nested Fragments; any other sibling is dropped. */
     children: React.ReactNode;
+    /** Chakra Card variant; "outlein" is mapped to "outline". */
     variant?: ProfileCardVariant | ProfileCardVariantLegacy;
+    /** Padding scale of header, body and footer. */
     size?: "sm" | "md" | "lg";
+    /** @deprecated No visual effect: forwarded as colorScheme, which the Card styles never read. */
     color?: "whiteAlpha" | "blackAlpha" | "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink";
+    /** CSS colour of the rule under the header, drawn only with a header slot. */
     dividercolor?: string;
+    /** Thickness of the header rule; defaults to "1px". */
     dividersize?: string;
+    /** Border style of the header rule; defaults to "solid". */
     dividervariant?: "solid" | "dashed" | "dotted" | "double" | "groove" | "ridge" | "inset" | "outset";
+    /** Inline style on the card root; an accent border replaces its own borderTop/borderLeft. */
     CardStyle?: React.CSSProperties;
+    /** Applied as the header's sx; an `sx` on ProfileCardHeader replaces it entirely. */
     CardHeaderStyle?: React.CSSProperties;
+    /** Applied as the body's sx; an `sx` on ProfileCardBody replaces it entirely. */
     CardBodyStyle?: React.CSSProperties;
+    /** True draws a 2px brand-primary border along the top. */
     borderTopColor?: boolean;
+    /** True draws a 2px brand-primary border down the left; wins over borderTopColor. */
     borderLeftColor?: boolean;
 };
+/** Chakra style props (padding, borderBottom, gap, sx, ...) spread onto the rendered CardHeader; omit to keep theme/CardHeaderStyle defaults. */
+export type ProfileCardHeaderSlotProps = CardHeaderProps;
+/** Chakra style props (padding, gap, sx, ...) spread onto the rendered CardBody; omit to keep theme/CardBodyStyle defaults. */
+export type ProfileCardBodySlotProps = CardBodyProps;
+/** Chakra style props (padding, gap, sx, ...) spread onto the rendered CardFooter; omit to keep theme defaults. */
+export type ProfileCardFooterSlotProps = CardFooterProps;

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

@@ -1,2 +1,3 @@
 import { ProfilePhotoViewerProps } from "./ProfilePhotoViewerProps";
+/** Avatar display with optional edit/view actions — does not crop, resize, or upload; PDF detection breaks on a freshly-picked file. */
 export default function ProfilePhotoViewer({ photoUrl, onPhotoChange, imageWidth, imageAlt, imageObjectFit, imageBorderRadius, editIconSize, editIconPositionRight, editIconPositionBottom, isRound, boxStyle, isEditable, isView, style, handleIsView, fallbackText, revealOnHover, }: ProfilePhotoViewerProps): import("react/jsx-runtime").JSX.Element;

package/dist/Components/ProfilePhotoViewer/ProfilePhotoViewer.js

@@ -6,13 +6,28 @@ const react_1 = require("react");
 const react_2 = require("@chakra-ui/react");
 const lucide_react_1 = require("lucide-react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const borderWidths_1 = require("../../Theme/tokens/primitives/borderWidths");
+const motion_1 = require("../../Theme/tokens/primitives/motion");
 const accentText_1 = require("../../Theme/tokens/builders/accentText");
+const planeStep_1 = require("../../Theme/tokens/builders/planeStep");
+const filledSurface_1 = require("../../Theme/tokens/builders/filledSurface");
+const color_1 = require("../../Theme/tokens/builders/color");
+const RING_TRANSITION = (0, motion_1.transitionFor)(["box-shadow"], "base");
+const FADE_TRANSITION = (0, motion_1.transitionFor)(["opacity"], "base");
+const ACTION_TRANSITION = (0, motion_1.transitionFor)(["transform", "background", "box-shadow"], "base");
+/** Avatar display with optional edit/view actions — does not crop, resize, or upload; PDF detection breaks on a freshly-picked file. */
 function ProfilePhotoViewer({ photoUrl, onPhotoChange, imageWidth = "100px", imageAlt = "Profile Photo", imageObjectFit = "cover", imageBorderRadius = "full", editIconSize = "sm", editIconPositionRight = "0px", editIconPositionBottom = "0px", isRound = true, boxStyle, isEditable = false, isView = false, style, handleIsView, fallbackText, revealOnHover = true, }) {
     var _a, _b, _c, _d, _e;
     const [photo, setPhoto] = (0, react_1.useState)(photoUrl);
+    const [syncedUrl, setSyncedUrl] = (0, react_1.useState)(photoUrl);
+    if (photoUrl !== syncedUrl) {
+        setSyncedUrl(photoUrl);
+        setPhoto(photoUrl);
+    }
     const fileInputRef = (0, react_1.useRef)(null);
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     const c = theme.colors;
+    const editFill = (0, filledSurface_1.resolveFilledSurface)(c.primary, c);
     const handlePhotoChange = (event) => {
         var _a;
         if (!isEditable)
@@ -35,15 +50,18 @@ function ProfilePhotoViewer({ photoUrl, onPhotoChange, imageWidth = "100px", ima
         (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click();
     };
     const isPdf = photo === null || photo === void 0 ? void 0 : photo.endsWith(".pdf");
-    // [800], not [300]: the edit IconButton's border is a control boundary — WCAG 1.4.11 needs
-    // >=3.0 against any named surface up to `muted` (lightest); [300] fails there, [800] clears
-    // all with margin.
+    const viewHoverBg = (0, planeStep_1.bandOn)(c.gray[50], c.background[50]);
+    // NOTE: [800] not [300] — the edit IconButton's border is a control boundary, WCAG 1.4.11 needs >=3:1.
     const border = c.boxborder[500];
+    const hoverScrim = (opacity) => {
+        const { r, g, b } = (0, color_1.hexToRgb)(c.black);
+        return `rgba(${r}, ${g}, ${b}, ${opacity})`;
+    };
     // Shared modern frame for whichever media we render (photo / pdf / fallback).
     const mediaFrame = {
         boxSize: imageWidth,
         borderRadius: imageBorderRadius,
-        border: `0.063rem solid ${border}`,
+        border: `${borderWidths_1.BORDER_WIDTHS.hairline} solid ${border}`,
         boxShadow: (_a = theme.shadows) === null || _a === void 0 ? void 0 : _a.sm,
     };
     const renderMedia = () => {
@@ -54,23 +72,23 @@ function ProfilePhotoViewer({ photoUrl, onPhotoChange, imageWidth = "100px", ima
         return ((0, jsx_runtime_1.jsx)(react_2.Box, { ...mediaFrame, display: "flex", alignItems: "center", justifyContent: "center", bg: c.primary.opacity[16], color: (0, accentText_1.accentTextOnCanvas)(c.primary, c.backgroundColor.main), children: fallbackText ? ((0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "1.75rem", fontWeight: 700, lineHeight: "1", children: fallbackText })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.User, { size: "48%" })) }));
     };
     const hasActions = isEditable || isView;
-    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { position: "relative", display: "inline-block", style: boxStyle, borderRadius: imageBorderRadius, transition: "box-shadow 0.2s ease", sx: {
+    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { position: "relative", display: "inline-block", style: boxStyle, borderRadius: imageBorderRadius, transition: RING_TRANSITION, sx: {
             "&:hover .ppv-overlay": { opacity: 1 },
             "&:hover .ppv-actions": { opacity: 1 },
             "&:hover .ppv-media": {
                 boxShadow: `0 0 0 0.1875rem ${c.primary.opacity[24]}`,
             },
-        }, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { className: "ppv-media", borderRadius: imageBorderRadius, transition: "box-shadow 0.2s ease", children: renderMedia() }), hasActions && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_2.Box, { className: "ppv-overlay", position: "absolute", inset: 0, borderRadius: imageBorderRadius, bg: "blackAlpha.300", opacity: 0, transition: "opacity 0.2s ease", pointerEvents: "none" }), (0, jsx_runtime_1.jsxs)(react_2.HStack, { className: "ppv-actions", position: "absolute", right: editIconPositionRight, bottom: editIconPositionBottom, transform: "translate(-15%, -15%)", spacing: 1.5, opacity: revealOnHover ? 0 : 1, transition: "opacity 0.2s ease", children: [isEditable && ((0, jsx_runtime_1.jsx)(react_2.Tooltip, { label: "Edit", "aria-label": "Edit", hasArrow: true, children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.SquarePen, { size: 14 }), isRound: isRound, size: editIconSize, onClick: handleClick, "aria-label": "Edit photo", bg: c.primary[500], color: (0, accentText_1.onFilled)(c.primary[500], c.white, c.black), border: `0.125rem solid ${c.background[50]}`, boxShadow: (_b = theme.shadows) === null || _b === void 0 ? void 0 : _b.md, style: style, transition: "transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease", _hover: {
-                                        bg: c.primary[600],
-                                        color: (0, accentText_1.onFilled)(c.primary[600], c.white, c.black),
+        }, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { className: "ppv-media", borderRadius: imageBorderRadius, transition: RING_TRANSITION, children: renderMedia() }), hasActions && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_2.Box, { className: "ppv-overlay", position: "absolute", inset: 0, borderRadius: imageBorderRadius, bg: hoverScrim(0.3), opacity: 0, transition: FADE_TRANSITION, pointerEvents: "none" }), (0, jsx_runtime_1.jsxs)(react_2.HStack, { className: "ppv-actions", position: "absolute", right: editIconPositionRight, bottom: editIconPositionBottom, transform: "translate(-15%, -15%)", spacing: 1.5, opacity: revealOnHover ? 0 : 1, transition: FADE_TRANSITION, children: [isEditable && ((0, jsx_runtime_1.jsx)(react_2.Tooltip, { label: "Edit", "aria-label": "Edit", hasArrow: true, children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.SquarePen, { size: 14 }), isRound: isRound, size: editIconSize, onClick: handleClick, "aria-label": "Edit photo", bg: editFill.fill, color: editFill.color, border: `0.125rem solid ${c.background[50]}`, boxShadow: (_b = theme.shadows) === null || _b === void 0 ? void 0 : _b.md, style: style, transition: ACTION_TRANSITION, _hover: {
+                                        bg: editFill.hoverFill,
+                                        color: editFill.hoverColor,
                                         transform: "scale(1.1)",
                                         boxShadow: (_c = theme.shadows) === null || _c === void 0 ? void 0 : _c.lg,
                                     }, _active: {
-                                        bg: c.primary[700],
-                                        color: (0, accentText_1.onFilled)(c.primary[700], c.white, c.black),
-                                    } }) })), isView && ((0, jsx_runtime_1.jsx)(react_2.Tooltip, { label: "View", "aria-label": "View", hasArrow: true, children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Eye, { size: 14 }), isRound: isRound, size: editIconSize, onClick: handleIsView, "aria-label": "View photo", bg: c.background[50], color: c.text[700], border: `0.063rem solid ${border}`, boxShadow: (_d = theme.shadows) === null || _d === void 0 ? void 0 : _d.md, style: style, transition: "transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease", _hover: {
-                                        bg: c.gray[50],
-                                        color: (0, accentText_1.accentTextOnCanvas)(c.primary, c.gray[50]),
+                                        bg: editFill.activeFill,
+                                        color: editFill.activeColor,
+                                    } }) })), isView && ((0, jsx_runtime_1.jsx)(react_2.Tooltip, { label: "View", "aria-label": "View", hasArrow: true, children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Eye, { size: 14 }), isRound: isRound, size: editIconSize, onClick: handleIsView, "aria-label": "View photo", bg: c.background[50], color: c.text[700], border: `${borderWidths_1.BORDER_WIDTHS.hairline} solid ${border}`, boxShadow: (_d = theme.shadows) === null || _d === void 0 ? void 0 : _d.md, style: style, transition: ACTION_TRANSITION, _hover: {
+                                        bg: viewHoverBg,
+                                        color: (0, accentText_1.accentTextOnCanvas)(c.primary, viewHoverBg),
                                         transform: "scale(1.1)",
                                         boxShadow: (_e = theme.shadows) === null || _e === void 0 ? void 0 : _e.lg,
                                     }, _active: { bg: c.gray[100] } }) }))] }), isEditable && ((0, jsx_runtime_1.jsx)(react_2.Input, { type: "file", accept: "image/*", onChange: handlePhotoChange, hidden: true, ref: fileInputRef }))] }))] }));

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

@@ -1,6 +1,10 @@
+/** isEditable and isView are independent — both true shows edit and view actions side by side. */
 export type ProfilePhotoViewerProps = {
+    /** Source of the displayed image; a changed value replaces it, discarding a locally picked preview. */
     photoUrl: string;
+    /** Receives the raw File (not a URL, despite the param name) — fires only when isEditable and a file is picked. */
     onPhotoChange: (photoUrl: File) => void;
+    /** Also sets the height (maps to Chakra's boxSize) — there's no separate height prop; the frame is square. */
     imageWidth?: string;
     imageAlt?: string;
     imageObjectFit?: "cover" | "contain" | "fill" | "none" | "scale-down";
@@ -9,12 +13,16 @@ export type ProfilePhotoViewerProps = {
     editIconSize?: "xs" | "sm" | "md" | "lg" | "xl";
     editIconPositionRight?: string;
     editIconPositionBottom?: string;
+    /** Rounds only the edit/view IconButtons — the photo/avatar shape comes from imageBorderRadius, not this. */
     isRound?: boolean;
+    /** Inline style for the outer wrapper only — the edit/view buttons use the separate `style` prop below. */
     boxStyle?: React.CSSProperties;
     isView?: boolean;
+    /** Applied to BOTH edit and view IconButtons identically — no way to style them individually. */
     style?: React.CSSProperties;
+    /** Fires from the View IconButton — that button (and this handler) only renders when isView is true. */
     handleIsView?: () => void;
     fallbackText?: string;
-    /** When true, the edit/view icons are hidden and revealed on hover. Defaults to false (always visible). */
+    /** When true (the actual default), edit/view icons stay hidden until hover; false keeps them always visible. */
     revealOnHover?: boolean;
 };

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

@@ -1,2 +1,3 @@
 import { ProgressBarProps } from "./ProgressBarProps";
-export default function ProgressBar({ size, isIndeterminate, color, hasStripe, height, value, isAnimated, max, min, variant, ...aria }: ProgressBarProps): import("react/jsx-runtime").JSX.Element;
+/** Percentage/quantity fill bar (isAnimated needs hasStripe=true or it's a no-op) — for a named pipeline tracker use StageProgress instead. */
+export default function ProgressBar({ colorScheme, color, variant, isIndeterminate, ...rest }: ProgressBarProps): import("react/jsx-runtime").JSX.Element;

package/dist/Components/ProgressBar/ProgressBar.js

@@ -3,7 +3,33 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = ProgressBar;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("@chakra-ui/react");
-function ProgressBar({ size, isIndeterminate, color = "primary", hasStripe, height, value, isAnimated, max, min, variant, ...aria }) {
-    //  const theme = useCustomTheme();
-    return ((0, jsx_runtime_1.jsx)(react_1.Progress, { ...aria, size: size, isIndeterminate: isIndeterminate, colorScheme: color, hasStripe: hasStripe, height: height, value: value, isAnimated: isAnimated, max: max, min: min, variant: variant }));
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const outlineRung_1 = require("../../Theme/tokens/builders/outlineRung");
+const paletteScale_1 = require("../../Theme/tokens/builders/paletteScale");
+// whiteAlpha/blackAlpha keep Chakra's own fill; contrast math can't resolve alpha scales.
+const NAMED_SCALES = new Set([
+    "gray", "red", "orange", "yellow", "green", "teal", "blue", "cyan", "purple", "pink",
+    "primary", "secondary",
+]);
+const scaleFor = (colors, scheme) => NAMED_SCALES.has(scheme)
+    ? (0, paletteScale_1.scaleNamed)(colors, scheme)
+    : undefined;
+/** Percentage/quantity fill bar (isAnimated needs hasStripe=true or it's a no-op) — for a named pipeline tracker use StageProgress instead. */
+function ProgressBar({ colorScheme, color, variant, isIndeterminate, ...rest }) {
+    var _a;
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const scheme = (_a = colorScheme !== null && colorScheme !== void 0 ? colorScheme : color) !== null && _a !== void 0 ? _a : "primary";
+    const scale = scaleFor(colors, scheme);
+    // Chakra pins the fill to rung [500]; light hues (green/orange/blue/cyan) measure as low as
+    // 1.67:1 against the `gray[100]` track — under 1.4.11's 3:1. Lift the fill, not the track.
+    const fill = scale ? (0, outlineRung_1.liftToContrast)(scale[500], colors.gray[100]) : undefined;
+    return ((0, jsx_runtime_1.jsx)(react_1.Progress, { ...rest, variant: variant, isIndeterminate: isIndeterminate, colorScheme: scheme, sx: fill
+            ? {
+                "& > div:first-of-type": isIndeterminate
+                    ? {
+                        backgroundImage: `linear-gradient(to right, transparent 0%, ${fill} 50%, transparent 100%) !important`,
+                    }
+                    : { backgroundColor: `${fill} !important` },
+            }
+            : undefined }));
 }

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

@@ -1,6 +1,14 @@
 import { ProgressProps } from "@chakra-ui/react";
-export type ProgressBarProps = Pick<ProgressProps, "size" | "isIndeterminate" | "value" | "height" | "hasStripe" | "isAnimated" | "max" | "min" | "aria-label" | "aria-labelledby" | "aria-valuetext" | "id"> & {
-    color?: "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "whiteAlpha" | "blackAlpha" | "primary" | "secondary";
+/** Fill colour scheme; primary/secondary are brand scales, the rest global scales. */
+export type ProgressBarColorScheme = "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "whiteAlpha" | "blackAlpha" | "primary" | "secondary";
+/** Thin themed wrapper over Chakra's Progress; `aria-valuetext` is the only way to describe indeterminate progress. */
+export type ProgressBarProps = Pick<ProgressProps, "size" | "isIndeterminate" | "value" | "height" | "hasStripe" | "isAnimated" | "max" | "min" | "aria-label" | "aria-labelledby" | "aria-valuetext" | "id" | "borderRadius" | "m" | "mt" | "mb" | "ml" | "mr" | "mx" | "my"> & {
+    /** Fill colour scheme; defaults to "primary". */
+    colorScheme?: ProgressBarColorScheme;
+    /** @deprecated Use `colorScheme` — the library-wide name; still honoured when colorScheme is unset. */
+    color?: ProgressBarColorScheme;
+    /** @deprecated Forwarded to Chakra, but neither this theme nor Chakra Progress defines variants. */
     variant?: "solid" | "outline" | "ghost" | "link" | "unstyled";
+    /** Bar thickness. */
     size?: "lg" | "md" | "sm" | "xs";
 };

package/dist/Components/QuantityStepper/QuantityStepper.d.ts

@@ -0,0 +1,4 @@
+import type { QuantityStepperProps } from "./QuantityStepperProps";
+/** Pill stepper for quantities: soft or outline, trash at the floor on cart lines, limits announced via aria-disabled. */
+declare const QuantityStepper: ({ value, defaultValue, onValueChange, min, max, step, size, variant, removable, onRemove, disabled, itemLabel, "data-testid": testId, }: QuantityStepperProps) => import("react/jsx-runtime").JSX.Element;
+export default QuantityStepper;

package/dist/Components/QuantityStepper/QuantityStepper.js

@@ -0,0 +1,63 @@
+"use strict";
+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 lucide_react_1 = require("lucide-react");
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const typography_1 = require("../../Theme/tokens/primitives/typography");
+const controlSizes_1 = require("../../Theme/tokens/primitives/controlSizes");
+const motion_1 = require("../../Theme/tokens/primitives/motion");
+const borderWidths_1 = require("../../Theme/tokens/primitives/borderWidths");
+const motion_2 = require("../../Theme/chakra/motion");
+const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
+const tonalHover_1 = require("../CheckoutKit/tonalHover");
+const MIN_HIT = "2.75rem";
+const LIMIT_OPACITY = 0.4;
+const clamp = (n, min, max) => Math.max(min, max === undefined ? n : Math.min(max, n));
+/** Pill stepper for quantities: soft or outline, trash at the floor on cart lines, limits announced via aria-disabled. */
+const QuantityStepper = ({ value, defaultValue, onValueChange, min = 1, max, step = 1, size = "md", variant = "soft", removable = false, onRemove, disabled = false, itemLabel, "data-testid": testId, }) => {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const spec = controlSizes_1.BUTTON_SIZES[size];
+    const [inner, setInner] = (0, react_1.useState)(defaultValue !== null && defaultValue !== void 0 ? defaultValue : min);
+    const current = value !== null && value !== void 0 ? value : inner;
+    const atMin = current <= min;
+    const atMax = max !== undefined && current >= max;
+    const trash = removable && atMin;
+    const subject = itemLabel ? ` of ${itemLabel}` : "";
+    const change = (direction) => {
+        const next = clamp(current + direction * step, min, max);
+        if (next === current)
+            return;
+        if (value === undefined)
+            setInner(next);
+        onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(next);
+    };
+    const surface = variant === "outline"
+        ? { bg: "transparent", boxShadow: `inset 0 0 0 ${borderWidths_1.BORDER_WIDTHS.hairline} ${colors.boxborder[500]}` }
+        : { bg: colors.background[100], boxShadow: "none" };
+    const hoverFill = (0, tonalHover_1.tonalHover)(colors, variant === "outline" ? colors.background[50] : colors.background[100]);
+    const button = (kind) => {
+        const limited = kind === "dec" ? atMin && !trash : atMax;
+        const Icon = kind === "inc" ? lucide_react_1.Plus : trash ? lucide_react_1.Trash2 : lucide_react_1.Minus;
+        const label = kind === "inc" ? `Increase quantity${subject}` : trash ? `Remove${itemLabel ? ` ${itemLabel}` : ""}` : `Decrease quantity${subject}`;
+        return ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "button", type: "button", "aria-label": label, "aria-disabled": limited || undefined, disabled: disabled, "data-testid": testId ? `${testId}-${kind}` : undefined, onClick: () => {
+                if (limited)
+                    return;
+                if (kind === "dec" && trash)
+                    onRemove === null || onRemove === void 0 ? void 0 : onRemove();
+                else
+                    change(kind === "inc" ? 1 : -1);
+            }, position: "relative", display: "inline-flex", alignItems: "center", justifyContent: "center", flexShrink: 0, boxSize: spec.height, borderRadius: "full", color: colors.header[900], opacity: limited || disabled ? LIMIT_OPACITY : 1, cursor: limited || disabled ? "not-allowed" : "pointer", transition: (0, motion_1.transitionFor)(["background-color", "transform", "opacity"]), _hover: limited || disabled ? undefined : { bg: hoverFill }, _active: limited || disabled ? undefined : { transform: "scale(0.96)" }, sx: {
+                ...(0, focusRing_styles_1.focusVisibleStyles)(colors),
+                ...(0, motion_2.reducedMotionSx)({ "&:active": { transform: "none" } }),
+                "&::before": {
+                    content: '""',
+                    position: "absolute",
+                    inset: `max(0px, calc((${MIN_HIT} - ${spec.height}) / -2))`,
+                },
+            }, children: (0, jsx_runtime_1.jsx)(Icon, { size: spec.iconSize, "aria-hidden": true }) }));
+    };
+    return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { role: "group", "aria-label": `Quantity${subject}`, display: "inline-flex", align: "center", h: spec.height, borderRadius: "full", ...surface, "data-testid": testId, children: [button("dec"), (0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", "aria-live": "polite", "aria-atomic": "true", minW: "1.75rem", textAlign: "center", fontSize: spec.fontSize, fontWeight: 600, color: colors.header[900], sx: typography_1.NUMERIC_TEXT, children: current }), button("inc")] }));
+};
+exports.default = QuantityStepper;

package/dist/Components/QuantityStepper/QuantityStepperProps.d.ts

@@ -0,0 +1,33 @@
+/** sm 32px, md 40px, lg 48px high, matching the button scale; the hit area is padded to 44px. */
+export type QuantityStepperSize = "sm" | "md" | "lg";
+/** soft is a tonal fill; outline is a 1px control border on any surface. */
+export type QuantityStepperVariant = "soft" | "outline";
+/** Compact − qty + control. Display only: the number is never typed, which keeps it fast on mobile. */
+export interface QuantityStepperProps {
+    /** Controlled quantity; pair with `onValueChange`. */
+    value?: number;
+    /** Starting quantity when uncontrolled; defaults to `min`. */
+    defaultValue?: number;
+    /** Fires with the new clamped quantity after a plus or minus press; not fired when a limit blocks the change. */
+    onValueChange?: (value: number) => void;
+    /** Lowest value; defaults to 1. At the floor the minus button is aria-disabled. */
+    min?: number;
+    /** Highest value; omit for no ceiling. At the ceiling the plus button is aria-disabled. */
+    max?: number;
+    /** Amount added or removed per press; defaults to 1. */
+    step?: number;
+    /** Control height; defaults to `md`. */
+    size?: QuantityStepperSize;
+    /** Surface style; defaults to `soft`. */
+    variant?: QuantityStepperVariant;
+    /** At `min` the minus becomes a trash button that calls onRemove, for cart lines. */
+    removable?: boolean;
+    /** Fires when the trash button is pressed at `min`; only reachable with `removable`. */
+    onRemove?: () => void;
+    /** Dims the stepper and disables both buttons. */
+    disabled?: boolean;
+    /** Product name, so the group reads "Quantity of Slim-Fit Denim Jacket". */
+    itemLabel?: string;
+    /** Set on the group; the buttons get `<id>-dec` and `<id>-inc`. */
+    "data-testid"?: string;
+}

package/dist/Components/QuantityStepper/QuantityStepperProps.js

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

package/dist/Components/QueryState/ErrorState.d.ts

@@ -0,0 +1,4 @@
+import type { ErrorStateProps } from "./QueryStateProps";
+/** Error panel built on EmptyState's error tone, announced to screen readers. */
+declare const ErrorState: ({ title, description, icon, onRetry, retryLabel, isRetrying, action, size, minH, }: ErrorStateProps) => import("react/jsx-runtime").JSX.Element;
+export default ErrorState;

package/dist/Components/QueryState/ErrorState.js

@@ -0,0 +1,16 @@
+"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("@chakra-ui/react");
+const lucide_react_1 = require("lucide-react");
+const EmptyState_1 = __importDefault(require("../EmptyState/EmptyState"));
+const Button_1 = __importDefault(require("../Button/Button"));
+/** Error panel built on EmptyState's error tone, announced to screen readers. */
+const ErrorState = ({ title = "Couldn't load this", description = "Something went wrong on our side. Nothing was lost — try again in a moment.", icon = lucide_react_1.AlertTriangle, onRetry, retryLabel = "Retry", isRetrying = false, action, size = "md", minH, }) => {
+    const actions = onRetry || action ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [onRetry && ((0, jsx_runtime_1.jsx)(Button_1.default, { size: "sm", variant: "outline", colorScheme: "gray", label: retryLabel, leftIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.RotateCw, { size: 16 }), isLoading: isRetrying, loadingText: retryLabel, onClick: onRetry })), action] })) : undefined;
+    return ((0, jsx_runtime_1.jsx)(react_1.Box, { role: "alert", w: "100%", children: (0, jsx_runtime_1.jsx)(EmptyState_1.default, { colorScheme: "error", icon: icon, title: title, description: description, size: size, minH: minH, action: actions }) }));
+};
+exports.default = ErrorState;

package/dist/Components/QueryState/QueryStateBoundary.d.ts

@@ -0,0 +1,4 @@
+import type { QueryStateBoundaryProps } from "./QueryStateProps";
+/** Renders one of loading / forbidden / error / empty / children for a content region; agnostic of the fetching library. */
+declare const QueryStateBoundary: ({ isLoading, isForbidden, forbidden, hasData, error, isEmpty, isFiltered, filteredEmpty, loadingFallback, emptyFallback, empty, errorTitle, errorDescription, onRetry, isRetrying, minH, children, }: QueryStateBoundaryProps) => import("react/jsx-runtime").JSX.Element;
+export default QueryStateBoundary;

package/dist/Components/QueryState/QueryStateBoundary.js

@@ -0,0 +1,35 @@
+"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("@chakra-ui/react");
+const lucide_react_1 = require("lucide-react");
+const EmptyState_1 = __importDefault(require("../EmptyState/EmptyState"));
+const FilteredEmptyState_1 = __importDefault(require("../EmptyState/FilteredEmptyState"));
+const Skeletons_1 = __importDefault(require("../Skeletons/Skeletons"));
+const ErrorState_1 = __importDefault(require("./ErrorState"));
+const DefaultLoading = () => ((0, jsx_runtime_1.jsxs)(react_1.Flex, { role: "status", direction: "column", gap: 4, w: "100%", py: 2, children: [(0, jsx_runtime_1.jsx)(react_1.VisuallyHidden, { children: "Loading" }), (0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "skeleton", height: 4, width: "40%" }), Array.from({ length: 4 }, (_, i) => ((0, jsx_runtime_1.jsxs)(react_1.Flex, { direction: "column", gap: 2, children: [(0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "skeleton", height: 2.5, width: "100%" }), (0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "skeleton", height: 2.5, width: "70%" })] }, i)))] }));
+const hasError = (error) => error !== undefined && error !== null && error !== false;
+/** Renders one of loading / forbidden / error / empty / children for a content region; agnostic of the fetching library. */
+const QueryStateBoundary = ({ isLoading = false, isForbidden = false, forbidden, hasData = false, error, isEmpty = false, isFiltered = false, filteredEmpty, loadingFallback, emptyFallback, empty, errorTitle, errorDescription, onRetry, isRetrying, minH = "24rem", children, }) => {
+    var _a, _b, _c;
+    if (isLoading && !hasData)
+        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: loadingFallback !== null && loadingFallback !== void 0 ? loadingFallback : (0, jsx_runtime_1.jsx)(DefaultLoading, {}) });
+    const forbiddenNow = typeof isForbidden === "function" ? hasError(error) && isForbidden(error) : isForbidden;
+    if (forbiddenNow) {
+        return ((0, jsx_runtime_1.jsx)(react_1.Box, { role: "status", w: "100%", children: (0, jsx_runtime_1.jsx)(EmptyState_1.default, { colorScheme: "gray", icon: (_a = forbidden === null || forbidden === void 0 ? void 0 : forbidden.icon) !== null && _a !== void 0 ? _a : lucide_react_1.Lock, title: (_b = forbidden === null || forbidden === void 0 ? void 0 : forbidden.title) !== null && _b !== void 0 ? _b : "You don't have access", description: (_c = forbidden === null || forbidden === void 0 ? void 0 : forbidden.description) !== null && _c !== void 0 ? _c : "Ask an administrator to give you access to view this.", action: forbidden === null || forbidden === void 0 ? void 0 : forbidden.action, minH: minH }) }));
+    }
+    if (hasError(error)) {
+        const description = typeof errorDescription === "function" ? errorDescription(error) : errorDescription;
+        return ((0, jsx_runtime_1.jsx)(ErrorState_1.default, { title: errorTitle, description: description, onRetry: onRetry, isRetrying: isRetrying, minH: minH }));
+    }
+    if (isEmpty && isFiltered) {
+        return ((0, jsx_runtime_1.jsx)(FilteredEmptyState_1.default, { minH: (filteredEmpty === null || filteredEmpty === void 0 ? void 0 : filteredEmpty.scale) === "card" ? undefined : minH, ...filteredEmpty }));
+    }
+    if (isEmpty)
+        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: emptyFallback !== null && emptyFallback !== void 0 ? emptyFallback : (0, jsx_runtime_1.jsx)(EmptyState_1.default, { minH: minH, ...empty }) });
+    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: typeof children === "function" ? children() : children });
+};
+exports.default = QueryStateBoundary;