pixelize-design-library 2.4.2-beta.5 → 2.4.2-beta.50

package/dist/esm/Components/AppSwitcher/AppSwitcherProps.js

@@ -0,0 +1,78 @@
+const NON_WORD = /[^\p{L}\p{N}]+/u;
+/** Up to two initials, so a mark stays legible without an icon. */
+export const appInitials = (name) => {
+    const words = name.trim().split(NON_WORD).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();
+};
+export const filterApps = (apps, query) => {
+    const q = query.trim().toLowerCase();
+    if (!q)
+        return apps;
+    return apps.filter((app) => {
+        var _a, _b;
+        return [app.name, (_a = app.description) !== null && _a !== void 0 ? _a : "", ...((_b = app.keywords) !== null && _b !== void 0 ? _b : [])]
+            .join(" ")
+            .toLowerCase()
+            .includes(q);
+    });
+};
+/** "mod" is Cmd on Apple platforms and Ctrl everywhere else. */
+export const matchesShortcut = (event, shortcut, isApple = typeof navigator !== "undefined" && /Mac|iPhone|iPad/.test(navigator.platform)) => {
+    const parts = shortcut.toLowerCase().split("+").map((p) => p.trim()).filter(Boolean);
+    if (parts.length === 0)
+        return false;
+    const key = parts[parts.length - 1];
+    const mods = new Set(parts.slice(0, -1));
+    const wantsMod = mods.has("mod");
+    const wantsCtrl = mods.has("ctrl") || (wantsMod && !isApple);
+    const wantsMeta = mods.has("cmd") || mods.has("meta") || (wantsMod && isApple);
+    if (event.ctrlKey !== wantsCtrl)
+        return false;
+    if (event.metaKey !== wantsMeta)
+        return false;
+    if (event.shiftKey !== mods.has("shift"))
+        return false;
+    if (event.altKey !== mods.has("alt"))
+        return false;
+    return event.key.toLowerCase() === key;
+};
+const APPLE_SYMBOLS = { mod: "⌘", cmd: "⌘", meta: "⌘", ctrl: "⌃", shift: "⇧", alt: "⌥" };
+const OTHER_LABELS = { mod: "Ctrl", cmd: "Win", meta: "Win", ctrl: "Ctrl", shift: "Shift", alt: "Alt" };
+export const formatShortcut = (shortcut, isApple = typeof navigator !== "undefined" && /Mac|iPhone|iPad/.test(navigator.platform)) => {
+    const parts = shortcut.toLowerCase().split("+").map((p) => p.trim()).filter(Boolean);
+    const table = isApple ? APPLE_SYMBOLS : OTHER_LABELS;
+    const rendered = parts.map((p, i) => { var _a; return i === parts.length - 1 ? p.toUpperCase() : ((_a = table[p]) !== null && _a !== void 0 ? _a : p.toUpperCase()); });
+    return isApple ? rendered.join("") : rendered.join("+");
+};
+/**
+ * Derives every app's origin from the host the consumer is already served on, so one deployment
+ * variable keeps dev, test and prod in step. An app may still carry its own `url`, which wins.
+ */
+export const buildSuiteApps = (apps, { baseUrl, baseSubdomain }) => {
+    let base;
+    try {
+        base = new URL(baseUrl.trim());
+    }
+    catch {
+        throw new Error(`[AppSwitcher] buildSuiteApps: baseUrl ${JSON.stringify(baseUrl)} is not an absolute URL.`);
+    }
+    const labels = base.hostname.split(".");
+    const at = labels.indexOf(baseSubdomain);
+    return apps.map(({ subdomain, url, ...app }) => {
+        if (url)
+            return { ...app, url: url.trim() };
+        // Without the label there is nothing to swap, and every app would silently share one origin.
+        if (at === -1) {
+            throw new Error(`[AppSwitcher] buildSuiteApps: ${JSON.stringify(baseSubdomain)} is not a label in ` +
+                `"${base.hostname}", so ${JSON.stringify(app.name)} has no derivable url. ` +
+                `Give that app an explicit url, or pass a baseUrl that contains the label.`);
+        }
+        const next = new URL(base.toString());
+        next.hostname = labels.map((l, i) => (i === at ? subdomain : l)).join(".");
+        return { ...app, url: next.origin };
+    });
+};

package/dist/esm/Components/AppSwitcher/useAppSwitcherShortcut.js

@@ -0,0 +1,27 @@
+import { useEffect } from "react";
+import { matchesShortcut } from "./AppSwitcherProps.js";
+const isTypingTarget = (target) => {
+    if (!(target instanceof HTMLElement))
+        return false;
+    if (target.isContentEditable)
+        return true;
+    return ["INPUT", "TEXTAREA", "SELECT"].includes(target.tagName);
+};
+/** Fires `onTrigger` on the shortcut. Inert when `shortcut` is null, and never in SSR. */
+export const useAppSwitcherShortcut = (shortcut, onTrigger, enabled = true) => {
+    useEffect(() => {
+        if (!shortcut || !enabled || typeof window === "undefined")
+            return undefined;
+        const handler = (event) => {
+            if (event.defaultPrevented || isTypingTarget(event.target))
+                return;
+            if (!matchesShortcut(event, shortcut))
+                return;
+            event.preventDefault();
+            onTrigger();
+        };
+        window.addEventListener("keydown", handler);
+        return () => window.removeEventListener("keydown", handler);
+    }, [shortcut, enabled, onTrigger]);
+};
+export default useAppSwitcherShortcut;

package/dist/esm/Components/AppearanceSettings/AppearanceSettings.js

@@ -5,13 +5,14 @@ import { ThemesList } from "../../Theme/index.js";
 import { ThemeSwitcher } from "../../Theme/provider/index.js";
 import { FONT_SIZE_OPTIONS } from "../../Theme/provider/fontSize.js";
 import { lightPalettes } from "../../Theme/tokens/brands/index.js";
+import { CHROME_RULE, ruleInk } from "../../Theme/tokens/builders/outlineRung.js";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 import SelectV2 from "../SelectV2/SelectV2.js";
 const FieldLabel = ({ children }) => {
     const { colors } = useCustomTheme();
     return (_jsx(Text, { fontSize: "sm", fontWeight: "medium", color: colors.textMuted, mb: 2, children: children }));
 };
-const brandSwatch = (name, colors) => (_jsx(Box, { w: "14px", h: "14px", borderRadius: "full", bg: lightPalettes[name].primary[500], border: "1px solid", borderColor: colors.boxborder[500] }));
+const brandSwatch = (name, colors) => (_jsx(Box, { w: "14px", h: "14px", borderRadius: "full", bg: lightPalettes[name].primary[500], border: "1px solid", borderColor: ruleInk(colors.boxborder[200], [colors.backgroundColor.light, colors.backgroundColor.tertiary], CHROME_RULE) }));
 export const AppearanceSettings = ({ brand, fontSize, onBrandChange, onFontSizeChange, showBrand = true, showColorMode = true, showFontSize = true, size = "sm", labels, }) => {
     var _a, _b, _c;
     const { colors } = useCustomTheme();

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

@@ -0,0 +1,22 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { 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",
+};
+const Avatar = ({ name, src, size = "md", status, ariaLabel, getInitials, "data-testid": testId }) => {
+    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, { 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] }));
+};
+export default Avatar;

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

@@ -0,0 +1,19 @@
+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`;
+};
+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";
+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 resolveAvatarColorway = (seed, colors) => {
+    const scale = colors[avatarScaleKeyFor(seed)];
+    const { fill, color } = resolveFilledSurface(scale, colors);
+    return { bg: fill, color };
+};
+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: "0.875rem", children: text })] })) : null) }) }));
+}

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

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

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

@@ -1,9 +1,19 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, useTheme } from "@chakra-ui/react";
+import { Box, Breadcrumb, BreadcrumbItem, BreadcrumbLink, useTheme } from "@chakra-ui/react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { breadcrumbInk } from "./breadcrumbInk.js";
 export default function Breadcrumbs({ spacing, separator, fontWeight, fontSize, isCurrentPage, handleClick, items, }) {
     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) => {
-                    event.preventDefault();
-                    handleClick(item.path);
-                }, children: item.label }) }, index))) }));
+    const { colors } = useCustomTheme();
+    const ink = breadcrumbInk(colors);
+    const effectiveSeparator = separator !== null && separator !== void 0 ? separator : (_jsx(Box, { as: "span", color: ink.separator, children: "/" }));
+    return (_jsx(Breadcrumb, { spacing: spacing, separator: effectiveSeparator, fontWeight: fontWeight, fontSize: fontSize, fontFamily: theme.fonts.body, children: items.map((item, index) => {
+            const isLast = isCurrentPage && index === items.length - 1;
+            return (_jsx(BreadcrumbItem, { isCurrentPage: isLast, children: _jsx(BreadcrumbLink, { href: item.path, color: isLast ? ink.current : ink.link, fontWeight: isLast ? 600 : fontWeight, sx: {
+                        "&:hover, &:active": { textDecoration: "none", color: isLast ? ink.current : ink.linkHover },
+                    }, onClick: (event) => {
+                        event.preventDefault();
+                        handleClick(item.path);
+                    }, children: item.label }) }, index));
+        }) }));
 }

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

@@ -1,7 +1,8 @@
 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 }));
-}
+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,52 +1,48 @@
-import { accentTextOnCanvas, isDarkCanvas, onFilled } from "../../Theme/tokens/builders/accentText.js";
+import { accentTextOnCanvas } from "../../Theme/tokens/builders/accentText.js";
+import { darkerFillRung, labelOnFill, 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.
- */
+import { focusVisibleStyles } from "../../Theme/chakra/focusRing.styles.js";
+import { reducedMotionSx } from "../../Theme/chakra/motion.js";
+import { CONTROL_SIZES, DEFAULT_CONTROL_SIZE, transitionFor } from "../../Theme/tokens/primitives/index.js";
+const controlSize = (size) => {
+    const { height, fontSize, paddingX } = CONTROL_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.
 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]`.
- */
+// NOTE: [50] alone measured ~1.04 (invisible) in both modes — opacity ramp fixes it where available.
 const onCanvasHoverBg = (theme, colorScheme, step) => {
     const scale = theme.colors[colorScheme];
     return "opacity" in scale ? scale.opacity[step] : scale[50];
 };
-/**
- * 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);
 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);
+// 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: transitionFor(["background-color", "border-color", "color", "box-shadow", "filter"]),
+        ...reducedMotionSx(),
         _disabled: {
             opacity: 0.6,
             cursor: "not-allowed",
         },
+        ...focusRing(theme),
     }),
     variants: {
         solid: ({ theme, colorScheme = "primary" }) => {
-            const fill = theme.colors[colorScheme][500];
+            const fill = theme.colors[colorScheme][buttonSolidRung(theme, colorScheme)];
             const hoverFill = darkerFill(theme, colorScheme, 0);
             const activeFill = darkerFill(theme, colorScheme, 1);
             const hoverLabel = labelFor(theme, hoverFill);
@@ -75,35 +71,27 @@ export const Button = {
                         color: hoverLabel,
                     },
                 },
+                ...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: "0.0625rem 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,
                 },
+                ...focusRing(theme),
             };
         },
         ghost: ({ theme, colorScheme = "primary" }) => ({
@@ -116,6 +104,7 @@ export const Button = {
             _active: {
                 bg: onCanvasHoverBg(theme, colorScheme, 24),
             },
+            ...focusRing(theme),
         }),
         link: ({ theme, colorScheme = "primary" }) => ({
             color: onCanvasText(theme, colorScheme),
@@ -128,13 +117,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.
@@ -161,38 +153,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";

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

@@ -37,14 +37,11 @@ rightIconDropdown, menulistStyle, menuItemStyle, isLoading, divider = true, left
     };
     const handleMenuClick = (event, option) => {
         setIsDropdownOpen(false);
-        // console.log("Option clicked:", option,event)
         if (onDropdownOptionClick) {
             onDropdownOptionClick(event, option);
         }
     };
-    // For the gradient variant we paint ONE continuous gradient on the group and
-    // keep the segments transparent (so it doesn't restart per button/icon), with a
-    // translucent-white hover overlay for per-segment feedback.
+    // 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);
@@ -63,13 +60,9 @@ rightIconDropdown, menulistStyle, menuItemStyle, isLoading, divider = true, left
         : 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.backgroundColor.light, 
-                            // Chakra's own MenuItem renders `background: var(--menu-bg)` at rest, and its
-                            // MenuList baseStyle sets that var to a hardcoded "#fff" (never our `_dark`, which
-                            // this theme-swap app never triggers) — our `bg` prop above only recolors the list
-                            // itself, not the inherited var, so items fell back to white until hover/focus (which
-                            // our own sx already overrides). Setting the var here fixes the rest state too.
-                            sx: { "--menu-bg": theme.colors.backgroundColor.light }, border: "1px solid", borderColor: theme.colors.boxborder[500], 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: {
+            : 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",
@@ -79,7 +72,7 @@ rightIconDropdown, menulistStyle, menuItemStyle, isLoading, divider = true, left
                                     borderRadius: "lg",
                                     fontSize: "13px",
                                     fontWeight: 500,
-                                    color: theme.colors.gray[700],
+                                    color: theme.colors.text[700],
                                     transition: "background 0.12s",
                                     "& svg": { width: "16px", height: "16px" },
                                     ...(divider
@@ -90,8 +83,6 @@ rightIconDropdown, menulistStyle, menuItemStyle, isLoading, divider = true, left
                                             borderColor: theme.colors.boxborder[200],
                                         }
                                         : {}),
-                                    _hover: { bg: theme.colors.primary[50], color: theme.colors.primary[700] },
-                                    _focus: { bg: theme.colors.primary[50], color: theme.colors.primary[700] },
                                     "&: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 })))] }));
 }

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

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

package/dist/esm/Components/Buttons/Buttons.js

@@ -1,5 +1,4 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-const Buttons = ({ onClick, label, className, disabled }) => {
-    return (_jsx("button", { onClick: onClick, className: `bg-purple-600 text-white font-medium py-2 px-4 rounded focus:outline-none focus:ring-offset-2  ${className} ${disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}`, disabled: disabled, children: label }));
-};
+import Button from '../Button/Button.js';
+const Buttons = ({ onClick, label, isDisabled, disabled }) => (_jsx(Button, { label: label, onClick: onClick, isDisabled: isDisabled !== null && isDisabled !== void 0 ? isDisabled : disabled, colorScheme: "primary" }));
 export default Buttons;

package/dist/esm/Components/Card/Card.js

@@ -1,5 +1,11 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Card as ChakraCard } from "@chakra-ui/react";
-export default function Card({ key, maxW, align, variant, direction, justify, children, size, color, overflow, sx, }) {
-    return (_jsx(ChakraCard, { maxW: maxW, align: align, variant: variant, direction: direction, justify: justify, size: size, overflow: overflow, colorScheme: color, p: 4, sx: sx, children: children }, key));
-}
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { Card as ChakraCard, CardBody, CardFooter, CardHeader, } from "@chakra-ui/react";
+const Card = forwardRef(function Card({ header, footer, children, color, colorScheme, direction = "column", align, justify, bodyProps, ...rest }, ref) {
+    const cardProps = { ...rest };
+    delete cardProps.dividercolor;
+    delete cardProps.dividersize;
+    delete cardProps.dividervariant;
+    return (_jsxs(ChakraCard, { ref: ref, colorScheme: colorScheme !== null && colorScheme !== void 0 ? colorScheme : color, ...cardProps, children: [header && _jsx(CardHeader, { children: header }), _jsx(CardBody, { display: "flex", flexDirection: direction, alignItems: align, justifyContent: justify, ...bodyProps, children: children }), footer && _jsx(CardFooter, { children: footer })] }));
+});
+export default Card;