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

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

@@ -2,111 +2,137 @@
 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 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]`.
- */
+const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
+const rowStates_1 = require("../../Theme/tokens/builders/rowStates");
+const motion_1 = require("../../Theme/chakra/motion");
+const primitives_1 = require("../../Theme/tokens/primitives");
+const borderWidths_1 = require("../../Theme/tokens/primitives/borderWidths");
+const states_1 = require("../../Theme/tokens/primitives/states");
+const BUTTON_TRANSITION = [
+    (0, primitives_1.transitionFor)(["background-color", "border-color", "color", "box-shadow", "filter"]),
+    (0, primitives_1.transitionFor)(["transform"], "fast", "out"),
+].join(", ");
+const PRESS = {
+    [motion_1.MOTION_OK_QUERY]: {
+        "&:active:not(:disabled):not([data-loading]):not([aria-disabled=true])": {
+            transform: `scale(${primitives_1.MOTION_PRESS_SCALE})`,
+        },
+    },
+};
+const controlSize = (size) => {
+    const { height, fontSize, paddingX } = primitives_1.BUTTON_SIZES[size];
+    return { h: height, minW: height, fontSize, px: paddingX };
+};
+// NOTE: [500] alone measures ~4.2 on a dark canvas — resolved per-mode so outline/ghost/link text stays readable.
+// NOTE: a bare button sits on the canvas, a card or an overlay; dark overlays are the hardest plane.
+const onCanvasText = (theme, colorScheme) => (0, accentText_1.accentTextOnPlanes)(theme.colors[colorScheme], [
+    theme.colors.backgroundColor.main,
+    theme.colors.backgroundColor.base,
+    theme.colors.background[50],
+    theme.colors.surfaceRaised,
+]);
+// NOTE: [50] alone measured ~1.04 (invisible) in both modes — gray borrows the row-state steps.
 const onCanvasHoverBg = (theme, colorScheme, step) => {
     const scale = theme.colors[colorScheme];
-    return "opacity" in scale ? scale.opacity[step] : scale[50];
+    if ("opacity" in scale)
+        return scale.opacity[step];
+    if (colorScheme !== "gray")
+        return scale[50];
+    const rows = (0, rowStates_1.listRowBackgrounds)(theme.colors);
+    return step === 16 ? rows.active : rows.selectedActive;
 };
-/**
- * The rung one/two steps DARKER than the accent — what a filled button's hover/active needs so its
- * white label stays legible.
- *
- * Every dark scale runs dark -> light across 50 -> 900 (brand scales are rebuilt that way, utility
- * hues are reversed), the mirror of light mode. So "darker than [500]" is [600]/[700] in light but
- * [400]/[300] in dark. Hardcoding [600] would hand the label a LIGHTER fill in dark and drop it to
- * ~3.2 contrast.
- */
-const FILL_STEP_RUNGS = { light: [600, 700], dark: [400, 300] };
+const swatch = (theme, colorScheme) => theme.colors[colorScheme];
+const buttonSolidRung = (theme, colorScheme) => (0, filledSurface_1.solidFillRung)(swatch(theme, colorScheme), theme.colors.white, theme.colors.backgroundColor.main);
 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);
+const solidSurface = (theme, colorScheme) => {
+    if (colorScheme === "primary")
+        return (0, filledSurface_1.resolveFilledSurface)(theme.colors.primary, theme.colors);
+    const fill = theme.colors[colorScheme][buttonSolidRung(theme, colorScheme)];
+    const hoverFill = darkerFill(theme, colorScheme, 0);
+    const activeFill = darkerFill(theme, colorScheme, 1);
+    return {
+        fill,
+        color: labelFor(theme, fill),
+        hoverFill,
+        hoverColor: labelFor(theme, hoverFill),
+        activeFill,
+        activeColor: labelFor(theme, activeFill),
+    };
+};
+// NOTE: replaces Chakra's stock ring, which failed WCAG 1.4.11 on every brand — gated by focusRing.test.ts.
+const focusRing = (theme) => (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: BUTTON_TRANSITION,
+        ...(0, motion_1.reducedMotionSx)(),
         _disabled: {
-            opacity: 0.6,
+            opacity: states_1.DISABLED_OPACITY,
             cursor: "not-allowed",
         },
+        ...focusRing(theme),
     }),
     variants: {
         solid: ({ theme, colorScheme = "primary" }) => {
-            const fill = theme.colors[colorScheme][500];
-            const hoverFill = darkerFill(theme, colorScheme, 0);
-            const activeFill = darkerFill(theme, colorScheme, 1);
-            const hoverLabel = labelFor(theme, hoverFill);
+            const s = solidSurface(theme, colorScheme);
             return {
-                bg: fill,
-                color: labelFor(theme, fill),
+                bg: s.fill,
+                color: s.color,
                 _hover: {
-                    bg: hoverFill,
-                    color: hoverLabel,
-                    boxShadow: "sm",
+                    bg: s.hoverFill,
+                    color: s.hoverColor,
                     _disabled: {
-                        bg: hoverFill, // keep hover color on loading
-                        color: hoverLabel,
+                        bg: s.hoverFill, // keep hover color on loading
+                        color: s.hoverColor,
                     },
                 },
                 _active: {
-                    bg: activeFill,
-                    color: labelFor(theme, activeFill),
+                    bg: s.activeFill,
+                    color: s.activeColor,
                     boxShadow: "none",
                 },
                 _loading: {
-                    bg: hoverFill, // keep hover color while loading
-                    color: hoverLabel,
+                    bg: s.hoverFill, // keep hover color while loading
+                    color: s.hoverColor,
                     _hover: {
-                        bg: hoverFill,
-                        color: hoverLabel,
+                        bg: s.hoverFill,
+                        color: s.hoverColor,
                     },
                 },
+                ...PRESS,
+                ...focusRing(theme),
             };
         },
         outline: ({ theme, colorScheme = "primary" }) => {
-            const hoverFill = theme.colors[colorScheme][500];
-            const activeFill = darkerFill(theme, colorScheme, 0);
+            const ink = onCanvasText(theme, colorScheme);
             return {
-                border: "0.1rem solid",
-                borderColor: theme.colors[colorScheme][500],
-                color: onCanvasText(theme, colorScheme),
+                border: `${borderWidths_1.BORDER_WIDTHS.hairline} solid`,
+                borderColor: ink,
+                color: ink,
                 bg: "transparent",
                 _hover: {
-                    bg: hoverFill,
-                    borderColor: activeFill,
-                    // Was a hardcoded `theme.colors.white` — fails AA for any colorScheme whose [500]
-                    // doesn't clear white contrast (e.g. emerald/rosewood primary in dark, 3.38/3.46).
-                    color: labelFor(theme, hoverFill),
-                    _disabled: {
-                        //  bg: theme.colors[colorScheme][500],
-                        color: onCanvasText(theme, colorScheme),
-                    },
+                    bg: onCanvasHoverBg(theme, colorScheme, 16),
+                    _disabled: { bg: "transparent" },
                 },
                 _active: {
-                    bg: activeFill,
-                    color: labelFor(theme, activeFill),
+                    bg: onCanvasHoverBg(theme, colorScheme, 24),
                 },
                 _loading: {
-                    // bg: theme.colors[colorScheme][500],
-                    color: onCanvasText(theme, colorScheme),
+                    color: ink,
                 },
+                ...PRESS,
+                ...focusRing(theme),
             };
         },
         ghost: ({ theme, colorScheme = "primary" }) => ({
@@ -119,6 +145,8 @@ exports.Button = {
             _active: {
                 bg: onCanvasHoverBg(theme, colorScheme, 24),
             },
+            ...PRESS,
+            ...focusRing(theme),
         }),
         link: ({ theme, colorScheme = "primary" }) => ({
             color: onCanvasText(theme, colorScheme),
@@ -131,13 +159,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.
@@ -151,7 +182,6 @@ exports.Button = {
                 _hover: {
                     bgImage: bg,
                     filter: "brightness(0.92)",
-                    boxShadow: "md",
                     _disabled: { bgImage: bg, filter: "none" },
                 },
                 _active: {
@@ -164,38 +194,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,27 @@
 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"> & {
+import type { DataAttributes } from "../Common/dataAttributes";
+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">;
+/** Themed Chakra Button (default size "sm"); loading shows a spinner and keeps the width. */
+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 24 · sm 32 · 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';
+    /** Forwarded to the underlying `<button>` element. */
     ref?: React.Ref<HTMLButtonElement>;
+    /** Button content; takes precedence over `label`. */
     children?: React.ReactNode;
+    /** Opacity of the whole button, 0 to 1. */
     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,5 @@
-import { ButtonGroupIconProps } from "./ButtonGoupIconProps";
+import { ButtonGroupIconProps } from "./ButtonGroupIconProps";
+/** Attached left icon, text button and right icon or dropdown trigger; see ButtonGroupIconProps. */
 export default function ButtonGroupIcon({ leftIcon, rightIcon, onLeftIconClick, onRightIconClick, buttonText, onButtonClick, onButtongroupClick, size, variant, color, buttonGroupStyle, buttonGroupLeftIconStyle, buttonGroupRightIconStyle, buttonStyle, onBlurLeftIcon, onBlurRightIcon, dropdownOptions, // New prop for dropdown options
 onDropdownOptionClick, // New prop to handle option clicks
 rightIconDropdown, menulistStyle, menuItemStyle, isLoading, divider, leftIconLoading, RightIconLoading, }: ButtonGroupIconProps): import("react/jsx-runtime").JSX.Element;

package/dist/Components/ButtonGroupIcon/ButtonGroupIcon.js

@@ -8,6 +8,9 @@ const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const gradientInk_1 = require("../../Theme/tokens/builders/gradientInk");
 const color_1 = require("../../Theme/tokens/builders/color");
 const rafThrottle_1 = require("../../Utils/rafThrottle");
+const motion_1 = require("../../Theme/tokens/primitives/motion");
+const BACKGROUND_TRANSITION = (0, motion_1.transitionFor)(["background"]);
+/** Attached left icon, text button and right icon or dropdown trigger; see ButtonGroupIconProps. */
 function ButtonGroupIcon({ leftIcon, rightIcon, onLeftIconClick, onRightIconClick, buttonText, onButtonClick, onButtongroupClick, size, variant, color, buttonGroupStyle, buttonGroupLeftIconStyle, buttonGroupRightIconStyle, buttonStyle, onBlurLeftIcon, onBlurRightIcon, dropdownOptions, // New prop for dropdown options
 onDropdownOptionClick, // New prop to handle option clicks
 rightIconDropdown, menulistStyle, menuItemStyle, isLoading, divider = true, leftIconLoading, RightIconLoading, }) {
@@ -40,14 +43,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,12 +66,8 @@ 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.
+            : 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",
@@ -80,10 +76,10 @@ rightIconDropdown, menulistStyle, menuItemStyle, isLoading, divider = true, left
                                     px: "0.625rem",
                                     py: "0.5rem",
                                     borderRadius: "lg",
-                                    fontSize: "13px",
+                                    fontSize: "xs-plus",
                                     fontWeight: 500,
-                                    color: theme.colors.gray[700],
-                                    transition: "background 0.12s",
+                                    color: theme.colors.text[700],
+                                    transition: BACKGROUND_TRANSITION,
                                     "& svg": { width: "16px", height: "16px" },
                                     ...(divider
                                         ? {
@@ -93,8 +89,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,61 @@
+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 = {
+    /** Icon button at the left edge of the group; omitted entirely when unset. */
+    leftIcon?: ReactElement;
+    /** Icon button at the right edge; with `rightIconDropdown` it opens the `dropdownOptions` menu instead. */
+    rightIcon?: ReactElement;
+    /** Fires when the left icon button is clicked. */
+    onLeftIconClick?: () => void;
+    /** Fires when the right icon button is clicked; with `rightIconDropdown` it also toggles the menu. */
+    onRightIconClick?: () => void;
+    /** Auto-wrapped in a tooltip showing full text, but only when it visually truncates (maxW 200px). */
+    buttonText: string;
+    /** Fires when the centre text button is clicked. */
+    onButtonClick?: () => void;
+    /** Fires on every click inside the group via DOM bubbling too — not just clicks on group chrome. */
+    onButtongroupClick?: () => void;
+    /** Size of every segment; unset keeps the theme's default button size. */
+    size?: "lg" | "md" | "sm" | "xs" | "xl";
+    /** "gradient" paints one themed gradient across the whole group, with transparent segments; the rest style each segment. */
+    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";
+    /** Inline style on the group wrapper, not on individual buttons. */
+    buttonGroupStyle?: React.CSSProperties;
+    /** Inline style on the left icon button. */
+    buttonGroupLeftIconStyle?: React.CSSProperties;
+    /** Inline style on the right icon button, or the dropdown trigger when `rightIconDropdown` is set. */
+    buttonGroupRightIconStyle?: React.CSSProperties;
+    /** Inline style on the centre text button. */
+    buttonStyle?: React.CSSProperties;
+    /** Fires when the left icon button loses focus. */
+    onBlurLeftIcon?: () => void;
+    /** Fires when the right icon button loses focus. */
+    onBlurRightIcon?: () => void;
+    /** Rendered only when BOTH rightIcon and rightIconDropdown are also set — otherwise silently unused. */
+    dropdownOptions?: {
+        label: string;
+        id: string | number;
+        image?: ReactElement | undefined;
+    }[];
+    /** Fires when a menu option is chosen, with the click event and the option; the menu closes first. */
+    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;
+    /** Inline style on the dropdown menu list; used only when the dropdown renders. */
+    menulistStyle?: React.CSSProperties;
+    /** Inline style on each dropdown item; used only when the dropdown renders. */
+    menuItemStyle?: React.CSSProperties;
+    /** Shows a spinner on the centre text button only; icon buttons have their own loading flags. */
+    isLoading?: boolean;
+    /** Draws a rule between dropdown items. Defaults to true; false gives inset, rounded items instead. */
+    divider?: boolean;
+    /** Shows a spinner on the left icon button. */
+    leftIconLoading?: boolean;
+    /** Capitalized "R" unlike leftIconLoading — same casing must match exactly, there is no rightIconLoading. */
+    RightIconLoading?: boolean;
+};

package/dist/Components/ButtonGroupIcon/ButtonGroupIconProps.js

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

package/dist/Components/CalendarGrid/CalendarGrid.d.ts

@@ -0,0 +1,4 @@
+import type { CalendarGridProps } from "./CalendarGridProps";
+/** Controlled month, week or day grid that places date-granularity events as chips and spanning bars, with a toolbar and arrow-key navigation. */
+declare const CalendarGrid: ({ view, date, events, onViewChange, onDateChange, onEventClick, renderDayCell, weekStartsOn, locale, isLoading, labels, }: CalendarGridProps) => import("react/jsx-runtime").JSX.Element;
+export default CalendarGrid;