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

package/dist/Components/CalendarGrid/calendarMath.js

@@ -0,0 +1,190 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.formatFullDate = exports.formatTitle = exports.weekdayLabels = exports.moveFocus = exports.isNavKey = exports.NAV_KEYS = exports.layoutWeek = exports.eventsOnDay = exports.eventRange = exports.shiftAnchor = exports.visibleWeeks = exports.monthWeeks = exports.weekDays = exports.startOfWeek = exports.diffDays = exports.isWeekend = exports.dayKey = exports.isSameDay = exports.addMonths = exports.addDays = exports.startOfDay = void 0;
+const MS_PER_DAY = 86400000;
+const startOfDay = (d) => new Date(d.getFullYear(), d.getMonth(), d.getDate());
+exports.startOfDay = startOfDay;
+const addDays = (d, n) => new Date(d.getFullYear(), d.getMonth(), d.getDate() + n);
+exports.addDays = addDays;
+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));
+};
+exports.addMonths = addMonths;
+const isSameDay = (a, b) => a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+exports.isSameDay = isSameDay;
+const dayKey = (d) => `${String(d.getFullYear()).padStart(4, "0")}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`;
+exports.dayKey = dayKey;
+const isWeekend = (d) => d.getDay() === 0 || d.getDay() === 6;
+exports.isWeekend = isWeekend;
+/** Whole calendar days from `a` to `b`, counted on date components so a DST day is still one day. */
+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);
+exports.diffDays = diffDays;
+const startOfWeek = (d, weekStartsOn) => (0, exports.addDays)(d, -((d.getDay() - weekStartsOn + 7) % 7));
+exports.startOfWeek = startOfWeek;
+const weekDays = (d, weekStartsOn) => {
+    const first = (0, exports.startOfWeek)(d, weekStartsOn);
+    return Array.from({ length: 7 }, (_, i) => (0, exports.addDays)(first, i));
+};
+exports.weekDays = weekDays;
+/** Whole weeks that cover the month of `d`, padded with the neighbouring months' days. */
+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 = (0, exports.startOfWeek)(first, weekStartsOn);
+    const weekCount = Math.ceil(((0, exports.diffDays)(gridStart, last) + 1) / 7);
+    return Array.from({ length: weekCount }, (_, w) => Array.from({ length: 7 }, (_, i) => (0, exports.addDays)(gridStart, w * 7 + i)));
+};
+exports.monthWeeks = monthWeeks;
+const visibleWeeks = (view, d, weekStartsOn) => {
+    if (view === "month")
+        return (0, exports.monthWeeks)(d, weekStartsOn);
+    if (view === "week")
+        return [(0, exports.weekDays)(d, weekStartsOn)];
+    return [[(0, exports.startOfDay)(d)]];
+};
+exports.visibleWeeks = visibleWeeks;
+const shiftAnchor = (view, d, direction) => {
+    if (view === "month")
+        return (0, exports.addMonths)(d, direction);
+    return (0, exports.addDays)(d, view === "week" ? 7 * direction : direction);
+};
+exports.shiftAnchor = shiftAnchor;
+const eventRange = (e) => {
+    const start = (0, exports.startOfDay)(e.start);
+    const end = e.end ? (0, exports.startOfDay)(e.end) : start;
+    return end < start ? { start: end, end: start } : { start, end };
+};
+exports.eventRange = eventRange;
+const eventsOnDay = (events, day) => {
+    const d = (0, exports.startOfDay)(day);
+    return events.filter((e) => {
+        const r = (0, exports.eventRange)(e);
+        return r.start <= d && d <= r.end;
+    });
+};
+exports.eventsOnDay = eventsOnDay;
+/** Lays events out in lanes across one week row; lanes past `maxLanes` are counted per column, not drawn. */
+const layoutWeek = (days, events, maxLanes) => {
+    const first = days[0];
+    const lastCol = days.length - 1;
+    const candidates = events
+        .map((event) => {
+        const r = (0, exports.eventRange)(event);
+        const rawStart = (0, exports.diffDays)(first, r.start);
+        const rawEnd = (0, exports.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 };
+};
+exports.layoutWeek = layoutWeek;
+exports.NAV_KEYS = [
+    "ArrowLeft",
+    "ArrowRight",
+    "ArrowUp",
+    "ArrowDown",
+    "Home",
+    "End",
+    "PageUp",
+    "PageDown",
+];
+const isNavKey = (key) => exports.NAV_KEYS.includes(key);
+exports.isNavKey = isNavKey;
+const moveFocus = (view, d, key, weekStartsOn) => {
+    const columns = view === "day" ? 1 : 7;
+    switch (key) {
+        case "ArrowLeft":
+            return (0, exports.addDays)(d, -1);
+        case "ArrowRight":
+            return (0, exports.addDays)(d, 1);
+        case "ArrowUp":
+            return (0, exports.addDays)(d, -columns);
+        case "ArrowDown":
+            return (0, exports.addDays)(d, columns);
+        case "Home":
+            return view === "day" ? d : (0, exports.startOfWeek)(d, weekStartsOn);
+        case "End":
+            return view === "day" ? d : (0, exports.addDays)((0, exports.startOfWeek)(d, weekStartsOn), 6);
+        case "PageUp":
+            return (0, exports.shiftAnchor)(view, d, -1);
+        default:
+            return (0, exports.shiftAnchor)(view, d, 1);
+    }
+};
+exports.moveFocus = moveFocus;
+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" };
+const weekdayLabels = (locale, weekStartsOn, style = "short") => {
+    const fmt = dateFormatter(locale, { weekday: style });
+    return Array.from({ length: 7 }, (_, i) => fmt.format(probe((i + weekStartsOn) % 7)));
+};
+exports.weekdayLabels = weekdayLabels;
+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 = (0, exports.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])}`;
+};
+exports.formatTitle = formatTitle;
+const formatFullDate = (d, locale) => dateFormatter(locale, FULL_DATE).format(d);
+exports.formatFullDate = formatFullDate;

package/dist/Components/Card/Card.d.ts

@@ -1,3 +1,21 @@
-import React from "react";
-import { CardProps } from "./CardProps";
-export default function Card({ key, maxW, align, variant, direction, justify, children, size, color, overflow, sx, }: CardProps): React.JSX.Element;
+import { CardPadding } from "./CardProps";
+/** Themed card; `header` and `footer` render outside the body, `padding` sets density. */
+declare const Card: import("react").ForwardRefExoticComponent<Omit<import("@chakra-ui/react").CardProps, "color" | "colorScheme" | "direction" | "padding" | "size" | "justify" | "children" | "variant" | "align"> & {
+    dividercolor?: "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "whiteAlpha" | "blackAlpha";
+    dividersize?: string;
+    dividervariant?: "solid" | "dashed";
+} & {
+    header?: React.ReactNode;
+    footer?: React.ReactNode;
+    children: React.ReactNode;
+    variant?: "elevated" | "outline" | "filled" | "unstyled";
+    size?: "sm" | "md" | "lg";
+    colorScheme?: "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "whiteAlpha" | "blackAlpha";
+    color?: "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "whiteAlpha" | "blackAlpha";
+    direction?: import("@chakra-ui/react").ResponsiveValue<"row" | "column" | "row-reverse" | "column-reverse">;
+    align?: import("@chakra-ui/react").CardBodyProps["alignItems"];
+    justify?: import("@chakra-ui/react").CardBodyProps["justifyContent"];
+    padding?: CardPadding;
+    bodyProps?: import("@chakra-ui/react").CardBodyProps;
+} & import("react").RefAttributes<HTMLDivElement>>;
+export default Card;

package/dist/Components/Card/Card.js

@@ -1,12 +1,24 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = require("@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 = (0, react_1.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 ((0, jsx_runtime_1.jsxs)(react_2.Card, { ref: ref, colorScheme: colorScheme !== null && colorScheme !== void 0 ? colorScheme : color, ...cardProps, sx: sx, children: [header && ((0, jsx_runtime_1.jsx)(react_2.CardHeader, { sx: padding === "none" ? { "--card-padding": HEADER_PADDING_WHEN_FLUSH } : undefined, children: header })), (0, jsx_runtime_1.jsx)(react_2.CardBody, { display: "flex", flexDirection: direction, alignItems: align, justifyContent: justify, ...bodyProps, children: children }), footer && (0, jsx_runtime_1.jsx)(react_2.CardFooter, { children: footer })] }));
+});
 exports.default = Card;
-var react_1 = __importDefault(require("react"));
-var react_2 = require("@chakra-ui/react");
-function Card(_a) {
-    var key = _a.key, maxW = _a.maxW, align = _a.align, variant = _a.variant, direction = _a.direction, justify = _a.justify, children = _a.children, size = _a.size, color = _a.color, overflow = _a.overflow, sx = _a.sx;
-    return (react_1.default.createElement(react_2.Card, { key: key, maxW: maxW, align: align, variant: variant, direction: direction, justify: justify, size: size, overflow: overflow, colorScheme: color, p: 4, sx: sx }, children));
-}

package/dist/Components/Card/CardProps.d.ts

@@ -1,13 +1,41 @@
-import { CardProps as ChakraCardProps } from "@chakra-ui/react";
-export type CardProps = Pick<ChakraCardProps, "direction" | "maxW" | "align" | "justify" | "overflow" | "sx"> & {
+import { CardProps as ChakraCardProps, CardBodyProps, ResponsiveValue } from "@chakra-ui/react";
+type CardColorScheme = "whiteAlpha" | "blackAlpha" | "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink";
+/** @deprecated Never rendered — Card draws no divider; parts are separated by theme padding. */
+type DeadDividerProps = {
+    /** Ignored; Card draws no divider. */
+    dividercolor?: CardColorScheme;
+    /** Ignored; Card draws no divider. */
+    dividersize?: string;
+    /** Ignored; Card draws no divider. */
+    dividervariant?: "solid" | "dashed";
+};
+/** Padding steps: "none" flush, "2xs" 0.375rem, "xs" 0.75rem all round, "sm" / "md" / "lg" match `size`. */
+export type CardPadding = "none" | "2xs" | "xs" | "sm" | "md" | "lg";
+/** Themed card surface (outline rule or borderless elevated) with optional header/footer slots; direction/align/justify apply to the body. */
+export type CardProps = Omit<ChakraCardProps, "children" | "variant" | "size" | "color" | "colorScheme" | "direction" | "align" | "justify" | "padding"> & DeadDividerProps & {
+    /** Rendered in CardHeader (semibold header ink) only when truthy. */
     header?: React.ReactNode;
+    /** Rendered in CardFooter only when truthy. */
     footer?: React.ReactNode;
+    /** Body content, rendered inside the flex body wrapper. */
     children: React.ReactNode;
+    /** "elevated" (default): borderless, lifted by `shadows.card`. "outline": 1px rule, no shadow, for tables and row lists. */
     variant?: "elevated" | "outline" | "filled" | "unstyled";
+    /** Padding scale for header/body/footer; defaults to "md". */
     size?: "sm" | "md" | "lg";
-    color?: "whiteAlpha" | "blackAlpha" | "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink";
-    key?: string;
-    dividercolor?: "whiteAlpha" | "blackAlpha" | "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink";
-    dividersize?: string;
-    dividervariant?: "solid" | "dashed";
+    /** @deprecated No visual effect — neither Chakra's nor this theme's Card styles read a colour scheme. */
+    colorScheme?: CardColorScheme;
+    /** @deprecated Alias of the no-op `colorScheme`, and not a CSS color. */
+    color?: CardColorScheme;
+    /** Body flex direction; defaults to "column". */
+    direction?: ResponsiveValue<"row" | "column" | "row-reverse" | "column-reverse">;
+    /** Body alignItems; `bodyProps` wins if it sets the same thing. */
+    align?: CardBodyProps["alignItems"];
+    /** Body justifyContent; `bodyProps` wins if it sets the same thing. */
+    justify?: CardBodyProps["justifyContent"];
+    /** Overrides `size`'s padding for header, body and footer; "none" is flush (a header keeps "xs"), "2xs" is 6px. */
+    padding?: CardPadding;
+    /** Props for the body wrapper, e.g. `p={0}` for edge-to-edge media. */
+    bodyProps?: CardBodyProps;
 };
+export {};

package/dist/Components/Card/PaymentCard/PaymentCard.d.ts

@@ -1,4 +1,4 @@
-import React from "react";
 import { PaymentCardProps } from "./PaymentCardProps";
-declare const PaymentCard: ({ plan, isActive, isNextUpgrade, billingCycle, onSelect, onHover, buttonLoading, isLoading, }: PaymentCardProps) => React.JSX.Element;
+/** Subscription plan card with price, feature list and a call-to-action; badge and accent follow active, upgrade and popular state. */
+declare const PaymentCard: ({ plan, isActive, isNextUpgrade, billingCycle, onSelect, onHover, buttonLoading, isLoading, isRenewal, }: PaymentCardProps) => import("react/jsx-runtime").JSX.Element;
 export default PaymentCard;

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

@@ -1,101 +1,85 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importDefault(require("react"));
-var react_2 = require("@chakra-ui/react");
-var lucide_react_1 = require("lucide-react");
-var useCustomTheme_1 = require("../../../Theme/useCustomTheme");
-var Button_1 = __importDefault(require("../../Button/Button"));
-var getCardStyles = function (isActive, isNextUpgrade, popular, theme) {
-    if (isActive) {
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@chakra-ui/react");
+const lucide_react_1 = require("lucide-react");
+const useCustomTheme_1 = require("../../../Theme/useCustomTheme");
+const filledSurface_1 = require("../../../Theme/tokens/builders/filledSurface");
+const accentText_1 = require("../../../Theme/tokens/builders/accentText");
+const motion_1 = require("../../../Theme/tokens/primitives/motion");
+const borderWidths_1 = require("../../../Theme/tokens/primitives/borderWidths");
+const motion_2 = require("../../../Theme/chakra/motion");
+const Button_1 = __importDefault(require("../../Button/Button"));
+const getCardStyles = (isActive, isNextUpgrade, popular, theme) => {
+    const withOnButtonColor = (styles) => {
+        const scale = theme.colors[styles.buttonScale];
+        const solid = (0, filledSurface_1.resolveFilledSurface)(scale, theme.colors);
         return {
+            ...styles,
+            buttonColor: solid.fill,
+            onButtonColor: solid.color,
+            iconInk: (0, accentText_1.accentTextOnCanvas)(scale, styles.buttonColor50),
+        };
+    };
+    if (isActive) {
+        return withOnButtonColor({
             badgeText: "Active Plan",
-            badgeColor: "0.125rem solid ".concat(theme.colors.green[500]),
+            badgeColor: `${borderWidths_1.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 {
+        return withOnButtonColor({
             badgeText: "Upgrade Your Plan",
-            badgeColor: "0.125rem solid ".concat(theme.colors.primary[500]),
+            badgeColor: `${borderWidths_1.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 {
+        return withOnButtonColor({
             badgeText: "Most Popular",
-            badgeColor: "0.125rem solid ".concat(theme.colors.primary[500]),
+            badgeColor: `${borderWidths_1.BORDER_WIDTHS.hairline} solid ${theme.colors.primary[500]}`,
             buttonColor: theme.colors.primary[500],
+            buttonScale: "primary",
             buttonColor50: theme.colors.primary[50],
-        };
+            colorScheme: "primary",
+        });
     }
-    return {
+    return withOnButtonColor({
         badgeText: "",
-        badgeColor: "",
+        badgeColor: `${borderWidths_1.BORDER_WIDTHS.hairline} solid ${theme.colors.boxborder[200]}`,
         buttonColor: theme.colors.primary[500],
+        buttonScale: "primary",
         buttonColor50: theme.colors.primary[50],
-    };
+        colorScheme: "primary",
+    });
 };
-var PaymentCard = function (_a) {
-    var plan = _a.plan, _b = _a.isActive, isActive = _b === void 0 ? false : _b, _c = _a.isNextUpgrade, isNextUpgrade = _c === void 0 ? false : _c, billingCycle = _a.billingCycle, onSelect = _a.onSelect, onHover = _a.onHover, buttonLoading = _a.buttonLoading, _d = _a.isLoading, isLoading = _d === void 0 ? false : _d;
-    var theme = (0, useCustomTheme_1.useCustomTheme)();
-    var _e = getCardStyles(isActive, isNextUpgrade, !!plan.popular, theme), badgeText = _e.badgeText, badgeColor = _e.badgeColor, buttonColor = _e.buttonColor, buttonColor50 = _e.buttonColor50;
-    var variantStyles = plan.buttonVariant === "outline"
-        ? {
-            borderColor: buttonColor,
-            color: buttonColor,
-            _hover: { bg: buttonColor50 },
-        }
+/** 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 = (0, useCustomTheme_1.useCustomTheme)();
+    const { badgeText, badgeColor, buttonColor, buttonColor50, onButtonColor, iconInk, colorScheme } = getCardStyles(isActive, isNextUpgrade, !!plan.popular, theme);
+    const variantStyles = plan.buttonVariant === "outline"
+        ? {}
         : {
             bg: buttonColor,
-            color: theme.colors.white,
+            color: onButtonColor,
             _hover: { bg: buttonColor },
         };
-    return (react_1.default.createElement(react_2.GridItem, null,
-        react_1.default.createElement(react_2.Box, { bg: theme.colors.white, minH: "100%", borderRadius: "lg", p: 8, borderWidth: "0.063rem", borderColor: theme.colors.gray[200], boxShadow: "md", position: "relative", transition: "all 0.2s", transform: plan.popular ? "scale(1.03)" : "none", border: badgeColor, _hover: { transform: "translateY(-0.313rem)", shadow: "xl" } }, isLoading ? (
-        // 🔹 Skeleton Loader Layout
-        react_1.default.createElement(react_1.default.Fragment, null,
-            react_1.default.createElement(react_2.Skeleton, { height: "24px", width: "120px", mx: "auto", mb: 4 }),
-            react_1.default.createElement(react_2.Skeleton, { height: "50px", width: "50px", borderRadius: "lg", mx: "auto", mb: 4 }),
-            react_1.default.createElement(react_2.Skeleton, { height: "24px", width: "100px", mx: "auto", mb: 3 }),
-            react_1.default.createElement(react_2.Skeleton, { height: "30px", width: "160px", mx: "auto", mb: 4 }),
-            react_1.default.createElement(react_2.SkeletonText, { noOfLines: 2, spacing: "2" }),
-            react_1.default.createElement(react_2.Skeleton, { height: "44px", width: "full", mt: 6, borderRadius: "md" }),
-            react_1.default.createElement(react_2.VStack, { align: "start", spacing: 3, mt: 6 }, [1, 2, 3, 4].map(function (i) { return (react_1.default.createElement(react_2.Skeleton, { key: i, height: "16px", width: "80%" })); })))) : (
-        // 🔹 Actual Card Content
-        react_1.default.createElement(react_1.default.Fragment, null,
-            badgeText && (react_1.default.createElement(react_2.Badge, { position: "absolute", top: "-0.75rem", left: "50%", transform: "translateX(-50%)", bg: buttonColor, color: theme.colors.white, fontSize: "sm", px: 4, py: 1, borderRadius: "full" }, badgeText)),
-            react_1.default.createElement(react_2.Box, { textAlign: "center", mb: 6 },
-                react_1.default.createElement(react_2.Flex, { justify: "center", align: "center", w: "3.125rem", h: "3.125rem", borderRadius: "lg", bg: buttonColor50, color: buttonColor, mx: "auto", mb: 4 }, plan.icon),
-                react_1.default.createElement(react_2.Heading, { as: "h3", size: "lg", mb: 4, color: theme.colors.gray[800] }, plan.name),
-                (plan.yearlyPrice !== 0 || plan.monthlyPrice !== 0) && (react_1.default.createElement(react_2.Heading, { as: "h4", size: "2xl", mb: 1, color: theme.colors.gray[800], display: "flex", justifyContent: "center" },
-                    react_1.default.createElement(react_2.Box, { fontSize: "1.5rem" }, "\u20B9"),
-                    billingCycle === "yearly"
-                        ? plan.yearlyPrice
-                        : plan.monthlyPrice,
-                    react_1.default.createElement(react_2.Box, { display: "flex", flexDirection: "column", justifyContent: "end", ml: 1 },
-                        react_1.default.createElement(react_2.Text, { fontSize: "0.9rem", fontWeight: "normal", color: theme.colors.gray[600] }, plan.billing),
-                        react_1.default.createElement(react_2.Text, { fontSize: "0.7rem", fontWeight: "normal", color: theme.colors.gray[600] }, plan.tax)))),
-                plan.priceDescription && (react_1.default.createElement(react_2.Text, { color: theme.colors.green[800], mt: 2 }, plan === null || plan === void 0 ? void 0 : plan.priceDescription)),
-                react_1.default.createElement(react_2.Text, { color: theme.colors.gray[600], mt: 2 }, plan.description)),
-            !isActive && plan.buttonText && (react_1.default.createElement(Button_1.default, __assign({ isLoading: plan.plan_id === buttonLoading, loadingText: plan.buttonLoadingText, width: "full", variant: plan.buttonVariant, size: "lg", onClick: function () { return onSelect === null || onSelect === void 0 ? void 0 : onSelect(plan.plan_id); }, onMouseEnter: function () { return onHover === null || onHover === void 0 ? void 0 : onHover(plan.plan_id, "button", true); }, onMouseLeave: function () { return onHover === null || onHover === void 0 ? void 0 : onHover(plan.plan_id, "button", false); } }, variantStyles), plan.buttonText)),
-            react_1.default.createElement(react_2.VStack, { align: "start", spacing: 3, mt: 6 }, plan.features.map(function (feature, i) { return (react_1.default.createElement(react_2.Flex, { key: i, align: "center" },
-                react_1.default.createElement(react_2.Icon, { as: lucide_react_1.Check, color: theme.colors.green[500], mr: 2 }),
-                react_1.default.createElement(react_2.Text, { fontSize: "sm" }, feature))); })))))));
+    return ((0, jsx_runtime_1.jsx)(react_1.GridItem, { children: (0, jsx_runtime_1.jsx)(react_1.Box, { bg: theme.colors.background[50], minH: "100%", borderRadius: "xl", p: 8, position: "relative", transition: (0, motion_1.transitionFor)(["transform", "box-shadow"], "base"), transform: plan.popular ? "scale(1.03)" : "none", border: badgeColor, _hover: { transform: "translateY(-0.313rem)", shadow: "lg" }, sx: (0, motion_2.reducedMotionSx)(), children: isLoading ? (
+            // 🔹 Skeleton Loader Layout
+            (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_1.Skeleton, { height: "24px", width: "120px", mx: "auto", mb: 4 }), (0, jsx_runtime_1.jsx)(react_1.Skeleton, { height: "50px", width: "50px", borderRadius: "lg", mx: "auto", mb: 4 }), (0, jsx_runtime_1.jsx)(react_1.Skeleton, { height: "24px", width: "100px", mx: "auto", mb: 3 }), (0, jsx_runtime_1.jsx)(react_1.Skeleton, { height: "30px", width: "160px", mx: "auto", mb: 4 }), (0, jsx_runtime_1.jsx)(react_1.SkeletonText, { noOfLines: 2, spacing: "2" }), (0, jsx_runtime_1.jsx)(react_1.Skeleton, { height: "44px", width: "full", mt: 6, borderRadius: "lg" }), (0, jsx_runtime_1.jsx)(react_1.VStack, { align: "start", spacing: 3, mt: 6, children: [1, 2, 3, 4].map((i) => ((0, jsx_runtime_1.jsx)(react_1.Skeleton, { height: "16px", width: "80%" }, i))) })] })) : (
+            // 🔹 Actual Card Content
+            (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [badgeText && ((0, jsx_runtime_1.jsx)(react_1.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 })), (0, jsx_runtime_1.jsxs)(react_1.Box, { textAlign: "center", mb: 6, children: [(0, jsx_runtime_1.jsx)(react_1.Flex, { justify: "center", align: "center", w: "3.125rem", h: "3.125rem", borderRadius: "lg", bg: buttonColor50, color: iconInk, mx: "auto", mb: 4, children: plan.icon }), (0, jsx_runtime_1.jsx)(react_1.Heading, { as: "h3", size: "lg", mb: 4, color: theme.colors.header[900], children: plan.name }), (plan.yearlyPrice !== 0 || plan.monthlyPrice !== 0) && ((0, jsx_runtime_1.jsxs)(react_1.Heading, { as: "h4", size: "2xl", mb: 1, color: theme.colors.header[900], display: "flex", justifyContent: "center", children: [(0, jsx_runtime_1.jsx)(react_1.Box, { fontSize: "2xl", children: "\u20B9" }), billingCycle === "yearly"
+                                        ? plan.yearlyPrice
+                                        : plan.monthlyPrice, (0, jsx_runtime_1.jsxs)(react_1.Box, { display: "flex", flexDirection: "column", justifyContent: "end", ml: 1, children: [(0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "0.9rem", fontWeight: "normal", color: theme.colors.textMuted, children: plan.billing }), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "0.7rem", fontWeight: "normal", color: theme.colors.textMuted, children: plan.tax })] })] })), plan.priceDescription && ((0, jsx_runtime_1.jsx)(react_1.Text, { color: theme.colors.semanticText.success, mt: 2, children: plan === null || plan === void 0 ? void 0 : plan.priceDescription })), (0, jsx_runtime_1.jsx)(react_1.Text, { color: theme.colors.textMuted, mt: 2, children: plan.description })] }), ((!isActive && plan.buttonText) || isRenewal) && ((0, jsx_runtime_1.jsx)(Button_1.default, { 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 })), (0, jsx_runtime_1.jsx)(react_1.VStack, { align: "start", spacing: 3, mt: 6, children: plan.features.map((feature, i) => ((0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", children: [(0, jsx_runtime_1.jsx)(react_1.Icon, { as: lucide_react_1.Check, color: theme.colors.semanticText.success, mr: 2 }), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "sm", children: feature })] }, i))) })] })) }) }));
 };
 exports.default = PaymentCard;

package/dist/Components/Card/PaymentCard/PaymentCardProps.d.ts

@@ -1,26 +1,52 @@
+/** Subscription/pricing-tier card — takes a `Plan` (billing cycle, features), not a physical product like ProductCard's `options`. */
 export type PaymentCardProps = {
+    /** The plan to render. */
     plan: Plan;
+    /** true hides the CTA button unless `isRenewal` is also true, no matter what `plan.buttonText` says. */
     isActive?: boolean;
+    /** Adds an "Upgrade Your Plan" badge and primary outline; ignored when `isActive` is set. */
     isNextUpgrade?: boolean;
+    /** Picks which of `plan.monthlyPrice` / `plan.yearlyPrice` is shown. */
     billingCycle: "monthly" | "yearly";
+    /** Called with `plan.plan_id` when the CTA button is clicked. */
     onSelect?: (planId: number) => void;
+    /** `type` is always "button" in practice — PaymentCard never wires hover on the outer card, only the CTA button. */
     onHover?: (planId: number, type: "card" | "button", state: boolean) => void;
+    /** The plan_id whose button should spin, not a boolean — matched via `===` against each plan's plan_id. */
     buttonLoading?: number;
+    /** Replaces the card content with skeletons. */
     isLoading?: boolean;
+    /** Keeps the CTA button visible on the active plan. */
+    isRenewal?: boolean;
 };
+/** Plan data rendered by PaymentCard — `billing`/`tax` are pre-formatted display strings shown under the price, not derived from monthlyPrice/yearlyPrice. */
 export type Plan = {
+    /** Identifier passed to `onSelect` / `onHover` and matched against `buttonLoading`. */
     plan_id: number;
+    /** Plan title. */
     name: string;
+    /** Muted line under the price. */
     description: string;
+    /** Price in rupees shown for the monthly cycle; the price block is hidden when both prices are 0. */
     monthlyPrice: number;
+    /** Price in rupees shown for the yearly cycle; the price block is hidden when both prices are 0. */
     yearlyPrice: number;
+    /** Display string beside the price, e.g. "/month". */
     billing: string;
+    /** Display string under `billing`, e.g. "+ GST". */
     tax: string;
+    /** Check-marked feature list, one row per entry. */
     features: string[];
+    /** Icon rendered in the tinted tile above the name. */
     icon: React.ReactNode;
+    /** CTA label; with no text the button is hidden unless `isRenewal`. */
     buttonText: string;
+    /** "link" still gets the same filled bg/color override as "solid" — only "outline" is excluded from it. */
     buttonVariant: "solid" | "outline" | "link";
+    /** Adds a "Most Popular" badge and scales the card up slightly; lower priority than active and upgrade badges. */
     popular?: boolean;
+    /** CTA text while this plan's button is loading. */
     buttonLoadingText?: string;
+    /** Success-coloured line under the price, e.g. a discount note. */
     priceDescription?: string;
 };

package/dist/Components/CartItem/CartItem.d.ts

@@ -0,0 +1,4 @@
+import type { CartItemProps } from "./CartItemProps";
+/** One bag line: tonal thumbnail, linked title, chosen options, line total with struck MRP, stepper and calm text actions. */
+declare const CartItem: ({ title, brand, href, onTitleClick, image, imageAlt, axes, selection, optionsSummary, price, mrp, quantity, onQuantityChange, minQuantity, maxQuantity, onRemove, onMoveToWishlist, stock, stockCount, stockMessage, deliveryBy, unavailable, layout, isLoading, currency, locale, labels, "data-testid": testId, }: CartItemProps) => import("react/jsx-runtime").JSX.Element;
+export default CartItem;

package/dist/Components/CartItem/CartItem.js

@@ -0,0 +1,61 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@chakra-ui/react");
+const lucide_react_1 = require("lucide-react");
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
+const motion_1 = require("../../Theme/tokens/primitives/motion");
+const typography_1 = require("../../Theme/tokens/primitives/typography");
+const motion_2 = require("../../Theme/chakra/motion");
+const price_1 = require("../../Utils/price");
+const Button_1 = __importDefault(require("../Button/Button"));
+const PriceBlock_1 = __importDefault(require("../PriceBlock/PriceBlock"));
+const QuantityStepper_1 = __importDefault(require("../QuantityStepper/QuantityStepper"));
+const Skeletons_1 = __importDefault(require("../Skeletons/Skeletons"));
+const StockStatus_1 = __importDefault(require("../StockStatus/StockStatus"));
+const cartItemOptions_1 = require("./cartItemOptions");
+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 ((0, jsx_runtime_1.jsxs)(react_1.Flex, { gap: 3, align: "flex-start", "aria-busy": "true", "data-testid": "cart-item-skeleton", children: [(0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "skeleton", height: thumb.h, width: thumb.w, borderRadius: thumb.radius }), (0, jsx_runtime_1.jsxs)(react_1.Flex, { direction: "column", gap: 2, flex: 1, minW: 0, children: [(0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "skeleton", height: 3, width: "35%" }), (0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "skeleton", height: 4, width: "80%" }), (0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "skeleton", height: 3, width: "45%" }), layout === "row" && (0, jsx_runtime_1.jsx)(Skeletons_1.default, { 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 } = (0, useCustomTheme_1.useCustomTheme)();
+    const copy = { ...DEFAULT_LABELS, ...labels };
+    const compact = layout === "compact";
+    const thumb = THUMB[layout];
+    const fmt = { currency, locale };
+    if (isLoading)
+        return (0, jsx_runtime_1.jsx)(CartItemSkeleton, { layout: layout });
+    const summary = optionsSummary !== null && optionsSummary !== void 0 ? optionsSummary : (0, cartItemOptions_1.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 = ((0, jsx_runtime_1.jsx)(QuantityStepper_1.default, { size: "sm", variant: "soft", value: quantity, min: minQuantity, max: maxQuantity, removable: !!onRemove, onRemove: onRemove, onValueChange: onQuantityChange, itemLabel: title }));
+    return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { gap: 3, align: "flex-start", "data-testid": testId, "data-unavailable": unavailable || undefined, children: [(0, jsx_runtime_1.jsx)(react_1.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 && (0, jsx_runtime_1.jsx)(react_1.Box, { as: "img", src: image, alt: imageAlt, w: "100%", h: "100%", objectFit: "cover", display: "block" }) }), (0, jsx_runtime_1.jsxs)(react_1.Flex, { direction: "column", flex: 1, minW: 0, gap: 1.5, children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { direction: "column", gap: 0.5, minW: 0, children: [brand && ((0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", fontSize: "xs", fontWeight: 600, lineHeight: 1.4, color: colors.textMuted, noOfLines: 1, children: brand })), (0, jsx_runtime_1.jsx)(react_1.Text, { ...titleProps, display: "block", textAlign: "left", fontSize: "sm", fontWeight: 600, lineHeight: 1.4, color: titleInk, noOfLines: 2, borderRadius: "sm", cursor: linked ? "pointer" : undefined, transition: (0, motion_1.transitionFor)(["color"]), _hover: linked ? { textDecoration: "underline" } : undefined, sx: { ...(0, focusRing_styles_1.focusVisibleStyles)(colors), ...(0, motion_2.reducedMotionSx)() }, children: title }), summary && ((0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", fontSize: "xs", lineHeight: 1.4, color: colors.textMuted, children: summary }))] }), unavailable ? ((0, jsx_runtime_1.jsxs)(react_1.Flex, { direction: "column", gap: 0.5, children: [(0, jsx_runtime_1.jsx)(StockStatus_1.default, { status: "out-of-stock", message: copy.outOfStock, size: "sm" }), (0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", fontSize: "xs", color: colors.textMuted, children: copy.notIncluded })] })) : ((0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "flex-end", justify: "space-between", gap: 3, wrap: "wrap", children: [compact ? ((0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", fontSize: "xs", color: colors.textMuted, sx: typography_1.NUMERIC_TEXT, children: copy.quantity(quantity) })) : (stepper), (0, jsx_runtime_1.jsx)(react_1.Box, { ml: "auto", children: (0, jsx_runtime_1.jsx)(PriceBlock_1.default, { size: compact ? "sm" : "md", align: "end", price: lineTotal, mrp: lineMrp, taxNote: quantity > 1 ? copy.each((0, price_1.formatPrice)(price, fmt)) : undefined, ...fmt }) })] })), !unavailable && !compact && stock && stock !== "in-stock" && ((0, jsx_runtime_1.jsx)(StockStatus_1.default, { status: stock, count: stockCount, message: stockMessage, size: "sm" })), !unavailable && deliveryBy && ((0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: 1.5, color: colors.textMuted, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Truck, { size: 13, "aria-hidden": true }), (0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", fontSize: "xs", lineHeight: 1.4, children: copy.delivery(deliveryBy) })] })), !compact && (onRemove || (onMoveToWishlist && !unavailable)) && ((0, jsx_runtime_1.jsxs)(react_1.Flex, { gap: 1, ml: -3, mt: 0.5, children: [onMoveToWishlist && !unavailable && ((0, jsx_runtime_1.jsx)(Button_1.default, { variant: "ghost", colorScheme: "gray", size: "sm", onClick: onMoveToWishlist, "aria-label": `${copy.moveToWishlist}: ${title}`, children: copy.moveToWishlist })), onRemove && ((0, jsx_runtime_1.jsx)(Button_1.default, { variant: "ghost", colorScheme: "gray", size: "sm", onClick: onRemove, "aria-label": `${copy.remove}: ${title}`, children: copy.remove }))] }))] })] }));
+};
+exports.default = CartItem;