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

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/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/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/Breadcrumbs/Breadcrumbs.js

@@ -0,0 +1,42 @@
+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();
+    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(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/index.js

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

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

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, memo } from "react";
+import { Button as ChakraButton } from "@chakra-ui/react";
+/** 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

@@ -0,0 +1,210 @@
+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";
+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];
+    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;
+};
+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 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) => 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 = {
+    // 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,
+        transition: BUTTON_TRANSITION,
+        ...reducedMotionSx(),
+        _disabled: {
+            opacity: DISABLED_OPACITY,
+            cursor: "not-allowed",
+        },
+        ...focusRing(theme),
+    }),
+    variants: {
+        solid: ({ theme, colorScheme = "primary" }) => {
+            const s = solidSurface(theme, colorScheme);
+            return {
+                bg: s.fill,
+                color: s.color,
+                _hover: {
+                    bg: s.hoverFill,
+                    color: s.hoverColor,
+                    _disabled: {
+                        bg: s.hoverFill, // keep hover color on loading
+                        color: s.hoverColor,
+                    },
+                },
+                _active: {
+                    bg: s.activeFill,
+                    color: s.activeColor,
+                    boxShadow: "none",
+                },
+                _loading: {
+                    bg: s.hoverFill, // keep hover color while loading
+                    color: s.hoverColor,
+                    _hover: {
+                        bg: s.hoverFill,
+                        color: s.hoverColor,
+                    },
+                },
+                ...PRESS,
+                ...focusRing(theme),
+            };
+        },
+        outline: ({ theme, colorScheme = "primary" }) => {
+            const ink = onCanvasText(theme, colorScheme);
+            return {
+                border: `${BORDER_WIDTHS.hairline} solid`,
+                borderColor: ink,
+                color: ink,
+                bg: "transparent",
+                _hover: {
+                    bg: onCanvasHoverBg(theme, colorScheme, 16),
+                    _disabled: { bg: "transparent" },
+                },
+                _active: {
+                    bg: onCanvasHoverBg(theme, colorScheme, 24),
+                },
+                _loading: {
+                    color: ink,
+                },
+                ...PRESS,
+                ...focusRing(theme),
+            };
+        },
+        ghost: ({ theme, colorScheme = "primary" }) => ({
+            color: onCanvasText(theme, colorScheme),
+            bg: "transparent",
+            _hover: {
+                bg: onCanvasHoverBg(theme, colorScheme, 16),
+                color: onCanvasText(theme, colorScheme),
+            },
+            _active: {
+                bg: onCanvasHoverBg(theme, colorScheme, 24),
+            },
+            ...PRESS,
+            ...focusRing(theme),
+        }),
+        link: ({ theme, colorScheme = "primary" }) => ({
+            color: onCanvasText(theme, colorScheme),
+            textDecoration: "underline",
+            bg: "transparent",
+            _hover: {
+                color: onCanvasText(theme, colorScheme),
+                textDecoration: "none",
+            },
+            _active: {
+                color: onCanvasText(theme, colorScheme),
+            },
+            ...focusRing(theme),
+        }),
+        // `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.
+        gradient: ({ theme }) => {
+            const g = resolveGradient(theme.colors.gradient, theme.colors.white, theme.colors.black);
+            const bg = gradientCss(g);
+            return {
+                bgImage: bg,
+                color: g.ink,
+                border: "none",
+                _hover: {
+                    bgImage: bg,
+                    filter: "brightness(0.92)",
+                    _disabled: { bgImage: bg, filter: "none" },
+                },
+                _active: {
+                    bgImage: bg,
+                    filter: "brightness(0.85)",
+                    boxShadow: "none",
+                },
+                _loading: {
+                    bgImage: bg,
+                    filter: "brightness(0.92)",
+                    _hover: { bgImage: bg, filter: "brightness(0.92)" },
+                },
+                ...focusRing(theme),
+            };
+        },
+    },
+    sizes: {
+        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: DEFAULT_CONTROL_SIZE,
+        variant: "solid",
+        colorScheme: "primary",
+    },
+};

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

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

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

@@ -0,0 +1,91 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useRef, useEffect } from "react";
+import { Box, Button, ButtonGroup, IconButton, Menu, MenuButton, MenuItem, MenuList, Tooltip, } from "@chakra-ui/react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { resolveGradient, gradientCss } from "../../Theme/tokens/builders/gradientInk.js";
+import { hexToRgb } from "../../Theme/tokens/builders/color.js";
+import { rafThrottle } from "../../Utils/rafThrottle.js";
+import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
+const BACKGROUND_TRANSITION = transitionFor(["background"]);
+/** Attached left icon, text button and right icon or dropdown trigger; see ButtonGroupIconProps. */
+export default function ButtonGroupIcon({ leftIcon, rightIcon, onLeftIconClick, onRightIconClick, buttonText, onButtonClick, onButtongroupClick, size, variant, color, buttonGroupStyle, buttonGroupLeftIconStyle, buttonGroupRightIconStyle, buttonStyle, onBlurLeftIcon, onBlurRightIcon, dropdownOptions, // New prop for dropdown options
+onDropdownOptionClick, // New prop to handle option clicks
+rightIconDropdown, menulistStyle, menuItemStyle, isLoading, divider = true, leftIconLoading, RightIconLoading, }) {
+    const theme = useCustomTheme();
+    const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+    const textRef = useRef(null);
+    const [isTextTruncated, setIsTextTruncated] = useState(false);
+    useEffect(() => {
+        const checkTruncation = () => {
+            if (textRef.current) {
+                const isTruncated = textRef.current.scrollWidth > textRef.current.clientWidth;
+                setIsTextTruncated(isTruncated);
+            }
+        };
+        // Use setTimeout to ensure DOM is fully rendered
+        const timeoutId = setTimeout(checkTruncation, 0);
+        const onResize = rafThrottle(checkTruncation);
+        window.addEventListener("resize", onResize);
+        return () => {
+            clearTimeout(timeoutId);
+            onResize.cancel();
+            window.removeEventListener("resize", onResize);
+        };
+    }, [buttonText]);
+    const handleRightIconClick = () => {
+        setIsDropdownOpen(!isDropdownOpen);
+        if (onRightIconClick) {
+            onRightIconClick();
+        }
+    };
+    const handleMenuClick = (event, option) => {
+        setIsDropdownOpen(false);
+        if (onDropdownOptionClick) {
+            onDropdownOptionClick(event, option);
+        }
+    };
+    // NOTE: gradient variant paints ONE continuous gradient on the group, segments stay transparent.
+    const isGradient = variant === "gradient";
+    const gradientStops = resolveGradient(theme.colors.gradient, theme.colors.white, theme.colors.black);
+    const gradientBg = gradientCss(gradientStops);
+    const gradientInk = gradientStops.ink;
+    const whiteRgb = hexToRgb(theme.colors.white);
+    const whiteOverlay = (alpha) => `rgba(${whiteRgb.r}, ${whiteRgb.g}, ${whiteRgb.b}, ${alpha})`;
+    const gradientItemSx = isGradient
+        ? {
+            color: gradientInk,
+            bg: "transparent",
+            bgImage: "none",
+            boxShadow: "none",
+            _hover: { bg: whiteOverlay(0.08), boxShadow: "none" },
+            _active: { bg: whiteOverlay(0.16) },
+        }
+        : undefined;
+    return (_jsxs(ButtonGroup, { size: size, isAttached: true, variant: isGradient ? "solid" : variant, onClick: onButtongroupClick, colorScheme: color, style: buttonGroupStyle, sx: isGradient
+            ? { bgImage: gradientBg, color: gradientInk, borderRadius: "lg", overflow: "hidden" }
+            : undefined, children: [leftIcon && (_jsx(IconButton, { "aria-label": "Left icon button", icon: leftIcon, isLoading: leftIconLoading, onClick: onLeftIconClick, onBlur: onBlurLeftIcon, style: buttonGroupLeftIconStyle, sx: gradientItemSx })), _jsx(Tooltip, { label: buttonText, isDisabled: !buttonText || !isTextTruncated, children: _jsx(Button, { onClick: onButtonClick, style: buttonStyle, isLoading: isLoading, borderLeft: "1px solid", borderRight: "1px solid", borderColor: whiteOverlay(0.24), maxW: "200px", sx: gradientItemSx, children: _jsx(Box, { ref: textRef, as: "span", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", display: "block", width: "100%", children: buttonText }) }) }), rightIcon && rightIconDropdown ? (_jsxs(Menu, { isOpen: isDropdownOpen, onClose: () => setIsDropdownOpen(false), children: [_jsx(MenuButton, { as: IconButton, "aria-label": "Right icon button", icon: rightIcon, isLoading: RightIconLoading, onClick: handleRightIconClick, onBlur: onBlurRightIcon, style: buttonGroupRightIconStyle, sx: gradientItemSx }), _jsx(Box, { sx: { zIndex: 99 }, children: _jsx(MenuList, { style: menulistStyle, bg: theme.colors.surfaceRaised, 
+                            // NOTE: Chakra's MenuItem inherits --menu-bg hardcoded to #fff via dead _dark — set it or items stay white.
+                            sx: { "--menu-bg": theme.colors.backgroundColor.light }, borderRadius: "xl", boxShadow: "lg", py: "0.375rem", minW: "12rem", overflow: "hidden", children: dropdownOptions === null || dropdownOptions === void 0 ? void 0 : dropdownOptions.map((option, index) => (_jsxs(MenuItem, { onClick: (event) => handleMenuClick(event, option), style: menuItemStyle, sx: {
+                                    display: "flex",
+                                    alignItems: "center",
+                                    gap: "0.5rem",
+                                    mx: "0.375rem",
+                                    px: "0.625rem",
+                                    py: "0.5rem",
+                                    borderRadius: "lg",
+                                    fontSize: "xs-plus",
+                                    fontWeight: 500,
+                                    color: theme.colors.text[700],
+                                    transition: BACKGROUND_TRANSITION,
+                                    "& svg": { width: "16px", height: "16px" },
+                                    ...(divider
+                                        ? {
+                                            mx: 0,
+                                            borderRadius: "none",
+                                            borderBottom: "1px solid",
+                                            borderColor: theme.colors.boxborder[200],
+                                        }
+                                        : {}),
+                                    "&:last-child": { borderBottom: "none" },
+                                }, children: [option === null || option === void 0 ? void 0 : option.image, option.label] }, index))) }) })] })) : (rightIcon && (_jsx(IconButton, { "aria-label": "Right icon button", icon: rightIcon, isLoading: RightIconLoading, onClick: onRightIconClick, onBlur: onBlurRightIcon, style: buttonGroupRightIconStyle, sx: gradientItemSx })))] }));
+}