pixelize-design-library 2.4.2-beta.4 → 2.4.2-beta.41

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

@@ -0,0 +1,243 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Box, Flex, Input, InputGroup, InputLeftElement, Popover, PopoverBody, PopoverContent, PopoverTrigger, Skeleton, Text, useDisclosure, } from "@chakra-ui/react";
+import { Grip, Lock, Search } from "lucide-react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { chartMode } from "../../Theme/tokens/builders/chartColorsFromTheme.js";
+import { AA_NORMAL_TEXT } from "../../Theme/tokens/builders/accentText.js";
+import { liftToContrast, neutralStep, ruleInk, AA_NON_TEXT, CHROME_RULE, MIN_PERCEPTIBLE_STEP, } from "../../Theme/tokens/builders/outlineRung.js";
+import { listRowBackgrounds } from "../../Theme/tokens/builders/rowStates.js";
+import { useExclusiveOverlay } from "../../Hooks/useExclusiveOverlay.js";
+import AppMark, { assignAppHues } from "./AppMark.js";
+import { filterApps, formatShortcut, } from "./AppSwitcherProps.js";
+import { useAppSwitcherShortcut } from "./useAppSwitcherShortcut.js";
+const COLUMNS = 2;
+const HEADING = "Your apps";
+const s = { trigger: "36px", mark: "32px", icon: 17, name: "0.875rem", sub: "0.75rem", row: "52px" };
+const warned = new Set();
+const warnOnce = (key, message) => {
+    if (process.env.NODE_ENV === "production" || warned.has(key))
+        return;
+    warned.add(key);
+    console.error(`[AppSwitcher] ${message}`);
+};
+const validate = (apps) => {
+    const seen = new Set();
+    apps.forEach((app, i) => {
+        var _a;
+        if (!app.id)
+            warnOnce(`id-${i}`, `apps[${i}] ("${(_a = app.name) !== null && _a !== void 0 ? _a : "unnamed"}") has no id.`);
+        else if (seen.has(app.id))
+            warnOnce(`dup-${app.id}`, `duplicate app id "${app.id}".`);
+        else
+            seen.add(app.id);
+        if (!app.url && !app.locked)
+            warnOnce(`url-${app.id || i}`, `app "${app.name}" has no url; it cannot be opened.`);
+    });
+};
+// Flip back to true to restore `searchThreshold` opening the field on its own.
+const SEARCH_OPENS_BY_COUNT = false;
+const AppSwitcher = ({ apps, currentAppId, onSelect, onOpenChange, isSearchable, searchThreshold = 8, shortcut = null, showShortcutHint = true, hideWhenAlone = true, emptyMessage = "No app matches that name.", footer, ariaLabel = "Switch app", panelWidth, maxHeight = "24rem", isLoading = false, }) => {
+    const theme = useCustomTheme();
+    const { isOpen, onOpen, onClose } = useDisclosure();
+    const requestExclusiveOpen = useExclusiveOverlay(isOpen, onClose);
+    const [query, setQuery] = useState("");
+    const [activeIndex, setActiveIndex] = useState(0);
+    const searchRef = useRef(null);
+    const triggerRef = useRef(null);
+    const itemRefs = useRef([]);
+    const typeahead = useRef({ buffer: "", at: 0 });
+    useEffect(() => validate(apps), [apps]);
+    // Search is off while the panel's design settles: the app count alone no longer opens it. An
+    // explicit `isSearchable` still wins, so nothing about the prop changed.
+    const showSearch = isSearchable !== null && isSearchable !== void 0 ? isSearchable : (SEARCH_OPENS_BY_COUNT && apps.length >= searchThreshold);
+    const hues = useMemo(() => assignAppHues(apps, chartMode(theme.colors)), [apps, theme.colors]);
+    const visible = useMemo(() => filterApps(apps, query), [apps, query]);
+    const setOpen = useCallback((next) => {
+        if (next) {
+            requestExclusiveOpen();
+            onOpen();
+        }
+        else {
+            onClose();
+        }
+        onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(next);
+    }, [onOpen, onClose, onOpenChange, requestExclusiveOpen]);
+    const closeAndRefocus = useCallback(() => {
+        var _a;
+        setOpen(false);
+        setQuery("");
+        (_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }, [setOpen]);
+    useAppSwitcherShortcut(shortcut, () => setOpen(true), !isOpen);
+    useEffect(() => {
+        if (!isOpen)
+            setQuery("");
+        setActiveIndex(0);
+    }, [isOpen]);
+    useEffect(() => setActiveIndex(0), [query]);
+    const focusItem = useCallback((next) => {
+        var _a;
+        setActiveIndex(next);
+        (_a = itemRefs.current[next]) === null || _a === void 0 ? void 0 : _a.focus();
+    }, []);
+    // Read the focused row, not state: two keydowns in one React batch would both compute from a
+    // stale activeIndex, so holding an arrow key silently dropped moves.
+    const currentIndex = useCallback(() => {
+        const focused = itemRefs.current.findIndex((el) => el === document.activeElement);
+        return focused === -1 ? activeIndex : focused;
+    }, [activeIndex]);
+    const step = useCallback((delta) => {
+        const count = visible.length;
+        if (count === 0)
+            return;
+        focusItem(((currentIndex() + delta) % count + count) % count);
+    }, [currentIndex, visible.length, focusItem]);
+    const jumpToLetter = useCallback((char) => {
+        const now = Date.now();
+        const buffer = now - typeahead.current.at < 600 ? typeahead.current.buffer + char : char;
+        typeahead.current = { buffer, at: now };
+        const at = currentIndex();
+        const from = buffer.length > 1 ? at : at + 1;
+        const order = visible.map((_, i) => (from + i) % visible.length);
+        const hit = order.find((i) => visible[i].name.toLowerCase().startsWith(buffer));
+        if (hit !== undefined)
+            focusItem(hit);
+    }, [visible, currentIndex, focusItem]);
+    // Chakra parks focus on the panel itself, where no arrow handler lives; route the first press in.
+    const handlePanelKeyDown = useCallback((e) => {
+        if (itemRefs.current.includes(document.activeElement))
+            return;
+        if (visible.length === 0)
+            return;
+        if (["ArrowDown", "ArrowRight", "Home"].includes(e.key)) {
+            e.preventDefault();
+            focusItem(0);
+        }
+        else if (["ArrowUp", "ArrowLeft", "End"].includes(e.key)) {
+            e.preventDefault();
+            focusItem(visible.length - 1);
+        }
+        else if (e.key === "Escape") {
+            e.preventDefault();
+            closeAndRefocus();
+        }
+    }, [visible.length, focusItem, closeAndRefocus]);
+    const handleItemKeyDown = useCallback((e, app) => {
+        if (e.key === "ArrowDown") {
+            e.preventDefault();
+            step(COLUMNS);
+        }
+        else if (e.key === "ArrowUp") {
+            e.preventDefault();
+            step(-COLUMNS);
+        }
+        else if (e.key === "ArrowRight") {
+            e.preventDefault();
+            step(1);
+        }
+        else if (e.key === "ArrowLeft") {
+            e.preventDefault();
+            step(-1);
+        }
+        else if (e.key === "Home") {
+            e.preventDefault();
+            focusItem(0);
+        }
+        else if (e.key === "End") {
+            e.preventDefault();
+            focusItem(visible.length - 1);
+        }
+        else if (e.key === "Escape") {
+            e.preventDefault();
+            closeAndRefocus();
+        }
+        else if (e.key === " " && !app.locked) {
+            e.preventDefault();
+            e.currentTarget.click();
+        }
+        else if (e.key.length === 1 && !e.metaKey && !e.ctrlKey && !e.altKey)
+            jumpToLetter(e.key.toLowerCase());
+    }, [step, focusItem, visible.length, closeAndRefocus, jumpToLetter]);
+    const handleSelect = (app, e) => {
+        if (app.locked) {
+            e.preventDefault();
+            return;
+        }
+        onSelect === null || onSelect === void 0 ? void 0 : onSelect(app, e);
+        if (!e.defaultPrevented)
+            setOpen(false);
+    };
+    const nothingToSwitchTo = apps.length === 0 || (hideWhenAlone && apps.every((a) => a.id === currentAppId));
+    if (nothingToSwitchTo)
+        return null;
+    const rowHoverBg = listRowBackgrounds(theme.colors).active;
+    const footerRule = ruleInk(theme.colors.boxborder[200], [theme.colors.backgroundColor.subtle], CHROME_RULE);
+    // Neutral, not `backgroundColor.tertiary`: that rung is brand-tinted in the hand-authored light
+    // palettes, so lifting it painted the row a saturated block. The rail identifies the row, so the
+    // fill only has to be perceptible — pushed further it is a mid-grey slab that reads disabled.
+    const currentBg = neutralStep(theme.colors.backgroundColor.light, MIN_PERCEPTIBLE_STEP);
+    // The brand rail is the whole marker — no ring, no badge. `accentText` already clears AA as ink
+    // on the canvas; lifting it to AA_NON_TEXT here guarantees it on the row's own fill too, for a
+    // brand whose accent is pale.
+    const currentBar = liftToContrast(theme.colors.accentText, currentBg, AA_NON_TEXT);
+    // A derived surface is outside what `withSurfaceRungs` settled, so its ink is resolved here.
+    const currentName = liftToContrast(theme.colors.text[900], currentBg, AA_NORMAL_TEXT);
+    const currentSub = liftToContrast(theme.colors.textMuted, currentBg, AA_NORMAL_TEXT);
+    const width = panelWidth !== null && panelWidth !== void 0 ? panelWidth : "28rem";
+    const hint = shortcut && showShortcutHint ? formatShortcut(shortcut) : null;
+    return (_jsxs(Popover, { isOpen: isOpen, onOpen: () => setOpen(true), onClose: () => { setOpen(false); setQuery(""); }, placement: "bottom-end", initialFocusRef: showSearch ? searchRef : undefined, isLazy: true, children: [_jsx(PopoverTrigger, { children: _jsx(Flex, { ref: triggerRef, as: "button", type: "button", "aria-label": ariaLabel, align: "center", justify: "center", boxSize: s.trigger, borderRadius: "lg", border: "1px solid", borderColor: isOpen ? theme.colors.boxborder[500] : theme.colors.boxborder[200], bg: isOpen ? theme.colors.backgroundColor.tertiary : "transparent", color: isOpen ? theme.colors.text[900] : theme.colors.textMuted, cursor: "pointer", transition: "background 0.15s ease, border-color 0.15s ease", _hover: { bg: rowHoverBg, color: theme.colors.text[900] }, onKeyDown: (e) => {
+                        if (!isOpen) {
+                            if (e.key === "ArrowDown") {
+                                e.preventDefault();
+                                setOpen(true);
+                            }
+                            return;
+                        }
+                        handlePanelKeyDown(e);
+                    }, children: _jsx(Grip, { size: s.icon + 1 }) }) }), _jsx(PopoverContent, { w: width, maxW: "calc(100vw - 1.5rem)", textAlign: "start", onKeyDown: handlePanelKeyDown, bg: theme.colors.backgroundColor.light, borderRadius: "xl", overflow: "hidden", boxShadow: `0 10px 30px ${theme.colors.boxShadow.default}`, _focus: { outline: "none", boxShadow: `0 10px 30px ${theme.colors.boxShadow.default}` }, children: _jsxs(PopoverBody, { p: 0, children: [_jsxs(Flex, { align: "center", gap: 2, px: 3, pt: 3, pb: showSearch ? 2 : 1, children: [_jsx(Text, { fontSize: "0.6875rem", fontWeight: 600, letterSpacing: "0.08em", textTransform: "uppercase", color: theme.colors.textMuted, children: HEADING }), _jsx(Box, { flex: "1" }), hint && (_jsx(Text, { as: "kbd", fontSize: "0.6875rem", fontFamily: "inherit", color: theme.colors.textMuted, border: "1px solid", borderRadius: "base", px: 1.5, py: 0.5, children: hint }))] }), showSearch && (_jsx(Box, { px: 3, pb: 2, children: _jsxs(InputGroup, { size: "sm", children: [_jsx(InputLeftElement, { pointerEvents: "none", children: _jsx(Search, { size: 15, color: theme.colors.textMuted }) }), _jsx(Input, { ref: searchRef, value: query, onChange: (e) => setQuery(e.target.value), placeholder: "Search apps", borderRadius: "lg", "aria-label": "Search apps", onKeyDown: (e) => {
+                                            if (e.key === "ArrowDown" && visible.length > 0) {
+                                                e.preventDefault();
+                                                focusItem(0);
+                                            }
+                                            else if (e.key === "Escape") {
+                                                e.preventDefault();
+                                                if (query)
+                                                    setQuery("");
+                                                else
+                                                    closeAndRefocus();
+                                            }
+                                        } })] }) })), _jsxs(Box, { role: "menu", "aria-label": HEADING, maxH: maxHeight, overflowY: "auto", px: 2, pb: 2, display: "grid", gridTemplateColumns: `repeat(${COLUMNS}, minmax(0, 1fr))`, gap: "2px", children: [isLoading
+                                    ? [0, 1, 2, 3].map((i) => (_jsxs(Flex, { align: "center", gap: 3, px: 2, py: 2, minH: s.row, children: [_jsx(Skeleton, { boxSize: s.mark, borderRadius: "lg" }), _jsx(Skeleton, { h: "0.75rem", flex: "1", borderRadius: "base" })] }, i)))
+                                    : visible.map((app, idx) => {
+                                        var _a;
+                                        const isCurrent = app.id === currentAppId;
+                                        const interactive = !isCurrent && !app.locked;
+                                        return (_jsxs(Flex, { as: interactive ? "a" : "div", role: "menuitem", ref: (el) => { itemRefs.current[idx] = el; }, tabIndex: idx === activeIndex ? 0 : -1, "aria-current": isCurrent ? "true" : undefined, "aria-disabled": app.locked ? true : undefined, title: app.locked ? ((_a = app.lockedReason) !== null && _a !== void 0 ? _a : `${app.name} is not available on your plan`) : undefined, ...(interactive
+                                                ? {
+                                                    href: app.url,
+                                                    target: "_blank",
+                                                    rel: "noopener noreferrer",
+                                                }
+                                                : {}), align: "center", gap: 3, minH: s.row, px: 2, py: 2, borderRadius: "lg", textDecoration: "none", cursor: interactive ? "pointer" : "default", bg: isCurrent ? currentBg : "transparent", position: "relative", 
+                                            // Full height, taking the row's own `lg` radius on its outer corners so the
+                                            // rail follows the row's curve instead of cutting across it.
+                                            _before: isCurrent
+                                                ? {
+                                                    content: '""',
+                                                    position: "absolute",
+                                                    insetInlineStart: 0,
+                                                    insetBlock: 0,
+                                                    width: "3px",
+                                                    borderStartStartRadius: "lg",
+                                                    borderEndStartRadius: "lg",
+                                                    bg: currentBar,
+                                                }
+                                                : undefined, transition: "background 0.12s ease", _hover: interactive ? { bg: rowHoverBg } : undefined, onClick: (e) => handleSelect(app, e), onKeyDown: (e) => handleItemKeyDown(e, app), children: [_jsx(AppMark, { app: app, hue: hues[apps.indexOf(app)], boxSize: s.mark, iconSize: s.icon, muted: app.locked }), _jsxs(Box, { flex: "1", minW: 0, children: [_jsxs(Flex, { align: "center", gap: 1.5, children: [_jsx(Text, { fontSize: s.name, fontWeight: 600, color: app.locked
+                                                                        ? theme.colors.textMuted
+                                                                        : isCurrent
+                                                                            ? currentName
+                                                                            : theme.colors.text[900], overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: app.name }), app.badge !== undefined && !isCurrent && (_jsx(Text, { fontSize: "0.625rem", fontWeight: 600, color: theme.colors.semanticText.info, flexShrink: 0, children: app.badge }))] }), app.description && (_jsx(Text, { fontSize: s.sub, color: isCurrent ? currentSub : theme.colors.textMuted, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: app.description }))] }), app.locked && (_jsx(Box, { as: Lock, size: 14, color: theme.colors.textMuted, flexShrink: 0 }))] }, app.id || app.name));
+                                    }), !isLoading && visible.length === 0 && (_jsx(Box, { gridColumn: `span ${COLUMNS}`, px: 2, py: 6, textAlign: "center", children: _jsx(Text, { fontSize: s.name, color: theme.colors.textMuted, children: emptyMessage }) }))] }), footer && (_jsx(Flex, { align: "center", gap: 1.5, px: 3, py: 2.5, borderTop: "1px solid", borderTopColor: footerRule, bg: theme.colors.backgroundColor.subtle, children: footer }))] }) })] }));
+};
+export default AppSwitcher;

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/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 = "Loading", 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, 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,5 +1,7 @@
-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";
+import { focusVisibleStyles } from "../../Theme/chakra/focusRing.styles.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
@@ -17,24 +19,28 @@ 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);
+/**
+ * The two-tone `:focus-visible` ring, from the palette's derived `focusRing` pair.
+ *
+ * Every variant spreads this. Before it, none of them defined `_focusVisible` at all, so every
+ * button in every consuming app fell through to Chakra's stock `shadows.outline` — one fixed blue
+ * that measured 1.83:1 on the canvas and 1.38:1 on a primary fill, failing WCAG 1.4.11 (3:1) on
+ * all nine brands. `focusRing.test.ts` is the gate that keeps this true.
+ */
+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",
@@ -43,10 +49,11 @@ export const Button = {
             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,25 +82,26 @@ export const Button = {
                         color: hoverLabel,
                     },
                 },
+                ...focusRing(theme),
             };
         },
         outline: ({ theme, colorScheme = "primary" }) => {
-            const hoverFill = theme.colors[colorScheme][500];
+            // Same rung as `solid`'s fill, not raw [500] — keeps hover bg AA-safe for white text.
+            const hoverFill = theme.colors[colorScheme][buttonSolidRung(theme, colorScheme)];
             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),
+                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),
+                        color: ink,
                     },
                 },
                 _active: {
@@ -102,8 +110,9 @@ export const Button = {
                 },
                 _loading: {
                     // bg: theme.colors[colorScheme][500],
-                    color: onCanvasText(theme, colorScheme),
+                    color: ink,
                 },
+                ...focusRing(theme),
             };
         },
         ghost: ({ theme, colorScheme = "primary" }) => ({
@@ -116,6 +125,7 @@ export const Button = {
             _active: {
                 bg: onCanvasHoverBg(theme, colorScheme, 24),
             },
+            ...focusRing(theme),
         }),
         link: ({ theme, colorScheme = "primary" }) => ({
             color: onCanvasText(theme, colorScheme),
@@ -128,13 +138,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,6 +174,7 @@ export const Button = {
                     filter: "brightness(0.92)",
                     _hover: { bgImage: bg, filter: "brightness(0.92)" },
                 },
+                ...focusRing(theme),
             };
         },
     },

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

@@ -69,7 +69,7 @@ rightIconDropdown, menulistStyle, menuItemStyle, isLoading, divider = true, left
                             // 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: {
+                            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 +79,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 +90,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/Card/Card.js

@@ -1,5 +1,5 @@
 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));
+export default function Card({ 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 }));
 }