pixelize-design-library 2.4.2-beta.67 → 2.4.2-beta.69

package/dist/Components/NotificationBell/NotificationBellProps.d.ts

@@ -24,6 +24,7 @@ export interface NotificationBellProps {
     size?: NotificationBellSize;
     /** Badge ring colour so the pill reads on a tinted bar. Defaults to the canvas. */
     ringColor?: string;
+    /** Fires when the bell button is activated; the bell renders no panel, so toggle your popover here. */
     onClick?: () => void;
     /** Reflected as `aria-expanded`; pass the panel's open state when the bell drives a popover. */
     isOpen?: boolean;
@@ -32,6 +33,7 @@ export interface NotificationBellProps {
 }
 /** What the row chassis actually paints. Consumers map their own row type onto this. */
 export interface NotificationItemModel {
+    /** Used as the React key within a list; must be unique among the rows. */
     id: string;
     /** Main line; ReactNode so a caller can inject links/bold without the library parsing markup. */
     title: ReactNode;
@@ -39,6 +41,7 @@ export interface NotificationItemModel {
     body?: ReactNode;
     /** Epoch ms, an ISO string, or a Date; drives both the relative label and day bucketing. */
     timestamp: number | string | Date;
+    /** False shows the unread indicator chosen by `unreadIndicator`; true renders the row plain. */
     isRead: boolean;
     /** Icon for the 28x28 tile; pass a component reference, not an element. */
     icon?: ElementType;
@@ -60,7 +63,9 @@ export interface NotificationItemModel {
 export type NotificationUnreadIndicator = "bar" | "dot" | "tint" | "none";
 /** One row; exported so a `renderItem` override can still reuse the chassis. */
 export interface NotificationItemProps {
+    /** The mapped row model that this chassis paints. */
     item: NotificationItemModel;
+    /** Makes the tile and text a focusable button when set; without it the row is non-interactive. */
     onClick?: () => void;
     /** Action cluster, hidden until row hover/focus unless `actionsAlwaysVisible`. */
     actions?: ReactNode;
@@ -70,6 +75,7 @@ export interface NotificationItemProps {
     preview?: ReactNode;
     /** Right-hand meta, e.g. hrms' "waiting 3 days". */
     trailing?: ReactNode;
+    /** Applies only when `item.isRead` is false; `"none"` shows no unread cue. */
     unreadIndicator?: NotificationUnreadIndicator;
     /** When this row represents a collapsed run, the number of rows it stands in for. */
     groupCount?: number;
@@ -78,6 +84,7 @@ export interface NotificationItemProps {
 }
 /** Props shared by NotificationList and NotificationPanel — generic over the caller's own row type. */
 export interface NotificationListProps<T> {
+    /** Rows in display order; each is mapped through `toItem` for rendering and, with `groupBy` "day", bucketed by its timestamp. */
     items: T[];
     /** The adapter. The one required piece of consumer glue. */
     toItem: (row: T) => NotificationItemModel;
@@ -87,6 +94,7 @@ export interface NotificationListProps<T> {
     collapseGroups?: boolean;
     /** Overrides the three default bucket labels — the i18n hook. */
     dayLabels?: DaySectionLabels;
+    /** Receives the original row, not the mapped model; setting it makes every default row a button. */
     onItemClick?: (row: T) => void;
     /** The hover-revealed, keyboard-reachable action cluster per row. */
     itemActions?: (row: T) => ReactNode;
@@ -94,13 +102,18 @@ export interface NotificationListProps<T> {
     renderItem?: (row: T, model: NotificationItemModel) => ReactNode;
     /** Replaces the sticky day-section header. */
     renderSectionHeader?: (label: string) => ReactNode;
+    /** Forwarded to each default row; has no effect when `renderItem` replaces the row. */
     unreadIndicator?: NotificationUnreadIndicator;
+    /** Forwarded to each default row; shows `itemActions` at rest instead of on hover or focus. */
     actionsAlwaysVisible?: boolean;
+    /** Names the list as a region landmark; no region role is added when omitted. */
     "aria-label"?: string;
 }
 /** One tab in the zone row; `render` exists so a foreign queue (hrms' "Needs you") can host its own body. */
 export interface NotificationZone {
+    /** Matched against `activeZone` and passed to `onZoneChange` when the tab is clicked. */
     id: string;
+    /** Tab text; the capped `count` is appended in parentheses. */
     label: string;
     /** Rendered as a capped count suffix on the tab; omit for no count. */
     count?: number;
@@ -111,22 +124,32 @@ export interface NotificationZone {
 }
 /** A filter chip rendered next to the zone row; count is suffixed as "(n)", capped like the badge. */
 export interface NotificationFilter {
+    /** Matched against `activeFilter` and passed to `onFilterChange` when the chip is clicked. */
     id: string;
+    /** Chip text; `count` is appended in parentheses when set. */
     label: string;
+    /** Shown even when 0, unlike a zone count; capped at 99 like the badge. Omit for no suffix. */
     count?: number;
 }
 /** The panel shell. Generic over the caller's row type — the library defines no notification shape. */
 export interface NotificationPanelProps<T> extends NotificationListProps<T> {
     /** Omit for a single-zone panel (crm, spare-cart). Two zones is the tickets/hrms shape. */
     zones?: NotificationZone[];
+    /** Id of the selected zone; that zone's `render`, if set, replaces the panel body. */
     activeZone?: string;
+    /** Receives the clicked zone's id; the panel is controlled, so update `activeZone` yourself. */
     onZoneChange?: (zoneId: string) => void;
+    /** Filter chips under the zone row; the row is omitted when empty or unset. */
     filters?: NotificationFilter[];
+    /** Id of the selected filter chip; controlled, so update it from `onFilterChange`. */
     activeFilter?: string;
+    /** Receives the clicked filter's id; update `activeFilter` yourself. */
     onFilterChange?: (filterId: string) => void;
+    /** Shows four skeleton rows in place of the list; beats the error and empty states, but not a zone's `render`. */
     isLoading?: boolean;
     /** Anything non-nullish shows the error state — closes tickets' documented no-error-state gap. */
     error?: unknown;
+    /** Adds a Retry button to the error state; the button is omitted when unset. */
     onRetry?: () => void;
     /** Props for the default EmptyState. */
     empty?: EmptyStateProps;
@@ -140,8 +163,12 @@ export interface NotificationPanelProps<T> extends NotificationListProps<T> {
     variant?: "popover" | "page";
     /** Fixed max height; when unset the popover variant measures its own anchored height. */
     maxH?: string | number;
+    /** Fires from the "Load more" button, which renders only while `hasMore` is true. */
     onLoadMore?: () => void;
+    /** Shows the "Load more" button under the list. Defaults to false. */
     hasMore?: boolean;
+    /** Puts the "Load more" button into its loading state. Defaults to false. */
     isLoadingMore?: boolean;
+    /** Receives the panel root element; also the node whose top edge the popover height is measured from. */
     panelRef?: RefObject<HTMLDivElement>;
 }

package/dist/Components/NotificationBell/notificationHelpers.d.ts

@@ -1,15 +1,22 @@
 import { type RefObject } from "react";
 export interface DaySection<T> {
+    /** Section heading text, taken from the matching `DaySectionLabels` entry. */
     label: string;
+    /** Rows in this bucket, in input order. */
     rows: T[];
 }
 export interface ConsecutiveGroup<T> {
+    /** The shared key for the run, or null for a row that was not merged. */
     key: string | null;
+    /** Adjacent rows in the run, in input order. */
     rows: T[];
 }
 export interface DaySectionLabels {
+    /** Heading for rows dated on the current calendar day. */
     today: string;
+    /** Heading for rows dated on the previous calendar day. */
     yesterday: string;
+    /** Heading for every older row. */
     earlier: string;
 }
 export declare const DEFAULT_DAY_LABELS: DaySectionLabels;
@@ -23,9 +30,13 @@ export declare function groupConsecutive<T>(rows: T[], getKey: (row: T) => strin
 /** 5 -> "5"; 150 with max 99 -> "99+". Negative/NaN input is clamped to 0. */
 export declare function formatCount(value: number, max?: number): string;
 export interface RelativeTimeLabels {
+    /** Text shown for ages under one minute. */
     justNow: string;
+    /** Receives whole minutes (1 to 59) and returns the label. */
     minutesAgo: (count: number) => string;
+    /** Receives whole hours (1 to 23) and returns the label. */
     hoursAgo: (count: number) => string;
+    /** Receives whole days (1 to 6) and returns the label; older times use a short date. */
     daysAgo: (count: number) => string;
 }
 export declare const DEFAULT_RELATIVE_TIME_LABELS: RelativeTimeLabels;
@@ -40,7 +51,9 @@ export interface RelativeTimeOptions {
 export declare function formatRelativeTime(value: number | string | Date, now?: number | Date, { labels, locale }?: RelativeTimeOptions): string;
 /** Minimum panel height and bottom gutter for `useAnchoredPanelHeight`. */
 export interface AnchoredPanelHeightOptions {
+    /** Smallest height in px the panel may measure to. Defaults to 280. */
     min?: number;
+    /** Space in px kept between the panel's bottom edge and the viewport bottom. Defaults to 24. */
     gutter?: number;
 }
 /** The tickets/hrms formula: max(min, viewport bottom edge - panel top - gutter), remeasured on resize. */

package/dist/Components/NumberInput/NumberInputProps.d.ts

@@ -23,7 +23,7 @@ export type NumberInputProps = Pick<chakraNumbetInpurProps, "defaultValue" | "mi
     id?: string;
     /** Marks the field invalid (error border + `aria-invalid`) and swaps the helper for `errorMessage`. */
     error?: boolean;
-    /** Shown under the field while `error` is true; falls back to "Error". */
+    /** Shown under the field while `error` is true. */
     errorMessage?: string;
     /** Shown under the field when there is no error; linked via `aria-describedby`. */
     helperText?: string;

package/dist/Components/OffersList/OffersListProps.d.ts

@@ -1,17 +1,23 @@
 /** One offer; `code` adds a copy button. */
 export interface Offer {
+    /** Stable React key; `bestOfferId` is matched against it. */
     id: string;
+    /** Bold headline; also names the best offer in the collapsed summary. */
     title: string;
+    /** Muted description under the title; a single offer's summary reads `title · detail`. */
     detail: string;
+    /** Coupon code shown as a chip with a copy button; omit for offers that need no code. */
     code?: string;
 }
 /** Every string the list renders; override all of them for another language. */
 export interface OffersListLabels {
     /** Collapsed summary, given the offer count and the best offer's title. */
     summary: (count: number, best: string) => string;
-    /** Collapsed summary when there is no best offer to name. */
+    /** Collapsed summary used when the best offer has an empty title. */
     summaryCount: (count: number) => string;
+    /** Copy button text before a copy. */
     copy: string;
+    /** Copy button text for about 1.6 s after a copy. */
     copied: string;
     /** Accessible name of a copy button, given the code. */
     copyCode: (code: string) => string;
@@ -20,15 +26,20 @@ export interface OffersListLabels {
 }
 /** One collapsed row ("Offers (3) · Best: ...") that opens into the full list with copy-code buttons; renders nothing for no offers. */
 export interface OffersListProps {
+    /** Offers to list; nothing renders when empty. */
     offers: Offer[];
     /** Offer named in the collapsed summary; defaults to the first. */
     bestOfferId?: string;
     /** Controlled open state; pair with `onOpenChange`. */
     isOpen?: boolean;
+    /** Initial open state when uncontrolled; collapsed by default. */
     defaultOpen?: boolean;
+    /** Fires with the next open state on every toggle, controlled or not. */
     onOpenChange?: (open: boolean) => void;
     /** Fires after a code is copied, with the offer. */
     onCopy?: (offer: Offer) => void;
+    /** Partial overrides of the default English strings. */
     labels?: Partial<OffersListLabels>;
+    /** Test id on the outer container. */
     "data-testid"?: string;
 }

package/dist/Components/OptionChip/OptionChipProps.d.ts

@@ -6,6 +6,7 @@ export type OptionChipSize = "md" | "lg";
 export interface OptionChipProps {
     /** Visible text for chip, pack and image-tile; the accessible name for a swatch. */
     label: string;
+    /** Controlled: sets `aria-checked` and the selected styling; clicking never toggles it. Defaults to false. */
     selected?: boolean;
     /** Native disabled: dimmed, not focusable, onSelect never fires. */
     disabled?: boolean;
@@ -13,6 +14,7 @@ export interface OptionChipProps {
     unavailable?: boolean;
     /** Draws a 1px error ring; use when the group needs a pick. */
     invalid?: boolean;
+    /** Picks the layout; `swatch` needs `swatch`, `image-tile` uses `image`, and `pack` shows `hint` as a second line. Defaults to "chip". */
     variant?: OptionChipVariant;
     /** Any CSS colour from product data; the one place a literal colour is allowed. */
     swatch?: string;
@@ -22,10 +24,13 @@ export interface OptionChipProps {
     hint?: string;
     /** Swatch only: print the colour name under the dot. */
     showLabel?: boolean;
+    /** Control scale across all variants. Defaults to "md". */
     size?: OptionChipSize;
     /** Stretch to the parent's width, for grid layouts. */
     fullWidth?: boolean;
+    /** Fires on every click, including when already selected or `unavailable`; never when `disabled`. Does not toggle `selected`. */
     onSelect?: () => void;
+    /** Fires when the button receives focus; takes no arguments. */
     onFocus?: () => void;
     /** Roving tabindex from the parent group; omit for a standalone chip. */
     tabIndex?: number;

package/dist/Components/OrderStatusTimeline/OrderStatusTimelineProps.d.ts

@@ -2,28 +2,38 @@
 export type OrderStepState = "done" | "current" | "upcoming";
 /** One stage of an order, e.g. Placed, Packed, Shipped, Out for delivery, Delivered. */
 export interface OrderStatusStep {
+    /** Unique key of the step. */
     id: string;
+    /** Step name; spoken after its state word. */
     label: string;
     /** Muted line under the label, e.g. "Bengaluru hub". */
     detail?: string;
     /** Pre-formatted date or time, e.g. "Tue, 7 Oct"; for an upcoming step this is the expected date. */
     date?: string;
+    /** Picks the marker: check for done, ringed dot for current, hollow ring for upcoming. */
     state: OrderStepState;
 }
 /** Vertical for a track page, horizontal for a compact strip on the order-success screen. */
 export type OrderStatusOrientation = "vertical" | "horizontal";
 /** Words read out for each state, so status never rides on the marker alone. */
 export interface OrderStatusTimelineLabels {
+    /** Spoken before a completed step's label; defaults to "Completed". */
     done: string;
+    /** Spoken before the step in progress; defaults to "In progress". */
     current: string;
+    /** Spoken before a step still ahead; defaults to "Upcoming". */
     upcoming: string;
 }
 /** Order tracking steps as an ordered list; markers pair an icon shape with screen-reader text for each state. */
 export interface OrderStatusTimelineProps {
+    /** Stages in order; each step's `state` is given, not derived from position. */
     steps: OrderStatusStep[];
+    /** Layout of the list; defaults to "vertical". */
     orientation?: OrderStatusOrientation;
+    /** Overrides the default English state words; unset keys keep their default. */
     labels?: Partial<OrderStatusTimelineLabels>;
     /** Accessible name of the list; defaults to "Order status". */
     "aria-label"?: string;
+    /** Test id on the list. */
     "data-testid"?: string;
 }

package/dist/Components/OrderSummary/OrderSummaryProps.d.ts

@@ -5,9 +5,11 @@ export type OrderSummaryTone = "default" | "success" | "muted";
 export interface OrderSummaryLine {
     /** Stable key; falls back to the label. */
     id?: string;
+    /** Row text on the left; the fallback key when `id` is omitted. */
     label: string;
     /** A number is formatted as a price; a string is shown as is, e.g. "Calculated at checkout". */
     amount: number | string;
+    /** Ink of the row; a negative amount, a free line and "success" all use the success tone. */
     tone?: OrderSummaryTone;
     /** Muted line under the label, e.g. "Applied: WELCOME10". */
     hint?: string;
@@ -16,13 +18,16 @@ export interface OrderSummaryLine {
 }
 /** Progress toward a free-delivery threshold, in the same currency as the lines. */
 export interface FreeShippingProgress {
+    /** Subtotal at which free delivery unlocks. */
     threshold: number;
     /** Eligible subtotal so far; at or above `threshold` the line reads as unlocked. */
     current: number;
 }
 /** Visible copy; override every string for another language. */
 export interface OrderSummaryLabels {
+    /** Panel heading, also the accessible name when `hideTitle` is set. */
     title: string;
+    /** Label beside the large total. */
     total: string;
     /** Shown instead of a number when `amount` is 0 on a `freeWhenZero` line. */
     free: string;
@@ -37,17 +42,22 @@ export interface OrderSummaryLabels {
 }
 /** Price breakdown for the bag and checkout: lines, a large tabular total, optional savings banner and free-delivery progress. Flows in the page, so it is sticky-friendly. */
 export interface OrderSummaryProps extends PriceFormat {
+    /** Breakdown rows in order, above the total. */
     lines: OrderSummaryLine[];
+    /** Grand total, formatted as a price in the large tabular figure. */
     total: number;
     /** Total saved on the order; the banner is hidden at 0 or when omitted. */
     savings?: number;
     /** Muted line under the total, e.g. "Inclusive of all taxes". */
     taxNote?: string;
+    /** Shows a progress bar and message above the panel; reads unlocked once `current` reaches `threshold`. */
     freeShippingProgress?: FreeShippingProgress;
     /** Hides the "Price details" heading when the page already has one. */
     hideTitle?: boolean;
     /** Skeleton of the same shape; the total and lines are not rendered. */
     isLoading?: boolean;
+    /** Partial overrides of the default English strings. */
     labels?: Partial<OrderSummaryLabels>;
+    /** Test id on the outer wrapper. */
     "data-testid"?: string;
 }

package/dist/Components/OrgSwitcher/OrgSwitcher.d.ts

@@ -1,4 +1,5 @@
 import React from "react";
 import { OrgSwitcherProps } from "./OrgSwitcherProps";
+/** Session-scoped organization switcher: a trigger plus searchable popover that reports the chosen org via `onChange`. */
 declare const OrgSwitcher: React.FC<OrgSwitcherProps>;
 export default OrgSwitcher;

package/dist/Components/OrgSwitcher/OrgSwitcher.js

@@ -14,11 +14,14 @@ const outlineRung_1 = require("../../Theme/tokens/builders/outlineRung");
 const surfaceRaised_1 = require("../../Theme/tokens/builders/surfaceRaised");
 const rowStates_1 = require("../../Theme/tokens/builders/rowStates");
 const optionRowInk_1 = require("../Select/optionRowInk");
+const selectKeyboardRing_1 = require("../Select/selectKeyboardRing");
+const selectRowInk_1 = require("../Select/selectRowInk");
 const useExclusiveOverlay_1 = require("../../Hooks/useExclusiveOverlay");
 const useMatchMedia_1 = require("../../Hooks/useMatchMedia");
 const ToolTip_1 = __importDefault(require("../ToolTip/ToolTip"));
 const OrgSwitcherProps_1 = require("./OrgSwitcherProps");
 const motion_1 = require("../../Theme/tokens/primitives/motion");
+const optionRowSizes_1 = require("../../Theme/tokens/primitives/optionRowSizes");
 const BACKGROUND_TRANSITION = (0, motion_1.transitionFor)(["background"]);
 const sizeMap = {
     sm: { h: "32px", avatarH: "32px", avatar: "22px", font: "0.8rem", sub: "0.65rem", px: 2 },
@@ -34,12 +37,17 @@ const Avatar = ({ org, boxSize, fontSize, }) => {
     const fill = (0, OrgSwitcherProps_1.avatarColor)(org.name, (0, chartColorsFromTheme_1.chartMode)(colors));
     return ((0, jsx_runtime_1.jsx)(react_2.Flex, { "aria-hidden": "true", "data-initials": (0, OrgSwitcherProps_1.orgInitial)(org.name), _before: { content: "attr(data-initials)" }, align: "center", justify: "center", boxSize: boxSize, borderRadius: "lg", flexShrink: 0, bg: fill, color: (0, accentText_1.onFilled)(fill, colors.white, colors.black), fontSize: fontSize, fontWeight: 700 }));
 };
+/** Session-scoped organization switcher: a trigger plus searchable popover that reports the chosen org via `onChange`. */
 const OrgSwitcher = ({ organizations, value, onChange, isLoading = false, isSearchable, searchThreshold = 6, triggerVariant = "ghost", size = "md", maxWidth = "200px", menuMinWidth = "280px", placeholder = "Select organization", ariaLabel = "Switch organization", showRole = true, display = "full", }) => {
     var _a, _b, _c;
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     const isMd = (0, useMatchMedia_1.useMatchMedia)(MD_QUERY, true);
     const avatarOnly = display === "avatar" || (display === "auto" && !isMd);
-    const rowBackgrounds = (0, react_1.useMemo)(() => (0, rowStates_1.listRowBackgrounds)(theme.colors), [theme.colors]);
+    const rowBackgrounds = (0, react_1.useMemo)(() => (0, rowStates_1.selectRowBackgrounds)(theme.colors), [theme.colors]);
+    const keyboardRing = {
+        outline: "2px solid transparent",
+        boxShadow: (0, selectKeyboardRing_1.keyboardRingShadow)(rowBackgrounds.keyboardRing),
+    };
     const s = sizeMap[size];
     const { isOpen, onOpen, onClose } = (0, react_2.useDisclosure)();
     const requestExclusiveOpen = (0, useExclusiveOverlay_1.useExclusiveOverlay)(isOpen, onClose);
@@ -110,7 +118,7 @@ const OrgSwitcher = ({ organizations, value, onChange, isLoading = false, isSear
     return ((0, jsx_runtime_1.jsxs)(react_2.Popover, { isOpen: isOpen, onOpen: handlePopoverOpen, onClose: () => {
             onClose();
             setQuery("");
-        }, placement: "bottom-start", initialFocusRef: showSearch ? searchRef : firstOptionRef, isLazy: true, children: [avatarOnly ? ((0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: (_c = selected === null || selected === void 0 ? void 0 : selected.name) !== null && _c !== void 0 ? _c : placeholder, placement: "bottom", isDisabled: isOpen, children: (0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", display: "inline-flex", flexShrink: 0, children: (0, jsx_runtime_1.jsx)(react_2.PopoverTrigger, { children: trigger }) }) })) : ((0, jsx_runtime_1.jsx)(react_2.PopoverTrigger, { children: trigger })), (0, jsx_runtime_1.jsx)(react_2.PopoverContent, { minW: menuMinWidth, maxW: "calc(100vw - 32px)", w: "auto", 
+        }, placement: "bottom-start", initialFocusRef: showSearch ? searchRef : firstOptionRef, isLazy: true, children: [avatarOnly ? ((0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: (_c = selected === null || selected === void 0 ? void 0 : selected.name) !== null && _c !== void 0 ? _c : placeholder, placement: "bottom", isDisabled: isOpen, children: (0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", display: "inline-flex", flexShrink: 0, children: (0, jsx_runtime_1.jsx)(react_2.PopoverTrigger, { children: trigger }) }) })) : ((0, jsx_runtime_1.jsx)(react_2.PopoverTrigger, { children: trigger })), (0, jsx_runtime_1.jsx)(react_2.PopoverContent, { "aria-label": ariaLabel, minW: menuMinWidth, maxW: "calc(100vw - 32px)", w: "auto", 
                 // NOTE: Chakra's --popper-bg is hardcoded white via dead _dark — without an explicit bg the panel stayed white.
                 bg: theme.colors.surfaceRaised, borderRadius: "xl", overflow: "hidden", boxShadow: "float", _focus: { outline: "none", boxShadow: "float" }, children: (0, jsx_runtime_1.jsxs)(react_2.PopoverBody, { p: 0, children: [showSearch && ((0, jsx_runtime_1.jsx)(react_2.Box, { p: 2, borderBottom: "1px solid", borderColor: searchRule, children: (0, jsx_runtime_1.jsxs)(react_2.InputGroup, { size: "sm", children: [(0, jsx_runtime_1.jsx)(react_2.InputLeftElement, { pointerEvents: "none", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Search, { size: 15, color: theme.colors.textMuted }) }), (0, jsx_runtime_1.jsx)(react_2.Input, { ref: searchRef, placeholder: "Search organizations", value: query, onChange: (e) => setQuery(e.target.value), onKeyDown: (e) => {
                                             if (e.key === "ArrowDown" && filtered.length > 0) {
@@ -123,7 +131,7 @@ const OrgSwitcher = ({ organizations, value, onChange, isLoading = false, isSear
                                             optionRefs.current[idx] = el;
                                             if (idx === 0)
                                                 firstOptionRef.current = el;
-                                        }, tabIndex: idx === activeIndex ? 0 : -1, align: "center", gap: "10px", w: "100%", textAlign: "left", border: "none", fontFamily: "inherit", px: 3, py: 2, cursor: "pointer", bg: "transparent", transition: BACKGROUND_TRANSITION, ...(0, optionRowInk_1.optionRowCursorSx)(rowBackgrounds), onClick: () => handleSelect(org), children: [(0, jsx_runtime_1.jsx)(Avatar, { org: org, boxSize: s.avatar, fontSize: s.sub }), (0, jsx_runtime_1.jsxs)(react_2.Box, { flex: "1", minW: 0, children: [(0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: s.font, fontWeight: isActive ? 600 : 500, color: theme.colors.text[900], overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: org.name }), showRole && org.role && ((0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: s.sub, color: theme.colors.text[500], overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: org.role }))] }), isActive && ((0, jsx_runtime_1.jsx)(react_2.Box, { as: lucide_react_1.Check, size: 16, color: theme.colors.accentText, flexShrink: 0 }))] }, org.id));
+                                        }, tabIndex: idx === activeIndex ? 0 : -1, align: "center", gap: "10px", w: "calc(100% - 0.5rem)", mx: 1, textAlign: "left", border: "none", fontFamily: "inherit", px: 3, py: 2, borderRadius: optionRowSizes_1.OPTION_ROW_RADIUS, cursor: "pointer", bg: isActive ? rowBackgrounds.selected : "transparent", transition: BACKGROUND_TRANSITION, _hover: { bg: isActive ? rowBackgrounds.selectedActive : rowBackgrounds.active }, _focus: { bg: isActive ? rowBackgrounds.selectedActive : rowBackgrounds.active }, _focusVisible: keyboardRing, onClick: () => handleSelect(org), children: [(0, jsx_runtime_1.jsx)(Avatar, { org: org, boxSize: s.avatar, fontSize: s.sub }), (0, jsx_runtime_1.jsxs)(react_2.Box, { flex: "1", minW: 0, children: [(0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: s.font, fontWeight: (0, optionRowInk_1.optionRowWeight)(isActive), color: (0, selectRowInk_1.selectRowInk)(theme.colors, isActive), overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: org.name }), showRole && org.role && ((0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: s.sub, color: (0, selectRowInk_1.selectRowDescriptionInk)(theme.colors), overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: org.role }))] }), isActive && ((0, jsx_runtime_1.jsx)(react_2.Box, { as: lucide_react_1.Check, size: 16, color: theme.colors.accentText, flexShrink: 0 }))] }, org.id));
                                 }), filtered.length === 0 && ((0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", color: theme.colors.textMuted, textAlign: "center", py: 6, children: "No organizations found" }))] })] }) })] }));
 };
 exports.default = OrgSwitcher;

package/dist/Components/OrgSwitcher/OrgSwitcherProps.d.ts

@@ -1,6 +1,7 @@
 import { type ChartMode } from "../../Theme/tokens/builders/chartColorsFromTheme";
 /** One organization in the switcher's list; `id` is matched against `value` to find the active one. */
 export interface OrgOption {
+    /** Unique key; compared with `value` to mark the active organization and passed to `onChange`. */
     id: string | number;
     /** Organization display name. */
     name: string;

package/dist/Components/OrganizationDetails/OrganizationDetailsProps.d.ts

@@ -1,8 +1,11 @@
 import { ReactNode } from "react";
 /** One organization row — active or invited — rendered as a card in OrganizationDetails' grid. */
 export type OrganizationItem = {
+    /** Unique per card (React key); passed to every per-organization callback and matched against the `*OrgIds` spinner arrays. */
     orgId: number;
+    /** Card title; seeds the inline rename field, and renames are sent trimmed through `onEditOrganization`. */
     company_name: string;
+    /** Invited cards only: shown as a line with a globe icon; ignored on active cards. */
     company_url?: string;
     /** 1 when this org is the user's default org. */
     default: number;
@@ -10,6 +13,7 @@ export type OrganizationItem = {
     uiInvite?: number;
     /** Distinct from `default` above — only gates delete-protection, not the Default badge/set-default flow. */
     defaultOrg: number;
+    /** Shown as a tag on active cards; "Super Admin" is what `canRename` and `canDelete` default to allowing. */
     roleName?: string;
     /** True when the current user owns this org; the app computes ownership. */
     isOwner?: boolean;
@@ -25,8 +29,11 @@ export type OrganizationItem = {
 };
 /** Local form state for CreateOrgModal — the shape onSubmit receives when the create form is confirmed. */
 export type CreateOrgFormValues = {
+    /** Organization name entered in the create form; required, and trimmed before submit. */
     company_name: string;
+    /** Address entered in the create form; required, and trimmed before submit. */
     company_address: string;
+    /** Trimmed phone; the built-in form requires it with at least 8 digits even though it is typed optional. */
     phone?: string;
     /** @deprecated Dead — never populated by the built-in CreateOrgModal, no known consumer usage. */
     default?: number;
@@ -35,53 +42,95 @@ export type CreateOrgFormValues = {
 };
 /** All copy in OrganizationDetails is overridable here; unset fields fall back to its built-in DEFAULT_LABELS. */
 export type OrganizationDetailsLabels = {
+    /** Header title, default "Hello, User!"; when `userName` is set, "User" is replaced by that name. */
     greeting?: string;
+    /** Header subtitle under the greeting. Default "Manage your organizations". */
     manageSubtitle?: string;
+    /** Not rendered by the current UI. */
     organizationDetails?: string;
+    /** Header button that opens the create modal. Default "Create New Organization". */
     createNewOrganization?: string;
+    /** Create modal title and the empty-state button. Default "Create Organization". */
     createOrganization?: string;
+    /** Heading of the active organizations section. Default "Active Organizations". */
     activeOrganizations?: string;
+    /** Heading of the invitations section. Default "Invited Organizations". */
     invitedOrganizations?: string;
+    /** Link on a non-default active card that calls `onSetDefault`. Default "Set as Default". */
     setAsDefault?: string;
+    /** Text beside the spinner while the card's id is in `switchingOrgIds`. Default "Setting...". */
     settingDefault?: string;
+    /** Badge on the card where `default` is 1. Default "Default". */
     default?: string;
+    /** Tag shown when `isOwner` is true. Default "Owner". */
     owner?: string;
+    /** Badge on invited cards. Default "Pending". */
     pending?: string;
+    /** Accept button on invited cards. Default "Accept". */
     accept?: string;
+    /** Accept button text while the id is in `respondingOrgIds`. Default "Accepting...". */
     accepting?: string;
+    /** Decline button on invited cards. Default "Decline". */
     decline?: string;
+    /** Accessible name of the delete icon, and its tooltip on an unprotected card. Default "Delete Organization". */
     deleteOrganization?: string;
+    /** Tooltip on a disabled delete icon when `deleteDisabledReason` is not set. Default "Protected organization". */
     protectedOrganization?: string;
+    /** Confirm button in the delete modal. Default "Delete". */
     delete?: string;
+    /** Accessible name and tooltip of the rename pencil. Default "Edit organization name". */
     editOrganization?: string;
+    /** Accessible name of the inline rename save button. Default "Save". */
     save?: string;
+    /** Not rendered by the current UI. */
     saving?: string;
+    /** Error shown when a rename is saved blank. Default "Organization name cannot be empty". */
     emptyNameError?: string;
+    /** Empty-state title when there are no active or invited organizations. Default "No organizations found". */
     noOrganizationsTitle?: string;
+    /** Empty-state description under the title. */
     noOrganizationsDescription?: string;
+    /** Create form field label. Default "Company Name". */
     companyName?: string;
+    /** Create form field label. Default "Company Address". */
     companyAddress?: string;
+    /** Create form field label. Default "Phone". */
     phone?: string;
+    /** Cancel button in the create and delete modals and the rename cancel button. Default "Cancel". */
     cancel?: string;
+    /** Submit button of the create form. Default "Submit". */
     submit?: string;
+    /** Create form error for an empty required field. Default "This field is required". */
     requiredField?: string;
+    /** Create form error for a phone with fewer than 8 digits. */
     invalidPhone?: string;
+    /** Delete modal title. Default "Confirm Deletion". */
     confirmDeletion?: string;
+    /** Delete modal body question. */
     deleteConfirmText?: string;
+    /** Not rendered by the built-in UI; put footer text in `footerSlot`. */
     copyright?: string;
+    /** Not rendered by the built-in UI; put footer links in `footerSlot`. */
     termsOfService?: string;
 };
 /** Payload for the public onCreateOrganization callback — company_address/phone optional here, unlike CreateOrgFormValues. */
 export interface CreateOrganizationValues {
+    /** Organization name, trimmed; required by the built-in form. */
     company_name: string;
+    /** Address, trimmed; the built-in form requires it. */
     company_address?: string;
+    /** Trimmed phone; the built-in form requires 8 or more digits. */
     phone?: string;
 }
 /** Admin panel for the org list — rename/delete/create/invites/default; not a session switcher (see OrgSwitcher for picking the active org). */
 export interface OrganizationDetailsProps {
+    /** Organizations the user belongs to; each renders a card with rename, delete and set-default controls. */
     activeOrganizations: OrganizationItem[];
+    /** Pending invitations; each renders a card with Accept and Decline buttons. */
     invitedOrganizations: OrganizationItem[];
+    /** Replaces both sections with six skeleton cards while true. Defaults to false. */
     isLoading?: boolean;
+    /** Puts the create modal's submit button into its loading state. Defaults to false. */
     isCreating?: boolean;
     /** orgIds currently switching to default (shows a spinner on that card) */
     switchingOrgIds?: number[];
@@ -97,6 +146,7 @@ export interface OrganizationDetailsProps {
     onSetDefault?: (orgId: number) => void | Promise<void>;
     /** Same as onSetDefault — not awaited internally; respondingOrgIds is entirely consumer-managed. */
     onAcceptInvite?: (orgId: number) => void | Promise<void>;
+    /** Fires with the invitation's orgId on Decline; the button has no built-in loading state. */
     onDeclineInvite?: (orgId: number) => void | Promise<void>;
     /**
      * Called once the built-in confirm modal is accepted. Never called when
@@ -115,7 +165,9 @@ export interface OrganizationDetailsProps {
     onEditOrganization?: (orgId: number, newName: string) => void | Promise<void>;
     /** Back icon renders only when this is provided, not merely disabled when omitted. */
     onBack?: () => void;
+    /** Rendered below the sections, above the modals; use it for copyright or terms links. */
     footerSlot?: ReactNode;
+    /** Partial copy overrides; unset keys keep the English defaults. */
     labels?: OrganizationDetailsLabels;
 }
 /** Props for the internal create-org modal; `labels` needs only the subset of OrganizationDetailsLabels it renders. */

package/dist/Components/PageHeader/PageHeaderProps.d.ts

@@ -11,6 +11,7 @@ export interface PageHeaderProps extends Omit<HTMLAttributes<HTMLDivElement>, "t
     breadcrumbs?: ReactNode;
     /** Avatar or icon left of the title; `titleAddon` sits inline after it (status Tag). */
     leading?: ReactNode;
+    /** Rendered inline right after the h1, e.g. a status Tag; wraps under a long title. */
     titleAddon?: ReactNode;
     /** Wrapping row of muted xs items under the subtitle (owner, updated-at, etc.). */
     meta?: ReactNode;

package/dist/Components/Pagination/PaginationProps.d.ts

@@ -1,7 +1,9 @@
 import type { ControlSize } from "../../Theme/tokens/primitives/controlSizes";
 /** Screen-reader names, merged over `defaultPaginationLabels`; override them all for another language. */
 export interface PaginationLabels {
+    /** Accessible name of the previous-page button. */
     previous: string;
+    /** Accessible name of the next-page button. */
     next: string;
     /** Names a numbered button from its 1-based page, e.g. (3) => "Page 3". */
     page: (page: number) => string;
@@ -40,7 +42,9 @@ export type PaginationProps = PaginationCount & {
     isDisabled?: boolean;
     /** Names the nav landmark; defaults to "Pagination". Give each pager on a screen its own. */
     "aria-label"?: string;
+    /** Overrides the default English names; unset keys keep their default. */
     labels?: Partial<PaginationLabels>;
+    /** Test id on the nav element. */
     "data-testid"?: string;
 };
 export {};

package/dist/Components/PaymentOption/PaymentOptionProps.d.ts

@@ -3,6 +3,7 @@ import type { ReactNode } from "react";
 export interface PaymentOptionProps {
     /** Identifies the option inside a `PaymentOptionGroup`; required there. */
     value?: string;
+    /** Method name; also the row's accessible name when selectable. */
     title: string;
     /** Muted line under the title, e.g. "Pay on delivery · ₹50 handling fee". */
     subtitle?: string;
@@ -12,21 +13,29 @@ export interface PaymentOptionProps {
     offer?: string;
     /** Standalone selection state; ignored inside a group, where the group's value decides. */
     selected?: boolean;
+    /** Called when the row is chosen; also fires inside a group, after the group updates. */
     onSelect?: () => void;
     /** Dims the row and drops it from the tab order, e.g. COD above the order limit; say why in `subtitle`. */
     disabled?: boolean;
     /** Revealed under the row only while it is selected, e.g. a UPI id input. Interactive content here sits outside the radio. */
     children?: ReactNode;
+    /** Test id on the row's outer element. */
     "data-testid"?: string;
 }
 /** Radiogroup of `PaymentOption`s with a roving tab stop; arrow keys move focus and selection together. */
 export interface PaymentOptionGroupProps {
+    /** Selected option's `value`; controls the group when set. */
     value?: string;
+    /** Initially selected `value` when the group is uncontrolled. */
     defaultValue?: string;
+    /** Called with the new `value` when selection changes by click or arrow key. */
     onValueChange?: (value: string) => void;
     /** Direct `PaymentOption` children; wrapping them in another component hides their `value` from the roving tab stop. */
     children: ReactNode;
+    /** Accessible name of the radiogroup; give this or `aria-labelledby`. */
     "aria-label"?: string;
+    /** Id of the element that names the radiogroup. */
     "aria-labelledby"?: string;
+    /** Test id on the radiogroup element. */
     "data-testid"?: string;
 }