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

package/dist/Components/NotificationCenter/row/rowMenu.js

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isDecision = exports.visibleActionsFor = exports.quickActionsFor = exports.rowScope = void 0;
+const lucide_react_1 = require("lucide-react");
+const grouping_1 = require("../core/grouping");
+const rowScope = (item, thread, isThreadOpen) => (thread && !isThreadOpen ? (0, grouping_1.threadEntries)(thread) : [item]);
+exports.rowScope = rowScope;
+const quickActionsFor = (item, scope, shared) => {
+    const { features, labels, actions } = shared;
+    const { entry, state } = item;
+    const ids = scope.map((member) => member.entry.id);
+    const list = [];
+    if (features.markRead && entry.isRead !== undefined) {
+        const unread = scope.some((member) => member.entry.isRead === false);
+        list.push({
+            id: "read",
+            label: unread ? labels.markRead : labels.markUnread,
+            icon: unread ? lucide_react_1.MailOpen : lucide_react_1.Mail,
+            run: () => actions.setRead(ids, unread),
+        });
+    }
+    if (features.archive && state.zone === "activity") {
+        list.push({ id: "archive", label: labels.archive, icon: lucide_react_1.Archive, run: () => actions.archive(ids) });
+    }
+    if (features.restore && state.zone === "archived") {
+        list.push({ id: "restore", label: labels.restore, icon: lucide_react_1.ArchiveRestore, run: () => actions.restore(ids) });
+    }
+    actions.extraActionsFor(entry).forEach((extra) => {
+        list.push({ id: extra.id, label: extra.label, icon: extra.icon, run: () => actions.runExtraAction(entry, extra) });
+    });
+    return list;
+};
+exports.quickActionsFor = quickActionsFor;
+const visibleActionsFor = (entry, features) => { var _a; return ((_a = entry.actions) !== null && _a !== void 0 ? _a : []).filter((action) => action.href !== undefined || features.decide); };
+exports.visibleActionsFor = visibleActionsFor;
+const isDecision = (action) => action.href === undefined;
+exports.isDecision = isDecision;

package/dist/Components/NotificationCenter/row/rowParts.d.ts

@@ -0,0 +1,40 @@
+import type { AvatarSize } from "../../Avatar/AvatarProps";
+import type { NotificationEntry, NotificationLabels, NotificationTitlePart } from "../core/NotificationSourceProps";
+import type { NotificationFormatter } from "../core/NotificationEngineProps";
+import type { ResolvedCategory } from "./category";
+export declare const ROW_PLANE_VAR = "--nc-row-bg";
+interface TitleTextProps {
+    parts: NotificationTitlePart[];
+    isUnread: boolean;
+}
+export declare const TitleText: ({ parts, isUnread }: TitleTextProps) => import("react/jsx-runtime").JSX.Element;
+export declare const useToneTile: (tone: ResolvedCategory["tone"]) => import("../../../Theme/tokens/builders/statusTone").StatusTone;
+interface RowLeadingProps {
+    entry: NotificationEntry;
+    category: ResolvedCategory;
+    size: AvatarSize;
+}
+export declare const RowLeading: ({ entry, category, size }: RowLeadingProps) => import("react/jsx-runtime").JSX.Element;
+interface RowTimeProps {
+    at: number;
+    now: number;
+    format: NotificationFormatter;
+}
+export declare const RowTime: ({ at, now, format }: RowTimeProps) => import("react/jsx-runtime").JSX.Element;
+interface RowContextProps {
+    entry: NotificationEntry;
+    waitingDays: number | null;
+    labels: NotificationLabels;
+}
+export declare const RowContext: ({ entry, waitingDays, labels }: RowContextProps) => import("react/jsx-runtime").JSX.Element | null;
+interface RowPreviewProps {
+    text: string;
+    isLarge: boolean;
+}
+export declare const RowPreview: ({ text, isLarge }: RowPreviewProps) => import("react/jsx-runtime").JSX.Element;
+interface ChangeChipsProps {
+    change: NonNullable<NotificationEntry["change"]>;
+    labels: NotificationLabels;
+}
+export declare const ChangeChips: ({ change, labels }: ChangeChipsProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/Components/NotificationCenter/row/rowParts.js

@@ -0,0 +1,72 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ChangeChips = exports.RowPreview = exports.RowContext = exports.RowTime = exports.RowLeading = exports.useToneTile = exports.TitleText = exports.ROW_PLANE_VAR = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = require("@chakra-ui/react");
+const lucide_react_1 = require("lucide-react");
+const Primitives_1 = require("../../Primitives/Primitives");
+const Avatar_1 = __importDefault(require("../../Avatar/Avatar"));
+const Tag_1 = __importDefault(require("../../Tag/Tag"));
+const VisuallyHidden_1 = __importDefault(require("../../VisuallyHidden/VisuallyHidden"));
+const useCustomTheme_1 = require("../../../Theme/useCustomTheme");
+const accentText_1 = require("../../../Theme/tokens/builders/accentText");
+const statusTone_1 = require("../../../Theme/tokens/builders/statusTone");
+const tone_1 = require("../../../Theme/tokens/builders/tone");
+const planeStep_1 = require("../../../Theme/tokens/builders/planeStep");
+const borderWidths_1 = require("../../../Theme/tokens/primitives/borderWidths");
+const radii_1 = require("../../../Theme/tokens/primitives/radii");
+const typography_1 = require("../../../Theme/tokens/primitives/typography");
+exports.ROW_PLANE_VAR = "--nc-row-bg";
+const TitleText = ({ parts, isUnread }) => {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    return ((0, jsx_runtime_1.jsx)(react_2.chakra.span, { color: isUnread ? colors.text[800] : colors.text[700], children: parts.map((part, index) => typeof part === "string" ? ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: part }, index)) : ((0, jsx_runtime_1.jsx)(react_2.chakra.strong, { fontWeight: isUnread ? 600 : 500, color: isUnread ? colors.header[900] : colors.text[800], children: part.b }, index))) }));
+};
+exports.TitleText = TitleText;
+const LEAD_BOX = {
+    "2xs": "1rem",
+    xs: "1.5rem",
+    sm: "2rem",
+    md: "2.5rem",
+    lg: "3rem",
+    xl: "4rem",
+};
+const useToneTile = (tone) => {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    return (0, statusTone_1.resolveStatusTone)((0, tone_1.toneScale)(colors, tone), (0, accentText_1.isDarkCanvas)(colors.backgroundColor.main) ? "dark" : "light");
+};
+exports.useToneTile = useToneTile;
+const RowLeading = ({ entry, category, size }) => {
+    const tile = (0, exports.useToneTile)(category.tone);
+    const iconPx = size === "md" || size === "lg" || size === "xl" ? 18 : 16;
+    if (entry.actor) {
+        return ((0, jsx_runtime_1.jsxs)(Primitives_1.Box, { position: "relative", flexShrink: 0, boxSize: LEAD_BOX[size], "aria-hidden": "true", children: [(0, jsx_runtime_1.jsx)(Avatar_1.default, { name: entry.actor.name, src: entry.actor.avatarUrl, size: size }), (0, jsx_runtime_1.jsx)(Primitives_1.Flex, { position: "absolute", right: "-0.375rem", bottom: "-0.375rem", boxSize: "1.25rem", align: "center", justify: "center", borderRadius: "full", bg: tile.bg, color: tile.fg, border: `${borderWidths_1.BORDER_WIDTHS.thick} solid var(${exports.ROW_PLANE_VAR})`, children: (0, jsx_runtime_1.jsx)(Primitives_1.Icon, { as: category.icon, boxSize: "0.625rem", strokeWidth: 2.5 }) })] }));
+    }
+    return ((0, jsx_runtime_1.jsx)(Primitives_1.Flex, { flexShrink: 0, boxSize: LEAD_BOX[size], align: "center", justify: "center", borderRadius: radii_1.RADIUS_ROLE.media, bg: tile.bg, color: tile.fg, "aria-hidden": "true", children: (0, jsx_runtime_1.jsx)(Primitives_1.Icon, { as: category.icon, boxSize: `${iconPx / 16}rem` }) }));
+};
+exports.RowLeading = RowLeading;
+const RowTime = ({ at, now, format }) => {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    return ((0, jsx_runtime_1.jsxs)(react_2.chakra.time, { dateTime: format.iso(at), title: format.absolute(at, now), flexShrink: 0, fontSize: "xs", color: colors.textMuted, whiteSpace: "nowrap", sx: typography_1.NUMERIC_TEXT, children: [(0, jsx_runtime_1.jsx)("span", { "aria-hidden": "true", children: format.shortAge(at, now) }), (0, jsx_runtime_1.jsx)(VisuallyHidden_1.default, { children: format.longAge(at, now) })] }));
+};
+exports.RowTime = RowTime;
+const RowContext = ({ entry, waitingDays, labels }) => {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    if (waitingDays === null && !entry.blocked && !entry.context)
+        return null;
+    return ((0, jsx_runtime_1.jsxs)(Primitives_1.Flex, { wrap: "wrap", align: "center", columnGap: 2, rowGap: 1, mt: 1, fontSize: "xs", lineHeight: "1.5", color: colors.textMuted, children: [waitingDays !== null && (0, jsx_runtime_1.jsx)(Tag_1.default, { size: "xs", tone: "warning", leadingIcon: lucide_react_1.Hourglass, label: labels.waiting(waitingDays) }), entry.blocked && (0, jsx_runtime_1.jsx)(Tag_1.default, { size: "xs", tone: "neutral", leadingIcon: lucide_react_1.Lock, label: labels.noAccess }), entry.context && (0, jsx_runtime_1.jsx)(react_2.chakra.span, { minW: 0, children: entry.context })] }));
+};
+exports.RowContext = RowContext;
+const RowPreview = ({ text, isLarge }) => {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    return ((0, jsx_runtime_1.jsx)(Primitives_1.Text, { mt: 1.5, pl: 2.5, borderLeft: `${borderWidths_1.BORDER_WIDTHS.thick} solid ${(0, planeStep_1.ruleOn)(colors, colors.surfaceRaised)}`, fontSize: isLarge ? "sm" : "xs-plus", lineHeight: "1.5", color: colors.text[700], noOfLines: 2, children: text }));
+};
+exports.RowPreview = RowPreview;
+const ChangeChips = ({ change, labels }) => {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    return ((0, jsx_runtime_1.jsxs)(Primitives_1.Flex, { align: "center", wrap: "wrap", gap: 1.5, color: colors.textMuted, children: [(0, jsx_runtime_1.jsx)(Tag_1.default, { size: "xs", tone: "neutral", label: change.from }), (0, jsx_runtime_1.jsx)(Primitives_1.Icon, { as: lucide_react_1.ChevronRight, boxSize: "0.75rem", "aria-hidden": "true" }), (0, jsx_runtime_1.jsx)(VisuallyHidden_1.default, { children: labels.changedTo }), (0, jsx_runtime_1.jsx)(Tag_1.default, { size: "xs", colorScheme: "primary", label: change.to })] }));
+};
+exports.ChangeChips = ChangeChips;

package/dist/Components/NotificationCenter/row/rowStyles.d.ts

@@ -0,0 +1,11 @@
+import type { SystemStyleObject } from "@chakra-ui/react";
+import type { NotificationRowVariant } from "./NotificationRowProps";
+import type { NotificationEntry } from "../core/NotificationSourceProps";
+export type RowButtonSize = "xs" | "sm" | "md";
+export declare const ROW_BUTTON_SIZE: Readonly<Record<NotificationRowVariant, RowButtonSize>>;
+export declare const iconSizeFor: (size: RowButtonSize) => number;
+export declare const WAITING_AFTER_DAYS = 3;
+export declare const TOUCH_TARGET_SX: SystemStyleObject;
+export declare const CHECKBOX_TOUCH_TARGET_SX: SystemStyleObject;
+export declare const touchTargetFor: (size: RowButtonSize) => SystemStyleObject | undefined;
+export declare const testIdFor: (entry: NotificationEntry, suffix: string) => string | undefined;

package/dist/Components/NotificationCenter/row/rowStyles.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.testIdFor = exports.touchTargetFor = exports.CHECKBOX_TOUCH_TARGET_SX = exports.TOUCH_TARGET_SX = exports.WAITING_AFTER_DAYS = exports.iconSizeFor = exports.ROW_BUTTON_SIZE = void 0;
+const controlSizes_1 = require("../../../Theme/tokens/primitives/controlSizes");
+exports.ROW_BUTTON_SIZE = {
+    panel: "xs",
+    inbox: "sm",
+    phone: "md",
+};
+const iconSizeFor = (size) => controlSizes_1.BUTTON_SIZES[size].iconSize;
+exports.iconSizeFor = iconSizeFor;
+exports.WAITING_AFTER_DAYS = 3;
+exports.TOUCH_TARGET_SX = {
+    "&::before": { content: '""', position: "absolute", inset: "-0.125rem" },
+};
+exports.CHECKBOX_TOUCH_TARGET_SX = {
+    "@media (pointer: coarse)": {
+        "& label": { position: "relative" },
+        "& label::before": { content: '""', position: "absolute", inset: "-0.875rem" },
+    },
+};
+const touchTargetFor = (size) => size === "md" ? exports.TOUCH_TARGET_SX : undefined;
+exports.touchTargetFor = touchTargetFor;
+const testIdFor = (entry, suffix) => entry.testId ? `${entry.testId}-${suffix}` : undefined;
+exports.testIdFor = testIdFor;

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

@@ -1,3 +1,22 @@
-import React from "react";
-import { NumberInputProps } from "./NumberInputProps";
-export default function NumberInput({ defaultValue, min, max, precision, step, clampValueOnBlur, keepWithinRange, value, onChange, size, maxW, allowMouseWheel, NumberIncrementStepperBg, NumberIncrementStepperActive, NumberIncrementStepperChildren, NumberDecrementStepperBg, NumberDecrementStepperChildren, NumberDecrementStepperActive, label, isInformation, informationMessage, isRequired, id, width, minW, ...props }: NumberInputProps): React.JSX.Element;
+/** Labelled numeric field with the shared helper/error row; `isRequired` propagates natively via `FormControl`. */
+declare const NumberInput: import("react").ForwardRefExoticComponent<Pick<import("@chakra-ui/react").NumberInputProps, "maxW" | "max" | "min" | "size" | "defaultValue" | "onBlur" | "onChange" | "step" | "isDisabled" | "name" | "value" | "isReadOnly" | "precision" | "clampValueOnBlur" | "keepWithinRange" | "allowMouseWheel"> & {
+    NumberIncrementStepperBg?: string;
+    NumberIncrementStepperActive?: import("./NumberInputProps").ActiveStyle;
+    NumberIncrementStepperChildren?: string;
+    NumberDecrementStepperBg?: string;
+    NumberDecrementStepperChildren?: string;
+    NumberDecrementStepperActive?: import("./NumberInputProps").ActiveStyle;
+    label?: string;
+    isInformation?: boolean;
+    informationMessage?: string;
+    isRequired?: boolean;
+    id?: string;
+    error?: boolean;
+    errorMessage?: string;
+    helperText?: string;
+    placeholder?: string;
+    width?: string;
+    minW?: string;
+    maxW?: string;
+} & import("react").RefAttributes<HTMLInputElement>>;
+export default NumberInput;

package/dist/Components/NumberInput/NumberInput.js

@@ -1,41 +1,17 @@
 "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 __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 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 react_2 = require("react");
+const FormLabel_1 = require("../Common/FormLabel");
+const FieldMessage_1 = __importDefault(require("../Common/FieldMessage"));
+const useFieldIds_1 = require("../Common/useFieldIds");
+/** Labelled numeric field with the shared helper/error row; `isRequired` propagates natively via `FormControl`. */
+const NumberInput = (0, react_2.forwardRef)(function NumberInput({ defaultValue, min, max, precision, step, clampValueOnBlur, keepWithinRange, value, onChange, onBlur, name, size, maxW, allowMouseWheel, NumberIncrementStepperBg, NumberIncrementStepperActive, NumberIncrementStepperChildren, NumberDecrementStepperBg, NumberDecrementStepperChildren, NumberDecrementStepperActive, label, isInformation, informationMessage, isRequired, id, width = "100%", minW, error, errorMessage, helperText, placeholder, isDisabled, isReadOnly, ...props }, ref) {
+    const ids = (0, useFieldIds_1.useFieldIds)(id, { error, errorMessage, helperText });
+    return ((0, jsx_runtime_1.jsxs)(react_1.FormControl, { w: width, minW: minW, maxW: maxW, isRequired: isRequired, children: [label && ((0, jsx_runtime_1.jsx)(FormLabel_1.TextLabel, { label: label, id: ids.inputId, isInformation: isInformation, informationMessage: informationMessage, isRequired: isRequired })), (0, jsx_runtime_1.jsxs)(react_1.NumberInput, { defaultValue: defaultValue, min: min, max: max, step: step, precision: precision, clampValueOnBlur: clampValueOnBlur, keepWithinRange: keepWithinRange, value: value, onChange: onChange, onBlur: onBlur, name: name, size: size, maxW: maxW, allowMouseWheel: allowMouseWheel, id: ids.inputId, isInvalid: error, isDisabled: isDisabled, isReadOnly: isReadOnly, "aria-describedby": ids.describedBy, ...props, children: [(0, jsx_runtime_1.jsx)(react_1.NumberInputField, { ref: ref, placeholder: placeholder }), (0, jsx_runtime_1.jsxs)(react_1.NumberInputStepper, { children: [(0, jsx_runtime_1.jsx)(react_1.NumberIncrementStepper, { bg: NumberIncrementStepperBg, _active: NumberIncrementStepperActive, sx: { flex: "none" }, children: NumberIncrementStepperChildren }), (0, jsx_runtime_1.jsx)(react_1.NumberDecrementStepper, { bg: NumberDecrementStepperBg, _active: NumberDecrementStepperActive, sx: { flex: "none" }, children: NumberDecrementStepperChildren })] })] }), (0, jsx_runtime_1.jsx)(FieldMessage_1.default, { error: error, errorMessage: errorMessage, helperText: helperText, helperId: ids.helperId, errorId: ids.errorId })] }));
+});
 exports.default = NumberInput;
-var react_1 = __importDefault(require("react"));
-var react_2 = require("@chakra-ui/react");
-var FormLabel_1 = require("../Common/FormLabel");
-function NumberInput(_a) {
-    var defaultValue = _a.defaultValue, min = _a.min, max = _a.max, precision = _a.precision, step = _a.step, clampValueOnBlur = _a.clampValueOnBlur, keepWithinRange = _a.keepWithinRange, value = _a.value, onChange = _a.onChange, size = _a.size, maxW = _a.maxW, allowMouseWheel = _a.allowMouseWheel, NumberIncrementStepperBg = _a.NumberIncrementStepperBg, NumberIncrementStepperActive = _a.NumberIncrementStepperActive, NumberIncrementStepperChildren = _a.NumberIncrementStepperChildren, NumberDecrementStepperBg = _a.NumberDecrementStepperBg, NumberDecrementStepperChildren = _a.NumberDecrementStepperChildren, NumberDecrementStepperActive = _a.NumberDecrementStepperActive, label = _a.label, isInformation = _a.isInformation, informationMessage = _a.informationMessage, isRequired = _a.isRequired, id = _a.id, _b = _a.width, width = _b === void 0 ? "100%" : _b, minW = _a.minW, props = __rest(_a, ["defaultValue", "min", "max", "precision", "step", "clampValueOnBlur", "keepWithinRange", "value", "onChange", "size", "maxW", "allowMouseWheel", "NumberIncrementStepperBg", "NumberIncrementStepperActive", "NumberIncrementStepperChildren", "NumberDecrementStepperBg", "NumberDecrementStepperChildren", "NumberDecrementStepperActive", "label", "isInformation", "informationMessage", "isRequired", "id", "width", "minW"]);
-    return (react_1.default.createElement(react_2.FormControl, { w: width, minW: minW, maxW: maxW },
-        label && (react_1.default.createElement(FormLabel_1.TextLabel, { label: label, id: id, isInformation: isInformation, informationMessage: informationMessage, isRequired: isRequired })),
-        react_1.default.createElement(react_2.NumberInput, __assign({ defaultValue: defaultValue, min: min, max: max, step: step, precision: precision, clampValueOnBlur: clampValueOnBlur, keepWithinRange: keepWithinRange, value: value, onChange: onChange, size: size, maxW: maxW, allowMouseWheel: allowMouseWheel }, props),
-            react_1.default.createElement(react_2.NumberInputField, null),
-            react_1.default.createElement(react_2.NumberInputStepper, null,
-                react_1.default.createElement(react_2.NumberIncrementStepper, { bg: NumberIncrementStepperBg, _active: NumberIncrementStepperActive }, NumberIncrementStepperChildren),
-                react_1.default.createElement(react_2.NumberDecrementStepper, { bg: NumberDecrementStepperBg, _active: NumberDecrementStepperActive }, NumberDecrementStepperChildren)))));
-}

package/dist/Components/NumberInput/NumberInput.styles.js

@@ -1,84 +1,29 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.NumberInput = void 0;
-exports.NumberInput = {
-    baseStyle: {
-        field: {
-            fontWeight: 500,
-            fontSize: "0.875rem",
-            letterSpacing: "0.044rem",
-            pt: "0.813rem",
-            pb: "0.813rem",
-            borderRadius: "0.25rem",
-            _placeholder: {
-                fontStyle: "italic",
-            },
-        },
-    },
-    sizes: {
-        md: {
-            field: {
-                h: "2.75rem",
-                fontSize: "0.875rem",
-            },
+const TextInput_styles_1 = require("../Input/TextInput.styles");
+const controlSizes_1 = require("../../Theme/tokens/primitives/controlSizes");
+const stepperSizes = Object.fromEntries(controlSizes_1.CONTROL_SIZE_NAMES.map((size) => {
+    const half = `calc(${controlSizes_1.CONTROL_SIZES[size].height} / 2)`;
+    return [
+        size,
+        {
+            stepperGroup: { width: "1.5rem", height: controlSizes_1.CONTROL_SIZES[size].height },
+            stepper: { height: half, fontSize: "0.5rem", boxSizing: "border-box" },
         },
-    },
+    ];
+}));
+const numberInputSizes = (0, TextInput_styles_1.fieldSizes)("field");
+for (const size of controlSizes_1.CONTROL_SIZE_NAMES) {
+    Object.assign(numberInputSizes[size], stepperSizes[size]);
+}
+exports.NumberInput = {
+    sizes: numberInputSizes,
     variants: {
-        outline: function (props) {
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
-            var theme = props.theme;
-            var errorColor = (_c = (_b = (_a = theme.colors.semantic) === null || _a === void 0 ? void 0 : _a.error) === null || _b === void 0 ? void 0 : _b[500]) !== null && _c !== void 0 ? _c : "red.500";
-            var borderColor = (_e = (_d = theme.colors.boxborder) === null || _d === void 0 ? void 0 : _d[500]) !== null && _e !== void 0 ? _e : "gray.300";
-            var shadowPrimary = (_g = (_f = theme.colors.boxShadow) === null || _f === void 0 ? void 0 : _f.primary) !== null && _g !== void 0 ? _g : "blue.100";
-            var shadowError = (_j = (_h = theme.colors.boxShadow) === null || _h === void 0 ? void 0 : _h.error) !== null && _j !== void 0 ? _j : "red.100";
-            var primary = (_l = (_k = theme.colors.primary) === null || _k === void 0 ? void 0 : _k[500]) !== null && _l !== void 0 ? _l : "blue.500";
-            return {
-                field: {
-                    bg: (_o = (_m = theme.colors.gray) === null || _m === void 0 ? void 0 : _m[50]) !== null && _o !== void 0 ? _o : "gray.50",
-                    border: "0.063rem solid",
-                    borderColor: borderColor,
-                    _hover: {
-                        borderColor: primary,
-                        // boxShadow: `0 0 0 0.125rem ${shadowPrimary}`,
-                        outline: "0"
-                    },
-                    _focus: {
-                        borderColor: primary,
-                        boxShadow: "0 0 0 0.125rem ".concat(shadowPrimary),
-                        outline: "0"
-                    },
-                    _invalid: {
-                        borderColor: errorColor,
-                        boxShadow: "0 0 0 0.125rem ".concat(shadowError),
-                        _hover: {
-                            borderColor: errorColor,
-                            // boxShadow: `0 0 0 0.125rem ${shadowError}`,
-                            outline: "0"
-                        },
-                        _focus: {
-                            borderColor: errorColor,
-                            boxShadow: "0 0 0 0.125rem ".concat(shadowError),
-                            outline: "0"
-                        },
-                    },
-                    _readOnly: {
-                        boxShadow: 'inherit',
-                    },
-                    _disabled: {
-                        bg: (_q = (_p = theme.colors.gray) === null || _p === void 0 ? void 0 : _p[100]) !== null && _q !== void 0 ? _q : "gray.100",
-                        opacity: 1,
-                        cursor: "not-allowed",
-                        _hover: {
-                            border: "0.063rem solid",
-                            borderColor: borderColor,
-                        },
-                    },
-                },
-            };
-        },
+        outline: ({ theme }) => ({ field: (0, TextInput_styles_1.fieldPartStyles)(theme.colors) }),
     },
     defaultProps: {
         variant: "outline",
-        size: "md",
+        size: controlSizes_1.DEFAULT_CONTROL_SIZE,
     },
 };

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

@@ -1,20 +1,42 @@
 import { NumberInputProps as chakraNumbetInpurProps } from "@chakra-ui/react";
-export type NumberInputProps = Pick<chakraNumbetInpurProps, "defaultValue" | "min" | "max" | "precision" | "step" | "clampValueOnBlur" | "keepWithinRange" | "value" | "onChange" | "size" | "maxW" | "allowMouseWheel"> & {
+/** Picks a safe subset of Chakra's NumberInput props and adds label/stepper-color props of its own. */
+export type NumberInputProps = Pick<chakraNumbetInpurProps, "defaultValue" | "min" | "max" | "precision" | "step" | "clampValueOnBlur" | "keepWithinRange" | "value" | "onChange" | "size" | "maxW" | "allowMouseWheel" | "onBlur" | "name" | "isDisabled" | "isReadOnly"> & {
+    /** NumberIncrementStepperChildren/NumberDecrementStepperChildren accept only a string, not an icon — omit them to keep Chakra's default chevrons. */
     NumberIncrementStepperBg?: string;
+    /** Background of the increment button while pressed. */
     NumberIncrementStepperActive?: ActiveStyle;
+    /** Replaces the increment chevron with this text. */
     NumberIncrementStepperChildren?: string;
+    /** Background of the decrement button; defaults to Chakra's stepper style. */
     NumberDecrementStepperBg?: string;
+    /** Replaces the decrement chevron with this text. */
     NumberDecrementStepperChildren?: string;
+    /** Background of the decrement button while pressed. */
     NumberDecrementStepperActive?: ActiveStyle;
     label?: string;
+    /** Shows an info icon beside the label; needs both `label` and `informationMessage` to render. */
     isInformation?: boolean;
+    /** Tooltip text for the info icon; ignored unless `isInformation` is true. */
     informationMessage?: string;
+    /** Shows the label asterisk and sets native `required` via FormControl. */
     isRequired?: boolean;
     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. */
+    errorMessage?: string;
+    /** Shown under the field when there is no error; linked via `aria-describedby`. */
+    helperText?: string;
+    /** Hint text inside the empty field. */
+    placeholder?: string;
+    /** Width of the whole field; defaults to `"100%"`. */
     width?: string;
+    /** Applied to the whole field wrapper. */
     minW?: string;
+    /** Applied to both the field wrapper and the number input. */
     maxW?: string;
 };
+/** Background applied to a stepper button's `_active` (pressed) state. */
 export type ActiveStyle = {
     bg: string;
 };

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

@@ -0,0 +1,4 @@
+import type { OffersListProps } from "./OffersListProps";
+/** One collapsed tonal row ("Offers (3) · Best: ...") that opens into the full list with copy-code buttons; renders nothing for no offers. */
+declare const OffersList: ({ offers, bestOfferId, isOpen, defaultOpen, onOpenChange, onCopy, labels, "data-testid": testId, }: OffersListProps) => import("react/jsx-runtime").JSX.Element | null;
+export default OffersList;

package/dist/Components/OffersList/OffersList.js

@@ -0,0 +1,86 @@
+"use strict";
+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 lucide_react_1 = require("lucide-react");
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const motion_1 = require("../../Theme/tokens/primitives/motion");
+const typography_1 = require("../../Theme/tokens/primitives/typography");
+const motion_2 = require("../../Theme/chakra/motion");
+const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
+const tonalHover_1 = require("../CheckoutKit/tonalHover");
+const COPIED_MS = 1600;
+const DEFAULT_LABELS = {
+    summary: (count, best) => `Offers (${count}) · Best: ${best}`,
+    summaryCount: (count) => `Offers (${count})`,
+    copy: "Copy",
+    copied: "Copied",
+    copyCode: (code) => `Copy code ${code}`,
+    copiedMessage: (code) => `Code ${code} copied`,
+};
+const writeToClipboard = (code) => {
+    var _a;
+    try {
+        const pending = (_a = navigator.clipboard) === null || _a === void 0 ? void 0 : _a.writeText(code);
+        pending === null || pending === void 0 ? void 0 : pending.catch(() => undefined);
+    }
+    catch {
+        return;
+    }
+};
+/** One collapsed tonal row ("Offers (3) · Best: ...") that opens into the full list with copy-code buttons; renders nothing for no offers. */
+const OffersList = ({ offers, bestOfferId, isOpen, defaultOpen = false, onOpenChange, onCopy, labels, "data-testid": testId, }) => {
+    var _a;
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const hoverFill = (0, tonalHover_1.tonalHover)(colors);
+    const panelId = (0, react_1.useId)();
+    const [innerOpen, setInnerOpen] = (0, react_1.useState)(defaultOpen);
+    const [copiedId, setCopiedId] = (0, react_1.useState)(null);
+    const [message, setMessage] = (0, react_1.useState)("");
+    const timer = (0, react_1.useRef)();
+    const copy = { ...DEFAULT_LABELS, ...labels };
+    const open = isOpen !== null && isOpen !== void 0 ? isOpen : innerOpen;
+    (0, react_1.useEffect)(() => () => clearTimeout(timer.current), []);
+    if (offers.length === 0)
+        return null;
+    const best = (_a = offers.find((offer) => offer.id === bestOfferId)) !== null && _a !== void 0 ? _a : offers[0];
+    const summary = offers.length === 1
+        ? `${best.title} · ${best.detail}`
+        : best.title
+            ? copy.summary(offers.length, best.title)
+            : copy.summaryCount(offers.length);
+    const toggle = () => {
+        const next = !open;
+        if (isOpen === undefined)
+            setInnerOpen(next);
+        onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(next);
+    };
+    const copyCode = (offer, code) => {
+        writeToClipboard(code);
+        setCopiedId(offer.id);
+        setMessage(copy.copiedMessage(code));
+        clearTimeout(timer.current);
+        timer.current = setTimeout(() => {
+            setCopiedId(null);
+            setMessage("");
+        }, COPIED_MS);
+        onCopy === null || onCopy === void 0 ? void 0 : onCopy(offer);
+    };
+    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { bg: colors.background[100], borderRadius: "xl", overflow: "hidden", "data-testid": testId, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { as: "button", type: "button", w: "100%", minH: "3rem", px: 4, py: 3, align: "center", gap: 3, textAlign: "left", borderRadius: "xl", color: colors.header[900], "aria-expanded": open, "aria-controls": panelId, onClick: toggle, transition: (0, motion_1.transitionFor)(["background-color"]), _hover: { bg: hoverFill }, sx: { ...(0, focusRing_styles_1.focusVisibleStyles)(colors), ...(0, motion_2.reducedMotionSx)() }, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", "aria-hidden": true, display: "inline-flex", flexShrink: 0, color: colors.accentText, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Tag, { size: 18 }) }), (0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", flex: "1", minW: 0, fontSize: "sm", fontWeight: 600, noOfLines: open ? undefined : 1, children: summary }), (0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", "aria-hidden": true, display: "inline-flex", flexShrink: 0, color: colors.textMuted, transform: open ? "rotate(180deg)" : "rotate(0deg)", transition: (0, motion_1.transitionFor)(["transform"]), sx: (0, motion_2.reducedMotionSx)(), children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { size: 18 }) })] }), (0, jsx_runtime_1.jsx)(react_2.Box, { id: panelId, hidden: !open, children: (0, jsx_runtime_1.jsx)(react_2.Box, { as: "ul", listStyleType: "none", m: 0, px: 4, pb: 2, children: offers.map((offer) => {
+                        const copied = copiedId === offer.id;
+                        const { code } = offer;
+                        return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { as: "li", position: "relative", align: "center", justify: "space-between", gap: 3, py: 3, sx: {
+                                "&:not(:first-of-type)::before": {
+                                    content: '""',
+                                    position: "absolute",
+                                    top: 0,
+                                    left: 0,
+                                    right: 0,
+                                    height: "1px",
+                                    background: colors.background[200],
+                                },
+                            }, children: [(0, jsx_runtime_1.jsxs)(react_2.Box, { minW: 0, children: [(0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", fontWeight: 600, color: colors.header[900], children: offer.title }), (0, jsx_runtime_1.jsx)(react_2.Text, { mt: 0.5, fontSize: "sm", lineHeight: 1.45, color: colors.textMuted, children: offer.detail })] }), code ? ((0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 1, flexShrink: 0, children: [(0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", px: 2.5, py: 1, borderRadius: "md", bg: colors.background[200], color: colors.header[900], fontSize: "xs", fontWeight: 700, letterSpacing: "0.06em", sx: typography_1.NUMERIC_TEXT, children: code }), (0, jsx_runtime_1.jsxs)(react_2.Flex, { as: "button", type: "button", align: "center", gap: 1.5, minH: "2.75rem", px: 3, borderRadius: "lg", fontSize: "sm", fontWeight: 600, color: colors.accentText, "aria-label": copied ? undefined : copy.copyCode(code), onClick: () => copyCode(offer, code), transition: (0, motion_1.transitionFor)(["background-color"]), _hover: { bg: hoverFill }, sx: { ...(0, focusRing_styles_1.focusVisibleStyles)(colors), ...(0, motion_2.reducedMotionSx)() }, children: [copied ? (0, jsx_runtime_1.jsx)(lucide_react_1.Check, { size: 16, "aria-hidden": true }) : null, (0, jsx_runtime_1.jsx)("span", { children: copied ? copy.copied : copy.copy })] })] })) : null] }, offer.id));
+                    }) }) }), (0, jsx_runtime_1.jsx)(react_2.VisuallyHidden, { "aria-live": "polite", children: message })] }));
+};
+exports.default = OffersList;

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

@@ -0,0 +1,45 @@
+/** 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 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;
+    /** Screen-reader announcement after a copy, given the code. */
+    copiedMessage: (code: string) => string;
+}
+/** 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/OffersList/OffersListProps.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

@@ -0,0 +1,4 @@
+import type { OptionChipProps } from "./OptionChipProps";
+/** The one selectable option control: text chip, colour swatch, image tile or pack. Parent group supplies the radiogroup. */
+declare const OptionChip: import("react").ForwardRefExoticComponent<OptionChipProps & import("react").RefAttributes<HTMLButtonElement>>;
+export default OptionChip;