pixelize-design-library 2.4.2-beta.55 → 2.4.2-beta.57

package/dist/esm/Components/ProductDetails/productDetailsModel.js

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

package/dist/esm/Components/ProductDetails/useInViewport.js

@@ -0,0 +1,14 @@
+import { useEffect, useState } from "react";
+/** Whether the element is on screen; true until an observer reports otherwise, and always true where IntersectionObserver is missing. */
+export const useInViewport = (ref, enabled = true) => {
+    const [inView, setInView] = useState(true);
+    useEffect(() => {
+        const node = ref.current;
+        if (!enabled || !node || typeof IntersectionObserver === "undefined")
+            return undefined;
+        const observer = new IntersectionObserver(([entry]) => setInView(entry.isIntersecting));
+        observer.observe(node);
+        return () => observer.disconnect();
+    }, [ref, enabled]);
+    return inView;
+};

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

@@ -0,0 +1,57 @@
+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 { BUTTON_SIZES } from "../../Theme/tokens/primitives/controlSizes.js";
+import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
+import { reducedMotionSx } from "../../Theme/chakra/motion.js";
+import { focusVisibleStyles } from "../../Theme/chakra/focusRing.styles.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 1px ${colors.boxborder[500]}` }
+        : { bg: colors.background[100], boxShadow: "none" };
+    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: colors.background[200] }, _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: { fontVariantNumeric: "tabular-nums" }, children: current }), button("inc")] }));
+};
+export default QuantityStepper;

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

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

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

@@ -0,0 +1,79 @@
+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 { 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: { fontVariantNumeric: "tabular-nums" }, children: valueText })), countText !== null && (_jsxs(Text, { as: "span", fontSize: TEXT_SIZE[size], color: colors.textMuted, sx: { fontVariantNumeric: "tabular-nums" }, 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/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 { 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 tabular = { fontVariantNumeric: "tabular-nums" };
+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: "12px", 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: tabular, 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, fontVariantNumeric: "tabular-nums" }, 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 { 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 tabular = { fontVariantNumeric: "tabular-nums" };
+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: tabular, 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: tabular, 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: "3rem", lineHeight: 1, fontWeight: 700, letterSpacing: "-0.02em", color: colors.header[900], sx: tabular, children: averageText }), _jsx(Rating, { value: average, size: "md", showValue: false }), _jsx(Text, { fontSize: "sm", color: colors.textMuted, sx: tabular, 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 {};

package/dist/esm/Components/SegmentedControl/SegmentedControl.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from "react";
-import { Box, Flex } from "@chakra-ui/react";
+import { Box, Flex, useBreakpointValue } from "@chakra-ui/react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 import { resolveFilledSurface } from "../../Theme/tokens/builders/filledSurface.js";
 import { BUTTON_SIZES } from "../../Theme/tokens/primitives/controlSizes.js";
@@ -11,7 +11,7 @@ import { AA_NORMAL_TEXT } from "../../Theme/tokens/builders/accentText.js";
 import { liftToContrast } from "../../Theme/tokens/builders/outlineRung.js";
 import Tag from "../Tag/Tag.js";
 import { useSlidingPill } from "./useSlidingPill.js";
-import { segmentedFocusShadow, segmentedPlateEdge, segmentedRestInk, segmentedTrackSurface, } from "./segmentedInk.js";
+import { segmentedFocusShadow, segmentedPlateEdge, segmentedRestInk, segmentedSelectedSurface, segmentedTrackSurface, } from "./segmentedInk.js";
 const TRACK_PADDING = "0.125rem";
 const UNDERLINE_WIDTH = "0.0625rem";
 const SLIDE = transitionFor(["transform", "width"], "base");
@@ -19,16 +19,20 @@ const MAX_COUNT = 99;
 const COUNT_TAG_SIZE = { sm: "xs", md: "sm", lg: "md" };
 const formatCount = (count) => (count > MAX_COUNT ? `${MAX_COUNT}+` : `${count}`);
 /** Renders role="radiogroup" of role="radio" buttons with roving tabindex, not a native form radio group; shares variant with Toggle/TableToggle (see MODULE.md). */
-export default function SegmentedControl({ options, value, onChange, size = "sm", isFullWidth = false, variant = "default", surface, "aria-label": ariaLabel, }) {
+export default function SegmentedControl({ options, value, onChange, size = "sm", isFullWidth = false, variant = "default", orientation = "horizontal", surface, "aria-label": ariaLabel, }) {
+    var _a;
     const { colors, radii } = useCustomTheme();
     const control = BUTTON_SIZES[size];
     const isBrandSlide = variant === "brandSlide";
     const isUnderlineSlide = variant === "underlineSlide";
     const hasIndicator = isBrandSlide || isUnderlineSlide;
+    const isVertical = orientation === "vertical";
+    // Below "md" a shortLabel (when the option has one) replaces the full label; the full label stays the accessible name.
+    const isCompact = (_a = useBreakpointValue({ base: true, md: false }, { ssr: false })) !== null && _a !== void 0 ? _a : false;
     const brandFill = resolveFilledSurface(colors.primary, colors);
     const trackSurface = segmentedTrackSurface(variant, colors, surface);
     const restInk = segmentedRestInk(colors, trackSurface);
-    const selectedInk = liftToContrast(colors.accentText, trackSurface, AA_NORMAL_TEXT);
+    const selectedInk = liftToContrast(colors.accentText, segmentedSelectedSurface(variant, colors, trackSurface), AA_NORMAL_TEXT);
     const hoverInk = liftToContrast(colors.text[900], trackSurface, AA_NORMAL_TEXT);
     const segmentH = `calc(${control.height} - ${isUnderlineSlide ? UNDERLINE_WIDTH : `2 * ${TRACK_PADDING}`})`;
     // Concentric: an inset child keeping the parent's radius bulges at the corners.
@@ -54,6 +58,8 @@ export default function SegmentedControl({ options, value, onChange, size = "sm"
         options,
         isFullWidth,
         size,
+        orientation,
+        isCompact,
     ]);
     const selectAt = (index) => {
         var _a;
@@ -84,11 +90,17 @@ export default function SegmentedControl({ options, value, onChange, size = "sm"
             selectAt(enabled[enabled.length - 1]);
         }
     };
-    return (_jsxs(Flex, { ref: trackRef, role: "radiogroup", "aria-label": ariaLabel, onKeyDown: handleKeyDown, onFocus: (event) => setShowFocus(event.target.matches(":focus-visible")), onBlur: () => setShowFocus(false), boxShadow: showFocus && !isUnderlineSlide ? focusShadow : plateEdge, position: "relative", display: "inline-flex", align: "center", gap: isUnderlineSlide ? "0" : TRACK_PADDING, p: isUnderlineSlide ? "0" : TRACK_PADDING, h: control.height, boxSizing: "border-box", borderRadius: isUnderlineSlide ? "none" : "lg", borderBottom: isUnderlineSlide ? `${UNDERLINE_WIDTH} solid ${colors.boxborder[200]}` : undefined, bg: isUnderlineSlide ? "transparent" : trackSurface, w: isFullWidth ? "100%" : "fit-content", minW: "max-content", children: [isBrandSlide && pill && (_jsx(Box, { "aria-hidden": "true", position: "absolute", top: TRACK_PADDING, left: 0, h: segmentH, w: `${pill.width}px`, borderRadius: innerRadius, bg: brandFill.fill, boxShadow: `0 0.125rem 0.5rem ${colors.boxShadow.primary}`, transform: `translateX(${pill.left}px)`, transition: SLIDE, sx: reducedMotionSx() })), isUnderlineSlide && pill && (_jsx(Box, { "aria-hidden": "true", position: "absolute", bottom: "-0.0625rem", left: 0, h: "0.125rem", w: `${pill.width}px`, borderRadius: "full", bg: colors.primary[500], transform: `translateX(${pill.left}px)`, transition: SLIDE, sx: reducedMotionSx() })), options.map((option, index) => {
+    return (_jsxs(Flex, { ref: trackRef, role: "radiogroup", "aria-label": ariaLabel, "aria-orientation": isVertical ? "vertical" : undefined, onKeyDown: handleKeyDown, onFocus: (event) => setShowFocus(event.target.matches(":focus-visible")), onBlur: () => setShowFocus(false), boxShadow: showFocus && !isUnderlineSlide ? focusShadow : plateEdge, position: "relative", display: "inline-flex", flexDirection: isVertical ? "column" : "row", align: isVertical ? "stretch" : "center", gap: isUnderlineSlide ? "0" : TRACK_PADDING, p: isUnderlineSlide ? "0" : TRACK_PADDING, h: isVertical ? "fit-content" : control.height, boxSizing: "border-box", borderRadius: isUnderlineSlide ? "none" : "lg", borderBottom: isUnderlineSlide && !isVertical ? `${UNDERLINE_WIDTH} solid ${colors.boxborder[200]}` : undefined, borderLeft: isUnderlineSlide && isVertical ? `${UNDERLINE_WIDTH} solid ${colors.boxborder[200]}` : undefined, bg: isUnderlineSlide ? "transparent" : trackSurface, w: isFullWidth ? "100%" : "fit-content", minW: "max-content", children: [isBrandSlide && pill && (_jsx(Box, { "aria-hidden": "true", position: "absolute", top: isVertical ? 0 : TRACK_PADDING, left: isVertical ? TRACK_PADDING : 0, right: isVertical ? TRACK_PADDING : undefined, h: segmentH, w: isVertical ? undefined : `${pill.width}px`, borderRadius: innerRadius, bg: brandFill.fill, boxShadow: `0 0.125rem 0.5rem ${colors.boxShadow.primary}`, transform: isVertical ? `translateY(${pill.top}px)` : `translateX(${pill.left}px)`, transition: SLIDE, sx: reducedMotionSx() })), isUnderlineSlide && pill && (_jsx(Box, { "aria-hidden": "true", position: "absolute", bottom: isVertical ? undefined : "-0.0625rem", left: isVertical ? "-0.0625rem" : 0, top: isVertical ? 0 : undefined, h: isVertical ? segmentH : "0.125rem", w: isVertical ? "0.125rem" : `${pill.width}px`, borderRadius: "full", bg: colors.primary[500], transform: isVertical ? `translateY(${pill.top}px)` : `translateX(${pill.left}px)`, transition: SLIDE, sx: reducedMotionSx() })), options.map((option, index) => {
                 const isSelected = option.value === value;
+                const showShortLabel = isCompact && !!option.shortLabel;
+                const displayLabel = showShortLabel ? option.shortLabel : option.label;
+                // Swapping to shortLabel must not shrink the accessible name — restate the full label (+ count) explicitly.
+                const compactAriaLabel = showShortLabel
+                    ? `${option.label}${option.count != null ? ` ${formatCount(option.count)}` : ""}`
+                    : undefined;
                 return (_jsxs(Box, { as: "button", type: "button", ref: (node) => {
                         refs.current[index] = node;
-                    }, role: "radio", "aria-checked": isSelected, disabled: option.isDisabled, tabIndex: index === tabIndex ? 0 : -1, onClick: () => onChange(option.value), position: "relative", zIndex: 1, display: "inline-flex", alignItems: "center", justifyContent: "center", gap: "0.375rem", flex: isFullWidth ? "1" : undefined, h: segmentH, px: control.paddingX, borderRadius: innerRadius, borderWidth: "1px", borderStyle: "solid", borderColor: hasIndicator
+                    }, role: "radio", "aria-checked": isSelected, "aria-label": compactAriaLabel, disabled: option.isDisabled, tabIndex: index === tabIndex ? 0 : -1, onClick: () => onChange(option.value), position: "relative", zIndex: 1, display: "inline-flex", alignItems: "center", justifyContent: isVertical ? "flex-start" : "center", gap: "0.375rem", flex: isFullWidth ? "1" : undefined, h: segmentH, px: control.paddingX, borderRadius: innerRadius, borderWidth: "1px", borderStyle: "solid", borderColor: hasIndicator
                         ? "transparent"
                         : isSelected
                             ? colors.primary.opacity[32]
@@ -102,6 +114,6 @@ export default function SegmentedControl({ options, value, onChange, size = "sm"
                         _focusVisible: segmentFocus,
                         [FOCUS_VISIBLE_OVER_STATE]: segmentFocus,
                         ...reducedMotionSx(),
-                    }, children: [option.icon, option.label, option.count != null && (_jsx(Tag, { label: formatCount(option.count), size: COUNT_TAG_SIZE[size], variant: "subtle", colorScheme: "gray" }))] }, option.value));
+                    }, children: [option.icon, displayLabel, option.count != null && (_jsx(Tag, { label: formatCount(option.count), size: COUNT_TAG_SIZE[size], variant: "subtle", colorScheme: "gray" }))] }, option.value));
             })] }));
 }

package/dist/esm/Components/SegmentedControl/segmentedInk.js

@@ -11,6 +11,8 @@ export const segmentedTrackSurface = (variant, colors, surface) => {
         return colors.surfaceRaised;
     return colors.background[600];
 };
+/** The surface the selected label sits on: the default variant lifts it onto its own plate. */
+export const segmentedSelectedSurface = (variant, colors, trackSurface) => (variant === "default" ? colors.backgroundColor.light : trackSurface);
 /** Unselected label ink, lifted to AA against the track it is drawn on. */
 export const segmentedRestInk = (colors, trackSurface) => liftToContrast(colors.text[600], trackSurface, AA_NORMAL_TEXT);
 /** A radiogroup is one tab stop, so the group wears the ring: a brand hairline plus the field bloom. */

package/dist/esm/Components/SegmentedControl/useSlidingPill.js

@@ -15,7 +15,12 @@ export function useSlidingPill(enabled, selectedIndex, extraDeps) {
         }
         const trackRect = track.getBoundingClientRect();
         const nodeRect = node.getBoundingClientRect();
-        setPill({ left: nodeRect.left - trackRect.left, width: nodeRect.width });
+        setPill({
+            left: nodeRect.left - trackRect.left,
+            top: nodeRect.top - trackRect.top,
+            width: nodeRect.width,
+            height: nodeRect.height,
+        });
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [enabled, selectedIndex, ...extraDeps]);
     return { trackRef, itemRefs, pill };

package/dist/esm/Components/SideBar/SecondaryBar.js

@@ -5,7 +5,7 @@ import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 import { getSidebarActiveAccent } from "./sidebarAccentColors.js";
 import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
 import { menuDisabled } from "./menuDisabled.js";
-import { ChevronLeft, ChevronRight } from "lucide-react";
+import { ChevronLeft, ChevronRight, LockKeyhole } from "lucide-react";
 import OverflowTooltipText from "./components/OverflowTooltipText.js";
 import ToolTip from "../ToolTip/ToolTip.js";
 import { cssForScrollBar, HEADER_HEIGHT } from "../../Constants/Sidebar.js";
@@ -28,35 +28,40 @@ const parseBadge = (badge) => {
         variant: (_c = badge === null || badge === void 0 ? void 0 : badge.variant) !== null && _c !== void 0 ? _c : "subtle",
     });
 };
+// Matches MenuItemBox/MenuPopoverContent's isBlocked — locked also blocks, not just disabled.
+const isItemBlocked = (item) => menuDisabled(item) || !!item.locked;
 const CollapsedItem = ({ item, isActive, itemFontSize, onItemClick }) => {
     var _a;
     const theme = useCustomTheme();
     const activeAccent = getSidebarActiveAccent(theme.colors);
     const { badgeVal, colorScheme, radius, variant } = parseBadge(item.badge);
-    return (_jsxs(Popover, { trigger: "hover", placement: "right-start", closeOnBlur: false, isLazy: true, children: [_jsx(PopoverTrigger, { children: _jsx(Box, { as: "a", href: (_a = item.url) !== null && _a !== void 0 ? _a : "#", "data-group": "", "aria-label": item.title, "aria-current": isActive ? "page" : undefined, "aria-disabled": menuDisabled(item) ? true : undefined, textDecoration: "none", py: 2, mb: "2px", borderRadius: "lg", display: "flex", alignItems: "center", justifyContent: "center", cursor: menuDisabled(item) ? "not-allowed" : "pointer", opacity: menuDisabled(item) ? 0.6 : 1, borderLeft: "2px solid", borderLeftColor: isActive ? theme.colors.sidebar.activeIcon : "transparent", _hover: {
-                        bg: menuDisabled(item)
+    const blocked = isItemBlocked(item);
+    return (_jsxs(Popover, { trigger: "hover", placement: "right-start", closeOnBlur: false, isLazy: true, children: [_jsx(PopoverTrigger, { children: _jsx(Box, { as: "a", href: (_a = item.url) !== null && _a !== void 0 ? _a : "#", "data-group": "", "aria-label": item.title, "aria-current": isActive ? "page" : undefined, "aria-disabled": blocked ? true : undefined, textDecoration: "none", py: 2, mb: "2px", borderRadius: "lg", display: "flex", alignItems: "center", justifyContent: "center", cursor: blocked ? "not-allowed" : "pointer", opacity: blocked ? 0.6 : 1, borderLeft: "2px solid", borderLeftColor: isActive ? theme.colors.sidebar.activeIcon : "transparent", _hover: {
+                        bg: blocked
                             ? "transparent"
                             : isActive
                                 ? "whiteAlpha.400"
                                 : "whiteAlpha.200",
                     }, onClick: (e) => {
                         e.preventDefault();
-                        if (!menuDisabled(item))
+                        if (!blocked)
                             onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(item);
-                    }, bg: isActive ? "whiteAlpha.300" : "transparent", transition: "background 0.12s", children: _jsxs(Box, { position: "relative", display: "flex", alignItems: "center", children: [_jsx(Icon, { as: item.icon, fontSize: SIDEBAR_ROW.iconSize, color: isActive ? activeAccent.icon : theme.colors.sidebar.mutedIcon, _groupHover: isActive ? undefined : { color: theme.colors.white }, transition: "color 0.12s" }), badgeVal != null && (_jsx(Box, { position: "absolute", top: "0", right: "0", w: "0.375rem", h: "0.375rem", borderRadius: "full", bg: theme.colors.sidebar.semanticText.error }))] }) }) }), _jsx(Portal, { children: _jsx(PopoverContent, { borderRadius: "lg", bg: theme.colors.sidebar.elevated, boxShadow: "lg", minW: "10rem", maxW: "14rem", py: "0.125rem", ml: "-0.5rem", cursor: menuDisabled(item) ? "not-allowed" : "pointer", zIndex: 1500, color: theme.colors.white, border: 'none', children: _jsx(PopoverBody, { p: 3, children: _jsxs(Flex, { align: "center", gap: 2, justify: "space-between", children: [_jsxs(Flex, { align: "center", gap: 2, flex: "1", minW: 0, children: [_jsx(Icon, { as: item.icon, fontSize: "md", flexShrink: 0 }), _jsx(OverflowTooltipText, { placement: "right", maxWidth: "100%", fontSize: itemFontSize, fontWeight: "medium", as: "p", children: item.title })] }), badgeVal != null && (_jsx(Badge, { ...softBadge(theme.colors, colorScheme, sidebarRowPeak(theme.colors.sidebar.elevated)), fontSize: "xs", variant: variant, borderRadius: radius, children: badgeVal }))] }) }) }) })] }));
+                    }, bg: isActive ? "whiteAlpha.300" : "transparent", transition: "background 0.12s", children: _jsxs(Box, { position: "relative", display: "flex", alignItems: "center", children: [_jsx(Icon, { as: item.icon, fontSize: SIDEBAR_ROW.iconSize, color: isActive ? activeAccent.icon : theme.colors.sidebar.mutedIcon, _groupHover: isActive ? undefined : { color: theme.colors.white }, transition: "color 0.12s" }), badgeVal != null && (_jsx(Box, { position: "absolute", top: "0", right: "0", w: "0.375rem", h: "0.375rem", borderRadius: "full", bg: theme.colors.sidebar.semanticText.error }))] }) }) }), _jsx(Portal, { children: _jsx(PopoverContent, { borderRadius: "lg", bg: theme.colors.sidebar.elevated, boxShadow: "lg", minW: "10rem", maxW: "14rem", py: "0.125rem", ml: "-0.5rem", cursor: blocked ? "not-allowed" : "pointer", zIndex: 1500, color: theme.colors.white, border: 'none', children: _jsx(PopoverBody, { p: 3, children: _jsxs(Flex, { align: "center", gap: 2, justify: "space-between", children: [_jsxs(Flex, { align: "center", gap: 2, flex: "1", minW: 0, children: [_jsx(Icon, { as: item.icon, fontSize: "md", flexShrink: 0 }), _jsx(OverflowTooltipText, { placement: "right", maxWidth: "100%", fontSize: itemFontSize, fontWeight: "medium", as: "p", children: item.title })] }), item.locked ? (item.lockedReason ? (_jsx(ToolTip, { label: item.lockedReason, placement: "top", children: _jsx(Icon, { as: LockKeyhole, fontSize: "sm", flexShrink: 0, color: theme.colors.sidebar.mutedIcon }) })) : (_jsx(Icon, { as: LockKeyhole, fontSize: "sm", flexShrink: 0, color: theme.colors.sidebar.mutedIcon }))) : (badgeVal != null && (_jsx(Badge, { ...softBadge(theme.colors, colorScheme, sidebarRowPeak(theme.colors.sidebar.elevated)), fontSize: "xs", variant: variant, borderRadius: radius, children: badgeVal })))] }) }) }) })] }));
 };
 const ExpandedItem = ({ item, isActive, itemFontSize, onItemClick }) => {
     var _a;
     const theme = useCustomTheme();
     const activeAccent = getSidebarActiveAccent(theme.colors);
     const { badgeVal, colorScheme, radius, variant } = parseBadge(item.badge);
-    return (_jsxs(Flex, { as: "a", href: (_a = item.url) !== null && _a !== void 0 ? _a : "#", "data-group": "", "aria-current": isActive ? "page" : undefined, "aria-disabled": menuDisabled(item) ? true : undefined, textDecoration: "none", px: 2, py: "7px", mb: "2px", borderRadius: "lg", align: "center", justify: "space-between", gap: 2, overflow: "hidden", cursor: menuDisabled(item) ? "not-allowed" : "pointer", opacity: menuDisabled(item) ? 0.6 : 1, bg: isActive ? "whiteAlpha.300" : "transparent", _hover: {
-            bg: menuDisabled(item) ? "transparent" : isActive ? "whiteAlpha.400" : "whiteAlpha.200",
+    const blocked = isItemBlocked(item);
+    const row = (_jsxs(Flex, { as: "a", href: (_a = item.url) !== null && _a !== void 0 ? _a : "#", "data-group": "", "aria-current": isActive ? "page" : undefined, "aria-disabled": blocked ? true : undefined, textDecoration: "none", px: 2, py: "7px", mb: "2px", borderRadius: "lg", align: "center", justify: "space-between", gap: 2, overflow: "hidden", cursor: blocked ? "not-allowed" : "pointer", opacity: blocked ? 0.6 : 1, bg: isActive ? "whiteAlpha.300" : "transparent", _hover: {
+            bg: blocked ? "transparent" : isActive ? "whiteAlpha.400" : "whiteAlpha.200",
         }, onClick: (e) => {
             e.preventDefault();
-            if (!menuDisabled(item))
+            if (!blocked)
                 onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(item);
-        }, borderLeft: "2px solid", borderLeftColor: isActive ? theme.colors.sidebar.activeIcon : "transparent", transition: "background 0.12s", children: [_jsxs(Flex, { align: "center", gap: 2, flex: "1", minW: 0, overflow: "hidden", children: [_jsx(Icon, { as: item.icon, fontSize: SIDEBAR_ROW.iconSize, flexShrink: 0, color: isActive ? activeAccent.icon : theme.colors.sidebar.mutedIcon, _groupHover: isActive ? undefined : { color: theme.colors.white }, transition: "color 0.12s" }), _jsx(Box, { flex: "1", minW: 0, children: _jsx(OverflowTooltipText, { placement: "right", maxWidth: "100%", fontSize: itemFontSize, fontWeight: isActive ? 600 : 500, color: isActive ? activeAccent.label : theme.colors.white, _groupHover: isActive ? undefined : { color: theme.colors.white }, as: "p", children: item.title }) })] }), badgeVal != null && (_jsx(Badge, { ...softBadge(theme.colors, colorScheme, sidebarRowPeak(theme.colors.sidebar.background[500])), fontSize: "xs", variant: variant, borderRadius: radius, children: badgeVal }))] }));
+        }, borderLeft: "2px solid", borderLeftColor: isActive ? theme.colors.sidebar.activeIcon : "transparent", transition: "background 0.12s", children: [_jsxs(Flex, { align: "center", gap: 2, flex: "1", minW: 0, overflow: "hidden", children: [_jsx(Icon, { as: item.icon, fontSize: SIDEBAR_ROW.iconSize, flexShrink: 0, color: isActive ? activeAccent.icon : theme.colors.sidebar.mutedIcon, _groupHover: isActive ? undefined : { color: theme.colors.white }, transition: "color 0.12s" }), _jsx(Box, { flex: "1", minW: 0, children: _jsx(OverflowTooltipText, { placement: "right", maxWidth: "100%", fontSize: itemFontSize, fontWeight: isActive ? 600 : 500, color: isActive ? activeAccent.label : theme.colors.white, _groupHover: isActive ? undefined : { color: theme.colors.white }, as: "p", children: item.title }) })] }), item.locked ? (_jsx(Icon, { as: LockKeyhole, fontSize: "sm", flexShrink: 0, color: theme.colors.sidebar.mutedIcon })) : (badgeVal != null && (_jsx(Badge, { ...softBadge(theme.colors, colorScheme, sidebarRowPeak(theme.colors.sidebar.background[500])), fontSize: "xs", variant: variant, borderRadius: radius, children: badgeVal })))] }));
+    return item.locked && item.lockedReason ? (_jsx(ToolTip, { label: item.lockedReason, placement: "top", children: row })) : (row);
 };
 const SecondaryBar = ({ items = [], defaultCollapsed = true, collapsedWidth = "3.5rem", expandedWidth = "10rem", headerFontSize = SIDEBAR_ROW.fontSize, itemFontSize = SIDEBAR_ROW.fontSize, selected, onItemClick, title, icon, }) => {
     const theme = useCustomTheme();

package/dist/esm/Components/SideBar/components/MenuItemBox.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useId } from "react";
+import React, { useId } from "react";
 import { Box, Flex, Icon, Popover, PopoverTrigger, PopoverContent, PopoverBody, Badge, Collapse, Portal, } from "@chakra-ui/react";
 import MenuPopoverContent from "./MenuPopoverContent.js";
 import { menuDisabled } from "../menuDisabled.js";
@@ -11,6 +11,7 @@ import { sidebarRowPeak } from "../../../Theme/tokens/builders/sidebarAccent.js"
 import { scaleFor } from "../../../Theme/chakra/paletteFromTheme.js";
 import TruncatedTextWithTooltip from "./TextTruncation.js";
 import { sanitizeId } from "../sidebarId.js";
+import ToolTip from "../../ToolTip/ToolTip.js";
 import { SIDEBAR_ROW } from "../sidebarScale.js";
 /**
  * These rows are real `<a href>`s now, so the browser's own gestures have to keep working —
@@ -24,7 +25,7 @@ const MenuItemBox = ({ menu, activeMenu, toggle, handleClick, isOpen, onToggle,
     const activeAccent = getSidebarActiveAccent(theme.colors);
     // Never the raw label — keeps this id unique across multiple mounted SideBars too.
     const reactId = sanitizeId(useId());
-    const { title, icon, locked, badge, subMenu, url } = menu;
+    const { title, icon, locked, lockedReason, badge, subMenu, url } = menu;
     // `locked` blocks interaction the same as `disabled` — a locked item showing the padlock icon
     // but still fully clickable was a real gotcha (see COMPONENT-GOTCHAS.md).
     const isBlocked = menuDisabled(menu) || locked;
@@ -110,12 +111,13 @@ const MenuItemBox = ({ menu, activeMenu, toggle, handleClick, isOpen, onToggle,
                             handleToggleSubMenu(e);
                         }, "data-menu-id": String((_c = menu.id) !== null && _c !== void 0 ? _c : title), children: buttonContent }) }), _jsx(Portal, { children: _jsx(PopoverContent, { borderRadius: "lg", bg: theme.colors.sidebar.elevated, boxShadow: "lg", minW: "10rem", maxW: "14rem", py: "0.125rem", ml: "-0.5rem", border: 'none', cursor: isBlocked ? "not-allowed" : "pointer", zIndex: 1500, children: _jsx(PopoverBody, { p: "0.625rem", color: theme.colors.white, children: _jsx(MenuPopoverContent, { menu: menu, handleMenuClick: handleClick, activeMenu: activeMenu }) }) }) })] }));
     }
-    return (_jsxs(_Fragment, { children: [_jsx(Box, { ...commonStyles, as: rowAs, type: hasSubMenu ? "button" : undefined, href: hasSubMenu ? undefined : url !== null && url !== void 0 ? url : "#", "aria-expanded": hasSubMenu ? !!isOpen : undefined, "aria-controls": hasSubMenu ? submenuPanelId : undefined, "aria-current": isAnyActive ? "page" : undefined, "aria-disabled": isBlocked ? true : undefined, onClick: (e) => {
-                    if (!hasSubMenu && url && isBrowserNavigationGesture(e))
-                        return;
-                    e.preventDefault();
-                    handleToggleSubMenu(e);
-                }, "data-menu-id": String((_d = menu.id) !== null && _d !== void 0 ? _d : title), children: buttonContent }), hasSubMenu && (_jsx(Collapse, { in: isOpen, animateOpacity: true, children: _jsx(Box, { id: submenuPanelId, "data-collapse": "true", "data-menu-id": String((_e = menu.id) !== null && _e !== void 0 ? _e : title), "data-open": isOpen ? "true" : "false", mt: "0.125rem", sx: {
+    const row = (_jsx(Box, { ...commonStyles, as: rowAs, type: hasSubMenu ? "button" : undefined, href: hasSubMenu ? undefined : url !== null && url !== void 0 ? url : "#", "aria-expanded": hasSubMenu ? !!isOpen : undefined, "aria-controls": hasSubMenu ? submenuPanelId : undefined, "aria-current": isAnyActive ? "page" : undefined, "aria-disabled": isBlocked ? true : undefined, onClick: (e) => {
+            if (!hasSubMenu && url && isBrowserNavigationGesture(e))
+                return;
+            e.preventDefault();
+            handleToggleSubMenu(e);
+        }, "data-menu-id": String((_d = menu.id) !== null && _d !== void 0 ? _d : title), children: buttonContent }));
+    return (_jsxs(_Fragment, { children: [locked && lockedReason ? (_jsx(ToolTip, { label: lockedReason, placement: "top", children: row })) : (row), hasSubMenu && (_jsx(Collapse, { in: isOpen, animateOpacity: true, children: _jsx(Box, { id: submenuPanelId, "data-collapse": "true", "data-menu-id": String((_e = menu.id) !== null && _e !== void 0 ? _e : title), "data-open": isOpen ? "true" : "false", mt: "0.125rem", sx: {
                         transition: "opacity 0.28s ease, transform 0.28s ease",
                         opacity: isOpen ? 1 : 0,
                         transform: isOpen ? "translateY(0)" : "translateY(-6px)",
@@ -123,7 +125,8 @@ const MenuItemBox = ({ menu, activeMenu, toggle, handleClick, isOpen, onToggle,
                         var _a, _b, _c;
                         const isSubActive = activeMenu === sub.id;
                         const isSubBlocked = menuDisabled(sub) || sub.locked;
-                        return (_jsxs(Box, { as: "a", href: (_a = sub.url) !== null && _a !== void 0 ? _a : "#", "data-group": "", "aria-current": isSubActive ? "page" : undefined, "aria-disabled": isSubBlocked ? true : undefined, textDecoration: "none", h: SIDEBAR_ROW.subHeight, pl: "28px", pr: "10px", borderRadius: "lg", fontSize: SIDEBAR_ROW.fontSize, borderLeft: "2px solid", borderLeftColor: isSubActive ? theme.colors.sidebar.activeIcon : "transparent", backgroundColor: isSubActive ? "whiteAlpha.300" : "transparent", _hover: {
+                        const subKey = `${String((_b = (_a = sub.id) !== null && _a !== void 0 ? _a : sub.title) !== null && _b !== void 0 ? _b : sIdx)}-${sIdx}`;
+                        const subRow = (_jsxs(Box, { as: "a", href: (_c = sub.url) !== null && _c !== void 0 ? _c : "#", "data-group": "", "aria-current": isSubActive ? "page" : undefined, "aria-disabled": isSubBlocked ? true : undefined, textDecoration: "none", h: SIDEBAR_ROW.subHeight, pl: "28px", pr: "10px", borderRadius: "lg", fontSize: SIDEBAR_ROW.fontSize, borderLeft: "2px solid", borderLeftColor: isSubActive ? theme.colors.sidebar.activeIcon : "transparent", backgroundColor: isSubActive ? "whiteAlpha.300" : "transparent", _hover: {
                                 backgroundColor: isSubBlocked
                                     ? "transparent"
                                     : isSubActive
@@ -148,7 +151,8 @@ const MenuItemBox = ({ menu, activeMenu, toggle, handleClick, isOpen, onToggle,
                                     const variant = (_d = subCfg === null || subCfg === void 0 ? void 0 : subCfg.variant) !== null && _d !== void 0 ? _d : "subtle";
                                     const tone = resolveSoftTone(theme.colors, scaleFor(theme.colors, colorScheme), sidebarRowPeak(theme.colors.sidebar.background[500]));
                                     return (_jsx(Badge, { bg: tone.bg, color: tone.fg, fontSize: "xs", variant: variant, borderRadius: radius, children: value }));
-                                })()] }, `${String((_c = (_b = sub.id) !== null && _b !== void 0 ? _b : sub.title) !== null && _c !== void 0 ? _c : sIdx)}-${sIdx}`));
+                                })()] }));
+                        return sub.locked && sub.lockedReason ? (_jsx(ToolTip, { label: sub.lockedReason, placement: "top", children: subRow }, subKey)) : (_jsx(React.Fragment, { children: subRow }, subKey));
                     }) }) }))] }));
 };
 export default MenuItemBox;