pixelize-design-library 2.4.2-beta.66 → 2.4.2-beta.68

package/dist/Components/Avatar/AvatarProps.d.ts

@@ -5,7 +5,7 @@ export type AvatarSize = ControlSize | "2xs" | "xl";
 export type AvatarStatus = "online" | "away" | "busy" | "offline";
 /** Image with graceful initials fallback, a deterministic per-name fill, and an optional presence dot. */
 export interface AvatarProps {
-    /** Used for initials, alt text, the deterministic fill color, and the status label prefix. */
+    /** Used for initials, image alt text, the deterministic fill color, and the default `aria-label`. */
     name: string;
     /** Image URL. Falls back to initials on a missing src or a failed load. */
     src?: string;
@@ -13,7 +13,7 @@ export interface AvatarProps {
     size?: AvatarSize;
     /** Presence dot in the bottom-right corner; omitted entirely when unset. */
     status?: AvatarStatus;
-    /** Overrides the auto-generated `aria-label` (defaults to `name`). */
+    /** Overrides the initials fallback's `aria-label` (defaults to `name`); no effect while the image shows, where `alt` is `name`. */
     ariaLabel?: string;
     /** Replaces the built-in two-letter initials derivation. */
     getInitials?: (name: string) => string;

package/dist/Components/Avatar/avatarColorway.d.ts

@@ -2,6 +2,7 @@ import type { PaletteProps } from "../../Theme/tokens/types";
 export declare const AVATAR_SCALE_KEYS: readonly ["red", "orange", "yellow", "green", "teal", "blue", "cyan", "purple", "pink"];
 export type AvatarScaleKey = (typeof AVATAR_SCALE_KEYS)[number];
 export declare const avatarScaleKeyFor: (seed: string) => AvatarScaleKey;
+/** Avatar fill and its contrast-resolved text colour (`bg` is the fill, `color` the ink on it). */
 export type AvatarColorway = {
     bg: string;
     color: string;

package/dist/Components/BagBar/BagBarProps.d.ts

@@ -5,12 +5,16 @@ export type BagBarPosition = "static" | "bottom";
 export interface BagBarLabels {
     /** Accessible name of the bar landmark. */
     region: string;
+    /** Label next to the amount; default "Total". */
     total: string;
+    /** Text of the price-details link; default "View price details". */
     viewDetails: string;
+    /** Primary action text used when `ctaLabel` is not set; default "Place order". */
     cta: string;
 }
 /** Mobile bottom bar: the payable total with a price-details link on the left and the one primary action on the right. */
 export interface BagBarProps extends PriceFormat {
+    /** Payable amount in major currency units, formatted with `currency` and `locale`. */
     total: number;
     /** Muted line beside the total, e.g. "Inclusive of all taxes". */
     note?: string;
@@ -18,13 +22,17 @@ export interface BagBarProps extends PriceFormat {
     onViewDetails?: () => void;
     /** Primary action label, e.g. "Place order" or "Checkout". */
     ctaLabel?: string;
+    /** Fires when the primary action is pressed. */
     onCta?: () => void;
+    /** Disables the primary action; default false. */
     ctaDisabled?: boolean;
     /** Spinner on the primary action while the order is being placed. */
     ctaLoading?: boolean;
+    /** "static" flows in the page, "bottom" sticks to the container's bottom edge; default "static". */
     position?: BagBarPosition;
     /** Stacking order when `position` is "bottom"; above page content, below dialogs by default. */
     zIndex?: number;
+    /** Per-string copy overrides; unset keys keep the English defaults. */
     labels?: Partial<BagBarLabels>;
     "data-testid"?: string;
 }

package/dist/Components/BulkSelectionBar/BulkSelectionBar.d.ts

@@ -1,3 +1,4 @@
 import type { BulkSelectionBarProps } from "./BulkSelectionBarProps";
+/** Action bar for table row selection: count, shared facts, bulk action buttons and a clear button; renders nothing at zero. */
 declare const BulkSelectionBar: ({ selectedCount, facts, actions, onClearSelection, clearLabel, countLabel, placement, "aria-label": ariaLabel, "data-testid": testId, }: BulkSelectionBarProps) => import("react/jsx-runtime").JSX.Element | null;
 export default BulkSelectionBar;

package/dist/Components/BulkSelectionBar/BulkSelectionBar.js

@@ -21,6 +21,7 @@ const SCHEME_BY_TONE = {
     danger: "red",
 };
 const TOUCH_SX = { "@media (pointer: coarse)": { minHeight: "44px", minWidth: "44px" } };
+/** Action bar for table row selection: count, shared facts, bulk action buttons and a clear button; renders nothing at zero. */
 const BulkSelectionBar = ({ selectedCount, facts, actions, onClearSelection, clearLabel = "Clear selection", countLabel, placement = "sticky", "aria-label": ariaLabel = "Selection actions", "data-testid": testId = "bulk-selection-bar", }) => {
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
     const isActive = selectedCount > 0;

package/dist/Components/BulkSelectionBar/BulkSelectionBarProps.d.ts

@@ -5,12 +5,15 @@ export type BulkActionTone = "default" | "primary" | "danger";
 export interface BulkAction {
     /** Stable key; also the suffix of the button's `data-testid` (`bulk-action-<id>`). */
     id: string;
+    /** Button text; also the loading text while `isLoading`. */
     label: string;
+    /** Called when the button is pressed. */
     onClick: () => void;
     /** Defaults to "default". */
     tone?: BulkActionTone;
     /** Icon component (e.g. a lucide icon); rendered at 16px, decorative. */
     icon?: ElementType;
+    /** Disables the button. */
     isDisabled?: boolean;
     /** Spinner on this action; the label stays as the loading text. */
     isLoading?: boolean;
@@ -21,7 +24,9 @@ export interface BulkSelectionBarProps {
     selectedCount: number;
     /** Short claims true of the whole selection, e.g. ["all leave", "no clashes"]; joined after the count with " · ". */
     facts?: string[];
+    /** Buttons shown after the count, in array order, before the clear button. */
     actions: BulkAction[];
+    /** Called when the clear button is pressed. */
     onClearSelection: () => void;
     /** Clear button text; defaults to "Clear selection". */
     clearLabel?: string;
@@ -31,5 +36,6 @@ export interface BulkSelectionBarProps {
     placement?: "inline" | "sticky";
     /** Accessible name of the region; defaults to "Selection actions". */
     "aria-label"?: string;
+    /** Test id on the bar; defaults to "bulk-selection-bar". */
     "data-testid"?: string;
 }

package/dist/Components/Button/Button.js

@@ -3,6 +3,7 @@ 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");
+/** Themed button with label or children, left/right icons and a loading state that keeps its width. */
 const Button = (0, react_1.forwardRef)(function Button({ label, children, onClick, opacity, variant = "solid", leftIcon, rightIcon, size, isDisabled = false, isLoading = false, loadingText, type, width, w, sx, colorScheme, border, borderRadius, onMouseEnter, onMouseLeave, ...aria }, ref) {
     const isIconOnly = !children && !label && !!(leftIcon || rightIcon);
     return ((0, jsx_runtime_1.jsx)(react_2.Button, { ...aria, type: type, onClick: onClick, width: width || w || "fit-content", variant: variant, size: size, isLoading: isLoading, isDisabled: isDisabled, loadingText: loadingText, leftIcon: leftIcon, rightIcon: rightIcon, iconSpacing: isIconOnly ? 0 : undefined, px: isIconOnly ? 0 : undefined, ref: ref, colorScheme: colorScheme, sx: sx, opacity: opacity, border: border, borderRadius: borderRadius, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, children: children !== null && children !== void 0 ? children : label }));

package/dist/Components/Button/ButtonProps.d.ts

@@ -17,8 +17,11 @@ export type ButtonProps = LayoutProps & DataAttributes & Pick<ChakraButtonProps,
     type?: "button" | "submit" | "reset";
     /** Ignored when variant="gradient" — that variant always paints the theme's fixed gradient pair, not this scheme. */
     colorScheme?: 'primary' | 'secondary' | 'tertiary' | 'gray' | 'red' | 'orange' | 'yellow' | 'green' | 'teal' | 'blue' | 'cyan' | 'purple' | 'pink';
+    /** Forwarded to the underlying `<button>` element. */
     ref?: React.Ref<HTMLButtonElement>;
+    /** Button content; takes precedence over `label`. */
     children?: React.ReactNode;
+    /** Opacity of the whole button, 0 to 1. */
     opacity?: number;
 };
 export {};

package/dist/Components/ButtonGroupIcon/ButtonGroupIcon.d.ts

@@ -1,4 +1,5 @@
 import { ButtonGroupIconProps } from "./ButtonGroupIconProps";
+/** Attached left icon, text button and right icon or dropdown trigger; see ButtonGroupIconProps. */
 export default function ButtonGroupIcon({ leftIcon, rightIcon, onLeftIconClick, onRightIconClick, buttonText, onButtonClick, onButtongroupClick, size, variant, color, buttonGroupStyle, buttonGroupLeftIconStyle, buttonGroupRightIconStyle, buttonStyle, onBlurLeftIcon, onBlurRightIcon, dropdownOptions, // New prop for dropdown options
 onDropdownOptionClick, // New prop to handle option clicks
 rightIconDropdown, menulistStyle, menuItemStyle, isLoading, divider, leftIconLoading, RightIconLoading, }: ButtonGroupIconProps): import("react/jsx-runtime").JSX.Element;

package/dist/Components/ButtonGroupIcon/ButtonGroupIcon.js

@@ -10,6 +10,7 @@ const color_1 = require("../../Theme/tokens/builders/color");
 const rafThrottle_1 = require("../../Utils/rafThrottle");
 const motion_1 = require("../../Theme/tokens/primitives/motion");
 const BACKGROUND_TRANSITION = (0, motion_1.transitionFor)(["background"]);
+/** Attached left icon, text button and right icon or dropdown trigger; see ButtonGroupIconProps. */
 function ButtonGroupIcon({ leftIcon, rightIcon, onLeftIconClick, onRightIconClick, buttonText, onButtonClick, onButtongroupClick, size, variant, color, buttonGroupStyle, buttonGroupLeftIconStyle, buttonGroupRightIconStyle, buttonStyle, onBlurLeftIcon, onBlurRightIcon, dropdownOptions, // New prop for dropdown options
 onDropdownOptionClick, // New prop to handle option clicks
 rightIconDropdown, menulistStyle, menuItemStyle, isLoading, divider = true, leftIconLoading, RightIconLoading, }) {

package/dist/Components/ButtonGroupIcon/ButtonGroupIconProps.d.ts

@@ -1,24 +1,37 @@
 import { ReactElement } from "react";
 /** Themed Chakra ButtonGroup wrapper (left icon + text button + right icon/dropdown) — closed prop list, no ...rest, text via buttonText only. */
 export type ButtonGroupIconProps = {
+    /** Icon button at the left edge of the group; omitted entirely when unset. */
     leftIcon?: ReactElement;
+    /** Icon button at the right edge; with `rightIconDropdown` it opens the `dropdownOptions` menu instead. */
     rightIcon?: ReactElement;
+    /** Fires when the left icon button is clicked. */
     onLeftIconClick?: () => void;
+    /** Fires when the right icon button is clicked; with `rightIconDropdown` it also toggles the menu. */
     onRightIconClick?: () => void;
     /** Auto-wrapped in a tooltip showing full text, but only when it visually truncates (maxW 200px). */
     buttonText: string;
+    /** Fires when the centre text button is clicked. */
     onButtonClick?: () => void;
     /** Fires on every click inside the group via DOM bubbling too — not just clicks on group chrome. */
     onButtongroupClick?: () => void;
+    /** Size of every segment; unset keeps the theme's default button size. */
     size?: "lg" | "md" | "sm" | "xs" | "xl";
+    /** "gradient" paints one themed gradient across the whole group, with transparent segments; the rest style each segment. */
     variant?: "solid" | "outline" | "ghost" | "link" | "unstyled" | "gradient";
     /** Actually Chakra's colorScheme (a palette name like "red"), not a CSS text or icon color. */
     color?: "primary" | "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "whiteAlpha" | "blackAlpha";
+    /** Inline style on the group wrapper, not on individual buttons. */
     buttonGroupStyle?: React.CSSProperties;
+    /** Inline style on the left icon button. */
     buttonGroupLeftIconStyle?: React.CSSProperties;
+    /** Inline style on the right icon button, or the dropdown trigger when `rightIconDropdown` is set. */
     buttonGroupRightIconStyle?: React.CSSProperties;
+    /** Inline style on the centre text button. */
     buttonStyle?: React.CSSProperties;
+    /** Fires when the left icon button loses focus. */
     onBlurLeftIcon?: () => void;
+    /** Fires when the right icon button loses focus. */
     onBlurRightIcon?: () => void;
     /** Rendered only when BOTH rightIcon and rightIconDropdown are also set — otherwise silently unused. */
     dropdownOptions?: {
@@ -26,16 +39,22 @@ export type ButtonGroupIconProps = {
         id: string | number;
         image?: ReactElement | undefined;
     }[];
+    /** Fires when a menu option is chosen, with the click event and the option; the menu closes first. */
     onDropdownOptionClick?: (event: React.MouseEvent, option: {
         label: string;
         id: string | number;
     }) => void;
     /** Also requires rightIcon — without it, neither the dropdown nor a plain right icon button renders. */
     rightIconDropdown?: boolean;
+    /** Inline style on the dropdown menu list; used only when the dropdown renders. */
     menulistStyle?: React.CSSProperties;
+    /** Inline style on each dropdown item; used only when the dropdown renders. */
     menuItemStyle?: React.CSSProperties;
+    /** Shows a spinner on the centre text button only; icon buttons have their own loading flags. */
     isLoading?: boolean;
+    /** Draws a rule between dropdown items. Defaults to true; false gives inset, rounded items instead. */
     divider?: boolean;
+    /** Shows a spinner on the left icon button. */
     leftIconLoading?: boolean;
     /** Capitalized "R" unlike leftIconLoading — same casing must match exactly, there is no rightIconLoading. */
     RightIconLoading?: boolean;

package/dist/Components/CalendarGrid/CalendarGrid.d.ts

@@ -1,3 +1,4 @@
 import type { CalendarGridProps } from "./CalendarGridProps";
+/** Controlled month, week or day grid that places date-granularity events as chips and spanning bars, with a toolbar and arrow-key navigation. */
 declare const CalendarGrid: ({ view, date, events, onViewChange, onDateChange, onEventClick, renderDayCell, weekStartsOn, locale, isLoading, labels, }: CalendarGridProps) => import("react/jsx-runtime").JSX.Element;
 export default CalendarGrid;

package/dist/Components/CalendarGrid/CalendarGrid.js

@@ -78,6 +78,7 @@ const EventChip = ({ event, colors, surface, onEventClick, segment }) => {
     };
     return event.href ? ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "a", href: event.href, ...common, children: event.label })) : ((0, jsx_runtime_1.jsx)(react_2.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 } = (0, useCustomTheme_1.useCustomTheme)();
     const text = { ...DEFAULT_LABELS, ...labels };

package/dist/Components/CalendarGrid/CalendarGridProps.d.ts

@@ -4,11 +4,13 @@ import type { Tone } from "../../Theme/tokens/builders/tone";
 export type CalendarGridView = "month" | "week" | "day";
 /** A date-granularity event; time of day is ignored. */
 export type CalendarEvent = {
+    /** Unique key; also the last tie-break when ordering events that start together. */
     id: string;
     /** First day covered; only the date part is read. */
     start: Date;
     /** Last day covered, inclusive. Omit for a single-day event; a value before `start` is swapped. */
     end?: Date;
+    /** Chip text; also breaks ties when ordering events that start on the same day. */
     label: string;
     /** Status tint of the chip, same tones as Tag. Defaults to "neutral". */
     tone?: Tone;
@@ -17,11 +19,17 @@ export type CalendarEvent = {
 };
 /** Visible text and accessible names; every key falls back to English. */
 export type CalendarGridLabels = {
+    /** Toolbar button that moves the anchor to the current day. */
     today: string;
+    /** Accessible name of the previous-period button. */
     previous: string;
+    /** Accessible name of the next-period button. */
     next: string;
+    /** View switcher entry for the month view. */
     month: string;
+    /** View switcher entry for the week view. */
     week: string;
+    /** View switcher entry for the day view. */
     day: string;
     /** Receives the number of hidden events, e.g. "+3 more". */
     more: (count: number) => string;
@@ -32,9 +40,11 @@ export type CalendarGridLabels = {
 };
 /** Props for the month/week/day event grid; fully controlled through `view` and `date`. */
 export interface CalendarGridProps {
+    /** Span shown: a month of weeks, one week or one day. */
     view: CalendarGridView;
     /** Anchor date: any day inside the month, week or day being shown. */
     date: Date;
+    /** Events to place; multi-day events span cells and long days collapse into "+N more". */
     events: CalendarEvent[];
     /** Called by the toolbar's view switcher and by a cell's "+N more" button (with "day"). */
     onViewChange?: (view: CalendarGridView) => void;
@@ -50,5 +60,6 @@ export interface CalendarGridProps {
     locale?: string;
     /** Keeps the grid's shape and swaps the events for skeleton bars; sets aria-busy. */
     isLoading?: boolean;
+    /** Overrides the default English strings; unset keys keep their default. */
     labels?: Partial<CalendarGridLabels>;
 }

package/dist/Components/CalendarGrid/calendarMath.d.ts

@@ -1,22 +1,35 @@
 export type CalendarView = "month" | "week" | "day";
 export type WeekStart = 0 | 1;
 export type SpanEvent = {
+    /** Unique key of the event. */
     id: string;
+    /** First day covered; time of day is ignored. */
     start: Date;
+    /** Last day covered, inclusive; omit for a single-day event. */
     end?: Date;
+    /** Event text, used as a sort tie-break when laying out lanes. */
     label: string;
 };
 export type WeekSegment<E extends SpanEvent> = {
+    /** The event this bar draws. */
     event: E;
+    /** First column the bar covers, clamped to the week. */
     startCol: number;
+    /** Last column the bar covers, clamped to the week. */
     endCol: number;
+    /** Row index of the bar; lanes at or past `maxLanes` are counted in `hiddenByCol`, not drawn. */
     lane: number;
+    /** True when the event began in an earlier week. */
     continuesBefore: boolean;
+    /** True when the event runs into a later week. */
     continuesAfter: boolean;
 };
 export type WeekLayout<E extends SpanEvent> = {
+    /** Every bar for the week, including those in hidden lanes. */
     segments: WeekSegment<E>[];
+    /** Number of lanes to draw, capped at `maxLanes`. */
     visibleLanes: number;
+    /** Per column, how many events fall in lanes that are not drawn. */
     hiddenByCol: number[];
 };
 export declare const startOfDay: (d: Date) => Date;

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

@@ -2,8 +2,11 @@ import { CardProps as ChakraCardProps, CardBodyProps, ResponsiveValue } from "@c
 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`. */
@@ -14,6 +17,7 @@ export type CardProps = Omit<ChakraCardProps, "children" | "variant" | "size" |
     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";

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

@@ -1,3 +1,4 @@
 import { PaymentCardProps } from "./PaymentCardProps";
+/** 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

@@ -63,6 +63,7 @@ const getCardStyles = (isActive, isNextUpgrade, popular, theme) => {
         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 = (0, useCustomTheme_1.useCustomTheme)();
     const { badgeText, badgeColor, buttonColor, buttonColor50, onButtonColor, iconInk, colorScheme } = getCardStyles(isActive, isNextUpgrade, !!plan.popular, theme);

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

@@ -1,33 +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/CartItemProps.d.ts

@@ -3,7 +3,9 @@ import type { OptionAxis, PriceFormat, StockState, VariantSelection } from "../C
 export type CartItemLayout = "row" | "compact";
 /** Every visible string; override for another language. */
 export interface CartItemLabels {
+    /** Text and accessible name of the move-to-wishlist action; default "Move to wishlist". */
     moveToWishlist: string;
+    /** Text and accessible name of the remove action; default "Remove". */
     remove: string;
     /** Shown instead of the price when `unavailable`. */
     outOfStock: string;
@@ -18,7 +20,9 @@ export interface CartItemLabels {
 }
 /** One bag line: thumbnail, title, chosen options, line total, quantity and actions. Totals are computed here, so pass unit prices. */
 export interface CartItemProps extends PriceFormat {
+    /** Product name, clamped to two lines; also names the quantity stepper and action buttons for screen readers. */
     title: string;
+    /** Muted single line above the title. */
     brand?: string;
     /** Makes the title a link to the product page. */
     href?: string;
@@ -30,6 +34,7 @@ export interface CartItemProps extends PriceFormat {
     imageAlt?: string;
     /** With `selection`, builds the "Indigo Wash · M" line from the chosen option labels. */
     axes?: OptionAxis[];
+    /** Chosen option per axis, read against `axes` to build the options line. */
     selection?: VariantSelection;
     /** Replaces the line built from `axes` and `selection`. */
     optionsSummary?: string;
@@ -37,12 +42,15 @@ export interface CartItemProps extends PriceFormat {
     price: number;
     /** List price of one unit; the strike only shows when it is above `price`. */
     mrp?: number;
+    /** Units on this line; the line total is `price * quantity`. Controlled: update it from `onQuantityChange`. */
     quantity: number;
+    /** Called with the new quantity when the stepper changes it; never fires in the compact layout, which has no stepper. */
     onQuantityChange?: (quantity: number) => void;
     /** Lowest quantity; at this value the minus becomes a trash button when `onRemove` is set. */
     minQuantity?: number;
     /** Highest quantity, usually the stock on hand. */
     maxQuantity?: number;
+    /** Adds the Remove action (row layout) and turns the stepper's minus into a trash at `minQuantity`. */
     onRemove?: () => void;
     /** Adds the "Move to wishlist" action. */
     onMoveToWishlist?: () => void;
@@ -56,9 +64,11 @@ export interface CartItemProps extends PriceFormat {
     deliveryBy?: string;
     /** Dims the image, drops price and stepper and keeps only Remove. */
     unavailable?: boolean;
+    /** "row" or "compact"; default "row". */
     layout?: CartItemLayout;
     /** Skeleton of the same shape; actions are not rendered. */
     isLoading?: boolean;
+    /** Per-string copy overrides; unset keys keep the English defaults. */
     labels?: Partial<CartItemLabels>;
     "data-testid"?: string;
 }

package/dist/Components/Checkbox/CheckboxProps.d.ts

@@ -21,6 +21,7 @@ export type CheckboxProps = Pick<ChakraButtonProps, "spacing" | "isInvalid" | "s
     size?: "sm" | "md" | "lg";
     /** Sets `isInvalid` (error border + aria-invalid) and shows `errorMessage` in place of `helperText`, linked via aria-describedby. */
     error?: boolean;
+    /** Shown in place of `helperText` while `error` is true, linked via aria-describedby. */
     errorMessage?: string;
     /** Hidden while `error` is true. */
     helperText?: string;

package/dist/Components/ChoiceCard/ChoiceCard.d.ts

@@ -1,3 +1,4 @@
 import type { ChoiceCardProps } from "./ChoiceCardProps";
+/** Selectable radio card with a label, optional description and icon; must sit inside a `ChoiceCardGroup`. */
 declare const ChoiceCard: ({ value, label, description, icon, disabled: disabledProp, isDisabled, "data-testid": testId }: ChoiceCardProps) => import("react/jsx-runtime").JSX.Element;
 export default ChoiceCard;

package/dist/Components/ChoiceCard/ChoiceCard.js

@@ -5,6 +5,7 @@ const react_1 = require("react");
 const react_2 = require("@chakra-ui/react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const selectable_1 = require("../CheckoutKit/selectable");
+/** Selectable radio card with a label, optional description and icon; must sit inside a `ChoiceCardGroup`. */
 const ChoiceCard = ({ value, label, description, icon, disabled: disabledProp = false, isDisabled = false, "data-testid": testId }) => {
     const disabled = disabledProp || isDisabled;
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();

package/dist/Components/ChoiceCard/ChoiceCardGroup.d.ts

@@ -1,3 +1,4 @@
 import type { ChoiceCardGroupProps } from "./ChoiceCardProps";
+/** Radiogroup that lays out `ChoiceCard`s in one or more columns and manages the single selection. */
 declare const ChoiceCardGroup: (props: ChoiceCardGroupProps) => import("react/jsx-runtime").JSX.Element;
 export default ChoiceCardGroup;

package/dist/Components/ChoiceCard/ChoiceCardGroup.js

@@ -2,5 +2,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const selectable_1 = require("../CheckoutKit/selectable");
+/** Radiogroup that lays out `ChoiceCard`s in one or more columns and manages the single selection. */
 const ChoiceCardGroup = (props) => (0, jsx_runtime_1.jsx)(selectable_1.SelectableGroup, { ...props });
 exports.default = ChoiceCardGroup;

package/dist/Components/ChoiceCard/ChoiceCardProps.d.ts

@@ -17,9 +17,11 @@ export interface ChoiceCardProps {
 }
 /** Radiogroup of `ChoiceCard`s: one tab stop; arrows, Home and End move focus and selection together. */
 export interface ChoiceCardGroupProps {
+    /** Selected card's `value`; passing it makes the group controlled. */
     value?: string;
     /** Seeds an uncontrolled selection; ignored once `value` is passed. */
     defaultValue?: string;
+    /** Called with the newly chosen card's `value`, only when the selection actually changes. */
     onValueChange?: (value: string) => void;
     /** Cards per row; `1` (default) stacks them in a column, more lays them out in an equal-width grid. */
     columns?: number;
@@ -29,6 +31,7 @@ export interface ChoiceCardGroupProps {
     children: ReactNode;
     /** Name the group with this or `aria-labelledby`. */
     "aria-label"?: string;
+    /** Id of an element that names the group; use instead of `aria-label`. */
     "aria-labelledby"?: string;
     "data-testid"?: string;
 }

package/dist/Components/ConfirmDialog/ConfirmDialog.d.ts

@@ -1,4 +1,5 @@
 import React from "react";
 import { ConfirmDialogProps } from "./ConfirmDialogProps";
+/** Cancel/Confirm modal for destructive prompts; focus starts on Cancel and Confirm never closes the dialog itself. */
 declare const ConfirmDialog: React.FC<ConfirmDialogProps>;
 export default ConfirmDialog;

package/dist/Components/ConfirmDialog/ConfirmDialog.js

@@ -12,6 +12,7 @@ const surfaceRaised_1 = require("../../Theme/tokens/builders/surfaceRaised");
 const tone_1 = require("../../Theme/tokens/builders/tone");
 const Button_1 = __importDefault(require("../Button/Button"));
 const TextInput_1 = __importDefault(require("../Input/TextInput"));
+/** Cancel/Confirm modal for destructive prompts; focus starts on Cancel and Confirm never closes the dialog itself. */
 const ConfirmDialog = ({ isOpen, onClose, onConfirm, title, children, icon, iconBg, iconColor, entityName, entityKind, dependents, consequence, alternative, isConfirmDisabled: isConfirmHeld = false, tone = "destructive", cancelLabel = "Cancel", confirmLabel = "Confirm", confirmIcon, isConfirmLoading = false, disableCancelWhilePending = true, confirmationText, confirmationLabel, bodyLayout = "flush", bodySpacing = 4, actionsPt = 0, focusCancelOnOpen = true, isCentered = true, closeOnEsc, closeOnOverlayClick, }) => {
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
     const cancelRef = (0, react_1.useRef)(null);

package/dist/Components/ConfirmDialog/ConfirmDialogProps.d.ts

@@ -5,12 +5,15 @@ export interface ConfirmDialogAlternative {
     label: string;
     /** What choosing it keeps, shown in a hint box above the buttons. */
     description?: ReactNode;
+    /** Fires when the alternative button is clicked; does not close the dialog. */
     onSelect: () => void;
     /** Spinner on the alternative; Cancel and Confirm are disabled meanwhile. */
     isLoading?: boolean;
 }
 interface ConfirmDialogBaseProps {
+    /** Controlled visibility; the dialog never opens or closes itself. */
     isOpen: boolean;
+    /** Fires on Cancel, the close button, Esc and overlay click; the caller must then set `isOpen` to false. */
     onClose: () => void;
     /** Fires on Confirm click; does not close the dialog — call onClose yourself. */
     onConfirm: () => void;
@@ -60,7 +63,9 @@ interface ConfirmDialogBaseProps {
     focusCancelOnOpen?: boolean;
     /** Defaults to true. */
     isCentered?: boolean;
+    /** Whether Esc closes the dialog; unset keeps Chakra's default (true). */
     closeOnEsc?: boolean;
+    /** Whether clicking the overlay closes the dialog; unset keeps Chakra's default (true). */
     closeOnOverlayClick?: boolean;
 }
 /** Reusable Cancel/Confirm modal for delete/deactivate-style prompts; pass `title`, or `entityName` to get a title and a consequence body. */

package/dist/Components/ContactForm/ContactFormProps.d.ts

@@ -2,13 +2,21 @@ import { SystemStyleObject } from "@chakra-ui/react";
 import { ReactNode } from "react";
 /** The built-in fields plus any customValues, sent to onSubmit and/or POSTed to apiKey. */
 export type ContactFormPayload = {
+    /** Built by the form as `firstName` and `lastName` joined by a space. */
     name: string;
+    /** Required field. */
     firstName: string;
+    /** Optional; an empty string when left blank. */
     lastName: string;
+    /** Optional; checked for address format when filled, otherwise an empty string. */
     email: string;
+    /** Required, digits only, 7-15 long; validated before submit. */
     phone: string;
+    /** Text of the Enquiry field; may be empty. */
     message: string;
+    /** Copied from the `customerId` prop; `getCustomValues` cannot override it. */
     customerId: string | number;
+    /** Copied from the `organizationId` prop; `getCustomValues` cannot override it. */
     organizationId: string | number;
     [key: string]: unknown;
 };
@@ -18,13 +26,18 @@ export interface ContactFormProps {
     apiKey?: string;
     /** Called with the submitted payload before/instead of the apiKey fetch; awaited if it returns a promise. */
     onSubmit?: (payload: ContactFormPayload) => void | Promise<void>;
+    /** Sent unchanged in every payload to identify the customer; not shown in the form. */
     customerId: string | number;
+    /** Sent unchanged in every payload to identify the organization; not shown in the form. */
     organizationId: string | number;
+    /** Disables the submit button and blocks submission; fields stay editable. Defaults to false. */
     isDisabled?: boolean;
     /** Rendered markup only — its values are never read automatically; pair with getCustomValues or they're dropped from the submitted payload. */
     customFields?: ReactNode;
     /** Return value spreads into the payload after the built-in fields — a key like "email" silently overwrites the typed value; customerId/organizationId can't be overridden this way. */
     getCustomValues?: () => Record<string, unknown>;
+    /** Colour scheme of the Send Message button. Defaults to "primary". */
     buttonColorScheme?: "primary" | "blue" | "cyan" | "gray" | "green" | "orange" | "pink" | "purple" | "red" | "teal" | "yellow" | "secondary" | "tertiary" | undefined;
+    /** Chakra style object applied to the Send Message button. */
     buttonSx?: SystemStyleObject;
 }