pixelize-design-library 2.4.2-beta.9 → 3.0.0

package/dist/esm/Components/Avatar/Avatar.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useState } from "react";
+import { Box, Flex, Image, VisuallyHidden } from "@chakra-ui/react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { toneInk } from "../../Theme/tokens/builders/tone.js";
+import { resolveAvatarColorway, initialsFor } from "./avatarColorway.js";
+import { DOT_SIZE, FONT_SIZE, SIZE_PX } from "./avatarSizing.js";
+const STATUS_TONE = {
+    online: "success", away: "warning", busy: "error", offline: "neutral",
+};
+const STATUS_LABEL = {
+    online: "Online", away: "Away", busy: "Busy", offline: "Offline",
+};
+/** Initials or image avatar with an optional status dot; `ref` is the outer box. */
+const Avatar = forwardRef(function Avatar({ name, src, size = "md", status, ariaLabel, getInitials, "data-testid": testId }, ref) {
+    const { colors } = useCustomTheme();
+    const [imageFailed, setImageFailed] = useState(false);
+    const px = SIZE_PX[size];
+    const showImage = Boolean(src) && !imageFailed;
+    const { bg, color } = resolveAvatarColorway(name, colors);
+    return (_jsxs(Box, { ref: ref, position: "relative", boxSize: `${px}px`, flexShrink: 0, "data-testid": testId, children: [showImage ? (_jsx(Image, { src: src, alt: name, boxSize: `${px}px`, borderRadius: "full", objectFit: "cover", onError: () => setImageFailed(true) })) : (_jsx(Flex, { role: "img", "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : name, align: "center", justify: "center", boxSize: `${px}px`, borderRadius: "full", bg: bg, color: color, fontSize: FONT_SIZE[size], fontWeight: 600, userSelect: "none", children: (getInitials !== null && getInitials !== void 0 ? getInitials : initialsFor)(name) })), status ? (_jsxs(_Fragment, { children: [_jsx(Box, { position: "absolute", bottom: "0", right: "0", boxSize: DOT_SIZE[size], borderRadius: "full", bg: toneInk(colors, STATUS_TONE[status]), border: "2px solid", borderColor: colors.background[50] }), _jsx(VisuallyHidden, { children: STATUS_LABEL[status] })] })) : null] }));
+});
+Avatar.displayName = "Avatar";
+export default Avatar;

package/dist/esm/Components/Avatar/AvatarGroup.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Flex } from "@chakra-ui/react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import Avatar from "./Avatar.js";
+import { FONT_SIZE, OVERLAP, SIZE_PX } from "./avatarSizing.js";
+const summarize = (names, overflow) => {
+    if (overflow <= 0)
+        return names.join(", ");
+    return `${names.join(", ")} and ${overflow} more`;
+};
+/** Overlapping avatar stack; people past `max` collapse into a "+N" chip. */
+const AvatarGroup = ({ people, max = 4, size = "md", ariaLabel, "data-testid": testId }) => {
+    const { colors } = useCustomTheme();
+    const shown = people.slice(0, max);
+    const overflow = people.length - shown.length;
+    const px = SIZE_PX[size];
+    const ring = { border: "2px solid", borderColor: colors.background[50] };
+    return (_jsxs(Flex, { role: "group", "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : summarize(people.map((p) => p.name), overflow), "data-testid": testId, children: [shown.map((person, i) => (_jsx(Box, { "aria-hidden": true, ml: i === 0 ? 0 : `-${OVERLAP[size]}`, borderRadius: "full", ...ring, children: _jsx(Avatar, { name: person.name, src: person.src, size: size }) }, `${person.name}-${i}`))), overflow > 0 ? (_jsxs(Flex, { "aria-hidden": true, ml: `-${OVERLAP[size]}`, align: "center", justify: "center", boxSize: `${px}px`, borderRadius: "full", bg: colors.backgroundColor.secondary, color: colors.text[700], fontSize: FONT_SIZE[size], fontWeight: 600, ...ring, children: ["+", overflow] })) : null] }));
+};
+export default AvatarGroup;

package/dist/esm/Components/Avatar/AvatarProps.js

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

package/dist/esm/Components/Avatar/avatarColorway.js

@@ -0,0 +1,25 @@
+import { resolveFilledSurface } from "../../Theme/tokens/builders/filledSurface.js";
+export const AVATAR_SCALE_KEYS = [
+    "red", "orange", "yellow", "green", "teal", "blue", "cyan", "purple", "pink",
+];
+const hashSeed = (seed) => {
+    let hash = 0;
+    for (let i = 0; i < seed.length; i += 1)
+        hash = (hash * 31 + seed.charCodeAt(i)) >>> 0;
+    return hash;
+};
+export const avatarScaleKeyFor = (seed) => AVATAR_SCALE_KEYS[hashSeed(seed) % AVATAR_SCALE_KEYS.length];
+// Always via resolveFilledSurface, never scale[500] + a guessed ink.
+export const avatarColorwayFor = (key, colors) => {
+    const { fill, color } = resolveFilledSurface(colors[key], colors);
+    return { bg: fill, color };
+};
+export const resolveAvatarColorway = (seed, colors) => avatarColorwayFor(avatarScaleKeyFor(seed), colors);
+export const initialsFor = (name) => {
+    const words = name.trim().split(/\s+/).filter(Boolean);
+    if (words.length === 0)
+        return "";
+    if (words.length === 1)
+        return words[0].slice(0, 2).toUpperCase();
+    return (words[0][0] + words[1][0]).toUpperCase();
+};

package/dist/esm/Components/Avatar/avatarSizing.js

@@ -0,0 +1,12 @@
+export const SIZE_PX = {
+    "2xs": 16, xs: 24, sm: 32, md: 40, lg: 48, xl: 64,
+};
+export const FONT_SIZE = {
+    "2xs": "0.5rem", xs: "0.625rem", sm: "0.75rem", md: "0.875rem", lg: "1rem", xl: "1.25rem",
+};
+export const DOT_SIZE = {
+    "2xs": "5px", xs: "6px", sm: "8px", md: "9px", lg: "10px", xl: "12px",
+};
+export const OVERLAP = {
+    "2xs": "5px", xs: "8px", sm: "10px", md: "12px", lg: "14px", xl: "18px",
+};

package/dist/esm/Components/Backdrop/Backdrop.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Fade, Text } from "@chakra-ui/react";
+import Spinner from "../Spinner/Spinner.js";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { backdropScrim, overlayScrim } from "../../Theme/tokens/builders/scrim.js";
+import { OVERLAY_BLUR } from "../../Theme/chakra/overlay.styles.js";
+import { reducedMotionSx } from "../../Theme/chakra/motion.js";
+const ENTER_MS = 225;
+const EXIT_MS = 195;
+const SPINNER_BOX = "2.5rem";
+const SPINNER_THICKNESS = "0.225rem";
+/** Fading scrim that blocks (or optionally lets through) the page behind; prefer it over a hand-rolled overlay. */
+export default function Backdrop({ open, variant = "dim", loader = false, text, invisible = false, allowBackgroundInteraction = false, onClick, transitionDuration, container = false, zIndex, children, ariaLabel, }) {
+    var _a, _b;
+    const { colors } = useCustomTheme();
+    const durations = typeof transitionDuration === "number"
+        ? { enter: transitionDuration, exit: transitionDuration }
+        : { enter: (_a = transitionDuration === null || transitionDuration === void 0 ? void 0 : transitionDuration.enter) !== null && _a !== void 0 ? _a : ENTER_MS, exit: (_b = transitionDuration === null || transitionDuration === void 0 ? void 0 : transitionDuration.exit) !== null && _b !== void 0 ? _b : EXIT_MS };
+    const isDim = variant === "dim";
+    const scrim = invisible ? "transparent" : isDim ? backdropScrim(colors) : overlayScrim(colors);
+    const label = ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : (loader ? "Loading" : undefined);
+    return (_jsx(Fade, { in: open, unmountOnExit: true, transition: { enter: { duration: durations.enter / 1000 }, exit: { duration: durations.exit / 1000 } }, style: {
+            position: container ? "absolute" : "fixed",
+            inset: 0,
+            zIndex: Number(zIndex !== null && zIndex !== void 0 ? zIndex : (container ? 10 : 1300)),
+            pointerEvents: allowBackgroundInteraction ? "none" : "auto",
+        }, children: _jsx(Box, { role: loader ? "status" : "presentation", "aria-live": loader ? "polite" : undefined, "aria-busy": loader || undefined, "aria-label": label, onClick: allowBackgroundInteraction ? undefined : onClick, position: "absolute", inset: "0", bg: scrim, backdropFilter: !isDim && !invisible ? OVERLAY_BLUR : undefined, color: colors.white, display: "flex", alignItems: "center", justifyContent: "center", flexDirection: "column", gap: 3, pointerEvents: allowBackgroundInteraction ? "none" : "auto", cursor: onClick && !allowBackgroundInteraction ? "pointer" : undefined, sx: { WebkitTapHighlightColor: "transparent", ...reducedMotionSx() }, children: children !== null && children !== void 0 ? children : (loader ? (_jsxs(_Fragment, { children: [_jsx(Spinner, { size: "lg", boxSize: SPINNER_BOX, thickness: SPINNER_THICKNESS, color: colors.white, label: text ? "" : "Loading" }), text && _jsx(Text, { fontSize: "sm", children: text })] })) : null) }) }));
+}

package/dist/esm/Components/Backdrop/BackdropProps.js

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

package/dist/esm/Components/BagBar/BagBar.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Flex, Text } from "@chakra-ui/react";
+import { ChevronUp } from "lucide-react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { overlayScrim } from "../../Theme/tokens/builders/scrim.js";
+import { focusVisibleStyles } from "../../Theme/chakra/focusRing.styles.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 { formatPrice } from "../../Utils/price.js";
+import Button from "../Button/Button.js";
+const DEFAULT_LABELS = { region: "Bag total", total: "Total", viewDetails: "View price details", cta: "Place order" };
+const GLASS_ALPHA = Math.round(0.86 * 255).toString(16);
+const BLUR = "blur(20px) saturate(180%)";
+const NO_BLUR_SUPPORT = "@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)))";
+const SAFE_BOTTOM = "calc(0.75rem + env(safe-area-inset-bottom, 0px))";
+/** Glass bar for the bag and checkout: total and price-details link left, the single primary action right. */
+const BagBar = ({ total, note, onViewDetails, ctaLabel, onCta, ctaDisabled = false, ctaLoading = false, position = "static", zIndex = 10, currency, locale, labels, "data-testid": testId, }) => {
+    const { colors } = useCustomTheme();
+    const copy = { ...DEFAULT_LABELS, ...labels };
+    const sticky = position === "bottom";
+    return (_jsxs(Flex, { as: "section", "aria-label": copy.region, align: "center", justify: "space-between", gap: 4, px: 4, pt: 3, pb: SAFE_BOTTOM, borderTopRadius: "3xl", bg: `${colors.surfaceRaised}${GLASS_ALPHA}`, backdropFilter: BLUR, position: sticky ? "sticky" : "static", bottom: sticky ? 0 : undefined, zIndex: sticky ? zIndex : undefined, boxShadow: sticky ? `0 -12px 32px -16px ${overlayScrim(colors)}` : "none", "data-testid": testId, sx: { WebkitBackdropFilter: BLUR, [NO_BLUR_SUPPORT]: { backgroundColor: colors.surfaceRaised } }, children: [_jsxs(Box, { minW: 0, children: [_jsxs(Flex, { align: "baseline", gap: 2, wrap: "wrap", children: [_jsx(Text, { as: "span", fontSize: "xs", fontWeight: 600, color: colors.textMuted, children: copy.total }), _jsx(Text, { as: "span", fontSize: "xl", fontWeight: 700, lineHeight: 1.2, letterSpacing: "-0.02em", color: colors.header[900], sx: NUMERIC_TEXT, "data-testid": "bag-bar-total", children: formatPrice(total, { currency, locale }) })] }), note && (_jsx(Text, { as: "span", display: "block", fontSize: "xs", lineHeight: 1.4, color: colors.textMuted, children: note })), onViewDetails && (_jsxs(Box, { as: "button", type: "button", onClick: onViewDetails, display: "inline-flex", alignItems: "center", gap: 1, position: "relative", fontSize: "xs", fontWeight: 600, color: colors.accentText, borderRadius: "sm", transition: transitionFor(["opacity"]), _hover: { opacity: 0.8 }, sx: {
+                            ...focusVisibleStyles(colors),
+                            ...reducedMotionSx(),
+                            "&::before": { content: '""', position: "absolute", inset: "-0.75rem -0.5rem" },
+                        }, children: [copy.viewDetails, _jsx(ChevronUp, { size: 14, "aria-hidden": true })] }))] }), _jsx(Button, { size: "lg", onClick: onCta, isDisabled: ctaDisabled, isLoading: ctaLoading, flexShrink: 0, children: ctaLabel !== null && ctaLabel !== void 0 ? ctaLabel : copy.cta })] }));
+};
+export default BagBar;

package/dist/esm/Components/BagBar/BagBarProps.js

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

package/dist/esm/Components/Breadcrumbs/Breadcrumbs.js

@@ -1,9 +1,42 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, useTheme } from "@chakra-ui/react";
-export default function Breadcrumbs({ spacing, separator, fontWeight, fontSize, isCurrentPage, handleClick, items, }) {
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Menu, MenuButton, MenuItem, MenuList, useTheme, } from "@chakra-ui/react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { focusVisibleStyles } from "../../Theme/chakra/focusRing.styles.js";
+import { breadcrumbInk } from "./breadcrumbInk.js";
+const DEFAULT_MAX_ITEMS = 3;
+const MIN_MAX_ITEMS = 2;
+const OVERFLOW_SX = {
+    nowrap: undefined,
+    wrap: { "& ol": { flexWrap: "wrap", rowGap: "4px" }, "& li": { maxWidth: "100%" } },
+    truncate: { "& ol": { flexWrap: "nowrap" }, "& li": { minWidth: 0 } },
+};
+const collapse = (entries, maxItems) => {
+    const keep = Math.max(MIN_MAX_ITEMS, Math.floor(maxItems));
+    if (entries.length <= keep)
+        return { head: entries, hidden: [], tail: [] };
+    return { head: entries.slice(0, 1), hidden: entries.slice(1, entries.length - (keep - 1)), tail: entries.slice(entries.length - (keep - 1)) };
+};
+export default function Breadcrumbs({ spacing, separator, fontWeight, fontSize, isCurrentPage, handleClick, items, overflow = "nowrap", maxItems = DEFAULT_MAX_ITEMS, labels, "data-testid": testId, }) {
     const theme = useTheme();
-    return (_jsx(Breadcrumb, { spacing: spacing, separator: separator, fontWeight: fontWeight, fontSize: fontSize, fontFamily: theme.fonts.body, children: items.map((item, index) => (_jsx(BreadcrumbItem, { isCurrentPage: isCurrentPage && index === items.length - 1, children: _jsx(BreadcrumbLink, { href: item.path, sx: { "&:hover, &:active": { textDecoration: "none" } }, onClick: (event) => {
+    const { colors } = useCustomTheme();
+    const ink = breadcrumbInk(colors);
+    const effectiveSeparator = separator !== null && separator !== void 0 ? separator : (_jsx(Box, { as: "span", color: ink.separator, children: "/" }));
+    const clip = overflow !== "nowrap";
+    const clipProps = clip ? { noOfLines: 1 } : {};
+    const renderCrumb = ({ crumb, index }) => {
+        const isLast = Boolean(isCurrentPage) && index === items.length - 1;
+        const color = isLast ? ink.current : ink.link;
+        const common = { ...clipProps, title: clip ? crumb.label : undefined, color, fontWeight: isLast ? 600 : fontWeight };
+        return (_jsx(BreadcrumbItem, { isCurrentPage: isLast, children: crumb.path === undefined ? (_jsx(Box, { as: "span", "aria-current": isLast ? "page" : undefined, ...common, children: crumb.label })) : (_jsx(BreadcrumbLink, { href: crumb.path, ...common, sx: { "&:hover, &:active": { textDecoration: "none", color: isLast ? ink.current : ink.linkHover } }, onClick: (event) => {
                     event.preventDefault();
-                    handleClick(item.path);
-                }, children: item.label }) }, index))) }));
+                    handleClick(crumb.path);
+                }, children: crumb.label })) }, index));
+    };
+    const renderMenu = (hidden) => {
+        var _a;
+        return (_jsx(BreadcrumbItem, { sx: { flexShrink: 0 }, children: _jsxs(Menu, { isLazy: true, placement: "bottom-start", children: [_jsx(MenuButton, { type: "button", "aria-label": ((_a = labels === null || labels === void 0 ? void 0 : labels.showMore) !== null && _a !== void 0 ? _a : ((n) => `Show ${n} more`))(hidden.length), color: ink.link, borderRadius: "md", px: 1, _hover: { color: ink.linkHover }, sx: focusVisibleStyles(colors), children: "\u2026" }), _jsx(MenuList, { children: hidden.map(({ crumb, index }) => (_jsx(MenuItem, { isDisabled: crumb.path === undefined, onClick: () => crumb.path !== undefined && handleClick(crumb.path), children: crumb.label }, index))) })] }) }, "overflow"));
+    };
+    const entries = items.map((crumb, index) => ({ crumb, index }));
+    const { head, hidden, tail } = overflow === "truncate" ? collapse(entries, maxItems) : { head: entries, hidden: [], tail: [] };
+    return (_jsxs(Breadcrumb, { spacing: spacing, separator: effectiveSeparator, fontWeight: fontWeight, fontSize: fontSize, fontFamily: theme.fonts.body, sx: OVERFLOW_SX[overflow], "data-testid": testId, children: [head.map(renderCrumb), hidden.length > 0 && renderMenu(hidden), tail.map(renderCrumb)] }));
 }

package/dist/esm/Components/Breadcrumbs/breadcrumbInk.js

@@ -0,0 +1,7 @@
+/** Chakra ships no default Breadcrumb theme, so every ink here needs an explicit token. */
+export const breadcrumbInk = (colors) => ({
+    link: colors.textMuted,
+    linkHover: colors.accentText,
+    current: colors.text[900],
+    separator: colors.textMuted,
+});

package/dist/esm/Components/BulkSelectionBar/BulkSelectionBar.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { Box, Flex, Text, VisuallyHidden } from "@chakra-ui/react";
+import { X } from "lucide-react";
+import Button from "../Button/Button.js";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+const FACT_SEPARATOR = " · ";
+const VARIANT_BY_TONE = {
+    default: "outline",
+    primary: "solid",
+    danger: "outline",
+};
+const SCHEME_BY_TONE = {
+    default: "gray",
+    primary: "primary",
+    danger: "red",
+};
+const TOUCH_SX = { "@media (pointer: coarse)": { minHeight: "44px", minWidth: "44px" } };
+/** Action bar for table row selection: count, shared facts, bulk action buttons and a clear button; renders nothing at zero. */
+const BulkSelectionBar = ({ selectedCount, facts, actions, onClearSelection, clearLabel = "Clear selection", countLabel, placement = "sticky", "aria-label": ariaLabel = "Selection actions", "data-testid": testId = "bulk-selection-bar", }) => {
+    const { colors } = useCustomTheme();
+    const isActive = selectedCount > 0;
+    const summary = countLabel !== null && countLabel !== void 0 ? countLabel : `${selectedCount} selected`;
+    const [announcement, setAnnouncement] = useState("");
+    useEffect(() => {
+        setAnnouncement(isActive ? summary : "");
+    }, [isActive, summary]);
+    if (!isActive)
+        return null;
+    const resolvedFacts = (facts !== null && facts !== void 0 ? facts : []).filter(Boolean);
+    const isSticky = placement === "sticky";
+    return (_jsxs(Flex, { role: "region", "aria-label": ariaLabel, "data-testid": testId, align: "center", gap: 3, wrap: "wrap", px: 4, py: 2, w: "100%", borderRadius: "lg", borderWidth: "1px", borderColor: colors.boxborder[200], bg: colors.surfaceRaised, position: isSticky ? "sticky" : "relative", bottom: isSticky ? 0 : undefined, zIndex: isSticky ? 2 : undefined, children: [_jsx(VisuallyHidden, { role: "status", "aria-live": "polite", "data-testid": "bulk-selection-announcement", children: announcement }), _jsxs(Flex, { align: "baseline", gap: 1, flex: "1", minW: "180px", wrap: "wrap", children: [_jsx(Text, { fontSize: "sm", fontWeight: 600, color: colors.text[800], "data-testid": "bulk-selection-count", children: summary }), resolvedFacts.length ? (_jsxs(Text, { fontSize: "sm", color: colors.textMuted, "data-testid": "bulk-selection-facts", children: [FACT_SEPARATOR, resolvedFacts.join(FACT_SEPARATOR)] })) : null] }), _jsxs(Flex, { align: "center", gap: 2, wrap: "wrap", children: [actions.map((action) => {
+                        var _a;
+                        const tone = (_a = action.tone) !== null && _a !== void 0 ? _a : "default";
+                        const Icon = action.icon;
+                        return (_jsx(Button, { size: "sm", variant: VARIANT_BY_TONE[tone], colorScheme: SCHEME_BY_TONE[tone], onClick: action.onClick, isDisabled: action.isDisabled, isLoading: action.isLoading, loadingText: action.label, leftIcon: Icon ? _jsx(Icon, { size: 16, "aria-hidden": "true" }) : undefined, sx: TOUCH_SX, "data-testid": `bulk-action-${action.id}`, "data-tone": tone, children: action.label }, action.id));
+                    }), _jsx(Box, { children: _jsx(Button, { size: "sm", variant: "ghost", colorScheme: "gray", onClick: onClearSelection, leftIcon: _jsx(X, { size: 16, "aria-hidden": "true" }), sx: TOUCH_SX, "data-testid": "bulk-selection-clear", children: clearLabel }) })] })] }));
+};
+export default BulkSelectionBar;

package/dist/esm/Components/BulkSelectionBar/BulkSelectionBarProps.js

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

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

@@ -0,0 +1 @@
+export { default as BulkSelectionBar } from "./BulkSelectionBar.js";

package/dist/esm/Components/Button/Button.js

@@ -1,7 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { memo } from "react";
+import { forwardRef, memo } from "react";
 import { Button as ChakraButton } from "@chakra-ui/react";
-function Button({ label, children, onClick, opacity, variant = "solid", leftIcon, rightIcon, size, isDisabled = false, isLoading = false, loadingText = "Loading", type, width, sx, colorScheme, ref, border, borderRadius, onMouseEnter, onMouseLeave, ...aria }) {
-    return (_jsx(ChakraButton, { ...aria, type: type, onClick: onClick, width: width || "fit-content", variant: variant, size: size, isLoading: isLoading, isDisabled: isDisabled, loadingText: loadingText, leftIcon: leftIcon, rightIcon: rightIcon, ref: ref, colorScheme: colorScheme, sx: sx, opacity: opacity, border: border, borderRadius: borderRadius, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, children: children !== null && children !== void 0 ? children : label }));
-}
+/** Themed button with label or children, left/right icons and a loading state that keeps its width. */
+const Button = forwardRef(function Button({ label, children, onClick, opacity, variant = "solid", leftIcon, rightIcon, size, isDisabled = false, isLoading = false, loadingText, type, width, w, sx, colorScheme, border, borderRadius, onMouseEnter, onMouseLeave, ...aria }, ref) {
+    const isIconOnly = !children && !label && !!(leftIcon || rightIcon);
+    return (_jsx(ChakraButton, { ...aria, type: type, onClick: onClick, width: width || w || "fit-content", variant: variant, size: size, isLoading: isLoading, isDisabled: isDisabled, loadingText: loadingText, leftIcon: leftIcon, rightIcon: rightIcon, iconSpacing: isIconOnly ? 0 : undefined, px: isIconOnly ? 0 : undefined, ref: ref, colorScheme: colorScheme, sx: sx, opacity: opacity, border: border, borderRadius: borderRadius, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, children: children !== null && children !== void 0 ? children : label }));
+});
 export default memo(Button);

package/dist/esm/Components/Button/Button.styles.js

@@ -1,109 +1,135 @@
-import { accentTextOnCanvas, isDarkCanvas, onFilled } from "../../Theme/tokens/builders/accentText.js";
+import { accentTextOnPlanes } from "../../Theme/tokens/builders/accentText.js";
+import { darkerFillRung, labelOnFill, resolveFilledSurface, solidFillRung, } from "../../Theme/tokens/builders/filledSurface.js";
 import { resolveGradient, gradientCss } from "../../Theme/tokens/builders/gradientInk.js";
-/**
- * Outline/ghost/link text sits ON the canvas, so it needs a rung that stays readable there —
- * `[500]` is pinned dark enough to carry a white label on the solid variant and measures only
- * ~4.2 against the dark canvas. Returns `[500]` unchanged on light canvases, so existing apps
- * are pixel-identical.
- */
-const onCanvasText = (theme, colorScheme) => accentTextOnCanvas(theme.colors[colorScheme], theme.colors.backgroundColor.main);
-/**
- * Ghost hover tint: translucent accent composited over whatever is behind it, so one value works
- * on either canvas. The `[50]` rung it replaces sits ~1.04 against its own canvas in BOTH modes —
- * a hover state you cannot see. Utility scales (red, green…) carry no `opacity` ramp, so they keep
- * `[50]`.
- */
+import { focusVisibleStyles } from "../../Theme/chakra/focusRing.styles.js";
+import { listRowBackgrounds } from "../../Theme/tokens/builders/rowStates.js";
+import { MOTION_OK_QUERY, reducedMotionSx } from "../../Theme/chakra/motion.js";
+import { BUTTON_SIZES, DEFAULT_CONTROL_SIZE, MOTION_PRESS_SCALE, transitionFor } from "../../Theme/tokens/primitives/index.js";
+import { BORDER_WIDTHS } from "../../Theme/tokens/primitives/borderWidths.js";
+import { DISABLED_OPACITY } from "../../Theme/tokens/primitives/states.js";
+const BUTTON_TRANSITION = [
+    transitionFor(["background-color", "border-color", "color", "box-shadow", "filter"]),
+    transitionFor(["transform"], "fast", "out"),
+].join(", ");
+const PRESS = {
+    [MOTION_OK_QUERY]: {
+        "&:active:not(:disabled):not([data-loading]):not([aria-disabled=true])": {
+            transform: `scale(${MOTION_PRESS_SCALE})`,
+        },
+    },
+};
+const controlSize = (size) => {
+    const { height, fontSize, paddingX } = BUTTON_SIZES[size];
+    return { h: height, minW: height, fontSize, px: paddingX };
+};
+// NOTE: [500] alone measures ~4.2 on a dark canvas — resolved per-mode so outline/ghost/link text stays readable.
+// NOTE: a bare button sits on the canvas, a card or an overlay; dark overlays are the hardest plane.
+const onCanvasText = (theme, colorScheme) => accentTextOnPlanes(theme.colors[colorScheme], [
+    theme.colors.backgroundColor.main,
+    theme.colors.backgroundColor.base,
+    theme.colors.background[50],
+    theme.colors.surfaceRaised,
+]);
+// NOTE: [50] alone measured ~1.04 (invisible) in both modes — gray borrows the row-state steps.
 const onCanvasHoverBg = (theme, colorScheme, step) => {
     const scale = theme.colors[colorScheme];
-    return "opacity" in scale ? scale.opacity[step] : scale[50];
+    if ("opacity" in scale)
+        return scale.opacity[step];
+    if (colorScheme !== "gray")
+        return scale[50];
+    const rows = listRowBackgrounds(theme.colors);
+    return step === 16 ? rows.active : rows.selectedActive;
 };
-/**
- * The rung one/two steps DARKER than the accent — what a filled button's hover/active needs so its
- * white label stays legible.
- *
- * Every dark scale runs dark -> light across 50 -> 900 (brand scales are rebuilt that way, utility
- * hues are reversed), the mirror of light mode. So "darker than [500]" is [600]/[700] in light but
- * [400]/[300] in dark. Hardcoding [600] would hand the label a LIGHTER fill in dark and drop it to
- * ~3.2 contrast.
- */
-const FILL_STEP_RUNGS = { light: [600, 700], dark: [400, 300] };
+const swatch = (theme, colorScheme) => theme.colors[colorScheme];
+const buttonSolidRung = (theme, colorScheme) => solidFillRung(swatch(theme, colorScheme), theme.colors.white, theme.colors.backgroundColor.main);
 const darkerFill = (theme, colorScheme, step) => {
-    const mode = isDarkCanvas(theme.colors.backgroundColor.main) ? "dark" : "light";
-    return theme.colors[colorScheme][FILL_STEP_RUNGS[mode][step]];
+    const scale = swatch(theme, colorScheme);
+    const rung = darkerFillRung(scale, theme.colors.backgroundColor.main, theme.colors.white, step);
+    return scale[rung];
 };
 /** Label for the solid variant's filled bg — derived from THAT fill, since hover/active swap it. */
-const labelFor = (theme, fill) => onFilled(fill, theme.colors.white, theme.colors.black);
+const labelFor = (theme, fill) => labelOnFill(fill, theme.colors.white, theme.colors.black);
+const solidSurface = (theme, colorScheme) => {
+    if (colorScheme === "primary")
+        return resolveFilledSurface(theme.colors.primary, theme.colors);
+    const fill = theme.colors[colorScheme][buttonSolidRung(theme, colorScheme)];
+    const hoverFill = darkerFill(theme, colorScheme, 0);
+    const activeFill = darkerFill(theme, colorScheme, 1);
+    return {
+        fill,
+        color: labelFor(theme, fill),
+        hoverFill,
+        hoverColor: labelFor(theme, hoverFill),
+        activeFill,
+        activeColor: labelFor(theme, activeFill),
+    };
+};
+// NOTE: replaces Chakra's stock ring, which failed WCAG 1.4.11 on every brand — gated by focusRing.test.ts.
+const focusRing = (theme) => focusVisibleStyles(theme.colors);
 export const Button = {
-    baseStyle: () => ({
+    // The ring is repeated on every variant below AND here, so a variant name this file does not
+    // define (a consumer's own, or an `IconButton` falling through) still gets an indicator.
+    baseStyle: ({ theme }) => ({
         borderRadius: "lg",
         fontWeight: 500,
-        fontSize: "1rem",
-        transition: "all 0.2s",
+        transition: BUTTON_TRANSITION,
+        ...reducedMotionSx(),
         _disabled: {
-            opacity: 0.6,
+            opacity: DISABLED_OPACITY,
             cursor: "not-allowed",
         },
+        ...focusRing(theme),
     }),
     variants: {
         solid: ({ theme, colorScheme = "primary" }) => {
-            const fill = theme.colors[colorScheme][500];
-            const hoverFill = darkerFill(theme, colorScheme, 0);
-            const activeFill = darkerFill(theme, colorScheme, 1);
-            const hoverLabel = labelFor(theme, hoverFill);
+            const s = solidSurface(theme, colorScheme);
             return {
-                bg: fill,
-                color: labelFor(theme, fill),
+                bg: s.fill,
+                color: s.color,
                 _hover: {
-                    bg: hoverFill,
-                    color: hoverLabel,
-                    boxShadow: "sm",
+                    bg: s.hoverFill,
+                    color: s.hoverColor,
                     _disabled: {
-                        bg: hoverFill, // keep hover color on loading
-                        color: hoverLabel,
+                        bg: s.hoverFill, // keep hover color on loading
+                        color: s.hoverColor,
                     },
                 },
                 _active: {
-                    bg: activeFill,
-                    color: labelFor(theme, activeFill),
+                    bg: s.activeFill,
+                    color: s.activeColor,
                     boxShadow: "none",
                 },
                 _loading: {
-                    bg: hoverFill, // keep hover color while loading
-                    color: hoverLabel,
+                    bg: s.hoverFill, // keep hover color while loading
+                    color: s.hoverColor,
                     _hover: {
-                        bg: hoverFill,
-                        color: hoverLabel,
+                        bg: s.hoverFill,
+                        color: s.hoverColor,
                     },
                 },
+                ...PRESS,
+                ...focusRing(theme),
             };
         },
         outline: ({ theme, colorScheme = "primary" }) => {
-            const hoverFill = theme.colors[colorScheme][500];
-            const activeFill = darkerFill(theme, colorScheme, 0);
+            const ink = onCanvasText(theme, colorScheme);
             return {
-                border: "0.1rem solid",
-                borderColor: theme.colors[colorScheme][500],
-                color: onCanvasText(theme, colorScheme),
+                border: `${BORDER_WIDTHS.hairline} solid`,
+                borderColor: ink,
+                color: ink,
                 bg: "transparent",
                 _hover: {
-                    bg: hoverFill,
-                    borderColor: activeFill,
-                    // Was a hardcoded `theme.colors.white` — fails AA for any colorScheme whose [500]
-                    // doesn't clear white contrast (e.g. emerald/rosewood primary in dark, 3.38/3.46).
-                    color: labelFor(theme, hoverFill),
-                    _disabled: {
-                        //  bg: theme.colors[colorScheme][500],
-                        color: onCanvasText(theme, colorScheme),
-                    },
+                    bg: onCanvasHoverBg(theme, colorScheme, 16),
+                    _disabled: { bg: "transparent" },
                 },
                 _active: {
-                    bg: activeFill,
-                    color: labelFor(theme, activeFill),
+                    bg: onCanvasHoverBg(theme, colorScheme, 24),
                 },
                 _loading: {
-                    // bg: theme.colors[colorScheme][500],
-                    color: onCanvasText(theme, colorScheme),
+                    color: ink,
                 },
+                ...PRESS,
+                ...focusRing(theme),
             };
         },
         ghost: ({ theme, colorScheme = "primary" }) => ({
@@ -116,6 +142,8 @@ export const Button = {
             _active: {
                 bg: onCanvasHoverBg(theme, colorScheme, 24),
             },
+            ...PRESS,
+            ...focusRing(theme),
         }),
         link: ({ theme, colorScheme = "primary" }) => ({
             color: onCanvasText(theme, colorScheme),
@@ -128,13 +156,16 @@ export const Button = {
             _active: {
                 color: onCanvasText(theme, colorScheme),
             },
+            ...focusRing(theme),
         }),
-        unstyled: () => ({
+        // `unstyled` drops the fill, not the affordance: a focus indicator is not styling.
+        unstyled: ({ theme }) => ({
             bg: "transparent",
             color: "inherit",
             _hover: {
                 bg: "transparent",
             },
+            ...focusRing(theme),
         }),
         // Theme-based two-tone gradient: each theme defines its own `gradient` {from,to} pair.
         // Ignores colorScheme; hover/active shift brightness so it works for any pair.
@@ -148,7 +179,6 @@ export const Button = {
                 _hover: {
                     bgImage: bg,
                     filter: "brightness(0.92)",
-                    boxShadow: "md",
                     _disabled: { bgImage: bg, filter: "none" },
                 },
                 _active: {
@@ -161,38 +191,19 @@ export const Button = {
                     filter: "brightness(0.92)",
                     _hover: { bgImage: bg, filter: "brightness(0.92)" },
                 },
+                ...focusRing(theme),
             };
         },
     },
     sizes: {
-        xs: {
-            h: "1.5rem",
-            fontSize: "0.75rem",
-            px: "0.5rem",
-        },
-        sm: {
-            h: "2rem",
-            fontSize: "0.875rem",
-            px: "0.75rem",
-        },
-        md: {
-            h: "2.5rem",
-            fontSize: "1rem",
-            px: "1rem",
-        },
-        lg: {
-            h: "3rem",
-            fontSize: "1.125rem",
-            px: "1.5rem",
-        },
-        xl: {
-            h: "3.5rem",
-            fontSize: "1.25rem",
-            px: "2rem",
-        },
+        xs: controlSize("xs"),
+        sm: controlSize("sm"),
+        md: controlSize("md"),
+        lg: controlSize("lg"),
+        xl: { h: "3.5rem", minW: "3.5rem", fontSize: "1.125rem", px: "2rem" },
     },
     defaultProps: {
-        size: "md",
+        size: DEFAULT_CONTROL_SIZE,
         variant: "solid",
         colorScheme: "primary",
     },

package/dist/esm/Components/ButtonGroupIcon/ButtonGoupIconProps.js

@@ -1 +1,2 @@
-export {};
+/** @deprecated Misspelled path — import from `./ButtonGroupIconProps` instead. */
+export * from "./ButtonGroupIconProps.js";