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

package/dist/esm/Components/VariantSelector/VariantSelector.js

@@ -0,0 +1,118 @@
+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 { CircleAlert, Ruler } from "lucide-react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { focusVisibleStyles } from "../../Theme/chakra/focusRing.styles.js";
+import { scrollbarStyles } from "../../Theme/tokens/builders/scrollbar.js";
+import OptionChip from "../OptionChip/OptionChip.js";
+import { LOW_STOCK_THRESHOLD, findVariant, isOptionAvailable, remainingStock, } from "../Commerce/commerceVariants.js";
+import { isSoldOutEverywhere, sameSelection, selectValue } from "./variantSelection.js";
+const GAP = "0.5rem";
+const GRID_MIN = {
+    chip: "4rem",
+    swatch: "3rem",
+    "image-tile": "4.75rem",
+    pack: "6.5rem",
+};
+const cellKey = (axisId, valueId) => `${axisId}\u0000${valueId}`;
+/** Per-axis radiogroups whose availability is derived from `variants`; no vertical-specific vocabulary lives here. */
+const VariantSelector = ({ axes, variants, value, defaultValue, onValueChange, error, showSelectedLabel = false, showLowStock = false, size = "md", layout = "wrap", onGuideClick, "data-testid": testId, }) => {
+    const { colors } = useCustomTheme();
+    const uid = useId();
+    const statusId = `${uid}-status`;
+    const cells = useRef(new Map());
+    const [inner, setInner] = useState(defaultValue !== null && defaultValue !== void 0 ? defaultValue : {});
+    const [focus, setFocus] = useState(null);
+    const selection = value !== null && value !== void 0 ? value : inner;
+    const commit = useCallback((next) => {
+        if (sameSelection(next, selection))
+            return;
+        if (value === undefined)
+            setInner(next);
+        onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(next, findVariant(axes, variants, next));
+    }, [axes, variants, selection, value, onValueChange]);
+    const choose = (axisId, valueId) => {
+        if (isSoldOutEverywhere(variants, axisId, valueId))
+            return;
+        commit(selectValue(axes, variants, selection, axisId, valueId));
+    };
+    const lowStockHint = (axis, option) => {
+        if (!showLowStock)
+            return undefined;
+        const left = remainingStock(variants, selection, axis.id, option.id);
+        if (left === undefined || left <= 0 || left > LOW_STOCK_THRESHOLD)
+            return undefined;
+        return `${left} left`;
+    };
+    const hintFor = (axis, option) => {
+        const low = lowStockHint(axis, option);
+        if (!low)
+            return option.hint;
+        return axis.type === "pack" && option.hint ? `${option.hint} · ${low}` : low;
+    };
+    const onKeyDown = (axis) => (event) => {
+        var _a;
+        const index = axis.values.findIndex((option) => cells.current.get(cellKey(axis.id, option.id)) === document.activeElement);
+        if (index < 0)
+            return;
+        const last = axis.values.length - 1;
+        const target = event.key === "ArrowRight" || event.key === "ArrowDown"
+            ? (index + 1) % axis.values.length
+            : event.key === "ArrowLeft" || event.key === "ArrowUp"
+                ? (index - 1 + axis.values.length) % axis.values.length
+                : event.key === "Home"
+                    ? 0
+                    : event.key === "End"
+                        ? last
+                        : -1;
+        if (target < 0)
+            return;
+        event.preventDefault();
+        const next = axis.values[target];
+        (_a = cells.current.get(cellKey(axis.id, next.id))) === null || _a === void 0 ? void 0 : _a.focus();
+        setFocus({ axisId: axis.id, valueId: next.id });
+        if (isOptionAvailable(variants, selection, axis.id, next.id))
+            choose(axis.id, next.id);
+    };
+    const containerStyles = (axis) => {
+        if (layout === "grid") {
+            return { display: "grid", gridTemplateColumns: `repeat(auto-fill, minmax(${GRID_MIN[axis.type]}, 1fr))`, gap: GAP };
+        }
+        if (layout === "scroll") {
+            return {
+                display: "flex",
+                flexWrap: "nowrap",
+                gap: GAP,
+                overflowX: "auto",
+                pt: "0.5rem",
+                mt: "-0.5rem",
+                pr: "0.5rem",
+                scrollSnapType: "x proximity",
+                sx: scrollbarStyles(colors, "hover"),
+            };
+        }
+        return { display: "flex", flexWrap: "wrap", gap: GAP, pt: "0.25rem" };
+    };
+    return (_jsxs(Flex, { direction: "column", gap: 5, "data-testid": testId, children: [axes.map((axis) => {
+                var _a, _b;
+                const labelId = `${uid}-${axis.id}-label`;
+                const picked = axis.values.find((option) => option.id === selection[axis.id]);
+                const unpicked = selection[axis.id] === undefined;
+                const invalid = !!error && unpicked;
+                const available = axis.values.map((option) => isOptionAvailable(variants, selection, axis.id, option.id));
+                const firstAvailable = (_a = axis.values.find((_, i) => available[i])) !== null && _a !== void 0 ? _a : axis.values[0];
+                const stopId = (focus === null || focus === void 0 ? void 0 : focus.axisId) === axis.id ? focus.valueId : (_b = (picked !== null && picked !== void 0 ? picked : firstAvailable)) === null || _b === void 0 ? void 0 : _b.id;
+                const { guide } = axis;
+                return (_jsxs(Box, { children: [_jsxs(Flex, { align: "baseline", justify: "space-between", gap: 3, mb: 3, children: [_jsxs(Flex, { align: "baseline", gap: 2, minW: 0, children: [_jsx(Text, { as: "span", id: labelId, fontSize: "sm", fontWeight: 600, color: colors.header[900], children: axis.label }), showSelectedLabel && picked ? (_jsx(Text, { as: "span", fontSize: "sm", color: colors.textMuted, noOfLines: 1, children: picked.label })) : null] }), guide ? (_jsxs(Box, { as: "button", type: "button", display: "inline-flex", alignItems: "center", gap: 1, flexShrink: 0, fontSize: "sm", fontWeight: 600, color: colors.accentText, borderRadius: "md", onClick: () => {
+                                        guide.onClick();
+                                        onGuideClick === null || onGuideClick === void 0 ? void 0 : onGuideClick(axis.id);
+                                    }, sx: focusVisibleStyles(colors), children: [_jsx(Ruler, { size: 14, "aria-hidden": true }), guide.label] })) : null] }), _jsx(Box, { role: "radiogroup", "aria-labelledby": labelId, "aria-invalid": invalid || undefined, "aria-describedby": invalid ? statusId : undefined, onKeyDown: onKeyDown(axis), onBlur: (event) => {
+                                if (!event.currentTarget.contains(event.relatedTarget))
+                                    setFocus(null);
+                            }, ...containerStyles(axis), children: axis.values.map((option, i) => (_jsx(OptionChip, { ref: (node) => {
+                                    cells.current.set(cellKey(axis.id, option.id), node);
+                                }, label: option.label, variant: axis.type, swatch: option.swatch, image: option.image, hint: hintFor(axis, option), showLabel: axis.type === "swatch" && layout === "grid", size: size, fullWidth: layout === "grid" && (axis.type === "chip" || axis.type === "pack"), selected: option.id === selection[axis.id], unavailable: !available[i], invalid: invalid, tabIndex: option.id === stopId ? 0 : -1, onFocus: () => setFocus({ axisId: axis.id, valueId: option.id }), onSelect: () => choose(axis.id, option.id) }, option.id))) })] }, axis.id));
+            }), _jsx(Box, { role: "status", id: statusId, "aria-live": "polite", mt: error ? -2 : 0, children: error ? (_jsxs(Flex, { align: "center", gap: 1.5, color: colors.semanticText.error, fontSize: "sm", fontWeight: 600, children: [_jsx(CircleAlert, { size: 14, "aria-hidden": true }), _jsx(Text, { as: "span", children: error })] })) : null })] }));
+};
+export default VariantSelector;

package/dist/esm/Components/VariantSelector/VariantSelectorProps.js

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

package/dist/esm/Components/VariantSelector/variantSelection.js

@@ -0,0 +1,19 @@
+import { isOptionAvailable } from "../Commerce/commerceVariants.js";
+/** Picks `valueId` on `axisId`, then drops every other pick that no sellable variant can pair with it. */
+export const selectValue = (axes, variants, selection, axisId, valueId) => {
+    const next = { ...selection, [axisId]: valueId };
+    for (const axis of axes) {
+        const pick = next[axis.id];
+        if (axis.id === axisId || pick === undefined)
+            continue;
+        if (!isOptionAvailable(variants, next, axis.id, pick))
+            delete next[axis.id];
+    }
+    return next;
+};
+/** Sold out under every combination, so picking it can never lead to a purchasable variant. */
+export const isSoldOutEverywhere = (variants, axisId, valueId) => !isOptionAvailable(variants, {}, axisId, valueId);
+export const sameSelection = (a, b) => {
+    const keys = new Set([...Object.keys(a), ...Object.keys(b)]);
+    return [...keys].every((key) => a[key] === b[key]);
+};

package/dist/esm/Components/WishlistToggle/WishlistToggle.js

@@ -0,0 +1,63 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import { Box } from "@chakra-ui/react";
+import { keyframes } from "@emotion/react";
+import { Heart } from "lucide-react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { MOTION_EASE, transitionFor } from "../../Theme/tokens/primitives/motion.js";
+import { BUTTON_SIZES } from "../../Theme/tokens/primitives/controlSizes.js";
+import { reducedMotionSx, usePrefersReducedMotion } from "../../Theme/chakra/motion.js";
+import { focusVisibleRing } from "../../Theme/chakra/focusRing.styles.js";
+import { resolveFilledSurface } from "../../Theme/tokens/builders/filledSurface.js";
+import { overlayScrim } from "../../Theme/tokens/builders/scrim.js";
+const HIT_PX = { sm: 32, md: 44, lg: 48 };
+const POP_MS = 320;
+const pop = keyframes `
+  0% { transform: scale(1); }
+  40% { transform: scale(1.2); }
+  100% { transform: scale(1); }
+`;
+/** Heart toggle for saving a product: glass on media, tonal or bare elsewhere; pops once when saved. */
+const WishlistToggle = ({ selected, defaultSelected = false, onSelectedChange, size = "md", variant = "soft", label, isDisabled = false, "data-testid": testId, }) => {
+    const { colors } = useCustomTheme();
+    const reduced = usePrefersReducedMotion();
+    const [inner, setInner] = useState(defaultSelected);
+    const [popKey, setPopKey] = useState(0);
+    const on = selected !== null && selected !== void 0 ? selected : inner;
+    const spec = BUTTON_SIZES[size];
+    const hit = HIT_PX[size];
+    const icon = spec.iconSize + 2;
+    const popping = on && popKey > 0 && !reduced;
+    const toggle = () => {
+        const next = !on;
+        if (selected === undefined)
+            setInner(next);
+        if (next)
+            setPopKey((k) => k + 1);
+        onSelectedChange === null || onSelectedChange === void 0 ? void 0 : onSelectedChange(next);
+    };
+    const saved = resolveFilledSurface(colors.semantic.error, colors);
+    const look = (() => {
+        if (variant === "glass") {
+            return on
+                ? { bg: saved.fill, hoverBg: saved.hoverFill, color: saved.color }
+                : { bg: overlayScrim(colors), hoverBg: overlayScrim(colors), color: colors.white };
+        }
+        const ink = on ? colors.semanticText.error : variant === "soft" ? colors.header[900] : colors.textMuted;
+        return {
+            bg: variant === "soft" ? colors.background[100] : colors.transparent,
+            hoverBg: variant === "soft" ? colors.background[200] : colors.background[100],
+            color: ink,
+        };
+    })();
+    return (_jsx(Box, { as: "button", type: "button", "aria-pressed": on, "aria-label": label !== null && label !== void 0 ? label : (on ? "Remove from wishlist" : "Add to wishlist"), disabled: isDisabled, onClick: toggle, "data-testid": testId, "data-selected": on || undefined, display: "inline-flex", alignItems: "center", justifyContent: "center", boxSize: `${hit}px`, flexShrink: 0, borderRadius: "full", cursor: isDisabled ? "not-allowed" : "pointer", opacity: isDisabled ? 0.5 : 1, sx: {
+            outline: "none",
+            "&:focus-visible > [data-disc]": focusVisibleRing(colors),
+            "&:hover:not(:disabled) > [data-disc]": { backgroundColor: look.hoverBg },
+            ...(reduced ? {} : { "&:active:not(:disabled) > [data-disc]": { transform: "scale(0.92)" } }),
+        }, children: _jsx(Box, { as: "span", "data-disc": true, display: "inline-flex", alignItems: "center", justifyContent: "center", boxSize: spec.height, borderRadius: "full", bg: look.bg, color: look.color, transition: transitionFor(["background-color", "color", "transform"]), sx: {
+                ...(variant === "glass" ? { backdropFilter: "blur(8px)", WebkitBackdropFilter: "blur(8px)" } : {}),
+                ...reducedMotionSx(),
+            }, children: _jsx(Box, { as: "span", display: "inline-flex", "data-pop": popping || undefined, animation: popping ? `${pop} ${POP_MS}ms ${MOTION_EASE}` : undefined, children: _jsx(Heart, { size: icon, "aria-hidden": true, fill: on ? "currentColor" : "none", strokeWidth: 2 }) }, popKey) }) }));
+};
+export default WishlistToggle;

package/dist/esm/Components/WishlistToggle/WishlistToggleProps.js

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

package/dist/esm/Theme/assertPalette.js

@@ -3,7 +3,7 @@ const REQUIRED_GROUPS = [
     "semantic", "gray", "red", "orange", "yellow", "green", "teal", "blue", "cyan",
     "purple", "pink", "backgroundColor", "background", "text", "header", "placeholder",
     "boxShadow", "focusRing", "sidebar", "boxborder", "border", "table", "disabled",
-    "accentText", "textMuted", "semanticText", "onPrimary", "onSemantic", "surfaceRaised",
+    "accentText", "textMuted", "semanticText", "onPrimary", "onSemantic", "surfaceRaised", "star",
 ];
 export const allPaletteTokensListed = true;
 const NESTED = [

package/dist/esm/Theme/tokens/brands/index.js

@@ -25,6 +25,7 @@ import { withPlaceholderRung, withTableHoverRung } from "../builders/resolvedRun
 import { buildFocusRing, withFocusRing } from "../builders/focusRing.js";
 import { withSurfaceRungs } from "../builders/surfaceRungs.js";
 import { buildSurfaceRaised, withSurfaceRaised } from "../builders/surfaceRaised.js";
+import { buildStar } from "../builders/star.js";
 /** Derived, never hand-written: a copied hex goes stale the moment a canvas moves. */
 export const finalizeLightPalette = (source) => ({
     ...source,
@@ -36,6 +37,7 @@ export const finalizeLightPalette = (source) => ({
     onSemantic: buildOnSemantic(source.semantic, source.white, source.black),
     focusRing: buildFocusRing(source),
     surfaceRaised: buildSurfaceRaised(source),
+    star: buildStar(source.backgroundColor.main),
 });
 export { lavender, meadow, radiant, skyline, slate, emerald, rosewood, storefront, zinc };
 export { lavenderDark, meadowDark, radiantDark, skylineDark, slateDark, emeraldDark, rosewoodDark, storefrontDark, zincDark, };

package/dist/esm/Theme/tokens/builders/buildDarkPalette.js

@@ -6,6 +6,7 @@ import { buildMutedText } from "./mutedText.js";
 import { buildSemanticText, buildOnSemantic } from "./semanticText.js";
 import { buildFocusRing } from "./focusRing.js";
 import { buildSurfaceRaised } from "./surfaceRaised.js";
+import { buildStar } from "./star.js";
 // Structural ramps are rebuilt at explicit targets (not reversed — light ramps bottom near 35%);
 // utility hues are reversed so index roles survive; brand/semantic ramps shift one step lighter.
 const SCALE_KEYS = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900];
@@ -203,6 +204,7 @@ export function buildDarkPalette(light) {
         onSemantic: buildOnSemantic(semantic, light.white, light.black),
         focusRing: buildFocusRing({ primary, background, backgroundColor: namedSurfaces }),
         surfaceRaised: buildSurfaceRaised({ backgroundColor: namedSurfaces, background, white }),
+        star: buildStar(namedSurfaces.main),
         sidebar: withSidebarTokens(light),
         boxShadow: {
             primary: buildPrimaryShadowTint(primary[500]),

package/dist/esm/Theme/tokens/builders/index.js

@@ -11,3 +11,4 @@ export * from "./tone.js";
 export * from "./scrim.js";
 export * from "./tooltipSurface.js";
 export * from "./surfaceRaised.js";
+export * from "./star.js";

package/dist/esm/Theme/tokens/builders/rechartsTheme.js

@@ -0,0 +1,37 @@
+import radii from "../primitives/radii.js";
+import { chartInk, getCategoricalSeriesColors } from "./chartColorsFromTheme.js";
+const FONT = "inherit";
+const FONT_SIZE = "12px";
+const DASH = "4 4";
+// Reuses chartInk/getCategoricalSeriesColors — no parallel color derivation. No recharts import.
+export function buildRechartsTheme(colors) {
+    const ink = chartInk(colors);
+    return {
+        seriesColors: getCategoricalSeriesColors(colors),
+        grid: { stroke: ink.grid, strokeDasharray: DASH },
+        axis: {
+            stroke: ink.grid,
+            tick: { fill: ink.axis, fontSize: FONT_SIZE, fontFamily: FONT },
+        },
+        tooltip: {
+            contentStyle: {
+                backgroundColor: ink.tooltipBg,
+                border: `1px solid ${ink.grid}`,
+                borderRadius: radii.md,
+                color: ink.text,
+                fontSize: FONT_SIZE,
+                fontFamily: FONT,
+            },
+            labelStyle: { color: ink.text, fontWeight: 600 },
+            itemStyle: { color: ink.text },
+            cursor: { stroke: ink.grid, strokeDasharray: DASH },
+        },
+        legend: {
+            wrapperStyle: { color: ink.muted, fontSize: FONT_SIZE, fontFamily: FONT },
+        },
+        referenceLine: { stroke: ink.muted, strokeDasharray: DASH },
+        surface: ink.surface,
+        text: ink.text,
+        muted: ink.muted,
+    };
+}

package/dist/esm/Theme/tokens/builders/star.js

@@ -0,0 +1,4 @@
+import { relativeLuminance } from "./color.js";
+export const STAR_ON_LIGHT = "#f5a70a";
+export const STAR_ON_DARK = "#f6b93b";
+export const buildStar = (canvas) => relativeLuminance(canvas) > 0.18 ? STAR_ON_LIGHT : STAR_ON_DARK;

package/dist/esm/Theme/tokens/primitives/controlSizes.js

@@ -1,6 +1,6 @@
 /** Height scale for form fields and selects — text inputs, pickers, anything typed or picked into. */
 export const CONTROL_SIZES = {
-    xs: { height: "1.5rem", fontSize: "0.75rem", paddingX: "0.5rem", iconSize: 12 },
+    xs: { height: "2rem", fontSize: "0.75rem", paddingX: "0.5rem", iconSize: 12 },
     sm: { height: "2.375rem", fontSize: "0.8125rem", paddingX: "0.75rem", iconSize: 14 },
     md: { height: "2.5rem", fontSize: "0.875rem", paddingX: "1rem", iconSize: 16 },
     lg: { height: "3rem", fontSize: "1rem", paddingX: "1.5rem", iconSize: 18 },

package/dist/esm/Theme/useChartTheme.js

@@ -0,0 +1,8 @@
+import { useMemo } from "react";
+import { useCustomTheme } from "./useCustomTheme.js";
+import { buildRechartsTheme } from "./tokens/builders/rechartsTheme.js";
+export const useChartTheme = () => {
+    const { colors } = useCustomTheme();
+    return useMemo(() => buildRechartsTheme(colors), [colors]);
+};
+export default useChartTheme;

package/dist/esm/Utils/price.js

@@ -0,0 +1,27 @@
+export const DEFAULT_CURRENCY = "INR";
+export const DEFAULT_LOCALE = "en-IN";
+export function formatPrice(value, options = {}) {
+    const { currency = DEFAULT_CURRENCY, locale = DEFAULT_LOCALE, maximumFractionDigits } = options;
+    const whole = Number.isInteger(value);
+    return new Intl.NumberFormat(locale, {
+        style: "currency",
+        currency,
+        minimumFractionDigits: whole ? 0 : 2,
+        maximumFractionDigits: maximumFractionDigits !== null && maximumFractionDigits !== void 0 ? maximumFractionDigits : (whole ? 0 : 2),
+    }).format(value);
+}
+export function discountPercent(price, mrp) {
+    if (mrp === undefined || mrp <= price || mrp <= 0)
+        return 0;
+    return Math.round(((mrp - price) / mrp) * 100);
+}
+export function discountAmount(price, mrp) {
+    if (mrp === undefined || mrp <= price)
+        return 0;
+    return mrp - price;
+}
+export function unitPrice(price, quantity, unit, per = 1) {
+    if (!(quantity > 0))
+        return null;
+    return { value: Math.round((price / quantity) * per * 100) / 100, per, unit };
+}

package/dist/esm/index.js

@@ -143,6 +143,7 @@ export { rafThrottle } from "./Utils/rafThrottle.js";
 export { toWords } from "./Utils/functions.js";
 export { useDebouncedCallback, useDebouncedValue } from "./Hooks/useDebounce.js";
 export { CATEGORICAL_SERIES, chartAxisLabelColor, chartInk, chartMode, getCategoricalSeriesColors, getDefaultSeriesColors, labelOnSeries, } from "./Theme/tokens/builders/chartColorsFromTheme.js";
+export { useChartTheme } from "./Theme/useChartTheme.js";
 // WCAG contrast + accent-picking helpers this library uses internally to keep text readable
 // against any canvas/fill a palette produces. Pure and dependency-free — consumers building
 // custom components against `ColorScale`/`PaletteProps` tokens can reuse the same logic instead
@@ -225,4 +226,39 @@ export { defaultMediaAudioPlayerLabels } from "./Components/MediaViewer/componen
 export { default as MediaScrubber } from "./Components/MediaViewer/components/MediaScrubber.js";
 export { default as MediaStatusPanel } from "./Components/MediaViewer/components/MediaStatusPanel.js";
 export { buildMediaItems, buildFileItems, planPreview, countMedia, fileKind, resolveMediaUrl, MIN_ZOOM, MAX_ZOOM, ZOOM_STEP, PLAYBACK_SPEEDS, SEEK_STEP_SECONDS, } from "./Components/MediaViewer/mediaItems.js";
+// Commerce
+export { default as Rating } from "./Components/Rating/Rating.js";
+export { default as PriceBlock } from "./Components/PriceBlock/PriceBlock.js";
+export { default as StockStatus } from "./Components/StockStatus/StockStatus.js";
+export { default as ProductBadges } from "./Components/ProductBadges/ProductBadges.js";
+export { default as WishlistToggle } from "./Components/WishlistToggle/WishlistToggle.js";
+export { default as OptionChip } from "./Components/OptionChip/OptionChip.js";
+export { default as VariantSelector } from "./Components/VariantSelector/VariantSelector.js";
+export { default as QuantityStepper } from "./Components/QuantityStepper/QuantityStepper.js";
+export { default as CartItem } from "./Components/CartItem/CartItem.js";
+export { default as OrderSummary } from "./Components/OrderSummary/OrderSummary.js";
+export { default as CouponField } from "./Components/CouponField/CouponField.js";
+export { default as OrderStatusTimeline } from "./Components/OrderStatusTimeline/OrderStatusTimeline.js";
+export { default as BagBar } from "./Components/BagBar/BagBar.js";
+export { default as StickyBuyBar } from "./Components/StickyBuyBar/StickyBuyBar.js";
+export { default as PincodeChecker } from "./Components/PincodeChecker/PincodeChecker.js";
+export { default as TrustBadges } from "./Components/TrustBadges/TrustBadges.js";
+export { default as OffersList } from "./Components/OffersList/OffersList.js";
+export { default as SpecTable } from "./Components/SpecTable/SpecTable.js";
+export { default as ReviewSummary } from "./Components/ReviewSummary/ReviewSummary.js";
+export { default as ReviewList } from "./Components/ReviewList/ReviewList.js";
+export { default as DetailSections } from "./Components/DetailSections/DetailSections.js";
+export { default as AddressCard } from "./Components/AddressCard/AddressCard.js";
+export { default as AddressCardGroup } from "./Components/AddressCard/AddressCardGroup.js";
+export { default as PaymentOption } from "./Components/PaymentOption/PaymentOption.js";
+export { default as PaymentOptionGroup } from "./Components/PaymentOption/PaymentOptionGroup.js";
+export { default as MediaGallery } from "./Components/MediaGallery/MediaGallery.js";
+export { default as MediaLightbox } from "./Components/MediaGallery/MediaLightbox.js";
+export { defaultMediaGalleryLabels } from "./Components/MediaGallery/MediaGalleryProps.js";
+export { defaultMediaLightboxLabels } from "./Components/MediaGallery/MediaLightboxProps.js";
+export { LOW_STOCK_THRESHOLD, stockState, selectionComplete, findVariant, isOptionAvailable, remainingStock, priceRange, firstAvailableSelection } from "./Components/Commerce/commerceVariants.js";
+export { formatPrice, discountPercent, discountAmount, unitPrice } from "./Utils/price.js";
+export { default as ProductCardGrid } from "./Components/ProductCard/ProductCardGrid.js";
+export { default as ProductCardSkeleton } from "./Components/ProductCard/ProductCardSkeleton.js";
+export { default as QuickAddSheet } from "./Components/ProductCard/QuickAddSheet.js";
 export * from "./Components/Primitives/Primitives.js";

package/dist/index.d.ts

@@ -127,6 +127,8 @@ export { toWords } from "./Utils/functions";
 export { useDebouncedCallback, useDebouncedValue } from "./Hooks/useDebounce";
 export { CATEGORICAL_SERIES, chartAxisLabelColor, chartInk, chartMode, getCategoricalSeriesColors, getDefaultSeriesColors, labelOnSeries, } from "./Theme/tokens/builders/chartColorsFromTheme";
 export type { ChartMode } from "./Theme/tokens/builders/chartColorsFromTheme";
+export { useChartTheme } from "./Theme/useChartTheme";
+export type { RechartsAxisTheme, RechartsChartTheme, RechartsGridTheme, RechartsLegendTheme, RechartsTooltipTheme, } from "./Theme/useChartTheme";
 export type { ColorMode, ResolvedColorMode, ThemeName, PaletteProps, ColorScale, BrandScale, SemanticColors, NamedSurfaces, FocusRingTokens, } from "./Theme/tokens/types";
 export { statusGradient, inkSafeGradient, chipFill, chipBorder, ACCENT_GRADIENT, STATUS_INK, } from "./Components/PlanPill/planPillGradient";
 export { isDarkCanvas, onFilled, onGradient, accentTextOnCanvas, pickAccentText, AA_NORMAL_TEXT, DARK_CANVAS_LUMINANCE, } from "./Theme/tokens/builders/accentText";
@@ -287,4 +289,68 @@ export { default as MediaStatusPanel } from "./Components/MediaViewer/components
 export type { MediaStatusPanelProps, MediaStatusTone } from "./Components/MediaViewer/components/MediaStatusPanelProps";
 export { buildMediaItems, buildFileItems, planPreview, countMedia, fileKind, resolveMediaUrl, MIN_ZOOM, MAX_ZOOM, ZOOM_STEP, PLAYBACK_SPEEDS, SEEK_STEP_SECONDS, } from "./Components/MediaViewer/mediaItems";
 export type { MediaItem, MediaKind, FileKind, MediaSource, MediaSources, MediaFile, ViewerFile, ResolveUrl, } from "./Components/MediaViewer/mediaItems";
+export { default as Rating } from "./Components/Rating/Rating";
+export type { RatingProps, RatingSize } from "./Components/Rating/RatingProps";
+export { default as PriceBlock } from "./Components/PriceBlock/PriceBlock";
+export type { PriceBlockProps, PriceBlockSize, PriceBlockAlign, PriceBlockLabels } from "./Components/PriceBlock/PriceBlockProps";
+export { default as StockStatus } from "./Components/StockStatus/StockStatus";
+export type { StockStatusProps, StockStatusSize } from "./Components/StockStatus/StockStatusProps";
+export { default as ProductBadges } from "./Components/ProductBadges/ProductBadges";
+export type { ProductBadgesProps, ProductBadgeSize, ProductBadgeVariant, ProductBadgesOrientation } from "./Components/ProductBadges/ProductBadgesProps";
+export { default as WishlistToggle } from "./Components/WishlistToggle/WishlistToggle";
+export type { WishlistToggleProps, WishlistToggleSize, WishlistToggleVariant } from "./Components/WishlistToggle/WishlistToggleProps";
+export { default as OptionChip } from "./Components/OptionChip/OptionChip";
+export type { OptionChipProps, OptionChipVariant, OptionChipSize } from "./Components/OptionChip/OptionChipProps";
+export { default as VariantSelector } from "./Components/VariantSelector/VariantSelector";
+export type { VariantSelectorProps, VariantSelectorLayout } from "./Components/VariantSelector/VariantSelectorProps";
+export { default as QuantityStepper } from "./Components/QuantityStepper/QuantityStepper";
+export type { QuantityStepperProps, QuantityStepperSize, QuantityStepperVariant } from "./Components/QuantityStepper/QuantityStepperProps";
+export { default as CartItem } from "./Components/CartItem/CartItem";
+export type { CartItemProps, CartItemLayout, CartItemLabels } from "./Components/CartItem/CartItemProps";
+export { default as OrderSummary } from "./Components/OrderSummary/OrderSummary";
+export type { OrderSummaryProps, OrderSummaryTone, OrderSummaryLine, FreeShippingProgress, OrderSummaryLabels } from "./Components/OrderSummary/OrderSummaryProps";
+export { default as CouponField } from "./Components/CouponField/CouponField";
+export type { CouponFieldProps, CouponStatus, CouponSuggestion, CouponFieldLabels } from "./Components/CouponField/CouponFieldProps";
+export { default as OrderStatusTimeline } from "./Components/OrderStatusTimeline/OrderStatusTimeline";
+export type { OrderStatusTimelineProps, OrderStepState, OrderStatusStep, OrderStatusOrientation, OrderStatusTimelineLabels } from "./Components/OrderStatusTimeline/OrderStatusTimelineProps";
+export { default as BagBar } from "./Components/BagBar/BagBar";
+export type { BagBarProps, BagBarPosition, BagBarLabels } from "./Components/BagBar/BagBarProps";
+export { default as StickyBuyBar } from "./Components/StickyBuyBar/StickyBuyBar";
+export type { StickyBuyBarProps, StickyBuyBarMode, StickyBuyBarPosition, StickyBuyBarLabels } from "./Components/StickyBuyBar/StickyBuyBarProps";
+export { default as PincodeChecker } from "./Components/PincodeChecker/PincodeChecker";
+export type { PincodeCheckerProps, PincodeStatus, PincodeResult, PincodeCheckerLabels } from "./Components/PincodeChecker/PincodeCheckerProps";
+export { default as TrustBadges } from "./Components/TrustBadges/TrustBadges";
+export type { TrustBadgesProps, TrustItem, TrustBadgesLayout } from "./Components/TrustBadges/TrustBadgesProps";
+export { default as OffersList } from "./Components/OffersList/OffersList";
+export type { OffersListProps, Offer, OffersListLabels } from "./Components/OffersList/OffersListProps";
+export { default as SpecTable } from "./Components/SpecTable/SpecTable";
+export type { SpecTableProps, SpecItem, SpecTableLabels } from "./Components/SpecTable/SpecTableProps";
+export { default as ReviewSummary } from "./Components/ReviewSummary/ReviewSummary";
+export type { ReviewSummaryProps, RatingBreakdown, ReviewSummaryLabels } from "./Components/ReviewSummary/ReviewSummaryProps";
+export { default as ReviewList } from "./Components/ReviewList/ReviewList";
+export type { ReviewListProps, ReviewMedia, ReviewItem, ReviewListLabels } from "./Components/ReviewList/ReviewListProps";
+export { default as DetailSections } from "./Components/DetailSections/DetailSections";
+export type { DetailSectionsProps, DetailSection, LegalInfo, DetailSectionsLabels, DetailSectionsLayout } from "./Components/DetailSections/DetailSectionsProps";
+export { default as AddressCard } from "./Components/AddressCard/AddressCard";
+export { default as AddressCardGroup } from "./Components/AddressCard/AddressCardGroup";
+export type { AddressCardProps, AddressCardGroupProps, AddressCardLabels } from "./Components/AddressCard/AddressCardProps";
+export { default as PaymentOption } from "./Components/PaymentOption/PaymentOption";
+export { default as PaymentOptionGroup } from "./Components/PaymentOption/PaymentOptionGroup";
+export type { PaymentOptionProps, PaymentOptionGroupProps } from "./Components/PaymentOption/PaymentOptionProps";
+export { default as MediaGallery } from "./Components/MediaGallery/MediaGallery";
+export { default as MediaLightbox } from "./Components/MediaGallery/MediaLightbox";
+export { defaultMediaGalleryLabels } from "./Components/MediaGallery/MediaGalleryProps";
+export { defaultMediaLightboxLabels } from "./Components/MediaGallery/MediaLightboxProps";
+export type { MediaGalleryProps, MediaGalleryLabels, MediaGalleryLayout, MediaGalleryZoom, MediaAspectRatio } from "./Components/MediaGallery/MediaGalleryProps";
+export type { MediaLightboxProps, MediaLightboxLabels } from "./Components/MediaGallery/MediaLightboxProps";
+export type { ProductDetailsProps, ProductDetailsProduct, ProductDetailsLabels, ProductDetailsLayout } from "./Components/ProductDetails/ProductDetailsProps";
+export { LOW_STOCK_THRESHOLD, stockState, selectionComplete, findVariant, isOptionAvailable, remainingStock, priceRange, firstAvailableSelection } from "./Components/Commerce/commerceVariants";
+export type { ProductMedia, ProductBadgeTone, ProductBadge, OptionAxisType, OptionValue, OptionAxis, VariantSelection, ProductVariant, StockState, PriceFormat } from "./Components/Commerce/commerceTypes";
+export { formatPrice, discountPercent, discountAmount, unitPrice } from "./Utils/price";
+export type { PriceFormatOptions, UnitPrice } from "./Utils/price";
+export { default as ProductCardGrid } from "./Components/ProductCard/ProductCardGrid";
+export { default as ProductCardSkeleton } from "./Components/ProductCard/ProductCardSkeleton";
+export { default as QuickAddSheet } from "./Components/ProductCard/QuickAddSheet";
+export type { ProductCardProps, ProductCardLayout, ProductCardDensity, ProductCardAspectRatio, ProductCardAction, ProductCardLabels, ProductCardPressHandler, ProductCardSkeletonProps, ProductCardGridProps, ProductCardGridColumns } from "./Components/ProductCard/ProductCardProps";
+export type { QuickAddSheetProps, QuickAddSheetLabels, QuickAddPresentation } from "./Components/ProductCard/QuickAddSheetProps";
 export * from "./Components/Primitives/Primitives";