pixelize-design-library 3.0.1-beta.1 → 3.1.0

package/dist/esm/Components/ProfilePhotoViewer/ProfilePhotoViewer.js

@@ -0,0 +1,92 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useRef, useState } from "react";
+import { Box, Image, IconButton, Input, Text, Tooltip, HStack, } from "@chakra-ui/react";
+import { Eye, FileText, SquarePen, User } from "lucide-react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { BORDER_WIDTHS } from "../../Theme/tokens/primitives/borderWidths.js";
+import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
+import { accentTextOnCanvas } from "../../Theme/tokens/builders/accentText.js";
+import { bandOn } from "../../Theme/tokens/builders/planeStep.js";
+import { resolveFilledSurface } from "../../Theme/tokens/builders/filledSurface.js";
+import { hexToRgb } from "../../Theme/tokens/builders/color.js";
+const RING_TRANSITION = transitionFor(["box-shadow"], "base");
+const FADE_TRANSITION = transitionFor(["opacity"], "base");
+const ACTION_TRANSITION = 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. */
+export default 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] = useState(photoUrl);
+    const [syncedUrl, setSyncedUrl] = useState(photoUrl);
+    if (photoUrl !== syncedUrl) {
+        setSyncedUrl(photoUrl);
+        setPhoto(photoUrl);
+    }
+    const fileInputRef = useRef(null);
+    const theme = useCustomTheme();
+    const c = theme.colors;
+    const editFill = resolveFilledSurface(c.primary, c);
+    const handlePhotoChange = (event) => {
+        var _a;
+        if (!isEditable)
+            return;
+        const file = (_a = event.target.files) === null || _a === void 0 ? void 0 : _a[0];
+        if (file) {
+            const reader = new FileReader();
+            reader.onload = () => {
+                const photoUrl = reader.result;
+                setPhoto(photoUrl);
+                onPhotoChange(file);
+            };
+            reader.readAsDataURL(file);
+        }
+    };
+    const handleClick = () => {
+        var _a;
+        if (!isEditable)
+            return;
+        (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click();
+    };
+    const isPdf = photo === null || photo === void 0 ? void 0 : photo.endsWith(".pdf");
+    const viewHoverBg = 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 } = 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: `${BORDER_WIDTHS.hairline} solid ${border}`,
+        boxShadow: (_a = theme.shadows) === null || _a === void 0 ? void 0 : _a.sm,
+    };
+    const renderMedia = () => {
+        if (photo) {
+            return isPdf ? (_jsx(Box, { ...mediaFrame, bg: c.gray[100], color: accentTextOnCanvas(c.gray, c.gray[100]), display: "flex", alignItems: "center", justifyContent: "center", overflow: "hidden", children: _jsx(FileText, { size: "45%" }) })) : (_jsx(Image, { src: photo, alt: imageAlt, objectFit: imageObjectFit, ...mediaFrame }));
+        }
+        // Fallback: branded tinted avatar (initials or user glyph).
+        return (_jsx(Box, { ...mediaFrame, display: "flex", alignItems: "center", justifyContent: "center", bg: c.primary.opacity[16], color: accentTextOnCanvas(c.primary, c.backgroundColor.main), children: fallbackText ? (_jsx(Text, { fontSize: "1.75rem", fontWeight: 700, lineHeight: "1", children: fallbackText })) : (_jsx(User, { size: "48%" })) }));
+    };
+    const hasActions = isEditable || isView;
+    return (_jsxs(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: [_jsx(Box, { className: "ppv-media", borderRadius: imageBorderRadius, transition: RING_TRANSITION, children: renderMedia() }), hasActions && (_jsxs(_Fragment, { children: [_jsx(Box, { className: "ppv-overlay", position: "absolute", inset: 0, borderRadius: imageBorderRadius, bg: hoverScrim(0.3), opacity: 0, transition: FADE_TRANSITION, pointerEvents: "none" }), _jsxs(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 && (_jsx(Tooltip, { label: "Edit", "aria-label": "Edit", hasArrow: true, children: _jsx(IconButton, { icon: _jsx(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: editFill.activeFill,
+                                        color: editFill.activeColor,
+                                    } }) })), isView && (_jsx(Tooltip, { label: "View", "aria-label": "View", hasArrow: true, children: _jsx(IconButton, { icon: _jsx(Eye, { size: 14 }), isRound: isRound, size: editIconSize, onClick: handleIsView, "aria-label": "View photo", bg: c.background[50], color: c.text[700], border: `${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: 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 && (_jsx(Input, { type: "file", accept: "image/*", onChange: handlePhotoChange, hidden: true, ref: fileInputRef }))] }))] }));
+}

package/dist/esm/Components/ProfilePhotoViewer/ProfilePhotoViewerProps.js

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

package/dist/esm/Components/ProgressBar/ProgressBar.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Progress } from "@chakra-ui/react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { liftToContrast } from "../../Theme/tokens/builders/outlineRung.js";
+import { scaleNamed } from "../../Theme/tokens/builders/paletteScale.js";
+// 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)
+    ? 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. */
+export default function ProgressBar({ colorScheme, color, variant, isIndeterminate, ...rest }) {
+    var _a;
+    const { colors } = 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 ? liftToContrast(scale[500], colors.gray[100]) : undefined;
+    return (_jsx(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/esm/Components/ProgressBar/ProgressBarProps.js

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

package/dist/esm/Components/QuantityStepper/QuantityStepper.js

@@ -0,0 +1,61 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Box, Flex, Text } from "@chakra-ui/react";
+import { Minus, Plus, Trash2 } from "lucide-react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { NUMERIC_TEXT } from "../../Theme/tokens/primitives/typography.js";
+import { BUTTON_SIZES } from "../../Theme/tokens/primitives/controlSizes.js";
+import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
+import { BORDER_WIDTHS } from "../../Theme/tokens/primitives/borderWidths.js";
+import { reducedMotionSx } from "../../Theme/chakra/motion.js";
+import { focusVisibleStyles } from "../../Theme/chakra/focusRing.styles.js";
+import { tonalHover } from "../CheckoutKit/tonalHover.js";
+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 } = useCustomTheme();
+    const spec = BUTTON_SIZES[size];
+    const [inner, setInner] = 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 ${BORDER_WIDTHS.hairline} ${colors.boxborder[500]}` }
+        : { bg: colors.background[100], boxShadow: "none" };
+    const hoverFill = tonalHover(colors, variant === "outline" ? colors.background[50] : colors.background[100]);
+    const button = (kind) => {
+        const limited = kind === "dec" ? atMin && !trash : atMax;
+        const Icon = kind === "inc" ? Plus : trash ? Trash2 : Minus;
+        const label = kind === "inc" ? `Increase quantity${subject}` : trash ? `Remove${itemLabel ? ` ${itemLabel}` : ""}` : `Decrease quantity${subject}`;
+        return (_jsx(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: transitionFor(["background-color", "transform", "opacity"]), _hover: limited || disabled ? undefined : { bg: hoverFill }, _active: limited || disabled ? undefined : { transform: "scale(0.96)" }, sx: {
+                ...focusVisibleStyles(colors),
+                ...reducedMotionSx({ "&:active": { transform: "none" } }),
+                "&::before": {
+                    content: '""',
+                    position: "absolute",
+                    inset: `max(0px, calc((${MIN_HIT} - ${spec.height}) / -2))`,
+                },
+            }, children: _jsx(Icon, { size: spec.iconSize, "aria-hidden": true }) }));
+    };
+    return (_jsxs(Flex, { role: "group", "aria-label": `Quantity${subject}`, display: "inline-flex", align: "center", h: spec.height, borderRadius: "full", ...surface, "data-testid": testId, children: [button("dec"), _jsx(Text, { as: "span", "aria-live": "polite", "aria-atomic": "true", minW: "1.75rem", textAlign: "center", fontSize: spec.fontSize, fontWeight: 600, color: colors.header[900], sx: NUMERIC_TEXT, children: current }), button("inc")] }));
+};
+export default QuantityStepper;

package/dist/esm/Components/QuantityStepper/QuantityStepperProps.js

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

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

@@ -0,0 +1,11 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box } from "@chakra-ui/react";
+import { AlertTriangle, RotateCw } from "lucide-react";
+import EmptyState from "../EmptyState/EmptyState.js";
+import Button from "../Button/Button.js";
+/** 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 = AlertTriangle, onRetry, retryLabel = "Retry", isRetrying = false, action, size = "md", minH, }) => {
+    const actions = onRetry || action ? (_jsxs(_Fragment, { children: [onRetry && (_jsx(Button, { size: "sm", variant: "outline", colorScheme: "gray", label: retryLabel, leftIcon: _jsx(RotateCw, { size: 16 }), isLoading: isRetrying, loadingText: retryLabel, onClick: onRetry })), action] })) : undefined;
+    return (_jsx(Box, { role: "alert", w: "100%", children: _jsx(EmptyState, { colorScheme: "error", icon: icon, title: title, description: description, size: size, minH: minH, action: actions }) }));
+};
+export default ErrorState;

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

@@ -0,0 +1,45 @@
+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";
+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: filled.fill,
+                borderColor: filled.fill,
+            },
+            "&[data-checked]:hover": {
+                backgroundColor: filled.hoverFill,
+                borderColor: filled.hoverFill,
+            },
+            "&[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/RadioButton/RadioButtonProps.js

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

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 {};