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

package/dist/esm/Components/CalendarGrid/CalendarGrid.js

@@ -0,0 +1,171 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { Box, Flex, Grid, Text } from "@chakra-ui/react";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import Button from "../Button/Button.js";
+import Skeletons from "../Skeletons/Skeletons.js";
+import VisuallyHidden from "../VisuallyHidden/VisuallyHidden.js";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { focusVisibleStyles, insetFocusRingShadow } from "../../Theme/chakra/focusRing.styles.js";
+import { resolveSoftTone, toneScale } from "../../Theme/tokens/builders/tone.js";
+import { dayKey, eventsOnDay, formatFullDate, formatTitle, isNavKey, isSameDay, isWeekend, layoutWeek, moveFocus, shiftAnchor, startOfDay, visibleWeeks, weekdayLabels, } from "./calendarMath.js";
+import { isActivationKey } from "../Common/activationKey.js";
+const plural = (n, one, many) => `${n} ${n === 1 ? one : many}`;
+const DEFAULT_LABELS = {
+    today: "Today",
+    previous: "Previous",
+    next: "Next",
+    month: "Month",
+    week: "Week",
+    day: "Day",
+    more: (count) => `+${count} more`,
+    moreLabel: (count, date) => `${plural(count, "more event", "more events")} on ${date}`,
+    eventCount: (count) => plural(count, "event", "events"),
+};
+const VIEWS = ["month", "week", "day"];
+const MAX_LANES = { month: 3, week: 6, day: Infinity };
+const MIN_CELL_HEIGHT = { month: "6.5rem", week: "12rem", day: "16rem" };
+const LANE_HEIGHT = "1.5rem";
+const CHIP_HEIGHT = "1.375rem";
+const CHIP_INSET = "2px";
+const EventChip = ({ event, colors, surface, onEventClick, segment }) => {
+    var _a;
+    const tone = resolveSoftTone(colors, toneScale(colors, (_a = event.tone) !== null && _a !== void 0 ? _a : "neutral"), surface);
+    const left = (segment === null || segment === void 0 ? void 0 : segment.continuesBefore) ? "0px" : CHIP_INSET;
+    const right = (segment === null || segment === void 0 ? void 0 : segment.continuesAfter) ? "0px" : CHIP_INSET;
+    const span = segment ? segment.endCol - segment.startCol + 1 : 1;
+    const placement = segment
+        ? {
+            position: "absolute",
+            zIndex: 1,
+            top: `calc(${segment.lane} * ${LANE_HEIGHT})`,
+            left,
+            width: `calc(${span * 100}% + ${span - 1}px - ${left} - ${right})`,
+        }
+        : { width: "100%" };
+    const common = {
+        ...placement,
+        display: "flex",
+        alignItems: "center",
+        h: CHIP_HEIGHT,
+        px: 2,
+        fontSize: "xs",
+        fontWeight: 500,
+        lineHeight: 1,
+        textAlign: "left",
+        whiteSpace: "nowrap",
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        textDecoration: "none",
+        cursor: "pointer",
+        bg: tone.bg,
+        color: tone.fg,
+        border: "1px solid",
+        borderColor: tone.border,
+        borderLeftRadius: (segment === null || segment === void 0 ? void 0 : segment.continuesBefore) ? 0 : "md",
+        borderRightRadius: (segment === null || segment === void 0 ? void 0 : segment.continuesAfter) ? 0 : "md",
+        title: event.label,
+        "data-event-id": event.id,
+        onClick: () => onEventClick === null || onEventClick === void 0 ? void 0 : onEventClick(event),
+        _hover: { bg: tone.hoverBg, borderColor: tone.hoverBorder },
+        _active: { bg: tone.activeBg, borderColor: tone.activeBorder },
+        sx: focusVisibleStyles(colors),
+    };
+    return event.href ? (_jsx(Box, { as: "a", href: event.href, ...common, children: event.label })) : (_jsx(Box, { as: "button", type: "button", ...common, children: event.label }));
+};
+/** Controlled month, week or day grid that places date-granularity events as chips and spanning bars, with a toolbar and arrow-key navigation. */
+const CalendarGrid = ({ view, date, events, onViewChange, onDateChange, onEventClick, renderDayCell, weekStartsOn = 0, locale, isLoading = false, labels, }) => {
+    const { colors } = useCustomTheme();
+    const text = { ...DEFAULT_LABELS, ...labels };
+    const today = new Date();
+    const anchor = startOfDay(date);
+    const anchorKey = dayKey(anchor);
+    const weeks = visibleWeeks(view, anchor, weekStartsOn);
+    const columns = weeks[0].length;
+    const visibleKeys = new Set(weeks.flat().map(dayKey));
+    const shownEvents = isLoading ? [] : events;
+    const maxLanes = MAX_LANES[view];
+    const [focusedKey, setFocusedKey] = useState(anchorKey);
+    const pendingFocus = useRef(false);
+    const cellRefs = useRef(new Map());
+    const activeKey = visibleKeys.has(focusedKey) ? focusedKey : visibleKeys.has(anchorKey) ? anchorKey : dayKey(weeks[0][0]);
+    useEffect(() => {
+        setFocusedKey(anchorKey);
+    }, [anchorKey]);
+    useEffect(() => {
+        if (!pendingFocus.current)
+            return;
+        const el = cellRefs.current.get(activeKey);
+        if (!el)
+            return;
+        pendingFocus.current = false;
+        el.focus();
+    });
+    const handleCellKeyDown = (e, cellDate) => {
+        if (e.target !== e.currentTarget)
+            return;
+        if (isNavKey(e.key)) {
+            e.preventDefault();
+            const next = moveFocus(view, cellDate, e.key, weekStartsOn);
+            const inRange = visibleKeys.has(dayKey(next));
+            if (!inRange && !onDateChange)
+                return;
+            setFocusedKey(dayKey(next));
+            pendingFocus.current = true;
+            if (!inRange)
+                onDateChange === null || onDateChange === void 0 ? void 0 : onDateChange(next);
+            return;
+        }
+        if (isActivationKey(e) && onDateChange) {
+            e.preventDefault();
+            onDateChange(cellDate);
+        }
+    };
+    const drillIntoDay = (day) => {
+        onDateChange === null || onDateChange === void 0 ? void 0 : onDateChange(day);
+        onViewChange === null || onViewChange === void 0 ? void 0 : onViewChange("day");
+    };
+    const weekdayShort = weekdayLabels(locale, weekStartsOn, "short");
+    const weekdayLong = weekdayLabels(locale, weekStartsOn, "long");
+    const headerDays = view === "day" ? [(anchor.getDay() - weekStartsOn + 7) % 7] : weekdayShort.map((_, i) => i);
+    const title = formatTitle(view, anchor, locale, weekStartsOn);
+    const template = `repeat(${columns}, minmax(0, 1fr))`;
+    const border = colors.boxborder[200];
+    const renderCell = (day, col, weekIndex, layout) => {
+        const key = dayKey(day);
+        const isToday = isSameDay(day, today);
+        const inMonth = view !== "month" || day.getMonth() === anchor.getMonth();
+        const surface = isWeekend(day) ? colors.backgroundColor.secondary : colors.backgroundColor.main;
+        const dayEvents = eventsOnDay(shownEvents, day);
+        const hidden = layout.hiddenByCol[col];
+        const active = key === activeKey;
+        const label = `${formatFullDate(day, locale)}${dayEvents.length ? `, ${text.eventCount(dayEvents.length)}` : ""}`;
+        const ownSegments = layout.segments.filter((s) => s.startCol === col && s.lane < maxLanes);
+        let body = null;
+        if (isLoading) {
+            body = (_jsx(Box, { mt: 1, "aria-hidden": true, children: (weekIndex * 7 + col) % 3 === 0 ? _jsx(Skeletons, { type: "skeleton", height: CHIP_HEIGHT, borderRadius: "md" }) : null }));
+        }
+        else if (renderDayCell) {
+            body = _jsx(Box, { mt: 1, children: renderDayCell(day, dayEvents) });
+        }
+        else if (view === "day") {
+            body = (_jsx(Flex, { direction: "column", gap: 1, mt: 2, children: dayEvents.map((event) => (_jsx(EventChip, { event: event, colors: colors, surface: surface, onEventClick: onEventClick }, event.id))) }));
+        }
+        else {
+            body = (_jsxs(_Fragment, { children: [_jsx(Box, { position: "relative", mt: 1, h: `calc(${layout.visibleLanes} * ${LANE_HEIGHT})`, children: ownSegments.map((s) => (_jsx(EventChip, { event: s.event, colors: colors, surface: surface, onEventClick: onEventClick, segment: s }, s.event.id))) }), hidden > 0 ? (_jsx(Box, { as: "button", type: "button", "aria-label": text.moreLabel(hidden, formatFullDate(day, locale)), onClick: () => drillIntoDay(day), px: 1, fontSize: "xs", fontWeight: 600, color: colors.header[900], textAlign: "left", textDecoration: "underline", sx: focusVisibleStyles(colors), children: text.more(hidden) })) : null] }));
+        }
+        return (_jsxs(Box, { role: "gridcell", ref: (el) => {
+                if (el)
+                    cellRefs.current.set(key, el);
+                else
+                    cellRefs.current.delete(key);
+            }, "data-date": key, "aria-current": isToday ? "date" : undefined, tabIndex: active ? 0 : -1, onFocus: () => setFocusedKey(key), onKeyDown: (e) => handleCellKeyDown(e, day), position: "relative", minH: MIN_CELL_HEIGHT[view], p: 1, bg: surface, borderRight: "1px solid", borderBottom: "1px solid", borderColor: border, outline: "none", _focusVisible: {
+                boxShadow: insetFocusRingShadow(colors),
+            }, children: [_jsx(Text, { as: "span", display: "inline-flex", alignItems: "center", justifyContent: "center", minW: "1.5rem", h: "1.5rem", px: 1, borderRadius: "full", fontSize: "xs-plus", fontWeight: isToday ? 700 : 500, color: isToday ? colors.accentText : inMonth ? colors.header[900] : colors.textMuted, boxShadow: isToday ? `inset 0 0 0 1.5px ${colors.accentText}` : undefined, "aria-hidden": true, children: day.getDate() }), _jsx(VisuallyHidden, { position: "absolute", children: label }), body] }, key));
+    };
+    return (_jsxs(Box, { children: [_jsxs(Flex, { align: "center", justify: "space-between", wrap: "wrap", gap: 2, mb: 3, children: [_jsxs(Flex, { align: "center", gap: 2, children: [onDateChange ? (_jsxs(_Fragment, { children: [_jsx(Button, { label: text.today, size: "sm", variant: "outline", onClick: () => onDateChange(startOfDay(new Date())) }), _jsx(Button, { "aria-label": text.previous, size: "sm", variant: "ghost", leftIcon: _jsx(ChevronLeft, { size: 16, "aria-hidden": true }), onClick: () => onDateChange(shiftAnchor(view, anchor, -1)) }), _jsx(Button, { "aria-label": text.next, size: "sm", variant: "ghost", leftIcon: _jsx(ChevronRight, { size: 16, "aria-hidden": true }), onClick: () => onDateChange(shiftAnchor(view, anchor, 1)) })] })) : null, _jsx(Text, { as: "h2", fontSize: "md", fontWeight: 600, color: colors.header[900], children: title })] }), onViewChange ? (_jsx(Flex, { role: "group", "aria-label": text[view], gap: 1, children: VIEWS.map((v) => (_jsx(Button, { label: text[v], size: "sm", variant: v === view ? "solid" : "outline", "aria-pressed": v === view, onClick: () => onViewChange(v) }, v))) })) : null] }), _jsx(Box, { overflowX: "auto", children: _jsxs(Box, { role: "grid", "aria-label": title, "aria-busy": isLoading || undefined, "data-view": view, minW: view === "day" ? undefined : "42rem", borderTop: "1px solid", borderLeft: "1px solid", borderColor: border, borderRadius: "lg", overflow: "hidden", children: [_jsx(Grid, { role: "row", templateColumns: template, children: headerDays.map((i) => (_jsx(Box, { role: "columnheader", "aria-label": weekdayLong[i], px: 2, py: 1, fontSize: "xs", fontWeight: 600, color: colors.textMuted, bg: colors.backgroundColor.main, borderRight: "1px solid", borderBottom: "1px solid", borderColor: border, children: weekdayShort[i] }, i))) }), weeks.map((week, weekIndex) => {
+                            const layout = layoutWeek(week, shownEvents, maxLanes);
+                            return (_jsx(Grid, { role: "row", templateColumns: template, children: week.map((day, col) => renderCell(day, col, weekIndex, layout)) }, dayKey(week[0])));
+                        })] }) })] }));
+};
+export default CalendarGrid;

package/dist/esm/Components/CalendarGrid/calendarMath.js

@@ -0,0 +1,167 @@
+const MS_PER_DAY = 86400000;
+export const startOfDay = (d) => new Date(d.getFullYear(), d.getMonth(), d.getDate());
+export const addDays = (d, n) => new Date(d.getFullYear(), d.getMonth(), d.getDate() + n);
+export const addMonths = (d, n) => {
+    const target = new Date(d.getFullYear(), d.getMonth() + n, 1);
+    const lastDay = new Date(target.getFullYear(), target.getMonth() + 1, 0).getDate();
+    return new Date(target.getFullYear(), target.getMonth(), Math.min(d.getDate(), lastDay));
+};
+export const isSameDay = (a, b) => a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+export const dayKey = (d) => `${String(d.getFullYear()).padStart(4, "0")}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`;
+export const isWeekend = (d) => d.getDay() === 0 || d.getDay() === 6;
+/** Whole calendar days from `a` to `b`, counted on date components so a DST day is still one day. */
+export const diffDays = (a, b) => Math.round((Date.UTC(b.getFullYear(), b.getMonth(), b.getDate()) - Date.UTC(a.getFullYear(), a.getMonth(), a.getDate())) /
+    MS_PER_DAY);
+export const startOfWeek = (d, weekStartsOn) => addDays(d, -((d.getDay() - weekStartsOn + 7) % 7));
+export const weekDays = (d, weekStartsOn) => {
+    const first = startOfWeek(d, weekStartsOn);
+    return Array.from({ length: 7 }, (_, i) => addDays(first, i));
+};
+/** Whole weeks that cover the month of `d`, padded with the neighbouring months' days. */
+export const monthWeeks = (d, weekStartsOn) => {
+    const first = new Date(d.getFullYear(), d.getMonth(), 1);
+    const last = new Date(d.getFullYear(), d.getMonth() + 1, 0);
+    const gridStart = startOfWeek(first, weekStartsOn);
+    const weekCount = Math.ceil((diffDays(gridStart, last) + 1) / 7);
+    return Array.from({ length: weekCount }, (_, w) => Array.from({ length: 7 }, (_, i) => addDays(gridStart, w * 7 + i)));
+};
+export const visibleWeeks = (view, d, weekStartsOn) => {
+    if (view === "month")
+        return monthWeeks(d, weekStartsOn);
+    if (view === "week")
+        return [weekDays(d, weekStartsOn)];
+    return [[startOfDay(d)]];
+};
+export const shiftAnchor = (view, d, direction) => {
+    if (view === "month")
+        return addMonths(d, direction);
+    return addDays(d, view === "week" ? 7 * direction : direction);
+};
+export const eventRange = (e) => {
+    const start = startOfDay(e.start);
+    const end = e.end ? startOfDay(e.end) : start;
+    return end < start ? { start: end, end: start } : { start, end };
+};
+export const eventsOnDay = (events, day) => {
+    const d = startOfDay(day);
+    return events.filter((e) => {
+        const r = eventRange(e);
+        return r.start <= d && d <= r.end;
+    });
+};
+/** Lays events out in lanes across one week row; lanes past `maxLanes` are counted per column, not drawn. */
+export const layoutWeek = (days, events, maxLanes) => {
+    const first = days[0];
+    const lastCol = days.length - 1;
+    const candidates = events
+        .map((event) => {
+        const r = eventRange(event);
+        const rawStart = diffDays(first, r.start);
+        const rawEnd = diffDays(first, r.end);
+        if (rawEnd < 0 || rawStart > lastCol)
+            return null;
+        return {
+            event,
+            rawStart,
+            length: rawEnd - rawStart,
+            startCol: Math.max(0, rawStart),
+            endCol: Math.min(lastCol, rawEnd),
+            continuesBefore: rawStart < 0,
+            continuesAfter: rawEnd > lastCol,
+        };
+    })
+        .filter((c) => c !== null)
+        .sort((a, b) => a.rawStart - b.rawStart ||
+        b.length - a.length ||
+        a.event.label.localeCompare(b.event.label) ||
+        a.event.id.localeCompare(b.event.id));
+    const occupied = [];
+    const segments = [];
+    for (const c of candidates) {
+        let lane = occupied.findIndex((row) => row.slice(c.startCol, c.endCol + 1).every((taken) => !taken));
+        if (lane === -1) {
+            lane = occupied.length;
+            occupied.push(new Array(days.length).fill(false));
+        }
+        for (let col = c.startCol; col <= c.endCol; col += 1)
+            occupied[lane][col] = true;
+        segments.push({
+            event: c.event,
+            startCol: c.startCol,
+            endCol: c.endCol,
+            lane,
+            continuesBefore: c.continuesBefore,
+            continuesAfter: c.continuesAfter,
+        });
+    }
+    const hiddenByCol = new Array(days.length).fill(0);
+    for (const s of segments) {
+        if (s.lane < maxLanes)
+            continue;
+        for (let col = s.startCol; col <= s.endCol; col += 1)
+            hiddenByCol[col] += 1;
+    }
+    return { segments, visibleLanes: Math.min(occupied.length, maxLanes), hiddenByCol };
+};
+export const NAV_KEYS = [
+    "ArrowLeft",
+    "ArrowRight",
+    "ArrowUp",
+    "ArrowDown",
+    "Home",
+    "End",
+    "PageUp",
+    "PageDown",
+];
+export const isNavKey = (key) => NAV_KEYS.includes(key);
+export const moveFocus = (view, d, key, weekStartsOn) => {
+    const columns = view === "day" ? 1 : 7;
+    switch (key) {
+        case "ArrowLeft":
+            return addDays(d, -1);
+        case "ArrowRight":
+            return addDays(d, 1);
+        case "ArrowUp":
+            return addDays(d, -columns);
+        case "ArrowDown":
+            return addDays(d, columns);
+        case "Home":
+            return view === "day" ? d : startOfWeek(d, weekStartsOn);
+        case "End":
+            return view === "day" ? d : addDays(startOfWeek(d, weekStartsOn), 6);
+        case "PageUp":
+            return shiftAnchor(view, d, -1);
+        default:
+            return shiftAnchor(view, d, 1);
+    }
+};
+const probe = (weekday) => new Date(2024, 0, 7 + weekday);
+const dateFormatters = new Map();
+const dateFormatter = (locale, options) => {
+    const key = JSON.stringify([locale, options]);
+    let formatter = dateFormatters.get(key);
+    if (!formatter) {
+        formatter = new Intl.DateTimeFormat(locale, options);
+        dateFormatters.set(key, formatter);
+    }
+    return formatter;
+};
+const FULL_DATE = { weekday: "long", day: "numeric", month: "long", year: "numeric" };
+const MONTH_TITLE = { month: "long", year: "numeric" };
+const WEEK_RANGE = { day: "numeric", month: "short", year: "numeric" };
+export const weekdayLabels = (locale, weekStartsOn, style = "short") => {
+    const fmt = dateFormatter(locale, { weekday: style });
+    return Array.from({ length: 7 }, (_, i) => fmt.format(probe((i + weekStartsOn) % 7)));
+};
+export const formatTitle = (view, d, locale, weekStartsOn) => {
+    if (view === "month")
+        return dateFormatter(locale, MONTH_TITLE).format(d);
+    if (view === "day")
+        return dateFormatter(locale, FULL_DATE).format(d);
+    const days = weekDays(d, weekStartsOn);
+    const fmt = dateFormatter(locale, WEEK_RANGE);
+    return typeof fmt.formatRange === "function"
+        ? fmt.formatRange(days[0], days[6])
+        : `${fmt.format(days[0])} - ${fmt.format(days[6])}`;
+};
+export const formatFullDate = (d, locale) => dateFormatter(locale, FULL_DATE).format(d);

package/dist/esm/Components/Card/Card.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { Card as ChakraCard, CardBody, CardFooter, CardHeader, } from "@chakra-ui/react";
+const HEADER_PADDING_WHEN_FLUSH = "0.75rem";
+const PADDING_VALUES = {
+    none: "0",
+    "2xs": "0.375rem",
+    xs: "0.75rem",
+    sm: "0.75rem 1rem",
+    md: "1rem 1.25rem",
+    lg: "1.25rem 1.5rem",
+};
+/** Themed card; `header` and `footer` render outside the body, `padding` sets density. */
+const Card = forwardRef(function Card({ header, footer, children, color, colorScheme, direction = "column", align, justify, bodyProps, padding, ...rest }, ref) {
+    const cardProps = { ...rest };
+    delete cardProps.dividercolor;
+    delete cardProps.dividersize;
+    delete cardProps.dividervariant;
+    const sx = padding ? { "--card-padding": PADDING_VALUES[padding], ...cardProps.sx } : cardProps.sx;
+    return (_jsxs(ChakraCard, { ref: ref, colorScheme: colorScheme !== null && colorScheme !== void 0 ? colorScheme : color, ...cardProps, sx: sx, children: [header && (_jsx(CardHeader, { sx: padding === "none" ? { "--card-padding": HEADER_PADDING_WHEN_FLUSH } : undefined, children: header })), _jsx(CardBody, { display: "flex", flexDirection: direction, alignItems: align, justifyContent: justify, ...bodyProps, children: children }), footer && _jsx(CardFooter, { children: footer })] }));
+});
+export default Card;

package/dist/esm/Components/Card/PaymentCard/PaymentCard.js

@@ -0,0 +1,80 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Badge, Flex, GridItem, Heading, Icon, Text, VStack, Skeleton, SkeletonText, } from "@chakra-ui/react";
+import { Check } from "lucide-react";
+import { useCustomTheme } from "../../../Theme/useCustomTheme.js";
+import { resolveFilledSurface } from "../../../Theme/tokens/builders/filledSurface.js";
+import { accentTextOnCanvas } from "../../../Theme/tokens/builders/accentText.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 Button from "../../Button/Button.js";
+const getCardStyles = (isActive, isNextUpgrade, popular, theme) => {
+    const withOnButtonColor = (styles) => {
+        const scale = theme.colors[styles.buttonScale];
+        const solid = resolveFilledSurface(scale, theme.colors);
+        return {
+            ...styles,
+            buttonColor: solid.fill,
+            onButtonColor: solid.color,
+            iconInk: accentTextOnCanvas(scale, styles.buttonColor50),
+        };
+    };
+    if (isActive) {
+        return withOnButtonColor({
+            badgeText: "Active Plan",
+            badgeColor: `${BORDER_WIDTHS.hairline} solid ${theme.colors.green[500]}`,
+            buttonColor: theme.colors.green[500],
+            buttonScale: "green",
+            buttonColor50: theme.colors.green[50],
+            colorScheme: "green",
+        });
+    }
+    if (isNextUpgrade) {
+        return withOnButtonColor({
+            badgeText: "Upgrade Your Plan",
+            badgeColor: `${BORDER_WIDTHS.hairline} solid ${theme.colors.primary[500]}`,
+            buttonColor: theme.colors.primary[500],
+            buttonScale: "primary",
+            buttonColor50: theme.colors.primary[50],
+            colorScheme: "primary",
+        });
+    }
+    if (popular) {
+        return withOnButtonColor({
+            badgeText: "Most Popular",
+            badgeColor: `${BORDER_WIDTHS.hairline} solid ${theme.colors.primary[500]}`,
+            buttonColor: theme.colors.primary[500],
+            buttonScale: "primary",
+            buttonColor50: theme.colors.primary[50],
+            colorScheme: "primary",
+        });
+    }
+    return withOnButtonColor({
+        badgeText: "",
+        badgeColor: `${BORDER_WIDTHS.hairline} solid ${theme.colors.boxborder[200]}`,
+        buttonColor: theme.colors.primary[500],
+        buttonScale: "primary",
+        buttonColor50: theme.colors.primary[50],
+        colorScheme: "primary",
+    });
+};
+/** Subscription plan card with price, feature list and a call-to-action; badge and accent follow active, upgrade and popular state. */
+const PaymentCard = ({ plan, isActive = false, isNextUpgrade = false, billingCycle, onSelect, onHover, buttonLoading, isLoading = false, isRenewal = false, }) => {
+    const theme = useCustomTheme();
+    const { badgeText, badgeColor, buttonColor, buttonColor50, onButtonColor, iconInk, colorScheme } = getCardStyles(isActive, isNextUpgrade, !!plan.popular, theme);
+    const variantStyles = plan.buttonVariant === "outline"
+        ? {}
+        : {
+            bg: buttonColor,
+            color: onButtonColor,
+            _hover: { bg: buttonColor },
+        };
+    return (_jsx(GridItem, { children: _jsx(Box, { bg: theme.colors.background[50], minH: "100%", borderRadius: "xl", p: 8, position: "relative", transition: transitionFor(["transform", "box-shadow"], "base"), transform: plan.popular ? "scale(1.03)" : "none", border: badgeColor, _hover: { transform: "translateY(-0.313rem)", shadow: "lg" }, sx: reducedMotionSx(), children: isLoading ? (
+            // 🔹 Skeleton Loader Layout
+            _jsxs(_Fragment, { children: [_jsx(Skeleton, { height: "24px", width: "120px", mx: "auto", mb: 4 }), _jsx(Skeleton, { height: "50px", width: "50px", borderRadius: "lg", mx: "auto", mb: 4 }), _jsx(Skeleton, { height: "24px", width: "100px", mx: "auto", mb: 3 }), _jsx(Skeleton, { height: "30px", width: "160px", mx: "auto", mb: 4 }), _jsx(SkeletonText, { noOfLines: 2, spacing: "2" }), _jsx(Skeleton, { height: "44px", width: "full", mt: 6, borderRadius: "lg" }), _jsx(VStack, { align: "start", spacing: 3, mt: 6, children: [1, 2, 3, 4].map((i) => (_jsx(Skeleton, { height: "16px", width: "80%" }, i))) })] })) : (
+            // 🔹 Actual Card Content
+            _jsxs(_Fragment, { children: [badgeText && (_jsx(Badge, { position: "absolute", top: "-0.75rem", left: "50%", transform: "translateX(-50%)", bg: buttonColor, color: onButtonColor, fontSize: "sm", px: 4, py: 1, borderRadius: "full", children: badgeText })), _jsxs(Box, { textAlign: "center", mb: 6, children: [_jsx(Flex, { justify: "center", align: "center", w: "3.125rem", h: "3.125rem", borderRadius: "lg", bg: buttonColor50, color: iconInk, mx: "auto", mb: 4, children: plan.icon }), _jsx(Heading, { as: "h3", size: "lg", mb: 4, color: theme.colors.header[900], children: plan.name }), (plan.yearlyPrice !== 0 || plan.monthlyPrice !== 0) && (_jsxs(Heading, { as: "h4", size: "2xl", mb: 1, color: theme.colors.header[900], display: "flex", justifyContent: "center", children: [_jsx(Box, { fontSize: "2xl", children: "\u20B9" }), billingCycle === "yearly"
+                                        ? plan.yearlyPrice
+                                        : plan.monthlyPrice, _jsxs(Box, { display: "flex", flexDirection: "column", justifyContent: "end", ml: 1, children: [_jsx(Text, { fontSize: "0.9rem", fontWeight: "normal", color: theme.colors.textMuted, children: plan.billing }), _jsx(Text, { fontSize: "0.7rem", fontWeight: "normal", color: theme.colors.textMuted, children: plan.tax })] })] })), plan.priceDescription && (_jsx(Text, { color: theme.colors.semanticText.success, mt: 2, children: plan === null || plan === void 0 ? void 0 : plan.priceDescription })), _jsx(Text, { color: theme.colors.textMuted, mt: 2, children: plan.description })] }), ((!isActive && plan.buttonText) || isRenewal) && (_jsx(Button, { isLoading: plan.plan_id === buttonLoading, loadingText: plan.buttonLoadingText, width: "full", variant: plan.buttonVariant, colorScheme: colorScheme, size: "lg", onClick: () => onSelect === null || onSelect === void 0 ? void 0 : onSelect(plan.plan_id), onMouseEnter: () => onHover === null || onHover === void 0 ? void 0 : onHover(plan.plan_id, "button", true), onMouseLeave: () => onHover === null || onHover === void 0 ? void 0 : onHover(plan.plan_id, "button", false), ...variantStyles, children: plan.buttonText })), _jsx(VStack, { align: "start", spacing: 3, mt: 6, children: plan.features.map((feature, i) => (_jsxs(Flex, { align: "center", children: [_jsx(Icon, { as: Check, color: theme.colors.semanticText.success, mr: 2 }), _jsx(Text, { fontSize: "sm", children: feature })] }, i))) })] })) }) }));
+};
+export default PaymentCard;

package/dist/esm/Components/CartItem/CartItem.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Flex, Text } from "@chakra-ui/react";
+import { Truck } from "lucide-react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { focusVisibleStyles } from "../../Theme/chakra/focusRing.styles.js";
+import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
+import { NUMERIC_TEXT } from "../../Theme/tokens/primitives/typography.js";
+import { reducedMotionSx } from "../../Theme/chakra/motion.js";
+import { formatPrice } from "../../Utils/price.js";
+import Button from "../Button/Button.js";
+import PriceBlock from "../PriceBlock/PriceBlock.js";
+import QuantityStepper from "../QuantityStepper/QuantityStepper.js";
+import Skeletons from "../Skeletons/Skeletons.js";
+import StockStatus from "../StockStatus/StockStatus.js";
+import { summariseOptions } from "./cartItemOptions.js";
+const DEFAULT_LABELS = {
+    moveToWishlist: "Move to wishlist",
+    remove: "Remove",
+    outOfStock: "Out of stock",
+    notIncluded: "Not included in your total",
+    quantity: (quantity) => `Qty ${quantity}`,
+    each: (price) => `${price} each`,
+    delivery: (date) => `Delivery by ${date}`,
+};
+const THUMB = {
+    row: { w: "5rem", h: "6.25rem", radius: "0.75rem" },
+    compact: { w: "3.5rem", h: "4.375rem", radius: "0.625rem" },
+};
+const DIMMED_MEDIA = 0.45;
+const CartItemSkeleton = ({ layout }) => {
+    const thumb = THUMB[layout];
+    return (_jsxs(Flex, { gap: 3, align: "flex-start", "aria-busy": "true", "data-testid": "cart-item-skeleton", children: [_jsx(Skeletons, { type: "skeleton", height: thumb.h, width: thumb.w, borderRadius: thumb.radius }), _jsxs(Flex, { direction: "column", gap: 2, flex: 1, minW: 0, children: [_jsx(Skeletons, { type: "skeleton", height: 3, width: "35%" }), _jsx(Skeletons, { type: "skeleton", height: 4, width: "80%" }), _jsx(Skeletons, { type: "skeleton", height: 3, width: "45%" }), layout === "row" && _jsx(Skeletons, { type: "skeleton", height: 10, width: "100%", borderRadius: "full" })] })] }));
+};
+/** One bag line: tonal thumbnail, linked title, chosen options, line total with struck MRP, stepper and calm text actions. */
+const CartItem = ({ title, brand, href, onTitleClick, image, imageAlt = "", axes, selection, optionsSummary, price, mrp, quantity, onQuantityChange, minQuantity = 1, maxQuantity, onRemove, onMoveToWishlist, stock, stockCount, stockMessage, deliveryBy, unavailable = false, layout = "row", isLoading = false, currency, locale, labels, "data-testid": testId, }) => {
+    const { colors } = useCustomTheme();
+    const copy = { ...DEFAULT_LABELS, ...labels };
+    const compact = layout === "compact";
+    const thumb = THUMB[layout];
+    const fmt = { currency, locale };
+    if (isLoading)
+        return _jsx(CartItemSkeleton, { layout: layout });
+    const summary = optionsSummary !== null && optionsSummary !== void 0 ? optionsSummary : summariseOptions(axes, selection);
+    const lineTotal = price * quantity;
+    const lineMrp = mrp !== undefined ? mrp * quantity : undefined;
+    const titleInk = unavailable ? colors.textMuted : colors.header[900];
+    const titleProps = href
+        ? { as: "a", href }
+        : onTitleClick
+            ? { as: "button", type: "button", onClick: onTitleClick }
+            : { as: "span" };
+    const linked = !!href || !!onTitleClick;
+    const stepper = (_jsx(QuantityStepper, { size: "sm", variant: "soft", value: quantity, min: minQuantity, max: maxQuantity, removable: !!onRemove, onRemove: onRemove, onValueChange: onQuantityChange, itemLabel: title }));
+    return (_jsxs(Flex, { gap: 3, align: "flex-start", "data-testid": testId, "data-unavailable": unavailable || undefined, children: [_jsx(Box, { flexShrink: 0, w: thumb.w, h: thumb.h, borderRadius: thumb.radius, overflow: "hidden", bg: colors.background[100], opacity: unavailable ? DIMMED_MEDIA : 1, children: image && _jsx(Box, { as: "img", src: image, alt: imageAlt, w: "100%", h: "100%", objectFit: "cover", display: "block" }) }), _jsxs(Flex, { direction: "column", flex: 1, minW: 0, gap: 1.5, children: [_jsxs(Flex, { direction: "column", gap: 0.5, minW: 0, children: [brand && (_jsx(Text, { as: "span", fontSize: "xs", fontWeight: 600, lineHeight: 1.4, color: colors.textMuted, noOfLines: 1, children: brand })), _jsx(Text, { ...titleProps, display: "block", textAlign: "left", fontSize: "sm", fontWeight: 600, lineHeight: 1.4, color: titleInk, noOfLines: 2, borderRadius: "sm", cursor: linked ? "pointer" : undefined, transition: transitionFor(["color"]), _hover: linked ? { textDecoration: "underline" } : undefined, sx: { ...focusVisibleStyles(colors), ...reducedMotionSx() }, children: title }), summary && (_jsx(Text, { as: "span", fontSize: "xs", lineHeight: 1.4, color: colors.textMuted, children: summary }))] }), unavailable ? (_jsxs(Flex, { direction: "column", gap: 0.5, children: [_jsx(StockStatus, { status: "out-of-stock", message: copy.outOfStock, size: "sm" }), _jsx(Text, { as: "span", fontSize: "xs", color: colors.textMuted, children: copy.notIncluded })] })) : (_jsxs(Flex, { align: "flex-end", justify: "space-between", gap: 3, wrap: "wrap", children: [compact ? (_jsx(Text, { as: "span", fontSize: "xs", color: colors.textMuted, sx: NUMERIC_TEXT, children: copy.quantity(quantity) })) : (stepper), _jsx(Box, { ml: "auto", children: _jsx(PriceBlock, { size: compact ? "sm" : "md", align: "end", price: lineTotal, mrp: lineMrp, taxNote: quantity > 1 ? copy.each(formatPrice(price, fmt)) : undefined, ...fmt }) })] })), !unavailable && !compact && stock && stock !== "in-stock" && (_jsx(StockStatus, { status: stock, count: stockCount, message: stockMessage, size: "sm" })), !unavailable && deliveryBy && (_jsxs(Flex, { align: "center", gap: 1.5, color: colors.textMuted, children: [_jsx(Truck, { size: 13, "aria-hidden": true }), _jsx(Text, { as: "span", fontSize: "xs", lineHeight: 1.4, children: copy.delivery(deliveryBy) })] })), !compact && (onRemove || (onMoveToWishlist && !unavailable)) && (_jsxs(Flex, { gap: 1, ml: -3, mt: 0.5, children: [onMoveToWishlist && !unavailable && (_jsx(Button, { variant: "ghost", colorScheme: "gray", size: "sm", onClick: onMoveToWishlist, "aria-label": `${copy.moveToWishlist}: ${title}`, children: copy.moveToWishlist })), onRemove && (_jsx(Button, { variant: "ghost", colorScheme: "gray", size: "sm", onClick: onRemove, "aria-label": `${copy.remove}: ${title}`, children: copy.remove }))] }))] })] }));
+};
+export default CartItem;

package/dist/esm/Components/CartItem/cartItemOptions.js

@@ -0,0 +1,9 @@
+/** "Indigo Wash · M" from the chosen option labels, in axis order; axes with no pick are skipped. */
+export const summariseOptions = (axes, selection) => {
+    if (!axes || !selection)
+        return "";
+    return axes
+        .map((axis) => { var _a; return (_a = axis.values.find((value) => value.id === selection[axis.id])) === null || _a === void 0 ? void 0 : _a.label; })
+        .filter((label) => !!label)
+        .join(" · ");
+};

package/dist/esm/Components/Checkbox/Checkbox.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { Checkbox as ChakraCheckbox, Box } from "@chakra-ui/react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import FieldMessage from "../Common/FieldMessage.js";
+import { useFieldIds } from "../Common/useFieldIds.js";
+import ToolTip from "../ToolTip/ToolTip.js";
+/** Native checkbox with optional label (else aria-label); `error` links its message via aria-describedby; `ref` is the `<input>`. */
+const CheckBox = forwardRef(function CheckBox({ label, labelFontSize, showLabelTooltip, labelTooltip, labelClampLines, spacing, isInvalid, color, iconColor, iconSize, isChecked, isIndeterminate, onChange, isDisabled, size = "md", value, defaultChecked, sx, error, errorMessage, helperText, onClick, labelSx, id, variant, ...aria }, ref) {
+    void variant;
+    const theme = useCustomTheme();
+    const ids = useFieldIds(id, { error, errorMessage, helperText });
+    const controlSize = size === "sm" ? "0.875rem"
+        : size === "md" ? "1rem"
+            : size === "lg" ? "1.25rem"
+                : size; // pass-through if already a CSS value
+    const clampStyles = labelClampLines
+        ? {
+            display: "-webkit-box",
+            WebkitLineClamp: labelClampLines,
+            WebkitBoxOrient: "vertical",
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+            whiteSpace: "normal",
+            ...labelSx,
+        }
+        : { ...labelSx };
+    return (_jsxs(_Fragment, { children: [_jsx(ChakraCheckbox, { ref: ref, id: ids.inputId, "aria-describedby": ids.describedBy, ...aria, onClick: onClick, spacing: spacing !== null && spacing !== void 0 ? spacing : "0.5rem", isInvalid: isInvalid || error, colorScheme: color, iconColor: iconColor, iconSize: iconSize, isChecked: isChecked, isIndeterminate: isIndeterminate, onChange: onChange, isDisabled: isDisabled, size: size, value: value, defaultChecked: defaultChecked, borderColor: theme.colors.boxborder[500], display: "flex", alignItems: "center", sx: {
+                    ...sx,
+                    ".chakra-checkbox__control": { w: controlSize, h: controlSize },
+                }, children: label && (showLabelTooltip ? (_jsx(ToolTip, { label: labelTooltip !== null && labelTooltip !== void 0 ? labelTooltip : label, hasArrow: true, placement: "top", fontSize: "xs", children: _jsx(Box, { as: "span", sx: clampStyles, fontSize: labelFontSize !== null && labelFontSize !== void 0 ? labelFontSize : "0.875rem", color: theme.colors.text[700], fontWeight: 500, ml: 0, children: label }) })) : (_jsx(Box, { as: "span", sx: clampStyles, fontSize: labelFontSize !== null && labelFontSize !== void 0 ? labelFontSize : "0.875rem", color: theme.colors.text[700], fontWeight: 500, ml: 0, children: label }))) }), _jsx(FieldMessage, { error: error, errorMessage: errorMessage, helperText: helperText, helperId: ids.helperId, errorId: ids.errorId })] }));
+});
+CheckBox.displayName = "CheckBox";
+export default CheckBox;

package/dist/esm/Components/Checkbox/Checkbox.styles.js

@@ -0,0 +1,81 @@
+import { resolveFilledSurface } from "../../Theme/tokens/builders/filledSurface.js";
+import { resolveHoverTint } from "../../Theme/tokens/builders/outlineRung.js";
+import { onFilled } from "../../Theme/tokens/builders/accentText.js";
+import { focusVisibleRing } from "../../Theme/chakra/focusRing.styles.js";
+import { fieldHoverBorder } from "../Common/fieldStyles.js";
+import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
+const BACKGROUND_BORDER_COLOR_BOX_SHADOW_TRANSITION = transitionFor(["background", "border-color", "box-shadow"]);
+// One fill rule for every colour scheme, via resolveFilledSurface — was a flat [600].
+export const Checkbox = {
+    baseStyle: ({ theme, colorScheme = "primary" }) => {
+        var _a;
+        const palette = (_a = theme.colors[colorScheme]) !== null && _a !== void 0 ? _a : theme.colors.primary;
+        const filled = resolveFilledSurface(palette, theme.colors);
+        // filledSurface's own hoverFill can collapse on a near-monochrome scale (zinc); step from
+        // the resolved fill with resolveHoverTint instead, which guarantees a perceptible move.
+        const hoverFill = resolveHoverTint(filled.fill, filled.fill);
+        const hoverColor = onFilled(hoverFill, theme.colors.white, theme.colors.black);
+        const activeFill = resolveHoverTint(hoverFill, hoverFill);
+        return {
+            control: {
+                borderWidth: "1px",
+                borderRadius: "base",
+                borderColor: fieldHoverBorder(theme.colors),
+                transition: BACKGROUND_BORDER_COLOR_BOX_SHADOW_TRANSITION,
+                _invalid: {
+                    borderColor: theme.colors.semanticText.error,
+                },
+                _indeterminate: {
+                    bg: filled.fill,
+                    borderColor: filled.fill,
+                    svg: { color: filled.color },
+                },
+                _checked: {
+                    bg: filled.fill,
+                    borderColor: filled.fill,
+                    _hover: {
+                        bg: hoverFill,
+                        borderColor: hoverFill,
+                    },
+                },
+                _hover: {
+                    bg: theme.colors.background[100],
+                    borderColor: filled.fill,
+                    _checked: {
+                        bg: hoverFill,
+                        borderColor: hoverFill,
+                    },
+                    _indeterminate: {
+                        bg: hoverFill,
+                        borderColor: hoverFill,
+                    },
+                },
+                _focusVisible: focusVisibleRing(theme.colors),
+                _active: {
+                    bg: activeFill,
+                    borderColor: activeFill,
+                },
+                // Last so it wins over _checked/_indeterminate at equal specificity.
+                _disabled: {
+                    bg: theme.colors.background[100],
+                    borderColor: theme.colors.boxborder[500],
+                    cursor: "not-allowed",
+                    opacity: 1,
+                },
+            },
+            icon: {
+                color: filled.color,
+                _hover: {
+                    color: hoverColor,
+                },
+                _disabled: {
+                    color: theme.colors.textMuted,
+                },
+            },
+        };
+    },
+    defaultProps: {
+        colorScheme: "primary",
+        size: "md",
+    },
+};