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

package/dist/esm/Components/QueryState/QueryStateBoundary.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Box, Flex, VisuallyHidden } from "@chakra-ui/react";
+import { Lock } from "lucide-react";
+import EmptyState from "../EmptyState/EmptyState.js";
+import FilteredEmptyState from "../EmptyState/FilteredEmptyState.js";
+import Skeletons from "../Skeletons/Skeletons.js";
+import ErrorState from "./ErrorState.js";
+const DefaultLoading = () => (_jsxs(Flex, { role: "status", direction: "column", gap: 4, w: "100%", py: 2, children: [_jsx(VisuallyHidden, { children: "Loading" }), _jsx(Skeletons, { type: "skeleton", height: 4, width: "40%" }), Array.from({ length: 4 }, (_, i) => (_jsxs(Flex, { direction: "column", gap: 2, children: [_jsx(Skeletons, { type: "skeleton", height: 2.5, width: "100%" }), _jsx(Skeletons, { 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 _jsx(_Fragment, { children: loadingFallback !== null && loadingFallback !== void 0 ? loadingFallback : _jsx(DefaultLoading, {}) });
+    const forbiddenNow = typeof isForbidden === "function" ? hasError(error) && isForbidden(error) : isForbidden;
+    if (forbiddenNow) {
+        return (_jsx(Box, { role: "status", w: "100%", children: _jsx(EmptyState, { colorScheme: "gray", icon: (_a = forbidden === null || forbidden === void 0 ? void 0 : forbidden.icon) !== null && _a !== void 0 ? _a : 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 (_jsx(ErrorState, { title: errorTitle, description: description, onRetry: onRetry, isRetrying: isRetrying, minH: minH }));
+    }
+    if (isEmpty && isFiltered) {
+        return (_jsx(FilteredEmptyState, { minH: (filteredEmpty === null || filteredEmpty === void 0 ? void 0 : filteredEmpty.scale) === "card" ? undefined : minH, ...filteredEmpty }));
+    }
+    if (isEmpty)
+        return _jsx(_Fragment, { children: emptyFallback !== null && emptyFallback !== void 0 ? emptyFallback : _jsx(EmptyState, { minH: minH, ...empty }) });
+    return _jsx(_Fragment, { children: typeof children === "function" ? children() : children });
+};
+export default QueryStateBoundary;

package/dist/esm/Components/QueryState/QueryStateProps.js

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

package/dist/esm/Components/RadioButton/RadioButton.js

@@ -1,25 +1,45 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Radio as ChakraRadio, RadioGroup as ChakraRadioGroup, Stack, } from "@chakra-ui/react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { Box, Radio as ChakraRadio, RadioGroup as ChakraRadioGroup, Stack, } from "@chakra-ui/react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 import { TextLabel } from "../Common/FormLabel.js";
-const RadioButton = ({ label, colorScheme, isChecked, onChange, isDisabled, size, value, defaultChecked, labelFontSize = "0.75rem", labelClampLines = 2, showLabelTooltip = (label || "").length > 18, labelTooltip = label, }) => {
-    const theme = useCustomTheme();
-    return (_jsx(ChakraRadio, { colorScheme: colorScheme, isChecked: isChecked, onChange: onChange, isDisabled: isDisabled, size: size, value: value, defaultChecked: defaultChecked, borderColor: theme.colors.gray[500], borderWidth: "1.6px", _hover: {
-            borderColor: theme.colors.primary[500],
-            backgroundColor: theme.colors.background[100],
+import FieldMessage from "../Common/FieldMessage.js";
+import { useFieldIds } from "../Common/useFieldIds.js";
+import { fieldHoverBorder } from "../Common/fieldStyles.js";
+import { resolveFilledSurface } from "../../Theme/tokens/builders/filledSurface.js";
+import { focusVisibleRing } from "../../Theme/chakra/focusRing.styles.js";
+import { scaleFor } from "../../Theme/chakra/paletteFromTheme.js";
+/** One themed radio; `ref` is its native `<input type="radio">`. */
+const RadioButton = forwardRef(function RadioButton({ label, description, content, colorScheme, isChecked, onChange, isDisabled, size, value, defaultChecked, labelFontSize = "0.875rem", labelClampLines = 2, showLabelTooltip = (label || "").length > 18, labelTooltip = label, ...rest }, ref) {
+    const { colors } = useCustomTheme();
+    const palette = colorScheme ? scaleFor(colors, colorScheme, colors.primary) : colors.primary;
+    const filled = resolveFilledSurface(palette, colors);
+    return (_jsx(ChakraRadio, { ...rest, ref: ref, colorScheme: colorScheme, isChecked: isChecked, onChange: onChange, isDisabled: isDisabled, size: size, value: value, defaultChecked: defaultChecked, borderColor: fieldHoverBorder(colors), borderWidth: "1px", _hover: {
+            borderColor: filled.fill,
+            backgroundColor: colors.background[100],
+        }, _focusVisible: focusVisibleRing(colors), _invalid: { borderColor: colors.semanticText.error }, _disabled: {
+            bg: colors.background[100],
+            borderColor: colors.boxborder[500],
+            opacity: 1,
+            cursor: "not-allowed",
         }, sx: {
             "&[data-checked]": {
-                backgroundColor: theme.colors.primary[500],
-                borderColor: theme.colors.primary[500]
+                backgroundColor: filled.fill,
+                borderColor: filled.fill,
             },
             "&[data-checked]:hover": {
-                backgroundColor: theme.colors.primary[500],
-                borderColor: theme.colors.primary[500],
-                boxShadow: `0 0 0 2px ${theme.colors.primary[200]}`,
+                backgroundColor: filled.hoverFill,
+                borderColor: filled.hoverFill,
             },
-        }, children: _jsx(TextLabel, { label: label, fontSize: labelFontSize, showTooltip: showLabelTooltip, tooltipLabel: labelTooltip, clampLines: labelClampLines, inline: true }) }));
-};
-const RadioButtonGroup = ({ options, onChange, value, defaultValue, isDisabled, size, colorScheme, spacing, direction = "row", align = "", labelFontSize, labelClampLines, showLabelTooltip, }) => {
-    return (_jsx(ChakraRadioGroup, { onChange: onChange, value: value, defaultValue: defaultValue, children: _jsx(Stack, { direction: direction, spacing: spacing || "2", align: align, gap: direction === "row" ? "1.25rem" : "0.1rem", children: options.map((option) => (_jsx(RadioButton, { label: option.label, value: option.id, isDisabled: isDisabled, size: size, colorScheme: colorScheme, labelFontSize: labelFontSize, labelClampLines: labelClampLines, showLabelTooltip: typeof showLabelTooltip === 'function' ? showLabelTooltip(option) : showLabelTooltip }, option.id))) }) }));
+            "&[data-checked][data-disabled]": {
+                backgroundColor: colors.background[100],
+                borderColor: colors.boxborder[500],
+            },
+        }, children: _jsxs(Box, { children: [_jsx(TextLabel, { label: label, fontSize: labelFontSize, showTooltip: showLabelTooltip, tooltipLabel: labelTooltip, clampLines: labelClampLines, inline: true }), description && (_jsx(Box, { as: "span", display: "block", fontSize: "xs", color: colors.textMuted, mt: "0.125rem", children: description })), content] }) }));
+});
+RadioButton.displayName = "RadioButton";
+const RadioButtonGroup = ({ options, children, onChange, value, defaultValue, isDisabled, size, colorScheme, spacing, direction = "row", align = "", labelFontSize, labelClampLines, showLabelTooltip, label, "aria-label": ariaLabel, name, id, error, errorMessage, helperText, isRequired = false, }) => {
+    const ids = useFieldIds(id, { error, errorMessage, helperText });
+    return (_jsxs(Box, { children: [label && (_jsx(Box, { id: ids.labelId, children: _jsx(TextLabel, { label: label, isRequired: isRequired }) })), _jsx(ChakraRadioGroup, { onChange: onChange, value: value, defaultValue: defaultValue, name: name, id: ids.inputId, "aria-labelledby": label ? ids.labelId : undefined, "aria-label": label ? undefined : ariaLabel, "aria-describedby": ids.describedBy, "aria-invalid": error || undefined, "aria-required": isRequired || undefined, children: _jsx(Stack, { direction: direction, spacing: spacing || "2", align: align, gap: direction === "row" ? "1.25rem" : "0.1rem", children: children !== null && children !== void 0 ? children : options === null || options === void 0 ? void 0 : options.map((option) => (_jsx(RadioButton, { label: option.label, description: option.description, content: typeof option.content === "function" ? option.content(option) : option.content, value: option.id, isDisabled: isDisabled, isInvalid: error, size: size, colorScheme: colorScheme, labelFontSize: labelFontSize, labelClampLines: labelClampLines, showLabelTooltip: typeof showLabelTooltip === 'function' ? showLabelTooltip(option) : showLabelTooltip }, option.id))) }) }), _jsx(FieldMessage, { error: error, errorMessage: errorMessage, helperText: helperText, helperId: ids.helperId, errorId: ids.errorId })] }));
 };
 export { RadioButton, RadioButtonGroup };

package/dist/esm/Components/RangeSlider/RangeSlider.js

@@ -0,0 +1,131 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useId, useRef, useState } from "react";
+import { Box, Flex, Text } from "@chakra-ui/react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { focusVisibleStyles } from "../../Theme/chakra/focusRing.styles.js";
+import ToolTip from "../ToolTip/ToolTip.js";
+import { resolveRangeSliderColors } from "./rangeSliderColors.js";
+import { rangeSliderSize } from "./rangeSliderSize.js";
+import { assertRangeBounds, nudgeDelta, positionToValue, resolveMaxThumbValue, resolveMinThumbValue, snapToStep, stepMarks, valueToPosition, } from "./rangeSliderMath.js";
+const BIG_STEP_MULTIPLIER = 10;
+const isRangeValue = (value) => Array.isArray(value);
+function RangeSlider(rawProps) {
+    var _a;
+    const { min, max, value, defaultValue, onChange, onChangeEnd, onChangeStart, step = 1, minDistance = 0, isDisabled = false, scale = "linear", formatValue = String, size = "sm", label = "Range", minThumbLabel = "Minimum", maxThumbLabel = "Maximum", "aria-label": ariaLabel, showValueLabels = true, showTooltip = true, marks, testId, } = rawProps;
+    assertRangeBounds(min, max, scale);
+    const isRange = isRangeValue((_a = value !== null && value !== void 0 ? value : defaultValue) !== null && _a !== void 0 ? _a : [min, max]);
+    const { colors } = useCustomTheme();
+    const { track, fill, thumbBg, thumbBorder } = resolveRangeSliderColors(colors);
+    const { trackHeight, thumbSize } = rangeSliderSize(size);
+    const focusRing = focusVisibleStyles(colors);
+    const reactId = useId();
+    const trackRef = useRef(null);
+    const [internalValue, setInternalValue] = useState(defaultValue !== null && defaultValue !== void 0 ? defaultValue : (isRange ? [min, max] : min));
+    const [dragging, setDragging] = useState(null);
+    const [dragValue, setDragValue] = useState(null);
+    const isControlled = value !== undefined;
+    const committedValue = isControlled ? value : internalValue;
+    const liveValue = dragValue !== null && dragValue !== void 0 ? dragValue : committedValue;
+    const [currentMin, currentMax] = isRangeValue(liveValue) ? liveValue : [min, liveValue];
+    const currentSingle = isRangeValue(liveValue) ? liveValue[0] : liveValue;
+    const commit = useCallback((next, isFinal) => {
+        if (!isControlled)
+            setInternalValue(next);
+        onChange === null || onChange === void 0 ? void 0 : onChange(next);
+        if (isFinal)
+            onChangeEnd === null || onChangeEnd === void 0 ? void 0 : onChangeEnd(next);
+    }, [isControlled, onChange, onChangeEnd]);
+    const positionFromClientX = useCallback((clientX) => {
+        const trackEl = trackRef.current;
+        if (!trackEl)
+            return 0;
+        const { left, width } = trackEl.getBoundingClientRect();
+        const ratio = width === 0 ? 0 : (clientX - left) / width;
+        return Math.min(100, Math.max(0, ratio * 100));
+    }, []);
+    const startDrag = (thumb) => (e) => {
+        if (isDisabled)
+            return;
+        e.currentTarget.setPointerCapture(e.pointerId);
+        setDragging(thumb);
+        setDragValue(isRange ? [currentMin, currentMax] : currentSingle);
+        onChangeStart === null || onChangeStart === void 0 ? void 0 : onChangeStart();
+    };
+    const handleMove = (thumb) => (e) => {
+        if (isDisabled || dragging !== thumb)
+            return;
+        const desired = positionToValue(positionFromClientX(e.clientX), min, max, scale);
+        const next = isRange
+            ? thumb === "min"
+                ? [resolveMinThumbValue(desired, min, max, step, currentMax, minDistance), currentMax]
+                : [currentMin, resolveMaxThumbValue(desired, min, max, step, currentMin, minDistance)]
+            : snapToStep(desired, min, max, step);
+        setDragValue(next);
+        commit(next, false);
+    };
+    const endDrag = () => {
+        if (!dragging)
+            return;
+        setDragging(null);
+        const final = dragValue !== null && dragValue !== void 0 ? dragValue : committedValue;
+        setDragValue(null);
+        commit(final, true);
+    };
+    const nudgeRange = (thumb, e) => {
+        if (e.key === "Home" || e.key === "End") {
+            e.preventDefault();
+            const next = thumb === "min"
+                ? e.key === "Home"
+                    ? [min, currentMax]
+                    : [resolveMinThumbValue(currentMax - minDistance, min, max, step, currentMax, minDistance), currentMax]
+                : e.key === "End"
+                    ? [currentMin, max]
+                    : [currentMin, resolveMaxThumbValue(currentMin + minDistance, min, max, step, currentMin, minDistance)];
+            commit(next, true);
+            return;
+        }
+        const delta = nudgeDelta(e.key, step, step * BIG_STEP_MULTIPLIER, e.shiftKey);
+        if (delta === null)
+            return;
+        e.preventDefault();
+        const next = thumb === "min"
+            ? [resolveMinThumbValue(currentMin + delta, min, max, step, currentMax, minDistance), currentMax]
+            : [currentMin, resolveMaxThumbValue(currentMax + delta, min, max, step, currentMin, minDistance)];
+        commit(next, true);
+    };
+    const nudgeSingle = (e) => {
+        if (e.key === "Home" || e.key === "End") {
+            e.preventDefault();
+            commit(e.key === "Home" ? min : max, true);
+            return;
+        }
+        const delta = nudgeDelta(e.key, step, step * BIG_STEP_MULTIPLIER, e.shiftKey);
+        if (delta === null)
+            return;
+        e.preventDefault();
+        commit(snapToStep(currentSingle + delta, min, max, step), true);
+    };
+    const nudge = (thumb) => (e) => {
+        if (isDisabled)
+            return;
+        if (isRange)
+            nudgeRange(thumb, e);
+        else
+            nudgeSingle(e);
+    };
+    const minPos = valueToPosition(isRange ? currentMin : min, min, max, scale);
+    const maxPos = valueToPosition(isRange ? currentMax : currentSingle, min, max, scale);
+    const cursor = isDisabled ? "not-allowed" : "grab";
+    const opacity = isDisabled ? 0.5 : 1;
+    const resolvedMarks = Array.isArray(marks)
+        ? marks
+        : marks === true
+            ? stepMarks(min, max, step).map((v) => ({ value: v }))
+            : [];
+    const singleThumbLabel = ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : "Value";
+    return (_jsxs(Box, { "data-testid": testId, opacity: opacity, children: [label ? (_jsx(Text, { fontSize: "xs", fontWeight: 600, color: colors.textMuted, mb: 2, children: label })) : null, showValueLabels ? (_jsxs(Flex, { justify: isRange ? "space-between" : "flex-end", mb: 1, children: [isRange ? (_jsx(Text, { fontSize: "xs", fontWeight: 600, color: colors.accentText, children: formatValue(currentMin) })) : null, _jsx(Text, { fontSize: "xs", fontWeight: 600, color: colors.accentText, children: formatValue(isRange ? currentMax : currentSingle) })] })) : null, _jsx(Box, { position: "relative", pt: 5, pb: resolvedMarks.length ? 6 : 1, px: 1, children: _jsxs(Box, { ref: trackRef, position: "relative", h: trackHeight, borderRadius: "full", bg: track, children: [_jsx(Box, { position: "absolute", top: 0, h: trackHeight, borderRadius: "full", bg: fill, style: { left: `${minPos}%`, width: `${Math.max(maxPos - minPos, 0)}%` } }), resolvedMarks.map((mark) => {
+                            const markPos = valueToPosition(mark.value, min, max, scale);
+                            return (_jsx(Box, { "data-mark-value": mark.value, position: "absolute", top: "50%", left: `${markPos}%`, transform: "translate(-50%, -50%)", boxSize: "4px", borderRadius: "full", bg: colors.gray[400], children: mark.label ? (_jsx(Text, { position: "absolute", top: "12px", left: "50%", transform: "translateX(-50%)", fontSize: "xs-minus", color: colors.textMuted, whiteSpace: "nowrap", children: mark.label })) : null }, mark.value));
+                        }), isRange ? (_jsx(ToolTip, { label: formatValue(currentMin), placement: "top", isOpen: showTooltip && dragging === "min", hasArrow: true, children: _jsx(Box, { role: "slider", tabIndex: isDisabled ? -1 : 0, "aria-disabled": isDisabled || undefined, "aria-orientation": "horizontal", "aria-label": minThumbLabel, "aria-valuemin": min, "aria-valuemax": currentMax, "aria-valuenow": currentMin, "aria-valuetext": formatValue(currentMin), position: "absolute", top: "50%", style: { left: `${minPos}%` }, transform: "translate(-50%, -50%)", boxSize: thumbSize, borderRadius: "full", borderWidth: "2px", borderColor: thumbBorder, bg: thumbBg, cursor: cursor, sx: { touchAction: "none", ...focusRing }, onPointerDown: startDrag("min"), onPointerMove: handleMove("min"), onPointerUp: endDrag, onPointerCancel: endDrag, onKeyDown: nudge("min"), "data-testid": testId ? `${testId}-thumb-min` : undefined, id: `${reactId}-min` }) })) : null, _jsx(ToolTip, { label: formatValue(isRange ? currentMax : currentSingle), placement: "top", isOpen: showTooltip && dragging === (isRange ? "max" : "min"), hasArrow: true, children: _jsx(Box, { role: "slider", tabIndex: isDisabled ? -1 : 0, "aria-disabled": isDisabled || undefined, "aria-orientation": "horizontal", "aria-label": isRange ? maxThumbLabel : singleThumbLabel, "aria-valuemin": isRange ? currentMin : min, "aria-valuemax": max, "aria-valuenow": isRange ? currentMax : currentSingle, "aria-valuetext": formatValue(isRange ? currentMax : currentSingle), position: "absolute", top: "50%", style: { left: `${maxPos}%` }, transform: "translate(-50%, -50%)", boxSize: thumbSize, borderRadius: "full", borderWidth: "2px", borderColor: thumbBorder, bg: thumbBg, cursor: cursor, sx: { touchAction: "none", ...focusRing }, onPointerDown: startDrag(isRange ? "max" : "min"), onPointerMove: handleMove(isRange ? "max" : "min"), onPointerUp: endDrag, onPointerCancel: endDrag, onKeyDown: nudge(isRange ? "max" : "min"), "data-testid": testId ? (isRange ? `${testId}-thumb-max` : `${testId}-thumb`) : undefined, id: `${reactId}-${isRange ? "max" : "single"}` }) })] }) })] }));
+}
+export default RangeSlider;

package/dist/esm/Components/RangeSlider/RangeSliderProps.js

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

package/dist/esm/Components/RangeSlider/rangeSliderColors.js

@@ -0,0 +1,7 @@
+import { liftToContrast } from "../../Theme/tokens/builders/outlineRung.js";
+/** Fill and thumb border both lift to 3:1 against the neutral track — same recipe as ProgressBar's fill. */
+export const resolveRangeSliderColors = (colors) => {
+    const track = colors.gray[100];
+    const fill = liftToContrast(colors.primary[500], track);
+    return { track, fill, thumbBg: colors.background[50], thumbBorder: fill };
+};

package/dist/esm/Components/RangeSlider/rangeSliderMath.js

@@ -0,0 +1,69 @@
+const clamp = (value, min, max) => Math.min(Math.max(value, min), max);
+/** Value → track position (0–100); "log" spaces by ratio, so equal drag = equal % change, not equal unit change. */
+export function valueToPosition(value, min, max, scale) {
+    const clamped = clamp(value, min, max);
+    if (scale === "log") {
+        return (100 * Math.log(clamped / min)) / Math.log(max / min);
+    }
+    return ((clamped - min) / (max - min)) * 100;
+}
+/** Track position (0–100) → value. Inverse of valueToPosition for the same min/max/scale. */
+export function positionToValue(position, min, max, scale) {
+    const clampedPosition = clamp(position, 0, 100);
+    if (scale === "log") {
+        return min * Math.pow(max / min, clampedPosition / 100);
+    }
+    return min + ((max - min) * clampedPosition) / 100;
+}
+/** Snaps onto the step grid anchored at min, then clamps into [min, max]. step <= 0 only clamps. */
+export function snapToStep(value, min, max, step) {
+    if (step <= 0)
+        return clamp(value, min, max);
+    const steps = Math.round((value - min) / step);
+    return clamp(min + steps * step, min, max);
+}
+/** Fails loudly on a configuration that can't map to a position — never a silent NaN downstream. */
+export function assertRangeBounds(min, max, scale) {
+    if (max <= min) {
+        throw new Error(`RangeSlider: max (${max}) must be greater than min (${min}).`);
+    }
+    if (scale === "log" && min <= 0) {
+        throw new Error(`RangeSlider: min (${min}) must be greater than 0 when scale is "log".`);
+    }
+}
+/** Resolves the lower thumb's next value: snapped, then capped below the upper thumb by minDistance. */
+export function resolveMinThumbValue(desired, min, max, step, otherValue, minDistance) {
+    const ceiling = clamp(otherValue - minDistance, min, max);
+    return Math.min(snapToStep(desired, min, max, step), ceiling);
+}
+/** Resolves the upper thumb's next value: snapped, then floored above the lower thumb by minDistance. */
+export function resolveMaxThumbValue(desired, min, max, step, otherValue, minDistance) {
+    const floor = clamp(otherValue + minDistance, min, max);
+    return Math.max(snapToStep(desired, min, max, step), floor);
+}
+export function stepMarks(min, max, step) {
+    if (step <= 0)
+        return [min, max];
+    const marks = [];
+    for (let v = min; v < max; v += step)
+        marks.push(v);
+    marks.push(max);
+    return marks;
+}
+/** Arrow/Page key → signed step delta; null for a key this slider doesn't handle. */
+export function nudgeDelta(key, step, bigStep, shiftKey) {
+    switch (key) {
+        case "ArrowRight":
+        case "ArrowUp":
+            return shiftKey ? bigStep : step;
+        case "ArrowLeft":
+        case "ArrowDown":
+            return shiftKey ? -bigStep : -step;
+        case "PageUp":
+            return bigStep;
+        case "PageDown":
+            return -bigStep;
+        default:
+            return null;
+    }
+}

package/dist/esm/Components/RangeSlider/rangeSliderSize.js

@@ -0,0 +1,8 @@
+const RANGE_SLIDER_SIZES = {
+    xs: { trackHeight: "2px", thumbSize: "0.875rem" },
+    sm: { trackHeight: "3px", thumbSize: "1rem" },
+    md: { trackHeight: "4px", thumbSize: "1.25rem" },
+    lg: { trackHeight: "5px", thumbSize: "1.5rem" },
+};
+/** Track thickness and thumb diameter for a size — its own values, keyed by the same size names. */
+export const rangeSliderSize = (size) => RANGE_SLIDER_SIZES[size];

package/dist/esm/Components/Rating/Rating.js

@@ -0,0 +1,80 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useRef, useState } from "react";
+import { Box, Flex, Text } from "@chakra-ui/react";
+import { Star } from "lucide-react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { NUMERIC_TEXT } from "../../Theme/tokens/primitives/typography.js";
+import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
+import { reducedMotionSx, usePrefersReducedMotion } from "../../Theme/chakra/motion.js";
+import { focusVisibleStyles } from "../../Theme/chakra/focusRing.styles.js";
+import { DEFAULT_LOCALE } from "../../Utils/price.js";
+const STAR_PX = { xs: 12, sm: 14, md: 18, lg: 24 };
+const HIT_PX = { xs: 24, sm: 28, md: 44, lg: 44 };
+const TEXT_SIZE = { xs: "xs", sm: "xs", md: "sm", lg: "md" };
+const GAP_PX = { xs: 1, sm: 1, md: 2, lg: 2 };
+const clamp = (n, lo, hi) => Math.min(hi, Math.max(lo, n));
+const tenth = (n) => Math.round(n * 10) / 10;
+const StarGlyph = ({ px, fillPercent, filled, empty }) => (_jsxs(Box, { as: "span", "aria-hidden": true, position: "relative", display: "inline-flex", boxSize: `${px}px`, flexShrink: 0, color: empty, children: [_jsx(Star, { size: px, fill: "currentColor", strokeWidth: 1.5 }), fillPercent > 0 && (_jsx(Box, { as: "span", "data-fill": fillPercent, position: "absolute", inset: 0, color: filled, sx: {
+                clipPath: `inset(0 ${100 - fillPercent}% 0 0)`,
+                "[dir=rtl] &": { clipPath: `inset(0 0 0 ${100 - fillPercent}%)` },
+            }, children: _jsx(Star, { size: px, fill: "currentColor", strokeWidth: 1.5 }) }))] }));
+const fillOf = (index, value) => clamp(value - index, 0, 1) * 100;
+/** Star rating with fractional fill; becomes a radio group for "write a review" when `onValueChange` is set. */
+const Rating = ({ value, defaultValue = 0, max = 5, size = "sm", showValue = true, count, compactCount = false, locale = DEFAULT_LOCALE, onValueChange, isDisabled = false, "aria-label": ariaLabel, "data-testid": testId, }) => {
+    const { colors } = useCustomTheme();
+    const [inner, setInner] = useState(defaultValue);
+    const [hover, setHover] = useState(null);
+    const reduced = usePrefersReducedMotion();
+    const refs = useRef([]);
+    const interactive = !!onValueChange;
+    const current = tenth(clamp(value !== null && value !== void 0 ? value : (interactive ? inner : 0), 0, max));
+    const px = STAR_PX[size];
+    const nf = new Intl.NumberFormat(locale);
+    const valueText = new Intl.NumberFormat(locale, { minimumFractionDigits: 1, maximumFractionDigits: 1 }).format(current);
+    const countText = count === undefined
+        ? null
+        : compactCount
+            ? new Intl.NumberFormat(locale, { notation: "compact", maximumFractionDigits: 1 }).format(count)
+            : nf.format(count);
+    const summary = (_jsxs(_Fragment, { children: [showValue && current > 0 && (_jsx(Text, { as: "span", fontSize: TEXT_SIZE[size], fontWeight: 600, color: colors.header[900], sx: NUMERIC_TEXT, children: valueText })), countText !== null && (_jsxs(Text, { as: "span", fontSize: TEXT_SIZE[size], color: colors.textMuted, sx: NUMERIC_TEXT, children: ["(", countText, ")"] }))] }));
+    if (!interactive) {
+        const label = ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : (current === 0 && !count
+            ? "Not rated yet"
+            : `Rated ${valueText} out of ${nf.format(max)}${count ? ` from ${nf.format(count)} ${count === 1 ? "rating" : "ratings"}` : ""}`);
+        return (_jsxs(Flex, { as: "span", role: "img", "aria-label": label, "data-testid": testId, display: "inline-flex", align: "center", gap: 1.5, verticalAlign: "middle", children: [_jsx(Flex, { as: "span", "aria-hidden": true, gap: `${GAP_PX[size]}px`, children: Array.from({ length: max }, (_, i) => (_jsx(StarGlyph, { px: px, fillPercent: fillOf(i, current), filled: colors.star, empty: colors.boxborder[300] }, i))) }), summary] }));
+    }
+    const select = (next) => {
+        if (isDisabled)
+            return;
+        if (value === undefined)
+            setInner(next);
+        onValueChange(next);
+    };
+    const chosen = Math.round(current);
+    const focusStop = chosen > 0 ? chosen : 1;
+    const shown = hover !== null && hover !== void 0 ? hover : chosen;
+    const onKeyDown = (e) => {
+        var _a;
+        const move = {
+            ArrowRight: chosen + 1,
+            ArrowUp: chosen + 1,
+            ArrowLeft: chosen - 1,
+            ArrowDown: chosen - 1,
+            Home: 1,
+            End: max,
+        };
+        if (!(e.key in move))
+            return;
+        e.preventDefault();
+        const next = clamp(move[e.key], 1, max);
+        select(next);
+        (_a = refs.current[next - 1]) === null || _a === void 0 ? void 0 : _a.focus();
+    };
+    return (_jsxs(Flex, { as: "span", display: "inline-flex", align: "center", gap: 1.5, "data-testid": testId, children: [_jsx(Flex, { as: "span", role: "radiogroup", "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : "Rating", "aria-disabled": isDisabled || undefined, gap: `${GAP_PX[size]}px`, onMouseLeave: () => setHover(null), children: Array.from({ length: max }, (_, i) => {
+                    const n = i + 1;
+                    return (_jsx(Box, { as: "button", type: "button", role: "radio", ref: (el) => {
+                            refs.current[i] = el;
+                        }, "aria-checked": n === chosen, "aria-label": `${n} ${n === 1 ? "star" : "stars"}`, tabIndex: n === focusStop && !isDisabled ? 0 : -1, disabled: isDisabled, onClick: () => select(n), onKeyDown: onKeyDown, onMouseEnter: () => !isDisabled && setHover(n), display: "inline-flex", alignItems: "center", justifyContent: "center", boxSize: `${HIT_PX[size]}px`, mx: `-${(HIT_PX[size] - px) / 2 - 1}px`, borderRadius: "full", cursor: isDisabled ? "not-allowed" : "pointer", opacity: isDisabled ? 0.5 : 1, transition: transitionFor(["transform"]), _active: isDisabled || reduced ? undefined : { transform: "scale(0.88)" }, sx: { ...focusVisibleStyles(colors), ...reducedMotionSx() }, children: _jsx(StarGlyph, { px: px, fillPercent: fillOf(i, shown), filled: colors.star, empty: colors.boxborder[300] }) }, n));
+                }) }), summary] }));
+};
+export default Rating;

package/dist/esm/Components/Rating/RatingProps.js

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

package/dist/esm/Components/Reorder/Reorder.js

@@ -3,6 +3,8 @@ import { Badge, Box, Divider, HStack, IconButton, Image, Text, } from "@chakra-u
 import { DragDropContext, Droppable, Draggable, } from "@hello-pangea/dnd";
 import { BetweenHorizonalStart, GripVertical, X } from "lucide-react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { BORDER_WIDTHS } from "../../Theme/tokens/primitives/borderWidths.js";
+/** Horizontal drag-reorderable row of image tiles (wraps @hello-pangea/dnd) — not a substitute for KanbanBoard's column drag/drop. */
 const ReorderList = ({ label = "", items, onReorder, showRemoveIcon = false, onRemove, }) => {
     const { colors } = useCustomTheme();
     const handleDragEnd = (result) => {
@@ -13,9 +15,9 @@ const ReorderList = ({ label = "", items, onReorder, showRemoveIcon = false, onR
         reordered.splice(result.destination.index, 0, moved);
         onReorder(reordered);
     };
-    return (_jsxs(Box, { borderWidth: "0.063rem", borderRadius: "md", px: 3, py: 2, bg: colors.background[50], children: [_jsxs(Box, { display: "flex", alignItems: "center", gap: 2, children: [_jsx(BetweenHorizonalStart, {}), _jsx(Text, { fontFamily: "open-sans, sans-serif", fontWeight: 600, fontSize: 14, lineHeight: "100%", letterSpacing: "4%", textTransform: "uppercase", py: 4, children: label })] }), _jsx(Divider, {}), _jsx("br", {}), _jsx(DragDropContext, { onDragEnd: handleDragEnd, children: _jsx(Droppable, { droppableId: "item-list", direction: "horizontal", children: (provided) => (_jsxs(HStack, { ref: provided.innerRef, ...provided.droppableProps, spacing: 4, overflowX: "auto", children: [items.map((item, index) => (_jsx(Draggable, { draggableId: item.id, index: index, children: (provided) => {
+    return (_jsxs(Box, { borderWidth: BORDER_WIDTHS.hairline, borderRadius: "xl", px: 3, py: 2, bg: colors.background[50], children: [_jsxs(Box, { display: "flex", alignItems: "center", gap: 2, children: [_jsx(BetweenHorizonalStart, {}), _jsx(Text, { fontFamily: "open-sans, sans-serif", fontWeight: 600, fontSize: "sm", lineHeight: "100%", letterSpacing: "0.06em", textTransform: "uppercase", py: 4, children: label })] }), _jsx(Divider, {}), _jsx("br", {}), _jsx(DragDropContext, { onDragEnd: handleDragEnd, children: _jsx(Droppable, { droppableId: "item-list", direction: "horizontal", children: (provided) => (_jsxs(HStack, { ref: provided.innerRef, ...provided.droppableProps, spacing: 4, overflowX: "auto", children: [items.map((item, index) => (_jsx(Draggable, { draggableId: item.id, index: index, children: (provided) => {
                                     var _a;
-                                    return (_jsxs(Box, { ref: provided.innerRef, ...provided.draggableProps, ...provided.dragHandleProps, position: "relative", border: "0.063rem solid", borderColor: colors.boxborder[200], borderRadius: "md", overflow: "hidden", children: [_jsx(Image, { src: item.previewUrl, alt: (_a = item.name) !== null && _a !== void 0 ? _a : `item-${index}`, boxSize: "7.5rem", objectFit: "cover" }), _jsx(IconButton, { icon: _jsx(GripVertical, { size: 16, color: colors.textMuted }), "aria-label": "Drag", size: "sm", position: "absolute", top: 1, left: 1, variant: "ghost" }), _jsx(Badge, { position: "absolute", colorScheme: "gray", variant: "solid", bottom: 1, right: 1, children: index + 1 }), showRemoveIcon && (_jsx(IconButton, { icon: _jsx(X, { size: 16, color: colors.semanticText.error }), "aria-label": "Remove", size: "sm", position: "absolute", top: 1, right: 1, variant: "ghost", onClick: () => onRemove === null || onRemove === void 0 ? void 0 : onRemove(item.id) }))] }));
+                                    return (_jsxs(Box, { ref: provided.innerRef, ...provided.draggableProps, ...provided.dragHandleProps, position: "relative", border: `${BORDER_WIDTHS.hairline} solid`, borderColor: colors.boxborder[200], borderRadius: "lg", overflow: "hidden", children: [_jsx(Image, { src: item.previewUrl, alt: (_a = item.name) !== null && _a !== void 0 ? _a : `item-${index + 1}`, boxSize: "7.5rem", objectFit: "cover" }), _jsx(IconButton, { icon: _jsx(GripVertical, { size: 16, color: colors.textMuted }), "aria-label": "Drag", size: "sm", position: "absolute", top: 1, left: 1, variant: "ghost" }), _jsx(Badge, { position: "absolute", colorScheme: "gray", variant: "solid", bottom: 1, right: 1, children: index + 1 }), showRemoveIcon && (_jsx(IconButton, { icon: _jsx(X, { size: 16, color: colors.semanticText.error }), "aria-label": "Remove", size: "sm", position: "absolute", top: 1, right: 1, variant: "ghost", onClick: () => onRemove === null || onRemove === void 0 ? void 0 : onRemove(item.id) }))] }));
                                 } }, item.id))), provided.placeholder] })) }) })] }));
 };
 export default ReorderList;

package/dist/esm/Components/ReviewList/ReviewList.js

@@ -0,0 +1,89 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useId, useMemo, useRef, useState } from "react";
+import { Box, Flex, Text, VisuallyHidden } from "@chakra-ui/react";
+import { BadgeCheck, ThumbsUp } from "lucide-react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { NUMERIC_TEXT } from "../../Theme/tokens/primitives/typography.js";
+import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
+import { reducedMotionSx } from "../../Theme/chakra/motion.js";
+import { focusVisibleStyles } from "../../Theme/chakra/focusRing.styles.js";
+import { DEFAULT_LOCALE } from "../../Utils/price.js";
+import Button from "../Button/Button.js";
+import Rating from "../Rating/Rating.js";
+import Skeletons from "../Skeletons/Skeletons.js";
+const DEFAULT_LABELS = {
+    verified: "Verified purchase",
+    helpful: (count) => `Helpful (${count})`,
+    readMore: "Read more",
+    readLess: "Read less",
+    loadMore: "Load more reviews",
+    loadingMore: "Loading more reviews…",
+    emptyTitle: "No reviews yet",
+    emptyBody: "Reviews from verified buyers will show up here.",
+    purchasedSize: (size) => `Size ${size}`,
+    loadingReviews: "Loading reviews",
+    moreLoaded: (count) => `${count} more ${count === 1 ? "review" : "reviews"} loaded`,
+    photoAlt: (author) => `Photo from ${author}'s review`,
+};
+const DATE_ONLY = /^(\d{4})-(\d{2})-(\d{2})$/;
+const SKELETON_ROWS = [0, 1, 2];
+const makeFormatter = (locale) => {
+    const options = { day: "numeric", month: "short", year: "numeric" };
+    try {
+        return new Intl.DateTimeFormat(locale, options);
+    }
+    catch {
+        return new Intl.DateTimeFormat(DEFAULT_LOCALE, options);
+    }
+};
+const formatDate = (raw, fmt) => {
+    const dateOnly = DATE_ONLY.exec(raw);
+    const parsed = dateOnly ? new Date(Number(dateOnly[1]), Number(dateOnly[2]) - 1, Number(dateOnly[3])) : new Date(raw);
+    if (Number.isNaN(parsed.getTime()))
+        return { text: raw, valid: false };
+    return { text: fmt.format(parsed), valid: true };
+};
+const Dot = () => (_jsx(Text, { as: "span", "aria-hidden": true, children: "\u00B7" }));
+const ReviewRow = ({ review, index, clampChars, fmt, labels, pressed, expanded, onToggleHelpful, onToggleExpanded }) => {
+    var _a;
+    const { colors } = useCustomTheme();
+    const bodyId = useId();
+    const isLong = review.body.length > clampChars;
+    const date = formatDate(review.date, fmt);
+    const count = ((_a = review.helpful) !== null && _a !== void 0 ? _a : 0) + (pressed ? 1 : 0);
+    const showHelpful = review.helpful !== undefined || pressed;
+    return (_jsxs(Box, { as: "li", listStyleType: "none", "data-testid": `review-${review.id}`, children: [index > 0 && _jsx(Box, { "aria-hidden": true, h: "1px", bg: colors.background[100] }), _jsxs(Flex, { direction: "column", gap: 2.5, py: 6, children: [_jsxs(Flex, { align: "center", gap: 2, wrap: "wrap", children: [_jsx(Rating, { value: review.rating, size: "sm", showValue: false }), review.title && (_jsx(Text, { as: "h3", fontSize: "md", fontWeight: 600, lineHeight: 1.4, color: colors.header[900], children: review.title }))] }), _jsxs(Box, { children: [_jsx(Text, { id: bodyId, fontSize: "sm", lineHeight: 1.6, color: colors.text[700], noOfLines: isLong && !expanded ? 4 : undefined, children: review.body }), isLong && (_jsx(Box, { as: "button", type: "button", mt: 1, fontSize: "sm", fontWeight: 600, color: colors.accentText, "aria-expanded": expanded, "aria-controls": bodyId, onClick: () => onToggleExpanded(review.id), borderRadius: "sm", transition: transitionFor(["opacity"]), _hover: { opacity: 0.8 }, sx: { ...focusVisibleStyles(colors), ...reducedMotionSx() }, children: expanded ? labels.readLess : labels.readMore }))] }), review.media && review.media.length > 0 && (_jsx(Flex, { gap: 2, wrap: "wrap", children: review.media.map((m) => {
+                            var _a;
+                            return (_jsx(Box, { boxSize: "72px", borderRadius: "xl", overflow: "hidden", bg: colors.background[100], flexShrink: 0, children: _jsx("img", { src: m.src, alt: (_a = m.alt) !== null && _a !== void 0 ? _a : labels.photoAlt(review.author), loading: "lazy", style: { width: "100%", height: "100%", objectFit: "cover" } }) }, m.id));
+                        }) })), _jsxs(Flex, { align: "center", gap: 2, wrap: "wrap", fontSize: "xs", color: colors.textMuted, sx: NUMERIC_TEXT, children: [_jsx(Text, { as: "span", fontWeight: 600, color: colors.header[900], children: review.author }), review.city && (_jsxs(_Fragment, { children: [_jsx(Dot, {}), _jsx(Text, { as: "span", children: review.city })] })), _jsx(Dot, {}), date.valid ? (_jsx("time", { dateTime: review.date, children: date.text })) : (_jsx(Text, { as: "span", children: date.text })), review.purchasedSize && (_jsxs(_Fragment, { children: [_jsx(Dot, {}), _jsx(Text, { as: "span", children: labels.purchasedSize(review.purchasedSize) })] })), review.verified && (_jsxs(_Fragment, { children: [_jsx(Dot, {}), _jsxs(Flex, { as: "span", align: "center", gap: 1, fontWeight: 600, color: colors.semanticText.success, children: [_jsx(BadgeCheck, { size: 14, "aria-hidden": true, focusable: "false" }), labels.verified] })] }))] }), showHelpful && (_jsx(Box, { children: _jsx(Button, { variant: "ghost", size: "sm", "aria-pressed": pressed, onClick: () => onToggleHelpful(review), leftIcon: _jsx(ThumbsUp, { size: 14, "aria-hidden": true, fill: pressed ? "currentColor" : "none" }), sx: { color: pressed ? colors.header[900] : colors.textMuted, ...NUMERIC_TEXT }, children: labels.helpful(count) }) }))] })] }));
+};
+const SkeletonRow = () => (_jsx(Box, { as: "li", listStyleType: "none", "aria-hidden": true, py: 6, children: _jsxs(Flex, { direction: "column", gap: 3, children: [_jsx(Skeletons, { type: "skeleton", width: "80px", height: "14px", borderRadius: "sm" }), _jsxs(Flex, { direction: "column", gap: 2, children: [_jsx(Skeletons, { type: "skeleton", width: "100%", height: "12px", borderRadius: "sm" }), _jsx(Skeletons, { type: "skeleton", width: "94%", height: "12px", borderRadius: "sm" }), _jsx(Skeletons, { type: "skeleton", width: "60%", height: "12px", borderRadius: "sm" })] }), _jsx(Skeletons, { type: "skeleton", width: "180px", height: "12px", borderRadius: "sm" })] }) }));
+/** Customer reviews: stars, clamped body, verified marker, helpful vote and load-more paging, with a slot for sorting. */
+const ReviewList = ({ reviews, onHelpful, clampChars = 220, sortSlot, hasMore = false, onLoadMore, isLoading = false, isLoadingMore = false, emptyState, locale = DEFAULT_LOCALE, labels, "data-testid": testId, }) => {
+    const { colors } = useCustomTheme();
+    const copy = { ...DEFAULT_LABELS, ...labels };
+    const fmt = useMemo(() => makeFormatter(locale), [locale]);
+    const [pressed, setPressed] = useState({});
+    const [expanded, setExpanded] = useState({});
+    const [announcement, setAnnouncement] = useState("");
+    const previousCount = useRef(reviews.length);
+    const moreLoaded = copy.moreLoaded;
+    useEffect(() => {
+        const added = reviews.length - previousCount.current;
+        const hadReviews = previousCount.current > 0;
+        previousCount.current = reviews.length;
+        setAnnouncement(!isLoading && hadReviews && added > 0 ? moreLoaded(added) : "");
+    }, [reviews.length, isLoading, moreLoaded]);
+    const toggleHelpful = (review) => {
+        const next = !pressed[review.id];
+        setPressed((prev) => ({ ...prev, [review.id]: next }));
+        if (next)
+            onHelpful === null || onHelpful === void 0 ? void 0 : onHelpful(review.id);
+    };
+    const toggleExpanded = (id) => setExpanded((prev) => ({ ...prev, [id]: !prev[id] }));
+    const isEmpty = !isLoading && reviews.length === 0;
+    return (_jsxs(Box, { as: "section", "data-testid": testId, children: [sortSlot && (_jsx(Flex, { justify: "flex-end", mb: 4, children: sortSlot })), isEmpty ? ((emptyState !== null && emptyState !== void 0 ? emptyState : (_jsxs(Flex, { direction: "column", align: "center", gap: 1, py: 12, textAlign: "center", children: [_jsx(Text, { fontSize: "md", fontWeight: 600, color: colors.header[900], children: copy.emptyTitle }), _jsx(Text, { fontSize: "sm", color: colors.textMuted, children: copy.emptyBody })] })))) : (_jsx(Box, { as: "ul", m: 0, p: 0, "aria-busy": isLoading || undefined, children: isLoading
+                    ? SKELETON_ROWS.map((n) => _jsx(SkeletonRow, {}, n))
+                    : reviews.map((review, index) => (_jsx(ReviewRow, { review: review, index: index, clampChars: clampChars, fmt: fmt, labels: copy, pressed: !!pressed[review.id], expanded: !!expanded[review.id], onToggleHelpful: toggleHelpful, onToggleExpanded: toggleExpanded }, review.id))) })), hasMore && !isLoading && !isEmpty && (_jsx(Flex, { justify: "center", mt: 4, children: _jsx(Button, { variant: "outline", size: "md", onClick: onLoadMore, isDisabled: isLoadingMore, "aria-busy": isLoadingMore || undefined, children: isLoadingMore ? copy.loadingMore : copy.loadMore }) })), _jsx(VisuallyHidden, { role: "status", "aria-live": "polite", children: isLoading ? copy.loadingReviews : announcement })] }));
+};
+export default ReviewList;

package/dist/esm/Components/ReviewList/ReviewListProps.js

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

package/dist/esm/Components/ReviewSummary/ReviewSummary.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Box, Flex, Text } from "@chakra-ui/react";
+import { Star } from "lucide-react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { NUMERIC_TEXT } from "../../Theme/tokens/primitives/typography.js";
+import { DEFAULT_LOCALE } from "../../Utils/price.js";
+import Rating from "../Rating/Rating.js";
+import Button from "../Button/Button.js";
+const STARS = [5, 4, 3, 2, 1];
+const DEFAULT_MIN_RATINGS_FOR_BARS = 10;
+const defaultLabels = (locale) => ({
+    heading: "Ratings & reviews",
+    writeReview: "Write a review",
+    ratings: (count) => `${new Intl.NumberFormat(locale).format(count)} ${count === 1 ? "rating" : "ratings"}`,
+    emptyTitle: "No reviews yet",
+    emptyBody: "Bought this? Be the first to say how it fits.",
+    bar: (stars, percent) => `${stars} ${stars === 1 ? "star" : "stars"}, ${percent}%`,
+});
+const percentages = (breakdown) => {
+    const total = STARS.reduce((sum, stars) => sum + breakdown[stars], 0);
+    return (stars) => (total > 0 ? Math.round((breakdown[stars] / total) * 100) : 0);
+};
+/** Average rating, count and a five-row distribution; scales down to a thin summary or an invitation when there is little or no evidence. */
+const ReviewSummary = ({ rating, count, breakdown, minRatingsForBars = DEFAULT_MIN_RATINGS_FOR_BARS, onWriteReview, id, locale = DEFAULT_LOCALE, labels, "data-testid": testId, }) => {
+    const { colors } = useCustomTheme();
+    const copy = { ...defaultLabels(locale), ...labels };
+    const empty = count <= 0 || rating <= 0;
+    const showBars = !empty && !!breakdown && count >= minRatingsForBars;
+    const average = Math.min(5, Math.max(0, rating));
+    const averageText = new Intl.NumberFormat(locale, { minimumFractionDigits: 1, maximumFractionDigits: 1 }).format(average);
+    const nf = new Intl.NumberFormat(locale);
+    const writeButton = onWriteReview ? (_jsx(Button, { variant: "outline", onClick: onWriteReview, children: copy.writeReview })) : null;
+    const distribution = (counts) => {
+        const percentOf = percentages(counts);
+        return (_jsx(Flex, { direction: "column", gap: 2, flex: "1", minW: 0, maxW: "26rem", w: "100%", children: STARS.map((stars) => {
+                const percent = percentOf(stars);
+                return (_jsxs(Box, { display: "grid", gridTemplateColumns: "2.25rem minmax(0, 1fr) 3.5rem", alignItems: "center", columnGap: 3, children: [_jsxs(Flex, { "aria-hidden": true, align: "center", gap: 1, fontSize: "sm", color: colors.text[800], sx: NUMERIC_TEXT, children: [_jsx("span", { children: stars }), _jsx(Star, { size: 12, fill: "currentColor", strokeWidth: 1.5 })] }), _jsx(Box, { role: "meter", "aria-label": copy.bar(stars, percent), "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": percent, h: "0.5rem", borderRadius: "full", bg: colors.background[200], overflow: "hidden", children: _jsx(Box, { h: "100%", w: `${percent}%`, borderRadius: "full", bg: colors.star }) }), _jsx(Text, { "aria-hidden": true, fontSize: "sm", textAlign: "right", color: colors.textMuted, sx: NUMERIC_TEXT, children: nf.format(counts[stars]) })] }, stars));
+            }) }));
+    };
+    return (_jsxs(Box, { as: "section", "aria-labelledby": id, "data-testid": testId, children: [_jsx(Text, { as: "h2", id: id, fontSize: "lg", fontWeight: 700, lineHeight: 1.3, color: colors.header[900], children: copy.heading }), empty ? (_jsxs(Flex, { direction: "column", align: "flex-start", gap: 1, mt: 4, children: [_jsx(Text, { fontSize: "md", fontWeight: 600, color: colors.header[900], children: copy.emptyTitle }), _jsx(Text, { fontSize: "sm", color: colors.textMuted, children: copy.emptyBody }), writeButton ? _jsx(Box, { mt: 3, children: writeButton }) : null] })) : (_jsxs(_Fragment, { children: [_jsxs(Flex, { direction: { base: "column", sm: "row" }, align: { base: "flex-start", sm: "center" }, gap: { base: 5, sm: 10 }, mt: 4, children: [_jsxs(Flex, { direction: "column", align: "flex-start", gap: 1.5, flexShrink: 0, children: [_jsx(Text, { fontSize: "5xl", lineHeight: 1, fontWeight: 700, letterSpacing: "-0.02em", color: colors.header[900], sx: NUMERIC_TEXT, children: averageText }), _jsx(Rating, { value: average, size: "md", showValue: false }), _jsx(Text, { fontSize: "sm", color: colors.textMuted, sx: NUMERIC_TEXT, children: copy.ratings(count) })] }), showBars && breakdown ? distribution(breakdown) : null] }), writeButton ? _jsx(Box, { mt: 5, children: writeButton }) : null] }))] }));
+};
+export default ReviewSummary;

package/dist/esm/Components/ReviewSummary/ReviewSummaryProps.js

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