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

package/dist/Components/Avatar/avatarColorway.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.initialsFor = exports.resolveAvatarColorway = exports.avatarScaleKeyFor = void 0;
+const filledSurface_1 = require("../../Theme/tokens/builders/filledSurface");
+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;
+};
+const avatarScaleKeyFor = (seed) => AVATAR_SCALE_KEYS[hashSeed(seed) % AVATAR_SCALE_KEYS.length];
+exports.avatarScaleKeyFor = avatarScaleKeyFor;
+// Always via resolveFilledSurface, never scale[500] + a guessed ink.
+const resolveAvatarColorway = (seed, colors) => {
+    const scale = colors[(0, exports.avatarScaleKeyFor)(seed)];
+    const { fill, color } = (0, filledSurface_1.resolveFilledSurface)(scale, colors);
+    return { bg: fill, color };
+};
+exports.resolveAvatarColorway = resolveAvatarColorway;
+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();
+};
+exports.initialsFor = initialsFor;

package/dist/Components/Avatar/avatarSizing.d.ts

@@ -0,0 +1,5 @@
+import type { AvatarSize } from "./AvatarProps";
+export declare const SIZE_PX: Record<AvatarSize, number>;
+export declare const FONT_SIZE: Record<AvatarSize, string>;
+export declare const DOT_SIZE: Record<AvatarSize, string>;
+export declare const OVERLAP: Record<AvatarSize, string>;

package/dist/Components/Avatar/avatarSizing.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OVERLAP = exports.DOT_SIZE = exports.FONT_SIZE = exports.SIZE_PX = void 0;
+exports.SIZE_PX = {
+    "2xs": 16, xs: 24, sm: 32, md: 40, lg: 48, xl: 64,
+};
+exports.FONT_SIZE = {
+    "2xs": "0.5rem", xs: "0.625rem", sm: "0.75rem", md: "0.875rem", lg: "1rem", xl: "1.25rem",
+};
+exports.DOT_SIZE = {
+    "2xs": "5px", xs: "6px", sm: "8px", md: "9px", lg: "10px", xl: "12px",
+};
+exports.OVERLAP = {
+    "2xs": "5px", xs: "8px", sm: "10px", md: "12px", lg: "14px", xl: "18px",
+};

package/dist/Components/Backdrop/Backdrop.d.ts

@@ -0,0 +1,3 @@
+import { BackdropProps } from "./BackdropProps";
+/** Fading scrim that blocks (or optionally lets through) the page behind; prefer it over a hand-rolled overlay. */
+export default function Backdrop({ open, variant, loader, text, invisible, allowBackgroundInteraction, onClick, transitionDuration, container, zIndex, children, ariaLabel, }: BackdropProps): import("react/jsx-runtime").JSX.Element;

package/dist/Components/Backdrop/Backdrop.js

@@ -0,0 +1,34 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = Backdrop;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@chakra-ui/react");
+const Spinner_1 = __importDefault(require("../Spinner/Spinner"));
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const scrim_1 = require("../../Theme/tokens/builders/scrim");
+const overlay_styles_1 = require("../../Theme/chakra/overlay.styles");
+const motion_1 = require("../../Theme/chakra/motion");
+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. */
+function Backdrop({ open, variant = "dim", loader = false, text, invisible = false, allowBackgroundInteraction = false, onClick, transitionDuration, container = false, zIndex, children, ariaLabel, }) {
+    var _a, _b;
+    const { colors } = (0, useCustomTheme_1.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 ? (0, scrim_1.backdropScrim)(colors) : (0, scrim_1.overlayScrim)(colors);
+    const label = ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : (loader ? "Loading" : undefined);
+    return ((0, jsx_runtime_1.jsx)(react_1.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: (0, jsx_runtime_1.jsx)(react_1.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_styles_1.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", ...(0, motion_1.reducedMotionSx)() }, children: children !== null && children !== void 0 ? children : (loader ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Spinner_1.default, { size: "lg", boxSize: SPINNER_BOX, thickness: SPINNER_THICKNESS, color: colors.white, label: text ? "" : "Loading" }), text && (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "0.875rem", children: text })] })) : null) }) }));
+}

package/dist/Components/Backdrop/BackdropProps.d.ts

@@ -0,0 +1,33 @@
+import type { ReactNode } from "react";
+/** Scrim treatment: `dim` darkens only (black 0.5, no blur); `frosted` is the heavier Modal/Drawer scrim (black 0.6 + 4px blur). */
+export type BackdropVariant = "dim" | "frosted";
+/** Props for Backdrop, a fading full-viewport (or container-scoped) scrim that optionally centres a loader. */
+export type BackdropProps = {
+    /** Mounts the scrim and fades it in; `false` fades out and unmounts. */
+    open: boolean;
+    /** Defaults to "dim". */
+    variant?: BackdropVariant;
+    /** Centres a 40px spinner in the library's `Spinner`, inheriting the scrim's foreground colour. */
+    loader?: boolean;
+    /** Caption under the loader; ignored unless `loader` is set. */
+    text?: string;
+    /** Keeps the scrim blocking every click while painting nothing. */
+    invisible?: boolean;
+    /** Lets clicks reach the page behind; `onClick` cannot fire while this is set. */
+    allowBackgroundInteraction?: boolean;
+    /** Fires on scrim clicks — the usual "click away to dismiss" hook. */
+    onClick?: () => void;
+    /** Fade length in ms, or separate enter/exit. Defaults to 225 in / 195 out. */
+    transitionDuration?: number | {
+        enter?: number;
+        exit?: number;
+    };
+    /** Scopes the scrim to the nearest positioned ancestor instead of the viewport. */
+    container?: boolean;
+    /** Defaults to the 1300 modal layer full-viewport, or 10 when `container`. */
+    zIndex?: number | string;
+    /** Rendered centred; replaces the built-in loader when both are given. */
+    children?: ReactNode;
+    /** Announced to screen readers while open; defaults to "Loading" when `loader` is set. */
+    ariaLabel?: string;
+};

package/dist/Components/Backdrop/BackdropProps.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/Components/Breadcrumbs/Breadcrumbs.js

@@ -3,10 +3,20 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = Breadcrumbs;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("@chakra-ui/react");
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const breadcrumbInk_1 = require("./breadcrumbInk");
 function Breadcrumbs({ spacing, separator, fontWeight, fontSize, isCurrentPage, handleClick, items, }) {
     const theme = (0, react_1.useTheme)();
-    return ((0, jsx_runtime_1.jsx)(react_1.Breadcrumb, { spacing: spacing, separator: separator, fontWeight: fontWeight, fontSize: fontSize, fontFamily: theme.fonts.body, children: items.map((item, index) => ((0, jsx_runtime_1.jsx)(react_1.BreadcrumbItem, { isCurrentPage: isCurrentPage && index === items.length - 1, children: (0, jsx_runtime_1.jsx)(react_1.BreadcrumbLink, { href: item.path, sx: { "&:hover, &:active": { textDecoration: "none" } }, onClick: (event) => {
-                    event.preventDefault();
-                    handleClick(item.path);
-                }, children: item.label }) }, index))) }));
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const ink = (0, breadcrumbInk_1.breadcrumbInk)(colors);
+    const effectiveSeparator = separator !== null && separator !== void 0 ? separator : ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", color: ink.separator, children: "/" }));
+    return ((0, jsx_runtime_1.jsx)(react_1.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 ((0, jsx_runtime_1.jsx)(react_1.BreadcrumbItem, { isCurrentPage: isLast, children: (0, jsx_runtime_1.jsx)(react_1.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/Components/Breadcrumbs/BreadcrumbsProps.d.ts

@@ -1,10 +1,13 @@
 import { BreadcrumbProps } from "@chakra-ui/react";
+/** `isCurrentPage` marks only the last item in `items`; `handleClick` fully replaces the link's default navigation. */
 export type BreadcrumbsProps = Pick<BreadcrumbProps, "spacing" | "separator" | "fontWeight" | "fontSize"> & {
     isCurrentPage?: boolean;
+    /** Accepted but never read by Breadcrumbs — has no effect at all. */
     isLastChild?: boolean;
     handleClick: (path: string) => void;
     items: BreadcrumbItem[];
 };
+/** One crumb: `label` is the visible text, `path` is passed to both the link's href and `handleClick`. */
 export type BreadcrumbItem = {
     path: string;
     label: string;

package/dist/Components/Breadcrumbs/breadcrumbInk.d.ts

@@ -0,0 +1,9 @@
+import type { PaletteProps } from "../../Theme/tokens/types";
+export type BreadcrumbInk = {
+    link: string;
+    linkHover: string;
+    current: string;
+    separator: string;
+};
+/** Chakra ships no default Breadcrumb theme, so every ink here needs an explicit token. */
+export declare const breadcrumbInk: (colors: PaletteProps) => BreadcrumbInk;

package/dist/Components/Breadcrumbs/breadcrumbInk.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.breadcrumbInk = void 0;
+/** Chakra ships no default Breadcrumb theme, so every ink here needs an explicit token. */
+const breadcrumbInk = (colors) => ({
+    link: colors.textMuted,
+    linkHover: colors.accentText,
+    current: colors.text[900],
+    separator: colors.textMuted,
+});
+exports.breadcrumbInk = breadcrumbInk;

package/dist/Components/Button/Button.d.ts

@@ -1,4 +1,4 @@
+import { type ComponentWithAs } from "@chakra-ui/react";
 import { ButtonProps } from "./ButtonProps";
-declare function Button({ label, children, onClick, opacity, variant, leftIcon, rightIcon, size, isDisabled, isLoading, loadingText, type, width, sx, colorScheme, ref, border, borderRadius, onMouseEnter, onMouseLeave, ...aria }: ButtonProps): import("react/jsx-runtime").JSX.Element;
-declare const _default: import("react").MemoExoticComponent<typeof Button>;
+declare const _default: ComponentWithAs<"button", ButtonProps>;
 export default _default;

package/dist/Components/Button/Button.js

@@ -3,7 +3,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const react_2 = require("@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 ((0, jsx_runtime_1.jsx)(react_2.Button, { ...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 = (0, react_1.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 ((0, jsx_runtime_1.jsx)(react_2.Button, { ...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 }));
+});
 exports.default = (0, react_1.memo)(Button);

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

@@ -2,54 +2,50 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Button = void 0;
 const accentText_1 = require("../../Theme/tokens/builders/accentText");
+const filledSurface_1 = require("../../Theme/tokens/builders/filledSurface");
 const gradientInk_1 = require("../../Theme/tokens/builders/gradientInk");
-/**
- * Outline/ghost/link text sits ON the canvas, so it needs a rung that stays readable there —
- * `[500]` is pinned dark enough to carry a white label on the solid variant and measures only
- * ~4.2 against the dark canvas. Returns `[500]` unchanged on light canvases, so existing apps
- * are pixel-identical.
- */
+const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
+const motion_1 = require("../../Theme/chakra/motion");
+const primitives_1 = require("../../Theme/tokens/primitives");
+const controlSize = (size) => {
+    const { height, fontSize, paddingX } = primitives_1.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) => (0, accentText_1.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) => (0, filledSurface_1.solidFillRung)(swatch(theme, colorScheme), theme.colors.white);
 const darkerFill = (theme, colorScheme, step) => {
-    const mode = (0, accentText_1.isDarkCanvas)(theme.colors.backgroundColor.main) ? "dark" : "light";
-    return theme.colors[colorScheme][FILL_STEP_RUNGS[mode][step]];
+    const scale = swatch(theme, colorScheme);
+    const rung = (0, filledSurface_1.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) => (0, accentText_1.onFilled)(fill, theme.colors.white, theme.colors.black);
+const labelFor = (theme, fill) => (0, filledSurface_1.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) => (0, focusRing_styles_1.focusVisibleStyles)(theme.colors);
 exports.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: (0, primitives_1.transitionFor)(["background-color", "border-color", "color", "box-shadow", "filter"]),
+        ...(0, motion_1.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);
@@ -78,35 +74,27 @@ exports.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" }) => ({
@@ -119,6 +107,7 @@ exports.Button = {
             _active: {
                 bg: onCanvasHoverBg(theme, colorScheme, 24),
             },
+            ...focusRing(theme),
         }),
         link: ({ theme, colorScheme = "primary" }) => ({
             color: onCanvasText(theme, colorScheme),
@@ -131,13 +120,16 @@ exports.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.
@@ -164,38 +156,19 @@ exports.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: primitives_1.DEFAULT_CONTROL_SIZE,
         variant: "solid",
         colorScheme: "primary",
     },

package/dist/Components/Button/ButtonProps.d.ts

@@ -1,12 +1,26 @@
 import { ButtonProps as ChakraButtonProps } from "@chakra-ui/react";
-export type ButtonProps = Pick<ChakraButtonProps, "onClick" | "leftIcon" | "rightIcon" | "isDisabled" | "isLoading" | "loadingText" | "spinner" | "sx" | "border" | "borderRadius" | "onMouseEnter" | "onMouseLeave" | "aria-label" | "aria-labelledby" | "aria-describedby" | "aria-expanded" | "aria-haspopup" | "aria-controls" | "aria-pressed" | "aria-current" | "id" | "title"> & {
+type LayoutProps = Pick<ChakraButtonProps, "as" | "m" | "mt" | "mb" | "ml" | "mr" | "mx" | "my" | "p" | "pt" | "pb" | "pl" | "pr" | "px" | "py" | "w" | "minW" | "maxW" | "h" | "minH" | "maxH" | "boxSize" | "flex" | "flexShrink" | "flexGrow" | "alignSelf" | "justifyContent" | "cursor" | "fontWeight" | "fontSize" | "textAlign" | "whiteSpace" | "_hover" | "_active" | "_focus" | "_focusVisible" | "_disabled" | "isActive" | "onKeyDown" | "onFocus" | "onBlur" | "onPointerDown" | "tabIndex" | "form" | "name" | "value" | "autoFocus" | "role">;
+type DataAttributes = {
+    [key: `data-${string}`]: string | number | boolean | undefined;
+};
+/** Themed Chakra Button (default size "sm"); loading shows a spinner and keeps the width — for a plain unthemed <button>, see the separate Buttons component. */
+export type ButtonProps = LayoutProps & DataAttributes & Pick<ChakraButtonProps, "onClick" | "leftIcon" | "rightIcon" | "isDisabled" | "isLoading" | "spinner" | "sx" | "border" | "borderRadius" | "onMouseEnter" | "onMouseLeave" | "aria-label" | "aria-labelledby" | "aria-describedby" | "aria-expanded" | "aria-haspopup" | "aria-controls" | "aria-pressed" | "aria-current" | "id" | "title"> & {
+    /** Button text; ignored when `children` is passed. No label or children plus an icon = icon-only. */
     label?: string;
+    /** Text beside the spinner while loading; omit it and the label stays laid out, hidden, so the width holds. */
+    loadingText?: string;
+    /** Defaults to "fit-content", not 100%; the w alias only applies when width is unset — width wins if both are passed. */
     width?: string | number;
+    /** Control height xs 28 · sm 35 · md 40 · lg 48 (xl 56); defaults to "sm" via the theme, so a ButtonGroup size still applies. */
     size?: "lg" | "md" | "sm" | "xs" | "xl";
+    /** Defaults to "solid"; "gradient" paints the theme's fixed brand gradient. */
     variant?: "solid" | "outline" | "ghost" | "link" | "unstyled" | "gradient";
+    /** Chakra defaults this to "button", so pass "submit" explicitly inside a form. */
     type?: "button" | "submit" | "reset";
+    /** Ignored when variant="gradient" — that variant always paints the theme's fixed gradient pair, not this scheme. */
     colorScheme?: 'primary' | 'secondary' | 'tertiary' | 'gray' | 'red' | 'orange' | 'yellow' | 'green' | 'teal' | 'blue' | 'cyan' | 'purple' | 'pink';
     ref?: React.Ref<HTMLButtonElement>;
     children?: React.ReactNode;
     opacity?: number;
 };
+export {};

package/dist/Components/ButtonGroupIcon/ButtonGoupIconProps.d.ts

@@ -1,35 +1,2 @@
-import { ReactElement } from "react";
-export type ButtonGroupIconProps = {
-    leftIcon?: ReactElement;
-    rightIcon?: ReactElement;
-    onLeftIconClick?: () => void;
-    onRightIconClick?: () => void;
-    buttonText: string;
-    onButtonClick?: () => void;
-    onButtongroupClick?: () => void;
-    size?: "lg" | "md" | "sm" | "xs" | "xl";
-    variant?: "solid" | "outline" | "ghost" | "link" | "unstyled" | "gradient";
-    color?: "primary" | "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "whiteAlpha" | "blackAlpha";
-    buttonGroupStyle?: React.CSSProperties;
-    buttonGroupLeftIconStyle?: React.CSSProperties;
-    buttonGroupRightIconStyle?: React.CSSProperties;
-    buttonStyle?: React.CSSProperties;
-    onBlurLeftIcon?: () => void;
-    onBlurRightIcon?: () => void;
-    dropdownOptions?: {
-        label: string;
-        id: string | number;
-        image?: ReactElement | undefined;
-    }[];
-    onDropdownOptionClick?: (event: React.MouseEvent, option: {
-        label: string;
-        id: string | number;
-    }) => void;
-    rightIconDropdown?: boolean;
-    menulistStyle?: React.CSSProperties;
-    menuItemStyle?: React.CSSProperties;
-    isLoading?: boolean;
-    divider?: boolean;
-    leftIconLoading?: boolean;
-    RightIconLoading?: boolean;
-};
+/** @deprecated Misspelled path — import from `./ButtonGroupIconProps` instead. */
+export * from "./ButtonGroupIconProps";

package/dist/Components/ButtonGroupIcon/ButtonGoupIconProps.js

@@ -1,2 +1,18 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
 Object.defineProperty(exports, "__esModule", { value: true });
+/** @deprecated Misspelled path — import from `./ButtonGroupIconProps` instead. */
+__exportStar(require("./ButtonGroupIconProps"), exports);

package/dist/Components/ButtonGroupIcon/ButtonGroupIcon.d.ts

@@ -1,4 +1,4 @@
-import { ButtonGroupIconProps } from "./ButtonGoupIconProps";
+import { ButtonGroupIconProps } from "./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, leftIconLoading, RightIconLoading, }: ButtonGroupIconProps): import("react/jsx-runtime").JSX.Element;

package/dist/Components/ButtonGroupIcon/ButtonGroupIcon.js

@@ -40,14 +40,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 = (0, gradientInk_1.resolveGradient)(theme.colors.gradient, theme.colors.white, theme.colors.black);
     const gradientBg = (0, gradientInk_1.gradientCss)(gradientStops);
@@ -66,13 +63,9 @@ rightIconDropdown, menulistStyle, menuItemStyle, isLoading, divider = true, left
         : undefined;
     return ((0, jsx_runtime_1.jsxs)(react_2.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 && ((0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "Left icon button", icon: leftIcon, isLoading: leftIconLoading, onClick: onLeftIconClick, onBlur: onBlurLeftIcon, style: buttonGroupLeftIconStyle, sx: gradientItemSx })), (0, jsx_runtime_1.jsx)(react_2.Tooltip, { label: buttonText, isDisabled: !buttonText || !isTextTruncated, children: (0, jsx_runtime_1.jsx)(react_2.Button, { onClick: onButtonClick, style: buttonStyle, isLoading: isLoading, borderLeft: "1px solid", borderRight: "1px solid", borderColor: whiteOverlay(0.24), maxW: "200px", sx: gradientItemSx, children: (0, jsx_runtime_1.jsx)(react_2.Box, { ref: textRef, as: "span", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", display: "block", width: "100%", children: buttonText }) }) }), rightIcon && rightIconDropdown ? ((0, jsx_runtime_1.jsxs)(react_2.Menu, { isOpen: isDropdownOpen, onClose: () => setIsDropdownOpen(false), children: [(0, jsx_runtime_1.jsx)(react_2.MenuButton, { as: react_2.IconButton, "aria-label": "Right icon button", icon: rightIcon, isLoading: RightIconLoading, onClick: handleRightIconClick, onBlur: onBlurRightIcon, style: buttonGroupRightIconStyle, sx: gradientItemSx }), (0, jsx_runtime_1.jsx)(react_2.Box, { sx: { zIndex: 99 }, children: (0, jsx_runtime_1.jsx)(react_2.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) => ((0, jsx_runtime_1.jsxs)(react_2.MenuItem, { onClick: (event) => handleMenuClick(event, option), style: menuItemStyle, sx: {
+            : undefined, children: [leftIcon && ((0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "Left icon button", icon: leftIcon, isLoading: leftIconLoading, onClick: onLeftIconClick, onBlur: onBlurLeftIcon, style: buttonGroupLeftIconStyle, sx: gradientItemSx })), (0, jsx_runtime_1.jsx)(react_2.Tooltip, { label: buttonText, isDisabled: !buttonText || !isTextTruncated, children: (0, jsx_runtime_1.jsx)(react_2.Button, { onClick: onButtonClick, style: buttonStyle, isLoading: isLoading, borderLeft: "1px solid", borderRight: "1px solid", borderColor: whiteOverlay(0.24), maxW: "200px", sx: gradientItemSx, children: (0, jsx_runtime_1.jsx)(react_2.Box, { ref: textRef, as: "span", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", display: "block", width: "100%", children: buttonText }) }) }), rightIcon && rightIconDropdown ? ((0, jsx_runtime_1.jsxs)(react_2.Menu, { isOpen: isDropdownOpen, onClose: () => setIsDropdownOpen(false), children: [(0, jsx_runtime_1.jsx)(react_2.MenuButton, { as: react_2.IconButton, "aria-label": "Right icon button", icon: rightIcon, isLoading: RightIconLoading, onClick: handleRightIconClick, onBlur: onBlurRightIcon, style: buttonGroupRightIconStyle, sx: gradientItemSx }), (0, jsx_runtime_1.jsx)(react_2.Box, { sx: { zIndex: 99 }, children: (0, jsx_runtime_1.jsx)(react_2.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) => ((0, jsx_runtime_1.jsxs)(react_2.MenuItem, { onClick: (event) => handleMenuClick(event, option), style: menuItemStyle, sx: {
                                     display: "flex",
                                     alignItems: "center",
                                     gap: "0.5rem",
@@ -82,7 +75,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
@@ -93,8 +86,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 && ((0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "Right icon button", icon: rightIcon, isLoading: RightIconLoading, onClick: onRightIconClick, onBlur: onBlurRightIcon, style: buttonGroupRightIconStyle, sx: gradientItemSx })))] }));
 }

package/dist/Components/ButtonGroupIcon/ButtonGroupIconProps.d.ts

@@ -0,0 +1,42 @@
+import { ReactElement } from "react";
+/** Themed Chakra ButtonGroup wrapper (left icon + text button + right icon/dropdown) — closed prop list, no ...rest, text via buttonText only. */
+export type ButtonGroupIconProps = {
+    leftIcon?: ReactElement;
+    rightIcon?: ReactElement;
+    onLeftIconClick?: () => void;
+    onRightIconClick?: () => void;
+    /** Auto-wrapped in a tooltip showing full text, but only when it visually truncates (maxW 200px). */
+    buttonText: string;
+    onButtonClick?: () => void;
+    /** Fires on every click inside the group via DOM bubbling too — not just clicks on group chrome. */
+    onButtongroupClick?: () => void;
+    size?: "lg" | "md" | "sm" | "xs" | "xl";
+    variant?: "solid" | "outline" | "ghost" | "link" | "unstyled" | "gradient";
+    /** Actually Chakra's colorScheme (a palette name like "red"), not a CSS text or icon color. */
+    color?: "primary" | "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "whiteAlpha" | "blackAlpha";
+    buttonGroupStyle?: React.CSSProperties;
+    buttonGroupLeftIconStyle?: React.CSSProperties;
+    buttonGroupRightIconStyle?: React.CSSProperties;
+    buttonStyle?: React.CSSProperties;
+    onBlurLeftIcon?: () => void;
+    onBlurRightIcon?: () => void;
+    /** Rendered only when BOTH rightIcon and rightIconDropdown are also set — otherwise silently unused. */
+    dropdownOptions?: {
+        label: string;
+        id: string | number;
+        image?: ReactElement | undefined;
+    }[];
+    onDropdownOptionClick?: (event: React.MouseEvent, option: {
+        label: string;
+        id: string | number;
+    }) => void;
+    /** Also requires rightIcon — without it, neither the dropdown nor a plain right icon button renders. */
+    rightIconDropdown?: boolean;
+    menulistStyle?: React.CSSProperties;
+    menuItemStyle?: React.CSSProperties;
+    isLoading?: boolean;
+    divider?: boolean;
+    leftIconLoading?: boolean;
+    /** Capitalized "R" unlike leftIconLoading — same casing must match exactly, there is no rightIconLoading. */
+    RightIconLoading?: boolean;
+};