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

package/dist/Components/CheckoutKit/selectable.d.ts

@@ -0,0 +1,60 @@
+import type { FocusEvent, KeyboardEvent, ReactNode } from "react";
+import type { BoxProps } from "@chakra-ui/react";
+import type { PaletteProps } from "../../Theme/tokens/types";
+type GroupState = {
+    value: string | undefined;
+    tabStop: string | undefined;
+    select: (value: string) => void;
+};
+export declare const useSelectableGroup: () => GroupState | null;
+/** Single-select radio group; controlled via `value`, uncontrolled via `defaultValue`. */
+export type SelectableGroupProps = {
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    gap?: number;
+    columns?: number;
+    children: ReactNode;
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+    "data-testid"?: string;
+};
+/** Radiogroup with a roving tab stop; arrows move focus and selection together, like native radios. */
+export declare const SelectableGroup: ({ value, defaultValue, onValueChange, gap, columns, children, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "data-testid": testId, }: SelectableGroupProps) => import("react/jsx-runtime").JSX.Element;
+/** Tonal card surface; selection is a 2px ink ring plus a check, never colour alone. */
+export declare const selectableSurface: (colors: PaletteProps, { selected, disabled, interactive, ringed }: {
+    selected: boolean;
+    disabled: boolean;
+    interactive: boolean;
+    ringed: boolean;
+}) => BoxProps;
+type RadioIndicatorProps = {
+    selected: boolean;
+};
+/** The 20px circle that carries selection state beside the text. */
+export declare const RadioIndicator: ({ selected }: RadioIndicatorProps) => import("react/jsx-runtime").JSX.Element;
+export type SelectableSemantics = {
+    role: "radio" | "button" | undefined;
+    "aria-checked"?: boolean;
+    "aria-pressed"?: boolean;
+    tabIndex: number | undefined;
+    "data-value"?: string;
+    onClick: () => void;
+    onKeyDown: (event: KeyboardEvent<HTMLElement>) => void;
+    onFocus: (event: FocusEvent<HTMLElement>) => void;
+    onBlur: () => void;
+};
+/** Radio inside a group, toggle button when only `onSelect` is given, inert otherwise. */
+export declare const useSelectable: ({ value, selected, disabled, onSelect, }: {
+    value?: string;
+    selected?: boolean;
+    disabled: boolean;
+    onSelect?: () => void;
+}) => {
+    isSelected: boolean;
+    interactive: boolean;
+    inGroup: boolean;
+    ringed: boolean;
+    props: SelectableSemantics;
+};
+export {};

package/dist/Components/CheckoutKit/selectable.js

@@ -0,0 +1,123 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSelectable = exports.RadioIndicator = exports.selectableSurface = exports.SelectableGroup = exports.useSelectableGroup = void 0;
+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 states_1 = require("../../Theme/tokens/primitives/states");
+const motion_1 = require("../../Theme/tokens/primitives/motion");
+const motion_2 = require("../../Theme/chakra/motion");
+const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
+const accentText_1 = require("../../Theme/tokens/builders/accentText");
+const tonalHover_1 = require("./tonalHover");
+const activationKey_1 = require("../Common/activationKey");
+const GroupContext = (0, react_1.createContext)(null);
+const useSelectableGroup = () => (0, react_1.useContext)(GroupContext);
+exports.useSelectableGroup = useSelectableGroup;
+const firstEnabledValue = (children) => {
+    for (const child of react_1.Children.toArray(children)) {
+        if (!(0, react_1.isValidElement)(child))
+            continue;
+        const { value, disabled, isDisabled } = child.props;
+        if (typeof value === "string" && !disabled && !isDisabled)
+            return value;
+    }
+    return undefined;
+};
+const STEP = { ArrowDown: 1, ArrowRight: 1, ArrowUp: -1, ArrowLeft: -1 };
+/** Radiogroup with a roving tab stop; arrows move focus and selection together, like native radios. */
+const SelectableGroup = ({ value, defaultValue, onValueChange, gap = 3, columns = 1, children, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "data-testid": testId, }) => {
+    const [inner, setInner] = (0, react_1.useState)(defaultValue);
+    const current = value !== null && value !== void 0 ? value : inner;
+    const state = (0, react_1.useMemo)(() => ({
+        value: current,
+        tabStop: current !== null && current !== void 0 ? current : firstEnabledValue(children),
+        select: (next) => {
+            if (value === undefined)
+                setInner(next);
+            if (next !== current)
+                onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(next);
+        },
+    }), [current, children, value, onValueChange]);
+    const onKeyDown = (event) => {
+        const edge = event.key === "Home" ? 0 : event.key === "End" ? -1 : null;
+        const step = STEP[event.key];
+        if (edge === null && step === undefined)
+            return;
+        const radios = Array.from(event.currentTarget.querySelectorAll('[role="radio"]:not([aria-disabled="true"])'));
+        const at = radios.indexOf(document.activeElement);
+        if (at < 0)
+            return;
+        event.preventDefault();
+        const index = edge === null ? (at + step + radios.length) % radios.length : edge < 0 ? radios.length - 1 : 0;
+        const target = radios[index];
+        target.focus();
+        const next = target.getAttribute("data-value");
+        if (next !== null)
+            state.select(next);
+    };
+    return ((0, jsx_runtime_1.jsx)(GroupContext.Provider, { value: state, children: (0, jsx_runtime_1.jsx)(react_2.Flex, { role: "radiogroup", "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, direction: "column", gap: gap, ...(columns > 1 ? { display: "grid", gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))` } : {}), onKeyDown: onKeyDown, "data-testid": testId, children: children }) }));
+};
+exports.SelectableGroup = SelectableGroup;
+/** Tonal card surface; selection is a 2px ink ring plus a check, never colour alone. */
+const selectableSurface = (colors, { selected, disabled, interactive, ringed }) => ({
+    bg: colors.background[100],
+    borderRadius: "2xl",
+    boxShadow: selected ? `inset 0 0 0 2px ${colors.header[900]}` : "none",
+    opacity: disabled ? states_1.DISABLED_OPACITY : 1,
+    transition: (0, motion_1.transitionFor)(["background-color", "box-shadow"]),
+    _hover: interactive && !selected && !disabled ? { bg: (0, tonalHover_1.tonalHover)(colors) } : undefined,
+    sx: { ...(ringed ? (0, focusRing_styles_1.focusVisibleRing)(colors) : {}), ...(0, motion_2.reducedMotionSx)() },
+});
+exports.selectableSurface = selectableSurface;
+/** The 20px circle that carries selection state beside the text. */
+const RadioIndicator = ({ selected }) => {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const fill = colors.header[900];
+    return ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", "aria-hidden": true, display: "inline-flex", alignItems: "center", justifyContent: "center", boxSize: "1.25rem", flexShrink: 0, borderRadius: "full", bg: selected ? fill : "transparent", color: (0, accentText_1.onFilled)(fill, colors.white, colors.black), boxShadow: selected ? "none" : `inset 0 0 0 1.5px ${colors.textMuted}`, transition: (0, motion_1.transitionFor)(["background-color", "box-shadow"]), sx: (0, motion_2.reducedMotionSx)(), children: selected && (0, jsx_runtime_1.jsx)(lucide_react_1.Check, { size: 12, strokeWidth: 3 }) }));
+};
+exports.RadioIndicator = RadioIndicator;
+/** Radio inside a group, toggle button when only `onSelect` is given, inert otherwise. */
+const useSelectable = ({ value, selected, disabled, onSelect, }) => {
+    const group = (0, exports.useSelectableGroup)();
+    const [ringed, setRinged] = (0, react_1.useState)(false);
+    const inGroup = group !== null && value !== undefined;
+    const isSelected = inGroup ? group.value === value : !!selected;
+    const interactive = (inGroup || !!onSelect) && !disabled;
+    const choose = () => {
+        if (!interactive)
+            return;
+        if (inGroup)
+            group.select(value);
+        onSelect === null || onSelect === void 0 ? void 0 : onSelect();
+    };
+    const props = {
+        role: inGroup ? "radio" : onSelect ? "button" : undefined,
+        "aria-checked": inGroup ? isSelected : undefined,
+        "aria-pressed": !inGroup && onSelect ? isSelected : undefined,
+        tabIndex: inGroup ? (group.tabStop === value && !disabled ? 0 : -1) : onSelect && !disabled ? 0 : undefined,
+        "data-value": inGroup ? value : undefined,
+        onClick: choose,
+        onKeyDown: (event) => {
+            if (event.target !== event.currentTarget)
+                return;
+            if ((0, activationKey_1.isActivationKey)(event)) {
+                event.preventDefault();
+                choose();
+            }
+        },
+        onFocus: (event) => {
+            try {
+                setRinged(event.currentTarget.matches(":focus-visible"));
+            }
+            catch {
+                setRinged(true);
+            }
+        },
+        onBlur: () => setRinged(false),
+    };
+    return { isSelected, interactive, inGroup, ringed, props };
+};
+exports.useSelectable = useSelectable;

package/dist/Components/CheckoutKit/tonalHover.d.ts

@@ -0,0 +1,2 @@
+import type { PaletteProps } from "../../Theme/tokens/types";
+export declare const tonalHover: (colors: PaletteProps, rest?: string, fill?: string) => string;

package/dist/Components/CheckoutKit/tonalHover.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.tonalHover = void 0;
+const planeStep_1 = require("../../Theme/tokens/builders/planeStep");
+const tonalHover = (colors, rest = colors.background[100], fill = colors.background[200]) => (0, planeStep_1.bandOn)(fill, rest);
+exports.tonalHover = tonalHover;

package/dist/Components/ChoiceCard/ChoiceCard.d.ts

@@ -0,0 +1,4 @@
+import type { ChoiceCardProps } from "./ChoiceCardProps";
+/** Selectable radio card with a label, optional description and icon; must sit inside a `ChoiceCardGroup`. */
+declare const ChoiceCard: ({ value, label, description, icon, disabled: disabledProp, isDisabled, "data-testid": testId }: ChoiceCardProps) => import("react/jsx-runtime").JSX.Element;
+export default ChoiceCard;

package/dist/Components/ChoiceCard/ChoiceCard.js

@@ -0,0 +1,18 @@
+"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 useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const selectable_1 = require("../CheckoutKit/selectable");
+/** Selectable radio card with a label, optional description and icon; must sit inside a `ChoiceCardGroup`. */
+const ChoiceCard = ({ value, label, description, icon, disabled: disabledProp = false, isDisabled = false, "data-testid": testId }) => {
+    const disabled = disabledProp || isDisabled;
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const uid = (0, react_1.useId)();
+    const labelId = `${uid}-label`;
+    const descriptionId = `${uid}-description`;
+    const { isSelected, interactive, inGroup, ringed, props } = (0, selectable_1.useSelectable)({ value, disabled });
+    return ((0, jsx_runtime_1.jsx)(react_2.Flex, { direction: "column", "data-testid": testId, "data-selected": isSelected || undefined, ...(0, selectable_1.selectableSurface)(colors, { selected: isSelected && inGroup, disabled, interactive, ringed }), children: (0, jsx_runtime_1.jsxs)(react_2.Flex, { ...props, "data-radio": true, "aria-disabled": inGroup && disabled ? true : undefined, "aria-labelledby": props.role ? labelId : undefined, "aria-describedby": props.role && description ? descriptionId : undefined, align: "center", gap: 3, p: 4, borderRadius: "2xl", cursor: interactive ? "pointer" : "default", outline: "none", children: [inGroup && (0, jsx_runtime_1.jsx)(selectable_1.RadioIndicator, { selected: isSelected }), icon && ((0, jsx_runtime_1.jsx)(react_2.Flex, { as: "span", "aria-hidden": true, align: "center", justify: "center", boxSize: 10, flexShrink: 0, borderRadius: "xl", bg: colors.background[50], color: colors.header[900], children: icon })), (0, jsx_runtime_1.jsxs)(react_2.Box, { flex: 1, minW: 0, children: [(0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", id: labelId, display: "block", fontSize: "sm", fontWeight: 600, lineHeight: 1.4, color: colors.header[900], children: label }), description && ((0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", id: descriptionId, display: "block", fontSize: "xs", lineHeight: 1.4, color: colors.textMuted, children: description }))] })] }) }));
+};
+exports.default = ChoiceCard;

package/dist/Components/ChoiceCard/ChoiceCardGroup.d.ts

@@ -0,0 +1,4 @@
+import type { ChoiceCardGroupProps } from "./ChoiceCardProps";
+/** Radiogroup that lays out `ChoiceCard`s in one or more columns and manages the single selection. */
+declare const ChoiceCardGroup: (props: ChoiceCardGroupProps) => import("react/jsx-runtime").JSX.Element;
+export default ChoiceCardGroup;

package/dist/Components/ChoiceCard/ChoiceCardGroup.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const selectable_1 = require("../CheckoutKit/selectable");
+/** Radiogroup that lays out `ChoiceCard`s in one or more columns and manages the single selection. */
+const ChoiceCardGroup = (props) => (0, jsx_runtime_1.jsx)(selectable_1.SelectableGroup, { ...props });
+exports.default = ChoiceCardGroup;

package/dist/Components/ChoiceCard/ChoiceCardProps.d.ts

@@ -0,0 +1,37 @@
+import type { ReactNode } from "react";
+/** One option in a `ChoiceCardGroup`: a radio card with a label, optional description and leading icon. */
+export interface ChoiceCardProps {
+    /** Identifies the card; becomes the group's value when chosen. */
+    value: string;
+    /** Visible title and the radio's accessible name. */
+    label: ReactNode;
+    /** Muted line under the label, announced as the radio's description. */
+    description?: ReactNode;
+    /** Leading icon in a 40px well, hidden from assistive tech. */
+    icon?: ReactNode;
+    /** Dims the card and skips it for clicks, arrow keys and the tab stop. */
+    disabled?: boolean;
+    /** Alias of `disabled` for the library's `is*` prop convention; either one disables the card. */
+    isDisabled?: boolean;
+    "data-testid"?: string;
+}
+/** Radiogroup of `ChoiceCard`s: one tab stop; arrows, Home and End move focus and selection together. */
+export interface ChoiceCardGroupProps {
+    /** Selected card's `value`; passing it makes the group controlled. */
+    value?: string;
+    /** Seeds an uncontrolled selection; ignored once `value` is passed. */
+    defaultValue?: string;
+    /** Called with the newly chosen card's `value`, only when the selection actually changes. */
+    onValueChange?: (value: string) => void;
+    /** Cards per row; `1` (default) stacks them in a column, more lays them out in an equal-width grid. */
+    columns?: number;
+    /** Space between cards in theme space units (`3` = 0.75rem). */
+    gap?: number;
+    /** Direct `ChoiceCard` children; a wrapper component hides their `value` from the tab stop. */
+    children: ReactNode;
+    /** Name the group with this or `aria-labelledby`. */
+    "aria-label"?: string;
+    /** Id of an element that names the group; use instead of `aria-label`. */
+    "aria-labelledby"?: string;
+    "data-testid"?: string;
+}

package/dist/Components/ChoiceCard/ChoiceCardProps.js

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

package/dist/Components/CircularProgress/CircularProgress.d.ts

@@ -0,0 +1,4 @@
+import type { CircularProgressProps } from "./CircularProgressProps";
+/** Ring-shaped determinate progress with a centred label — for a linear bar use ProgressBar. */
+declare const CircularProgress: ({ value, max, size, thickness, tone, label, "aria-label": ariaLabel, "data-testid": testId, }: CircularProgressProps) => import("react/jsx-runtime").JSX.Element;
+export default CircularProgress;

package/dist/Components/CircularProgress/CircularProgress.js

@@ -0,0 +1,35 @@
+"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 tone_1 = require("../../Theme/tokens/builders/tone");
+const motion_1 = require("../../Theme/tokens/primitives/motion");
+const typography_1 = require("../../Theme/tokens/primitives/typography");
+const motion_2 = require("../../Theme/chakra/motion");
+const arc_1 = require("./arc");
+const Circle = (0, react_1.chakra)("circle");
+const scaleFor = (colors, tone) => tone === "info" ? colors.primary : (0, tone_1.toneScale)(colors, tone);
+/** Ring-shaped determinate progress with a centred label — for a linear bar use ProgressBar. */
+const CircularProgress = ({ value, max = 100, size = "md", thickness, tone = "info", label, "aria-label": ariaLabel, "data-testid": testId, }) => {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const { diameter, thickness: defaultStroke, label: labelSize } = (0, arc_1.resolveDiameter)(size);
+    const stroke = thickness !== null && thickness !== void 0 ? thickness : defaultStroke;
+    const { radius, circumference, fraction, clamped, safeMax, dashOffset } = (0, arc_1.arcGeometry)(diameter, stroke, value, max);
+    const ink = (0, tone_1.resolveSoftTone)(colors, scaleFor(colors, tone), colors.background[50]).fg;
+    const center = diameter / 2;
+    const valueText = typeof label === "string" || typeof label === "number" ? String(label) : undefined;
+    return ((0, jsx_runtime_1.jsxs)(react_1.Box, { role: "progressbar", "aria-label": ariaLabel, "aria-valuenow": clamped, "aria-valuemin": 0, "aria-valuemax": safeMax, "aria-valuetext": valueText, "data-testid": testId, position: "relative", display: "inline-flex", flexShrink: 0, boxSize: `${diameter}px`, children: [(0, jsx_runtime_1.jsxs)("svg", { width: diameter, height: diameter, viewBox: `0 0 ${diameter} ${diameter}`, "aria-hidden": true, focusable: "false", children: [(0, jsx_runtime_1.jsx)(Circle, { cx: center, cy: center, r: radius, fill: "none", sx: { stroke: colors.backgroundColor.subtle, strokeWidth: stroke } }), (0, jsx_runtime_1.jsx)(Circle, { cx: center, cy: center, r: radius, fill: "none", "data-testid": testId ? `${testId}-arc` : undefined, sx: {
+                            stroke: ink,
+                            strokeWidth: stroke,
+                            strokeLinecap: "round",
+                            strokeDasharray: circumference,
+                            strokeDashoffset: dashOffset,
+                            strokeOpacity: fraction > 0 ? 1 : 0,
+                            transform: "rotate(-90deg)",
+                            transformOrigin: "50% 50%",
+                            transition: (0, motion_1.transitionFor)(["stroke-dashoffset"]),
+                            ...(0, motion_2.reducedMotionSx)(),
+                        } })] }), label !== undefined && label !== null && ((0, jsx_runtime_1.jsx)(react_1.Flex, { position: "absolute", inset: 0, align: "center", justify: "center", fontSize: labelSize, fontWeight: 600, lineHeight: 1, color: colors.header[900], sx: typography_1.NUMERIC_TEXT, children: label }))] }));
+};
+exports.default = CircularProgress;

package/dist/Components/CircularProgress/CircularProgressProps.d.ts

@@ -0,0 +1,24 @@
+import type { ReactNode } from "react";
+import type { Tone } from "../../Theme/tokens/builders/tone";
+/** Diameter preset: sm 32px, md 48px, lg 72px. */
+export type CircularProgressSize = "sm" | "md" | "lg";
+/** A preset, or a diameter in px (clamped to 24..160). */
+export type CircularProgressDiameter = CircularProgressSize | number;
+/** Props for the SVG ring CircularProgress; the arc starts at 12 o'clock and fills clockwise. */
+export interface CircularProgressProps {
+    /** Current progress, clamped to 0..max. */
+    value: number;
+    /** Upper bound of the range; default 100. */
+    max?: number;
+    /** Diameter preset (32 / 48 / 72px) or a px number clamped to 24..160; default "md". */
+    size?: CircularProgressDiameter;
+    /** Ring stroke in px; defaults by preset (4 / 5 / 7), or a tenth of a numeric size (3..12). */
+    thickness?: number;
+    /** Fill colour; default "info", which paints the brand primary rather than blue. */
+    tone?: Tone;
+    /** Centred content such as "7/10"; a string or number is also spoken as aria-valuetext. */
+    label?: ReactNode;
+    /** Required accessible name; the ring has no visible caption of its own. */
+    "aria-label": string;
+    "data-testid"?: string;
+}

package/dist/Components/CircularProgress/CircularProgressProps.js

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

package/dist/Components/CircularProgress/arc.d.ts

@@ -0,0 +1,20 @@
+import type { CircularProgressDiameter, CircularProgressSize } from "./CircularProgressProps";
+export declare const SIZE_PX: Record<CircularProgressSize, number>;
+export declare const THICKNESS_PX: Record<CircularProgressSize, number>;
+export declare const LABEL_REM: Record<CircularProgressSize, string>;
+export declare const MIN_DIAMETER = 24;
+export declare const MAX_DIAMETER = 160;
+export declare const resolveDiameter: (size: CircularProgressDiameter) => {
+    diameter: number;
+    thickness: number;
+    label: string;
+};
+export declare const clampValue: (value: number, max: number) => number;
+export declare const arcGeometry: (diameter: number, thickness: number, value: number, max: number) => {
+    radius: number;
+    circumference: number;
+    fraction: number;
+    clamped: number;
+    safeMax: number;
+    dashOffset: number;
+};

package/dist/Components/CircularProgress/arc.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.arcGeometry = exports.clampValue = exports.resolveDiameter = exports.MAX_DIAMETER = exports.MIN_DIAMETER = exports.LABEL_REM = exports.THICKNESS_PX = exports.SIZE_PX = void 0;
+exports.SIZE_PX = { sm: 32, md: 48, lg: 72 };
+exports.THICKNESS_PX = { sm: 4, md: 5, lg: 7 };
+exports.LABEL_REM = { sm: "0.625rem", md: "0.75rem", lg: "1rem" };
+exports.MIN_DIAMETER = 24;
+exports.MAX_DIAMETER = 160;
+const resolveDiameter = (size) => {
+    if (typeof size === "string")
+        return { diameter: exports.SIZE_PX[size], thickness: exports.THICKNESS_PX[size], label: exports.LABEL_REM[size] };
+    const diameter = Math.min(Math.max(Number.isFinite(size) ? Math.round(size) : exports.SIZE_PX.md, exports.MIN_DIAMETER), exports.MAX_DIAMETER);
+    return {
+        diameter,
+        thickness: Math.min(Math.max(Math.round(diameter / 10), 3), 12),
+        label: `${Math.min(Math.max(Math.round(diameter / 4), 10), 32) / 16}rem`,
+    };
+};
+exports.resolveDiameter = resolveDiameter;
+const clampValue = (value, max) => Number.isFinite(value) ? Math.min(Math.max(value, 0), max) : 0;
+exports.clampValue = clampValue;
+const arcGeometry = (diameter, thickness, value, max) => {
+    const safeMax = max > 0 ? max : 100;
+    const clamped = (0, exports.clampValue)(value, safeMax);
+    const radius = Math.max((diameter - thickness) / 2, 0);
+    const circumference = 2 * Math.PI * radius;
+    const fraction = clamped / safeMax;
+    return { radius, circumference, fraction, clamped, safeMax, dashOffset: circumference * (1 - fraction) };
+};
+exports.arcGeometry = arcGeometry;

package/dist/Components/Commerce/commerceTypes.d.ts

@@ -0,0 +1,57 @@
+export type ProductMedia = {
+    id: string;
+    src: string;
+    alt?: string;
+    /** Small rendition (about 150px); used by the quick-add sheet, cart lines and gallery thumbnails. */
+    thumb?: string;
+    /** Responsive candidates for `src`, e.g. "a-400.jpg 400w, a-800.jpg 800w"; the product card forwards it to its `<img>`. */
+    srcSet?: string;
+    /** Rendered width hint paired with `srcSet`, e.g. "(min-width: 768px) 25vw, 50vw". */
+    sizes?: string;
+    type?: "image" | "video";
+    poster?: string;
+};
+export type ProductBadgeTone = "accent" | "neutral" | "success" | "warning" | "danger" | "info" | "inverse";
+export type ProductBadge = {
+    label: string;
+    tone?: ProductBadgeTone;
+};
+export type OptionAxisType = "swatch" | "chip" | "image-tile" | "pack";
+export type OptionValue = {
+    id: string;
+    label: string;
+    /** Any CSS colour; product data, so it is the one place a literal colour is allowed. */
+    swatch?: string;
+    image?: string;
+    hint?: string;
+    /** Quantity of the base unit this value contains, for per-unit pricing on pack axes. */
+    quantity?: number;
+};
+export type OptionAxis = {
+    id: string;
+    label: string;
+    type: OptionAxisType;
+    values: OptionValue[];
+    guide?: {
+        label: string;
+        onClick: () => void;
+    };
+};
+export type VariantSelection = Record<string, string>;
+export type ProductVariant = {
+    id: string;
+    /** Axis id to option value id; a variant with every axis set is fully specified. */
+    options: VariantSelection;
+    price: number;
+    mrp?: number;
+    /** Undefined means untracked and sellable; 0 means sold out. */
+    stock?: number;
+    backorder?: boolean;
+    sku?: string;
+    mediaIds?: string[];
+};
+export type StockState = "in-stock" | "low-stock" | "out-of-stock" | "backorder";
+export type PriceFormat = {
+    currency?: string;
+    locale?: string;
+};

package/dist/Components/Commerce/commerceTypes.js

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

package/dist/Components/Commerce/commerceVariants.d.ts

@@ -0,0 +1,13 @@
+import type { OptionAxis, ProductVariant, StockState, VariantSelection } from "./commerceTypes";
+export declare const LOW_STOCK_THRESHOLD = 5;
+export declare function stockState(variant: Pick<ProductVariant, "stock" | "backorder"> | undefined, threshold?: number): StockState;
+export declare function selectionComplete(axes: OptionAxis[], selection: VariantSelection): boolean;
+export declare function findVariant(axes: OptionAxis[], variants: ProductVariant[], selection: VariantSelection): ProductVariant | undefined;
+/** A value is offered when some sellable variant has it alongside the other axes' current picks. */
+export declare function isOptionAvailable(variants: ProductVariant[], selection: VariantSelection, axisId: string, valueId: string): boolean;
+export declare function remainingStock(variants: ProductVariant[], selection: VariantSelection, axisId: string, valueId: string): number | undefined;
+export declare function priceRange(variants: ProductVariant[]): {
+    min: number;
+    max: number;
+} | null;
+export declare function firstAvailableSelection(variants: ProductVariant[]): VariantSelection;

package/dist/Components/Commerce/commerceVariants.js

@@ -0,0 +1,51 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LOW_STOCK_THRESHOLD = void 0;
+exports.stockState = stockState;
+exports.selectionComplete = selectionComplete;
+exports.findVariant = findVariant;
+exports.isOptionAvailable = isOptionAvailable;
+exports.remainingStock = remainingStock;
+exports.priceRange = priceRange;
+exports.firstAvailableSelection = firstAvailableSelection;
+exports.LOW_STOCK_THRESHOLD = 5;
+function stockState(variant, threshold = exports.LOW_STOCK_THRESHOLD) {
+    if (!variant || variant.stock === undefined)
+        return "in-stock";
+    if (variant.stock > 0)
+        return variant.stock <= threshold ? "low-stock" : "in-stock";
+    return variant.backorder ? "backorder" : "out-of-stock";
+}
+const sellable = (variant) => stockState(variant) !== "out-of-stock";
+const matches = (variant, selection) => Object.entries(selection).every(([axisId, valueId]) => variant.options[axisId] === valueId);
+function selectionComplete(axes, selection) {
+    return axes.every((axis) => selection[axis.id] !== undefined);
+}
+function findVariant(axes, variants, selection) {
+    if (!selectionComplete(axes, selection))
+        return undefined;
+    return variants.find((variant) => matches(variant, selection));
+}
+/** A value is offered when some sellable variant has it alongside the other axes' current picks. */
+function isOptionAvailable(variants, selection, axisId, valueId) {
+    const probe = { ...selection, [axisId]: valueId };
+    return variants.some((variant) => sellable(variant) && matches(variant, probe));
+}
+function remainingStock(variants, selection, axisId, valueId) {
+    const probe = { ...selection, [axisId]: valueId };
+    const hits = variants.filter((variant) => matches(variant, probe) && sellable(variant));
+    if (hits.length === 0 || hits.some((variant) => variant.stock === undefined))
+        return undefined;
+    return hits.reduce((sum, variant) => { var _a; return sum + ((_a = variant.stock) !== null && _a !== void 0 ? _a : 0); }, 0);
+}
+function priceRange(variants) {
+    if (variants.length === 0)
+        return null;
+    const prices = variants.map((variant) => variant.price);
+    return { min: Math.min(...prices), max: Math.max(...prices) };
+}
+function firstAvailableSelection(variants) {
+    var _a;
+    const first = (_a = variants.find(sellable)) !== null && _a !== void 0 ? _a : variants[0];
+    return first ? { ...first.options } : {};
+}

package/dist/Components/Commerce/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./commerceTypes";
+export * from "./commerceVariants";

package/dist/Components/Commerce/index.js

@@ -0,0 +1,18 @@
+"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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./commerceTypes"), exports);
+__exportStar(require("./commerceVariants"), exports);

package/dist/Components/Commerce/useContainerWidth.d.ts

@@ -0,0 +1,3 @@
+import { type RefObject } from "react";
+/** Width of the referenced element, or undefined until measurable (SSR, jsdom, no ResizeObserver). */
+export declare const useContainerWidth: (ref: RefObject<HTMLElement>) => number | undefined;

package/dist/Components/Commerce/useContainerWidth.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useContainerWidth = void 0;
+const react_1 = require("react");
+/** Width of the referenced element, or undefined until measurable (SSR, jsdom, no ResizeObserver). */
+const useContainerWidth = (ref) => {
+    const [width, setWidth] = (0, react_1.useState)(undefined);
+    (0, react_1.useLayoutEffect)(() => {
+        const node = ref.current;
+        if (!node)
+            return undefined;
+        const measure = () => {
+            const next = node.getBoundingClientRect().width;
+            setWidth(next > 0 ? Math.round(next) : undefined);
+        };
+        measure();
+        if (typeof ResizeObserver === "undefined")
+            return undefined;
+        const observer = new ResizeObserver(measure);
+        observer.observe(node);
+        return () => observer.disconnect();
+    }, [ref]);
+    return width;
+};
+exports.useContainerWidth = useContainerWidth;

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

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

package/dist/Components/Common/ErrorMessage.js

@@ -4,10 +4,10 @@ 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");
-// `id` lets a field point `aria-describedby` here so the message is part of the control's
-// description on every focus. `role="alert"` alone announces once, when it first renders.
+const fieldMessageStyles_1 = require("./fieldMessageStyles");
+// `id` lets a field point `aria-describedby` here; `role="alert"` announces once.
 const ErrorMessage = ({ errorMessage, id }) => {
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
-    return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { id: id, align: "center", color: colors.semanticText.error, fontSize: "0.875rem", role: "alert", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Info, { width: "0.875rem" }), (0, jsx_runtime_1.jsx)(react_1.Text, { ml: "0.188rem", children: errorMessage !== null && errorMessage !== void 0 ? errorMessage : "Error" })] }));
+    return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { id: id, role: "alert", align: "flex-start", gap: "0.25rem", ...(0, fieldMessageStyles_1.fieldMessageStyles)(colors), color: colors.semanticText.error, children: [(0, jsx_runtime_1.jsx)(react_1.Flex, { as: "span", h: "1.125rem", align: "center", flexShrink: 0, "aria-hidden": true, children: (0, jsx_runtime_1.jsx)(lucide_react_1.CircleAlert, { size: 12 }) }), (0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", children: errorMessage })] }));
 };
 exports.default = ErrorMessage;

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

@@ -0,0 +1,10 @@
+import { type FieldMessageState } from "./fieldMessageStyles";
+/** Error and helper text state plus the ids that wire it to the control. */
+export type FieldMessageProps = FieldMessageState & {
+    /** From `useFieldIds` — must match the control's `aria-describedby`. */
+    helperId?: string;
+    errorId?: string;
+};
+/** The single message row under a field: error when `error`, else helper, else nothing. */
+declare const FieldMessage: ({ error, errorMessage, helperText, helperId, errorId }: FieldMessageProps) => import("react/jsx-runtime").JSX.Element | null;
+export default FieldMessage;