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

package/dist/esm/Components/CheckoutKit/selectable.js

@@ -0,0 +1,115 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Children, createContext, isValidElement, useContext, useMemo, useState } from "react";
+import { Box, Flex } from "@chakra-ui/react";
+import { Check } from "lucide-react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { DISABLED_OPACITY } from "../../Theme/tokens/primitives/states.js";
+import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
+import { reducedMotionSx } from "../../Theme/chakra/motion.js";
+import { focusVisibleRing } from "../../Theme/chakra/focusRing.styles.js";
+import { onFilled } from "../../Theme/tokens/builders/accentText.js";
+import { tonalHover } from "./tonalHover.js";
+import { isActivationKey } from "../Common/activationKey.js";
+const GroupContext = createContext(null);
+export const useSelectableGroup = () => useContext(GroupContext);
+const firstEnabledValue = (children) => {
+    for (const child of Children.toArray(children)) {
+        if (!isValidElement(child))
+            continue;
+        const { value, disabled, isDisabled } = child.props;
+        if (typeof value === "string" && !disabled && !isDisabled)
+            return value;
+    }
+    return undefined;
+};
+const STEP = { ArrowDown: 1, ArrowRight: 1, ArrowUp: -1, ArrowLeft: -1 };
+/** Radiogroup with a roving tab stop; arrows move focus and selection together, like native radios. */
+export const SelectableGroup = ({ value, defaultValue, onValueChange, gap = 3, columns = 1, children, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "data-testid": testId, }) => {
+    const [inner, setInner] = useState(defaultValue);
+    const current = value !== null && value !== void 0 ? value : inner;
+    const state = useMemo(() => ({
+        value: current,
+        tabStop: current !== null && current !== void 0 ? current : firstEnabledValue(children),
+        select: (next) => {
+            if (value === undefined)
+                setInner(next);
+            if (next !== current)
+                onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(next);
+        },
+    }), [current, children, value, onValueChange]);
+    const onKeyDown = (event) => {
+        const edge = event.key === "Home" ? 0 : event.key === "End" ? -1 : null;
+        const step = STEP[event.key];
+        if (edge === null && step === undefined)
+            return;
+        const radios = Array.from(event.currentTarget.querySelectorAll('[role="radio"]:not([aria-disabled="true"])'));
+        const at = radios.indexOf(document.activeElement);
+        if (at < 0)
+            return;
+        event.preventDefault();
+        const index = edge === null ? (at + step + radios.length) % radios.length : edge < 0 ? radios.length - 1 : 0;
+        const target = radios[index];
+        target.focus();
+        const next = target.getAttribute("data-value");
+        if (next !== null)
+            state.select(next);
+    };
+    return (_jsx(GroupContext.Provider, { value: state, children: _jsx(Flex, { role: "radiogroup", "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, direction: "column", gap: gap, ...(columns > 1 ? { display: "grid", gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))` } : {}), onKeyDown: onKeyDown, "data-testid": testId, children: children }) }));
+};
+/** Tonal card surface; selection is a 2px ink ring plus a check, never colour alone. */
+export const selectableSurface = (colors, { selected, disabled, interactive, ringed }) => ({
+    bg: colors.background[100],
+    borderRadius: "2xl",
+    boxShadow: selected ? `inset 0 0 0 2px ${colors.header[900]}` : "none",
+    opacity: disabled ? DISABLED_OPACITY : 1,
+    transition: transitionFor(["background-color", "box-shadow"]),
+    _hover: interactive && !selected && !disabled ? { bg: tonalHover(colors) } : undefined,
+    sx: { ...(ringed ? focusVisibleRing(colors) : {}), ...reducedMotionSx() },
+});
+/** The 20px circle that carries selection state beside the text. */
+export const RadioIndicator = ({ selected }) => {
+    const { colors } = useCustomTheme();
+    const fill = colors.header[900];
+    return (_jsx(Box, { as: "span", "aria-hidden": true, display: "inline-flex", alignItems: "center", justifyContent: "center", boxSize: "1.25rem", flexShrink: 0, borderRadius: "full", bg: selected ? fill : "transparent", color: onFilled(fill, colors.white, colors.black), boxShadow: selected ? "none" : `inset 0 0 0 1.5px ${colors.textMuted}`, transition: transitionFor(["background-color", "box-shadow"]), sx: reducedMotionSx(), children: selected && _jsx(Check, { size: 12, strokeWidth: 3 }) }));
+};
+/** Radio inside a group, toggle button when only `onSelect` is given, inert otherwise. */
+export const useSelectable = ({ value, selected, disabled, onSelect, }) => {
+    const group = useSelectableGroup();
+    const [ringed, setRinged] = useState(false);
+    const inGroup = group !== null && value !== undefined;
+    const isSelected = inGroup ? group.value === value : !!selected;
+    const interactive = (inGroup || !!onSelect) && !disabled;
+    const choose = () => {
+        if (!interactive)
+            return;
+        if (inGroup)
+            group.select(value);
+        onSelect === null || onSelect === void 0 ? void 0 : onSelect();
+    };
+    const props = {
+        role: inGroup ? "radio" : onSelect ? "button" : undefined,
+        "aria-checked": inGroup ? isSelected : undefined,
+        "aria-pressed": !inGroup && onSelect ? isSelected : undefined,
+        tabIndex: inGroup ? (group.tabStop === value && !disabled ? 0 : -1) : onSelect && !disabled ? 0 : undefined,
+        "data-value": inGroup ? value : undefined,
+        onClick: choose,
+        onKeyDown: (event) => {
+            if (event.target !== event.currentTarget)
+                return;
+            if (isActivationKey(event)) {
+                event.preventDefault();
+                choose();
+            }
+        },
+        onFocus: (event) => {
+            try {
+                setRinged(event.currentTarget.matches(":focus-visible"));
+            }
+            catch {
+                setRinged(true);
+            }
+        },
+        onBlur: () => setRinged(false),
+    };
+    return { isSelected, interactive, inGroup, ringed, props };
+};

package/dist/esm/Components/CheckoutKit/tonalHover.js

@@ -0,0 +1,2 @@
+import { bandOn } from "../../Theme/tokens/builders/planeStep.js";
+export const tonalHover = (colors, rest = colors.background[100], fill = colors.background[200]) => bandOn(fill, rest);

package/dist/esm/Components/ChoiceCard/ChoiceCard.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+import { Box, Flex, Text } from "@chakra-ui/react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { RadioIndicator, selectableSurface, useSelectable } from "../CheckoutKit/selectable.js";
+/** 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 } = useCustomTheme();
+    const uid = useId();
+    const labelId = `${uid}-label`;
+    const descriptionId = `${uid}-description`;
+    const { isSelected, interactive, inGroup, ringed, props } = useSelectable({ value, disabled });
+    return (_jsx(Flex, { direction: "column", "data-testid": testId, "data-selected": isSelected || undefined, ...selectableSurface(colors, { selected: isSelected && inGroup, disabled, interactive, ringed }), children: _jsxs(Flex, { ...props, "data-radio": true, "aria-disabled": inGroup && disabled ? true : undefined, "aria-labelledby": props.role ? labelId : undefined, "aria-describedby": props.role && description ? descriptionId : undefined, align: "center", gap: 3, p: 4, borderRadius: "2xl", cursor: interactive ? "pointer" : "default", outline: "none", children: [inGroup && _jsx(RadioIndicator, { selected: isSelected }), icon && (_jsx(Flex, { as: "span", "aria-hidden": true, align: "center", justify: "center", boxSize: 10, flexShrink: 0, borderRadius: "xl", bg: colors.background[50], color: colors.header[900], children: icon })), _jsxs(Box, { flex: 1, minW: 0, children: [_jsx(Text, { as: "span", id: labelId, display: "block", fontSize: "sm", fontWeight: 600, lineHeight: 1.4, color: colors.header[900], children: label }), description && (_jsx(Text, { as: "span", id: descriptionId, display: "block", fontSize: "xs", lineHeight: 1.4, color: colors.textMuted, children: description }))] })] }) }));
+};
+export default ChoiceCard;

package/dist/esm/Components/ChoiceCard/ChoiceCardGroup.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { SelectableGroup } from "../CheckoutKit/selectable.js";
+/** Radiogroup that lays out `ChoiceCard`s in one or more columns and manages the single selection. */
+const ChoiceCardGroup = (props) => _jsx(SelectableGroup, { ...props });
+export default ChoiceCardGroup;

package/dist/esm/Components/ChoiceCard/ChoiceCardProps.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/Components/CircularProgress/CircularProgress.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Flex, chakra } from "@chakra-ui/react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { resolveSoftTone, toneScale } from "../../Theme/tokens/builders/tone.js";
+import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
+import { NUMERIC_TEXT } from "../../Theme/tokens/primitives/typography.js";
+import { reducedMotionSx } from "../../Theme/chakra/motion.js";
+import { arcGeometry, resolveDiameter } from "./arc.js";
+const Circle = chakra("circle");
+const scaleFor = (colors, tone) => tone === "info" ? colors.primary : toneScale(colors, tone);
+/** Ring-shaped determinate progress with a centred label — for a linear bar use ProgressBar. */
+const CircularProgress = ({ value, max = 100, size = "md", thickness, tone = "info", label, "aria-label": ariaLabel, "data-testid": testId, }) => {
+    const { colors } = useCustomTheme();
+    const { diameter, thickness: defaultStroke, label: labelSize } = resolveDiameter(size);
+    const stroke = thickness !== null && thickness !== void 0 ? thickness : defaultStroke;
+    const { radius, circumference, fraction, clamped, safeMax, dashOffset } = arcGeometry(diameter, stroke, value, max);
+    const ink = resolveSoftTone(colors, scaleFor(colors, tone), colors.background[50]).fg;
+    const center = diameter / 2;
+    const valueText = typeof label === "string" || typeof label === "number" ? String(label) : undefined;
+    return (_jsxs(Box, { role: "progressbar", "aria-label": ariaLabel, "aria-valuenow": clamped, "aria-valuemin": 0, "aria-valuemax": safeMax, "aria-valuetext": valueText, "data-testid": testId, position: "relative", display: "inline-flex", flexShrink: 0, boxSize: `${diameter}px`, children: [_jsxs("svg", { width: diameter, height: diameter, viewBox: `0 0 ${diameter} ${diameter}`, "aria-hidden": true, focusable: "false", children: [_jsx(Circle, { cx: center, cy: center, r: radius, fill: "none", sx: { stroke: colors.backgroundColor.subtle, strokeWidth: stroke } }), _jsx(Circle, { cx: center, cy: center, r: radius, fill: "none", "data-testid": testId ? `${testId}-arc` : undefined, sx: {
+                            stroke: ink,
+                            strokeWidth: stroke,
+                            strokeLinecap: "round",
+                            strokeDasharray: circumference,
+                            strokeDashoffset: dashOffset,
+                            strokeOpacity: fraction > 0 ? 1 : 0,
+                            transform: "rotate(-90deg)",
+                            transformOrigin: "50% 50%",
+                            transition: transitionFor(["stroke-dashoffset"]),
+                            ...reducedMotionSx(),
+                        } })] }), label !== undefined && label !== null && (_jsx(Flex, { position: "absolute", inset: 0, align: "center", justify: "center", fontSize: labelSize, fontWeight: 600, lineHeight: 1, color: colors.header[900], sx: NUMERIC_TEXT, children: label }))] }));
+};
+export default CircularProgress;

package/dist/esm/Components/CircularProgress/CircularProgressProps.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/Components/CircularProgress/arc.js

@@ -0,0 +1,24 @@
+export const SIZE_PX = { sm: 32, md: 48, lg: 72 };
+export const THICKNESS_PX = { sm: 4, md: 5, lg: 7 };
+export const LABEL_REM = { sm: "0.625rem", md: "0.75rem", lg: "1rem" };
+export const MIN_DIAMETER = 24;
+export const MAX_DIAMETER = 160;
+export const resolveDiameter = (size) => {
+    if (typeof size === "string")
+        return { diameter: SIZE_PX[size], thickness: THICKNESS_PX[size], label: LABEL_REM[size] };
+    const diameter = Math.min(Math.max(Number.isFinite(size) ? Math.round(size) : SIZE_PX.md, MIN_DIAMETER), MAX_DIAMETER);
+    return {
+        diameter,
+        thickness: Math.min(Math.max(Math.round(diameter / 10), 3), 12),
+        label: `${Math.min(Math.max(Math.round(diameter / 4), 10), 32) / 16}rem`,
+    };
+};
+export const clampValue = (value, max) => Number.isFinite(value) ? Math.min(Math.max(value, 0), max) : 0;
+export const arcGeometry = (diameter, thickness, value, max) => {
+    const safeMax = max > 0 ? max : 100;
+    const clamped = clampValue(value, safeMax);
+    const radius = Math.max((diameter - thickness) / 2, 0);
+    const circumference = 2 * Math.PI * radius;
+    const fraction = clamped / safeMax;
+    return { radius, circumference, fraction, clamped, safeMax, dashOffset: circumference * (1 - fraction) };
+};

package/dist/esm/Components/Commerce/commerceTypes.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/Components/Commerce/commerceVariants.js

@@ -0,0 +1,41 @@
+export const LOW_STOCK_THRESHOLD = 5;
+export function stockState(variant, threshold = LOW_STOCK_THRESHOLD) {
+    if (!variant || variant.stock === undefined)
+        return "in-stock";
+    if (variant.stock > 0)
+        return variant.stock <= threshold ? "low-stock" : "in-stock";
+    return variant.backorder ? "backorder" : "out-of-stock";
+}
+const sellable = (variant) => stockState(variant) !== "out-of-stock";
+const matches = (variant, selection) => Object.entries(selection).every(([axisId, valueId]) => variant.options[axisId] === valueId);
+export function selectionComplete(axes, selection) {
+    return axes.every((axis) => selection[axis.id] !== undefined);
+}
+export function findVariant(axes, variants, selection) {
+    if (!selectionComplete(axes, selection))
+        return undefined;
+    return variants.find((variant) => matches(variant, selection));
+}
+/** A value is offered when some sellable variant has it alongside the other axes' current picks. */
+export function isOptionAvailable(variants, selection, axisId, valueId) {
+    const probe = { ...selection, [axisId]: valueId };
+    return variants.some((variant) => sellable(variant) && matches(variant, probe));
+}
+export function remainingStock(variants, selection, axisId, valueId) {
+    const probe = { ...selection, [axisId]: valueId };
+    const hits = variants.filter((variant) => matches(variant, probe) && sellable(variant));
+    if (hits.length === 0 || hits.some((variant) => variant.stock === undefined))
+        return undefined;
+    return hits.reduce((sum, variant) => { var _a; return sum + ((_a = variant.stock) !== null && _a !== void 0 ? _a : 0); }, 0);
+}
+export function priceRange(variants) {
+    if (variants.length === 0)
+        return null;
+    const prices = variants.map((variant) => variant.price);
+    return { min: Math.min(...prices), max: Math.max(...prices) };
+}
+export function firstAvailableSelection(variants) {
+    var _a;
+    const first = (_a = variants.find(sellable)) !== null && _a !== void 0 ? _a : variants[0];
+    return first ? { ...first.options } : {};
+}

package/dist/esm/Components/Commerce/index.js

@@ -0,0 +1,2 @@
+export * from "./commerceTypes.js";
+export * from "./commerceVariants.js";

package/dist/esm/Components/Commerce/useContainerWidth.js

@@ -0,0 +1,21 @@
+import { useLayoutEffect, useState } from "react";
+/** Width of the referenced element, or undefined until measurable (SSR, jsdom, no ResizeObserver). */
+export const useContainerWidth = (ref) => {
+    const [width, setWidth] = useState(undefined);
+    useLayoutEffect(() => {
+        const node = ref.current;
+        if (!node)
+            return undefined;
+        const measure = () => {
+            const next = node.getBoundingClientRect().width;
+            setWidth(next > 0 ? Math.round(next) : undefined);
+        };
+        measure();
+        if (typeof ResizeObserver === "undefined")
+            return undefined;
+        const observer = new ResizeObserver(measure);
+        observer.observe(node);
+        return () => observer.disconnect();
+    }, [ref]);
+    return width;
+};

package/dist/esm/Components/Common/ErrorMessage.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Flex, Text } from "@chakra-ui/react";
+import { CircleAlert } from "lucide-react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { fieldMessageStyles } from "./fieldMessageStyles.js";
+// `id` lets a field point `aria-describedby` here; `role="alert"` announces once.
+const ErrorMessage = ({ errorMessage, id }) => {
+    const { colors } = useCustomTheme();
+    return (_jsxs(Flex, { id: id, role: "alert", align: "flex-start", gap: "0.25rem", ...fieldMessageStyles(colors), color: colors.semanticText.error, children: [_jsx(Flex, { as: "span", h: "1.125rem", align: "center", flexShrink: 0, "aria-hidden": true, children: _jsx(CircleAlert, { size: 12 }) }), _jsx(Text, { as: "span", children: errorMessage })] }));
+};
+export default ErrorMessage;

package/dist/esm/Components/Common/FieldMessage.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import ErrorMessage from "./ErrorMessage.js";
+import HelperText from "./HelperText.js";
+import { fieldMessageVisibility } from "./fieldMessageStyles.js";
+/** The single message row under a field: error when `error`, else helper, else nothing. */
+const FieldMessage = ({ error, errorMessage, helperText, helperId, errorId }) => {
+    const { showError, showHelper } = fieldMessageVisibility({ error, errorMessage, helperText });
+    if (showError && errorMessage)
+        return _jsx(ErrorMessage, { id: errorId, errorMessage: errorMessage });
+    if (showHelper && helperText)
+        return _jsx(HelperText, { id: helperId, helperText: helperText });
+    return null;
+};
+export default FieldMessage;

package/dist/esm/Components/Common/FormLabel.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Icon } from "@chakra-ui/react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { InfoIcon } from "lucide-react";
+import ToolTip from "../ToolTip/ToolTip.js";
+import { fontSizes } from "../../Theme/tokens/primitives/typography.js";
+/** The one field-label look (13px / 500 / `text[700]`); `Label` and `TextLabel` both read it. */
+export const fieldLabelStyles = (colors) => ({
+    color: colors.text[700],
+    fontWeight: 500,
+    fontSize: fontSizes["xs-plus"],
+    lineHeight: "1.2",
+    mb: "0.375rem",
+});
+/** Renders a real `<label htmlFor>` only when `id` is given, else a `<span>`. */
+export const TextLabel = ({ label, id, isRequired = false, isInformation = false, informationMessage = "", fontSize, showTooltip, tooltipLabel, clampLines, inline = false, }) => {
+    const theme = useCustomTheme();
+    const clampStyles = clampLines ? {
+        display: "-webkit-box",
+        WebkitLineClamp: clampLines,
+        WebkitBoxOrient: "vertical",
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        whiteSpace: "normal",
+    } : {};
+    const base = fieldLabelStyles(theme.colors);
+    const wrapperStyles = {
+        ...base,
+        display: inline ? "inline-flex" : "block",
+        alignItems: inline ? "center" : undefined,
+        mb: inline ? 0 : base.mb,
+        fontSize: fontSize !== null && fontSize !== void 0 ? fontSize : base.fontSize,
+    };
+    const content = (_jsxs(Box, { as: "span", display: "inline-flex", alignItems: "center", gap: "0.35rem", children: [showTooltip ? (_jsx(ToolTip, { label: tooltipLabel !== null && tooltipLabel !== void 0 ? tooltipLabel : label, hasArrow: true, placement: "top", fontSize: "xs", children: _jsx(Box, { as: "span", sx: clampStyles, children: label }) })) : (_jsx(Box, { as: "span", sx: clampStyles, children: label })), isRequired && (_jsx("span", { "aria-hidden": "true", style: { color: theme.colors.semanticText.error, marginLeft: "0.125rem" }, children: "*" })), isInformation && informationMessage && (_jsx(ToolTip, { label: informationMessage, hasArrow: true, placement: "top", fontSize: "xs", children: _jsx(Icon, { as: InfoIcon, color: theme.colors.text[700], boxSize: 3.5 }) }))] }));
+    // NOTE: real <label> only with a control id — Checkbox/Radio render this inline inside their own <label>.
+    return id ? (_jsx(Box, { as: "label", htmlFor: id, ...wrapperStyles, children: content })) : (_jsx(Box, { as: "span", ...wrapperStyles, children: content }));
+};

package/dist/esm/Components/Common/HelperText.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { FormHelperText, Text, chakra, useFormControlContext, useFormControlStyles } from "@chakra-ui/react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { fieldMessageStyles } from "./fieldMessageStyles.js";
+const UnregisteredHelperText = ({ helperText, id, style }) => {
+    const styles = useFormControlStyles();
+    return (_jsx(chakra.div, { id: id, ...style, __css: styles.helperText, className: "chakra-form__helper-text", children: helperText }));
+};
+/** Always renders `helperText`; prefer `FieldMessage`, which swaps it for the error. */
+const HelperText = ({ helperText, id }) => {
+    const theme = useCustomTheme();
+    const field = useFormControlContext();
+    const style = fieldMessageStyles(theme.colors);
+    if (!field) {
+        return (_jsx(Text, { id: id, ...style, children: helperText }));
+    }
+    // NOTE: FormHelperText makes Chakra append a dangling `<fieldId>-helptext` to aria-describedby.
+    if (id)
+        return _jsx(UnregisteredHelperText, { helperText: helperText, id: id, style: style });
+    return _jsx(FormHelperText, { ...style, children: helperText });
+};
+export default HelperText;

package/dist/esm/Components/Common/activationKey.js

@@ -0,0 +1,7 @@
+export const isActivationKey = (event) => event.key === "Enter" || event.key === " ";
+export const onActivationKey = (activate) => (event) => {
+    if (!isActivationKey(event))
+        return;
+    event.preventDefault();
+    activate(event);
+};

package/dist/esm/Components/Common/chipTriggerSize.js

@@ -0,0 +1,11 @@
+import { CONTROL_SIZES } from "../../Theme/tokens/primitives/controlSizes.js";
+const CHIP_TAG_HEIGHT_PX = { xs: 20, sm: 24 };
+const CONTROL_BORDER_PX = 2;
+const controlHeightPx = (size) => parseFloat(CONTROL_SIZES[size].height) * 16;
+const chipRowPaddingY = (size, chipSize) => `${(controlHeightPx(size) - CHIP_TAG_HEIGHT_PX[chipSize] - CONTROL_BORDER_PX) / 2 / 16}rem`;
+/** Sizes a select trigger so a chip row lands on the same height as a plain one. */
+export const chipTriggerSizeStyles = (size, hasChips, chipSize = "sm") => {
+    const spec = CONTROL_SIZES[size];
+    const base = { minH: spec.height, fontSize: spec.fontSize, px: spec.paddingX };
+    return hasChips ? { ...base, py: chipRowPaddingY(size, chipSize) } : { ...base, h: spec.height };
+};

package/dist/esm/Components/Common/dataAttributes.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/Components/Common/fieldMessageStyles.js

@@ -0,0 +1,14 @@
+import { fontSizes } from "../../Theme/tokens/primitives/typography.js";
+export const FIELD_MESSAGE_GAP = "0.25rem";
+/** Shared type for helper and error text, so switching between them never shifts the row. */
+export const fieldMessageStyles = (colors) => ({
+    mt: FIELD_MESSAGE_GAP,
+    fontSize: fontSizes.xs,
+    lineHeight: "1.125rem",
+    color: colors.textMuted,
+});
+/** One rule for every field: the error replaces the helper, never both. */
+export const fieldMessageVisibility = ({ error = false, errorMessage, helperText, }) => ({
+    showError: error && Boolean(errorMessage),
+    showHelper: !error && Boolean(helperText),
+});

package/dist/esm/Components/Common/fieldStyles.js

@@ -0,0 +1,72 @@
+import { CONTROL_SIZES } from "../../Theme/tokens/primitives/controlSizes.js";
+import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
+import { RADIUS_ROLE } from "../../Theme/tokens/primitives/radii.js";
+import { placeholderInk } from "../../Theme/tokens/builders/placeholderInk.js";
+import { AA_NON_TEXT, liftToContrast } from "../../Theme/tokens/builders/outlineRung.js";
+import { fieldFocusVisible, focusGlowShadow } from "../../Theme/chakra/focusRing.styles.js";
+export const FIELD_RADIUS = RADIUS_ROLE.field;
+export const FIELD_BORDER_WIDTH = "1px";
+/** No box-shadow: the focus ring must be present the frame focus lands, not fade in. */
+export const FIELD_TRANSITION = transitionFor(["border-color", "background-color"]);
+/** Chakra `h`/`fontSize`/`px` for a field or select of this size. */
+export const controlSizeStyles = (size) => {
+    const spec = CONTROL_SIZES[size];
+    return { h: spec.height, minH: spec.height, fontSize: spec.fontSize, px: spec.paddingX };
+};
+/** Resting border one step firmer, used on hover only. */
+export const fieldHoverBorder = (colors) => liftToContrast(colors.boxborder[500], colors.background[50], AA_NON_TEXT);
+/** Resting box (surface, border, radius) shared by every field, native or composite. */
+export const fieldBoxStyles = (colors) => ({
+    bg: colors.background[50],
+    borderWidth: FIELD_BORDER_WIDTH,
+    borderStyle: "solid",
+    borderColor: colors.boxborder[500],
+    borderRadius: FIELD_RADIUS,
+    transition: FIELD_TRANSITION,
+});
+/** Value text: 400 weight, no tracking. */
+export const fieldTextStyles = (colors) => ({
+    color: colors.text[900],
+    fontWeight: 400,
+    letterSpacing: "normal",
+});
+const disabledStyles = (colors) => ({
+    bg: colors.background[100],
+    color: colors.textMuted,
+    borderColor: colors.boxborder[500],
+    opacity: 1,
+    cursor: "not-allowed",
+});
+/** Full pseudo-state block for a native input/textarea/select (or a Chakra `field` part). */
+export const fieldControlStyles = (colors) => {
+    const disabled = disabledStyles(colors);
+    return {
+        ...fieldBoxStyles(colors),
+        ...fieldTextStyles(colors),
+        _placeholder: { color: placeholderInk(colors), opacity: 1 },
+        _hover: { borderColor: fieldHoverBorder(colors) },
+        _focusVisible: { borderColor: colors.primary[500], ...fieldFocusVisible(colors) },
+        _invalid: {
+            borderColor: colors.semanticText.error,
+            _hover: { borderColor: colors.semanticText.error },
+        },
+        _readOnly: { _hover: { borderColor: colors.boxborder[500] } },
+        _disabled: { ...disabled, _hover: { borderColor: disabled.borderColor } },
+    };
+};
+/** Box-only styles for composite fields that track state in JS (SelectV2, SearchSelect, date pickers). */
+export const getFieldStateStyles = (theme, { error = false, focused = false, disabled = false } = {}) => {
+    const { colors } = theme;
+    const borderColor = error
+        ? colors.semanticText.error
+        : focused
+            ? colors.primary[500]
+            : colors.boxborder[500];
+    const box = { ...fieldBoxStyles(colors), borderColor, boxShadow: focused ? focusGlowShadow(colors) : "none" };
+    if (!disabled)
+        return box;
+    const { bg, borderColor: disabledBorder, cursor } = disabledStyles(colors);
+    return { ...box, bg, borderColor: disabledBorder, cursor };
+};
+/** Glow for `_focusWithin` on composite fields. `error` is accepted but ignored: invalid is the border's job. */
+export const fieldFocusRing = (theme) => focusGlowShadow(theme.colors);

package/dist/esm/Components/Common/findSlot.js

@@ -0,0 +1,17 @@
+import React from "react";
+const isReactElement = (child) => child !== null && typeof child === "object" && "type" in child;
+// NOTE: matches by element type through nested Fragments, so `<>{cond && <Footer />}</>` is not dropped.
+export const findSlot = (children, slot) => {
+    for (const child of React.Children.toArray(children)) {
+        if (!isReactElement(child))
+            continue;
+        if (child.type === slot)
+            return child;
+        if (child.type === React.Fragment) {
+            const nested = findSlot(child.props.children, slot);
+            if (nested)
+                return nested;
+        }
+    }
+    return undefined;
+};

package/dist/esm/Components/Common/iconBox.js

@@ -0,0 +1,12 @@
+/** Centres a caller-supplied icon in a fixed box and pins its svg to that size, whatever size the caller gave it. */
+export const iconBoxSx = (px) => ({
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    lineHeight: 0,
+    flexShrink: 0,
+    "& > svg, & > * svg, & svg": {
+        width: `${px}px !important`,
+        height: `${px}px !important`,
+    },
+});

package/dist/esm/Components/Common/surfaceFocusRing.js

@@ -0,0 +1,3 @@
+import { FOCUS_HALO_WIDTH, FOCUS_RING_WIDTH } from "../../Theme/chakra/focusRing.styles.js";
+// NOTE: for chrome painted on a fixed dark surface, where the palette's focusRing pair is tuned for the page canvas instead.
+export const surfaceFocusRing = (surface, ring) => `0 0 0 ${FOCUS_HALO_WIDTH}px ${surface}, 0 0 0 ${FOCUS_RING_WIDTH}px ${ring}`;

package/dist/esm/Components/Common/useFieldIds.js

@@ -0,0 +1,23 @@
+import { useId } from "react";
+import { fieldMessageVisibility } from "./fieldMessageStyles.js";
+/** Stable ids for a field and its message row; `describedBy` points at whichever message is shown. */
+export const useFieldIds = (id, state = {}) => {
+    const generated = useId();
+    const inputId = id !== null && id !== void 0 ? id : `field-${generated.replace(/:/g, "")}`;
+    const helperId = `${inputId}-helper`;
+    const errorId = `${inputId}-error`;
+    const { showError, showHelper } = fieldMessageVisibility(state);
+    const describedBy = showError ? errorId : showHelper ? helperId : undefined;
+    return {
+        inputId,
+        labelId: `${inputId}-label`,
+        helperId,
+        errorId,
+        describedBy,
+        controlProps: {
+            id: inputId,
+            "aria-invalid": state.error ? true : undefined,
+            "aria-describedby": describedBy,
+        },
+    };
+};

package/dist/esm/Components/ConfirmDialog/ConfirmDialog.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useRef, useState } from "react";
+import { Modal, ModalOverlay, ModalContent, ModalHeader, ModalCloseButton, ModalBody, Box, Flex, HStack, VStack, Text, } from "@chakra-ui/react";
+import { AlertTriangle } from "lucide-react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { raisedRule } from "../../Theme/tokens/builders/surfaceRaised.js";
+import { resolveSoftTone } from "../../Theme/tokens/builders/tone.js";
+import Button from "../Button/Button.js";
+import TextInput from "../Input/TextInput.js";
+/** 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 } = useCustomTheme();
+    const cancelRef = useRef(null);
+    const [typedText, setTypedText] = useState("");
+    const requiresTypedConfirmation = confirmationText !== undefined;
+    const isAlternativeLoading = (alternative === null || alternative === void 0 ? void 0 : alternative.isLoading) === true;
+    const isConfirmDisabled = isConfirmLoading ||
+        isAlternativeLoading ||
+        isConfirmHeld ||
+        (requiresTypedConfirmation && typedText !== confirmationText);
+    const swatch = resolveSoftTone(colors, tone === "destructive" ? colors.semantic.error : colors.primary, colors.surfaceRaised);
+    const isEntityPrompt = entityName !== undefined;
+    const resolvedTitle = title !== null && title !== void 0 ? title : `Delete ${entityKind ? `${entityKind} ` : ""}"${entityName}"?`;
+    const dependentFacts = dependents ? dependents.filter(Boolean) : [];
+    const resolvedConsequence = consequence !== null && consequence !== void 0 ? consequence : (isEntityPrompt ? "This cannot be undone." : undefined);
+    const hasFacts = dependentFacts.length > 0 || resolvedConsequence !== undefined || (alternative === null || alternative === void 0 ? void 0 : alternative.description) !== undefined;
+    const actions = (_jsxs(HStack, { justifyContent: "flex-end", spacing: 3, pt: actionsPt, children: [_jsx(Button, { ref: cancelRef, label: cancelLabel, onClick: onClose, variant: "outline", colorScheme: "gray", size: "sm", isDisabled: disableCancelWhilePending && (isConfirmLoading || isAlternativeLoading) }), alternative && (_jsx(Button, { label: alternative.label, onClick: alternative.onSelect, colorScheme: "primary", size: "sm", isLoading: alternative.isLoading, loadingText: alternative.label, isDisabled: isConfirmLoading })), _jsx(Button, { label: confirmLabel, onClick: onConfirm, variant: alternative ? "outline" : undefined, colorScheme: tone === "destructive" ? "red" : "primary", size: "sm", isLoading: isConfirmLoading, isDisabled: isConfirmDisabled, leftIcon: confirmIcon })] }));
+    const facts = hasFacts && (_jsxs(VStack, { spacing: 3, align: "stretch", mt: bodyLayout === "flush" && children ? 3 : 0, mb: bodyLayout === "flush" ? 4 : 0, children: [dependentFacts.length > 0 && (_jsx(Text, { fontSize: "sm", fontWeight: 500, children: dependentFacts.join(" · ") })), resolvedConsequence !== undefined && (_jsx(Box, { fontSize: "sm", color: colors.textMuted, children: resolvedConsequence })), (alternative === null || alternative === void 0 ? void 0 : alternative.description) !== undefined && (_jsx(Box, { fontSize: "sm", p: 3, borderRadius: "md", border: "1px solid", borderColor: raisedRule(colors), children: alternative.description }))] }));
+    const body = requiresTypedConfirmation ? (_jsxs(_Fragment, { children: [children, facts, _jsx(TextInput, { label: confirmationLabel, value: typedText, onChange: (event) => setTypedText(event.target.value) })] })) : (_jsxs(_Fragment, { children: [children, facts] }));
+    return (_jsxs(Modal, { isOpen: isOpen, onClose: onClose, isCentered: isCentered, closeOnEsc: closeOnEsc, closeOnOverlayClick: closeOnOverlayClick, initialFocusRef: focusCancelOnOpen ? cancelRef : undefined, children: [_jsx(ModalOverlay, { backdropFilter: "blur(4px)" }), _jsxs(ModalContent, { bg: colors.surfaceRaised, borderRadius: "xl", overflow: "hidden", children: [_jsxs(ModalHeader, { borderBottom: "1px solid", borderColor: raisedRule(colors), display: "flex", alignItems: "center", gap: 3, children: [_jsx(Flex, { align: "center", justify: "center", boxSize: "36px", borderRadius: "full", bg: iconBg !== null && iconBg !== void 0 ? iconBg : swatch.bg, color: iconColor !== null && iconColor !== void 0 ? iconColor : swatch.fg, children: icon !== null && icon !== void 0 ? icon : _jsx(AlertTriangle, { size: 18 }) }), _jsx(Text, { fontSize: "1.05rem", fontWeight: 600, children: resolvedTitle })] }), _jsx(ModalCloseButton, {}), _jsx(ModalBody, { py: 6, children: bodyLayout === "stack" ? (_jsxs(VStack, { spacing: bodySpacing, align: "stretch", children: [body, actions] })) : (_jsxs(_Fragment, { children: [body, actions] })) })] })] }));
+};
+export default ConfirmDialog;

package/dist/esm/Components/ConfirmDialog/ConfirmDialogProps.js

@@ -0,0 +1 @@
+export {};